style(转账记录页): 样式调整

src/views/InformationDetailsView.vue

@@ -18,40 +18,30 @@
 
       <!-- 交易记录列表 -->
       <div v-else class="transaction-list">
-        <div
+        <div v-for="transaction in transactions" :key="transaction.id" class="transaction-item">
-          v-for="transaction in transactions"
-          :key="transaction.id"
-          class="transaction-item"
-        >
           <div class="transaction-content">
-            <!-- 用户头像 -->
-            <div class="user-avatar-container">
-              <img
-                v-if="transaction.userAvatar"
-                :src="transaction.userAvatar"
-                :alt="transaction.userNickname"
-                class="user-avatar"
-                @error="handleImageError"
-              />
-              <div v-else class="avatar-placeholder">
-                {{ getAvatarPlaceholder(transaction.userNickname) }}
-              </div>
-            </div>
-
             <!-- 交易信息 -->
             <div class="transaction-info">
-              <h3>{{ transaction.eventDescribe }}</h3>
+              <div style="margin-bottom: 4px; font-weight: 700">
-              <!-- 用户信息 -->
+                {{ transaction.eventDescribe }}
-              <div v-if="transaction.userNickname || transaction.account" class="user-info">
-                <span v-if="transaction.userNickname" class="user-nickname">{{ transaction.userNickname }}</span>
-                <span v-if="transaction.account" class="user-account">ID: {{ transaction.account }}</span>
               </div>
-              <p class="transaction-time">{{ transaction.createTime }}</p>
+              <!-- 用户信息 -->
+              <!-- <div v-if="transaction.userNickname || transaction.account" class="user-info">
+                <span v-if="transaction.userNickname" class="user-nickname">{{
+                  transaction.userNickname
+                }}</span>
+                <span v-if="transaction.account" class="user-account"
+                  >ID: {{ transaction.account }}</span
+                >
+              </div> -->
+              <p class="transaction-time" style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+                {{ transaction.createTime }}
+              </p>
             </div>
 
             <!-- 交易金额 -->
-            <div class="transaction-amount" :class="transaction.isPositive ? 'positive' : 'negative'">
+            <div class="transaction-amount" style="font-weight: 500; margin: 0 8px">
-              {{ transaction.amount > 0 ? '+' : '' }}${{ Math.abs(transaction.amount) }}
+              {{ transaction.amount > 0 ? '+' : '-' }}{{ Math.abs(transaction.amount) }}
             </div>
           </div>
         </div>
@@ -70,7 +60,7 @@
 import { ref, onMounted } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getWalletDetails, formatDateTime, formatEventDescribe } from '../api/wallet.js'
-import {formatUTCTime} from "@/utils/utcFormat.js";
+import { formatUTCTimeClean } from '@/utils/utcFormat.js'
 
 const transactions = ref([])
 const loading = ref(false)
@@ -86,7 +76,7 @@ const fetchData = async () => {
 
     // 处理API返回的数据
     if (response.body && Array.isArray(response.body)) {
-      transactions.value = response.body.map(item => {
+      transactions.value = response.body.map((item) => {
         // 根据 event 字段判断是加还是减
         let amount = item.amount
         let isPositive = false
@@ -118,7 +108,7 @@ const fetchData = async () => {
         return {
           id: item.id,
           eventDescribe: formatEventDescribe(item.eventDescribe),
-          createTime: formatUTCTime(item.createTime),
+          createTime: formatUTCTimeClean(item.createTime),
           amount: amount,
           balance: item.balance,
           event: item.event,
@@ -126,7 +116,7 @@ const fetchData = async () => {
           // 添加用户信息字段
           userAvatar: item.details?.userAvatar || null,
           userNickname: item.details?.userNickname || null,
-          account: item.details?.account || null
+          account: item.details?.account || null,
         }
       })
     } else {
@@ -146,11 +136,6 @@ const getAvatarPlaceholder = (nickname) => {
   return nickname.charAt(0).toUpperCase()
 }
 
-// 处理图片加载错误
-const handleImageError = (event) => {
-  console.warn('头像加载失败:', event.target.src)
-}
-
 // 页面加载时获取数据
 onMounted(() => {
   fetchData()
@@ -158,6 +143,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .information-details {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -177,9 +167,9 @@ onMounted(() => {
 
 .transaction-item {
   background-color: white;
-  padding: 16px;
+  padding: 12px;
-  border-radius: 16px;
+  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
 }
 
 .transaction-content {
@@ -204,7 +194,7 @@ onMounted(() => {
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -218,13 +208,6 @@ onMounted(() => {
   min-width: 0; /* 为了支持text overflow */
 }
 
-.transaction-info h3 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
 /* 用户信息 */
 .user-info {
   display: flex;
@@ -239,32 +222,6 @@ onMounted(() => {
   color: #333;
 }
 
-.user-account {
-  font-size: 12px;
-  color: #666;
-}
-
-.transaction-time {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.transaction-amount {
-  font-size: 18px;
-  font-weight: 600;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-.transaction-amount.positive {
-  color: #10B981;
-}
-
-.transaction-amount.negative {
-  color: #EF4444;
-}
-
 /* 加载状态 */
 .loading-state {
   display: flex;
@@ -279,15 +236,19 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 16px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
+  0% {
-  100% { transform: rotate(360deg); }
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .loading-state p {
@@ -319,7 +280,7 @@ onMounted(() => {
 
 .retry-btn {
   padding: 10px 24px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
   border: none;
   border-radius: 8px;
@@ -329,7 +290,7 @@ onMounted(() => {
 }
 
 .retry-btn:active {
-  background-color: #7C3AED;
+  background-color: #7c3aed;
 }
 
 /* 空状态 */
@@ -366,24 +327,38 @@ onMounted(() => {
     font-size: 16px;
   }
 
-  .transaction-info h3 {
-    font-size: 15px;
-  }
-
   .user-nickname {
     font-size: 13px;
   }
+}
 
-  .user-account {
+.user-account {
-    font-size: 11px;
+  font-size: 0.9em;
+}
+
+.transaction-time {
+  font-size: 1em;
+}
+
+.transaction-amount {
+  font-size: 1.2em;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
   }
+}
 
-  .transaction-time {
+@media screen and (min-width: 360px) {
-    font-size: 13px;
+  * {
+    font-size: 12px;
   }
+}
 
-  .transaction-amount {
+@media screen and (min-width: 768px) {
-    font-size: 16px;
+  * {
+    font-size: 24px;
   }
 }
 </style>