815 lines
19 KiB
Plaintext
815 lines
19 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<view class="-status-bar"></view>
|
|
<scroll-view direction="vertical" :show-scrollbar="false" style="height: 100%;">
|
|
<!-- 顶部背景 -->
|
|
<view class="top-background"></view>
|
|
<!-- 用户信息卡片 -->
|
|
<view class="user-card">
|
|
<view class="user-header">
|
|
<view class="avatar-section">
|
|
<image class="avatar" :src=" avatar" mode="aspectFill"></image>
|
|
<!-- <text class="vip-badge" v-if="userInfo.vip">
|
|
<uni-icons type="vip" size="16" color="#fff"></uni-icons>
|
|
</text> -->
|
|
<!-- <view class="online-status" v-if="userInfo.online"></view> -->
|
|
</view>
|
|
<view class="user-info">
|
|
<view class="name-section">
|
|
<text class="nickname">{{ userInfo?.nickname }}</text>
|
|
<!-- <text class="level-badge">Lv.{{ userInfo.level }}</text> -->
|
|
<!-- <view class="gender-badge" :class="userInfo.gender">
|
|
<uni-icons :type="userInfo.gender === 'male' ? 'male' : 'female'" size="12"
|
|
:color="userInfo.gender === 'male' ? '#007AFF' : '#FF2D55'"></uni-icons>
|
|
</view> -->
|
|
</view>
|
|
|
|
<text class="user-id">ID: {{ userInfo?.uid }}</text>
|
|
<!-- <text class="signature">{{ userInfo.signature !=null ?userInfo.signature : '这家伙很懒，什么都没留下' }}</text> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="stats-row">
|
|
<view class="stat-item" @click="navigateTo('followers')">
|
|
<text class="stat-value">{{ formatNumber(stats.friends) }}</text>
|
|
<text class="stat-label">缘友</text>
|
|
</view>
|
|
<view class="stat-item" @click="navigateTo('followers')">
|
|
<text class="stat-value">{{ formatNumber(stats.followers) }}</text>
|
|
<text class="stat-label">粉丝</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" @click="navigateTo('following')">
|
|
<text class="stat-value">{{ formatNumber(stats.following) }}</text>
|
|
<text class="stat-label">关注</text>
|
|
</view>
|
|
<view class="stat-divider"></view>
|
|
<view class="stat-item" @click="navigateTo('likes')">
|
|
<text class="stat-value">{{ formatNumber(stats.likes) }}</text>
|
|
<text class="stat-label">获赞</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 钱包和收益区域 -->
|
|
<view class="wallet-section">
|
|
<view class="wallet-item" @click="navigateTo('wallet')">
|
|
<uni-icons type="wallet" size="32" color="#FF9500"></uni-icons>
|
|
<text class="wallet-label">我的钱包</text>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
<view class="divider"></view>
|
|
<view class="wallet-item" @click="navigateTo('income')">
|
|
<uni-icons type="vip" size="32" color="#FF3B30"></uni-icons>
|
|
<text class="wallet-label">会员中心</text>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<!-- 功能区网格 -->
|
|
<view class="function-grid">
|
|
<view class="grid-row">
|
|
<view class="grid-item" @click="navigateTo('dynamic')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="pyq" size="32" color="#ffd790"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">我的动态</text>
|
|
<!-- <view v-if="userInfo.newDynamic" class="badge-dot"></view> -->
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('collect')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="star" size="32" color="#FF9500"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">我的收藏</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('history')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="heart" size="32" color="#FF2D55"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">浏览记录</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('gift')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="gift" size="32" color="#5856D6"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">我的礼物</text>
|
|
<!-- <view v-if="userInfo.newGift" class="badge-dot"></view> -->
|
|
</view>
|
|
</view>
|
|
<view class="grid-row">
|
|
<view class="grid-item" @click="navigateTo('fans')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="person" size="32" color="#007AFF"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">粉丝团</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('ranking')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="list" size="32" color="#FFCC00"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">排行榜</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('task')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="calendar" size="32" color="#5AC8FA"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">每日任务</text>
|
|
</view>
|
|
<view class="grid-item" @click="navigateTo('lottery')">
|
|
<view class="grid-icon">
|
|
<uni-icons type="help" size="32" color="#AF52DE"></uni-icons>
|
|
</view>
|
|
<text class="grid-text">幸运抽奖</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 列表功能区 -->
|
|
<view class="list-section">
|
|
<text class="list-title">账号与安全</text>
|
|
<view class="list-container">
|
|
<view class="list-item" @click="navigateTo('security')">
|
|
<view class="list-left">
|
|
<uni-icons type="locked" size="20" color="#007AFF"></uni-icons>
|
|
<text class="list-text">账号安全</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
<view class="list-item" @click="navigateTo('privacy')">
|
|
<view class="list-left">
|
|
<uni-icons type="eye" size="20" color="#34C759"></uni-icons>
|
|
<text class="list-text">隐私设置</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
<view class="list-item" @click="navigateTo('notification')">
|
|
<view class="list-left">
|
|
<uni-icons type="sound" size="20" color="#FF9500"></uni-icons>
|
|
<text class="list-text">消息通知</text>
|
|
</view>
|
|
<view class="list-right">
|
|
<!-- <text class="list-desc">{{ userInfo.notification ? '已开启' : '已关闭' }}</text> -->
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<text class="list-title">服务与支持</text>
|
|
<view class="list-container">
|
|
<view class="list-item" @click="navigateTo('feedback')">
|
|
<view class="list-left">
|
|
<uni-icons type="chatbubble" size="20" color="#5856D6"></uni-icons>
|
|
<text class="list-text">意见反馈</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
<view class="list-item" @click="navigateTo('help')">
|
|
<view class="list-left">
|
|
<uni-icons type="help" size="20" color="#FF3B30"></uni-icons>
|
|
<text class="list-text">帮助中心</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
<view class="list-item" @click="navigateTo('about')">
|
|
<view class="list-left">
|
|
<uni-icons type="info" size="20" color="#5AC8FA"></uni-icons>
|
|
<text class="list-text">关于我们</text>
|
|
</view>
|
|
<view class="list-right">
|
|
<text class="list-desc">v{{ appVersion }}</text>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
<view class="list-item" @click="showLogoutDialog">
|
|
<view class="list-left">
|
|
<uni-icons type="redo" size="20" color="#FF9500"></uni-icons>
|
|
<text class="list-text logout-text">退出登录</text>
|
|
</view>
|
|
<uni-icons type="right" size="16" color="#999"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import userState from "@/stores/user.uts"
|
|
import { IUserInfo } from "@/types/user.uts"
|
|
import Api from "@/common/api-service.uts"
|
|
|
|
const userInfo = computed(() : IUserInfo | null => {
|
|
return userState.info ?? null
|
|
})
|
|
|
|
// 我的聚合统计（缘友/粉丝/关注/获赞/动态）
|
|
const stats = reactive({
|
|
friends: 0,
|
|
followers: 0,
|
|
following: 0,
|
|
likes: 0,
|
|
moments: 0
|
|
})
|
|
const loadStats = () => {
|
|
Api.user.summary()
|
|
.then((res : UTSJSONObject) => {
|
|
stats.friends = (res.get('friends') as number) ?? 0
|
|
stats.followers = (res.get('followers') as number) ?? 0
|
|
stats.following = (res.get('following') as number) ?? 0
|
|
stats.likes = (res.get('likes') as number) ?? 0
|
|
stats.moments = (res.get('moments') as number) ?? 0
|
|
})
|
|
.catch(() => {})
|
|
}
|
|
const avatar = computed(() => {
|
|
return 'https://dev.xixingwl.cn' + userInfo.value?.avatar
|
|
})
|
|
// 响应式数据
|
|
/* const userInfo = reactive<IUserInfo>({
|
|
userId: '123456789',
|
|
nickname: '心动玩家',
|
|
avatar: "https://dev.xixingwl.cn/" + userState.user?.avatar,//'https://randomuser.me/api/portraits/men/32.jpg',
|
|
signature: '阳光正好，微风不燥，遇见你真好~',
|
|
gender: 'male',
|
|
age: 25,
|
|
level: 12,
|
|
vip: true,
|
|
online: true,
|
|
balance: 888.88,
|
|
todayIncome: 128.50,
|
|
followers: 12560,
|
|
following: 230,
|
|
likes: 45620,
|
|
newDynamic: true,
|
|
newGift: false,
|
|
notification: true
|
|
} as IUserInfo) */
|
|
|
|
const appVersion = ref('2.5.0')
|
|
// 加载用户信息
|
|
const loadUserInfo = () => {
|
|
console.log('加载用户信息...')
|
|
// 模拟API调用
|
|
setTimeout(() => {
|
|
// 这里应该是从API获取数据
|
|
console.log('用户信息加载完成')
|
|
}, 1000)
|
|
}
|
|
|
|
// 页面加载
|
|
onMounted(() => {
|
|
console.log('我的页面加载完成')
|
|
// 这里可以加载用户数据
|
|
loadUserInfo()
|
|
loadStats()
|
|
})
|
|
onShow(() => {
|
|
loadStats()
|
|
})
|
|
|
|
|
|
// 格式化数字（千分位）
|
|
const formatNumber = (num : number) : string => {
|
|
if (num >= 10000) {
|
|
return (num / 10000).toFixed(1) + 'w'
|
|
} else if (num >= 1000) {
|
|
return (num / 1000).toFixed(1) + 'k'
|
|
}
|
|
return num.toString()
|
|
}
|
|
|
|
// 编辑资料
|
|
const editProfile = () => {
|
|
console.log('编辑资料')
|
|
uni.navigateTo({
|
|
url: '/pages/edit-profile/edit-profile'
|
|
})
|
|
}
|
|
|
|
// 开通VIP
|
|
const openVip = () => {
|
|
console.log('开通VIP')
|
|
uni.showModal({
|
|
title: '开通VIP会员',
|
|
content: '开通VIP享受更多特权，包括去广告、专属装扮、优先匹配等',
|
|
confirmText: '立即开通',
|
|
cancelText: '再想想',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '跳转支付页面',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
// VIP中心
|
|
const vipCenter = () => {
|
|
console.log('VIP中心')
|
|
uni.navigateTo({
|
|
url: '/pages/vip-center/vip-center'
|
|
})
|
|
}
|
|
|
|
// 页面跳转
|
|
const navigateTo = (page : string) => {
|
|
console.log('跳转到页面:', page)
|
|
const pageUrl = ref<string>('')
|
|
switch (page) {
|
|
case 'wallet':
|
|
pageUrl.value = '/pages/my/wallet';
|
|
break;
|
|
case 'income':
|
|
pageUrl.value = '/pages/my/income';
|
|
break;
|
|
case 'dynamic':
|
|
pageUrl.value = '/pages/my/dynamic';
|
|
break;
|
|
case 'collect':
|
|
pageUrl.value = '/pages/my/collect';
|
|
break;
|
|
case 'history':
|
|
pageUrl.value = '/pages/my/history';
|
|
break;
|
|
case 'gift':
|
|
pageUrl.value = '/pages/my/gift';
|
|
break;
|
|
case 'fans':
|
|
pageUrl.value = '/pages/my/fans';
|
|
break;
|
|
case 'ranking':
|
|
pageUrl.value = '/pages/my/ranking';
|
|
break;
|
|
case 'task':
|
|
pageUrl.value = '/pages/my/task';
|
|
break;
|
|
case 'lottery':
|
|
pageUrl.value = '/pages/my/lottery';
|
|
break;
|
|
case 'security':
|
|
pageUrl.value = '/pages/my/security';
|
|
break;
|
|
case 'privacy':
|
|
pageUrl.value = '/pages/my/privacy';
|
|
break;
|
|
case 'notification':
|
|
pageUrl.value = '/pages/notification/notification';
|
|
break;
|
|
case 'feedback':
|
|
pageUrl.value = '/pages/my/feedback';
|
|
break;
|
|
case 'help':
|
|
pageUrl.value = '/pages/my/help';
|
|
break;
|
|
case 'about':
|
|
pageUrl.value = '/pages/my/about';
|
|
break;
|
|
case 'followers':
|
|
pageUrl.value = '/pages/my/followers';
|
|
break;
|
|
case 'following':
|
|
pageUrl.value = '/pages/my/following';
|
|
break;
|
|
case 'likes':
|
|
pageUrl.value = '/pages/my/likes';
|
|
break;
|
|
}
|
|
|
|
if (pageUrl.value != '') {
|
|
uni.navigateTo({
|
|
url: pageUrl.value
|
|
})
|
|
} else {
|
|
uni.showToast({
|
|
title: '页面开发中',
|
|
icon: 'none',
|
|
duration: 1500
|
|
})
|
|
}
|
|
}
|
|
// 退出登录
|
|
const logout = () => {
|
|
console.log('退出登录')
|
|
uni.showLoading({
|
|
title: '退出中...',
|
|
mask: true
|
|
})
|
|
|
|
// 清除本地登录态（token / 用户信息）
|
|
Api.auth.logout()
|
|
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '退出成功',
|
|
icon: 'success',
|
|
duration: 1500
|
|
})
|
|
|
|
// 跳转到登录页面
|
|
setTimeout(() => {
|
|
uni.reLaunch({
|
|
url: '/pages/login/index'
|
|
})
|
|
}, 1500)
|
|
}, 500)
|
|
}
|
|
// 显示退出登录对话框
|
|
const showLogoutDialog = () => {
|
|
uni.showModal({
|
|
title: '退出登录',
|
|
content: '确定要退出当前账号吗？',
|
|
confirmText: '退出',
|
|
confirmColor: '#FF3B30',
|
|
cancelText: '取消',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
logout()
|
|
}
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* 顶部背景 */
|
|
.top-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 300rpx;
|
|
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
|
|
border-bottom-left-radius: 40rpx;
|
|
border-bottom-right-radius: 40rpx;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 用户信息卡片 */
|
|
.user-card {
|
|
position: relative;
|
|
margin: 40rpx 30rpx 0;
|
|
padding: 40rpx 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.1);
|
|
z-index: 1;
|
|
}
|
|
|
|
.user-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-direction: row;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.avatar-section {
|
|
position: relative;
|
|
margin-right: 30rpx;
|
|
}
|
|
|
|
.avatar {
|
|
width: 140rpx;
|
|
height: 140rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #fff;
|
|
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.vip-badge {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
border: 4rpx solid #fff;
|
|
}
|
|
|
|
.online-status {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background-color: #4CD964;
|
|
border-radius: 50%;
|
|
border: 4rpx solid #fff;
|
|
}
|
|
|
|
.user-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.name-section {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-flow: row nowrap;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.nickname {
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-right: 20rpx;
|
|
max-width: 300rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.level-badge {
|
|
background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 4rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.gender-badge {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.gender-badge.male {
|
|
background-color: rgba(0, 122, 255, 0.1);
|
|
}
|
|
|
|
.gender-badge.female {
|
|
background-color: rgba(255, 45, 85, 0.1);
|
|
}
|
|
|
|
.user-id {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.signature {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
margin-bottom: 30rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: flex;
|
|
}
|
|
|
|
.stats-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
flex-flow: row nowrap;
|
|
background-color: #f8f8f8;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 0;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.stat-divider {
|
|
width: 2rpx;
|
|
height: 40rpx;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
}
|
|
|
|
.edit-btn,
|
|
.vip-btn {
|
|
flex: 1;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
border: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.edit-btn:active,
|
|
.vip-btn:active {
|
|
transform: scale(0.98);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.edit-btn {
|
|
background-color: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
|
|
.vip-btn {
|
|
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
|
|
color: #fff;
|
|
}
|
|
|
|
.vip-btn.active {
|
|
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
|
|
color: #333;
|
|
}
|
|
|
|
/* 钱包区域 */
|
|
.wallet-section {
|
|
margin: 30rpx;
|
|
padding: 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.wallet-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.wallet-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin: 0 20rpx 0 15rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.wallet-amount {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #FF9500;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.wallet-amount+.uni-icons {
|
|
color: #999;
|
|
}
|
|
|
|
.divider {
|
|
width: 2rpx;
|
|
height: 60rpx;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
/* 功能区网格 */
|
|
.function-grid {
|
|
margin: 0 30rpx 30rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx 0;
|
|
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.grid-row {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-around;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.grid-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
position: relative;
|
|
width: 25%;
|
|
}
|
|
|
|
.grid-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 25rpx;
|
|
background-color: #f8f8f8;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 15rpx;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.grid-item:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.grid-icon:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.grid-text {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.badge-dot {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20rpx;
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
background-color: #FF3B30;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #fff;
|
|
}
|
|
|
|
/* 列表区域 */
|
|
.list-section {
|
|
margin: 0 30rpx;
|
|
}
|
|
|
|
.list-title {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin: 20rpx 0 15rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.list-container {
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.list-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
padding: 30rpx;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.list-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.list-item:active {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.list-left {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.list-left .uni-icons {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.list-text {
|
|
font-size: 30rpx;
|
|
color: #333;
|
|
}
|
|
|
|
.logout-text {
|
|
color: #FF3B30;
|
|
}
|
|
|
|
.list-right {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-desc {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
margin-right: 15rpx;
|
|
}
|
|
</style> |