登录页面

src/views/system/login/page.vue

@@ -1,40 +1,40 @@
 <template>
-    <el-container class="login-container" @keyup.enter="handleLogin">
-        <el-main style="width: 80%; height: 100%; margin-top: 60px; overflow: hidden; border: 0px">
-            <div class="login-border">
-                <div class="animated fadeIn">
-                  <h1 class="login-info-title login-title">
-                    <img src="../../../assets/images/login/logo.jpg" class="logoImg"/>
-                    深圳市罗湖医院集团
-                  </h1>
-                  <h1 class="login-info-title login-title">细胞质量检测实验室lims系统</h1>
-                </div>
+    <div class="jbd-login-page-bg">
+        <el-container class="login-container" @keyup.enter="handleLogin">
+            <el-main style="width: 100%; height: 100%; overflow: hidden;border: 0;">
+                <div class="">
+                    <div class="logoTitle">
+                        <h1 class="login-title">
+                            <img src="../../../assets/images/login/logo.jpg" class="logoImg" />
+                            深圳市罗湖医院集团
+                        </h1>
+                        <h1 class="login-title">细胞质量检测实验室lims系统</h1>
+                    </div>
 
-                <div class="login-main animated fadeIn jbd-login-page-main">
-                    <h3>
-                        <span>{{ $t('login.userLogin') }}</span>
-                        <ibps-api-base-url-controller v-if="$nodeEnv === 'development'">
-                            <el-tooltip effect="dark" :content="$t('navbar.switchEnvironment')" placement="bottom">
-                                <el-button type="text" class="ibps-fr ibps-mr-5 btn-text can-hover">
-                                    <ibps-icon name="wifi" style="font-size: 18px" />
-                                </el-button>
-                            </el-tooltip>
-                        </ibps-api-base-url-controller>
-                    </h3>
-                    <user-login />
-                    <login-bottom />
+                    <div class="jbd-login-page-main">
+                        <h3>
+                            <span>{{ $t('login.userLogin') }}</span>
+                            <ibps-api-base-url-controller v-if="$nodeEnv === 'development'">
+                                <el-tooltip effect="dark" :content="$t('navbar.switchEnvironment')" placement="bottom">
+                                    <el-button type="text" class="ibps-fr ibps-mr-5 btn-text can-hover">
+                                        <ibps-icon name="wifi" style="font-size: 18px" />
+                                    </el-button>
+                                </el-tooltip>
+                            </ibps-api-base-url-controller>
+                        </h3>
+                        <user-login />
+                        <login-bottom />
+                    </div>
                 </div>
-            </div>
-        </el-main>
-        <el-footer style="width: 80%">
-            <div style="font-size: 12px; text-align: right">
-                <hr />
-                <div>
-                    <i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发
+            </el-main>
+            <el-footer style="width: 80%">
+                <div style="font-size: 12px; text-align: right">
+                    <hr />
+                    <div><i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发</div>
                 </div>
-            </div>
-        </el-footer>
-    </el-container>
+            </el-footer>
+        </el-container>
+    </div>
 </template>
 <script>
 import '@/assets/styles/pages/login.scss'
@@ -62,8 +62,20 @@ export default {
 }
 </script>
 <style>
+.jbd-login-page-bg {
+    background-image: url('../../../assets/images/login/bgImg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 .jbd-login-page-main {
-    margin-left: 3%;
+    margin-top: 80px;
+    margin-left: 7%;
     margin-bottom: 20px;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
     padding: 30px;
@@ -73,15 +85,21 @@ export default {
     border-radius: 5%;
     box-sizing: border-box;
 }
-.login-title{
-  text-align: center;
-  font-size: 40px;
-  color: #1894d0
+
+.login-title {
+    font-size: 40px;
+    color: #01a39e;
+}
+.logoImg {
+    width: 50px;
+    height: 50px;
+    position: relative;
+    top: 10px;
 }
-.logoImg{
-  width: 50px;
-  height: 50px;
-  position: relative;
-  top: 10px;
+</style>
+
+<style scoped>
+.logoTitle {
+    margin: 30px;
 }
 </style>