You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
717 lines
18 KiB
717 lines
18 KiB
<template>
|
|
<view class="tl" :style="{'--sb': statusBarHeight + 'px'}">
|
|
<view class="tl-bg"></view>
|
|
<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
|
|
<view class="nav-back" @tap="goBack"><text class="nav-back-icon">‹</text></view>
|
|
<view class="nav-title">星球券明细</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="tl-scroll" :style="{paddingTop: (navHeight + 10) + 'px'}"
|
|
@scrolltolower="onScrolltolower">
|
|
<!-- 汇总卡片 -->
|
|
<view class="tl-sum">
|
|
<view class="tl-sum-glow"></view>
|
|
<view class="tl-sum-label">当前持有星球券</view>
|
|
<view class="tl-sum-value">
|
|
<text class="tl-sum-num">{{balance}}</text>
|
|
<text class="tl-sum-unit">张</text>
|
|
</view>
|
|
<view class="tl-sum-tip">星球券永久有效，囤越多瓜分越多</view>
|
|
</view>
|
|
|
|
<view class="tl-tabs">
|
|
<view class="tl-tab" :class="{active: activeTab === 'raiders'}" @tap="switchTab('raiders')">掠夺者列表</view>
|
|
<view class="tl-tab" :class="{active: activeTab === 'logs'}" @tap="switchTab('logs')">星球券明细</view>
|
|
</view>
|
|
|
|
<block v-if="activeTab === 'raiders'">
|
|
<view class="raider-card">
|
|
<view class="raider-head">
|
|
<view>
|
|
<view class="raider-kicker">ANGRY PIRATES</view>
|
|
<view class="raider-title">偷过我的人</view>
|
|
</view>
|
|
<view class="raider-more" @tap="loadMoreRaiders">{{raiderLoadText}}</view>
|
|
</view>
|
|
<view v-if="raiders.length" class="raider-list">
|
|
<view class="raider-row" v-for="(item, i) in raiders" :key="i">
|
|
<view class="raider-face">怒</view>
|
|
<view class="raider-mid">
|
|
<view class="raider-name">{{item.fromUserName || '神秘掠夺者'}}</view>
|
|
<view class="raider-desc">{{raiderDesc(item)}}</view>
|
|
</view>
|
|
<view class="raider-btn" @tap="revengeRaider(item)">反偷</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="raider-empty">{{raiderLoading ? '正在扫描掠夺者...' : '暂时没人偷过你的券'}}</view>
|
|
<view v-if="raiders.length" class="tl-foot">
|
|
<text v-if="raiderLoading">加载中…</text>
|
|
<text v-else-if="raiderNoMore">— 没有更多掠夺者了 —</text>
|
|
<text v-else @tap="loadMoreRaiders">点击加载更多</text>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<block v-else>
|
|
<!-- 骨架屏 -->
|
|
<view v-if="loading && list.length===0" class="tl-sk">
|
|
<view class="tl-sk-item" v-for="n in 6" :key="n"></view>
|
|
</view>
|
|
|
|
<!-- 明细列表 -->
|
|
<view v-else-if="list.length" class="tl-list">
|
|
<view class="tl-item" v-for="(item, i) in list" :key="i">
|
|
<view class="tl-icon" :class="'t-'+(item.type||'other')">{{typeIcon(item.type)}}</view>
|
|
<view class="tl-mid">
|
|
<text class="tl-name">{{item.remark || typeName(item.type)}}</text>
|
|
<text class="tl-time">{{item.createTime}}</text>
|
|
</view>
|
|
<view class="tl-right">
|
|
<text class="tl-change" :class="item.changeCount >= 0 ? 'up' : 'down'">
|
|
{{item.changeCount >= 0 ? '+' : ''}}{{item.changeCount}}
|
|
</text>
|
|
<text class="tl-balance">余 {{item.balance}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tl-foot">
|
|
<text v-if="loading">加载中…</text>
|
|
<text v-else-if="noMore">— 没有更多了 —</text>
|
|
<text v-else @tap="loadMore">点击加载更多</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空态 -->
|
|
<view v-else class="tl-empty">
|
|
<text class="tl-empty-icon">NO LOG</text>
|
|
<text class="tl-empty-text">还没有星球券记录</text>
|
|
<text class="tl-empty-tip">完成任务、下单、邀请好友都能获得星球券</text>
|
|
</view>
|
|
</block>
|
|
|
|
<view style="height:60rpx;"></view>
|
|
</scroll-view>
|
|
|
|
<hunt-modal
|
|
:show="huntModal.show"
|
|
:phase="huntModal.phase"
|
|
:result="huntModal.result"
|
|
:target="huntModal.target"
|
|
@close="closeHunt">
|
|
</hunt-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import huntModal from '@/package1/components/planet/hunt-modal.vue'
|
|
|
|
export default {
|
|
components: {
|
|
huntModal
|
|
},
|
|
data() {
|
|
return {
|
|
statusBarHeight: 20,
|
|
navHeight: 64,
|
|
userId: '',
|
|
regionId: '',
|
|
balance: 0,
|
|
activeTab: 'raiders',
|
|
list: [],
|
|
pageNumber: 1,
|
|
pageSize: 15,
|
|
total: 0,
|
|
loading: false,
|
|
noMore: false,
|
|
raiders: [],
|
|
raiderPageNumber: 1,
|
|
raiderPageSize: 10,
|
|
raiderTotal: 0,
|
|
raiderLoading: false,
|
|
raiderNoMore: false,
|
|
huntModal: {
|
|
show: false,
|
|
phase: 'searching',
|
|
result: null,
|
|
target: {}
|
|
},
|
|
huntTimers: []
|
|
}
|
|
},
|
|
computed: {
|
|
raiderLoadText() {
|
|
if (this.raiderLoading) return '加载中'
|
|
if (this.raiderNoMore) return '已到底'
|
|
return this.raiders.length ? '更多' : '刷新'
|
|
}
|
|
},
|
|
onLoad() {
|
|
const sys = uni.getSystemInfoSync()
|
|
this.statusBarHeight = sys.statusBarHeight || 20
|
|
this.initNavHeight()
|
|
this.userId = uni.getStorageSync('id') || ''
|
|
try {
|
|
const area = uni.getStorageSync('area')
|
|
if (area) this.regionId = JSON.parse(area).id || ''
|
|
} catch (e) {}
|
|
this.loadPage(true)
|
|
this.loadRaiders(true)
|
|
},
|
|
onUnload() {
|
|
this.clearHuntTimers()
|
|
},
|
|
methods: {
|
|
initNavHeight() {
|
|
try {
|
|
const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect()
|
|
if (menu && menu.top && menu.height) {
|
|
this.navHeight = menu.top + menu.height + 8
|
|
return
|
|
}
|
|
} catch (e) {}
|
|
this.navHeight = this.statusBarHeight + 44
|
|
},
|
|
loadPage(reset) {
|
|
if (this.loading) return
|
|
if (!this.userId) {
|
|
this.tui.toast('请先登录')
|
|
return
|
|
}
|
|
if (reset) {
|
|
this.pageNumber = 1
|
|
this.noMore = false
|
|
}
|
|
this.loading = true
|
|
this.tui.request('/app/planet/ticket/log', 'POST', {
|
|
userId: this.userId,
|
|
regionId: this.regionId,
|
|
pageNumber: this.pageNumber,
|
|
pageSize: this.pageSize
|
|
}, false, false, true).then((res) => {
|
|
this.loading = false
|
|
if (res.code == 200 && res.result) {
|
|
const records = res.result.records || []
|
|
this.total = res.result.total || 0
|
|
if (reset) {
|
|
this.list = records
|
|
// 取最新一条余额作为当前持有
|
|
if (records.length) this.balance = records[0].balance
|
|
} else {
|
|
this.list = this.list.concat(records)
|
|
}
|
|
if (this.list.length >= this.total || records.length < this.pageSize) {
|
|
this.noMore = true
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
loadMore() {
|
|
if (this.loading || this.noMore) return
|
|
this.pageNumber++
|
|
this.loadPage(false)
|
|
},
|
|
switchTab(tab) {
|
|
this.activeTab = tab
|
|
if (tab === 'raiders' && !this.raiders.length) this.loadRaiders(true)
|
|
if (tab === 'logs' && !this.list.length) this.loadPage(true)
|
|
},
|
|
onScrolltolower() {
|
|
if (this.activeTab === 'raiders') {
|
|
this.loadMoreRaiders()
|
|
return
|
|
}
|
|
this.loadMore()
|
|
},
|
|
loadRaiders(reset) {
|
|
if (this.raiderLoading || !this.userId) return
|
|
if (reset) {
|
|
this.raiderPageNumber = 1
|
|
this.raiderNoMore = false
|
|
}
|
|
this.raiderLoading = true
|
|
this.tui.request('/app/planet/search/raiders', 'POST', {
|
|
userId: this.userId,
|
|
regionId: this.regionId,
|
|
pageNumber: this.raiderPageNumber,
|
|
pageSize: this.raiderPageSize
|
|
}, false, false, true).then((res) => {
|
|
this.raiderLoading = false
|
|
if (res.code == 200 && res.result) {
|
|
const records = res.result.records || []
|
|
this.raiderTotal = res.result.total || 0
|
|
this.raiders = reset ? records : this.raiders.concat(records)
|
|
if (this.raiders.length >= this.raiderTotal || records.length < this.raiderPageSize) {
|
|
this.raiderNoMore = true
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
this.raiderLoading = false
|
|
})
|
|
},
|
|
loadMoreRaiders() {
|
|
if (this.raiderLoading) return
|
|
if (!this.raiders.length) {
|
|
this.loadRaiders(true)
|
|
return
|
|
}
|
|
if (this.raiderNoMore) return
|
|
this.raiderPageNumber++
|
|
this.loadRaiders(false)
|
|
},
|
|
raiderDesc(item) {
|
|
if (item.countered === 1) return '已被防御塔反击'
|
|
if (item.intercepted === 1) return '被防御塔拦截过'
|
|
return '偷走 ' + (item.gainTickets || 0) + ' 张券 · ' + (item.createTime || '')
|
|
},
|
|
revengeRaider(item) {
|
|
if (!item || !item.fromUserId) return
|
|
this.clearHuntTimers()
|
|
this.huntModal.show = true
|
|
this.huntModal.phase = 'searching'
|
|
this.huntModal.result = null
|
|
this.huntModal.target = {
|
|
userId: item.fromUserId,
|
|
nickname: item.fromUserName || '神秘掠夺者',
|
|
avatar: item.fromAvatar
|
|
}
|
|
this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'locking' }, 900))
|
|
this.huntTimers.push(setTimeout(() => { this.huntModal.phase = 'chasing' }, 1800))
|
|
this.tui.request('/app/planet/search/target', 'POST', {
|
|
userId: this.userId,
|
|
regionId: this.regionId,
|
|
toUserId: item.fromUserId
|
|
}, false, false, true).then((res) => {
|
|
this.huntTimers.push(setTimeout(() => {
|
|
if (res.code == 200 && res.result) {
|
|
this.huntModal.result = {
|
|
result: res.result.countered ? 'shield' : (res.result.intercepted ? 'fail' : 'success'),
|
|
message: res.result.message,
|
|
gainTickets: res.result.gainTickets,
|
|
totalGain: res.result.gainTickets || 0,
|
|
remainHunt: res.result.remainSearchCount
|
|
}
|
|
this.huntModal.phase = 'result'
|
|
this.loadPage(true)
|
|
this.loadRaiders(true)
|
|
} else {
|
|
this.huntModal.show = false
|
|
this.tui.toast(res.message)
|
|
}
|
|
}, 2200))
|
|
}).catch(() => {
|
|
this.huntModal.show = false
|
|
})
|
|
},
|
|
clearHuntTimers() {
|
|
this.huntTimers.forEach((timer) => clearTimeout(timer))
|
|
this.huntTimers = []
|
|
},
|
|
closeHunt() {
|
|
this.huntModal.show = false
|
|
this.huntModal.result = null
|
|
},
|
|
typeIcon(type) {
|
|
const map = {
|
|
order: '食', group: '团', invite: '邀', sign: '签',
|
|
box: '盒', hunt: '追', buff: '能', draw: '奖'
|
|
}
|
|
return map[type] || '券'
|
|
},
|
|
typeName(type) {
|
|
const map = {
|
|
order: '外卖订单', group: '团购订单', invite: '邀请好友', sign: '每日签到',
|
|
box: '幸运宝箱', hunt: '星际掠夺', buff: '购买增益', draw: '开奖瓜分'
|
|
}
|
|
return map[type] || '星球券变动'
|
|
},
|
|
goBack() {
|
|
const pages = getCurrentPages ? getCurrentPages() : []
|
|
if (pages.length > 1) {
|
|
uni.navigateBack({ delta: 1 })
|
|
return
|
|
}
|
|
uni.redirectTo({ url: '/package1/planet/index' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tl {
|
|
min-height: 100vh;
|
|
background: linear-gradient(155deg, #F3FFF4 0%, #EAF8FF 48%, #F7EEFF 100%);
|
|
color: #12342F;
|
|
}
|
|
|
|
.tl-bg {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; height: 520rpx;
|
|
background:
|
|
radial-gradient(circle at 78% 14%, rgba(53,214,166,0.26), transparent 44%),
|
|
radial-gradient(circle at 18% 32%, rgba(143,124,255,0.18), transparent 42%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.nav {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
z-index: 20;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(243,255,244,0.9);
|
|
}
|
|
|
|
.nav-back {
|
|
position: absolute;
|
|
left: 24rpx;
|
|
bottom: 12rpx;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255,255,255,.72);
|
|
box-shadow: 0 8rpx 20rpx rgba(18,52,47,.08);
|
|
}
|
|
|
|
.nav-back-icon { color: #12342F; font-size: 42rpx; font-weight: 300; line-height: 1; transform: translateY(-2rpx); }
|
|
|
|
.nav-title {
|
|
color: #12342F;
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 1rpx;
|
|
padding-bottom: 14rpx;
|
|
}
|
|
|
|
.tl-scroll {
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
padding: 0 28rpx;
|
|
}
|
|
|
|
/* 汇总卡 */
|
|
.tl-sum {
|
|
position: relative;
|
|
margin-top: 20rpx;
|
|
padding: 48rpx 40rpx 40rpx;
|
|
border-radius: 44rpx;
|
|
background: linear-gradient(150deg, rgba(255,255,255,0.9), rgba(226,255,241,0.7));
|
|
border: 2rpx solid rgba(255,255,255,0.92);
|
|
overflow: hidden;
|
|
box-shadow: 0 24rpx 62rpx rgba(53,214,166,0.14);
|
|
}
|
|
|
|
.tl-sum-glow {
|
|
position: absolute;
|
|
top: -120rpx; right: -80rpx;
|
|
width: 320rpx; height: 320rpx;
|
|
background: radial-gradient(circle, rgba(53,214,166,0.28), transparent 65%);
|
|
animation: tl-pulse 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes tl-pulse {
|
|
0%, 100% { transform: scale(0.85); opacity: 0.55; }
|
|
50% { transform: scale(1.1); opacity: 0.95; }
|
|
}
|
|
|
|
.tl-sum-label {
|
|
position: relative;
|
|
color: #42635E;
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.tl-sum-value {
|
|
position: relative;
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tl-sum-num {
|
|
font-size: 84rpx;
|
|
font-weight: 800;
|
|
color: #22B889;
|
|
font-family: DIN, Arial, sans-serif;
|
|
}
|
|
|
|
.tl-sum-unit {
|
|
margin-left: 12rpx;
|
|
font-size: 28rpx;
|
|
color: #42635E;
|
|
}
|
|
|
|
.tl-sum-tip {
|
|
position: relative;
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #7E9691;
|
|
}
|
|
|
|
.tl-tabs {
|
|
position: relative;
|
|
margin-top: 24rpx;
|
|
padding: 8rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255,255,255,0.64);
|
|
border: 2rpx solid rgba(255,255,255,0.88);
|
|
display: flex;
|
|
gap: 8rpx;
|
|
box-shadow: 0 14rpx 34rpx rgba(53,214,166,0.1);
|
|
}
|
|
|
|
.tl-tab {
|
|
flex: 1;
|
|
height: 66rpx;
|
|
line-height: 66rpx;
|
|
border-radius: 999rpx;
|
|
text-align: center;
|
|
color: #6B817D;
|
|
font-size: 25rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.tl-tab.active {
|
|
background: linear-gradient(135deg, #35D6A6, #4FB7FF);
|
|
color: #FFFFFF;
|
|
box-shadow: 0 12rpx 28rpx rgba(53,214,166,0.2);
|
|
}
|
|
|
|
.raider-card {
|
|
position: relative;
|
|
margin-top: 22rpx;
|
|
padding: 28rpx;
|
|
border-radius: 38rpx;
|
|
background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(255,239,232,0.66));
|
|
border: 2rpx solid rgba(255,255,255,0.9);
|
|
box-shadow: 0 20rpx 48rpx rgba(255,122,89,0.12);
|
|
}
|
|
|
|
.raider-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.raider-kicker {
|
|
color: #FF7A59;
|
|
font-size: 18rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.raider-title {
|
|
margin-top: 6rpx;
|
|
color: #12342F;
|
|
font-size: 32rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.raider-more {
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
padding: 0 18rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255,255,255,0.74);
|
|
color: #FF7A59;
|
|
font-size: 21rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.raider-list { margin-top: 18rpx; }
|
|
|
|
.raider-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 14rpx;
|
|
padding: 16rpx;
|
|
border-radius: 28rpx;
|
|
background: rgba(255,255,255,0.7);
|
|
}
|
|
|
|
.raider-face {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
line-height: 58rpx;
|
|
text-align: center;
|
|
border-radius: 20rpx;
|
|
background: linear-gradient(145deg, #FFB84D, #FF7A59);
|
|
color: #FFFFFF;
|
|
font-size: 24rpx;
|
|
font-weight: 900;
|
|
box-shadow: 0 12rpx 24rpx rgba(255,122,89,0.2);
|
|
}
|
|
|
|
.raider-mid {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
|
|
.raider-name {
|
|
color: #12342F;
|
|
font-size: 26rpx;
|
|
font-weight: 900;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.raider-desc {
|
|
margin-top: 6rpx;
|
|
color: #7E9691;
|
|
font-size: 21rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.raider-btn {
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, #FFB84D, #FF7A59);
|
|
color: #FFFFFF;
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.raider-empty {
|
|
margin-top: 18rpx;
|
|
padding: 26rpx;
|
|
border-radius: 26rpx;
|
|
background: rgba(255,255,255,0.58);
|
|
color: #7E9691;
|
|
font-size: 23rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 骨架 */
|
|
.tl-sk { margin-top: 28rpx; }
|
|
.tl-sk-item {
|
|
height: 120rpx;
|
|
border-radius: 22rpx;
|
|
margin-bottom: 20rpx;
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.45) 25%, rgba(255,255,255,0.9) 37%, rgba(255,255,255,0.45) 63%);
|
|
background-size: 400% 100%;
|
|
animation: tl-shimmer 1.4s ease infinite;
|
|
}
|
|
|
|
@keyframes tl-shimmer {
|
|
0% { background-position: 100% 50%; }
|
|
100% { background-position: 0 50%; }
|
|
}
|
|
|
|
/* 列表 */
|
|
.tl-list { margin-top: 28rpx; }
|
|
|
|
.tl-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 26rpx 24rpx;
|
|
margin-bottom: 18rpx;
|
|
border-radius: 30rpx;
|
|
background: rgba(255,255,255,0.74);
|
|
border: 2rpx solid rgba(255,255,255,0.92);
|
|
box-shadow: 0 12rpx 30rpx rgba(53,214,166,0.08);
|
|
}
|
|
|
|
.tl-icon {
|
|
width: 76rpx;
|
|
height: 76rpx;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
background: rgba(53,214,166,0.12);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tl-icon.t-buff, .tl-icon.t-hunt { background: rgba(255,122,89,0.14); }
|
|
.tl-icon.t-draw, .tl-icon.t-box { background: rgba(255,184,77,0.16); }
|
|
|
|
.tl-mid {
|
|
flex: 1;
|
|
margin-left: 22rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
}
|
|
|
|
.tl-name {
|
|
color: #12342F;
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.tl-time {
|
|
margin-top: 8rpx;
|
|
color: #7E9691;
|
|
font-size: 22rpx;
|
|
}
|
|
|
|
.tl-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tl-change {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
font-family: DIN, Arial, sans-serif;
|
|
}
|
|
|
|
.tl-change.up { color: #22B889; }
|
|
.tl-change.down { color: #FF7A59; }
|
|
|
|
.tl-balance {
|
|
margin-top: 6rpx;
|
|
font-size: 22rpx;
|
|
color: #7E9691;
|
|
}
|
|
|
|
.tl-foot {
|
|
text-align: center;
|
|
color: #7E9691;
|
|
font-size: 24rpx;
|
|
padding: 24rpx 0 8rpx;
|
|
}
|
|
|
|
/* 空态 */
|
|
.tl-empty {
|
|
margin-top: 140rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tl-empty-icon {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
line-height: 180rpx;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.72);
|
|
border: 2rpx solid rgba(255,255,255,0.92);
|
|
color: #35D6A6;
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 2rpx;
|
|
box-shadow: 0 20rpx 44rpx rgba(53,214,166,0.12);
|
|
}
|
|
.tl-empty-text { margin-top: 24rpx; color: #42635E; font-size: 30rpx; font-weight: 800; }
|
|
.tl-empty-tip { margin-top: 12rpx; color: #7E9691; font-size: 24rpx; }
|
|
</style>
|
|
|