huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录、注册页样式修改

Browse Source
This commit is contained in:
huangzhenbao
2026-03-12 09:11:48 +08:00
parent affb2342eb
commit e6d95b52b9
5 changed files with 302 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

398
pages/user/register.uvue
View File

@@ -1,86 +1,97 @@
<template>
<view class="register-wrapper">
<view class="page">
<!-- Header Logo -->
<view class="header">
<image :src="logoUrl" mode="aspectFit" class="logo" />
<view class="header-inner">
<image :src="logoUrl" mode="aspectFit" class="logo" />
<!-- 已有账号 -->
<view class="header-right">
<text class="tips-text">已有账号？</text>
<text class="tips-link" @click="navigateToLogin">立即登录</text>
</view>
</view>
</view>
<!-- 注册表单区域 -->
<view class="register-box">
<view class="title">注册账号</view>
<view class="main">
<view class="register-box">
<text class="title">注册账号</text>
<!-- 注册表单 -->
<view class="form-content">
<!-- 邮箱 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/phone_1.png" class="input-icon" />
<input
type="text"
placeholder="输入邮箱"
:value="email"
@input="(e: any) => email = e.detail.value"
class="input-field"
/>
<!-- 注册表单 -->
<view class="form-content">
<!-- 邮箱 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/phone_1.png" class="input-icon" />
<input
type="text"
placeholder="输入邮箱"
:value="email"
@input="(e: any) => email = e.detail.value"
class="input-field"
/>
</view>
</view>
<!-- 密码 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/code_1.png" class="input-icon" />
<input
:type="isPasswordVisible ? 'text' : 'password'"
placeholder="填写密码"
:value="password"
@input="(e: any) => password = e.detail.value"
class="input-field"
/>
<view class="eye-btn" @click="isPasswordVisible = !isPasswordVisible">
<!-- 睁眼表示可见, 闭眼表示不可见 -->
<text class="eye-icon">{{ isPasswordVisible ? '👁️' : '🙈' }}</text>
</view>
</view>
</view>
<!-- 确认密码 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/code_1.png" class="input-icon" />
<input
:type="isConfirmPasswordVisible ? 'text' : 'password'"
placeholder="确认密码"
:value="confirmPassword"
@input="(e: any) => confirmPassword = e.detail.value"
class="input-field"
/>
<view class="eye-btn" @click="isConfirmPasswordVisible = !isConfirmPasswordVisible">
<text class="eye-icon">{{ isConfirmPasswordVisible ? '👁️' : '🙈' }}</text>
</view>
</view>
</view>
</view>
<!-- 密码 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/code_1.png" class="input-icon" />
<input
type="password"
placeholder="填写密码"
:value="password"
@input="(e: any) => password = e.detail.value"
class="input-field"
/>
</view>
<!-- 注册按钮 -->
<view class="register-btn" @click="handleRegister" :class="{ 'disabled': isLoading }">
<text class="btn-text">注册</text>
</view>
<!-- 确认密码 -->
<view class="input-group">
<view class="input-wrapper">
<image src="/static/user/code_1.png" class="input-icon" />
<input
type="password"
placeholder="确认密码"
:value="confirmPassword"
@input="(e: any) => confirmPassword = e.detail.value"
class="input-field"
<!-- 协议勾选 -->
<view class="protocol">
<checkbox-group class="protocol-group" @change="handleProtocolChange">
<checkbox
:checked="protocol"
class="protocol-checkbox"
:class="{ 'trembling': inAnimation }"
@animationend="inAnimation = false"
/>
</view>
<text class="protocol-text">
已阅读并同意
<text class="main-color" @click="navigateToTerms(3)">《用户协议》</text>
与
<text class="main-color" @click="navigateToTerms(4)">《隐私协议》</text>
</text>
</checkbox-group>
</view>
</view>
<!-- 注册按钮 -->
<view class="register-btn" @click="handleRegister" :class="{ 'disabled': isLoading }">
注册
</view>
<!-- 已有账号 -->
<view class="tips">
<text class="tips-text">已有账号？</text>
<text class="tips-link" @click="navigateToLogin">立即登录</text>
</view>
<!-- 协议勾选 -->
<view class="protocol">
<checkbox-group @change="handleProtocolChange">
<checkbox
:checked="protocol"
:class="{ 'trembling': inAnimation }"
@animationend="inAnimation = false"
/>
<text class="protocol-text">
已阅读并同意
<text class="main-color" @click="navigateToTerms(3)">《用户协议》</text>
与
<text class="main-color" @click="navigateToTerms(4)">《隐私协议》</text>
</text>
</checkbox-group>
</view>
</view>
<!-- 底部版权信息 -->
@@ -101,6 +112,8 @@
const protocol = ref<boolean>(false)
const inAnimation = ref<boolean>(false)
const isLoading = ref<boolean>(false)
const isPasswordVisible = ref<boolean>(false)
const isConfirmPasswordVisible = ref<boolean>(false)
const logoUrl = ref<string>('/static/logo.png')
// 处理协议勾选变化
@@ -314,176 +327,208 @@
</script>
<style>
page {
background: #F5F5F5;
}
.register-wrapper {
/* Base Layout */
.page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #F5F5F5;
background-color: #FFFFFF;
}
/* Header Logo */
/* Header Area */
.header {
padding: 40rpx 0 0 60rpx;
background: #F5F5F5;
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid #EEEEEE;
background-color: #FFFFFF;
}
.header-inner {
width: min(1200px, 92vw);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 24px 0;
}
.logo {
width: 200rpx;
height: 80rpx;
width: 180px;
height: 64px;
}
/* 注册表单区域 */
.register-box {
.header-right {
display: flex;
flex-direction: row;
align-items: center;
}
.tips-text {
font-size: 15px;
color: #666666;
}
.tips-link {
font-size: 15px;
color: var(--view-theme, #FF4D4F);
margin-left: 8px;
cursor: pointer;
}
/* Main Form Area */
.main {
flex: 1;
background: #FFFFFF;
margin: 60rpx 40rpx 0;
border-radius: 8rpx;
padding: 60rpx 50rpx 40rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding-top: 80px;
background-color: #FFFFFF;
}
.register-box {
width: 420px;
max-width: 92vw;
display: flex;
flex-direction: column;
background-color: #FFFFFF;
}
.title {
font-size: 40rpx;
font-size: 26px;
font-weight: 600;
color: #333333;
text-align: center;
margin-bottom: 50rpx;
margin-bottom: 40px;
}
/* 表单内容 */
/* Form Content */
.form-content {
margin-bottom: 40rpx;
display: flex;
flex-direction: column;
width: 100%;
}
.input-group {
margin-bottom: 30rpx;
margin-bottom: 24px;
width: 100%;
}
.input-wrapper {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
padding: 0 20rpx;
height: 88rpx;
border: 1rpx solid #E0E0E0;
border-radius: 4rpx;
background: #FFFFFF;
height: 48px;
border: 1px solid #D9D9D9;
border-radius: 4px;
background-color: #FFFFFF;
padding: 0 16px;
transition-property: border-color, box-shadow;
transition-duration: 0.3s;
}
.input-wrapper:focus-within {
border-color: var(--view-theme, #FF4D4F);
box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.1);
}
.input-icon {
width: 32rpx;
height: 32rpx;
flex-shrink: 0;
margin-right: 20rpx;
width: 22px;
height: 22px;
margin-right: 12px;
opacity: 0.4;
}
.input-field {
flex: 1;
font-size: 28rpx;
height: 88rpx;
line-height: 88rpx;
height: 100%;
font-size: 15px;
color: #333333;
display: flex;
align-items: center;
}
.code-input {
flex: 1;
}
.code-btn {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
color: var(--view-theme, #FF4D4F);
font-size: 26rpx;
background: transparent;
border: none;
padding: 0;
line-height: 1;
outline: none;
}
.code-btn.disabled {
.input-field::placeholder {
color: #BFBFBF;
}
/* Eye Button */
.eye-btn {
padding: 0 8px;
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
}
.eye-icon {
font-size: 18px;
color: #999999;
}
/* 注册按钮 */
/* Register Button */
.register-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 88rpx;
margin-top: 50rpx;
background: linear-gradient(135deg, #FF4D4F 0%, #FF7A45 100%);
border-radius: 4rpx;
color: #FFFFFF;
font-size: 32rpx;
font-weight: 500;
box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
height: 48px;
margin-top: 10px;
background: linear-gradient(90deg, var(--view-theme, #FF4D4F) 0%, #FF7A45 100%);
border-radius: 4px;
cursor: pointer;
}
.register-btn.disabled {
background: #D9D9D9;
box-shadow: none;
opacity: 0.6;
cursor: not-allowed;
background: #D9D9D9;
}
/* 已有账号提示 */
.tips {
margin-top: 30rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.btn-text {
color: #FFFFFF;
font-size: 16px;
font-weight: 500;
letter-spacing: 2px;
}
.tips-text {
font-size: 28rpx;
color: #666666;
}
.tips-link {
font-size: 28rpx;
color: var(--view-theme, #FF4D4F);
margin-left: 8rpx;
}
/* 协议区域 */
/* Protocol */
.protocol {
margin-top: 40rpx;
margin-top: 24px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
}
.protocol checkbox-group {
.protocol-group {
display: flex;
flex-direction: row;
align-items: center;
}
.protocol checkbox {
margin-right: 10rpx;
.protocol-checkbox {
transform: scale(0.8);
margin-right: 4px;
}
.protocol-text {
font-size: 24rpx;
color: #999999;
font-size: 13px;
color: #666666;
}
.main-color {
font-size: 13px;
color: var(--view-theme, #FF4D4F);
cursor: pointer;
}
.trembling {
@@ -491,20 +536,43 @@ page {
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10rpx); }
20%, 40%, 60%, 80% { transform: translateX(10rpx); }
0%, 100% { transform: translateX(0) scale(0.8); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px) scale(0.8); }
20%, 40%, 60%, 80% { transform: translateX(4px) scale(0.8); }
}
/* 底部版权 */
/* Footer */
.footer {
padding: 40rpx 0;
text-align: center;
background: #F5F5F5;
padding: 40px 0;
display: flex;
flex-direction: row;
justify-content: center;
}
.footer-text {
font-size: 22rpx;
font-size: 13px;
color: #999999;
}
/* Responsive */
@media screen and (max-width: 768px) {
.header-inner {
padding: 16px 20px;
}
.logo {
width: 140px;
height: 50px;
}
.main {
padding-top: 40px;
}
.register-box {
width: 100%;
padding: 0 24px;
}
.title {
font-size: 24px;
margin-bottom: 30px;
}
}
</style>