[update] 移动端登录

src/components/layouts/UserLayout.vue

@@ -2,30 +2,7 @@
   <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">-->
-<!--        <img src="@/assets/home.png" alt="">-->
-<!--      </div>-->
       <route-view></route-view>
     </div>
   </div>

src/utils/util.js

@@ -602,3 +602,28 @@ export function evil (fn) {
   const Fn = Function // 一个变量指向Function，防止有些前端编译工具报错
   return new Fn('return ' + fn)()
 }
+
+// 判断当前设备
+export function isMobile () {
+  const userAgentInfo = navigator.userAgent
+
+  const mobileAgents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
+
+  let mobileFlag = false
+
+  // 根据userAgent判断是否是手机
+  for (let v = 0; v < mobileAgents.length; v++) {
+    if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
+      mobileFlag = true
+      break
+    }
+  }
+  const screenWidth = window.screen.width
+  const screenHeight = window.screen.height
+
+  // 根据屏幕分辨率判断是否是手机
+  if (screenWidth < 500 && screenHeight < 800) {
+    mobileFlag = true
+  }
+  return mobileFlag
+}

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -269,7 +269,7 @@ export default {
             dataIndex: 'action',
             scopedSlots: { customRender: 'action' },
             align: 'center',
-            width: '20%'
+            width: 120
           }
         ],
         dataSource: [],
@@ -645,9 +645,4 @@ export default {
     }
   }
 }
-@media screen and (max-width: 1367px) {
-  .device-table/deep/.ant-table.ant-table-fixed-header .ant-table-scroll .ant-table-header {
-    margin-right: -2px;
-  }
-}
 </style>

src/views/user/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div class="main" :class="{ 'main-mobile': mobile }">
     <a-form v-if="!mobile" :form="form" class="user-layout-login" ref="formLogin" id="formLogin">
       <div class="user-box">
         <div class="login-header">账号登录</div>
@@ -16,7 +16,7 @@
                   size="large"
                   v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
                   type="text"
-                  placeholder="请输入帐号">
+                  placeholder="请输入账号">
                 </a-input>
               </a-form-item>
             </a-col>
@@ -66,6 +66,54 @@
         </div>
       </div>
     </a-form>
+    <a-form v-else :form="form" class="user-layout-login-mobile">
+      <div class="system-title">
+        <img :src="require('@assets/images/system-title.png')" alt="昆鸿设备管理系统">
+      </div>
+      <a-row class="login-form">
+        <a-col :span="24">
+          <a-form-item>
+            <a-input
+              size="large"
+              v-decorator="['username',{initialValue:'', rules: validatorRules.username.rules,validateTrigger: 'blur'}]"
+              type="text"
+              placeholder="请输入账号">
+              <img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/account.png')" alt="账号"/>
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24">
+          <a-form-item>
+            <a-input
+              v-decorator="['password',{initialValue:'', rules: validatorRules.password.rules,validateTrigger: 'blur'}]"
+              size="large"
+              :type="passwordType"
+              autocomplete="false"
+              placeholder="请输入密码"
+            >
+              <img slot="prefix" class="prefix-icon" :src="require('@assets/images/icon/password.png')" alt="密码"/>
+              <a-icon title="显示密码" @click="passwordType='text'" slot="suffix" v-if="passwordType==='password'" type="eye" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+              <a-icon title="隐藏密码" @click="passwordType='password'" slot="suffix" v-else type="eye-invisible" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>
+              <!--                <a-icon slot="prefix" type="lock" :style="{ color: '#B3B7C2',fontSize:'20px' }"/>-->
+            </a-input>
+          </a-form-item>
+        </a-col>
+        <a-col :span="24" class="login-btn">
+          <a-form-item>
+            <a-button
+              block
+              size="large"
+              type="primary"
+              htmlType="submit"
+              :loading="loginBtn"
+              @click.stop.prevent="handleSubmit"
+              :disabled="loginBtn">
+              {{ loginBtn ? "登录中" : "登录" }}
+            </a-button>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
   </div>
 </template>
 <script>
@@ -222,7 +270,12 @@ export default {
       })
     },
     loginSuccess () {
-      this.$router.push({ path: '/' }).catch((/* res */) => {})
+      // pc端跳转根路径，移动端跳转移动端路径
+      if (this.mobile) {
+        this.$router.push({ path: '/mobile' }).catch((/* res */) => {})
+      } else {
+        this.$router.push({ path: '/' }).catch((/* res */) => {})
+      }
       this.$notification.success({
         message: '欢迎',
         description: `${timeFix()}，欢迎回来`
@@ -316,12 +369,15 @@ function isMobile () {
   .ant-row{
     margin-bottom: 4%;
   }
-  .main{
-    height: 100%;
-    overflow: hidden;
+  // pc端背景
+  .main:not(.main-mobile) {
     background: #001125 url("~@/assets/mobile-login-bg.png") no-repeat;
     background-position: left top;
-    background-size: 50%;
+  }
+  .main{
+    height: 100%;
+    background-color: #001125;
+    overflow: hidden;
 
     .user-layout-login {
       position: absolute;
@@ -483,20 +539,65 @@ function isMobile () {
       }
     }
 
-    .user-layout-login-mobile{
-      right: 0;
-      width: 100%;
-      min-width: 0 !important;
-      height: 46% !important;
-      background: transparent;
-      min-height: 0;
-      padding: 0 2rem 0 2rem;
-      position: absolute;
-      top: 50%;
-      margin-top: 6rem;
-      transform: translateY(-50%);
-      .ant-row{
-        margin-bottom: 0;
+    .user-layout-login-mobile {
+      position: relative;
+      height: 100vh;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        display: block;
+        width: 100%;
+        height: 4.8rem;
+        background: url("~@/assets/mobile-login-bg.png") no-repeat;
+        background-position-y: -0.88rem;
+        background-size: cover;
+      }
+
+      .system-title {
+        user-select: none;
+        position: absolute;
+        left: 50%;
+        top: 4rem;
+        width: 3.84rem;
+        transform: translateX(-50%);
+
+        img {
+          width: 100%;
+        }
+      }
+
+      // 移动端登录表单样式
+      .login-form {
+        padding: 5.62rem 0.48rem 0;
+
+        /deep/.ant-input-affix-wrapper .ant-input-prefix {
+          left: 0;
+          .prefix-icon {
+            width: .48rem;
+          }
+        }
+        /deep/.ant-input {
+          border: none;
+          border-radius: 0;
+          background: none !important;
+          border-bottom: 0.02rem solid rgba(0,148,255,0.4);
+          box-shadow: none;
+          height: .96rem;
+          padding-left: .72rem;
+          font-family: PingFang SC, PingFang SC, sans-serif;
+          font-weight: 400;
+          font-size: 0.32rem;
+          line-height: 0.48rem;
+        }
+        .login-btn {
+          .ant-btn {
+            background: url("~@assets/images/login-btn.png") no-repeat;
+            background-size: 100% 100%;
+            height: 0.96rem;
+          }
+        }
       }
     }
   }