update

src/pages/prp/components/layout.vue

 <template>
-  <div class="login-page">
+  <div class="login-page" :class="classes">
     <div class="login-box">
-      <div class="login-mian">
+      <div class="login-header">
+        <div class="inner">中国银行保险报培训项目</div>
+      </div>
+      <div class="login-main">
+        <div class="title"><img src="../assets/login_title.png" width="100%" /></div>
         <div class="login-modules">
           <router-view></router-view>
         </div>
       </div>
     </div>
-    <footer class="footer">
-      <span>Copyright © 2021 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</span>
-      <a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/">京ICP证150431号</a>
-      <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681">
-        <img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />安备11010802023681号
-      </a>
-      <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a>
-    </footer>
   </div>
 </template>
 
@@ -26,7 +22,17 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      isMobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
+    }
+  },
+  computed: {
+    classes() {
+      return {
+        'is-pc': !this.isMobile,
+        'is-mobile': this.isMobile
+      }
+    }
   }
 }
 </script>
@@ -43,27 +49,52 @@ export default {
 }
 .login-page {
   position: relative;
+  min-height: 100vh;
+  background: #142564 url('../assets/login_bg.png') no-repeat center top;
+  background-size: cover;
   color: #fff;
 }
-.login-box {
-  height: 100vh;
-  background: #142564 url('../assets/login-bg.png') no-repeat center top;
-  background-size: 100% 100%;
-  .login-mian {
-    // position: relative;
-    // width: 1400px;
-    height: 100%;
-    margin: 0 auto;
+.login-header {
+  height: 80px;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 80px;
+  background: rgba(55, 86, 154, 0.5);
+}
+.inner {
+  max-width: 80%;
+  margin: 0 auto;
+}
+.title {
+  flex: 1;
+}
+.login-main {
+  max-width: 80%;
+  min-height: calc(100vh - 80px);
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-modules {
+  flex: 0 0 340px;
+}
 
-    .login-modules {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      right: 8%;
-      width: 340px;
-    }
+@media (max-width: 768px) {
+  .login-header {
+    text-align: center;
+  }
+  .title {
+    padding: 40px 0;
+  }
+  .login-main {
+    display: block;
+    max-width: none;
+    margin: 0 20px;
+    padding-bottom: 20px;
   }
 }
+
 .footer {
   position: absolute;
   bottom: 0;