up

src/styles/element-variables.scss

@@ -1,5 +1,5 @@
 /* 改变主题色变量 */
-$--color-primary: #c69845;
+$--color-primary: #EF9525;
 
 /* 改变 icon 字体路径变量，必需 */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';

src/styles/viewui-mine.less

@@ -1,4 +1,4 @@
 @import '~view-design/src/styles/index.less';
 
 // Here are the variables to cover, such as:
-@primary-color: #c69845;
+@primary-color: #EF9525;

src/views/login/index.vue

@@ -2,9 +2,10 @@
   <div class="login-container">
     <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" />
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
-      label-position="left">
+    <img src="../../assets/imgs/footer_logo.png" class="footer_logo" />
+    <div class="formBox" ref="formBox">
+    <el-form ref="loginForm" :model="loginForm" :style="{marginTop:marginTop+'px'}" :rules="loginRules"
+      class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
         <h3 class="title">“中共苏州独立支部旧址”预约系统</h3>
@@ -36,6 +37,7 @@
 
       <img src="../../assets/imgs/bg_box_bottom.png" width="100%" />
     </el-form>
+    </div>
     <div class="footer">
       2022 © 中共苏州独立支部旧址
     </div>
@@ -65,6 +67,7 @@
         }
       }
       return {
+        windowHeight: document.documentElement.clientHeight, //实时屏幕高度
         loginForm: {
           username: 'admin',
           password: 'Admin2022'
@@ -83,7 +86,9 @@
         },
         loading: false,
         passwordType: 'password',
-        redirect: undefined
+        redirect: undefined,
+        marginTop: 20,
+        formHeight: 100
       }
     },
     watch: {
@@ -92,8 +97,34 @@
           this.redirect = route.query && route.query.redirect
         },
         immediate: true
+      },
+      windowHeight(val) {
+        let that = this;
+        console.log("实时屏幕高度：", val, that.windowHeight);
       }
+
+    },
+    created() {
+      var that = this;
+      this.$nextTick(() => {
+
+        console.log(that.$refs.loginForm.offsetHeight)
+      })
+    },
+    mounted() {
+      var that = this;
+      let height = this.$refs.formBox.offsetHeight; //100
+      that.formHeight = height;
+      that.marginTop = (that.windowHeight - height*1.5) / 2;
+      // <!--把window.onresize事件挂在到mounted函数上-->
+      window.onresize = () => {
+        return (() => {
+          window.fullHeight = document.documentElement.clientHeight;
+          that.windowHeight = window.fullHeight; // 高
+        })()
+      };
     },
+
     methods: {
       showPwd() {
         if (this.passwordType === 'password') {
@@ -144,8 +175,8 @@
 
   .footer {
     position: fixed;
-    bottom: 20px;
-    text-align: center;
+    bottom: 20px;
+    text-align: center;
     width: 100%;
   }
 
@@ -227,7 +258,7 @@
       width: 520px;
       max-width: 100%;
       padding: 20px 35px 0;
-      margin: 160px auto;
+      margin: 0 auto;
       overflow: hidden;
     }