zhaowenkang
5 months ago
16 changed files with 1931 additions and 702 deletions
-
1492work/package-lock.json
-
16work/package.json
-
12work/src/api/HomeworkApi.js
-
9work/src/api/ShowApi.js
-
2work/src/api/UpdateWorkApi.js
-
39work/src/api/index.js
-
BINwork/src/assets/bg.png
-
BINwork/src/assets/bg@2x.png
-
BINwork/src/assets/bg@3x.png
-
7work/src/assets/main.css
-
4work/src/main.js
-
26work/src/router/index.js
-
366work/src/views/DoHomeworkView.vue
-
2work/src/views/HomeWork.vue
-
67work/src/views/WorkDetail.vue
-
563work/src/views/WorksShowView.vue
1492
work/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,12 @@ |
|||
import service from "."; |
|||
const homeworkApi = { |
|||
//获取作业
|
|||
getHomeworkQuestion(id) { |
|||
return service.post('api/homework_client/gethomeworkquestion', {id: id}); |
|||
}, |
|||
//提交作业
|
|||
submitHomework(homework,groupId) { |
|||
return service.post('api/homework_client/commithomework', {homework,groupId}); |
|||
} |
|||
} |
|||
export default homeworkApi; |
|||
@ -0,0 +1,9 @@ |
|||
import service from "." |
|||
|
|||
const ShowApi = { |
|||
//获取作业列表
|
|||
getWorks(){ |
|||
return service.post('/api/homework_client/gethomeworklist') |
|||
}, |
|||
} |
|||
export default ShowApi; |
|||
|
After Width: 375 | Height: 727 | Size: 76 KiB |
|
After Width: 750 | Height: 1454 | Size: 255 KiB |
|
After Width: 1125 | Height: 2181 | Size: 522 KiB |
@ -0,0 +1,7 @@ |
|||
|
|||
body { |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; |
|||
} |
|||
*{ |
|||
margin: 0; |
|||
} |
|||
@ -0,0 +1,366 @@ |
|||
<template> |
|||
<div class="container"> |
|||
<div class="main"> |
|||
<div class="content"> |
|||
<div class="title"> |
|||
{{ questionList[0].name }} |
|||
</div> |
|||
<template v-for="(question, questionIndex) in questionList" :key="questionIndex"> |
|||
<!-- 单选 --> |
|||
<template v-if="question.type == 1"> |
|||
<div class="question"> |
|||
{{ questionIndex + 1 }}. {{ question.description }}（单选） |
|||
</div> |
|||
<div v-for="(answer, index) in question.content" :key="index" class="answer"> |
|||
<div class="selected"> |
|||
<input :id="`select-${questionIndex}-${index}`" :name="`radio-group-${questionIndex}`" type="radio" |
|||
v-model="selectedAnswers[questionIndex]" |
|||
:value="answer.text" |
|||
> |
|||
<label :for="`select-${questionIndex}-${index}`">{{ answer.text }}</label> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 多选 --> |
|||
<template v-if="question.type == 2"> |
|||
<div class="question"> |
|||
{{ questionIndex + 1 }}. {{ question.description }}（多选） |
|||
</div> |
|||
<div v-for="(answer, index) in question.content" :key="index" class="answer"> |
|||
<div class="selected"> |
|||
<input :id="`checkbox-${questionIndex}-${index}`" name="checkbox" type="checkbox" |
|||
v-model="selectedAnswers[questionIndex]" |
|||
:value="answer.text" |
|||
> |
|||
<label :for="`checkbox-${questionIndex}-${index}`">{{ answer.text }}</label> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<!-- 简答题 --> |
|||
<template v-if="question.type == 3"> |
|||
<div class="Short-answers"> |
|||
<div class="question"> |
|||
{{ questionIndex + 1 }}. {{ question.description }} |
|||
</div> |
|||
<el-input |
|||
v-model="editorTitles[questionIndex]" |
|||
style="width: 100%; padding: 3.5%" |
|||
size="large" |
|||
placeholder="请输入标题(5-100字符)" |
|||
maxlength="100" |
|||
minlength="5" |
|||
show-word-limit |
|||
/> |
|||
<div class="editor"> |
|||
<div style="border: 1px solid #ccc"> |
|||
<Toolbar |
|||
style="border-bottom: 1px solid #ccc" |
|||
:editor="editorRefs[questionIndex]" |
|||
:defaultConfig="toolbarConfig" |
|||
:mode="mode" |
|||
/> |
|||
<Editor |
|||
style="height: 500px; overflow-y: hidden;" |
|||
v-model="editorContents[questionIndex]" |
|||
:defaultConfig="editorConfig" |
|||
:mode="mode" |
|||
@onCreated="editor => handleCreated(editor, questionIndex)" |
|||
|
|||
/> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</template> |
|||
|
|||
<!-- 提交按钮 --> |
|||
<div class="submit"> |
|||
<img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png" @click="submit"> |
|||
</div> |
|||
<!-- 提交次数 --> |
|||
<div class="submit-times"> |
|||
<span>您已提交{{sub}}次，每个作业可以提交3次</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</template> |
|||
|
|||
<script setup> |
|||
import { onMounted, ref, shallowRef } from 'vue'; |
|||
import homeworkApi from "@/api/HomeworkApi.js"; |
|||
import { ElMessage } from "element-plus"; |
|||
import '@wangeditor/editor/dist/css/style.css' // 引入 css |
|||
import { onBeforeUnmount } from 'vue' |
|||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' |
|||
import {useRoute, useRouter} from "vue-router"; |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
let groupId = route.params.id; |
|||
let sub = route.params.sub; |
|||
// 编辑器实例，必须用 shallowRef |
|||
const editorRefs = ref([]); |
|||
|
|||
// 内容 HTML |
|||
const editorContents = ref([]); |
|||
const editorTitles = ref([]); |
|||
|
|||
// 模拟 ajax 异步获取内容 |
|||
onMounted(() => { |
|||
setTimeout(() => { |
|||
editorContents.value = editorContents.value.map(() => ''); |
|||
}, 1500) |
|||
}) |
|||
|
|||
const toolbarConfig = { |
|||
excludeKeys: [ |
|||
'justify', |
|||
'table', |
|||
'codeBlock', |
|||
'divider', |
|||
'undo', |
|||
'redo', |
|||
'insertImage', // 去掉插入图片 |
|||
'insertLink', // 去掉插入链接 |
|||
'insertTable', // 去掉插入表格 |
|||
'video', |
|||
'group-more-style', |
|||
'group-image', |
|||
'group-video', |
|||
'fullScreen', |
|||
'todo' |
|||
], |
|||
insertKeys: { |
|||
index: 0, |
|||
keys: ['bold', 'italic'] |
|||
} |
|||
} |
|||
|
|||
|
|||
const editorConfig = { |
|||
placeholder: '请输入内容...', |
|||
toolbarKeys: toolbarConfig.toolbarKeys |
|||
} |
|||
|
|||
// 组件销毁时，也及时销毁编辑器 |
|||
onBeforeUnmount(() => { |
|||
editorRefs.value.forEach(editor => { |
|||
if (editor == null) return; |
|||
editor.destroy(); |
|||
}); |
|||
}) |
|||
|
|||
const handleCreated = (editor, questionIndex) => { |
|||
editorRefs.value[questionIndex] = editor; // 记录 editor 实例 |
|||
editor.config.toolbarConfig = toolbarConfig; // 确保配置正确应用 |
|||
} |
|||
|
|||
const questionList = ref([]); |
|||
|
|||
function getQuestionList() { |
|||
console.log("ljghasjkhdjksahjkhsajkhjkasd",groupId); |
|||
homeworkApi.getHomeworkQuestion(groupId).then(resp => { |
|||
if (resp.code == 200) { |
|||
questionList.value = resp.data; |
|||
for (let i = 0; i < questionList.value.length; i++) { |
|||
questionList.value[i].content = JSON.parse(questionList.value[i].content); |
|||
// 初始化 editorTitles 和 editorContents |
|||
editorTitles.value.push(''); |
|||
editorContents.value.push(''); |
|||
// 初始化 selectedAnswers 为数组 |
|||
selectedAnswers.value.push([]); |
|||
} |
|||
} else { |
|||
ElMessage.error("未知错误，请联系管理员"); |
|||
} |
|||
}); |
|||
} |
|||
getQuestionList(); |
|||
|
|||
// 提交作业 |
|||
const homework = ref([]); |
|||
|
|||
const selectedAnswers = ref([]); |
|||
questionList.value.forEach(() => { |
|||
selectedAnswers.value.push([]); |
|||
}); |
|||
|
|||
// 上一个页面传递的参数 groupId |
|||
function submit() { |
|||
homework.value = []; |
|||
for (let i = 0; i < questionList.value.length; i++) { |
|||
if (questionList.value[i].type == 1 || questionList.value[i].type == 2) { |
|||
homework.value.push({ |
|||
"id": questionList.value[i].id, |
|||
"answer": selectedAnswers.value[i], |
|||
"type": questionList.value[i].type |
|||
}); |
|||
} else if (questionList.value[i].type == 3) { |
|||
const editor = editorRefs.value[i]; |
|||
const plainText = editor ? editor.getText() : ''; |
|||
homework.value.push({ |
|||
"id": questionList.value[i].id, |
|||
"answer": [editorTitles.value[i], plainText], |
|||
"type": questionList.value[i].type |
|||
}); |
|||
} |
|||
} |
|||
let groupId = route.params.id; |
|||
let sub = route.params.sub; |
|||
if (sub <=2){ |
|||
homeworkApi.submitHomework(homework.value, groupId).then(resp => { |
|||
if (resp.code == 200) { |
|||
ElMessage.success("提交成功"); |
|||
homework.value = []; |
|||
router.push("/show"); |
|||
} else { |
|||
ElMessage.error("未知错误，请联系管理员"); |
|||
} |
|||
}); |
|||
}else { |
|||
ElMessage.error("提交失败您，已提交3次，每个作业可以提交3次"); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
text-align: center; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
width: 34.375rem; |
|||
height: 114.399375rem; |
|||
} |
|||
|
|||
.main { |
|||
background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png"); |
|||
background-size: contain; |
|||
background-position: center 0; |
|||
background-repeat: no-repeat; |
|||
margin: 0; |
|||
width: 100%; |
|||
height: 1830px; |
|||
text-align: center; |
|||
position: relative; |
|||
} |
|||
|
|||
.content { |
|||
position: absolute; |
|||
width: 93%; |
|||
height: 80%; |
|||
overflow-y: scroll; |
|||
/* 居中显示 */ |
|||
left: 50%; |
|||
transform: translate(-50%, 0); |
|||
top: 12.5%; |
|||
text-align: left; |
|||
} |
|||
|
|||
/* 滚动条样式 */ |
|||
.content::-webkit-scrollbar { |
|||
width: 3px; |
|||
} |
|||
|
|||
.content::-webkit-scrollbar-track { |
|||
background: #f1f1f1; /* 滚动条轨道的背景色 */ |
|||
} |
|||
|
|||
.content::-webkit-scrollbar-thumb { |
|||
background: #d9d9d9; /* 滚动条滑块的颜色 */ |
|||
border-radius: 6px; /* 滑块的圆角 */ |
|||
} |
|||
|
|||
.title { |
|||
font-size: 1.65rem; |
|||
font-weight: 600; |
|||
/* 居中显示 */ |
|||
text-align: center; |
|||
/*字体颜色*/ |
|||
color: #3f27b1; |
|||
} |
|||
|
|||
.question { |
|||
padding-top: 10%; |
|||
padding-left: 4%; |
|||
font-size: 1.35rem; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.answer { |
|||
padding-top: 2.5%; |
|||
padding-left: 7%; |
|||
font-size: 1.35rem; |
|||
} |
|||
|
|||
.selected { |
|||
display: block; |
|||
padding: 1% 0 1.2% 0; |
|||
} |
|||
|
|||
|
|||
.selected input[name="checkbox"] { |
|||
margin-right: 1%; |
|||
width: 1.2rem; |
|||
height: 1rem; |
|||
/* 透明度 */ |
|||
opacity: 0.8; |
|||
cursor: pointer; /* 鼠标悬停时变成手的形状 */ |
|||
} |
|||
.selected input[type="radio"]{ |
|||
margin-right: 1%; |
|||
width: 1.2rem; |
|||
height: 1rem; |
|||
/* 透明度 */ |
|||
opacity: 0.8; |
|||
cursor: pointer; /* 鼠标悬停时变成手的形状 */ |
|||
} |
|||
|
|||
/* 单选按钮选中时的样式 */ |
|||
.selected input[type="radio"]:checked { |
|||
accent-color: blue; /* 设置选中时的颜色为蓝色 */ |
|||
} |
|||
|
|||
/* 多选按钮选中时的样式 */ |
|||
.selected input[type="checkbox"]:checked { |
|||
accent-color: blue; /* 设置选中时的颜色为蓝色 */ |
|||
} |
|||
|
|||
.selected label { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.editor { |
|||
padding-top: 2.5%; |
|||
padding-left: 3.5%; |
|||
padding-right: 3.5%; |
|||
height: 30rem; |
|||
} |
|||
|
|||
.Short-answers { |
|||
height: 48rem; |
|||
} |
|||
|
|||
.submit { |
|||
display: block; |
|||
text-align: center; |
|||
} |
|||
|
|||
.submit img { |
|||
padding-top: 2.5%; |
|||
padding-left: 3.5%; |
|||
padding-right: 3.5%; |
|||
cursor: pointer; |
|||
width: 67%; |
|||
} |
|||
|
|||
.submit-times { |
|||
font-size: 0.8rem; |
|||
color: #858585; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,563 @@ |
|||
<script setup> |
|||
import { ref } from 'vue'; |
|||
import ShowApi from '../api/ShowApi'; |
|||
import { format } from 'date-fns'; |
|||
import {useRouter} from "vue-router"; |
|||
import {ElMessage} from "element-plus"; |
|||
|
|||
const router = useRouter() |
|||
|
|||
//作业展示列表 |
|||
const works = ref([]); |
|||
function loadWorks() { |
|||
ShowApi.getWorks().then(result => { |
|||
works.value = result.data; |
|||
console.log(works.value); |
|||
console.log(result.data) |
|||
works.value.forEach(work => { |
|||
let date = work.endData; |
|||
work.endData = format(new Date(date), 'yyyy-MM-dd'); |
|||
}); |
|||
}) |
|||
} |
|||
loadWorks(); |
|||
//跳转写作业页面 |
|||
function writeWorks(id,sub){ |
|||
if(sub >= 3){ |
|||
ElMessage.error('每个作业可提交3次，您已提交3次。') |
|||
}else{ |
|||
router.push({ |
|||
path:`/doWork/${id}/${sub}` |
|||
}) |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="container"> |
|||
<div class="works"> |
|||
<div class="work-header"> |
|||
<img class="ketangzuoye" src="http://39.101.133.168:8857/LiveActivity/img/ketangzuoye.cc888815.png"> |
|||
<img class="book" |
|||
src="https://img.js.design/assets/img/65f9235904fb00a3ea731672.png#dcda48ae8da37daeccd6583d45c7790b"> |
|||
</div> |
|||
<div class="work-list"> |
|||
<div class="list" v-for="work in works"> |
|||
<div class="work-item"> |
|||
<div class="work-name"> |
|||
{{ work.name }} |
|||
</div> |
|||
<div class="work-content"> |
|||
<div class="work-time"> |
|||
<span class="deadline">截止时间：{{ work.endData }}</span> |
|||
<!-- 作业提价状态 --> |
|||
<div v-if="work.submit == 0" class="work-status">未提交</div> |
|||
<div v-else class="work-status2">已提交</div> |
|||
</div> |
|||
<div class="work-bottem"> |
|||
<span class="write" @click="writeWorks(work.groupId,work.submit)">写作业</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.container { |
|||
width: 27%; /* 假设桌面布局的容器宽度为 80% */ |
|||
margin: 0 auto; /* 居中对齐 */ |
|||
} |
|||
body{ |
|||
margin: 0; |
|||
} |
|||
.work-name { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
font-size: 1.5vw; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
color: rgba(53, 56, 112, 1); |
|||
text-align: left; |
|||
/*左对齐*/ |
|||
vertical-align: top; |
|||
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
|||
display: flex; |
|||
/* 启用 Flexbox 布局 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
height: 30%; |
|||
/* 设置高度，根据需要调整 */ |
|||
width: 50%; |
|||
/* 如果需要，也可以设置宽度 */ |
|||
} |
|||
|
|||
|
|||
.ketangzuoye { |
|||
margin-top: 2vh; |
|||
margin-left: 2vw; |
|||
width: 43%; |
|||
} |
|||
|
|||
.book { |
|||
float: right; |
|||
margin-right: 1vw; |
|||
width: 30%; |
|||
} |
|||
|
|||
|
|||
/* 手机 */ |
|||
@media (max-width: 768px) { |
|||
.container { |
|||
width: 100%; |
|||
margin: auto; |
|||
} |
|||
.works { |
|||
/* ../api/ShowApi |
|||
work\src\assets\bg@3x.png */ |
|||
background-image: url('../assets/bg.png'); |
|||
background-size: 100% 100%; |
|||
background-color: #8f98f6; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
margin: auto; |
|||
} |
|||
|
|||
.work-list { |
|||
width: 95%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin: auto; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 97%; |
|||
height: 16vh; |
|||
opacity: 1; |
|||
border-radius: 10px; |
|||
background-color: rgba(255, 225, 174, 1); |
|||
margin-bottom: 3%; |
|||
} |
|||
|
|||
.work-item { |
|||
|
|||
width: 87%; |
|||
height: 63%; |
|||
padding: 10px; |
|||
position: relative; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%); |
|||
border-radius: 10px; |
|||
border-radius: 10px; |
|||
} |
|||
.work-name { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
font-size: 4vw; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
color: rgba(53, 56, 112, 1); |
|||
text-align: left; |
|||
/*左对齐*/ |
|||
vertical-align: top; |
|||
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
|||
display: flex; |
|||
/* 启用 Flexbox 布局 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
height: 30%; |
|||
/* 设置高度，根据需要调整 */ |
|||
width: 50%; |
|||
/* 如果需要，也可以设置宽度 */ |
|||
} |
|||
|
|||
.work-content { |
|||
width: 95%; |
|||
height: 35%; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
display: flex; |
|||
} |
|||
|
|||
.work-time { |
|||
position: absolute; |
|||
display: flex; |
|||
width: 70%; |
|||
bottom: 12%; |
|||
} |
|||
|
|||
.deadline { |
|||
color: rgba(142, 142, 142, 1); |
|||
font-size: 3.6vw; |
|||
opacity: 1; |
|||
align-items: center; |
|||
padding-top: 0.5vw; |
|||
/* 水平居中 */ |
|||
/* justify-content: center; */ |
|||
} |
|||
|
|||
.work-status { |
|||
font-size: 3.8vw; |
|||
display: inline-block; |
|||
background: rgba(53, 56, 112, 0.1); |
|||
padding: 1% 3.5%; |
|||
text-align: center; |
|||
color: #353870; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
.work-status2 { |
|||
font-size: 3.8vw; |
|||
display: inline-block; |
|||
background: #ffe1ae; |
|||
padding: 1% 3.5%; |
|||
text-align: center; |
|||
color: #353870; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.work-bottem { |
|||
cursor: pointer; |
|||
display: flex; |
|||
position: absolute; |
|||
width: 28%; |
|||
height: 70%; |
|||
right: 0; |
|||
bottom: 2%; |
|||
opacity: 1; |
|||
border-radius: 50px; |
|||
background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%); |
|||
border: 1px solid #a5e0f3; |
|||
justify-content: center; |
|||
/* 水平居中 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
text-align: center; |
|||
/* 确保文本在其容器内居中 */ |
|||
} |
|||
|
|||
.write { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
padding: auto; |
|||
font-size: 18px; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
line-height: 26.06px; |
|||
color: rgba(255, 255, 255, 1); |
|||
|
|||
} |
|||
} |
|||
|
|||
/* 平板 */ |
|||
@media (min-width: 768px) and (max-width:1280px) { |
|||
.container { |
|||
width: 100%; |
|||
margin: auto; |
|||
} |
|||
.works { |
|||
/* ../api/ShowApi |
|||
work\src\assets\bg@3x.png */ |
|||
background-image: url('../assets/bg@2x.png'); |
|||
background-color: #8f98f6; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
margin: auto; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.work-list { |
|||
width: 95%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin: auto; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 97%; |
|||
height: 17vh; |
|||
opacity: 1; |
|||
border-radius: 10px; |
|||
background-color: rgba(255, 225, 174, 1); |
|||
margin-bottom: 3%; |
|||
} |
|||
|
|||
.work-item { |
|||
|
|||
width: 90%; |
|||
height: 70%; |
|||
padding: 10px; |
|||
position: relative; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%); |
|||
border-radius: 10px; |
|||
border-radius: 10px; |
|||
} |
|||
.work-name { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
font-size: 1.6rem; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
color: rgba(53, 56, 112, 1); |
|||
text-align: left; |
|||
/*左对齐*/ |
|||
vertical-align: top; |
|||
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
|||
display: flex; |
|||
/* 启用 Flexbox 布局 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
height: 30%; |
|||
/* 设置高度，根据需要调整 */ |
|||
width: 50%; |
|||
/* 如果需要，也可以设置宽度 */ |
|||
} |
|||
.work-content { |
|||
width: 90%; |
|||
height: 35%; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
display: flex; |
|||
} |
|||
|
|||
.work-time { |
|||
position: absolute; |
|||
display: flex; |
|||
width: 70%; |
|||
bottom: 20%; |
|||
} |
|||
|
|||
.deadline { |
|||
color: rgba(142, 142, 142, 1); |
|||
font-size: 14px; |
|||
opacity: 1; |
|||
} |
|||
|
|||
.work-status { |
|||
display: inline-block; |
|||
background: rgba(53, 56, 112, 0.1); |
|||
padding: 0.5% 2%; |
|||
text-align: center; |
|||
color: #353870; |
|||
font-size: 1rem; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
.work-status2 { |
|||
display: inline-block; |
|||
background: #ffe1ae; |
|||
padding: 0.5% 2%; |
|||
text-align: center; |
|||
color: #353870; |
|||
font-size: 1rem; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.work-bottem { |
|||
cursor: pointer; |
|||
display: flex; |
|||
position: absolute; |
|||
width: 25%; |
|||
height: 70%; |
|||
right: 0%; |
|||
bottom: 2%; |
|||
opacity: 1; |
|||
border-radius: 50px; |
|||
background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%); |
|||
border: 1px solid #a5e0f3; |
|||
justify-content: center; |
|||
/* 水平居中 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
text-align: center; |
|||
/* 确保文本在其容器内居中 */ |
|||
} |
|||
|
|||
.write { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
padding: auto; |
|||
font-size: 1.125rem; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
line-height: 26.06px; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
} |
|||
/* 电脑 */ |
|||
@media (min-width: 1280px) { |
|||
.container { |
|||
width: 27%; |
|||
margin: auto; |
|||
} |
|||
.works { |
|||
/* ../api/ShowApi |
|||
work\src\assets\bg@3x.png */ |
|||
background-image: url('../assets/bg@3x.png'); |
|||
background-color: #8f98f6; |
|||
width: 100%; |
|||
min-height: 100vh; |
|||
position: relative; |
|||
margin: auto; |
|||
background-size: 100% 100%; |
|||
} |
|||
.work-name { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
font-size: 1.4vw; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
color: rgba(53, 56, 112, 1); |
|||
text-align: left; |
|||
/*左对齐*/ |
|||
vertical-align: top; |
|||
/* 这个属性在 Flex 容器中不起作用，将被移除 */ |
|||
display: flex; |
|||
/* 启用 Flexbox 布局 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
height: 30%; |
|||
/* 设置高度，根据需要调整 */ |
|||
width: 70%; |
|||
} |
|||
|
|||
.work-list { |
|||
width: 95%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
margin: auto; |
|||
} |
|||
|
|||
.list { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 97%; |
|||
height: 17vh; |
|||
opacity: 1; |
|||
border-radius: 10px; |
|||
background-color: rgba(255, 225, 174, 1); |
|||
margin-bottom: 3%; |
|||
} |
|||
|
|||
.work-item { |
|||
|
|||
width: 90%; |
|||
height: 70%; |
|||
padding: 10px; |
|||
position: relative; |
|||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(250, 245, 235, 1) 100%); |
|||
border-radius: 10px; |
|||
border-radius: 10px; |
|||
} |
|||
.work-content { |
|||
width: 90%; |
|||
height: 35%; |
|||
position: absolute; |
|||
bottom: 10%; |
|||
display: flex; |
|||
} |
|||
|
|||
.work-time { |
|||
position: absolute; |
|||
display: flex; |
|||
width: 70%; |
|||
bottom: 15%; |
|||
} |
|||
|
|||
.deadline { |
|||
color: rgba(142, 142, 142, 1); |
|||
font-size: 14px; |
|||
opacity: 1; |
|||
align-items: center; |
|||
padding-top: 0.2vw; |
|||
} |
|||
|
|||
.work-status { |
|||
display: inline-block; |
|||
background: rgba(53, 56, 112, 0.1); |
|||
padding: 0.5% 2%; |
|||
text-align: center; |
|||
color: #353870; |
|||
font-size: 1rem; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
.work-status2 { |
|||
display: inline-block; |
|||
background: #ffe1ae; |
|||
padding: 0.5% 2%; |
|||
text-align: center; |
|||
color: #353870; |
|||
font-size: 1rem; |
|||
border-radius: 5px; |
|||
opacity: 2; |
|||
margin-left: 5px; |
|||
} |
|||
.work-bottem { |
|||
cursor: pointer; |
|||
display: flex; |
|||
position: absolute; |
|||
width: 25%; |
|||
height: 70%; |
|||
right: 0%; |
|||
bottom: 2%; |
|||
opacity: 1; |
|||
border-radius: 50px; |
|||
background: linear-gradient(270deg, rgba(4, 15, 179, 1) 0%, rgba(120, 89, 255, 1) 100%); |
|||
border: 1px solid #a5e0f3; |
|||
justify-content: center; |
|||
/* 水平居中 */ |
|||
align-items: center; |
|||
/* 垂直居中 */ |
|||
text-align: center; |
|||
/* 确保文本在其容器内居中 */ |
|||
} |
|||
|
|||
.write { |
|||
opacity: 1; |
|||
/** 文本1 */ |
|||
padding: auto; |
|||
font-size: 1.125rem; |
|||
font-weight: 700; |
|||
letter-spacing: 0px; |
|||
line-height: 26.06px; |
|||
color: rgba(255, 255, 255, 1); |
|||
} |
|||
|
|||
} |
|||
|
|||
.work-list{ |
|||
margin-top: 12%; |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue