浏览代码

style: 钱包列表左边距内收并加类型色点

列表左右边距30→40rpx与账户卡对齐;每行类型文字前加状态色点(充值青绿/退款橙/消费灰),消除文字贴边感并提升类型扫读性
skyline 3 周之前
父节点
当前提交
0072693926
共有 1 个文件被更改,包括 17 次插入 和 1 次删除
  1. 17 1
      charge-front/src/pages-user/wallet/wallet.vue

+ 17 - 1
charge-front/src/pages-user/wallet/wallet.vue

@@ -57,7 +57,7 @@
           >
         </view>
       </view>
-      <view class="list pl-30 pr-30">
+      <view class="list pl-40 pr-40">
         <view
             class="item flex-align-center pressable"
             hover-class="pressed"
@@ -66,6 +66,7 @@
             :key="index"
             @click="detail(index)"
         >
+          <view class="item-dot" :style="{ backgroundColor: dotColor(item) }"></view>
           <view>
             <view class="fs-30 fw-500">{{
                 typeMap[item.type - 1]
@@ -161,6 +162,13 @@ const refundStatusMap = ref([
 ])
 
 const typeMap = ref(["充值", "退款", "消费"]);
+
+/** 类型色点:充值青绿、消费灰、退款橙 */
+const dotColor = (item: any) => {
+  if (item.type === 1) return "var(--color-primary)";
+  if (item.type === 2) return "var(--color-warning)";
+  return "#9daaa8";
+};
 /*const infiniteScroller = useInfiniteScroll(10, (page) => {
   return fetchWallet(tab.value, page, 10).then((res: any) => {
     if (res && res.length) {
@@ -371,6 +379,14 @@ const detail = (index: number) => {
         }
       }
 
+      .item-dot {
+        width: 14rpx;
+        height: 14rpx;
+        border-radius: 50%;
+        margin-right: 18rpx;
+        flex-shrink: 0;
+      }
+
       .list-right {
         margin-left: auto;
       }