From 16957a96b718a340c4c9a93fe3cb46a03919e71d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E4=BC=A0=E9=BE=99?= <zclzone@outlook.com>
Date: Sat, 18 Jun 2022 19:14:50 +0800
Subject: [PATCH] =?UTF-8?q?mod:=20=E4=BD=BF=E7=94=A8unocss=E9=87=8D?=
 =?UTF-8?q?=E5=86=99=E7=99=BB=E5=BD=95=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login/index.vue | 116 +++++++++++++-------------------------
 unocss.config.js          |   7 +--
 2 files changed, 41 insertions(+), 82 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 66e99f1..517938f 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -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>
diff --git a/unocss.config.js b/unocss.config.js
index 3b816c9..468e896 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -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()],
 })