go-pkg/wireguard-dashboard-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

mod: 使用unocss重写登录页

Browse Source
This commit is contained in:
张传龙 2022-06-18 19:14:50 +08:00
parent ef33b28492
commit 16957a96b7
2 changed files with 41 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/login/index.vue
View File

@ -1,36 +1,36 @@
<template>
<div class="login-page">
<div class="wrapper">
<div class="left">
<div class="login-bg" f-c-c h-full>
<div class="login-wrapper" flex w-full max-w-1020>
<div p-40 style="border-right: 1px solid #cccccc5e">
<img src="@/assets/images/login_banner.png" height="380" alt="login_banner" />
</div>
<div class="form-wrapper">
<h5 class="brand">
<img src="@/assets/images/logo.svg" width="45" mr-15 alt="logo" />
<div w-full f-c-c flex-col>
<h5 f-c-c w-full p-15 text-24 font-normal color="#6a6a6a">
<img mr-15 src="@/assets/images/logo.svg" width="45" alt="logo" />
{{ title }}
</h5>
<div class="form-item" mt-35>
<div mt-35 w-full max-w-360 h-50>
<input
v-model="loginInfo.name"
autofocus
type="text"
class="input"
class="login-ipt"
placeholder="username"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-35>
<div mt-35 w-full max-w-360 h-50>
<input
v-model="loginInfo.password"
type="password"
class="input"
class="login-ipt"
placeholder="password"
@keydown.enter="handleLogin"
/>
</div>
<div class="form-item" mt-35>
<button class="submit-btn" @click="handleLogin">登录</button>
<div mt-35 w-full max-w-360 h-50>
<button class="login-btn" @click="handleLogin">登录</button>
</div>
</div>
</div>
@ -93,81 +93,45 @@ async function handleLogin() {
</script>
<style lang="scss" scoped>
.login-page {
height: 100%;
.login-bg {
background-image: url(@/assets/images/login_bg.jpg);
background-size: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
}
.wrapper {
width: 100%;
max-width: 1020px;
.login-wrapper {
box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
background-color: rgba(255, 255, 255, 0.3);
display: flex;
.left {
padding: 40px;
border-right: 1px solid #cccccc5e;
}
}
.form-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.login-ipt {
width: 100%;
.brand {
width: 100%;
padding: 15px;
color: #6a6a6a;
font-size: 24px;
font-weight: normal;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 20px;
border: 1px solid #6a6a6a;
border-radius: 5px;
color: $primaryColor;
font-size: 16px;
transition: 0.5s;
&:focus {
border-color: $primaryColor;
box-shadow: 0 0 5px $primaryColor;
}
.form-item {
width: 100%;
max-width: 360px;
height: 50px;
input {
width: 100%;
height: 100%;
padding: 0 20px;
border: 1px solid #6a6a6a;
border-radius: 5px;
color: $primaryColor;
font-size: 16px;
transition: 0.5s;
&:focus {
border-color: $primaryColor;
box-shadow: 0 0 5px $primaryColor;
}
}
button {
width: 100%;
height: 100%;
}
.login-btn {
width: 100%;
height: 100%;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
background-color: $primaryColor;
color: #fff;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
background-color: $primaryColor;
cursor: pointer;
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
}
cursor: pointer;
transition: all 0.3s;
&:hover {
opacity: 0.8;
}
}
</style>

7
unocss.config.js
View File

@ -1,11 +1,6 @@
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
export default defineConfig({
shortcuts: [
[
'btn',
'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50',
],
],
shortcuts: [['f-c-c', 'flex justify-center items-center']],
presets: [presetUno(), presetAttributify()],
})