144 lines
4.4 KiB
TypeScript
144 lines
4.4 KiB
TypeScript
import React from 'react';
|
||
import { t } from '@/i18n';
|
||
// Taro mini-program component
|
||
|
||
/**
|
||
* E3. 登录/注册页
|
||
*
|
||
* 微信小程序：一键微信登录
|
||
* H5：手机号+验证码
|
||
*/
|
||
|
||
const LoginPage: React.FC = () => {
|
||
return (
|
||
<view className="login-page">
|
||
{/* Logo */}
|
||
<view className="logo-section">
|
||
<view className="logo-box">
|
||
<text className="logo-text">G</text>
|
||
</view>
|
||
<text className="app-name">Genex</text>
|
||
<text className="app-slogan">{t('app_slogan')}</text>
|
||
</view>
|
||
|
||
{/* WeChat Login (小程序) */}
|
||
<view className="login-actions">
|
||
<view className="wechat-btn">
|
||
<text className="wechat-icon">💬</text>
|
||
<text className="wechat-text">{t('login_wechat')}</text>
|
||
</view>
|
||
|
||
<view className="divider">
|
||
<view className="divider-line" />
|
||
<text className="divider-text">{t('login_or')}</text>
|
||
<view className="divider-line" />
|
||
</view>
|
||
|
||
{/* Phone Login (H5) */}
|
||
<view className="phone-section">
|
||
<view className="input-wrap">
|
||
<text className="input-icon">📱</text>
|
||
<input className="input-field" placeholder={t('login_phone')} type="number" />
|
||
</view>
|
||
<view className="input-wrap code-wrap">
|
||
<view className="code-input">
|
||
<text className="input-icon">🔒</text>
|
||
<input className="input-field" placeholder={t('login_code')} type="number" />
|
||
</view>
|
||
<view className="code-btn">
|
||
<text className="code-btn-text">{t('login_send_code')}</text>
|
||
</view>
|
||
</view>
|
||
<view className="login-btn">
|
||
<text className="login-btn-text">{t('login_btn')}</text>
|
||
</view>
|
||
</view>
|
||
|
||
{/* Terms */}
|
||
<view className="terms">
|
||
<text className="terms-text">{t('login_agree')}</text>
|
||
<text className="terms-link">{`《${t('login_user_agreement')}》`}</text>
|
||
<text className="terms-text">{t('login_and')}</text>
|
||
<text className="terms-link">{`《${t('login_privacy_policy')}》`}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
);
|
||
};
|
||
|
||
export default LoginPage;
|
||
|
||
/*
|
||
CSS:
|
||
|
||
.login-page {
|
||
min-height: 100vh; background: white;
|
||
display: flex; flex-direction: column;
|
||
padding: 0 64rpx;
|
||
}
|
||
|
||
.logo-section {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
padding-top: 160rpx; padding-bottom: 80rpx;
|
||
}
|
||
.logo-box {
|
||
width: 120rpx; height: 120rpx;
|
||
background: linear-gradient(135deg, #6C5CE7, #9B8FFF);
|
||
border-radius: 28rpx;
|
||
display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.logo-text { color: white; font-size: 48rpx; font-weight: 700; }
|
||
.app-name { font-size: 40rpx; font-weight: 700; color: #141723; margin-top: 24rpx; }
|
||
.app-slogan { font-size: 26rpx; color: #A0A8BE; margin-top: 8rpx; }
|
||
|
||
.login-actions { flex: 1; }
|
||
|
||
.wechat-btn {
|
||
display: flex; align-items: center; justify-content: center;
|
||
height: 96rpx; background: #07C160; border-radius: 999rpx;
|
||
}
|
||
.wechat-icon { font-size: 36rpx; margin-right: 12rpx; }
|
||
.wechat-text { color: white; font-size: 30rpx; font-weight: 600; }
|
||
|
||
.divider {
|
||
display: flex; align-items: center; margin: 48rpx 0;
|
||
}
|
||
.divider-line { flex: 1; height: 1rpx; background: #E4E7F0; }
|
||
.divider-text { margin: 0 24rpx; font-size: 24rpx; color: #A0A8BE; }
|
||
|
||
.input-wrap {
|
||
display: flex; align-items: center;
|
||
height: 96rpx; background: #F8F9FC;
|
||
border-radius: 16rpx; padding: 0 24rpx;
|
||
margin-bottom: 20rpx; border: 1rpx solid #E4E7F0;
|
||
}
|
||
.input-icon { font-size: 32rpx; margin-right: 16rpx; }
|
||
.input-field { flex: 1; font-size: 28rpx; background: transparent; }
|
||
|
||
.code-wrap { padding: 0; }
|
||
.code-input {
|
||
flex: 1; display: flex; align-items: center;
|
||
padding: 0 24rpx;
|
||
}
|
||
.code-btn {
|
||
padding: 0 28rpx; height: 96rpx;
|
||
display: flex; align-items: center;
|
||
border-left: 1rpx solid #E4E7F0;
|
||
}
|
||
.code-btn-text { font-size: 24rpx; color: #6C5CE7; font-weight: 500; }
|
||
|
||
.login-btn {
|
||
height: 96rpx; background: #6C5CE7; border-radius: 999rpx;
|
||
display: flex; align-items: center; justify-content: center;
|
||
margin-top: 16rpx;
|
||
}
|
||
.login-btn-text { color: white; font-size: 30rpx; font-weight: 600; }
|
||
|
||
.terms {
|
||
display: flex; justify-content: center; align-items: center;
|
||
padding: 48rpx 0; flex-wrap: wrap;
|
||
}
|
||
.terms-text { font-size: 22rpx; color: #A0A8BE; }
|
||
.terms-link { font-size: 22rpx; color: #6C5CE7; }
|
||
*/
|