131 lines
3.5 KiB
Vue
131 lines
3.5 KiB
Vue
<template>
|
|
<view class="li-login-page">
|
|
<view class=" li-flex li-flex-col li-justify-center li-items-center li-pt-270">
|
|
<image class="li-w-130 li-h-130 li-rd-40" src="/static/logo.png" mode=""></image>
|
|
<text class="li-text-38 li-text-#000000 li-mt-32 li-font-550">物业综合管理平台</text>
|
|
</view>
|
|
<view class="li-w-80% li-mx-auto li-mt-100">
|
|
<!-- 账号 -->
|
|
<wd-input :maxlength="11" placeholder="请输入账号" type='number' v-model="form.phone" prefix-icon="user"
|
|
placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
|
|
no-border />
|
|
<!-- 密码 -->
|
|
<view class="li-mt-28">
|
|
<wd-input :maxlength="11" placeholder="请输入密码" v-model="form.password" prefix-icon="lock-off"
|
|
placeholderStyle="font-size:30rpx" :focus-when-clear="false" clear-trigger="focus" clearable
|
|
no-border show-password />
|
|
</view>
|
|
<!-- 验证码 -->
|
|
<view class="li-flex li-items-center li-justify-between li-mt-28">
|
|
<view class="li-w-420">
|
|
<wd-input :maxlength="11" placeholder="请输入验证码" type='number' v-model="form.code"
|
|
prefix-icon="secured" placeholderStyle="font-size:30rpx" :focus-when-clear="false"
|
|
clear-trigger="focus" clearable no-border />
|
|
</view>
|
|
<view class="li-bg-white li-w-150 li-h-68">
|
|
<image class="li-w-150 li-h-68" src="/static/code.jpg" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- button -->
|
|
<view class="li-w-85% li-mx-auto li-mt-90">
|
|
<wd-button @click="login" block custom-class="custom-shadow">登录</wd-button>
|
|
</view>
|
|
<!-- -->
|
|
<view
|
|
class="li-flex li-items-center li-justify-center li-w-90% li-mx-auto li-text-#a5a5a5 li-text-24 li-mt-300">
|
|
<wd-checkbox checked-color="#2EA1EA" v-model="check" @change="handleChange" />
|
|
阅读并同意
|
|
<text class="li-text-#2EA1EA li-mx-10">
|
|
《用户协议》
|
|
</text>
|
|
和
|
|
<text class="li-text-#2EA1EA li-mx-10">
|
|
《隐私政策》
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, computed } from 'vue'
|
|
|
|
const socketMessages = computed(() => {
|
|
return uni.$store.state.token
|
|
})
|
|
|
|
interface formItem {
|
|
phone : string
|
|
password : string
|
|
code : string
|
|
}
|
|
const form = ref<formItem>({
|
|
phone: '',
|
|
password: '',
|
|
code: ""
|
|
})
|
|
const check = ref<boolean>(true)
|
|
|
|
const handleChange = ({ value }) => {
|
|
console.log(value)
|
|
}
|
|
|
|
const login = () => {
|
|
uni.$store.commit('setToken','11111111111111111')
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.li-login-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: linear-gradient(to bottom,
|
|
rgba(197, 224, 253, 0.7) 0%,
|
|
rgba(197, 224, 253, 0.5) 20%,
|
|
rgba(197, 224, 253, 0.1) 40%,
|
|
rgba(242, 243, 247, 1.0) 70%,
|
|
rgba(197, 224, 253, 0.4) 90%,
|
|
rgba(197, 224, 253, 0.5) 100%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
::v-deep .wd-input__body {
|
|
height: 85rpx;
|
|
|
|
}
|
|
|
|
::v-deep .wd-input__value {
|
|
height: 85rpx;
|
|
}
|
|
|
|
::v-deep .wd-input {
|
|
border-radius: 20rpx !important;
|
|
|
|
}
|
|
|
|
::v-deep .wd-input__icon {
|
|
font-size: 42rpx !important;
|
|
font-weight: 500 !important;
|
|
color: #232323 !important;
|
|
margin-right: 30rpx !important;
|
|
margin-left: 30rpx !important;
|
|
}
|
|
|
|
::v-deep .wd-input__clear {
|
|
margin-right: 20rpx !important;
|
|
}
|
|
|
|
::v-deep .wd-icon-eye-close {
|
|
font-size: 28rpx !important;
|
|
}
|
|
|
|
.custom-shadow {
|
|
height: 85rpx !important;
|
|
font-size: 32rpx !important;
|
|
box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
|
background-color: #2EA1EA !important;
|
|
}
|
|
</style> |