vb
This commit is contained in:
jeremygan2021
@@ -1,53 +1,207 @@
|
||||
.page-container {
|
||||
min-height: 100vh;
|
||||
background-color: #f7f8fa;
|
||||
background-color: #050505;
|
||||
color: #fff;
|
||||
padding: 30px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: #fff;
|
||||
padding: 40px 20px;
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(0, 185, 107, 0.4); }
|
||||
70% { box-shadow: 0 0 0 10px rgba(0, 185, 107, 0); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(0, 185, 107, 0); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
100% { transform: translateY(0); }
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
margin-right: 15px;
|
||||
background: #eee;
|
||||
.card-bg-effect {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: radial-gradient(circle, rgba(0, 185, 107, 0.2) 0%, transparent 70%);
|
||||
filter: blur(40px);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
z-index: 1;
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 60px;
|
||||
border: 2px solid rgba(0, 185, 107, 0.5);
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.online-dot {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #00b96b;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #111;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.info-col {
|
||||
flex: 1;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.nickname {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 8px;
|
||||
text-shadow: 0 0 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.uid {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
background: rgba(0, 185, 107, 0.2);
|
||||
border: 1px solid #00b96b;
|
||||
color: #00b96b;
|
||||
font-size: 24px;
|
||||
border-radius: 30px;
|
||||
padding: 0 30px;
|
||||
height: 60px;
|
||||
line-height: 58px;
|
||||
margin: 0;
|
||||
width: fit-content;
|
||||
|
||||
&:active { background: rgba(0, 185, 107, 0.3); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: #fff;
|
||||
|
||||
.item {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
.stats-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 10px;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
.arrow { color: #ccc; }
|
||||
|
||||
.btn-contact {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.stat-val { font-size: 36px; font-weight: bold; color: #fff; margin-bottom: 5px; }
|
||||
.stat-lbl { font-size: 24px; color: #666; }
|
||||
}
|
||||
}
|
||||
|
||||
.service-container {
|
||||
padding-bottom: 40px;
|
||||
|
||||
.service-group {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.group-title {
|
||||
display: block;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
margin-bottom: 20px;
|
||||
padding-left: 10px;
|
||||
border-left: 4px solid #00b96b;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.grid-layout {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
.grid-item {
|
||||
width: calc(33.33% - 14px); // 3 items per row, accounting for gap
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 30px 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
backdrop-filter: blur(10px);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 185, 107, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.icon { font-size: 40px; }
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 26px;
|
||||
color: #ddd;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.version-info {
|
||||
margin-top: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
text {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,33 +13,99 @@ export default function UserIndex() {
|
||||
|
||||
const goOrders = () => Taro.navigateTo({ url: '/pages/order/list' })
|
||||
const goDistributor = () => Taro.navigateTo({ url: '/subpackages/distributor/index' })
|
||||
const goInvite = () => Taro.navigateTo({ url: '/subpackages/distributor/invite' })
|
||||
const goWithdraw = () => Taro.navigateTo({ url: '/subpackages/distributor/withdraw' })
|
||||
|
||||
const handleAddress = async () => {
|
||||
try { await Taro.chooseAddress() } catch(e) {}
|
||||
}
|
||||
|
||||
const login = () => {
|
||||
// Trigger login again if needed
|
||||
Taro.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
|
||||
const serviceGroups = [
|
||||
{
|
||||
title: '基础服务',
|
||||
items: [
|
||||
{ title: '我的订单', icon: '📦', action: goOrders },
|
||||
{ title: '地址管理', icon: '📍', action: handleAddress },
|
||||
{ title: '新增地址', icon: '📝', action: handleAddress },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '分销中心',
|
||||
items: [
|
||||
{ title: '分销首页', icon: '⚡', action: goDistributor },
|
||||
{ title: '推广邀请', icon: '🤝', action: goInvite },
|
||||
{ title: '佣金提现', icon: '💰', action: goWithdraw },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '其他',
|
||||
items: [
|
||||
{ title: '联系客服', icon: '🎧', isContact: true }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const stats = [
|
||||
{ label: '余额', value: '0.00' },
|
||||
{ label: '积分', value: '0' },
|
||||
{ label: '优惠券', value: '0' }
|
||||
]
|
||||
|
||||
return (
|
||||
<View className='page-container'>
|
||||
<View className='header'>
|
||||
<Image src={userInfo?.avatar_url || 'https://via.placeholder.com/100'} className='avatar' />
|
||||
<Text className='nickname'>{userInfo?.nickname || '未登录'}</Text>
|
||||
{!userInfo && <Button size='mini' onClick={login}>点击登录</Button>}
|
||||
{/* Profile Card */}
|
||||
<View className='profile-card'>
|
||||
<View className='avatar-container'>
|
||||
<Image src={userInfo?.avatar_url || 'https://via.placeholder.com/150/00b96b/FFFFFF?text=USER'} className='avatar' />
|
||||
{userInfo && <View className='online-dot' />}
|
||||
</View>
|
||||
<View className='info-col'>
|
||||
<Text className='nickname'>{userInfo?.nickname || '未登录用户'}</Text>
|
||||
<Text className='uid'>ID: {userInfo ? '888888' : '----'}</Text>
|
||||
{!userInfo && (
|
||||
<Button className='btn-login' onClick={login}>立即登录 / 注册</Button>
|
||||
)}
|
||||
</View>
|
||||
<View className='card-bg-effect' />
|
||||
</View>
|
||||
|
||||
<View className='menu'>
|
||||
<View className='item' onClick={goOrders}>
|
||||
<Text>我的订单</Text>
|
||||
<Text className='arrow'>></Text>
|
||||
</View>
|
||||
<View className='item' onClick={goDistributor}>
|
||||
<Text>分销中心</Text>
|
||||
<Text className='arrow'>></Text>
|
||||
</View>
|
||||
<View className='item'>
|
||||
<Text>联系客服</Text>
|
||||
<Button openType='contact' className='btn-contact' />
|
||||
<Text className='arrow'>></Text>
|
||||
</View>
|
||||
{/* Stats Row */}
|
||||
<View className='stats-row'>
|
||||
{stats.map((item, idx) => (
|
||||
<View key={idx} className='stat-item'>
|
||||
<Text className='stat-val'>{item.value}</Text>
|
||||
<Text className='stat-lbl'>{item.label}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* Service Groups */}
|
||||
<View className='service-container'>
|
||||
{serviceGroups.map((group, gIdx) => (
|
||||
<View key={gIdx} className='service-group'>
|
||||
<Text className='group-title'>{group.title}</Text>
|
||||
<View className='grid-layout'>
|
||||
{group.items.map((item, idx) => (
|
||||
<View key={idx} className='grid-item' onClick={item.action}>
|
||||
<View className='icon-box'>
|
||||
<Text className='icon'>{item.icon}</Text>
|
||||
</View>
|
||||
<Text className='item-title'>{item.title}</Text>
|
||||
{item.isContact && <Button openType='contact' className='contact-overlay' />}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View className='version-info'>
|
||||
<Text>Quant Speed Market v1.0.0</Text>
|
||||
<Text>Powered by Taro & React</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user