You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
712 lines
16 KiB
712 lines
16 KiB
<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" @click="writeWorks(work.groupId, work.submit)">
|
|
<span class="write">写作业</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 27%;
|
|
/* 假设桌面布局的容器宽度为 80% */
|
|
margin: 0 auto;
|
|
/* 居中对齐 */
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
font-size: 3.6vw;
|
|
font-weight: 700;
|
|
letter-spacing: 0px;
|
|
color: rgba(53, 56, 112, 1);
|
|
text-align: left;
|
|
width: 50%;
|
|
height: 10vw;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制显示两行文本 */
|
|
text-overflow: ellipsis;
|
|
/* padding-top: 2vw; */
|
|
}
|
|
|
|
.work-content {
|
|
width: 95%;
|
|
height: vw;
|
|
position: absolute;
|
|
bottom: 4%;
|
|
display: flex;
|
|
}
|
|
|
|
.work-time {
|
|
position: absolute;
|
|
display: flex;
|
|
width: 70%;
|
|
bottom: 12%;
|
|
}
|
|
|
|
.deadline {
|
|
color: rgba(142, 142, 142, 1);
|
|
font-size: 2.5vw;
|
|
opacity: 1;
|
|
align-items: center;
|
|
padding-top: 0.5vw;
|
|
/* 水平居中 */
|
|
/* justify-content: center; */
|
|
}
|
|
|
|
.work-status {
|
|
font-size: 2.5vw;
|
|
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: 2.5vw;
|
|
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: 1023px) {
|
|
.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;
|
|
font-size: 1.2vw; /* 尝试使用固定像素值 */
|
|
font-weight: 700;
|
|
color: rgba(53, 56, 112, 1);
|
|
text-align: left;
|
|
width: 50%;
|
|
height: 3vw;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制显示两行文本 */
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
.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: 1vw;
|
|
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: 1vw;
|
|
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: 1vw;
|
|
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.5vw;
|
|
font-weight: 700;
|
|
letter-spacing: 0px;
|
|
line-height: 26.06px;
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
}
|
|
/* 平板 */
|
|
@media (min-width: 766px) and (max-width:1023px) {
|
|
.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: 2.7vw;
|
|
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: 6vw;
|
|
/* 设置高度，根据需要调整 */
|
|
width: 50%;
|
|
/* 如果需要，也可以设置宽度 */
|
|
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制显示两行文本 */
|
|
text-overflow: ellipsis;
|
|
padding: 1vw;
|
|
}
|
|
|
|
.work-content {
|
|
width: 90%;
|
|
height: 35%;
|
|
position: absolute;
|
|
bottom: 5%;
|
|
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-device-width: 768px) and (max-device-width: 1023px) {
|
|
.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: 3vw;
|
|
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: 7vw;
|
|
/* 设置高度，根据需要调整 */
|
|
width: 50%;
|
|
/* 如果需要，也可以设置宽度 */
|
|
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2; /* 限制显示两行文本 */
|
|
text-overflow: ellipsis;
|
|
padding: 1vw;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
.work-list {
|
|
margin-top: 12%;
|
|
}
|
|
</style>
|