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 @@
</view>
<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> -->
</view>
<view class="mod11">
<view class="mod11">
<view class="avatar">
<image :src="'../../static/touxiang.png'"></image>
</view>
......@@ -22,17 +21,20 @@
</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"
@getphonenumber="getPhoneNumber">立即登录
</button>
</view>
</view>
</view>
</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')">
<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 class="line"></view>
<view class="right_box">
......@@ -54,7 +56,7 @@
<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;">
<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>
<view class="line"></view>
<view class="right_box">
......@@ -153,12 +155,9 @@ button::after {
.menu-banner {
position: relative;
.video{
height: 436rpx;
}
height: 504rpx;
image {
height: 436rpx;
height: 400rpx;
}
.log {
......@@ -187,18 +186,19 @@ button::after {
}
.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;
justify-content: flex-start;
align-items: center;
margin-top: -90rpx;
width: 686rpx;
height: 104rpx;
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 {
align-items: center;
width: 72rpx;
height: 72rpx;
margin-right: 32rpx;
border-radius: 4rpx;
margin-right: 16.93rpx;
border-radius: 72rpx;
image {
width: 100%;
height: 100%;
border-radius: 60rpx;
border-radius: 72rpx;
};
}
......@@ -224,9 +224,10 @@ button::after {
justify-content:space-between;
flex-wrap:nowrap;
.user-name {
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
margin-top: 2.68rpx;
font-size: 24rpx;
font-weight: normal;
font-family: Arial-BoldMT, Arial;
color: #333333;
}
......@@ -235,7 +236,7 @@ button::after {
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
margin-top: 7rpx;
margin-top: 4.64rpx;
.content {
flex: 1;
......@@ -249,6 +250,7 @@ button::after {
.login-btn {
// width: 114rpx;
margin-right: -5rpx;
width: 167rpx;
height: 64rpx;
background: #0050F6;
......@@ -268,25 +270,28 @@ button::after {
.contents {
display: flex;
padding: 52rpx 64rpx 52rpx 70rpx;
margin: 24rpx 32rpx 24rpx 32rpx;
margin: -28rpx 32rpx 24rpx 32rpx;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
// background: #0000FF;
.myOrder {
width: 30%;
height: 197rpx;
height: 216rpx;
// background: #FF0000;
background: #FFFFFF;
align-items: center;
text-align: left;
.text {
margin-top: 5rpx;
margin-top: 5.02rpx;
font-size: 28rpx;
height: 40rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
width: 112rpx;
line-height: 40rpx;
margin-right: 70.46rpx;
color: #333333;
}
......@@ -297,12 +302,16 @@ button::after {
color: #323232;
margin-top: 10rpx;
}
.iconbox {
width: 99.94rpx;
height: 110rpx;
margin-left: 6rpx;
margin-top: 48.98rpx;
}
.icon {
width: 94.94rpx;
height:110rpx;
width: 99.94rpx;
height: 110rpx;
margin: 0 auto;
margin-top: 48.98rpx;
}
}
......@@ -315,14 +324,13 @@ button::after {
.right_box {
flex: 1;
// background: #00FF00;
width: 52%;
height: 196rpx;
width: 306rpx;
height: 216rpx;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-left: 60rpx;
padding-right: 24rpx ;
padding-left: 62.54rpx;
.box_two {
width: 100%;
......@@ -369,9 +377,10 @@ button::after {
width: 306rpx;
height: 2rpx;
border: 1rpx solid #E4E4E4;
margin: 39.84rpx 0rpx 30.84rpx 0rpx;
margin: 38rpx 0rpx 40rpx 0rpx;
}
.box {
margin-top: 4.05rpx;
overflow: initial;
width: 100%;
height: 129rpx;
......@@ -405,7 +414,7 @@ button::after {
.right {
.icon {
width: 91.59rpx;
height: 61.46rpx;
height: 63.9rpx;
}
}
}
......@@ -419,7 +428,7 @@ button::after {
width: 686rpx;
background: #FFFFFF;
margin: 0 auto;
padding: 21rpx 30rpx 29rpx 26rpx;
padding: 21.72rpx 30rpx 29.28rpx 26rpx;
box-sizing: border-box;
.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