feat(custom):

src/pages/users/account/index.vue

@@ -20,14 +20,14 @@ const tabsList = ref([
     title: '豆子明细',
     value: 2,
   },
-  {
-    title: '活动赠送',
-    value: 4,
-  },
   {
     title: '聚合积分',
     value: 5,
   },
+  {
+    title: '活动赠送',
+    value: 4,
+  },
 ]);
 
 const computerType = computed(() => {
@@ -133,7 +133,7 @@ const closePicker = () => {
 </script>
 
 <template>
-  <view>
+  <view class="overflow-scroll">
     <view class="tabs-box">
       <view
         class="item"
@@ -170,28 +170,32 @@ const closePicker = () => {
     <view v-if="data.length > 0">
       <view v-if="tabValue === 1">
         <view class="card-list" v-for="(item, index) in data" :key="index">
-          <view class="left">
-            <view>订单号: {{ item.oid }}</view>
-            <text class="jf">{{
+          <view>
+            <view class="text-[28px]">订单号: {{ item.oid }}</view>
+            <view class="text-[#484848] text-[26px] mt-[18px]">{{
               dayjs(item.add_time).format('YYYY/MM/DD mm:ss')
-            }}</text>
+            }}</view>
           </view>
-          <view class="right">
+          <view class="flex-1 text-right mt-[18px]">
             <view v-if="tabValue === 1" style="color: red"
               >-
               <text>{{ item.number }}</text>
             </view>
-            <text class="jf">积分余额: {{ item.residue || 0 }}</text>
+            <text class="text-[#484848]"
+              >积分余额: {{ item.residue || 0 }}</text
+            >
           </view>
         </view>
       </view>
       <view v-if="tabValue === 3 || tabValue === 5">
         <view class="card-list" v-for="(item, index) in data" :key="index">
-          <view class="left">
-            <view>订单：{{ item.oid }}</view>
-            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
+          <view>
+            <view class="text-[28px]">订单：{{ item.oid }}</view>
+            <view class="text-[#484848] text-[26px] mt-[18px]"
+              >时间：{{ item.add_time.slice(0, 10) }}</view
+            >
           </view>
-          <view class="right">
+          <view class="flex-1 text-right mt-[18px]">
             <view v-if="tabValue === 5" style="color: red"
               >-
               <text>{{ item.number }}积分</text>
@@ -206,11 +210,13 @@ const closePicker = () => {
       </view>
       <view v-else-if="tabValue === 2">
         <view class="card-list" v-for="(item, index) in data" :key="index">
-          <view class="left">
-            <view class="text">订单：{{ item.oid }}</view>
-            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
+          <view>
+            <view class="text-[28px]">订单：{{ item.oid }}</view>
+            <view class="text-[#484848] text-[26px] mt-[18px]"
+              >时间：{{ item.add_time.slice(0, 10) }}</view
+            >
           </view>
-          <view class="right">
+          <view class="flex-1 text-right mt-[18px]">
             <view style="color: green"
               >+
               <text>{{ item.number }}</text>
@@ -221,11 +227,13 @@ const closePicker = () => {
       </view>
       <view v-else-if="tabValue === 4">
         <view class="card-list" v-for="(item, index) in data" :key="index">
-          <view class="left">
-            <view class="text">类型：{{ computerType(item.type) }}</view>
-            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
+          <view>
+            <view class="text-[28px]">类型：{{ computerType(item.type) }}</view>
+            <view class="text-[#484848] text-[26px] mt-[18px]"
+              >时间：{{ item.add_time.slice(0, 10) }}</view
+            >
           </view>
-          <view class="right">
+          <view class="flex-1 text-right mt-[18px]">
             <view style="color: green"
               >+
               <text>{{ item.number }}</text>
@@ -257,19 +265,24 @@ const closePicker = () => {
   align-items: center;
   background-color: #fff;
   text-align: center;
-  flex-wrap: wrap;
   padding: 15px;
-  justify-content: space-evenly;
+  justify-content: space-between;
+  overflow-x: scroll;
 
   .item {
-    padding: 10px 20px;
-    font-size: 23px;
+    width: 144px;
+    min-width: 144px;
+    height: 60px;
+    min-height: 60px;
+    font-size: 26px;
     border-radius: 10px;
+    text-align: center;
+    line-height: 60px;
+    margin-left: 25px;
   }
 }
 
 .card-list {
-  // margin: 10px 20px;
   background-color: #fff;
   display: flex;
   border-radius: 10px;
@@ -277,27 +290,8 @@ const closePicker = () => {
   justify-content: space-between;
   align-items: center;
   font-size: 25px;
+  margin-bottom: 25px;
 
-  .jf {
-    color: #484848;
-  }
 
-  .left {
-    .text {
-      text-align: left;
-      font-weight: bolder;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      word-break: break-word;
-      color: #484848;
-    }
-  }
-
-  .right {
-    flex: 1;
-    text-align: right;
-  }
 }
 </style>