登陆

src/views/guide/component/addGuide.vue

@@ -35,7 +35,7 @@
     store,
     show,
     save
-  } from "@/api/relic"
+  } from "@/api/guide"
   import {
     Message
   } from 'element-ui'

src/views/login/index.vue

@@ -1,44 +1,46 @@
 <template>
   <div class="login-container">
-    <img src="../../assets/imgs/bg_bottom.png" class="bg_bottom" />
+    <img src="../../assets/bg.png" alt="" class='bg_left'>
+    <!-- <img src="../../assets/imgs/bg_bottom.png" class="bg_bottom" />
     <img src="../../assets/imgs/bg_left.png" class="bg_left" />
-    <img src="../../assets/imgs/footer_logo.png" class="footer_logo" />
+    <img src="../../assets/imgs/footer_logo.png" class="footer_logo" />:style="{marginTop:marginTop+'px'}" -->
     <div class="formBox" ref="formBox">
-      <el-form ref="loginForm" :model="loginForm" :style="{marginTop:marginTop+'px'}" :rules="loginRules"
+      <el-form ref="loginForm" :model="loginForm"  :rules="loginRules"
         class="login-form" auto-complete="on" label-position="left">
 
-        <div class="title-container">
+        <!-- <div class="title-container">
           <h3 class="title">预约管理系统</h3>
-        </div>
-        <img src="../../assets/imgs/bg_box.png" width="100%" />
+        </div> -->
+        <!-- <img src="../../assets/imgs/bg_box.png" width="100%" /> -->
         <div class="box_middle">
-          <el-form-item prop="username">
-            <span class="svg-container">
+          <img src="../../assets/loginlogo.png" alt="" class='loginlogo'>
+          <el-form-item prop="username" class='username'>
+            <!-- <span class="svg-container">
               <svg-icon icon-class="user" />
-            </span>
-            <el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
+            </span> -->
+            <el-input ref="username" v-model="loginForm.username" placeholder="" name="username" type="text"
               tabindex="1" auto-complete="off" />
           </el-form-item>
 
-          <el-form-item prop="password">
-            <span class="svg-container">
+          <el-form-item prop="password" class='password'>
+            <!-- <span class="svg-container">
               <svg-icon icon-class="password" />
-            </span>
-            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-              placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
+            </span> -->
+            <el-input :key="passwordType" show-password ref="password" v-model="loginForm.password" :type="passwordType"
+              placeholder="" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
 
           </el-form-item>
 
-          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+          <el-button :loading="loading" type="primary" style="width:50%;margin-bottom:30px;"
             @click.native.prevent="handleLogin">登录</el-button>
         </div>
 
-        <img src="../../assets/imgs/bg_box_bottom.png" width="100%" />
+        <!-- <img src="../../assets/imgs/bg_box_bottom.png" width="100%" /> -->
       </el-form>
     </div>
-    <div class="footer">
+    <!-- <div class="footer">
       2023 © 苏州革命博物馆
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -66,6 +68,7 @@
       }
       return {
         windowHeight: document.documentElement.clientHeight, //实时屏幕高度
+        windowWidth: document.documentElement.clientWidth,
         loginForm: {
           username: '',
           password: ''
@@ -99,6 +102,10 @@
       windowHeight(val) {
         let that = this;
         console.log("实时屏幕高度：", val, that.windowHeight);
+      },
+      windowWidth(val) {
+        let that = this;
+        console.log("实时屏幕宽度：", val, that.windowHeight);
       }
 
     },
@@ -113,12 +120,20 @@
       var that = this;
       let height = this.$refs.formBox.offsetHeight; //100
       that.formHeight = height;
-      that.marginTop = (that.windowHeight - height * 1.5) / 2;
+      that.marginTop = (that.windowHeight - height * 1.5) / 3;
+      window.fullHeight = document.documentElement.clientHeight;
+      that.windowHeight = window.fullHeight; // 高
+      window.fullWidth = document.documentElement.clientWidth;
+      that.windowWidth = window.fullWidth; // 宽
+      console.log(that.windowWidth, that.windowHeight)
       // <!--把window.onresize事件挂在到mounted函数上-->
       window.onresize = () => {
         return (() => {
           window.fullHeight = document.documentElement.clientHeight;
           that.windowHeight = window.fullHeight; // 高
+          window.fullWidth = document.documentElement.clientWidth;
+          that.windowWidth = window.fullWidth; // 宽
+          console.log(that.windowWidth, that.windowHeight)
         })()
       };
     },
@@ -161,9 +176,9 @@
   /* 修复input 背景不协调 和光标变色 */
   /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-  $bg:#ffffff;
-  $light_gray:#55320f;
-  $cursor: #55320f;
+  $bg: #ffffff;
+  $light_gray: #cf995a;
+  $cursor: #cf995a;
 
   @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
     .login-container .el-input input {
@@ -186,10 +201,11 @@
   }
 
   .box_middle {
-    background: url("../../assets/imgs/bg_box_line.png") repeat-y;
-    background-size: 100% 100%;
-    padding: 20px 60px;
+    // background: url("../../assets/imgs/bg_box_line.png") repeat-y;
+    // background-size: 100% 100%;
+    padding: 20px 30px;
     margin-top: -10px;
+    text-align: center;
   }
 
 
@@ -221,18 +237,18 @@
     }
 
     .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
+      // border: 1px solid rgba(255, 255, 255, 0.1);
+      // background: rgba(0, 0, 0, 0.1);
+      // border-radius: 5px;
       color: #454545;
     }
   }
 </style>
 
 <style lang="scss" scoped>
-  $bg:#f9efe5;
-  $dark_gray:#55320f;
-  $light_gray:#55320f;
+  $bg: #fff;
+  $dark_gray: #55320f;
+  $light_gray: #55320f;
 
   .bg_bottom {
     position: absolute;
@@ -244,7 +260,40 @@
     position: absolute;
     left: 0;
     top: 0;
-    height: 90%;
+    height: 100%;
+    width: 70%
+  }
+
+  .loginlogo {
+    width: 100%;
+    max-width: 288px;
+    margin-bottom: 70px;
+  }
+
+  .formBox {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 30%;
+    transform: translate(0%, -50%);
+  }
+
+  .username {
+    width: 100%;
+    max-width: 300px;
+    background-image: url(../../assets/username.png);
+    background-size: 100% 100%;
+    display: inline-block;
+    margin-bottom: 40px;
+  }
+
+  .password {
+    width: 100%;
+    max-width: 300px;
+    background-image: url(../../assets/password.png);
+    background-size: 100% 100%;
+    display: inline-block;
+    margin-bottom: 60px;
   }
 
   .login-container {
@@ -261,6 +310,10 @@
       padding: 20px 35px 0;
       margin: 0 auto;
       overflow: hidden;
+
+      .el-input {
+        line-height: 53px;
+      }
     }
 
     .tips {