Link_Homework_Vue/work/src/views/WorksShowView.vue

<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>