Skip to content

U
user
Commit dd014f2b by songbingqi
Options

调整我的页面样式效果

parent 7deeae87
Showing with 51 additions and 42 deletions
pages/mine/mine.vue
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
</view> </view>
<image :src="'https://s3.bmp.ovh/imgs/2022/07/01/f683c3a5225011b2.gif'"/> <image :src="'https://s3.bmp.ovh/imgs/2022/07/01/f683c3a5225011b2.gif'"/>
<!-- <video class="video" autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/e6582afb60924.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/27/e6582afb60924.mp4"></video> -->
</view> <view class="mod11">
<view class="mod11">
<view class="avatar"> <view class="avatar">
<image :src="'../../static/touxiang.png'"></image> <image :src="'../../static/touxiang.png'"></image>
</view> </view>
...@@ -22,17 +21,20 @@ ...@@ -22,17 +21,20 @@
</view> </view>
</view> </view>
<view> <view>
<image class="arrow-right-select" v-if="userms" :src="'../../static/imgs/jiantouhei.png'" />
<button class="login-btn" v-if="!userms" open-type="getPhoneNumber" <button class="login-btn" v-if="!userms" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">立即登录 @getphonenumber="getPhoneNumber">立即登录
</button> </button>
</view> </view>
</view> </view>
</view>
</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')">
<view class="text">我的订单</view> <view class="text">我的订单</view>
<view><image class="icon" src="/static/imgs/dingdan.png"></image></view> <view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</view> </view>
<view class="line"></view> <view class="line"></view>
<view class="right_box"> <view class="right_box">
...@@ -54,7 +56,7 @@ ...@@ -54,7 +56,7 @@
<view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}"> <view class="contents" v-if="!userms" :style="{'padding-bottom':'65rpx'}">
<button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;"> <button class="myOrder" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" style="line-height:30rpx; margin-left:0rpx; margin-right:0rpx; padding-left:0rpx; padding-right:0rpx;">
<view class="text">我的订单</view> <view class="text">我的订单</view>
<view><image class="icon" src="/static/imgs/dingdan.png"></image></view> <view class="iconbox"><image class="icon" src="/static/imgs/dingdan.png"></image></view>
</button> </button>
<view class="line"></view> <view class="line"></view>
<view class="right_box"> <view class="right_box">
...@@ -153,12 +155,9 @@ button::after { ...@@ -153,12 +155,9 @@ button::after {
.menu-banner { .menu-banner {
position: relative; position: relative;
.video{ height: 504rpx;
height: 436rpx;
}
image { image {
height: 436rpx; height: 400rpx;
} }
.log { .log {
...@@ -187,18 +186,19 @@ button::after { ...@@ -187,18 +186,19 @@ button::after {
} }
.mod11 { .mod11 {
border-radius: 0rpx;
box-sizing: border-box;
padding: 28.5rpx 30rpx 28.5rpx 32rpx;
width: 686rpx;
height: 136rpx;
background: #FFFFFF;
backdrop-filter: blur(10px);
margin: 0 auto;
display: flex; display: flex;
justify-content: flex-start; width: 686rpx;
align-items: center; height: 104rpx;
margin-top: -90rpx; padding: 16rpx 32rpx 16rpx 32rpx;
background: #ffffff;
position: absolute;
z-index: 1;
bottom: 52rpx;
left: 33rpx;
box-sizing: border-box;
box-shadow: 0px 2px 8px 0px rgba(102, 102, 102, 0.1);
backdrop-filter: blur(0px);
z-index: 9;
...@@ -208,12 +208,12 @@ button::after { ...@@ -208,12 +208,12 @@ button::after {
align-items: center; align-items: center;
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;
margin-right: 32rpx; margin-right: 16.93rpx;
border-radius: 4rpx; border-radius: 72rpx;
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 60rpx; border-radius: 72rpx;
}; };
} }
...@@ -224,9 +224,10 @@ button::after { ...@@ -224,9 +224,10 @@ button::after {
justify-content:space-between; justify-content:space-between;
flex-wrap:nowrap; flex-wrap:nowrap;
.user-name { .user-name {
font-size: 32rpx; margin-top: 2.68rpx;
font-family: PingFangSC-Medium, PingFang SC; font-size: 24rpx;
font-weight: 500; font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333; color: #333333;
} }
...@@ -235,7 +236,7 @@ button::after { ...@@ -235,7 +236,7 @@ button::after {
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: #666666;
margin-top: 7rpx; margin-top: 4.64rpx;
.content { .content {
flex: 1; flex: 1;
...@@ -249,6 +250,7 @@ button::after { ...@@ -249,6 +250,7 @@ button::after {
.login-btn { .login-btn {
// width: 114rpx; // width: 114rpx;
margin-right: -5rpx;
width: 167rpx; width: 167rpx;
height: 64rpx; height: 64rpx;
background: #0050F6; background: #0050F6;
...@@ -268,25 +270,28 @@ button::after { ...@@ -268,25 +270,28 @@ button::after {
.contents { .contents {
display: flex; display: flex;
padding: 52rpx 64rpx 52rpx 70rpx; padding: 52rpx 64rpx 52rpx 70rpx;
margin: 24rpx 32rpx 24rpx 32rpx; margin: -28rpx 32rpx 24rpx 32rpx;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background: #FFFFFF; background: #FFFFFF;
// background: #0000FF; // background: #0000FF;
.myOrder { .myOrder {
width: 30%; height: 216rpx;
height: 197rpx;
// background: #FF0000; // background: #FF0000;
background: #FFFFFF; background: #FFFFFF;
align-items: center; align-items: center;
text-align: left; text-align: left;
.text { .text {
margin-top: 5rpx; margin-top: 5.02rpx;
font-size: 28rpx; font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
width: 112rpx;
line-height: 40rpx;
margin-right: 70.46rpx;
color: #333333; color: #333333;
} }
...@@ -297,12 +302,16 @@ button::after { ...@@ -297,12 +302,16 @@ button::after {
color: #323232; color: #323232;
margin-top: 10rpx; margin-top: 10rpx;
} }
.iconbox {
width: 99.94rpx;
height: 110rpx;
margin-left: 6rpx;
margin-top: 48.98rpx;
}
.icon { .icon {
width: 94.94rpx; width: 99.94rpx;
height:110rpx; height: 110rpx;
margin: 0 auto; margin: 0 auto;
margin-top: 48.98rpx;
} }
} }
...@@ -315,14 +324,13 @@ button::after { ...@@ -315,14 +324,13 @@ button::after {
.right_box { .right_box {
flex: 1; flex: 1;
// background: #00FF00; // background: #00FF00;
width: 52%; width: 306rpx;
height: 196rpx; height: 216rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-left: 60rpx; padding-left: 62.54rpx;
padding-right: 24rpx ;
.box_two { .box_two {
width: 100%; width: 100%;
...@@ -369,9 +377,10 @@ button::after { ...@@ -369,9 +377,10 @@ button::after {
width: 306rpx; width: 306rpx;
height: 2rpx; height: 2rpx;
border: 1rpx solid #E4E4E4; border: 1rpx solid #E4E4E4;
margin: 39.84rpx 0rpx 30.84rpx 0rpx; margin: 38rpx 0rpx 40rpx 0rpx;
} }
.box { .box {
margin-top: 4.05rpx;
overflow: initial; overflow: initial;
width: 100%; width: 100%;
height: 129rpx; height: 129rpx;
...@@ -405,7 +414,7 @@ button::after { ...@@ -405,7 +414,7 @@ button::after {
.right { .right {
.icon { .icon {
width: 91.59rpx; width: 91.59rpx;
height: 61.46rpx; height: 63.9rpx;
} }
} }
} }
...@@ -419,7 +428,7 @@ button::after { ...@@ -419,7 +428,7 @@ button::after {
width: 686rpx; width: 686rpx;
background: #FFFFFF; background: #FFFFFF;
margin: 0 auto; margin: 0 auto;
padding: 21rpx 30rpx 29rpx 26rpx; padding: 21.72rpx 30rpx 29.28rpx 26rpx;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
......
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