You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
215 lines
3.6 KiB
215 lines
3.6 KiB
<template> |
|
<view class="page"> |
|
<view class="top"> |
|
<img src="@/static/login/banner.jpg" alt=""> |
|
<view class="tops"> |
|
|
|
</view> |
|
</view> |
|
|
|
<view class="items"> |
|
<view class="title"> |
|
<img mode="widthFix" src="@/static/login/title.png" alt=""> |
|
<view class="text"> |
|
欢迎登录防消一体化综合治理平台 |
|
</view> |
|
</view> |
|
|
|
<view class="item username"> |
|
<view class="label"> |
|
账号 |
|
</view> |
|
<view class="input"> |
|
<input v-model="form.name" type="text" placeholder="请输入账号"> |
|
</view> |
|
</view> |
|
|
|
<view class="item password"> |
|
<view class="label"> |
|
密码 |
|
</view> |
|
<view class="input"> |
|
<input v-model="form.password" type="password" placeholder="请输入密码"> |
|
</view> |
|
</view> |
|
<!-- <view class="item"> |
|
<label> |
|
<checkbox :value="form.auto" /><text>自动登录</text> |
|
</label> |
|
</view> --> |
|
<view class="button"> |
|
<button type="default" @tap="getUserInfo()">登录</button> |
|
<!-- <button @tap="getToken()">登录</button> --> |
|
</view> |
|
|
|
|
|
</view> |
|
<view class="bottom"> |
|
<image src="../../static/login/bottom.png" mode=""></image> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import store from '@/store.js' |
|
export default { |
|
data() { |
|
return { |
|
title: 'Hello', |
|
|
|
form: { |
|
name: "", |
|
password: "", |
|
auto: false, |
|
} |
|
} |
|
}, |
|
onLoad() { |
|
if (store.state.token) { |
|
console.log(store.state.token); |
|
uni.reLaunch({ |
|
url: "/pages/index/index", |
|
success: res => {}, |
|
fail: () => {}, |
|
complete: () => {}, |
|
}) |
|
} |
|
}, |
|
methods: { |
|
getUserInfo() { |
|
let body = {} |
|
if (!this.form.name) { |
|
return this.$alert.showError("请输入用户账号") |
|
} |
|
if (!this.form.password) { |
|
return this.$alert.showError("请输入密码") |
|
} |
|
this.$auth.login(this.form) |
|
return |
|
}, |
|
|
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
.page { |
|
overflow: hidden; |
|
background-color: #FAFBFF; |
|
color: #808080; |
|
display: flex; |
|
flex-direction: column; |
|
position: relative; |
|
} |
|
|
|
.top { |
|
width: 100%; |
|
height: 200rpx; |
|
position: relative; |
|
|
|
img { |
|
width: 100%; |
|
height: 200rpx; |
|
} |
|
|
|
.tops { |
|
width: 100%; |
|
height: 40rpx; |
|
border-radius: 20rpx 20rpx 0 0; |
|
position: absolute; |
|
z-index: 10; |
|
background-color: #FAFBFF; |
|
bottom: 0rpx; |
|
left: 0; |
|
} |
|
} |
|
|
|
|
|
|
|
.items { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
z-index: 999; |
|
|
|
.title { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
margin-top: 58rpx; |
|
|
|
.text { |
|
margin-top: 20rpx; |
|
font-size: 26rpx; |
|
text-align: center; |
|
color: #939393; |
|
} |
|
} |
|
|
|
|
|
|
|
.item { |
|
width: 80%; |
|
|
|
.label { |
|
font-size: 32rpx; |
|
margin: 26rpx 0; |
|
} |
|
|
|
label { |
|
color: #4963F4; |
|
|
|
checkbox { |
|
border: #4963F4; |
|
} |
|
} |
|
|
|
input { |
|
box-sizing: border-box; |
|
padding: 0 16rpx; |
|
height: 80rpx; |
|
background: #ECF2FF; |
|
border-radius: 3px; |
|
font-size: 26rpx; |
|
|
|
input { |
|
height: 100%; |
|
} |
|
} |
|
} |
|
|
|
.username { |
|
margin-top: 58rpx; |
|
} |
|
|
|
.password { |
|
margin-bottom: 76rpx; |
|
} |
|
} |
|
|
|
.button { |
|
width: 100%; |
|
|
|
button { |
|
width: 80%; |
|
color: #fff; |
|
border-radius: 100rpx; |
|
background: #4963F4; |
|
box-shadow: 2px rgba(73, 99, 244, 0.8); |
|
} |
|
|
|
} |
|
|
|
.bottom { |
|
width: 100%; |
|
height: 200rpx; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
</style>
|
|
|