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

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

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

7
unocss.config.js
View File

@ -1,11 +1,6 @@
import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss' import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [['f-c-c', 'flex justify-center items-center']],
[
'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',
],
],
presets: [presetUno(), presetAttributify()], presets: [presetUno(), presetAttributify()],
}) })