410 lines
7.5 KiB
CSS
410 lines
7.5 KiB
CSS
page {
|
||
background: #F6F7FB;
|
||
}
|
||
|
||
.conatiner {
|
||
/* height: 100%; */
|
||
/* height: 578rpx; */
|
||
/* background: linear-gradient(to bottom, #FFE7E1, #FFFFFF); */
|
||
/* background: linear-gradient( 359deg, rgba(255,255,255,0) 0%, #FDD9CA 100%); */
|
||
/* 与设计稿个人中心一致：顶部柔和五彩渐变（薄荷绿/粉/淡紫低饱和叠加）向下淡出到灰底 */
|
||
background:
|
||
radial-gradient(120% 56% at 12% 0%, rgba(150, 222, 210, 0.62) 0%, rgba(150, 222, 210, 0) 52%),
|
||
radial-gradient(110% 52% at 52% 2%, rgba(255, 188, 210, 0.55) 0%, rgba(255, 188, 210, 0) 56%),
|
||
radial-gradient(120% 58% at 96% 0%, rgba(200, 176, 242, 0.6) 0%, rgba(200, 176, 242, 0) 56%),
|
||
linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, #f4f4f6 540rpx),
|
||
#f4f4f6;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
/* 头部：吸顶固定（滚动时头像行始终可见），顶部避让胶囊的 paddingTop 由模板内联注入 */
|
||
.header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx 24rpx 25rpx;
|
||
/* 同一份渐变按 vw/vh 显式视口单位复刻：header 吸顶时盒子原点即视口原点，
|
||
与容器的视口渐变严格重合，且不依赖小程序支持度存疑的 background-attachment: fixed */
|
||
background:
|
||
radial-gradient(120vw 56vh at 12vw 0, rgba(150, 222, 210, 0.62) 0%, rgba(150, 222, 210, 0) 52%),
|
||
radial-gradient(110vw 52vh at 52vw 2vh, rgba(255, 188, 210, 0.55) 0%, rgba(255, 188, 210, 0) 56%),
|
||
radial-gradient(120vw 58vh at 96vw 0, rgba(200, 176, 242, 0.6) 0%, rgba(200, 176, 242, 0) 56%),
|
||
linear-gradient(180deg, rgba(244, 244, 246, 0) 0%, #f4f4f6 540rpx),
|
||
#f4f4f6;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: 11rpx;
|
||
}
|
||
|
||
/* 头像 */
|
||
.avatar-container {
|
||
display: flex;
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
background-color: #FF7354;
|
||
margin-right: 30rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* 头像图片 */
|
||
.avatar {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
pointer-events: auto;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.avatar_right {
|
||
flex: 1;
|
||
}
|
||
|
||
.avatar_title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar_setting {
|
||
display: flex;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.avatar_setting_box{
|
||
width: 70rpx;
|
||
height: 50rpx;
|
||
overflow: hidden;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 5rpx;
|
||
}
|
||
|
||
.avatar_setting_box image {
|
||
width: 34rpx;
|
||
height: 34rpx;
|
||
}
|
||
|
||
.avatar_setting>image:first-child {
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
/* 登录/注册（昵称：对齐原型个人中心 40rpx 加粗） */
|
||
.login-btn {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
pointer-events: auto;
|
||
color: #1a1a1a;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
|
||
.avater_mobile {
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
/* 物业快捷入口三格卡（样式对齐原型个人中心 quick-card：横排 + 竖线分隔） */
|
||
.quick-card {
|
||
display: flex;
|
||
align-items: stretch;
|
||
margin: 0 20rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.quick-item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8rpx;
|
||
padding: 24rpx 22rpx;
|
||
border-right: 1rpx solid #f1f1f1;
|
||
}
|
||
|
||
.quick-item:last-child {
|
||
border-right: none;
|
||
}
|
||
|
||
.quick-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
min-width: 0;
|
||
}
|
||
|
||
.quick-title {
|
||
font-size: 27rpx;
|
||
font-weight: 700;
|
||
color: #111111;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.quick-sub {
|
||
font-size: 21rpx;
|
||
color: #888888;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.quick-icon {
|
||
flex-shrink: 0;
|
||
/* 48rpx：三等分列内为文字留足空间，避免小屏拥挤 */
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
/* 通用模块白卡（我的订单 / 服务目录） */
|
||
.module-card {
|
||
margin: 20rpx 20rpx 0;
|
||
padding: 28rpx 24rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.module-head {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.module-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.module-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
/* 订单五状态横排 */
|
||
.order-status-row {
|
||
display: flex;
|
||
margin-top: 32rpx;
|
||
}
|
||
|
||
.status-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.status-item:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.status-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 24rpx;
|
||
color: #444444;
|
||
}
|
||
|
||
/* 我的钱包白卡（样式对齐原型个人中心 wallet-card） */
|
||
.wallet-card {
|
||
margin: 0 20rpx 21rpx;
|
||
padding: 32rpx 28rpx 28rpx;
|
||
border-radius: 24rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.wallet-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.wallet-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.wallet-assets {
|
||
display: flex;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.asset-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
.asset-item:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.asset-value {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.asset-label {
|
||
font-size: 24rpx;
|
||
color: #888888;
|
||
}
|
||
|
||
/* 服务目录行卡（点击弹抽屉） */
|
||
.service-card {
|
||
padding: 8rpx 24rpx;
|
||
}
|
||
|
||
.service-row {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 4rpx;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.service-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.service-row:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.service-icon {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.service-label {
|
||
flex: 1;
|
||
font-size: 30rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
.customer {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 212rpx;
|
||
background: rgba(255, 55, 11, 0.6);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-weight: normal;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.customer>image {
|
||
width: 50rpx;
|
||
height: 55rpx;
|
||
}
|
||
|
||
.uicon-volume {
|
||
font-size: 28rpx !important;
|
||
}
|
||
|
||
/* 全部功能抽屉（底部弹出，样式对齐原型 profile-function-drawer） */
|
||
.fd-wrap {
|
||
background: #f4f4f6;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 头部：白底 + 居中标题 + 右侧绝对定位关闭钮（对齐原型） */
|
||
.fd-head {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 92rpx;
|
||
background: #ffffff;
|
||
border-bottom: 1rpx solid #f2f2f2;
|
||
}
|
||
|
||
.fd-title {
|
||
font-size: 31rpx;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.fd-close {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 28rpx;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.fd-body {
|
||
/* scroll-view 需固定高度才能滚动定位（约 60% 屏高） */
|
||
height: 900rpx;
|
||
padding: 24rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.fd-group {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.fd-group-title {
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #1a1a1a;
|
||
margin: 0 0 12rpx 16rpx;
|
||
}
|
||
|
||
.fd-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
justify-items: center;
|
||
row-gap: 32rpx;
|
||
padding: 28rpx 20rpx;
|
||
border-radius: 18rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||
}
|
||
|
||
.fd-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.fd-item:active {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.fd-item-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.fd-item-name {
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
} |