chenkainan
2 months ago
6 changed files with 587 additions and 484 deletions
@ -1,236 +1,327 @@ |
|||
/* pages/user/user.wxss */ |
|||
page { |
|||
background: #EDEDED; |
|||
background: #F7F7F7; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
.top-box { |
|||
padding: 0 30rpx; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
color: #fff; |
|||
height: 180rpx; |
|||
|
|||
.bg { |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
/* 顶部背景区域 */ |
|||
.top-background { |
|||
width: 100%; |
|||
height: 480rpx; /* 对应 H5 的 6.5rem 左右 */ |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.bg-img { |
|||
width: 100%; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
z-index: 1; |
|||
} |
|||
.topbg { |
|||
|
|||
/* 顶部遮罩 */ |
|||
.top-background::after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
z-index: -1; |
|||
height: 100%; |
|||
background: rgba(0,0,0,0.25); |
|||
z-index: 2; |
|||
} |
|||
.top-box .headimg { |
|||
width: 100rpx; |
|||
height: 100rpx; |
|||
|
|||
/* 用户信息 */ |
|||
.user-top-new { |
|||
position: absolute; |
|||
top: 150rpx; /* 根据导航栏高度调整 */ |
|||
left: 0; |
|||
width: 100%; |
|||
z-index: 3; |
|||
padding: 0 40rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.avatar-box { |
|||
width: 135rpx; |
|||
height: 135rpx; |
|||
border-radius: 50%; |
|||
border: 4rpx solid rgba(255,255,255,0.9); |
|||
overflow: hidden; |
|||
margin-right: 30rpx; |
|||
flex-shrink: 0; |
|||
margin-right: 20rpx; |
|||
} |
|||
.userinfo { |
|||
|
|||
.headimg { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.info-text { |
|||
flex: 1; |
|||
font-size: 24rpx; |
|||
color: #fff; |
|||
} |
|||
.username { |
|||
|
|||
.name-row { |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 36rpx; |
|||
font-weight: bold; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
.username image { |
|||
width: 31rpx; |
|||
margin-left: 20rpx; |
|||
|
|||
.nickname { |
|||
font-size: 37rpx; |
|||
font-weight: bold; |
|||
margin-right: 15rpx; |
|||
max-width: 350rpx; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.gender-icon { |
|||
width: 34rpx; |
|||
height: 34rpx; |
|||
} |
|||
.user-box { |
|||
margin: 0 30rpx; |
|||
margin-bottom: 20rpx; |
|||
background: white; |
|||
border-radius: 20rpx; |
|||
padding: 0rpx 20rpx; |
|||
font-size: 29rpx; |
|||
color: #333; |
|||
|
|||
.id-row { |
|||
font-size: 28rpx; |
|||
opacity: 0.9; |
|||
} |
|||
.user-box-top { |
|||
|
|||
.arrow-right { |
|||
padding: 15rpx; |
|||
} |
|||
|
|||
/* 主容器 */ |
|||
.main-container { |
|||
position: relative; |
|||
margin-top: -80rpx; |
|||
z-index: 10; |
|||
padding: 20rpx 30rpx; |
|||
background: #f7f7f7; |
|||
border-radius: 33rpx 33rpx 0 0; |
|||
} |
|||
|
|||
/* 卡片通用样式 */ |
|||
.card-box { |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
padding: 30rpx 20rpx; |
|||
margin-bottom: 20rpx; |
|||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.02); |
|||
} |
|||
|
|||
/* 标题 */ |
|||
.title { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 30rpx 0; |
|||
height: 28rpx; |
|||
align-items: center; |
|||
margin-bottom: 30rpx; |
|||
padding: 0 10rpx; |
|||
} |
|||
|
|||
.main-title { |
|||
font-size: 34rpx; |
|||
font-weight: bold; |
|||
color: #333; |
|||
} |
|||
.all-text { |
|||
|
|||
.sub-title { |
|||
font-size: 26rpx; |
|||
color: #999; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 27rpx; |
|||
color: #888; |
|||
} |
|||
.all-text .iconfont { |
|||
font-size: 24rpx; |
|||
|
|||
/* 订单部分 */ |
|||
.order-list { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
margin-bottom: 30rpx; |
|||
padding: 0 10rpx; |
|||
} |
|||
.user-order-types { |
|||
|
|||
.order-item { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
position: relative; |
|||
width: 20%; |
|||
} |
|||
.user-order-type { |
|||
width: 25%; |
|||
text-align: center; |
|||
font-size: 27rpx; |
|||
margin-bottom: 30rpx; |
|||
|
|||
.order-item image { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
margin-bottom: 10rpx; |
|||
} |
|||
.user-order-type image { |
|||
width: 60rpx; |
|||
height: 60rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.order-item text { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
} |
|||
.user-box-line { |
|||
line-height: 120rpx; |
|||
border-bottom: 1rpx solid #d8d8d8; |
|||
|
|||
.total { |
|||
position: absolute; |
|||
min-width: 36rpx; |
|||
height: 36rpx; |
|||
line-height: 36rpx; |
|||
text-align: center; |
|||
background: linear-gradient(0deg, #FF8826, #FF2726); |
|||
border-radius: 18rpx; |
|||
font-size: 22rpx; |
|||
color: #FFFFFF; |
|||
right: 10rpx; |
|||
top: -10rpx; |
|||
padding: 0 6rpx; |
|||
} |
|||
.user-box .user-box-line:last-child { |
|||
border-bottom: none; |
|||
|
|||
/* 待付款轮播 */ |
|||
.pay-swiper-box { |
|||
width: 100%; |
|||
height: 200rpx; |
|||
} |
|||
|
|||
.swiper { |
|||
height: 100%; |
|||
} |
|||
|
|||
.pay { |
|||
width: 648rpx; |
|||
height: 204rpx; |
|||
margin: 0 auto; |
|||
background: #F6F6F6; |
|||
padding: 18rpx; |
|||
.dfkBox { |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
background: #F9F9F9; |
|||
padding: 20rpx; |
|||
display: flex; |
|||
border-radius: 10rpx; |
|||
} |
|||
|
|||
.prod-img { |
|||
width: 220rpx; |
|||
height: 160rpx; |
|||
margin-right: 20rpx; |
|||
border-radius: 8rpx; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
.s-box { |
|||
.contentBox { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.btn { |
|||
width: 162rpx; |
|||
height: 56rpx; |
|||
background: #FB6E4D; |
|||
border-radius: 28rpx; |
|||
.status-text { |
|||
font-size: 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 56rpx; |
|||
text-align: center; |
|||
margin-top: 10rpx; |
|||
float:right; |
|||
} |
|||
.swiper{ |
|||
height: 100% !important; |
|||
color: #333; |
|||
} |
|||
.box-r{ |
|||
margin-left: 30rpx; |
|||
width: 388rpx; |
|||
|
|||
.time-text { |
|||
font-size: 26rpx; |
|||
color: #666; |
|||
} |
|||
.wpay{ |
|||
|
|||
font-size: 32rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #333333; |
|||
.orderBtn { |
|||
width: 150rpx; |
|||
height: 52rpx; |
|||
background: #FB6E4D; |
|||
border-radius: 26rpx; |
|||
text-align: center; |
|||
line-height: 52rpx; |
|||
font-size: 26rpx; |
|||
color: #FFFFFF; |
|||
align-self: flex-end; |
|||
} |
|||
|
|||
/* 团购订单行 */ |
|||
.group-order-row { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30rpx 30rpx; |
|||
} |
|||
.time{ |
|||
font-size: 28rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 400; |
|||
color: #666666; |
|||
margin-top: 10rpx; |
|||
|
|||
.group-order-row .left { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
.mask { |
|||
position: fixed; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
z-index: 999; |
|||
|
|||
.group-icon { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
margin-left: 15rpx; |
|||
} |
|||
.model{ |
|||
width: 561rpx; |
|||
min-height: 449rpx; |
|||
background: #FFFFFF; |
|||
border-radius: 13rpx; |
|||
position: absolute; |
|||
box-sizing: border-box; |
|||
|
|||
/* 常用功能 */ |
|||
.section-box { |
|||
padding: 20rpx 20rpx 0; |
|||
box-sizing: border-box; |
|||
background: #FFFFFF; |
|||
border-radius: 20rpx; |
|||
margin-bottom: 20rpx; |
|||
} |
|||
.model-title{ |
|||
text-align: center; |
|||
|
|||
.section-title { |
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: bold; |
|||
color: #333333; |
|||
margin-top: 32rpx; |
|||
box-sizing: border-box; |
|||
|
|||
color: #333; |
|||
margin: 10rpx 0 20rpx 10rpx; |
|||
} |
|||
.model-content{ |
|||
|
|||
.common-func-grid { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
justify-content: space-between; |
|||
flex-wrap: wrap; |
|||
margin-top: 100rpx; |
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
.btn-list{ |
|||
height: 106rpx; |
|||
width: 100%; |
|||
position: absolute; |
|||
bottom: 0; |
|||
border-top: 1rpx solid rgba(216, 216, 216, .99); |
|||
padding: 10rpx; |
|||
box-sizing: border-box; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.func-item { |
|||
width: 315rpx; |
|||
height: 110rpx; |
|||
margin-bottom: 20rpx; |
|||
background-size: 100% 100%; |
|||
background-repeat: no-repeat; |
|||
} |
|||
.model-btn{ |
|||
width: 50%; |
|||
text-align: center; |
|||
height: 86rpx; |
|||
line-height: 86rpx; |
|||
|
|||
font-size: 34rpx; |
|||
font-family: PingFang SC; |
|||
font-weight: 500; |
|||
color: #333333; |
|||
/* 更多服务 */ |
|||
.more-service-grid { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
|
|||
button{ |
|||
margin:0; |
|||
padding:0; |
|||
border-radius:0; |
|||
border:none; |
|||
background-color:transparent; |
|||
.service-item { |
|||
width: 25%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 20rpx 0; |
|||
} |
|||
|
|||
button::after{ |
|||
border: none; |
|||
.service-icon { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
margin-bottom: 15rpx; |
|||
} |
|||
|
|||
.bottom-intro{ |
|||
width: 100%; |
|||
padding: 75rpx; |
|||
font-family: PingFang-SC, PingFang-SC; |
|||
font-weight: 500; |
|||
font-size: 25rpx; |
|||
color: #999999; |
|||
line-height: 40rpx; |
|||
.service-name { |
|||
font-size: 26rpx; |
|||
color: #333; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
line-height: 1.3; |
|||
} |
|||
|
|||
/* 底部文字 */ |
|||
.bottom-intro { |
|||
padding: 40rpx 0; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
color: #999; |
|||
line-height: 36rpx; |
|||
} |
|||
|
|||
Loading…
Reference in new issue