style(转账记录页): 样式调整
This commit is contained in:
hzj
parent
b2c7cec42b
commit
b1252e8a60
@ -18,40 +18,30 @@
|
||||
|
||||
<!-- 交易记录列表 -->
|
||||
<div v-else class="transaction-list">
|
||||
<div
|
||||
v-for="transaction in transactions"
|
||||
:key="transaction.id"
|
||||
class="transaction-item"
|
||||
>
|
||||
<div 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 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 style="margin-bottom: 4px; font-weight: 700">
|
||||
{{ transaction.eventDescribe }}
|
||||
</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'">
|
||||
{{ transaction.amount > 0 ? '+' : '' }}${{ Math.abs(transaction.amount) }}
|
||||
<div class="transaction-amount" style="font-weight: 500; margin: 0 8px">
|
||||
{{ 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;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
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); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
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 {
|
||||
font-size: 11px;
|
||||
.user-account {
|
||||
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 {
|
||||
font-size: 13px;
|
||||
@media screen and (min-width: 360px) {
|
||||
* {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-amount {
|
||||
font-size: 16px;
|
||||
@media screen and (min-width: 768px) {
|
||||
* {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user