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> <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,81 +93,45 @@ 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%; width: 100%;
.brand { height: 100%;
width: 100%; padding: 0 20px;
padding: 15px; border: 1px solid #6a6a6a;
color: #6a6a6a; border-radius: 5px;
font-size: 24px; color: $primaryColor;
font-weight: normal; font-size: 16px;
text-align: center; transition: 0.5s;
&:focus {
display: flex; border-color: $primaryColor;
align-items: center; box-shadow: 0 0 5px $primaryColor;
justify-content: center;
} }
.form-item { }
width: 100%; .login-btn {
max-width: 360px; width: 100%;
height: 50px; height: 100%;
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%;
color: #fff; color: #fff;
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
background-color: $primaryColor; background-color: $primaryColor;
cursor: pointer; cursor: pointer;
transition: all 0.3s; transition: all 0.3s;
&:hover { &:hover {
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()],
}) })