Jelajahi Sumber

修改 loginUI

yuwandanmian 1 tahun lalu
induk
melakukan
50a4f9b2e1
2 mengubah file dengan 33 tambahan dan 32 penghapusan
  1. 13 15
      src/views/login/index.vue
  2. 20 17
      src/views/login/index_new.vue

+ 13 - 15
src/views/login/index.vue

@@ -1,15 +1,13 @@
 <template>
 <template>
   <div class="login-container" :style="{backgroundImage: isProd ? 'url('+ pageBg +')' : null}">
   <div class="login-container" :style="{backgroundImage: isProd ? 'url('+ pageBg +')' : null}">
-    <!-- <div class="logo">
+    <div class="logo">
       <img v-if="isProd" class="img1" src="../../assets/images/logo.png" />
       <img v-if="isProd" class="img1" src="../../assets/images/logo.png" />
       <img v-else src="../../assets/images/logo2.png" class="img2" />
       <img v-else src="../../assets/images/logo2.png" class="img2" />
-    </div> -->
+    </div>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" :class="{prod: isProd}" auto-complete="on" label-position="left">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" :class="{prod: isProd}" auto-complete="on" label-position="left">
       <div class="title-container">
       <div class="title-container">
         <h3 class="title">
         <h3 class="title">
-          <!-- <span v-if="isProd" class="title">滨州医学院烟台附属医院<br></span>
-          病案数据治理与服务平台 -->
-          滨州医学院烟台附属医院
+          病案数据治理与服务平台
         </h3>
         </h3>
       </div>
       </div>
 
 
@@ -41,7 +39,8 @@
       </el-form-item>
       </el-form-item>
 
 
       <el-button :loading="loading" type="primary" class="submit-btn" @click.native.prevent="handleLogin">登录</el-button>
       <el-button :loading="loading" type="primary" class="submit-btn" @click.native.prevent="handleLogin">登录</el-button>
-      <div class="support">技术支持: 滨州医学院烟台附属医院</div>
+      <div class="support">技术支持: 北京菁苗健康科技有限公司</div>
+
     </el-form>
     </el-form>
   </div>
   </div>
 </template>
 </template>
@@ -68,7 +67,7 @@ export default {
       }
       }
     };
     };
     return {
     return {
-      pageBg: require('../../assets/images/loginbg_new.jpg'),
+      pageBg: require('../../assets/images/loginbj.jpg'),
       loginForm: {
       loginForm: {
         username: '',
         username: '',
         password: '',
         password: '',
@@ -216,6 +215,12 @@ $cursor: #000;
 </style>
 </style>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+$bg: #fff;
+$dark_gray: #889aa4;
+$light_gray: #000;
+::v-deep .el-form-item__content {
+  line-height: 1;
+}
 .submit-btn {
 .submit-btn {
   width: 100%;
   width: 100%;
   margin-bottom: 30px;
   margin-bottom: 30px;
@@ -228,12 +233,6 @@ $cursor: #000;
   font-weight: 500;
   font-weight: 500;
   margin-bottom: 30px;
   margin-bottom: 30px;
 }
 }
-$bg: #fff;
-$dark_gray: #889aa4;
-$light_gray: #000;
-::v-deep .el-form-item__content {
-  line-height: 1;
-}
 .logo {
 .logo {
   .img1 {
   .img1 {
     padding-top: 40px;
     padding-top: 40px;
@@ -264,10 +263,9 @@ $light_gray: #000;
     padding: 35px 35px 0;
     padding: 35px 35px 0;
     border-radius: 12px;
     border-radius: 12px;
     &.prod {
     &.prod {
-      top: 50%;
+      top: 200px;
       right: 100px;
       right: 100px;
       width: 360px;
       width: 360px;
-      margin-top: -160px;
       transform: none;
       transform: none;
     }
     }
   }
   }

+ 20 - 17
src/views/login/index_old.vue → src/views/login/index_new.vue

@@ -1,9 +1,9 @@
 <template>
 <template>
   <div class="login-container" :style="{backgroundImage: isProd ? 'url('+ pageBg +')' : null}">
   <div class="login-container" :style="{backgroundImage: isProd ? 'url('+ pageBg +')' : null}">
-    <div class="logo">
+    <!-- <div class="logo">
       <img v-if="isProd" class="img1" src="../../assets/images/logo.png" />
       <img v-if="isProd" class="img1" src="../../assets/images/logo.png" />
       <img v-else src="../../assets/images/logo2.png" class="img2" />
       <img v-else src="../../assets/images/logo2.png" class="img2" />
-    </div>
+    </div> -->
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" :class="{prod: isProd}" auto-complete="on" label-position="left">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" :class="{prod: isProd}" auto-complete="on" label-position="left">
       <div class="title-container">
       <div class="title-container">
         <h3 class="title">
         <h3 class="title">
@@ -40,10 +40,9 @@
         </span>
         </span>
       </el-form-item>
       </el-form-item>
 
 
-      <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.native.prevent="handleLogin">登录</el-button>
-
+      <el-button :loading="loading" type="primary" class="submit-btn" @click.native.prevent="handleLogin">登录</el-button>
+      <div class="support">技术支持: 滨州医学院烟台附属医院</div>
     </el-form>
     </el-form>
-    <div class="msg">Copyright 北京菁苗健康科技有限公司</div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -69,7 +68,7 @@ export default {
       }
       }
     };
     };
     return {
     return {
-      pageBg: require('../../assets/images/loginbj.jpg'),
+      pageBg: require('../../assets/images/loginbg_new.jpg'),
       loginForm: {
       loginForm: {
         username: '',
         username: '',
         password: '',
         password: '',
@@ -86,7 +85,7 @@ export default {
   },
   },
   computed: {
   computed: {
     isProd() {
     isProd() {
-      return process.env.NODE_ENV !== 'production'
+      return process.env.NODE_ENV === 'production'
     }
     }
   },
   },
   watch: {
   watch: {
@@ -183,15 +182,6 @@ $cursor: #000;
     color: $cursor;
     color: $cursor;
   }
   }
 }
 }
-.msg {
-  position: fixed;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  text-align: center;
-  color: #fff;
-  font-size: 16px;
-}
 /* reset element-ui css */
 /* reset element-ui css */
 .login-container {
 .login-container {
   position: relative;
   position: relative;
@@ -226,6 +216,18 @@ $cursor: #000;
 </style>
 </style>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
+.submit-btn {
+  width: 100%;
+  margin-bottom: 30px;
+  background: rgb(1, 78, 133);
+}
+.support {
+  color: rgb(1, 78, 133);
+  font-size: 14px;
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
 $bg: #fff;
 $bg: #fff;
 $dark_gray: #889aa4;
 $dark_gray: #889aa4;
 $light_gray: #000;
 $light_gray: #000;
@@ -262,9 +264,10 @@ $light_gray: #000;
     padding: 35px 35px 0;
     padding: 35px 35px 0;
     border-radius: 12px;
     border-radius: 12px;
     &.prod {
     &.prod {
-      top: 200px;
+      top: 50%;
       right: 100px;
       right: 100px;
       width: 360px;
       width: 360px;
+      margin-top: -160px;
       transform: none;
       transform: none;
     }
     }
   }
   }