Skip to content

U
user
Commit 6755b9d1 by songbingqi
Options

修改 我的页面 样式

parent 7ebf4441
Showing with 132 additions and 73 deletions
pages/mine/mine.vue
...@@ -5,68 +5,67 @@ ...@@ -5,68 +5,67 @@
<!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> --> <!-- <image class="logImg" src="/static/imgs/hooloo.png"></image> -->
<!-- <view class="logText">未 来 咖 啡</view> --> <!-- <view class="logText">未 来 咖 啡</view> -->
</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>
<view v-if="userms" class="mod11 flex-col"> <view v-if="userms" class="mod11">
<view class="box16 flex-col"></view> <view class="box16">
<text class="txt6">{{ userInfo.customerName || '我是谁' }}</text> <image :style="{'width':'100%','height':'100%'}" :src="'../../static/touxiang.png'"></image>
<view class="right_arrow">
<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
</view> </view>
<text class="txt6">{{ userInfo.customerName || '我是谁' }}</text>
</view> </view>
<button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button> <button class="mod11 flex-col" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立刻登录</button>
<view class="contents" v-if="userms"> <view class="contents" v-if="userms">
<view class="myOrder" @click="goToPage('order')"> <view class="myOrder" @click="goToPage('order')">
<h3>我的订单</h3> <view class="text">我的订单</view>
<view class="desc">点击查看订单</view> <view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
<view><image class="icon" src="/static/imgs/myOrder.png"></image></view>
</view> </view>
<view class="line"></view>
<view class="right_box"> <view class="right_box">
<view class="box" @click.stop="goToPage('coupon')"> <view class="box" @click.stop="goToPage('coupon')">
<view class="left"> <view class="left">
<h3>HOOLOO券</h3> <h3>HOOLOO券</h3>
<view class="desc">优惠多多不要错过</view>
</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>
<view class="box two" @click="goToPage('msg')"> <view class="line"></view>
<view class="box_two" @click="goToPage('msg')">
<view class="left"> <view class="left">
<h3>我的消息</h3> <h3>我的消息</h3>
<view class="desc">点击查看我的消息</view>
</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>
</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;"> <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="text">我的订单</view>
<view class="desc">点击查看订单</view> <view><image class="icon" src="/static/imgs/dingdan.png"></image></view>
<view><image class="icon" src="/static/imgs/myOrder.png"></image></view>
</button> </button>
<view class="line"></view>
<view class="right_box"> <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;"> <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"> <view class="left">
<h3>HOOLOO券</h3> <h3>HOOLOO券</h3>
<view class="desc">优惠多多不要错过</view>
</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>
<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"> <view class="left">
<h3>我的消息</h3> <h3>我的消息</h3>
<view class="desc">点击查看我的消息</view>
</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> </button>
</view> </view>
</view> </view>
<view v-if="userms" class="function"> <view v-if="userms" class="function">
<h3>常用功能</h3> <view class="title">常用功能</view>
<view class="function_item"> <view class="function_item">
<u-icon name="server-fill" color="#000000" size="16"></u-icon> <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> <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>
</view> </view>
...@@ -137,8 +136,10 @@ button::after { ...@@ -137,8 +136,10 @@ button::after {
.menu-box {} .menu-box {}
.menu-banner { .menu-banner {
height: 376rpx;
position: relative; position: relative;
.video{
height: 437rpx;
}
.log { .log {
position: absolute; position: absolute;
...@@ -166,57 +167,58 @@ button::after { ...@@ -166,57 +167,58 @@ button::after {
} }
.mod11 { .mod11 {
box-sizing: border-box;
padding: 32rpx;
width: 686rpx;
height: 136rpx;
background: #FFFFFF;
backdrop-filter: blur(10px);
margin: 0 auto; margin: 0 auto;
width: 692rpx;
height: 144rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 10rpx;
backdrop-filter: blur(10rpx);
display: flex; display: flex;
align-items: center; justify-content: flex-start;
margin-top: -72rpx; align-items: center;
padding: 0 30rpx; margin-top: -90rpx;
box-sizing: border-box;
color: #fff;
.right_arrow {
margin-left: auto;
}
.txt6 { .txt6 {
margin-left: 20rpx; font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 32rpx;
} }
.box16 { .box16 {
width: 80rpx; width: 72rpx;
height: 80rpx; height: 72rpx;
background: #FF72C1; border-radius: 50%;
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(50, 50, 50, 0.25);
border-radius: 4rpx;
} }
} }
.contents { .contents {
display: flex; display: flex;
padding: 34rpx; padding: 40rpx;
width: 100%; margin: 16rpx 32rpx 26rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
// background: #0000FF; // background: #0000FF;
.myOrder { .myOrder {
width: 36%; width: 36%;
height: 270rpx; height: 197rpx;
// background: #FF0000; // background: #FF0000;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx;
align-items: center; align-items: center;
text-align: center; text-align: center;
h3 { .text {
margin-top: 16rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 700; font-weight: 500;
color: #000000; color: #333333;
margin-top: 30rpx;
} }
.desc { .desc {
...@@ -228,28 +230,81 @@ button::after { ...@@ -228,28 +230,81 @@ button::after {
} }
.icon { .icon {
width: 70rpx; width: 72rpx;
height: 80rpx; height: 80rpx;
margin: 0 auto; margin: 0 auto;
margin-top: 50rpx; margin-top: 50rpx;
} }
} }
.line{
height: 197rpx;
background: #E4E4E4;
border: 1rpx solid #E4E4E4;
}
.right_box { .right_box {
margin-left: 20rpx; flex: 1;
// background: #00FF00; // background: #00FF00;
width: 52%; width: 52%;
height: 196rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-left: 60rpx;
padding-right: 24rpx ;
.two { .box_two {
margin-top: 15rpx; width: 100%;
} overflow: initial;
height: 129rpx;
// background: #FF0000;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.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 { .box {
overflow: initial;
width: 100%; width: 100%;
height: 129rpx; height: 129rpx;
line-height: 30rpx;
// background: #FF0000; // background: #FF0000;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -257,13 +312,13 @@ button::after { ...@@ -257,13 +312,13 @@ button::after {
.left { .left {
text-align: center; text-align: center;
padding-left: 30rpx; width: 154rpx;
h3 { h3 {
font-size: 28rpx; font-size: 28rpx;
font-family: Arial-BoldMT, Arial; font-family: Arial-BoldMT, Arial;
font-weight: 700; font-weight: normal;
color: #000000; color: #333333;
} }
.desc { .desc {
font-size: 20rpx; font-size: 20rpx;
...@@ -275,10 +330,9 @@ button::after { ...@@ -275,10 +330,9 @@ button::after {
} }
.right { .right {
padding-right: 30rpx;
.icon { .icon {
width: 80rpx; width: 80rpx;
height: 55rpx; height: 72rpx;
} }
} }
} }
...@@ -286,18 +340,18 @@ button::after { ...@@ -286,18 +340,18 @@ button::after {
} }
.function { .function {
width: 692rpx; width: 686rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 10rpx; border-radius: 10rpx;
margin: 0 auto; margin: 0 auto;
padding: 25rpx; padding: 22rpx 26rpx;
box-sizing: border-box; box-sizing: border-box;
h3 { .title {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 600; font-weight: 500;
color: #000000; color: #333333;
} }
.function_item { .function_item {
...@@ -309,16 +363,19 @@ button::after { ...@@ -309,16 +363,19 @@ button::after {
line-height: 34rpx; line-height: 34rpx;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 20rpx; margin-top: 22rpx;
.function_item_text { .function_item_text {
flex: 1; flex: 1;
margin: 0; margin: 0;
margin-left: 10rpx; margin-left: 16rpx;
padding: 10rpx; padding: 10rpx;
text-align: left; text-align: left;
line-height: 1; line-height: 1;
background-color: #FFFFFF; background-color: #FFFFFF;
font-weight: 400;
color: #333333;
font-family: PingFangSC-Regular, PingFang SC;
font-size: 24rpx; font-size: 24rpx;
border-radius: 0px; border-radius: 0px;
} }
...@@ -330,6 +387,8 @@ button::after { ...@@ -330,6 +387,8 @@ button::after {
.function_item_icon { .function_item_icon {
margin-left: auto; 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