大致完成页面
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user