<template>
<
div class="taskBox">
<
div v
-for="(item,index) in list" class="itemList">
<
div class="top">【{{ item.userTypeName }}】{{ item.taskName }}</
div>
<
div class="centre">
<p>
<span><img
:src="icon1"/></span>
<span>起止时间</span>
<span>：{{ item.startTime }}~{{ item.endTime }}</span>
</p>
<p>
<span> <img
:src="icon2"/></span>
<span>适用范围</span>
<span>：{{ item.useRange }}</span>
</p>
<p>
<span> <img
:src="icon3"/></span>
<span>说明</span>
<span>：{{ item.taskRemark }}</span>
</p>
</
div>
<
div class="bottom">
<
div class="statusBox statusBox1" v
-if="item.status=='正在进行'">{{ item.status }}</
div>
<
div class="statusBox statusBox2" v
-else>{{ item.status }}</
div>
<
div class="FillingBox" @click="goFillingFun(item.id)">快速填报 ></
div>
</
div>
</
div>
</
div>
</template>
<script setup>
import {useRoute, useRouter} from 'vue
-router'
import {post} from "@/frame/request/http";
import {ref} from "vue";
import icon1 from '../../assets/image/taskFillingIcon1.png'
import icon2 from '../../assets/image/taskFillingIcon2.png'
import icon3 from '../../assets/image/taskFillingIcon3.png'
let router = useRouter()
function goFillingFun(id) {
router.push('/taskFilling?id=' + id)
}
let list = ref([])
const search = ref({
pageNum
: 1,
pageSize
: 2,
total
: 0,
});
const currentDate = new Date();
// 状态判断函数
function getTaskStatus(startDateStr, endDateStr, currentDate) {
// 将字符串转换为日期对象
const startDate = new Date(startDateStr);
const endDate = new Date(endDateStr);
// 清除时间部分，只比较日期
startDate.setHours(0, 0, 0, 0);
endDate.setHours(0, 0, 0, 0);
const current = new Date(currentDate);
current.setHours(0, 0, 0, 0);
if (current < startDate) {
return "未开始";
} else if (current > endDate) {
return "已过期";
} else {
return "正在进行";
}
}
function getList() {
post('/system/module/task/set/teacherPageList', search.value).then(res => {
list.value = res.list
list.value.forEach(task => {
const status = getTaskStatus(task.startTime, task.endTime, currentDate);
task.status = status;
});
console.log(list.value, 78)
})
}
getList()
</script>
<style scoped lang="less">
.taskBox {
height
: 235px;
width
: 100%;
display: flex;
flex
-wrap
: wrap;
gap
: 24px;
}
.itemList {
flex
: 1;
background
-color
: white;
border
-radius
: 10px;
padding
: 24px;
box
-sizing
: border
-box;
display: flex;
flex
-direction
: column;
justify
-content
: space
-between;
.top {
font
-size
: 18px;
font
-weight
: bolder;
}
.centre {
height
: 114px;
width
: 100%;
background
-color
: #f7f9fc;
padding
: 20px;
display: flex;
flex
-direction
: column;
justify
-content
: space
-between;
box
-sizing
: border
-box;
border
-radius
: 5px;
p {
display: flex;
//flex
-direction
: column;
//justify
-content
: center;
span {
&
:nth
-child(1) {
display: flex;
justify
-content
: center;
align
-items
: center;
img {
width
: 18px;
height
: 18px;
margin
-right
: 5px;
}
}
&
:nth
-child(2) {
font
-size
: 14px;
color
: #666666;
width
: 72px;
display: inline-block;
text
-align
: justify;
text
-align
-last
: justify;
}
&
:nth
-child(3) {
font
-size
: 14px;
color
: #333333;
font
-weight
: 500;
}
}
}
}
.bottom {
display: flex;
justify
-content
: space
-between;
.statusBox {
width
: 100px;
height
: 24px;
line
-height
: 24px;
display: flex;
justify
-content
: center;
color
: white;
border
-radius
: 5px;
}
.statusBox1 {
background
-image
: linear
-gradient(to right, #487ff7, #ffffff);
}
.statusBox2 {
background
-image
: linear
-gradient(to right, #cecece, #ffffff);
}
.FillingBox {
color
: #427bf7;
cursor
: pointer;
}
}
}
</style>优化一下，把适用范围和说明改成一行显示，超出显示省略号
博客主要讲述在导航栏设置CSS样式，当设置padding: 14px 16px;和display: inline-block;时会出现被父撑开的情况，而单独设置一个样式则无法实现该效果。
扫一扫
810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
