Link_Homework_Vue/work/src/views/WorksShowView.vue

<script setup>
import { ref } from 'vue';
import ShowApi from '../api/ShowApi';
import { format } from 'date-fns';


//作业展示列表
const works = ref([]);
function loadWorks() {
    ShowApi.getWorks().then(result => {
        works.value = result.data;
        console.log("+++++++++++", works.value);
        works.value.forEach(work => {
            let date = work.endData;
            console.log(date);
            work.endData = format(new Date(date), 'yyyy-MM-dd');
        });

        console.log("后", works.value);

    })
    // works.value = [
    //     {
    //         id:1,
    //         name:"作业一",
    //         endData:"2024-09-10"
    //     },
    //     {
    //         id:2,
    //         name:"作业二",
    //         endData:"2024-09-10"
    //     }
    // ]
}
loadWorks();
//跳转写作业页面
function writeWorks(id){
    router.push({
        path:'/doWork',
        query:{
            id:id,
        }
    })
}
</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 class="work-status">未提交</div>
                            </div>
                            <div class="work-bottem">
                                <span class="write" @click="writeWorks(work.id)">写作业</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-bottem {
    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.875rem;
        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-bottem {
    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.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: 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-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>