提报优化暂存

src/SManagement/submitedit_one/components/list.vue

@@ -1,19 +1,37 @@
 <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?'#e6a23c':'#999999'}"
       :key="index">
-      <div class="header1">
-        <div class="handle" :class="item.ishistory == 0 ? 'action' : 'no-action'">
-          {{item.ishistory == 0 ? $t('进行中') : $t('已结束')}}
+      <div class="headerState" :style="{backgroundColor:item.ishistory == 0?'#e6a23c':'#999999'}">
+        {{item.ishistory == 0 ? $t('进行中') : $t('已结束')}}
+      </div>
+      <div style="display: flex;justify-content: space-between">
+        <div class="tag-style-border" >
+          <div :class="item.isRead == 0?'no-read':'read'">{{item.isRead == 0 ? $t('未读') : $t('已读')}}</div>
+        </div>
+        <div class="tag-style-border">
+          <span class="font-size-g">还剩</span><span class="font-size-b"> 0 </span><span class="font-size-g">天</span>
         </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 class="title-font-b">
+        {{$t(item.title)}}
       </div>
+      <div class="notes-font-b">
+        {{$t(item.notes)}}
+      </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>
@@ -66,28 +84,133 @@ export default {
 .list {
   display: flex;
   flex-wrap: wrap;
-  margin-top: 16px;
+  margin-top: 30px;
 }
 .list .list-item {
-  width: 390px;
-  height: 140px;
-  background: #f8f8f8;
+  width: 400px;
+  height: 400px;
+  background: #FFFFFF;
+  border: 2px solid;
   border-radius: 4px 4px 4px 4px;
-  margin: 0 16px 16px 0;
-  padding: 16px;
+  margin: 0 40px 40px 0;
+  padding: 30px;
   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(230,162,60, 0.35);
+}
+.list .list-item .headerState {
+  width: 100px;
+  height: 40px;
+  border-radius: 30px;
+  color: #FFFFFF;
+  line-height: 40px;
+  text-align: center;
+  vertical-align: middle;
+  margin: -50px 0 0 120px;
+  font-size: 20px;
+}
+.tag-style-border{
+  width: 86px;
+  height: 44px;
+  border-radius: 4px 4px 4px 4px;
+  font-size: 20px;
+  font-weight: normal;
+  text-align: center;
+  line-height: 44px;
+}
+.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: 10px;
+  color: #333333;
+  font-weight: bold;
+  font-size: 24px;
+}
+.notes-font-b{
+  margin-top: 10px;
+  color: #333333;
+  font-size: 20px;
+}
+@media(max-width: 1920px){
+  .list .list-item {
+    width: 200px;
+    height: 200px;
+    background: #FFFFFF;
+    border: 2px solid;
+    border-radius: 4px 4px 4px 4px;
+    margin: 0 20px 40px 0;
+    padding: 15px;
+    cursor: pointer;
+    transition: border 0.1s ease-in-out;
+  }
+  .list .list-item .headerState {
+    width: 50px;
+    height: 20px;
+    border-radius: 30px;
+    color: #FFFFFF;
+    line-height: 20px;
+    text-align: center;
+    vertical-align: middle;
+    margin: -25px 0 0 60px;
+    font-size: 10px;
+  }
+  .tag-style-border{
+    width: 46px;
+    height: 24px;
+    border-radius: 4px 4px 4px 4px;
+    font-size: 10px;
+    font-weight: normal;
+    text-align: center;
+    line-height: 24px;
+  }
+  .read {
+    color: #67c23a;
+    background: #e5fadb;
+  }
+  .no-read {
+    color: #f56c6c;
+    background: #ffedec;
+  }
+  .title-font-b{
+    margin-top: 5px;
+    color: #333333;
+    font-weight: bold;
+    font-size: 12px;
+  }
+  .notes-font-b{
+    margin-top: 5px;
+    color: #333333;
+    font-size: 10px;
+  }
+}
+/*.list .list-item:hover {*/
+/*  box-shadow: 1px 6px 6px 1px rgba(0, 0, 0, 0.35);*/
+/*}*/
+
 .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 +269,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%;