优化编辑资料页面样式,统一按钮设计,调整导航栏高度,提升用户体验。更新相关样式以确保与全局样式一致,增强界面友好性。

This commit is contained in:
乘风
2026-02-13 18:41:50 +08:00
parent c13ee38786
commit bb62e887b3
4 changed files with 72 additions and 27 deletions

View File

@@ -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 {

View File

@@ -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()
},

View File

@@ -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">
<!-- 头像 -->

View File

@@ -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 {