luo/device-voice-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增微信网页授权
All checks were successful
构建并部署前端到生产环境 / build-and-deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
sexygoat
2026-04-14 09:50:19 +08:00
parent 36a1e94d34
commit 0b8dd7af00
1 changed files with 100 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
pages/login/login.vue
View File

@@ -1,48 +1,47 @@
<template> <template>
<view class="login-page"> <view class="login-page">
<view class="content"> <view class="content">
<view class="card"> <view class="header">
<view class="card-title">用户登录</view> <view class="main-title">设备管理登录</view>
<view class="sub-title">请输入设备标识进行登录</view>
<view class="form-item"> </view>
<view class="label">设备标识</view>
<view class="input-wrap" :class="{ focus: inputFocus }"> <view class="form-section">
<input <view class="input-wrap" :class="{ focus: inputFocus }">
v-model="identifier" <input
class="input" v-model="identifier"
placeholder="请输入SN/IMEI/虚拟号/ICCID/MSISDN" class="input"
placeholder-class="placeholder" placeholder="请输入设备标识"
@focus="inputFocus = true" placeholder-class="placeholder"
@blur="inputFocus = false" @focus="inputFocus = true"
@input="showError = false" @blur="inputFocus = false"
/> @input="showError = false"
<view v-if="identifier" class="clear" @tap="identifier = ''"> />
<text>×</text> </view>
</view> <text v-if="showError" class="error">请输入设备标识</text>
</view>
<view class="btn-section">
<button
class="btn-login"
:class="{ disabled: !identifier || loading || !agreed }"
:disabled="!identifier || loading || !agreed"
@tap="handleLogin"
>
<view v-if="loading" class="loading">
<view class="dot"/>
<view class="dot"/>
<view class="dot"/>
</view> </view>
<text v-if="showError" class="error">请输入设备标识</text> <text v-else>登录</text>
</view> </button>
</view>
<view class="form-item"> <view class="agreement">
<button <view class="agreement-text">
class="btn-login" <text class="text">登录即表示同意</text>
:class="{ disabled: !identifier || loading }"
:disabled="!identifier || loading"
@tap="handleLogin"
>
<view v-if="loading" class="loading">
<view class="dot"/>
<view class="dot"/>
<view class="dot"/>
</view>
<text v-else>登录</text>
</button>
</view>
<view class="agreement">
<text class="agree-text">登录即表示同意</text>
<text class="link">《用户协议》</text> <text class="link">《用户协议》</text>
<text class="agree-text">和</text> <text class="text">和</text>
<text class="link">《隐私政策》</text> <text class="link">《隐私政策》</text>
</view> </view>
</view> </view>
@@ -143,105 +142,99 @@
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
justify-content: center;
background: #FFFFFF; background: #FFFFFF;
padding: 0 40rpx; padding: 60rpx 40rpx;
} }
.content { .content {
width: 100%; width: 100%;
} }
.card { .header {
background: #FFFFFF; margin-bottom: 80rpx;
border-radius: 24rpx;
padding: 48rpx;
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
} }
.card-title { .main-title {
font-size: 40rpx; font-size: 56rpx;
font-weight: 600; font-weight: 700;
color: #1A1A1A; color: #1A1A1A;
margin-bottom: 20rpx; line-height: 1.3;
margin-bottom: 24rpx;
letter-spacing: 0.5rpx;
} }
.form-item { .sub-title {
margin-bottom: 32rpx; font-size: 28rpx;
color: #9CA3AF;
line-height: 1.5;
letter-spacing: 0.5rpx;
} }
.label { .form-section {
font-size: 26rpx; margin-bottom: 60rpx;
color: #6B7280;
margin-bottom: 16rpx;
} }
.input-wrap { .input-wrap {
display: flex; display: flex;
align-items: center; align-items: center;
background: #F9FAFB; background: #f7f7f7;
border: 2rpx solid #E5E7EB; border-radius: 20rpx;
border-radius: 16rpx; padding: 32rpx 40rpx;
padding: 28rpx 24rpx; transition: all 0.3s;
margin-top: 40rpx;
transition: all 0.2s;
} }
.input-wrap.focus { .input-wrap.focus {
border-color: #2563EB;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
} }
.input { .input {
flex: 1; flex: 1;
font-size: 30rpx; font-size: 32rpx;
color: #1A1A1A; color: #1A1A1A;
background: transparent; background: transparent;
} }
.placeholder { .placeholder {
color: #9CA3AF; color: #C4C4C4;
}
.clear {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
color: #9CA3AF;
font-size: 36rpx;
} }
.error { .error {
font-size: 24rpx; font-size: 24rpx;
color: #EF4444; color: #EF4444;
margin-top: 12rpx; margin-top: 16rpx;
padding-left: 8rpx;
}
.btn-section {
margin-bottom: 60rpx;
} }
.btn-login { .btn-login {
width: 100%; width: 100%;
height: 96rpx; height: 108rpx;
background: #2563EB; background: linear-gradient(135deg, #00DDA2 0%, #00E5A8 100%);
border: none; border: none;
border-radius: 16rpx; border-radius: 20rpx;
font-size: 32rpx; font-size: 36rpx;
font-weight: 500; font-weight: 600;
color: #FFFFFF; color: #1A1A1A;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.3s;
box-shadow: 0 8rpx 24rpx rgba(0, 221, 162, 0.25);
} }
.btn-login.disabled { .btn-login.disabled {
background: #E5E7EB; background: #E5E7EB;
color: #9CA3AF; color: #9CA3AF;
box-shadow: none;
} }
.btn-login:active:not(.disabled) { .btn-login:active:not(.disabled) {
background: #1D4ED8; transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(0, 221, 162, 0.3);
} }
.loading { .loading {
@@ -251,9 +244,9 @@
} }
.dot { .dot {
width: 8rpx; width: 10rpx;
height: 8rpx; height: 10rpx;
background: #9CA3AF; background: #1A1A1A;
border-radius: 50%; border-radius: 50%;
animation: load 1.4s infinite ease-in-out both; animation: load 1.4s infinite ease-in-out both;
} }
@@ -262,27 +255,39 @@
.dot:nth-child(2) { animation-delay: -0.16s; } .dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes load { @keyframes load {
0%, 80%, 100% { transform: scale(0); } 0%, 80%, 100% {
40% { transform: scale(1); } transform: scale(0.5);
opacity: 0.3;
}
40% {
transform: scale(1);
opacity: 1;
}
} }
.agreement { .agreement {
display: flex; display: flex;
flex-wrap: nowrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 8rpx; padding: 0 8rpx;
margin-top: 40rpx;
} }
.agree-text { .agreement-text {
font-size: 24rpx; font-size: 24rpx;
line-height: 1.6;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 4rpx;
}
.text {
color: #9CA3AF; color: #9CA3AF;
white-space: nowrap; white-space: nowrap;
} }
.link { .link {
font-size: 24rpx;
color: #2563EB; color: #2563EB;
white-space: nowrap; white-space: nowrap;
} }