15 changed files with 539 additions and 113 deletions
|
After Width: | Height: | Size: 10 KiB |
@ -1,5 +1,8 @@
@@ -1,5 +1,8 @@
|
||||
export default { |
||||
navigationBarTitleText: '编辑资料', |
||||
navigationBarBackgroundColor: '#FFFFFF', |
||||
navigationBarTextStyle: 'black', |
||||
navigationBarTitleText: '个人信息', |
||||
navigationBarBackgroundColor: '#121212', |
||||
// navigationBarTextStyle 同时控制标题和返回按钮的颜色，只能是 'black' 或 'white'
|
||||
navigationBarTextStyle: 'white', |
||||
// 不可滚动
|
||||
disableScroll: true, |
||||
} |
||||
|
||||
@ -1,5 +1,210 @@
@@ -1,5 +1,210 @@
|
||||
.edit-profile-page { |
||||
min-height: 100vh; |
||||
background-color: #F2F3F5; |
||||
padding: 30px; |
||||
background-color: #121212; |
||||
|
||||
// 自定义导航栏 |
||||
.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 @@
@@ -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