85 lines
1.4 KiB
Vue
85 lines
1.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<text class="title">会员中心</text>
|
|
</view>
|
|
<view class="member-info">
|
|
<view class="avatar-section">
|
|
<image src="/static/logo.png" class="avatar" />
|
|
<text class="nickname">张三</text>
|
|
<text class="level">黄金会员</text>
|
|
</view>
|
|
<view class="stats">
|
|
<view class="stat-item">
|
|
<text class="stat-value">100</text>
|
|
<text class="stat-label">积分</text>
|
|
</view>
|
|
<view class="stat-item">
|
|
<text class="stat-value">5</text>
|
|
<text class="stat-label">优惠券</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
// 会员中心逻辑
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.member-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.avatar-section {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.nickname {
|
|
display: block;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.level {
|
|
display: block;
|
|
color: #999;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
display: block;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #007AFF;
|
|
}
|
|
|
|
.stat-label {
|
|
display: block;
|
|
color: #999;
|
|
margin-top: 10rpx;
|
|
}
|
|
</style>
|