15 changed files with 539 additions and 113 deletions
|
After Width: | Height: | Size: 10 KiB |
@ -1,5 +1,8 @@ |
|||||||
export default { |
export default { |
||||||
navigationBarTitleText: '编辑资料', |
navigationBarTitleText: '个人信息', |
||||||
navigationBarBackgroundColor: '#FFFFFF', |
navigationBarBackgroundColor: '#121212', |
||||||
navigationBarTextStyle: 'black', |
// navigationBarTextStyle 同时控制标题和返回按钮的颜色，只能是 'black' 或 'white'
|
||||||
|
navigationBarTextStyle: 'white', |
||||||
|
// 不可滚动
|
||||||
|
disableScroll: true, |
||||||
} |
} |
||||||
|
|||||||
@ -1,5 +1,210 @@ |
|||||||
.edit-profile-page { |
.edit-profile-page { |
||||||
min-height: 100vh; |
min-height: 100vh; |
||||||
background-color: #F2F3F5; |
background-color: #121212; |
||||||
padding: 30px; |
|
||||||
|
// 自定义导航栏 |
||||||
|
.custom-navbar { |
||||||
|
height: 88px; |
||||||
|
background-color: #121212; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
padding: 0 30px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.navbar-left { |
||||||
|
width: 60px; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.navbar-title { |
||||||
|
position: absolute; |
||||||
|
left: 50%; |
||||||
|
top: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
|
||||||
|
text { |
||||||
|
font-size: 33rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.navbar-right { |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 内容区域 |
||||||
|
.content-area { |
||||||
|
padding: 0 30px; |
||||||
|
|
||||||
|
// 头像区域 |
||||||
|
.avatar-section { |
||||||
|
width: 100%; |
||||||
|
height: 166px; |
||||||
|
margin: 100px 0 82px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.avatar-wrapper { |
||||||
|
position: relative; |
||||||
|
width: 166px; |
||||||
|
height: 166px; |
||||||
|
|
||||||
|
.avatar { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
:global { |
||||||
|
.taroify-image { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
|
||||||
|
.taroify-image__img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 相机图标 |
||||||
|
.camera-icon { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 46px; |
||||||
|
height: 46px; |
||||||
|
background: #03C175; |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border: 4px solid #121212; |
||||||
|
|
||||||
|
.camera-img { |
||||||
|
width: 24px; |
||||||
|
height: 24px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 表单区域 |
||||||
|
.form-section { |
||||||
|
.form-item { |
||||||
|
height: 100px; |
||||||
|
background-color: #21212A; |
||||||
|
border-radius: 13px; |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 0 30px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.form-label { |
||||||
|
font-size: 31rpx; |
||||||
|
color: #E6E6E6; |
||||||
|
flex-shrink: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.form-input { |
||||||
|
flex: 1; |
||||||
|
text-align: right; |
||||||
|
font-size: 31rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
margin-left: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.form-placeholder { |
||||||
|
color: #666666; |
||||||
|
font-size: 31rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.form-value { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
text { |
||||||
|
font-size: 31rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.arrow-icon { |
||||||
|
transform: rotate(180deg); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 保存按钮 |
||||||
|
.save-button { |
||||||
|
margin-top: 82px; |
||||||
|
width: 100%; |
||||||
|
height: 88px; |
||||||
|
background-color: #03C175; |
||||||
|
border-radius: 44px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: 33rpx; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: 500; |
||||||
|
border: none; |
||||||
|
|
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 头像选择菜单样式 |
||||||
|
:global { |
||||||
|
.taroify-action-sheet { |
||||||
|
.taroify-action-sheet__action { |
||||||
|
font-size: 32rpx; |
||||||
|
color: #333333; |
||||||
|
padding: 30rpx 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.wechat-avatar-btn { |
||||||
|
width: 100%; |
||||||
|
background: transparent; |
||||||
|
border: none; |
||||||
|
font-size: 32rpx; |
||||||
|
color: #333333; |
||||||
|
padding: 30rpx 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
border-radius: 0; |
||||||
|
line-height: 1.4; |
||||||
|
|
||||||
|
&::after { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-emoji { |
||||||
|
margin-right: 10rpx; |
||||||
|
font-size: 36rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-action-item { |
||||||
|
&.cancel-action { |
||||||
|
color: #999999; |
||||||
|
margin-top: 20rpx; |
||||||
|
border-top: 1PX solid #EEEEEE; |
||||||
|
} |
||||||
|
} |
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,30 @@ |
|||||||
|
/** |
||||||
|
* App Store - 全局应用状态 |
||||||
|
*/ |
||||||
|
import { makeAutoObservable } from 'mobx' |
||||||
|
|
||||||
|
class AppStore { |
||||||
|
// 控制 TabBar 显示/隐藏
|
||||||
|
showTabBar = true |
||||||
|
|
||||||
|
constructor() { |
||||||
|
makeAutoObservable(this) |
||||||
|
} |
||||||
|
|
||||||
|
// 设置 TabBar 显示状态
|
||||||
|
setShowTabBar(show: boolean) { |
||||||
|
this.showTabBar = show |
||||||
|
} |
||||||
|
|
||||||
|
// 隐藏 TabBar（弹窗打开时）
|
||||||
|
hideTabBar() { |
||||||
|
this.showTabBar = false |
||||||
|
} |
||||||
|
|
||||||
|
// 显示 TabBar（弹窗关闭时）
|
||||||
|
showTabBarFn() { |
||||||
|
this.showTabBar = true |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export const appStore = new AppStore() |
||||||
Loading…
Reference in new issue