feat: 样式优化

pages/recordDetail/index.vue

@@ -16,11 +16,13 @@
             <label>参与时间：</label>
             <label>参与时间：</label>
             <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
             <span v-if="detailInfo.drawTime">{{ (detailInfo.drawTime * 1000) | formatDate('YYYY-MM-DD HH:mm') }}</span>
           </li>
           </li>
-          <li>
-            <label v-if="detailInfo.drawIntro">抽奖介绍：</label>
-            <label v-if="detailInfo.winningInstructions">中奖说明：</label>
-            <span v-if="detailInfo.drawIntro">{{ detailInfo.drawIntro }}</span>
-            <span v-if="detailInfo.winningInstructions">{{ detailInfo.winningInstructions }}</span>
+          <li v-if="detailInfo.drawIntro">
+            <label>抽奖介绍：</label>
+            <span>{{ detailInfo.drawIntro || '/' }}</span>
+          </li>
+          <li v-if="detailInfo.winningInstructions">
+            <label>中奖说明：</label>
+            <span>{{ detailInfo.winningInstructions || '/' }}</span>
           </li>
           </li>
           <li>
           <li>
             <label>获得奖品：</label>
             <label>获得奖品：</label>
@@ -216,8 +218,10 @@ export default {
     font-weight: 500;
     font-weight: 500;
     color: #666;
     color: #666;
     white-space: nowrap;
     white-space: nowrap;
-    line-height: 19px;
+    line-height: 18.5px;
     min-width: 65px;
     min-width: 65px;
+    font-size: 13px;
+    font-family: PingFangSC-Medium, PingFang SC;
   }
   }
   &__content {
   &__content {
     display: flex;
     display: flex;
@@ -238,10 +242,11 @@ export default {
       }
       }
       span,
       span,
       p {
       p {
-        color: #333;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 19px;
+        line-height: 18.5px;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #333333;
       }
       }
     }
     }
   }
   }

pages/records/index.vue

@@ -15,7 +15,7 @@
         <div v-for="item in recordList" :key="item.id" class="records__list-item">
         <div v-for="item in recordList" :key="item.id" class="records__list-item">
           <div class="records__item-top">
           <div class="records__item-top">
             <div class="records__item-toptitle">{{ item.title }}</div>
             <div class="records__item-toptitle">{{ item.title }}</div>
-            <div class="records__item-topstatus">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
+            <div v-if="+item.prizeId !== 0" class="records__item-topstatus" :class="{ yet: +item.status === 0 }">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
           </div>
           </div>
           <div class="records__item-middle">
           <div class="records__item-middle">
             <div class="records__item-middleimg">
             <div class="records__item-middleimg">
@@ -83,7 +83,7 @@ export default {
   },
   },
   methods: {
   methods: {
     loadData() {
     loadData() {
-      const { page: currentPage, pageSize: num, recordList: currentList } = this
+      const { page: currentPage, pageSize: num,  recordList: currentList } = this
       if (!this.hasMore) {
       if (!this.hasMore) {
         return
         return
       }
       }
@@ -167,6 +167,9 @@ export default {
       }
       }
     }
     }
   }
   }
+  .yet {
+    color: #FF753A;
+  }
   &__list-item {
   &__list-item {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
@@ -175,13 +178,16 @@ export default {
     margin-top: 8px;
     margin-top: 8px;
     border-radius: 8px;
     border-radius: 8px;
     padding: 10px 12px;
     padding: 10px 12px;
+    &:first-child {
+      margin-top: 12px;
+    }
   }
   }
   &__item-middle {
   &__item-middle {
     display: flex;
     display: flex;
     &img {
     &img {
       width: 55px;
       width: 55px;
       height: 55px;
       height: 55px;
-      border: 1px solid #dddddd;
+      // border: 1px solid #dddddd;
       border-radius: 6px;
       border-radius: 6px;
       overflow: hidden;
       overflow: hidden;
       img {
       img {
@@ -275,16 +281,16 @@ export default {
   }
   }
   &__empty {
   &__empty {
     width: 100%;
     width: 100%;
-    height: 100%;
+    height: calc(100% - 46px);
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     align-items: center;
     align-items: center;
     justify-content: center;
     justify-content: center;
-    font-size: 16px;
+    font-size: 14px;
     color: #999;
     color: #999;
     font-weight: 500;
     font-weight: 500;
     img {
     img {
-      width: 40%;
+      width: 20%;
       margin-bottom: 10px;
       margin-bottom: 10px;
     }
     }
   }
   }