|
|
@@ -1,19 +1,39 @@
|
|
|
<template>
|
|
|
<div class="list" v-if="list.length != 0">
|
|
|
- <div class="list-item" @click="itemClick(item.sat_submiteditmodelid,item.ishistory)" v-for="(item,index) in list"
|
|
|
+ <div class="list-item" :class="item.ishistory == 0?'list-shadow-y':'list-shadow-g'" @click="itemClick(item.sat_submiteditmodelid,item.ishistory)" v-for="(item,index) in list" :style="{borderColor:item.ishistory == 0?'#67C23A':'#999999'}"
|
|
|
:key="index">
|
|
|
- <div class="header1">
|
|
|
- <div class="handle" :class="item.ishistory == 0 ? 'action' : 'no-action'">
|
|
|
+ <div style="display: flex;justify-content: space-between">
|
|
|
+ <div class="headerState" :style="{backgroundColor:item.ishistory == 0?'#67C23A':'#999999'}">
|
|
|
{{item.ishistory == 0 ? $t('进行中') : $t('已结束')}}
|
|
|
</div>
|
|
|
- <p class="title">{{$t(item.title)}}</p>
|
|
|
+ <div style="margin-top: 3px">
|
|
|
+ <div class="tag-style-border" :class="item.isRead == 0?'no-read':'read'">{{item.isRead == 0 ? $t('未读') : $t('已读')}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="title-font-b title-show-style">
|
|
|
+ {{$t(item.title)}}
|
|
|
</div>
|
|
|
- <div class="decript">{{$t(item.notes)}}</div>
|
|
|
- <div class="time">{{$t(`有效期`)}}:{{item.begdate}}~{{item.enddate}}</div>
|
|
|
- <div class="footer">
|
|
|
- <p class="submit">{{$t(`已提报`)}}:{{item.submitcount}}</p>
|
|
|
- <div class="status" :class="item.isRead == 0 ? 'no-raed' : 'read'">{{item.isRead == 0 ? $t('未读') : $t('已读')}}</div>
|
|
|
+ <div class="notes-font-b notes-box-height" style="line-height:20px">
|
|
|
+ {{$t(item.notes)}}
|
|
|
+ </div>
|
|
|
+ <div class="footer-box-style">
|
|
|
+ <div class="submitcount-style-box">
|
|
|
+ <span class="font-size-g">{{$t(`还剩`)}}</span><span class="font-size-b"> {{daysBetweenDates(item.begdate,item.enddate)}} </span><span class="font-size-g">{{$t(`天`)}}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+<!-- <div class="header1">-->
|
|
|
+<!-- <div class="handle" :class="item.ishistory == 0 ? 'action' : 'no-action'">-->
|
|
|
+<!-- {{item.ishistory == 0 ? $t('进行中') : $t('已结束')}}-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <p class="title">{{$t(item.title)}}</p>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="decript">{{$t(item.notes)}}</div>-->
|
|
|
+<!-- <div class="time">{{$t(`有效期`)}}:{{item.begdate}}~{{item.enddate}}</div>-->
|
|
|
+<!-- <div class="footer">-->
|
|
|
+<!-- <p class="submit">{{$t(`已提报`)}}:{{item.submitcount}}</p>-->
|
|
|
+<!-- <div class="status" :class="item.isRead == 0 ? 'no-raed' : 'read'">{{item.isRead == 0 ? $t('未读') : $t('已读')}}</div>-->
|
|
|
+<!-- </div>-->
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-empty :description="$t('暂无数据')" v-else></el-empty>
|
|
|
@@ -37,12 +57,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+
|
|
|
},
|
|
|
watch: {
|
|
|
},
|
|
|
mounted () {
|
|
|
},
|
|
|
methods: {
|
|
|
+ daysBetweenDates(begdate,enddate){
|
|
|
+ const date1 = new Date;
|
|
|
+ const date2 = new Date(enddate);
|
|
|
+ let timeDiffInMilliseconds = date2 - date1; // 计算绝对值,因为时间差可能是负数
|
|
|
+ let daysDiff = Math.ceil(timeDiffInMilliseconds / (1000 * 60 * 60 * 24));
|
|
|
+ daysDiff > 0 ? daysDiff = daysDiff : daysDiff = 0
|
|
|
+ return daysDiff
|
|
|
+ },
|
|
|
itemClick (id, history) {
|
|
|
window.sessionStorage.setItem('currentPath', this.$route.path)
|
|
|
window.sessionStorage.setItem('history', history)
|
|
|
@@ -66,28 +95,139 @@ export default {
|
|
|
.list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- margin-top: 16px;
|
|
|
+ margin-top: 30px;
|
|
|
}
|
|
|
.list .list-item {
|
|
|
- width: 390px;
|
|
|
- height: 140px;
|
|
|
- background: #f8f8f8;
|
|
|
+ width: 200px;
|
|
|
+ height: 160px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid;
|
|
|
border-radius: 4px 4px 4px 4px;
|
|
|
- margin: 0 16px 16px 0;
|
|
|
- padding: 16px;
|
|
|
+ margin: 0 20px 40px 0;
|
|
|
+ padding: 15px;
|
|
|
cursor: pointer;
|
|
|
transition: border 0.1s ease-in-out;
|
|
|
}
|
|
|
-.list .list-item:hover {
|
|
|
- box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.15);
|
|
|
+.list-shadow-g:hover{
|
|
|
+ box-shadow: 1px 6px 6px 1px rgba(153,153,153, 0.35);
|
|
|
}
|
|
|
+.list-shadow-y:hover{
|
|
|
+ box-shadow: 1px 6px 6px 1px rgba(103,194,58, 0.35);
|
|
|
+}
|
|
|
+.list .list-item .headerState {
|
|
|
+ width: 50px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 30px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
+.tag-style-border{
|
|
|
+ width: 30px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 18px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.read {
|
|
|
+ color: #67c23a;
|
|
|
+ background: #e5fadb;
|
|
|
+}
|
|
|
+.no-read {
|
|
|
+ color: #f56c6c;
|
|
|
+ background: #ffedec;
|
|
|
+}
|
|
|
+.font-size-g {
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+.font-size-b {
|
|
|
+ color: #333333;
|
|
|
+}
|
|
|
+.title-font-b{
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.notes-font-b{
|
|
|
+ color: #333333;
|
|
|
+ font-size: 10px;
|
|
|
+}
|
|
|
+.notes-box-height{
|
|
|
+ height: 35px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.footer-box-style{
|
|
|
+ display: flex;
|
|
|
+ justify-content: right;
|
|
|
+ font-size: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.avatar{
|
|
|
+ position: relative;
|
|
|
+ height:24px;
|
|
|
+ width: 24px;
|
|
|
+ margin-bottom: 2.5px;
|
|
|
+ border-radius: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ color:#fff;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #3874F6;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.avatar-null{
|
|
|
+ position: relative;
|
|
|
+ height:24px;
|
|
|
+ width: 24px;
|
|
|
+ margin-bottom: 2.5px;
|
|
|
+ border-radius: 100%;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 24px;
|
|
|
+ color:#fff;
|
|
|
+ font-weight: 500;
|
|
|
+ background: #e5e5e5;
|
|
|
+ cursor: pointer;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid #FFFFFF;
|
|
|
+ margin-left: -12px;
|
|
|
+}
|
|
|
+.submitcount-style-box{
|
|
|
+ line-height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.footer-font-postion{
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.title-show-style{
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+.between-days{
|
|
|
+ width:200px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
.list .list-item .header1 {
|
|
|
display: flex;
|
|
|
margin-bottom: 8px;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.list .list-item .header1 .handle {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 20px;
|
|
|
font-weight: 400;
|
|
|
margin-right: 10px;
|
|
|
width: 52px;
|
|
|
@@ -146,14 +286,7 @@ export default {
|
|
|
text-align: center;
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
-.list .list-item .footer .read {
|
|
|
- color: #ff3b30;
|
|
|
- background: #ffedec;
|
|
|
-}
|
|
|
-.list .list-item .footer .no-read {
|
|
|
- color: #999999;
|
|
|
- background: #eeeeee;
|
|
|
-}
|
|
|
+
|
|
|
/deep/.el-empty {
|
|
|
position: absolute;
|
|
|
left: 50%;
|