feat: 样式优化

pages/recordDetail/index.vue

@@ -29,13 +29,13 @@
               <img v-if="detailInfo.prizeIcon" v-lazy="detailInfo.prizeIcon" class="record-detail__info-img" alt="" />
             </div>
           </li>
-          <li>
+          <li v-if="detailInfo.prizeId !== 0">
             <label>领奖方式：</label>
             <span>{{ LOTTERY_EXCHANGE_TYPE_TXT[detailInfo.exchangeType] }}</span>
           </li>
         </ul>
       </div>
-      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline" class="record-detail__code-info">
+      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.offline && detailInfo.prizeId !== 0" class="record-detail__code-info">
         <QRCode :url="detailInfo.code" :width="70" :height="70"></QRCode>
         <p class="record-detail__code-text">
           <label>兑换码：</label>
@@ -48,7 +48,7 @@
         </p>
         <p class="record-detail__notice">*兑换信息请勿泄露给他人，以防冒充代领</p>
       </div>
-      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing" class="record-detail__addressee-info">
+      <div v-if="+detailInfo.exchangeType === +LOTTERY_EXCHANGE_TYPE.mailing && detailInfo.prizeId !== 0" class="record-detail__addressee-info">
         <span v-if="!detailInfo.name" class="record-detail__edit-btn" @click="isShowAddressPopup = true"
           >填写收货地址</span
         >

pages/records/index.vue

@@ -13,20 +13,20 @@
         @load="loadData"
       >
         <div v-for="item in recordList" :key="item.id" class="records__list-item">
-          <div class="records__item-img">
-            <img v-lazy="item.banner" alt="" />
+          <div class="records__item-top">
+            <div class="records__item-toptitle">{{ item.title }}</div>
+            <div class="records__item-topstatus">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
           </div>
-          <div class="records__item-info">
-            <div class="records__info-wrap">
-              <div class="records__item-name">{{ item.title }}</div>
-              <div class="records__item-subs">
-                {{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖
-              </div>
+          <div class="records__item-middle">
+            <div class="records__item-middleimg">
+              <img v-lazy="item.banner" alt="" />
+            </div>
+            <div class="records__item-middleinfo">
+              <div class="title">{{ item.prizeName }}</div>
+              <div class="time">{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖</div>
             </div>
-            <div class="records__item-prize">{{ item.prizeName }}</div>
           </div>
           <div class="records__item-operate">
-            <span class="records__item-write-off">{{ WRITEOFF_STATUS_TXT[+item.status] }}</span>
             <van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button>
           </div>
         </div>
@@ -169,33 +169,65 @@ export default {
   }
   &__list-item {
     display: flex;
-    align-items: center;
+    flex-direction: column;
     padding: 12px 0;
+    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.5);
+    margin-top: 8px;
+    border-radius: 8px;
+    padding: 10px 12px;
   }
-  &__item-img {
-    width: 55px;
-    height: 55px;
-    border: 1px solid #dddddd;
-    border-radius: 6px;
-    overflow: hidden;
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  &__item-info {
-    flex: 1;
-    overflow: hidden;
-    height: 55px;
+  &__item-middle {
     display: flex;
-    flex-direction: column;
-    padding: 0 10px;
+    &img {
+      width: 55px;
+      height: 55px;
+      border: 1px solid #dddddd;
+      border-radius: 6px;
+      overflow: hidden;
+      img {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &info {
+      display: flex;
+      flex-direction: column;
+      margin-left: 10px;
+      .title {
+        line-height: 20px;
+        font-size: 14px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        margin-bottom: 8px;
+      }
+      .time {
+        line-height: 18.5px;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
   }
-  &__info-wrap {
-    flex: 1;
+  &__item-top {
     display: flex;
-    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+    &title {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
+    &status {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
   }
   &__item-name {
     width: 100%;
@@ -225,11 +257,10 @@ export default {
     height: 16px;
   }
   &__item-operate {
-    height: 55px;
+    margin-top: 10px;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    justify-content: space-around;
+    justify-content: flex-end;
   }
   &__item-write-off {
     font-size: 12px;