浏览代码

style: 钱包页tab均分居中与列表排版优化

全部/充值/消费/退款四个tab改为等宽均分居中,下划线随tab居中;列表右侧金额列固定右对齐区域、箭头占位等宽防抖动;补空态提示暂无记录;清理color绑定多余分号
skyline 3 周之前
父节点
当前提交
a692dd9413
共有 1 个文件被更改,包括 32 次插入 和 14 次删除
  1. 32 14
      charge-front/src/pages-user/wallet/wallet.vue

+ 32 - 14
charge-front/src/pages-user/wallet/wallet.vue

@@ -39,20 +39,17 @@
       </view>
     </view>
     <view class="body flex-grow flex-column">
-      <view class="tabs flex-shrink flex-align-center">
+      <view class="tabs flex-shrink flex-center">
         <view
             v-for="(item, index) in tabs"
             :key="index"
-            class="flex-align-center fs-30 mr-60"
+            class="tab-item flex-center fs-30"
             :style="{
-            color:
-              tab === item.value ? '#1c2b29;' : '#5c6b69;',
+            color: tab === item.value ? '#1c2b29' : '#5c6b69',
             fontWeight: tab === item.value ? '600' : '400',
           }"
             @click="changeTab(index)"
-        >{{
-            item.label
-          }}
+        >{{ item.label }}
           <view
               :style="{ opacity: tab === item.value ? '1' : '0' }"
               class="active"
@@ -70,7 +67,7 @@
             @click="detail(index)"
         >
           <view>
-            <view class="fs-30 fw-500" key="title" duration="300">{{
+            <view class="fs-30 fw-500">{{
                 typeMap[item.type - 1]
               }}
             </view>
@@ -82,24 +79,30 @@
             </view>
 
           </view>
-          <view class="ml-auto" style="text-align: right">
+          <view class="list-right flex-column flex-align-end">
             <view class="fs-30 fw-500">
               <text>{{ item.type == 3 ? "- " : "" }}{{ item.amount }}</text>
               <text class="fs-24 ml-6">元</text>
             </view>
-            <view class="fs-24" style="color: #8c9997">{{
+            <view class="fs-24 mt-4" style="color: #8c9997">{{
                 item.transactionTime
               }}
             </view>
           </view>
-          <view class="ml-32" v-if="item.type === 3">
+          <view class="list-arrow" v-if="item.type === 3">
             <uni-icons
                 type="right"
                 size="12"
                 color="rgba(28,43,41,0.4)"
             ></uni-icons>
           </view>
-          <view class="ml-32" v-else>&nbsp;&nbsp;&nbsp;</view>
+          <view class="list-arrow" v-else></view>
+        </view>
+        <view
+            class="list-empty flex-center flex-column"
+            v-if="dataList && dataList.length <= 0"
+        >
+          <view class="fs-26" style="color: #8c9997">暂无记录</view>
         </view>
       </view>
       <view style="height: 170rpx"></view>
@@ -336,10 +339,10 @@ const detail = (index: number) => {
     .tabs {
       padding: 0 40rpx;
 
-      & > view {
+      .tab-item {
         position: relative;
+        flex-grow: 1;
         height: 72rpx;
-        transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1);
 
         .active {
           position: absolute;
@@ -364,6 +367,21 @@ const detail = (index: number) => {
           border-bottom: none;
         }
       }
+
+      .list-right {
+        margin-left: auto;
+      }
+
+      .list-arrow {
+        width: 32rpx;
+        display: flex;
+        justify-content: flex-end;
+        flex-shrink: 0;
+      }
+
+      .list-empty {
+        padding: 120rpx 0;
+      }
     }
   }
 }