59 lines
4.1 KiB
Plaintext
59 lines
4.1 KiB
Plaintext
|
<template>
|
||
|
|
<view class="login-page page-white">
|
||
|
|
<view class="status-space"></view>
|
||
|
|
<view class="login-content">
|
||
|
|
<BrandLogo />
|
||
|
|
<text class="welcome">欢迎登录 AI融资</text>
|
||
|
|
<view class="login-tabs">
|
||
|
|
<view :class="mode == 'phone' ? 'login-tab selected' : 'login-tab'" @click="mode = 'phone'"><text>手机号登录</text></view>
|
||
|
|
<view :class="mode == 'password' ? 'login-tab selected' : 'login-tab'" @click="mode = 'password'"><text>密码登录</text></view>
|
||
|
|
</view>
|
||
|
|
<view class="input-box"><text class="input-prefix">+86</text><input v-model="phone" type="number" maxlength="11" placeholder="请输入手机号" /></view>
|
||
|
|
<view v-if="mode == 'password'" class="input-box"><text class="input-prefix">密码</text><input v-model="password" password placeholder="请输入登录密码" /></view>
|
||
|
|
<button class="login-button" @click="login">{{ mode == 'phone' ? '获取验证码' : '登录' }}</button>
|
||
|
|
<view class="other-login"><view class="line"></view><text>其他登录方式</text><view class="line"></view></view>
|
||
|
|
<view class="social-row">
|
||
|
|
<view class="social wechat"><AppIcon name="message" :size="38" /></view><view class="social apple"><AppIcon name="lock" :size="38" /></view><view class="social phone"><AppIcon name="user" :size="38" /></view>
|
||
|
|
</view>
|
||
|
|
<view class="agreement" @click="agreed = !agreed"><view :class="agreed ? 'check checked' : 'check'"><text v-if="agreed">✓</text></view><text>我已阅读并同意《用户协议》和《隐私政策》</text></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="uts">
|
||
|
|
import BrandLogo from '@/components/BrandLogo.uvue'
|
||
|
|
import AppIcon from '@/components/AppIcon.uvue'
|
||
|
|
import { requestSmsCode } from '@/services/api.uts'
|
||
|
|
const mode = ref('phone')
|
||
|
|
const phone = ref('13800138000')
|
||
|
|
const password = ref('')
|
||
|
|
const agreed = ref(true)
|
||
|
|
const login = async () => {
|
||
|
|
if (!agreed.value) { uni.showToast({ title: '请先同意用户协议', icon: 'none' }); return }
|
||
|
|
if (mode.value == 'phone') await requestSmsCode(phone.value)
|
||
|
|
uni.redirectTo({ url: '/pages/home/home' })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.login-page { min-height: 100vh; }
|
||
|
|
.status-space { height: calc(var(--status-bar-height) + 90rpx); }
|
||
|
|
.login-content { padding: 0 54rpx; }
|
||
|
|
.welcome { font-size: 48rpx; line-height: 70rpx; font-weight: 800; margin-top: 60rpx; color: #122347; }
|
||
|
|
.login-tabs { flex-direction: row; margin-top: 52rpx; border-bottom: 2rpx solid #eaf0f7; }
|
||
|
|
.login-tab { margin-right: 58rpx; padding: 0 4rpx 18rpx; color: #7d899d; font-size: 28rpx; }
|
||
|
|
.login-tab.selected { color: #0868f7; font-weight: 700; border-bottom: 5rpx solid #0868f7; }
|
||
|
|
.input-box { height: 96rpx; margin-top: 28rpx; border: 2rpx solid #dfe7f2; border-radius: 14rpx; padding: 0 24rpx; flex-direction: row; align-items: center; background-color: #fbfdff; }
|
||
|
|
.input-prefix { font-size: 25rpx; color: #3c4a61; margin-right: 24rpx; }
|
||
|
|
.input-box input { flex: 1; font-size: 28rpx; color: #17243c; }
|
||
|
|
.login-button { height: 92rpx; line-height: 92rpx; margin-top: 32rpx; border-radius: 14rpx; color: white; font-size: 29rpx; font-weight: 700; background-color: #0868f7; box-shadow: 0 16rpx 30rpx rgba(8, 104, 247, .2); }
|
||
|
|
.other-login { margin-top: 62rpx; flex-direction: row; align-items: center; justify-content: center; color: #a0a9b7; font-size: 22rpx; }
|
||
|
|
.line { height: 1rpx; background-color: #e5eaf1; width: 120rpx; margin: 0 20rpx; }
|
||
|
|
.social-row { flex-direction: row; justify-content: center; margin-top: 40rpx; }
|
||
|
|
.social { width: 84rpx; height: 84rpx; border-radius: 50%; align-items: center; justify-content: center; margin: 0 25rpx; font-size: 28rpx; font-weight: 800; }
|
||
|
|
.wechat { background-color: #e9f8ef; color: #12ad58; }.apple { background-color: #f2f4f7; color: #111; }.phone { background-color: #fff0ea; color: #ff6530; }
|
||
|
|
.agreement { margin-top: 62rpx; flex-direction: row; align-items: center; justify-content: center; color: #8793a8; font-size: 21rpx; }
|
||
|
|
.check { width: 28rpx; height: 28rpx; border: 2rpx solid #aeb8c7; border-radius: 6rpx; align-items: center; justify-content: center; margin-right: 10rpx; }
|
||
|
|
.checked { color: white; background-color: #0868f7; border-color: #0868f7; }
|
||
|
|
</style>
|