Browse Source

修改个人中心页面UI写法,解决页面横向出现滚动条BUG

master
邓平艺 4 years ago
parent
commit
b5bbe850bf
  1. 44
      pages/user/my/center.vue

44
pages/user/my/center.vue

@ -34,18 +34,19 @@
<view class="lf-font-24 lf-color-white">优惠券</view>
</view>
</view>
<view class="center-card">
<view class="lf-p-30 lf-row-between lf-w-100" @click="$url('/pages/user/member/quanyi')">
<view class="lf-flex-column">
<view class="lf-font-bold" style="color: #15716E;">
<text class="lf-font-48">VIP</text>
<text class="lf-font-30 lf-m-l-10">预备会员</text>
</view>
<view class="lf-font-28" style="color: #15716E;">卡号: 638329</view>
</view>
<view class="card-tag">
会员权益
</view>
<view class="center-card">
<view class="lf-p-30 lf-row-between lf-w-100" @click="$url('/pages/user/member/quanyi')">
<view class="lf-flex-column">
<view class="lf-font-bold" style="color: #15716E;">
<text class="lf-font-48">VIP</text>
<text class="lf-font-30 lf-m-l-10">预备会员</text>
</view>
<view class="lf-font-28" style="color: #15716E;">卡号: 638329</view>
</view>
<view class="card-tag">
会员权益
</view>
</view>
</view>
@ -131,6 +132,11 @@
}
</script>
<style>
page{
overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.order-children {
width: 134rpx;
@ -180,7 +186,8 @@
background: #FFFFFF;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 150rpx 0 30rpx 0;
// margin: 150rpx 0 30rpx 0;
margin: 30rpx 0 30rpx 0;
}
.order-card1 {
padding: 30rpx 30rpx 0 30rpx;
@ -210,11 +217,13 @@
align-items: center;
box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
border-radius: 20rpx;
margin: 0 auto;
position: absolute;
bottom: -120rpx;
left: 32rpx;
z-index: 9999;
margin: -40rpx auto 0;
position: relative;
z-index: 9;
// position: absolute;
// bottom: -120rpx;
// left: 32rpx;
// z-index: 9999;
}
.center-tag {
padding: 0 80rpx 0 80rpx;
@ -228,6 +237,7 @@
width: 750rpx;
height: 512rpx;
background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
overflow: hidden;
.bg-left{
position: absolute;
width: 196rpx;

Loading…
Cancel
Save