Skip to content

U
user
Commit 6755b9d1 by songbingqi
Options

修改 我的页面 样式

parent 7ebf4441
Showing with 129 additions and 70 deletions
pages/mine/mine.vue
......@@ -5,68 +5,67 @@
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> -->
</view>
<video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/17/a2aaece8ad026.mp4"></video>
<video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/17/a2aaece8ad026.mp4"></video>
</view>
<view v-if="userms" class="mod11 flex-col">
<view class="box16 flex-col"></view>
<text class="txt6">{{ userInfo.customerName || '我是谁' }}</text>
<view class="right_arrow">
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
<view v-if="userms" class="mod11">
<view class="box16">
<image :style="{'width':'100%','height':'100%'}" :src="'../../static/touxiang.png'"></image>
</view>
<text class="txt6">{{ userInfo.customerName || '我是谁' }}</text>
</view>
<button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button>
<view class="contents" v-if="userms">
<view class="myOrder" @click="goToPage('order')">
<h3>我的订单</h3>
<view class="desc">点击查看订单</view>
<view><image class="icon" src="/static/imgs/myOrder.png"></image></view>
<view class="text">我的订单</view>
<view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</view>
<view class="line"></view>
<view class="right_box">
<view class="box" @click.stop="goToPage('coupon')">
<view class="left">
<h3>HOOLOO券</h3>
<view class="desc">优惠多多不要错过</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/my3.png"></image></view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</view>
<view class="box two" @click="goToPage('msg')">
<view class="line"></view>
<view class="box_two" @click="goToPage('msg')">
<view class="left">
<h3>我的消息</h3>
<view class="desc">点击查看我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/myMail.png"></image></view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</view>
</view>
</view>
<view class="contents" v-if="!userms">
<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}">
<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<h3>我的订单</h3>
<view class="desc">点击查看订单</view>
<view><image class="icon" src="/static/imgs/myOrder.png"></image></view>
<view class="text">我的订单</view>
<view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</button>
<view class="line"></view>
<view class="right_box">
<button class="box" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<h3>HOOLOO券</h3>
<view class="desc">优惠多多不要错过</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/my3.png"></image></view>
<view class="right"><image class="icon" src="/static/imgs/youhuijuan.png"></image></view>
</button>
<button class="box two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="line"></view>
<button class="box_two" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:1.5; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="left">
<h3>我的消息</h3>
<view class="desc">点击查看我的消息</view>
</view>
<view class="right"><image class="icon" src="/static/imgs/myMail.png"></image></view>
<view class="right"><image class="icon" src="/static/imgs/xiaoxi.png"></image></view>
</button>
</view>
</view>
<view v-if="userms" class="function">
<h3>常用功能</h3>
<view class="title">常用功能</view>
<view class="function_item">
<u-icon name="server-fill" color="#000000" size="16"></u-icon>
<button class="function_item_text" open-type="contact" bindcontact="handleContact" session-from="sessionFrom">联系客服</button>
<u-icon name="arrow-right" class="function_item_icon" color="#000000" size="12"></u-icon>
<view class="function_item_icon">
<image :style="{'height':'100%','width':'100%'}" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
</view>
</view>
</view>
......@@ -137,8 +136,10 @@ button::after {
.menu-box {}
.menu-banner {
height: 376rpx;
position: relative;
.video{
height: 437rpx;
}
.log {
position: absolute;
......@@ -166,57 +167,58 @@ button::after {
}
.mod11 {
box-sizing: border-box;
padding: 32rpx;
width: 686rpx;
height: 136rpx;
background: #FFFFFF;
backdrop-filter: blur(10px);
margin: 0 auto;
width: 692rpx;
height: 144rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx;
backdrop-filter: blur(10rpx);
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: -72rpx;
padding: 0 30rpx;
box-sizing: border-box;
color: #fff;
margin-top: -90rpx;
.right_arrow {
margin-left: auto;
}
.txt6 {
margin-left: 20rpx;
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 32rpx;
}
.box16 {
width: 80rpx;
height: 80rpx;
background: #FF72C1;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
border-radius: 4rpx;
width: 72rpx;
height: 72rpx;
border-radius: 50%;
}
}
.contents {
display: flex;
padding: 34rpx;
width: 100%;
padding: 40rpx;
margin: 16rpx 32rpx 26rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
// background: #0000FF;
.myOrder {
width: 36%;
height: 270rpx;
height: 197rpx;
// background: #FF0000;
background: #FFFFFF;
border-radius: 10rpx;
align-items: center;
text-align: center;
h3 {
.text {
margin-top: 16rpx;
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: 700;
color: #000000;
margin-top: 30rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
}
.desc {
......@@ -228,28 +230,81 @@ button::after {
}
.icon {
width: 70rpx;
width: 72rpx;
height: 80rpx;
margin: 0 auto;
margin-top: 50rpx;
}
}
.line{
height: 197rpx;
background: #E4E4E4;
border: 1rpx solid #E4E4E4;
}
.right_box {
margin-left: 20rpx;
flex: 1;
// background: #00FF00;
width: 52%;
height: 196rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-left: 60rpx;
padding-right: 24rpx ;
.box_two {
width: 100%;
overflow: initial;
height: 129rpx;
// background: #FF0000;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.two {
margin-top: 15rpx;
.left {
text-align: center;
width: 154rpx;
h3 {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: normal;
color: #333333;
}
.desc {
font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #323232;
margin-top: 10rpx
}
}
.right {
.icon {
width: 80rpx;
height: 72rpx;
}
}
}
.line {
width: 306rpx;
height: 2rpx;
border: 1rpx solid #E4E4E4;
margin: 30rpx 0rpx;
}
.box {
overflow: initial;
width: 100%;
height: 129rpx;
line-height: 30rpx;
// background: #FF0000;
background: #FFFFFF;
border-radius: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -257,13 +312,13 @@ button::after {
.left {
text-align: center;
padding-left: 30rpx;
width: 154rpx;
h3 {
font-size: 28rpx;
font-family: Arial-BoldMT, Arial;
font-weight: 700;
color: #000000;
font-weight: normal;
color: #333333;
}
.desc {
font-size: 20rpx;
......@@ -275,10 +330,9 @@ button::after {
}
.right {
padding-right: 30rpx;
.icon {
width: 80rpx;
height: 55rpx;
height: 72rpx;
}
}
}
......@@ -286,18 +340,18 @@ button::after {
}
.function {
width: 692rpx;
width: 686rpx;
background: #FFFFFF;
border-radius: 10rpx;
margin: 0 auto;
padding: 25rpx;
padding: 22rpx 26rpx;
box-sizing: border-box;
h3 {
.title {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
font-weight: 500;
color: #333333;
}
.function_item {
......@@ -309,16 +363,19 @@ button::after {
line-height: 34rpx;
display: flex;
align-items: center;
margin-top: 20rpx;
margin-top: 22rpx;
.function_item_text {
flex: 1;
margin: 0;
margin-left: 10rpx;
margin-left: 16rpx;
padding: 10rpx;
text-align: left;
line-height: 1;
background-color: #FFFFFF;
font-weight: 400;
color: #333333;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx;
border-radius: 0px;
}
......@@ -330,6 +387,8 @@ button::after {
.function_item_icon {
margin-left: auto;
width: 12rpx;
height: 21rpx;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment