feat: refresh login components
This commit is contained in:
@@ -66,7 +66,7 @@ export default function LoginGuard(props: { children: React.ReactNode }) {
|
|||||||
<Image className='login-guard-icon' src={assetUrl('/icon/个人.png')} mode='aspectFit' />
|
<Image className='login-guard-icon' src={assetUrl('/icon/个人.png')} mode='aspectFit' />
|
||||||
<Text className='login-guard-title'>请先登录</Text>
|
<Text className='login-guard-title'>请先登录</Text>
|
||||||
<Text className='login-guard-desc'>登录后查看您的专属内容</Text>
|
<Text className='login-guard-desc'>登录后查看您的专属内容</Text>
|
||||||
<View className='btn-gradient login-guard-btn' onTap={() => Taro.switchTab({ url: '/pages/profile/index' })}>
|
<View className='btn-primary login-guard-btn' onTap={() => Taro.switchTab({ url: '/pages/profile/index' })}>
|
||||||
<Text>去登录</Text>
|
<Text>去登录</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -40,7 +40,7 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin: 0 auto 24px;
|
margin: 0 auto 24px;
|
||||||
background: var(--bg-input);
|
background: var(--bg-input);
|
||||||
border: 3px dashed var(--line-star);
|
border: 1rpx solid var(--border);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -48,6 +48,10 @@
|
|||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatar-btn:active {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.avatar-img {
|
.avatar-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -63,7 +67,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: var(--bg-input);
|
background: var(--bg-input);
|
||||||
border: 3px dashed var(--line-star);
|
border: 1rpx solid var(--border);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
@@ -72,12 +76,16 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nickname-input:focus {
|
||||||
|
border-color: var(--accent-primary);
|
||||||
|
}
|
||||||
|
|
||||||
.login-actions {
|
.login-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-actions .btn-outline,
|
.login-actions .btn-secondary,
|
||||||
.login-actions .btn-gradient {
|
.login-actions .btn-primary {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,8 +80,7 @@ export default function LoginModal({ visible, onClose, onLogin }: { visible: boo
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View className='modal-overlay'>
|
<View className='modal-overlay'>
|
||||||
<View className='login-card dashed-card'>
|
<View className='surface-card login-card'>
|
||||||
<View className='star-badge' />
|
|
||||||
<Text className='login-title'>智绘微刻</Text>
|
<Text className='login-title'>智绘微刻</Text>
|
||||||
<Text className='login-desc'>登录后同步您的设计清单和订单</Text>
|
<Text className='login-desc'>登录后同步您的设计清单和订单</Text>
|
||||||
|
|
||||||
@@ -106,10 +105,10 @@ export default function LoginModal({ visible, onClose, onLogin }: { visible: boo
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<View className='login-actions'>
|
<View className='login-actions'>
|
||||||
<View className='btn-outline' onTap={onClose}>
|
<View className='btn-secondary' onTap={onClose}>
|
||||||
<Text>取消</Text>
|
<Text>取消</Text>
|
||||||
</View>
|
</View>
|
||||||
<View className='btn-gradient' onTap={handleLogin}>
|
<View className='btn-primary' onTap={handleLogin}>
|
||||||
<Text>登录</Text>
|
<Text>登录</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(0, 0, 0, 0.35);
|
background: rgba(25, 25, 25, 0.42);
|
||||||
backdrop-filter: blur(8px);
|
backdrop-filter: blur(8px);
|
||||||
-webkit-backdrop-filter: blur(8px);
|
-webkit-backdrop-filter: blur(8px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
|
|
||||||
.theme-toggle:active {
|
.theme-toggle:active {
|
||||||
transform: scale(0.92);
|
transform: scale(0.92);
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(25, 25, 25, 0.52);
|
||||||
}
|
}
|
||||||
|
|
||||||
.theme-icon {
|
.theme-icon {
|
||||||
|
|||||||
Reference in New Issue
Block a user