style(转账记录页): 更新UI

src/views/SellerRecordsView.vue

@@ -17,16 +17,11 @@
             <div class="record-details">
               <h4>{{ record.userName }}</h4>
               <p>ID: {{ record.account }}</p>
-              <div class="record-time">{{ record.time }}</div>
             </div>
           </div>
           <div class="record-amount">
-            <span :class="['coins-amount', record.type === 0 ? 'positive' : 'negative']"
-              >{{ record.amount }} coins</span
-            >
-            <span class="transaction-type">{{
-              getTransactionType(record.type, record.origin)
-            }}</span>
+            <div class="coins-amount">{{ record.amount }} coins</div>
+            <div class="record-time">{{ record.time }}</div>
           </div>
         </div>
       </div>
@@ -44,7 +39,7 @@
 import { ref, onMounted } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getFreightWaterFlow } from '../api/wallet.js'
-import { formatUTCTime } from '@/utils/utcFormat.js'
+import { formatUTCCustom } from '@/utils/utcFormat.js'
 import { getUserId } from '@/utils/userStore.js'
 
 const loading = ref(false)
@@ -90,7 +85,7 @@ const fetchRecords = async () => {
         userId: item.acceptUserId,
         userName: `User${item.acceptUserId.toString().slice(-6)}...`, // 显示最后6位
         amount: getAmountDisplay(item.type, item.quantity),
-        time: formatUTCTime(item.createTime),
+        time: formatUTCCustom(item.createTime),
         type: item.type,
         quantity: item.quantity,
         balance: item.balance,
@@ -115,6 +110,11 @@ onMounted(async () => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .seller-records {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -201,40 +201,35 @@ onMounted(async () => {
 }
 
 .record-details h4 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
+  margin-bottom: 4px;
+  font-size: 14px;
   font-weight: 600;
   color: #333;
 }
 
 .record-details p {
-  margin: 0 0 4px 0;
-  font-size: 14px;
-  color: #666;
+  font-size: 12px;
+  font-weight: 590;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .record-time {
   font-size: 12px;
-  color: #9ca3af;
+  font-weight: 510;
+  color: rgba(0, 0, 0, 0.4);
 }
 
 .record-amount {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  gap: 4px;
 }
 
 .coins-amount {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.coins-amount.positive {
-  color: #10b981; /* 绿色表示进货/入账 */
-}
-
-.coins-amount.negative {
-  color: #ef4444; /* 红色表示出货/出账 */
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.4);
+  font-weight: 510;
 }
 
 .transaction-type {
@@ -269,4 +264,34 @@ onMounted(async () => {
   font-size: 14px;
   color: #9ca3af;
 }
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+
+  .help-btn {
+    width: 14px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+
+  .help-btn {
+    width: 16px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+
+  .help-btn {
+    width: 28px;
+  }
+}
 </style>