refactor: login page

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1634903299890") format("woff2"),
-    url("iconfont.woff?t=1634903299890") format("woff"),
-    url("iconfont.ttf?t=1634903299890") format("truetype");
+  src: url("iconfont.woff2?t=1636197082361") format("woff2"),
+    url("iconfont.woff?t=1636197082361") format("woff"),
+    url("iconfont.ttf?t=1636197082361") format("truetype");
 }
 
 .iconfont {
@@ -13,24 +13,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.team-iconshuifei::before {
-  content: "\e62d";
-}
-
-.team-iconshuiyuandi::before {
-  content: "\e64e";
-}
-
-.team-iconshuifei1::before {
-  content: "\e616";
-}
-
-.team-iconshui::before {
-  content: "\e61f";
-}
-
-.team-iconzuixinlianzai::before {
-  content: "\e6da";
+.team-iconlogo::before {
+  content: "\e620";
 }
 
 .team-iconxinpin::before {
@@ -41,22 +25,6 @@
   content: "\e615";
 }
 
-.team-iconinternationality::before {
-  content: "\e67a";
-}
-
-.team-iconshanchu::before {
-  content: "\e617";
-}
-
-.team-iconshow-main-container::before {
-  content: "\e878";
-}
-
-.team-iconhidden-main-container::before {
-  content: "\e881";
-}
-
 .team-iconexit-fullscreen::before {
   content: "\e62a";
 }

src/assets/iconfont/iconfont.json

@@ -6,39 +6,11 @@
   "description": "pure-admin",
   "glyphs": [
     {
-      "icon_id": "1715043",
-      "name": "水费",
-      "font_class": "shuifei",
-      "unicode": "e62d",
-      "unicode_decimal": 58925
-    },
-    {
-      "icon_id": "7873366",
-      "name": "水源地",
-      "font_class": "shuiyuandi",
-      "unicode": "e64e",
-      "unicode_decimal": 58958
-    },
-    {
-      "icon_id": "12257150",
-      "name": "水费",
-      "font_class": "shuifei1",
-      "unicode": "e616",
-      "unicode_decimal": 58902
-    },
-    {
-      "icon_id": "24810949",
-      "name": "水",
-      "font_class": "shui",
-      "unicode": "e61f",
-      "unicode_decimal": 58911
-    },
-    {
-      "icon_id": "2508809",
-      "name": "最新连载",
-      "font_class": "zuixinlianzai",
-      "unicode": "e6da",
-      "unicode_decimal": 59098
+      "icon_id": "22129506",
+      "name": "水能",
+      "font_class": "logo",
+      "unicode": "e620",
+      "unicode_decimal": 58912
     },
     {
       "icon_id": "7795613",
@@ -54,34 +26,6 @@
       "unicode": "e615",
       "unicode_decimal": 58901
     },
-    {
-      "icon_id": "18367956",
-      "name": "中英文2 中文",
-      "font_class": "internationality",
-      "unicode": "e67a",
-      "unicode_decimal": 59002
-    },
-    {
-      "icon_id": "6184565",
-      "name": "删除",
-      "font_class": "shanchu",
-      "unicode": "e617",
-      "unicode_decimal": 58903
-    },
-    {
-      "icon_id": "9626913",
-      "name": "全屏",
-      "font_class": "show-main-container",
-      "unicode": "e878",
-      "unicode_decimal": 59512
-    },
-    {
-      "icon_id": "9626952",
-      "name": "退出全屏",
-      "font_class": "hidden-main-container",
-      "unicode": "e881",
-      "unicode_decimal": 59521
-    },
     {
       "icon_id": "5698509",
       "name": "全屏缩小",

src/assets/login/avatar.svg

@@ -0,0 +1 @@
+<svg t="1636193306629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="32" height="32"><path d="M410.558481 0.10861C410.558481 211.083075 109.682285 361.860579 109.682285 633.656511c0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527C711.407525 361.751969 410.558481 210.974465 410.558481 0.10861z" fill="#386BF3" p-id="1848"></path><path d="M613.468671 73.664572c0 211.055922-300.876197 361.914883-300.876196 633.547901 0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527c-0.054305-271.633018-300.876197-422.491979-300.876197-633.547901z" fill="#C3D2FB" p-id="1849"></path><path d="M312.592475 707.212473c0-183.713414 137.635722-312.171612 226.72288-441.390078 81.701694 106.111739 172.119322 218.740063 172.119323 367.725506a309.755045 309.755045 0 0 1-291.074166 316.516003 323.114046 323.114046 0 0 1-107.768037-242.851431z" fill="#303F5B" p-id="1850"></path></svg>

src/layout/components/sidebar/horizontal.vue

@@ -118,7 +118,7 @@ onMounted(() => {
 <template>
   <div class="horizontal-header">
     <div class="horizontal-header-left" @click="backHome">
-      <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
+      <Icon svg :width="35" :height="35" content="team-iconlogo" />
       <h4>{{ title }}</h4>
     </div>
     <el-menu

src/layout/components/sidebar/logo.vue

@@ -19,7 +19,7 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
+        <Icon svg :width="35" :height="35" content="team-iconlogo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
@@ -29,7 +29,7 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
+        <Icon svg :width="35" :height="35" content="team-iconlogo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>

src/style/login.css

@@ -0,0 +1,221 @@
+.wave {
+  position: fixed;
+  height: 100%;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 18rem;
+  padding: 0 2rem;
+}
+
+.img {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.img img {
+  width: 500px;
+}
+
+.login-box {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.login-form {
+  width: 360px;
+}
+
+.avatar {
+  width: 100px;
+}
+
+.login-form h2 {
+  font-size: 2.9rem;
+  text-transform: uppercase;
+  margin: 15px 0;
+  color: #999;
+}
+
+.input-group {
+  position: relative;
+  display: grid;
+  grid-template-columns: 7% 93%;
+  margin: 25px 0;
+  padding: 5px 0;
+  border-bottom: 2px solid #d9d9d9;
+}
+
+.input-group:nth-child(1) {
+  margin-bottom: 4px;
+}
+
+.input-group::before,
+.input-group::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background-color: #c5d3f7;
+  transition: 0.5s;
+}
+
+.input-group::after {
+  right: 50%;
+}
+
+.input-group::before {
+  left: 50%;
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon i {
+  color: #d9d9d9;
+  transition: 0.5s;
+}
+
+.input-group > div {
+  position: relative;
+  height: 45px;
+}
+
+.input-group > div > h5 {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #d9d9d9;
+  font-size: 18px;
+  transition: 0.3s;
+  margin: 0;
+  padding: 0;
+}
+
+.input-group.focus .icon i {
+  color: #5392f0;
+}
+
+.input-group.focus div h5 {
+  top: -5px;
+  font-size: 15px;
+}
+
+.input-group.focus::after,
+.input-group.focus::before {
+  width: 50%;
+}
+
+.input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border: none;
+  outline: none;
+  background: none;
+  padding: 0.5rem 0.7rem;
+  font-size: 1.2rem;
+  color: #555;
+  font-family: "Roboto", sans-serif;
+}
+
+a {
+  display: block;
+  text-align: right;
+  text-decoration: none;
+  color: #999;
+  font-size: 0.9rem;
+  transition: 0.3s;
+}
+
+a:hover {
+  color: #5392f0;
+}
+
+.btn {
+  display: block;
+  width: 100%;
+  height: 50px;
+  border-radius: 25px;
+  margin: 1rem 0;
+  font-size: 1.2rem;
+  outline: none;
+  border: none;
+  background-image: linear-gradient(to right, #567dbe, #5392f0, #567dbe);
+  cursor: pointer;
+  color: #fff;
+  text-transform: uppercase;
+  font-family: "Roboto", sans-serif;
+  background-size: 200%;
+  transition: 0.5s;
+}
+
+.btn:hover {
+  background-position: right;
+}
+
+.copyright {
+  position: absolute;
+  width: 100%;
+  height: 50px;
+  bottom: 2px;
+  color: #5392f0;
+  text-align: center;
+  font-size: 18px;
+  font-family: "Roboto", sans-serif;
+}
+
+@media screen and (max-width: 1080px) {
+  .container {
+    grid-gap: 9rem;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .login-form {
+    width: 290px;
+  }
+
+  .login-form h2 {
+    font-size: 2.4rem;
+    margin: 8px 0;
+  }
+
+  .img img {
+    width: 360px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .wave {
+    display: none;
+  }
+
+  .img {
+    display: none;
+  }
+
+  .container {
+    grid-template-columns: 1fr;
+  }
+
+  .login-box {
+    justify-content: center;
+  }
+}

src/views/login.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+import { initRouter } from "/@/router";
+import { storageSession } from "/@/utils/storage";
+import { addClass, removeClass } from "/@/utils/operate";
+
+const router = useRouter();
+
+const currentWeek = new Date().getDay();
+
+let illustration = computed(() => {
+  return `/@/assets/login/illustration${currentWeek}.svg`;
+});
+
+let user = ref("admin");
+let pwd = ref("123456");
+
+const onLogin = (): void => {
+  storageSession.setItem("info", {
+    username: "admin",
+    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+  });
+  initRouter("admin").then(() => {});
+  router.push("/");
+};
+
+function onUserFocus() {
+  addClass(document.querySelector(".user"), "focus");
+}
+
+function onUserBlur() {
+  if (user.value.length === 0)
+    removeClass(document.querySelector(".user"), "focus");
+}
+
+function onPwdFocus() {
+  addClass(document.querySelector(".pwd"), "focus");
+}
+
+function onPwdBlur() {
+  if (pwd.value.length === 0)
+    removeClass(document.querySelector(".pwd"), "focus");
+}
+</script>
+
+<template>
+  <img src="/@/assets/login/bg.png" class="wave" />
+  <div class="container">
+    <div class="img"><img :src="illustration" /></div>
+    <div class="login-box">
+      <div class="login-form">
+        <img src="/@/assets/login/avatar.svg" class="avatar" />
+        <h2>Pure Admin</h2>
+        <div class="input-group user focus">
+          <div class="icon">
+            <i class="fa fa-user"></i>
+          </div>
+          <div>
+            <h5>用户名</h5>
+            <input
+              type="text"
+              class="input"
+              v-model="user"
+              @focus="onUserFocus"
+              @blur="onUserBlur"
+            />
+          </div>
+        </div>
+        <div class="input-group pwd focus">
+          <div class="icon">
+            <i class="fa fa-lock"></i>
+          </div>
+          <div>
+            <h5>密码</h5>
+            <input
+              type="password"
+              class="input"
+              v-model="pwd"
+              @focus="onPwdFocus"
+              @blur="onPwdBlur"
+            />
+          </div>
+        </div>
+        <button class="btn" @click="onLogin">登录</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url("/@/style/login.css");
+</style>