Compare commits
merge into: donghanyang:admin_zwk
donghanyang:admin_zwk
donghanyang:dev
donghanyang:ql_yjt
donghanyang:qt_lh
donghanyang:test
pull from: donghanyang:dev
donghanyang:admin_zwk
donghanyang:dev
donghanyang:ql_yjt
donghanyang:qt_lh
donghanyang:test
6 Commits
| Author | SHA1 | Message | Date |
|---|---|---|---|
zhaowenkang
|
5bf5a76272 |
bug修改
|
10 months ago |
|
zhaowenkang
|
536506069e |
bug修改
|
10 months ago |
|
zhaowenkang
|
9de048d82e |
bug修改
|
10 months ago |
|
zhaowenkang
|
9e6782bf14 |
导出数据匹配修改
|
10 months ago |
|
zhaowenkang
|
6d9bf01ffb |
局域网内访问
|
10 months ago |
|
zhaowenkang
|
4ac5d919ed |
修改俱乐部的绑定
|
10 months ago |
12 changed files with 416 additions and 1164 deletions
-
2work/package.json
-
4work/src/api/LoginApi.js
-
19work/src/api/index.js
-
26work/src/router/index.js
-
89work/src/views/AddWork.vue
-
366work/src/views/DoHomeworkView.vue
-
35work/src/views/HomeWork.vue
-
16work/src/views/Login.vue
-
403work/src/views/UpdateWork.vue
-
17work/src/views/WorkDetail.vue
-
563work/src/views/WorksShowView.vue
-
2work/vite.config.js
@ -1,366 +0,0 @@ |
|||||
<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> |
|
||||
@ -1,563 +0,0 @@ |
|||||
<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