移动端logo和背景图片做适配

assets/scss/mobileCommon.scss

@@ -5,11 +5,29 @@
   opacity: 0
 }
 .mobile{
-  padding:0 15px;
-  min-height:100vh;
-  background: #eaeaea;
-  color:#333;
-  padding-top:.15rem;
+  .mobile-content {
+    color:#333;
+    min-height:100vh;
+    width: 100%;
+    background: #eaeaea;
+    .mobile-opacity {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    .mobile-opacity-active {
+      background: rgba(0,0,0,.3)
+    }
+    .login {
+      width: 100%;
+      padding:0 15px;
+    }
+  }
+  .mobile-background-null {
+    background: #eaeaea !important;
+  }
 }
 .page-part{
   margin-bottom:.4rem;
@@ -423,4 +441,3 @@
   margin-left: .1rem;
   color: #2d8cf0;
 }
-

components/mobile/headerMobile.vue

@@ -1,17 +1,24 @@
 <template>
 <div class="header">
-  <h3>账户中心</h3>
+  <h3><img :src="loginStyle.logoUrl" alt="">账户中心</h3>
 </div>
 </template>
 
 <script>
   export default {
-    name: 'headerMobile'
+    name: 'headerMobile',
+    computed: {
+      loginStyle () {
+        return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
+      }
+    }
   }
 </script>
 
 <style scoped type="text/scss" lang="scss">
 .header{
+  margin: 0 auto;
+  overflow: hidden;
   text-align: center;
   line-height: 1.5rem;
   h3{
@@ -19,17 +26,12 @@
     color:#333;
     font-weight: bold;
     font-size:.4rem;
-    &:before{
-      content: '';
-      position:relative;
-      top:-.04rem;
-      display:inline-block;
-      width:1.4rem;
-      height:.38rem;
-      background:url(/img/logo/uas.png)no-repeat center center/100% 100%;
-      vertical-align: middle;
-      margin-right:.2rem;
-    }
+  }
+  img{
+    width:1.4rem;
+    height:.38rem;
+    vertical-align: middle;
+    margin-right:.2rem;
   }
 }
 </style>

components/mobile/loginMobile.vue

@@ -1,85 +1,94 @@
 <template>
-<div class="login">
-  <!--<div v-if="loginWay === 0">-->
-  <div>
-    <div class="login-way" v-if="activeTab === 0">
-      <div class="page-part">
-        <mt-field auto-complete="off" placeholder="手机号/邮箱" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
-        <template>
-          <div class="handle">
-            <span class="fast-login" @click="activeTab = 1">短信快捷登录</span>
-            <span class="pwd" @click="forgetPwd">忘记密码？</span>
+  <div class="mobile-content"
+       v-bind:style="{background: `url(${loginStyle.bgUrlMobile}) no-repeat center center`}"
+       v-bind:class="{'mobile-background-null': !loginStyle.bgUrlMobile}">
+    <div class="mobile-opacity" v-bind:class="{'mobile-opacity-active': loginStyle.bgUrlMobile}">
+      <template>
+        <header-mobile/>
+      </template>
+      <div class="login">
+      <!--<div v-if="loginWay === 0">-->
+      <div>
+        <div class="login-way" v-if="activeTab === 0">
+          <div class="page-part">
+            <mt-field auto-complete="off" placeholder="手机号/邮箱" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
+          </div>
+          <div class="page-part">
+            <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
+            <template>
+              <div class="handle">
+                <span class="fast-login" @click="activeTab = 1">短信快捷登录</span>
+                <span class="pwd" @click="forgetPwd">忘记密码？</span>
+              </div>
+            </template>
+          </div>
+          <template v-if="showCheckCode">
+            <div class="page-part">
+              <mt-field placeholder="验证码" v-model="login.captcha">
+                <img :src="imgSrc" height="45px" width="100px" @click="getCode">
+              </mt-field>
+            </div>
+          </template>
+          <div class="page-part">
+            <mt-button size="large" type="primary" @click="checkLogin(true)">登录</mt-button>
           </div>
-        </template>
-      </div>
-      <template v-if="showCheckCode">
-        <div class="page-part">
-          <mt-field placeholder="验证码" v-model="login.captcha">
-            <img :src="imgSrc" height="45px" width="100px" @click="getCode">
-          </mt-field>
         </div>
-      </template>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="checkLogin(true)">登录</mt-button>
-      </div>
-    </div>
-    <div class="login-way" v-if="activeTab === 1">
-      <div class="page-part">
-        <mt-field auto-complete="off"
-                  placeholder="请输入手机号"
-                  v-model="fastLogin.mobile"
-                  :state="state.mobile"></mt-field>
-      </div>
-      <div class="page-part">
-        <mt-field auto-complete="off"
-                  placeholder="短信验证码"
-                  v-model="fastLogin.code">
-          <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
-        </mt-field>
-        <template>
-          <div class="handle">
-            <span class="pwd" @click="activeTab = 0">用户名密码登录</span>
+        <div class="login-way" v-if="activeTab === 1">
+          <div class="page-part">
+            <mt-field auto-complete="off"
+                      placeholder="请输入手机号"
+                      v-model="fastLogin.mobile"
+                      :state="state.mobile"></mt-field>
           </div>
-        </template>
-      </div>
-      <div class="page-part">
-        <mt-button size="large" type="primary" @click="fastToLogin(true)">登录</mt-button>
+          <div class="page-part">
+            <mt-field auto-complete="off"
+                      placeholder="短信验证码"
+                      v-model="fastLogin.code">
+              <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
+            </mt-field>
+            <template>
+              <div class="handle">
+                <span class="pwd" @click="activeTab = 0">用户名密码登录</span>
+              </div>
+            </template>
+          </div>
+          <div class="page-part">
+            <mt-button size="large" type="primary" @click="fastToLogin(true)">登录</mt-button>
+          </div>
+        </div>
+        <div class="login-btn">
+          <p>还没有优软云账号？</p>
+          <mt-button size="large" plain type="primary" @click="jump">立即注册</mt-button>
+        </div>
       </div>
-    </div>
-    <div class="login-btn">
-      <p>还没有优软云账号？</p>
-      <mt-button size="large" plain type="primary" @click="jump">立即注册</mt-button>
-    </div>
-  </div>
-  <!--<div v-if="loginWay === 1">-->
-    <!--<div class="user-info">-->
+      <!--<div v-if="loginWay === 1">-->
+      <!--<div class="user-info">-->
       <!--<div class="img"><img :src="bhImg || '/images/all/icon_mall_index.png'" alt=""></div>-->
       <!--<div class="user-name">{{bhName}}</div>-->
-    <!--</div>-->
-    <!--<div class="page-part">-->
+      <!--</div>-->
+      <!--<div class="page-part">-->
       <!--<mt-field auto-complete="off" placeholder="请输入账号" v-model="bhLogin.username"></mt-field>-->
-    <!--</div>-->
-    <!--<div class="page-part">-->
+      <!--</div>-->
+      <!--<div class="page-part">-->
       <!--<mt-field placeholder="请输入密码" v-model="bhLogin.password" type="password"></mt-field>-->
-    <!--</div>-->
-    <!--<div class="page-part">-->
+      <!--</div>-->
+      <!--<div class="page-part">-->
       <!--<mt-button size="large" type="primary" @click="bhBind">确&nbsp;&nbsp;&nbsp;定</mt-button>-->
-    <!--</div>-->
-    <!--<div class="login-btn">-->
+      <!--</div>-->
+      <!--<div class="login-btn">-->
       <!--<p>还没有优软云账号？</p>-->
       <!--<mt-button size="large" plain type="primary"><a :href="`/register/enterpriseRegistration${this.$store.state.option.fullPath}&tk=${bhToken}`" class="go">创建新账号</a></mt-button>-->
-    <!--</div>-->
-  <!--</div>-->
-  <mt-popup v-model="popupVisible" position="right" class="mint-popup" :modal="false">
-    <ul style="height:100vh;overflow-y:auto">
-      <li class="listitem itemgreen">选择您要登录的公司：</li>
-      <li v-for="item in enterprise" class="listitem" @click="selectEnterprise(false, item.id)">{{ item.name }}</li>
-    </ul>
-  </mt-popup>
-</div>
+      <!--</div>-->
+      <!--</div>-->
+      <mt-popup v-model="popupVisible" position="right" class="mint-popup" :modal="false">
+        <ul style="height:100vh;overflow-y:auto">
+          <li class="listitem itemgreen">选择您要登录的公司：</li>
+          <li v-for="item in enterprise" class="listitem" @click="selectEnterprise(false, item.id)">{{ item.name }}</li>
+        </ul>
+      </mt-popup>
+    </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -98,8 +107,12 @@
   //     }
   //   })
   // }
+  import HeaderMobile from '~components/mobile/HeaderMobile.vue'
   export default {
     name: 'loginMobile',
+    components: {
+      HeaderMobile
+    },
     data () {
       return {
         loading: false,
@@ -159,6 +172,9 @@
     computed: {
       enterprise () {
         return this.$store.state.login.chooseRegisterEnterprise.choose.data
+      },
+      loginStyle () {
+        return this.$store.state.login.loginStyle.data.content ? this.$store.state.login.loginStyle.data.content : ''
       }
     },
     methods: {

pages/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <template v-if="isMobile">
-      <header-mobile/>
       <login-mobile/>
     </template>
     <template v-else>
@@ -11,7 +10,7 @@
 </template>
 <script>
   import {Login} from '~components/login'
-  import {LoginMobile, HeaderMobile} from '~components/mobile'
+  import {LoginMobile} from '~components/mobile'
   export default {
     layout (context) {
       return context.store.state.option.isMobile ? 'mobile' : 'isCityFooter'
@@ -21,8 +20,7 @@
     },
     components: {
       Login,
-      LoginMobile,
-      HeaderMobile
+      LoginMobile
     },
     computed: {
       isMobile () {

store/index.js

@@ -126,7 +126,7 @@ export const actions = {
       .then(response => {
         commit('login/REQUEST_LOGIN_STYLE_SUCCESS', response.data)
       }, err => {
-        commit('login/GET_LOGIN_STYLE_FAILURE', err)
+        commit('login/REQUEST_LOGIN_STYLE_FAILURE', err)
       })
   },
   // 获取协议