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,6 +98,11 @@ const noSecret = (): void => {
 </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">
@@ -141,25 +149,54 @@ const noSecret = (): void => {
         >
       </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;
 }