登录页，忘记密码

src/components/layouts/UserLayout.vue

@@ -1,29 +1,7 @@
 <template>
   <div id="userLayout" :class="['user-layout-wrapper',device]">
-    <div :class="!mobile ? 'container' : 'container-mobile'">
-      <div class="top" id="top" v-if="!mobile">
-        <div class="logo">
-          <img id="logo" src="~@/assets/logo.png" alt="">
-        </div>
-        <div id="company">
-          <span id="c-company">合众未来</span>
-          <span id="p-company">HEZHONGWEILAI</span>
-        </div>
-      </div>
-      <div v-if="mobile">
-        <span class="top-bg"><img src="~/@assets/mobileBg.png" alt=""></span>
-        <span class="btm-bg"><img src="~/@assets/mobileHome.png" alt=""></span>
-      </div>
-      <div v-if="mobile" class="mobile">
-        <div class="logo">
-          <img src="~@/assets/logo.png" alt="">
-        </div>
-        <div class="company">
-          <span>合众未来</span>
-          <span>HEZHONGWEILAI</span>
-        </div>
-      </div>
-      <div class="illustration" v-if="!mobile">
+    <div class="container">
+      <div class="illustration">
         <img src="@/assets/home.png" alt="">
       </div>
       <route-view></route-view>
@@ -40,9 +18,7 @@
     components: { RouteView },
     mixins: [mixinDevice],
     data () {
-      return {
-        mobile:isMobile() //是否是mobile
-      }
+      return {}
     },
     mounted () {
       document.body.classList.add('userLayout')
@@ -51,158 +27,27 @@
       document.body.classList.remove('userLayout')
     },
   }
-  // 判断当前设备
-  function isMobile() {
-    var userAgentInfo = navigator.userAgent;
-
-    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
-
-    var mobile_flag = false;
-
-    //根据userAgent判断是否是手机
-    for (var v = 0; v < mobileAgents.length; v++) {
-      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
-        mobile_flag = true;
-        break;
-      }
-    }
-    var screen_width = window.screen.width;
-    var screen_height = window.screen.height;
-
-    //根据屏幕分辨率判断是否是手机
-    if (screen_width < 500 && screen_height < 800) {
-      mobile_flag = true;
-    }
-    return mobile_flag;
-  }
 </script>
 <style lang="less" >
   #userLayout.user-layout-wrapper{
     height: 100%;
-    background: #4daaff;
+    background: #fff;
     overflow: auto;
     .container {
       width: 100%;
-      min-width: 770px;
-      min-height: 500px;
+      min-width: 1366px;
+      min-height: 768px;
       height: 100%;
+      overflow: hidden;
       position: relative;
-      .top {
-        position: absolute;
-        left: 2%;
-        top: 3%;
-        min-width: 100px;
-        max-height: 50px;
-        z-index: 9;
-        .logo {
-          width: 100%;
-          display: flex;
-          align-items: center;
-          position: absolute;
-          overflow: hidden;
-          img {
-            display: block;
-            max-width: 100%;
-            min-height: 30px;
-          }
-        }
-        #company {
-          position: absolute;
-          max-height: 62px;
-          left: 5.5rem;
-          min-height: 61px;
-          color: #000;
-          white-space: nowrap;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-          span {
-            display: block;
-            &:first-child {
-              font-size: 1.8rem;
-              font-weight: 700;
-              letter-spacing: 0.3rem;
-            }
-            &:last-child {
-              font-size: 0.9rem;
-              line-height: 0.9rem;
-              letter-spacing: 0.06rem;
-              font-weight: 700;
-            }
-          }
-        }
-      }
 
       .illustration{
         position: absolute;
-        max-width: 50%;
         max-height: 100%;
         height: 100%;
-        min-width: 400px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+        min-width: 50%;
         img{
-          max-width: 70%;
-        }
-      }
-    }
-    .container-mobile{
-      /*移动端的logo样式*/
-      .top-bg{
-        width: 100%;
-        position: absolute;
-        top: -3.5rem;
-        img{
-          width: 100%;
-        }
-      }
-      .btm-bg{
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        max-width: 75%;
-        overflow: hidden;
-        img{
-          margin-left: -5rem;
-          max-width: 100%;
-          margin-bottom: -3rem;
-        }
-      }
-      background: #f0f2f5;
-      width: 100%;
-      height: 100%;
-      .mobile{
-        position: absolute;
-        top: 6rem;
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        .logo{
-          max-width: 4rem;
-          img{
-            max-width: 100%;
-            margin-bottom: 0.5rem;
-          }
-        }
-        .company{
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-          span:first-child{
-            color: #000;
-            font-size: 1.6rem;
-            font-weight: bold;
-            letter-spacing: 0.3rem;
-          }
-          span:last-child{
-            color: #000;
-            font-size: 0.8rem;
-            line-height: 1.2rem;
-            font-weight: bold;
-          }
+          height: 100%;
         }
       }
     }