wangyifang
/
wx-yunyubang-miniprogram
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

会员页面调整

Browse Source 
Signed-off-by: wangxiaoping <809126545@qq.com>
master
wangxiaoping 4 years ago
parent c6cd6f94a7
commit dc9ad03572
1 changed files with 223 additions and 23 deletions
Show Stats Download Patch File Download Diff File

242
pages/member/member.vue
Unescape View File

@ -3,14 +3,142 @@
<view class="memberBanner">
<image mode="widthFix" src="../../static/member_01.jpg"></image>
</view>
<view class="memberBanner">
<image mode="widthFix" src="../../static/member_02.jpg"></image>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue">￥<text class="f_big">19.9</text></text>专享大礼包</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">超值产后修复套餐</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>上门黄疸检测</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后中药熏蒸</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后肩颈调理</text><text class="f_black">1次</text></view>
</view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">超值拍摄套餐1套</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">游泳洗澡</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">早教</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">平江医院四维彩超</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
</view>
<view class="memberBanner">
<image mode="widthFix" src="../../static/member_03.jpg"></image>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue">￥<text class="f_big">99</text></text>超级修复女王卡</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">套餐项目</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>经络头疗</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2次</text></view>
</view>
<view class="colInfo width_453">
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1包（S/56PCS）</text></view>
</view>
</view>
</view>
<view class="memberBanner">
<image mode="widthFix" src="../../static/member_04.jpg"></image>
<view class="memberCon">
<view class="topTit">
<text class="titInner">
<text class="titCon"><text class="f_blue">￥<text class="f_big">680</text></text>超级福利卡</text>
<text class="line"></text>
</text>
</view>
<view class="title flex_center">
<view class="i_left"><image src="../../static/i_left.png"></image></view>
<view class="tit_center">套餐项目</view>
<view class="i_right"><image src="../../static/i_right.png"></image></view>
</view>
<view class="mealCol flex_start flex_wrap">
<view class="colInfo">
<view class="flex_between"><text>开奶/催乳</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>产后骨盆修复</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>黄疸检测</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>腹直肌修复</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>宝宝满月理发</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>磁疗发汗排毒</text><text class="f_black">2次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>经络头疗</text><text class="f_black">1次</text></view>
</view>
<view class="colInfo">
<view class="flex_between"><text>肩颈调理</text><text class="f_black">2次</text></view>
</view>
<view class="colInfo width_453">
<view class="flex_between"><text>露安适尿不湿</text><text class="f_black">1包（S/56PCS）</text></view>
</view>
</view>
</view>
<view class="joinBox" @click="open"><button>加入会员</button></view>
<view class="shareIcon" @click="shareOpen" v-if="user_info.promotion == 1">
@ -23,8 +151,11 @@
<view class="cardOuter">
<view v-for="(i, k) in packages" :class="{cur: cardActive == k, cardCol: true}"
@click="cardActive = k">
<view>{{i.name}}</view>
<view class="cardTit">{{i.price}}元</view>
<view class="flex_between" >
<view>{{i.name}}</view>
<view class="cardTit">{{i.price}}元</view>
</view>
<view class="note">备注：{{i.name}}</view>
</view>
<!-- <view :class="{cur: cardActive == 1, cardCol: true}" @click="cardActive = 1">
<view>福利卡</view>
@ -296,7 +427,7 @@
</script>
<style>
page {
background: #fff;
background: linear-gradient(to right, #488e4c 0%,#039786 100%);
padding-bottom: 160rpx;
}
</style>
@ -323,9 +454,9 @@
padding: 30rpx;
box-sizing: border-box;
position: fixed;
z-index:5;
left: 0;
bottom: 0;
background: #fff;
box-shadow: -5rpx 0px 20rpx rgba(0, 0, 0, 0.1);
button {
@ -336,7 +467,7 @@
text-align: center;
line-height: 100rpx;
text-align: center;
background: #FF578A;
background: linear-gradient(to bottom, #488e4c 0%,#039786 100%);
}
}
@ -386,13 +517,17 @@
.cardOuter {
display: flex;
justify-content: flex-start;
flex-direction: column;
padding: 20rpx;
.note{
color:#999;
font-size:24rpx;
text-align: left;
}
.cardCol {
width: 224rpx;
flex:1;
height: 156rpx;
margin: 0 15rpx;
margin: 0 15rpx 15rpx 15rpx;
border-radius: 8rpx;
box-sizing: border-box;
border: 2rpx solid #F5DFB5;
@ -400,12 +535,7 @@
color: #999;
text-align: center;
line-height: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
padding:10rpx 30rpx;
.cardTit {
color: #333;
font-size: 32rpx;
@ -494,4 +624,74 @@
color: #666;
}
}
.memberCon{
width:690rpx;
background: #fff;
border-radius: 8rpx;
padding:30rpx 0;
box-sizing: border-box;
margin-top:20rpx;
.topTit{
font-size:33rpx;
color:#302c2f;
font-weight:700;
padding:0 30rpx;
.titInner{position: relative;}
.titCon{position: relative;z-index:3;}
.line{
display:inline-block;
height:30rpx;
width:110%;
position: absolute;
left:0;
bottom:0;
background: linear-gradient(to bottom, #FDFEFD 0%,#91E4C1 100%);
z-index:1;
}
.f_blue{
color:#0079b8;
}
.f_big{
font-size:43rpx;
padding:0 5rpx;
}
}
.title{
padding:20rpx 30rpx;
.i_left{
image{display:block;width:23rpx;height:23rpx;}
}
.i_right{
image{display:block;width:23rpx;height:23rpx;}
}
.tit_center{
font-size:28rpx;
color:#0c967f;
font-weight: bold;
min-width:250rpx ;
text-align: center;
}
}
.mealCol{
padding:0 20rpx;
.width_453{width:480rpx!important;}
.colInfo{
width:310rpx;
margin:10rpx;
background: #def6eb;
height:50rpx;
border-radius:25rpx;
padding:0 30rpx;
font-size:26rpx;
font-weight:700;
line-height:50rpx;
box-sizing: border-box;
color:#079683;
.f_black{color:#044238;}
}
.colInfo:nth-child(even){
margin:10rpx 0 10rpx 10rpx;
}
}
}
</style>

Write Preview
Loading…
Cancel
Save