修改tabbar
登录页面
This commit is contained in:
236
pages/login/login.vue
Normal file
236
pages/login/login.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<view class="login-container">
|
||||
<view class="login-title">
|
||||
<view class="title">
|
||||
用户登录
|
||||
</view>
|
||||
<view class="sub-title">
|
||||
欢迎回到炬融圈
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/login/login-img.png" mode="" class="login-img"></image>
|
||||
<view class="login-form">
|
||||
<u-form :model="userLogin.userForm" ref="userLoginRef" :border-bottom="false" :error-type="['message']"
|
||||
label-width="0">
|
||||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/user.png" prop="username">
|
||||
<u-input v-model="userLogin.userForm.username" placeholder="请输入用户名或手机号"
|
||||
placeholder-style="color: #737373;" />
|
||||
</u-form-item>
|
||||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Lock.png" prop="password">
|
||||
<u-input type="password" v-model="userLogin.userForm.password" placeholder="请输入密码"
|
||||
placeholder-style="color: #737373;" />
|
||||
</u-form-item>
|
||||
<u-form-item :left-icon-style="inputIcon" left-icon="../../static/login/Globe.png" prop="code">
|
||||
<u-input v-model="userLogin.userForm.code" placeholder="请输入验证码"
|
||||
placeholder-style="color: #737373;" />
|
||||
</u-form-item>
|
||||
<view class="reflash" @click="reflash">
|
||||
<image class="reflash-icon" src="/static/login/Repeat.png" mode=""></image>
|
||||
刷新
|
||||
</view>
|
||||
<view class="rember">
|
||||
<u-checkbox v-model="userLogin.userForm.is_rember">记住我</u-checkbox>
|
||||
</view>
|
||||
<view class="forget-pwd">忘记密码？</view>
|
||||
<u-button class="submit-btn" :ripple="true" shape="circle" type="primary" @click="submit">登录</u-button>
|
||||
<view class="register">
|
||||
<view class="register-text">没有账号？</view>
|
||||
<view class="register-link">点击注册？
|
||||
<image class="register-link-icon" src="/static/Chevron right.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-form>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onLoad, onReady } from '@dcloudio/uni-app';
|
||||
|
||||
const userLoginRef = ref()
|
||||
const userLogin = reactive({
|
||||
userForm: {
|
||||
username: '',
|
||||
password: '',
|
||||
code: '',
|
||||
is_rember: false
|
||||
},
|
||||
ruls: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名或手机号',
|
||||
trigger: ['change']
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: ['change']
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: ['change']
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
userLoginRef.value.setRules(userLogin.ruls);
|
||||
});
|
||||
|
||||
const reflash = () => {
|
||||
userLoginRef.value.resetFields()
|
||||
}
|
||||
|
||||
const submit = () => {
|
||||
userLoginRef.value.validate((valid : any) => {
|
||||
if (valid) {
|
||||
console.log('验证通过');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const inputIcon = {
|
||||
width: '32rpx',
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #CAE5FF 0%, #FFFFFF 100%);
|
||||
|
||||
.login-title {
|
||||
padding: 80rpx 0 0 0;
|
||||
|
||||
.title {
|
||||
font-family: SF Pro;
|
||||
font-weight: 650;
|
||||
font-style: Expanded Semibold;
|
||||
font-size: 60rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 80rpx;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
color: #7087FF;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-family: SF Pro;
|
||||
font-weight: 700;
|
||||
font-style: Bold;
|
||||
font-size: 32rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 48rpx;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 10rpx 32rpx;
|
||||
|
||||
.reflash {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
// 文字
|
||||
font-family: Work Sans;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 100%;
|
||||
letter-spacing: -2%;
|
||||
color: #3781EF;
|
||||
|
||||
.reflash-icon {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.forget-pwd {
|
||||
text-align: center;
|
||||
|
||||
font-family: Work Sans;
|
||||
font-weight: 400;
|
||||
font-size: 26rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 100%;
|
||||
letter-spacing: -2%;
|
||||
text-align: center;
|
||||
color: #3781EF;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 240rpx;
|
||||
height: 96rpx;
|
||||
|
||||
// 文字
|
||||
font-family: SF Pro;
|
||||
font-weight: 650;
|
||||
font-style: Expanded Semibold;
|
||||
font-size: 40rpx;
|
||||
leading-trim: NONE;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.register {
|
||||
margin: 40rpx 0 80rpx;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
// 文字
|
||||
font-family: Work Sans;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
leading-trim: NONE;
|
||||
line-height: 100%;
|
||||
letter-spacing: -2%;
|
||||
text-align: center;
|
||||
|
||||
|
||||
.register-text {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.register-link {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #3781EF;
|
||||
|
||||
.register-link-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user