大致完成页面

This commit is contained in:
2026-02-05 09:01:16 +08:00
parent c411c23b9c
commit d51e6a8f72
40 changed files with 11023 additions and 737 deletions

View File

@@ -53,7 +53,7 @@
</view>
<!-- 样式1 会员卡 -->
<view v-if="selectedStyle === 1" class="member-card-s1">
<view v-if="selectedStyle === 1" class="member-card-s1" @click="handleMember">
<view class="mc-content-s1">
<view class="mc-left">
<text class="mc-ic">👑</text>
@@ -66,7 +66,7 @@
</view>
<!-- 样式2 会员卡 -->
<view v-if="selectedStyle === 2" class="member-card-s2">
<view v-if="selectedStyle === 2" class="member-card-s2" @click="handleMember">
<view class="mc-content-s2">
<view class="mc-left">
<text class="mc-ic">👑</text>
@@ -76,7 +76,7 @@
</view>
</view>
<view class="mc-right">
<text class="mc-btn-white">立即续费</text>
<text class="mc-btn-white">立即续费 ></text>
</view>
</view>
</view>
@@ -116,17 +116,17 @@
<text class="stat-label-s3">优惠券</text>
</view>
</view>
</view>
<!-- 样式3 会员卡 -->
<view class="member-card-s3">
<view class="mc-content-s3">
<view class="mct-left-s3">
<text class="mct-ic-s3">👑</text>
<text class="mct-txt-s3">开通会员VIP</text>
</view>
<view class="mct-right-s3">
<text class="mct-more-s3">会员可享多项权益 ></text>
</view>
<!-- 样式3 会员卡 -->
<view v-if="selectedStyle === 3" class="member-card-s3" @click="handleMember">
<view class="mc-content-s3">
<view class="mct-left-s3">
<text class="mct-ic-s3">👑</text>
<text class="mct-txt-s3">开通会员VIP</text>
</view>
<view class="mct-right-s3">
<text class="mct-more-s3">会员可享多项权益 ></text>
</view>
</view>
</view>
@@ -253,6 +253,10 @@ const merchantItems = [
const handleSave = () => {
uni.showToast({ title: '保存成功' })
}
const handleMember = () => {
uni.showToast({ title: '会员功能开发中' })
}
</script>
<style scoped lang="scss">
@@ -326,11 +330,17 @@ const handleSave = () => {
/* 样式1&2 头部渐变 */
.user-header-gradient {
background: linear-gradient(135deg, #eb3c2d 0%, #ff5e5e 100%);
padding: 25px 15px 15px;
padding: 25px 0 12px;
position: relative;
}
.header-top { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.header-top {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
padding: 0 15px;
}
.avatar-box { width: 50px; height: 50px; border-radius: 25px; border: 2px solid rgba(255,255,255,0.8); overflow: hidden; margin-right: 12px; }
.avatar-img { width: 100%; height: 100%; }
@@ -339,11 +349,11 @@ const handleSave = () => {
.bind-phone { background-color: rgba(0,0,0,0.15); align-self: flex-start; padding: 2px 8px; border-radius: 10px; }
.bind-txt { color: #fff; font-size: 10px; }
.header-icons { display: flex; flex-direction: row; gap: 15px; }
.header-icons { display: flex; flex-direction: row; gap: 15px; padding: 0 15px; }
.ic-msg, .ic-set { font-size: 16px; color: #fff; position: relative; }
.msg-dot { position: absolute; top: -5px; right: -5px; background-color: #fff; color: #f2270c; font-size: 9px; width: 12px; height: 12px; border-radius: 6px; text-align: center; }
.stats-row { display: flex; flex-direction: row; justify-content: space-around; padding: 10px 0; margin-bottom: 10px; }
.stats-row { display: flex; flex-direction: row; justify-content: space-around; padding: 10px 15px; margin-bottom: 0; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-val { font-size: 16px; font-weight: bold; color: #fff; margin-bottom: 4px; }
.stat-label { font-size: 10px; color: rgba(255,255,255,0.8); }
@@ -351,9 +361,9 @@ const handleSave = () => {
/* 会员卡 样式1 */
.member-card-s1 {
background: linear-gradient(90deg, #fdf1d6 0%, #fbd795 100%);
margin: 0 -5px;
border-radius: 12px 12px 0 0;
padding: 15px;
margin: 12px 10px 4px;
border-radius: 12px;
padding: 15px 16px;
}
.mc-content-s1 {
display: flex;
@@ -367,12 +377,10 @@ const handleSave = () => {
/* 会员卡 样式2 */
.member-card-s2 {
background-color: rgba(255,255,255,0.25);
margin: 0 -5px;
border-radius: 12px 12px 0 0;
padding: 15px;
border-top: 1px solid rgba(255,255,255,0.3);
border-left: 1px solid rgba(255,255,255,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
margin: 12px 10px 4px;
border-radius: 12px;
padding: 15px 16px;
border: 1px solid rgba(255,255,255,0.3);
}
.mc-content-s2 {
display: flex;
@@ -388,7 +396,7 @@ const handleSave = () => {
/* 样式3 头部 */
.user-header-s3 {
background-color: #fff;
padding: 30px 20px 0;
padding: 30px 15px 0;
}
.header-top-s3 {
display: flex;
@@ -473,9 +481,9 @@ const handleSave = () => {
.member-card-s3 {
background: #282828;
margin: 0 -5px;
border-radius: 12px 12px 0 0;
padding: 18px 15px;
margin: 12px 10px;
border-radius: 12px;
padding: 18px 16px;
}
.mc-content-s3 {
display: flex;