优化编辑资料页面样式,统一按钮设计,调整导航栏高度,提升用户体验。更新相关样式以确保与全局样式一致,增强界面友好性。
This commit is contained in:
@@ -95,32 +95,37 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 编辑资料入口 - 深色圆角按钮 */
|
||||
/* 编辑资料入口 - 深色圆角按钮,与卡片统一 */
|
||||
.edit-profile-entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16rpx;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
padding: 28rpx 32rpx;
|
||||
min-height: 88rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 2rpx solid rgba(0, 206, 209, 0.25);
|
||||
border-radius: 24rpx;
|
||||
border: 2rpx solid rgba(0, 206, 209, 0.3);
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.edit-profile-entry:active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(0, 206, 209, 0.12);
|
||||
}
|
||||
|
||||
.edit-profile-icon {
|
||||
font-size: 32rpx;
|
||||
font-size: 36rpx;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.edit-profile-text {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #00CED1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-gradient {
|
||||
|
||||
@@ -10,6 +10,7 @@ const MBTI_LIST = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP
|
||||
Page({
|
||||
data: {
|
||||
statusBarHeight: 44,
|
||||
navBarTotalHeight: 88,
|
||||
avatar: '',
|
||||
nickname: '',
|
||||
mbtiList: MBTI_LIST,
|
||||
@@ -24,8 +25,11 @@ Page({
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
const statusBarHeight = app.globalData.statusBarHeight || 44
|
||||
const navBarTotalHeight = statusBarHeight + 44
|
||||
this.setData({
|
||||
statusBarHeight: app.globalData.statusBarHeight || 44
|
||||
statusBarHeight,
|
||||
navBarTotalHeight
|
||||
})
|
||||
this.loadProfile()
|
||||
},
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<!-- 编辑资料页 - 图二样式,行业/业务体量拆成两个输入框 -->
|
||||
<view class="page">
|
||||
<view class="page profile-edit-page">
|
||||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||||
<view class="nav-back" bindtap="goBack">
|
||||
<text class="back-icon">‹</text>
|
||||
</view>
|
||||
<text class="nav-title">编辑资料</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
<view class="nav-right-placeholder"></view>
|
||||
</view>
|
||||
<view class="nav-placeholder-bar" style="height: {{statusBarHeight + 44}}px;"></view>
|
||||
<view class="nav-placeholder-bar" style="height: {{navBarTotalHeight}}px;"></view>
|
||||
|
||||
<view class="content">
|
||||
<!-- 头像 -->
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
/* 编辑资料页 - 深色主题 */
|
||||
.page {
|
||||
/* 编辑资料页 - 深色主题,避免与 app 全局样式冲突 */
|
||||
page {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.page.profile-edit-page {
|
||||
min-height: 100vh;
|
||||
background: #000;
|
||||
padding-bottom: 64rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
@@ -18,6 +23,7 @@
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
@@ -28,6 +34,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
@@ -40,18 +47,23 @@
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
.nav-right-placeholder {
|
||||
width: 64rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.nav-placeholder-bar {
|
||||
width: 100%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 头像区域 */
|
||||
@@ -86,6 +98,7 @@
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(0, 206, 209, 0.3);
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.avatar-text {
|
||||
@@ -100,6 +113,7 @@
|
||||
font-size: 56rpx;
|
||||
font-weight: 600;
|
||||
color: #00CED1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.avatar-change-btn {
|
||||
@@ -111,7 +125,9 @@
|
||||
border: none;
|
||||
font-size: 26rpx;
|
||||
color: #00CED1;
|
||||
line-height: normal;
|
||||
line-height: 1.4;
|
||||
height: auto;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.avatar-change-btn::after {
|
||||
@@ -130,10 +146,10 @@
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-picker {
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 2rpx solid rgba(0, 206, 209, 0.25);
|
||||
border-radius: 16rpx;
|
||||
@@ -149,18 +165,33 @@
|
||||
.form-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
min-height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 2rpx solid rgba(0, 206, 209, 0.25);
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-picker .placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.picker-arrow {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.form-input-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
width: 100%;
|
||||
min-height: 80rpx;
|
||||
padding: 0 24rpx;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 2rpx solid rgba(0, 206, 209, 0.25);
|
||||
@@ -168,26 +199,31 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input-inline {
|
||||
.form-input-wrap .form-input-inline {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 76rpx;
|
||||
padding: 0 12rpx 0 0;
|
||||
border: none;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.form-input-wrap .form-input-inline.form-input {
|
||||
height: 76rpx;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.region-icon {
|
||||
font-size: 28rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.picker-arrow {
|
||||
margin-left: auto;
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
/* MBTI 与 地区 并排 */
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 24rpx;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-group.half {
|
||||
|
||||
Reference in New Issue
Block a user