首页修改

src/views/system/login/page.vue

@@ -1,14 +1,14 @@
 <template>
     <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="">
+            <el-main class="mainclass">
+                <div class="weizhi">
                     <div class="logoTitle">
-                        <h1 class="login-title1">
+                        <!-- <h1 class="login-title1"> -->
                             <!-- <img src="../../../assets/images/login/logo.jpg" class="logoImg" />
                             金源信通 -->
-                            <img src="~@/assets/images/login/company.png" class="logo" />
-                        </h1>
+                        <img src="~@/assets/images/login/company.png" class="logo" />
+                        <!-- </h1> -->
                         <h1 class="login-title">医学实验室管理系统</h1>
                     </div>
 
@@ -18,7 +18,7 @@
                             <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" />
+                                        <ibps-icon name="wifi" class="mainWifi" />
                                     </el-button>
                                 </el-tooltip>
                             </ibps-api-base-url-controller>
@@ -28,8 +28,8 @@
                     </div>
                 </div>
             </el-main>
-            <el-footer style="width: 80%">
-                <div style="font-size: 12px; text-align: right">
+            <el-footer class="footerclass">
+                <div class="footerOutside">
                     <hr />
                     <div><i class="el-icon-s-platform" /> 深圳市金源信通科技有限公司开发</div>
                 </div>
@@ -63,43 +63,214 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-    h1{
-        margin: 0 !important;
-    }
-    .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-bg{
+        min-width: 560px;
     }
+    @media (min-width: 1200px) {
+        h1{
+            margin: 0 !important;
+        }
+        .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-top: 0px;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            padding: 10px 20px;
+            margin-left: 50px;
+            // height: 340px;
+            width: 280px;
+            background-repeat: no-repeat;
+            border-radius: 5%;
+            box-sizing: border-box;
+            
+        }
 
-    .jbd-login-page-main {
-        margin-top: 0px;
-        margin-left: 3%;
-        margin-bottom: 20px;
-        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-        padding: 10px 20px;
-        margin-left: 50px;
-        height: 340px;
-        width: 280px;
-        background-repeat: no-repeat;
-        border-radius: 5%;
-        box-sizing: border-box;
+        .login-title {
+            font-size: 52px;
+            color: #01a39e;
+            
+            // margin: 0 0 40px !important;
+        }
+        .logo {
+            width: 200px;
+            position: relative;
+            // top: 5px;
+            margin: 20px 0 20px;
+        }
+        .mainclass{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border: 0;
+            padding: 0 7.5%;
+        }
+        .footerclass{
+            width: 80%;
+        }
+        .footerOutside{
+            font-size: 12px; 
+            text-align: right;
+        }
+        .mainWifi{
+            font-size: 18px
+        }
+        .logoTitle{
+            display: flex;
+            align-items: center;
+            margin-left: 50px;
+        }
+        .weizhi{
+            position: absolute;
+            top:40%;
+            transform: translateY(-50%);
+        }
     }
 
-    .login-title {
-        font-size: 40px;
-        color: #01a39e;
-        margin: 0 0 40px !important;
+    /*在 992 和 1199 像素之间的屏幕里，中等屏幕，分辨率低的 PC*/
+    @media (min-width: 992px) and (max-width: 1199px) {
+        h1{
+            margin: 0 !important;
+        }
+        .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-top: 0px;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            padding: 10px 20px;
+            margin-left: 40px;
+            // height: 340px;
+            width: 280px;
+            background-repeat: no-repeat;
+            border-radius: 5%;
+            box-sizing: border-box;
+            
+        }
+
+        .login-title {
+            font-size: 48px;
+            color: #01a39e;
+            
+            // margin: 0 0 40px !important;
+        }
+        .logo {
+            width: 180px;
+            position: relative;
+            // top: 5px;
+            margin: 20px 0 20px;
+        }
+        .mainclass{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border: 0;
+            padding: 0 7.5%;
+        }
+        .footerclass{
+            width: 80%;
+        }
+        .footerOutside{
+            font-size: 12px; 
+            text-align: right;
+        }
+        .mainWifi{
+            font-size: 18px
+        }
+        .logoTitle{
+            display: flex;
+            align-items: center;
+            margin-left: 40px;
+        }
+        .weizhi{
+            position: absolute;
+            top:40%;
+            transform: translateY(-50%);
+        }
     }
-    .logo {
-        width: 200px;
-        position: relative;
-        top: 5px;
-        margin: 20px 0 20px;
+
+    /*在 768 和 991 像素之间的屏幕里，小屏幕，主要是 PAD*/
+    @media (max-width: 991px) {
+        h1{
+            margin: 0 !important;
+        }
+        .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-top: 0px;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+            padding: 10px 20px;
+            margin-left: 50px;
+            // height: 340px;
+            width: 280px;
+            background-repeat: no-repeat;
+            border-radius: 5%;
+            box-sizing: border-box;
+            
+        }
+
+        .login-title {
+            font-size: 42px;
+            color: #01a39e;
+            margin-bottom: 20px !important;
+        }
+        .logo {
+            width: 160px;
+            position: relative;
+            // top: 5px;
+            margin: 20px 0 20px;
+        }
+        .mainclass{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            border: 0;
+            padding: 0 7.5%;
+        }
+        .footerclass{
+            width: 80%;
+        }
+        .footerOutside{
+            font-size: 12px; 
+            text-align: right;
+        }
+        .mainWifi{
+            font-size: 18px
+        }
+        .logoTitle{
+            // display: flex;
+            // align-items: center;
+            margin-left: 50px;
+        }
+        .weizhi{
+            position: absolute;
+            top:40%;
+            transform: translateY(-50%);
+        }
     }
 </style>