Merge branch 'main' into refactor/theme

src/api/user.ts

@@ -15,8 +15,3 @@ export const getVerify = (): userType => {
 export const getLogin = (data: object) => {
   return http.request("post", "/login", data);
 };
-
-// 注册
-export const getRegist = (data: object): userType => {
-  return http.request("post", "/register", data);
-};

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1636070926069") format("woff2"),
-    url("iconfont.woff?t=1636070926069") format("woff"),
-    url("iconfont.ttf?t=1636070926069") 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,11 +13,7 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.team-iconshuijin::before {
-  content: "\e621";
-}
-
-.team-iconzu2148::before {
+.team-iconlogo::before {
   content: "\e620";
 }
 

src/assets/iconfont/iconfont.json

@@ -5,17 +5,10 @@
   "css_prefix_text": "team-icon",
   "description": "pure-admin",
   "glyphs": [
-    {
-      "icon_id": "11758211",
-      "name": "水浸",
-      "font_class": "shuijin",
-      "unicode": "e621",
-      "unicode_decimal": 58913
-    },
     {
       "icon_id": "22129506",
       "name": "水能",
-      "font_class": "zu2148",
+      "font_class": "logo",
       "unicode": "e620",
       "unicode_decimal": 58912
     },

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/assets/login/illustration2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="500" height="380" viewBox="0 0 896 529.1129" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M832.06729,623.22778s-26.37759,9.89441-38.806,32.94348S787.06,706.69574,787.06,706.69574s26.37759-9.89447,38.806-32.94348S832.06729,623.22778,832.06729,623.22778Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M867.5,657.59637s-8.64182,26.814-31.0802,40.31373-50.17651,8.57293-50.17651,8.57293,8.64175-26.81408,31.08017-40.31378S867.5,657.59637,867.5,657.59637Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><rect y="527.1129" width="896" height="2" fill="#2f2e41"/><path d="M519.87238,620.97461a95.44448,95.44448,0,0,1-35.748-14.44629L485.306,604.915a93.36283,93.36283,0,0,0,34.999,14.10547c18.93164,3.40137,47.26075,1.73144,74.707-25.52735,53.41358-53.04785,104.39307-58.39062,104.90186-58.43847l.18652,1.99219c-.50146.04687-50.76806,5.31738-103.67822,57.86621-21.61328,21.46386-43.792,27.40234-61.71777,27.40234A83.49962,83.49962,0,0,1,519.87238,620.97461Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="515.15271" cy="381.1129" r="12" fill="#2f2e41"/><circle cx="430.15271" cy="437.1129" r="12" fill="#2f2e41"/><path d="M841.5,714s-17.46191-5.41315-52.26129-10.84192L790,692.5c6-60-34-150-34-150a401.561,401.561,0,0,1,21.4693,139.0246C772.13214,672.2124,761.82056,662.16638,742,656c0,0,25.77765,22.106,33.15918,45.10175a997.84042,997.84042,0,0,0-102.02258-8.21589L682,672.5l-17,17s-7-51-22-53l11,50s-13-10-16-9l7.39746,14.79486c-49.819-.51654-109.08453,1.7356-177.76581,8.95227L476,682l-17,17s-7-51-22-53l11,50s-13-10-16-9l8.64288,17.28583Q406.9763,708.2897,370.5,714Z" transform="translate(-158 -185.8871)" fill="#3f3d56"/><path d="M565.64813,230.37817c-10.89964,11.74783,17.59745,40.25959,17.59745,40.25959s-57.70662,9.73051-53.12783,9.14083,2.20622-49.13151,2.20622-49.13151S576.54777,218.63035,565.64813,230.37817Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M605.81236,356.10945l-50.139,25.6141-27.22969,15.6059s-32.09862,40.43116-38.08709,64.39234,25.92963,68.247,29.54371,72.82286a54.36088,54.36088,0,0,1,4.98908,7.42355c1.24727,1.85589,12.02944-.541,23.80342-3.06554S547.13,518.93875,547.13,518.93875s-15.02732-38.39505-16.14686-39.25912c-1.04554-.807-4.60093-7.44631-2.04309-10.35234a25.94993,25.94993,0,0,0,5.44489-8.89825,30.09064,30.09064,0,0,1,4.18709-7.94151s45.361-36.83645,59.52776-49.37835,51.82952-4.65839,51.82952-4.65839-17.78167,68.20027-22.22979,72.80616-4.929,8.70085-2.91535,16.50759,28.28157.39078,28.28157.39078L662.766,461.6996s15.74879-34.2925,24.29946-69.67451c4.27533-17.691-3.88828-28.23462-13.12073-34.35549a41.39094,41.39094,0,0,0-30.02983-5.97766l-46.34848,8.1308,32.14706-13.84923Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M420.87777,290.19133,361.02366,271.685s-24.179-31.16689-12.78824-36.6669,25.65172,26.94419,25.65172,26.94419l41.686,2.69751Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M672.49431,257.78673l53.2121-33.06768s15.49333-36.27612,3.0807-38.71059-17.98787,32.56435-17.98787,32.56435l-39.64232,13.17143Z" transform="translate(-158 -185.8871)" fill="#a0616a"/><path d="M682.45318,220.40023l1.01427,39.19147-89.68779,16.025c13.19231,28.22441,9.84118,60.34675,43.04725,74.4259L524.9027,404.78717c4.9871-43.03806-15.81748-75.456-35.263-115.75876-23.68547-8.58589-51.19594-2.29078-80.33649,10.34619l-5.237-40.66416,123.87841-8.896,20.34848,7.77932,21.81842-9.17677C602.17891,238.88953,648.22076,220.77584,682.45318,220.40023Z" transform="translate(-158 -185.8871)" fill="#5392f0"/><path d="M626.64006,486.51727c-2.72,2.36681-5.25213,21.84984-5.34982,28.92023s9.21178,8.89624,14.29855,9.2494,4.47816,3.45631,7.83678,6.04854,14.39625,2.179,28.89019-2.71238-9.75274-20.92568-11.86409-21.662-11-22.78156-11-22.78156S629.36,484.15046,626.64006,486.51727Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><path d="M547.368,531.00717c3.23089,1.60043,10.61681,19.80614,12.50274,26.62107s-6.65716,10.93994-11.48848,12.5704-3.45631,4.47816-6.04855,7.83678-13.3744,5.75546-28.63472,4.696,4.13258-22.71391,5.98847-23.96118,4.86893-24.82526,4.86893-24.82526S544.13715,529.40674,547.368,531.00717Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/><circle cx="389.47074" cy="35.42904" r="23.99585" fill="#a0616a"/><path d="M519.73448,218.90923a22.82668,22.82668,0,0,1-.83378-18.59281c2.35891-5.8153,7.59174-11.65569,18.87309-13.4,24.61387-3.80572,37.71267,13.43543,37.02452,19.07449s-3.99294,19.27051-3.99294,19.27051,1.47587-12.90619-4.85883-13.362-30.90178-2.37835-37.12217,4.145a14.23268,14.23268,0,0,0-3.71042,13.82977Z" transform="translate(-158 -185.8871)" fill="#2f2e41"/></svg>

src/components/ReInfo/index.vue

@@ -1,232 +0,0 @@
-<script setup lang="ts">
-import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { initRouter } from "/@/router";
-import { storageSession } from "/@/utils/storage";
-
-import bgText from "/@/assets/bg-text.png";
-import bgLogo from "/@/assets/bg-logo.png";
-
-export interface ContextProps {
-  userName: string;
-  passWord: string;
-  verify: number | null;
-  svg: any;
-  telephone?: number;
-  dynamicText?: string;
-}
-
-const props = defineProps({
-  ruleForm: {
-    type: Object as PropType<ContextProps>
-  }
-});
-
-const emit = defineEmits<{
-  (e: "onBehavior", evt: Object): void;
-  (e: "refreshVerify"): void;
-}>();
-
-const instance = getCurrentInstance();
-
-const model = toRef(props, "ruleForm");
-let tips = ref<string>("注册");
-let tipsFalse = ref<string>("登录");
-
-const route = useRoute();
-const router = useRouter();
-
-watch(
-  route,
-  async ({ path }): Promise<void> => {
-    await nextTick();
-    path.includes("register")
-      ? (tips.value = "登录") && (tipsFalse.value = "注册")
-      : (tips.value = "注册") && (tipsFalse.value = "登录");
-  },
-  { immediate: true }
-);
-
-const rules = ref<any>({
-  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  passWord: [
-    { required: true, message: "请输入密码", trigger: "blur" },
-    { min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
-  ],
-  verify: [
-    { required: true, message: "请输入验证码", trigger: "blur" },
-    { type: "number", message: "验证码必须是数字类型", trigger: "blur" }
-  ]
-});
-
-// 点击登录或注册
-const onBehavior = (evt: Object): void => {
-  // @ts-expect-error
-  instance.refs.ruleForm.validate((valid: boolean) => {
-    if (valid) {
-      emit("onBehavior", evt);
-    } else {
-      return false;
-    }
-  });
-};
-
-// 刷新验证码
-const refreshVerify = (): void => {
-  emit("refreshVerify");
-};
-
-// 表单重置
-const resetForm = (): void => {
-  // @ts-expect-error
-  instance.refs.ruleForm.resetFields();
-};
-
-// 登录、注册页面切换
-const changPage = (): void => {
-  tips.value === "注册" ? router.push("/register") : router.push("/login");
-};
-
-const noSecret = (): void => {
-  storageSession.setItem("info", {
-    username: "admin",
-    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-  });
-  initRouter("admin").then(() => {});
-  router.push("/");
-};
-</script>
-
-<template>
-  <div>
-    <div style="margin: 20px 0 0 10px">
-      <img :src="bgLogo" width="100" height="80" />
-      <img :src="bgText" width="180" height="30" style="margin-bottom: 6px" />
-    </div>
-    <div class="info">
-      <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
-        <el-form-item prop="userName">
-          <el-input
-            clearable
-            v-model="model.userName"
-            placeholder="请输入用户名"
-            prefix-icon="el-icon-user"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="passWord">
-          <el-input
-            clearable
-            type="password"
-            show-password
-            v-model="model.passWord"
-            placeholder="请输入密码"
-            prefix-icon="el-icon-lock"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="verify">
-          <el-input
-            maxlength="2"
-            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
-            v-model.number="model.verify"
-            placeholder="请输入验证码"
-          ></el-input>
-          <span
-            class="verify"
-            title="刷新"
-            v-html="model.svg"
-            @click.prevent="refreshVerify"
-          ></span>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click.prevent="onBehavior">{{
-            tipsFalse
-          }}</el-button>
-          <el-button @click="resetForm">重置</el-button>
-          <span class="tips" @click="changPage">{{ tips }}</span>
-        </el-form-item>
-        <span title="测试用户 直接登录" class="secret" @click="noSecret"
-          >免密登录</span
-        >
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.info {
-  width: 30vw;
-  height: 41vh;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba($color: #fff, $alpha: 0.2);
-  background-size: cover;
-  border-radius: 20px;
-  right: 100px;
-  top: 30vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media screen and (min-width: 800px) and (max-width: 1200px) {
-    height: 38vh;
-  }
-
-  @media screen and (min-width: 421px) and (max-width: 799px) {
-    width: 45vw;
-    height: 35vh;
-  }
-
-  @media screen and (min-width: 321px) and (max-width: 420px) {
-    width: 80vw;
-    height: 48vh;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 320px) {
-    width: 90vw;
-    height: 55vh;
-  }
-
-  @media screen and (min-height: 600px) and (max-height: 800px) {
-    height: 48vh;
-  }
-
-  @media screen and (min-height: 400px) and (max-height: 599px) {
-    height: 58vh;
-  }
-
-  @media screen and (min-height: 0) and (max-height: 399px) {
-    height: 78vh;
-  }
-
-  .rule-form {
-    width: 80%;
-
-    .verify {
-      position: absolute;
-      margin: -10px 0 0 -120px;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    .tips {
-      color: #000;
-      float: right;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .secret {
-    color: #fff;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>

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-iconzu2148" />
+        <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-iconzu2148" />
+        <Icon svg :width="35" :height="35" content="team-iconlogo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>

src/plugins/i18n/config.ts

@@ -92,7 +92,6 @@ export const buttonConfig = {
       hsexitfullscreen: "退出全屏",
       hsrefreshRoute: "刷新路由",
       hslogin: "登陆",
-      hsregister: "注册",
       hsadd: "新增",
       hsmark: "标记/取消",
       hssave: "保存",
@@ -116,7 +115,6 @@ export const buttonConfig = {
       hsexitfullscreen: "exitFullscreen",
       hsrefreshRoute: "refreshRoute",
       hslogin: "login",
-      hsregister: "register",
       hsadd: "Add",
       hsmark: "Mark/Cancel",
       hssave: "Save",

src/router/index.ts

@@ -194,7 +194,7 @@ export function resetRouter() {
 }
 
 // 路由白名单
-const whiteList = ["/login", "/register"];
+const whiteList = ["/login"];
 
 router.beforeEach((to, _from, next) => {
   if (to.meta?.keepAlive) {

src/router/modules/remaining.ts

@@ -11,16 +11,6 @@ const remainingRouter = [
       rank: 101
     }
   },
-  {
-    path: "/register",
-    name: "register",
-    component: () => import("/@/views/register.vue"),
-    meta: {
-      title: "message.hsregister",
-      showLink: false,
-      rank: 102
-    }
-  },
   {
     path: "/redirect",
     name: "redirect",

src/style/index.scss

@@ -65,15 +65,6 @@ ul {
   }
 }
 
-.login,
-.register {
-  width: 100vw;
-  height: 100vh;
-  overflow-x: hidden;
-  background: url("../assets/bg.jpg") no-repeat center;
-  background-size: cover;
-}
-
 /* 头部用户信息样式重置 */
 .hidden {
   display: none !important;

src/style/login.css

@@ -0,0 +1,227 @@
+.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: 350px;
+  height: 80px;
+}
+
+.login-form h2 {
+  text-transform: uppercase;
+  margin: 15px 0;
+  color: #999;
+  font: bold 200% Consolas, Monaco, monospace;
+}
+
+.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;
+  }
+
+  .avatar {
+    width: 280px;
+    height: 80px;
+  }
+}
+
+@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

@@ -1,64 +1,179 @@
 <script setup lang="ts">
-import { infoType } from "./type";
+import { ref, computed } from "vue";
 import { useRouter } from "vue-router";
-import { reactive, onBeforeMount } from "vue";
-import { getVerify, getLogin } from "/@/api/user";
+import { initRouter } from "/@/router";
+import avatar from "/@/assets/login/avatar.svg";
 import { storageSession } from "/@/utils/storage";
-import { warnMessage, successMessage } from "/@/utils/message";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
+import { addClass, removeClass } from "/@/utils/operate";
+import illustration0 from "/@/assets/login/illustration0.svg";
+import illustration1 from "/@/assets/login/illustration1.svg";
+import illustration2 from "/@/assets/login/illustration2.svg";
+import illustration3 from "/@/assets/login/illustration3.svg";
+import illustration4 from "/@/assets/login/illustration4.svg";
+import illustration5 from "/@/assets/login/illustration5.svg";
+import illustration6 from "/@/assets/login/illustration6.svg";
 
 const router = useRouter();
 
-// 刷新验证码
-const refreshGetVerify = async () => {
-  let { svg }: infoType = await getVerify();
-  contextInfo.svg = svg;
-};
-
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
+// eslint-disable-next-line vue/return-in-computed-property
+const currentWeek = computed(() => {
+  switch (String(new Date().getDay())) {
+    case "0":
+      return illustration0;
+    case "1":
+      return illustration1;
+    case "2":
+      return illustration2;
+    case "3":
+      return illustration3;
+    case "4":
+      return illustration4;
+    case "5":
+      return illustration5;
+    case "6":
+      return illustration6;
+    default:
+      return illustration4;
+  }
 });
 
-const toPage = (info: Object): void => {
-  storageSession.setItem("info", info);
+let user = ref("admin");
+let pwd = ref("123456");
+
+const onLogin = (): void => {
+  storageSession.setItem("info", {
+    username: "admin",
+    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
+  });
+  initRouter("admin").then(() => {});
   router.push("/");
 };
 
-// 登录
-const onLogin = async () => {
-  let { userName, passWord, verify } = contextInfo;
-  let { code, info, accessToken }: infoType = await getLogin({
-    username: userName,
-    password: passWord,
-    verify: verify
-  });
-  code === 0
-    ? successMessage(info) &&
-      toPage({
-        username: userName,
-        accessToken
-      })
-    : warnMessage(info);
-};
+function onUserFocus() {
+  addClass(document.querySelector(".user"), "focus");
+}
 
-const refreshVerify = (): void => {
-  refreshGetVerify();
-};
+function onUserBlur() {
+  if (user.value.length === 0)
+    removeClass(document.querySelector(".user"), "focus");
+}
 
-onBeforeMount(() => {
-  // refreshGetVerify();
-});
+function onPwdFocus() {
+  addClass(document.querySelector(".pwd"), "focus");
+}
+
+function onPwdBlur() {
+  if (pwd.value.length === 0)
+    removeClass(document.querySelector(".pwd"), "focus");
+}
 </script>
 
 <template>
-  <div class="login">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onLogin"
-      @refreshVerify="refreshVerify"
-    />
+  <img src="/@/assets/login/bg.png" class="wave" />
+  <div class="container">
+    <div class="img">
+      <component :is="currentWeek"></component>
+    </div>
+    <div class="login-box">
+      <div class="login-form">
+        <avatar class="avatar" />
+        <h2
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 100
+            }
+          }"
+        >
+          Pure Admin
+        </h2>
+        <div
+          class="input-group user focus"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 200
+            }
+          }"
+        >
+          <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"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 300
+            }
+          }"
+        >
+          <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"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 10
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 400
+            }
+          }"
+          @click="onLogin"
+        >
+          登录
+        </button>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+@import url("/@/style/login.css");
+</style>

src/views/register.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getRegist, getVerify } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { warnMessage, successMessage } from "/@/utils/message";
-
-const router = useRouter();
-
-// 刷新验证码
-const refreshGetVerify = async () => {
-  let { svg } = await getVerify();
-  contextInfo.svg = svg;
-};
-
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
-});
-
-// 注册
-const onRegist = async () => {
-  let { userName, passWord, verify } = contextInfo;
-  let { code, info } = await getRegist({
-    username: userName,
-    password: passWord,
-    verify: verify
-  });
-  code === 0
-    ? successMessage(info) && router.push("/login")
-    : warnMessage(info);
-};
-
-const refreshVerify = (): void => {
-  refreshGetVerify();
-};
-
-onBeforeMount(() => {
-  // refreshGetVerify();
-});
-</script>
-
-<template>
-  <div class="register">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onRegist"
-      @refreshVerify="refreshVerify"
-    />
-  </div>
-</template>

src/views/welcome.vue

@@ -185,7 +185,7 @@ const openDepot = (): void => {
         :sm="24"
         :md="24"
         :lg="8"
-        :xl="1"
+        :xl="8"
         style="margin-bottom: 20px"
         v-motion
         :initial="{