You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
3.6 KiB
Vue
176 lines
3.6 KiB
Vue
<template>
|
|
<view class="bgImg"></view>
|
|
<view class="logo"></view>
|
|
<view class="form">
|
|
<view class="username">
|
|
<view class="icon"></view>
|
|
<input v-model="loginForm.username" class="input" autocomplete="off" placeholder="请输入用户名"
|
|
placeholder-style="color: rgba(25, 132, 238, 0.6);" />
|
|
</view>
|
|
<view class="password">
|
|
<view class="icon"></view>
|
|
<input v-model="loginForm.password" class="input" autocomplete="off" type="password" placeholder="请输入密码"
|
|
placeholder-style="color: rgba(25, 132, 238, 0.6);" />
|
|
</view>
|
|
<view class="loginBtn" @tap="login">登 录</view>
|
|
<view class="subBtns">
|
|
<!-- <text>忘记密码？</text> -->
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
import {
|
|
setGlobalData,
|
|
getGlobalData
|
|
} from '@/store/index.js'
|
|
|
|
import {
|
|
loginApi
|
|
} from '@/api/login'
|
|
const loginForm = ref({})
|
|
const login = async () => {
|
|
const data = await loginApi(loginForm.value)
|
|
if (data) {
|
|
uni.setStorageSync('token', data.data.access_token)
|
|
uni.showToast({
|
|
title: '登录成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
})
|
|
uni.redirectTo({
|
|
url: '/pages/workbench/index'
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/uni.scss";
|
|
|
|
.bgImg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100%;
|
|
background-image: url(#{$img-url}/login.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.logo {
|
|
position: absolute;
|
|
top: 14vh;
|
|
left: 50%;
|
|
width: 25vw;
|
|
height: 19vw;
|
|
transform: translateX(-50%);
|
|
background-image: url(#{$img-url}/logo.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.form {
|
|
position: absolute;
|
|
top: calc(14vh + 19vw + 7vh);
|
|
left: 50%;
|
|
width: 58vw;
|
|
transform: translateX(-50%);
|
|
padding: 7vh 10vw;
|
|
background-color: rgba(255, 255, 255, 0.24);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
border: 1rpx solid #fff;
|
|
|
|
.username {
|
|
width: 58vw;
|
|
height: 11vw;
|
|
background-color: rgba(0, 77, 154, 0.2);
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.24);
|
|
position: relative;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
width: 5vw;
|
|
height: 5.5vw;
|
|
top: 50%;
|
|
left: 5vw;
|
|
transform: translateY(-50%);
|
|
background-image: url(#{$img-url}/username.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 15vw;
|
|
width: 40vw;
|
|
height: 10vw;
|
|
transform: translateY(-50%);
|
|
font-size: 26rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.password {
|
|
width: 58vw;
|
|
height: 11vw;
|
|
margin-top: 3.7vh;
|
|
background-color: rgba(0, 77, 154, 0.2);
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid rgba(255, 255, 255, 0.24);
|
|
position: relative;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
width: 4.625vw;
|
|
height: 5.375vw;
|
|
top: 50%;
|
|
left: 5vw;
|
|
transform: translateY(-50%);
|
|
background-image: url(#{$img-url}/password.png);
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.input {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 15vw;
|
|
width: 40vw;
|
|
height: 10vw;
|
|
transform: translateY(-50%);
|
|
font-size: 26rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.loginBtn {
|
|
width: 58vw;
|
|
height: 11vw;
|
|
margin-top: 7vh;
|
|
background: linear-gradient(to top,
|
|
rgba(64, 140, 247, 1),
|
|
rgba(16, 103, 225, 1));
|
|
border-radius: 5rpx;
|
|
color: rgba(255, 255, 255, 1);
|
|
line-height: 11vw;
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.subBtns {
|
|
width: 58vw;
|
|
margin-top: 2vh;
|
|
border-radius: 5rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
}
|
|
</style> |