team/tydata-webview-v2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

version temp3

Browse Source
This commit is contained in:
liangzai
2025-10-28 12:12:48 +08:00
parent 1a919d57ba
commit 4ddb31e663
100 changed files with 1756 additions and 2136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

262
src/views/Login.vue
View File

@@ -148,67 +148,56 @@ const onClickLeft = () => {
<template>
<div class="login-layout ">
<van-nav-bar fixed placeholder title="用户登录" left-text="" left-arrow @click-left="onClickLeft" />
<div class="login px-8 relative z-10">
<div class="mb-8 pt-8 text-left">
<div class="login px-4 relative z-10">
<div class="mb-8 pt-20 text-left">
<div class="flex flex-col items-center">
<img class="h-16 w-16 rounded-full shadow" src="/logo.jpg" alt="Logo" />
<div class="text-3xl mt-4 text-slate-700 font-bold">天远数据</div>
</div>
</div>
<div class="space-y-5">
<!-- 登录表单 -->
<div class="login-form">
<!-- 手机号输入 -->
<div :class="['input-container', phoneFocused ? 'focused' : '']">
<input v-model="phoneNumber" class="input-field" type="tel" placeholder="请输入手机号" maxlength="11"
@focus="phoneFocused = true" @blur="phoneFocused = false" />
<div class="form-item">
<div class="form-label">手机号</div>
<input v-model="phoneNumber" class="form-input" type="tel" placeholder="请输入手机号" maxlength="11" />
</div>
<!-- 验证码输入 -->
<div v-if="!isPasswordLogin">
<div class="flex items-center justify-between">
<div :class="['input-container', codeFocused ? 'focused' : '']">
<input v-model="verificationCode" id="verificationCode" class="input-field"
placeholder="请输入验证码" maxlength="6" @focus="codeFocused = true"
@blur="codeFocused = false" />
</div>
<button
class="ml-2 px-4 py-2 text-sm font-bold flex-shrink-0 rounded-lg transition duration-300"
:class="isCountingDown || !isPhoneNumberValid ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'text-white hover:opacity-90'"
:style="isCountingDown || !isPhoneNumberValid ? '' : 'background-color: #a22525'"
@click="sendVerificationCode">
{{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
<div class="form-item">
<div class="form-label">验证码</div>
<div class="verification-input-wrapper">
<input v-model="verificationCode" id="verificationCode" class="form-input verification-input"
placeholder="请输入验证码" maxlength="6" />
<button class="get-code-btn" :class="{ 'disabled': isCountingDown || !isPhoneNumberValid }"
@click="sendVerificationCode" :disabled="isCountingDown || !isPhoneNumberValid">
{{ isCountingDown ? `${countdown}s` : '获取验证码' }}
</button>
</div>
</div>
<!-- 密码输入 -->
<div v-if="isPasswordLogin" :class="['input-container', passwordFocused ? 'focused' : '']">
<input v-model="password" class="input-field" type="password" placeholder="请输入密码"
@focus="passwordFocused = true" @blur="passwordFocused = false" />
</div>
<!-- 协议同意框 -->
<div class="flex items-start space-x-2">
<input type="checkbox" v-model="isAgreed" class="mt-1" />
<span class="text-xs text-gray-400 leading-tight">
未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
<a class="cursor-pointer" style="color: #a22525" @click="toUserAgreement">
《用户协议》
</a>
和
<a class="cursor-pointer" style="color: #a22525" @click="toPrivacyPolicy">
《隐私政策》
</a>
</span>
<div class="agreement-wrapper">
<input type="checkbox" v-model="isAgreed" class="agreement-checkbox accent-primary"
id="agreement" />
<label for="agreement" class="agreement-text">
我已阅读并同意
<a class="agreement-link" @click="toUserAgreement">《用户协议》</a>
<a class="agreement-link" @click="toPrivacyPolicy">《隐私政策》</a>
</label>
</div>
</div>
<button
class="mt-20 w-full py-3 text-lg font-bold text-white rounded-full transition duration-300 hover:opacity-90"
style="background-color: #a22525"
@click="handleLogin">
登录
</button>
<!-- 提示文字 -->
<div class="notice-text">
未注册手机号登录后将自动生成账号，并且代表您已阅读并同意
</div>
<!-- 登录按钮 -->
<button class="login-btn" :class="{ 'disabled': !canLogin }" @click="handleLogin" :disabled="!canLogin">
登 录
</button>
</div>
</div>
<!-- 点击验证组件 -->
@@ -219,70 +208,147 @@ const onClickLeft = () => {
<style scoped>
.login-layout {
background: linear-gradient(135deg, #f0d6d6 0%, #e8c8c8 50%, #e0b8b8 100%);
background-image: url('@/assets/images/login_bg.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
overflow: hidden;
}
.login-layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(162, 37, 37, 0.20) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(162, 37, 37, 0.16) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(162, 37, 37, 0.12) 0%, transparent 50%);
pointer-events: none;
.login {}
/* 登录表单 */
.login-form {
background-color: var(--color-bg-primary);
padding: 2rem;
margin-top: 0.5rem;
box-shadow: 0px 0px 24px 0px #3F3F3F0F;
border-radius: 8px;
}
.login-layout::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(45deg, transparent 40%, rgba(162, 37, 37, 0.04) 50%, transparent 60%),
linear-gradient(-45deg, transparent 40%, rgba(162, 37, 37, 0.03) 50%, transparent 60%);
background-size: 80px 80px;
pointer-events: none;
}
.login {
background: rgba(255, 255, 255, 0.9);
border-radius: 2rem;
margin: 2rem 1rem;
padding: 2rem 1rem;
box-shadow:
0 20px 40px rgba(162, 37, 37, 0.15),
0 8px 16px rgba(162, 37, 37, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.input-container {
border: 2px solid rgba(162, 37, 37, 0.1);
border-radius: 1rem;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
}
.input-container.focused {
border: 2px solid #a22525;
}
.input-field {
width: 100%;
padding: 1rem;
background: transparent;
/* 表单项 */
.form-item {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
border: none;
border-bottom: 1px solid var(--color-border-primary);
}
.form-label {
font-size: 0.9375rem;
color: var(--color-text-primary);
margin-bottom: 0;
margin-right: 1rem;
font-weight: 500;
min-width: 4rem;
flex-shrink: 0;
}
.form-input {
width: 100%;
padding: 0.875rem 0;
font-size: 0.9375rem;
color: var(--color-text-primary);
outline: none;
transition: border-color 0.3s ease;
background-color: transparent;
}
.form-input::placeholder {
color: var(--color-text-tertiary);
}
.form-input:focus {
border-bottom-color: var(--color-text-primary);
}
/* 验证码输入 */
.verification-input-wrapper {
position: relative;
display: flex;
align-items: center;
flex: 1;
}
.verification-input {
flex: 1;
padding-right: 6rem;
}
.get-code-btn {
position: absolute;
right: 0;
background: none;
border: none;
color: var(--color-primary);
font-size: 0.875rem;
cursor: pointer;
padding: 0.5rem;
font-weight: 500;
}
.get-code-btn.disabled {
color: var(--color-gray-400);
cursor: not-allowed;
}
/* 协议同意 */
.agreement-wrapper {
display: flex;
align-items: center;
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.agreement-checkbox {
flex-shrink: 0;
margin-right: 0.5rem;
}
.agreement-text {
font-size: 0.75rem;
color: var(--color-text-secondary);
line-height: 1.4;
}
.agreement-link {
color: var(--color-primary);
cursor: pointer;
text-decoration: none;
}
/* 提示文字 */
.notice-text {
font-size: 0.6875rem;
color: var(--color-text-tertiary);
line-height: 1.5;
margin-bottom: 2rem;
}
/* 登录按钮 */
.login-btn {
width: 100%;
padding: 0.875rem;
background-color: var(--color-primary);
color: var(--color-text-white);
border: none;
border-radius: 1.5rem;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: opacity 0.3s;
letter-spacing: 0.25rem;
}
.login-btn:hover {
opacity: 0.9;
}
.login-btn.disabled {
background-color: var(--color-gray-300);
cursor: not-allowed;
}
</style>