refactor: login page

src/components/ReInfo/index.vue

@@ -4,6 +4,9 @@ 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;
@@ -95,71 +98,105 @@ const noSecret = (): void => {
 </script>
 
 <template>
-  <div class="info">
+  <div>
-    <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
+    <div style="margin: 20px 0 0 10px">
-      <el-form-item prop="userName">
+      <img :src="bgLogo" width="100" height="80" />
-        <el-input
+      <img :src="bgText" width="180" height="30" style="margin-bottom: 6px" />
-          clearable
+    </div>
-          v-model="model.userName"
+    <div class="info">
-          placeholder="请输入用户名"
+      <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
-          prefix-icon="el-icon-user"
+        <el-form-item prop="userName">
-        ></el-input>
+          <el-input
-      </el-form-item>
+            clearable
-      <el-form-item prop="passWord">
+            v-model="model.userName"
-        <el-input
+            placeholder="请输入用户名"
-          clearable
+            prefix-icon="el-icon-user"
-          type="password"
+          ></el-input>
-          show-password
+        </el-form-item>
-          v-model="model.passWord"
+        <el-form-item prop="passWord">
-          placeholder="请输入密码"
+          <el-input
-          prefix-icon="el-icon-lock"
+            clearable
-        ></el-input>
+            type="password"
-      </el-form-item>
+            show-password
-      <el-form-item prop="verify">
+            v-model="model.passWord"
-        <el-input
+            placeholder="请输入密码"
-          maxlength="2"
+            prefix-icon="el-icon-lock"
-          onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
+          ></el-input>
-          v-model.number="model.verify"
+        </el-form-item>
-          placeholder="请输入验证码"
+        <el-form-item prop="verify">
-        ></el-input>
+          <el-input
-        <span
+            maxlength="2"
-          class="verify"
+            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
-          title="刷新"
+            v-model.number="model.verify"
-          v-html="model.svg"
+            placeholder="请输入验证码"
-          @click.prevent="refreshVerify"
+          ></el-input>
-        ></span>
+          <span
-      </el-form-item>
+            class="verify"
-      <el-form-item>
+            title="刷新"
-        <el-button type="primary" @click.prevent="onBehavior">{{
+            v-html="model.svg"
-          tipsFalse
+            @click.prevent="refreshVerify"
-        }}</el-button>
+          ></span>
-        <el-button @click="resetForm">重置</el-button>
+        </el-form-item>
-        <span class="tips" @click="changPage">{{ tips }}</span>
+        <el-form-item>
-      </el-form-item>
+          <el-button type="primary" @click.prevent="onBehavior">{{
-      <span title="测试用户 直接登录" class="secret" @click="noSecret"
+            tipsFalse
-        >免密登录</span
+          }}</el-button>
-      >
+          <el-button @click="resetForm">重置</el-button>
-    </el-form>
+          <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: 48vh;
+  height: 41vh;
-  background: url("../../assets/login.png") no-repeat center;
-  background-size: cover;
   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 (max-width: 750px) {
+
-    width: 88vw;
+  @media screen and (min-width: 800px) and (max-width: 1200px) {
-    right: 25px;
+    height: 38vh;
-    top: 22vh;
+  }
+
+  @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 {
@@ -175,7 +212,7 @@ const noSecret = (): void => {
     }
 
     .tips {
-      color: #409eff;
+      color: #000;
       float: right;
 
       &:hover {
@@ -185,7 +222,7 @@ const noSecret = (): void => {
   }
 
   .secret {
-    color: #409eff;
+    color: #fff;
 
     &:hover {
       cursor: pointer;

src/style/index.scss

@@ -75,7 +75,7 @@ ul {
   width: 100vw;
   height: 100vh;
   overflow-x: hidden;
-  background: url("../assets/bg.png") no-repeat center;
+  background: url("../assets/bg.jpg") no-repeat center;
   background-size: cover;
 }