手机登入页面样式开发

app.html

@@ -26,6 +26,24 @@
       s.parentNode.insertBefore(hm, s);
       var cnzz_protocol = (("https:" == d.location.protocol) ? " https://" : " http://");
       d.write(unescape("%3Cspan id='cnzz_stat_icon_1267002346'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1267002346%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));
+      // 手机端识别
+      if (/(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(w.navigator.userAgent)) {
+        var docEl = d.documentElement
+        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+        var recalc = function () {
+          var clientWidth = docEl.clientWidth
+          if (!clientWidth) return
+          if (clientWidth >= 750) {
+            docEl.style.fontSize = '100px'
+          } else {
+            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px'
+          }
+        }
+//        recalc()
+        if (!d.addEventListener) return
+        w.addEventListener(resizeEvt, recalc, false)
+        d.addEventListener('DOMContentLoaded', recalc, false)
+      }
     })(window, document)
   </script>
   <script type="text/javascript">

assets/scss/mobileCommon.scss

@@ -0,0 +1,9 @@
+.mobile{
+  padding:0 30px;
+  height:100vh;
+  background: #eaeaea;
+  color:#333;
+}
+.page-part{
+  margin-bottom:.4rem;
+}

components/mobile/headerMobile.vue

@@ -0,0 +1,35 @@
+<template>
+<div class="header">
+  <h3>账户中心</h3>
+</div>
+</template>
+
+<script>
+  export default {
+    name: 'loginMobile'
+  }
+</script>
+
+<style scoped type="text/scss" lang="scss">
+.header{
+  text-align: center;
+  line-height: 1.7rem;
+  h3{
+    margin:0;
+    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;
+    }
+  }
+}
+</style>

components/mobile/index.js

@@ -0,0 +1,4 @@
+import LoginMobile from './loginMobile'
+import HeaderMobile from './headerMobile'
+
+export { LoginMobile, HeaderMobile }

components/mobile/loginMobile.vue

@@ -0,0 +1,47 @@
+<template>
+<div class="login">
+  <div class="page-part">
+    <mt-field placeholder="账号" v-model="username"></mt-field>
+  </div>
+  <div class="page-part">
+    <mt-field placeholder="密码" v-model="password"></mt-field>
+  </div>
+  <div class="page-part">
+    <mt-button size="large" type="primary">登录</mt-button>
+  </div>
+  <div class="login-btn">
+    <p>还没有优软云账号？</p>
+    <mt-button size="large" plain type="primary">立即注册</mt-button>
+  </div>
+</div>
+</template>
+
+<script>
+  export default {
+    name: 'loginMobile',
+    data () {
+      return {
+        username: '',
+        password: ''
+      }
+    }
+  }
+</script>
+
+<style type="text/scss" lang="scss">
+  .mint-button .mint-button-text{
+    margin: 0;
+    font-weight: normal;
+  }
+.login-btn{
+  margin-top:.9rem;
+  border-top:1px solid #bfbfbf;
+  text-align: center;
+  padding-top:.3rem;
+  p{
+    color:#a1a1a1;
+    font-size: .26rem;
+    margin-bottom:.4rem;
+  }
+}
+</style>

layouts/mobile.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="mobile">
+    <nuxt/>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'mobile',
+    head () {
+      return {
+        meta: [
+          { name: 'apple-mobile-web-app-capable', content: 'yes' },
+          { name: 'MobileOptimized', content: '320' },
+          { name: 'HandheldFriendly', content: 'true' },
+          { name: 'viewport', content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no' },
+          { 'http-equiv': 'Cache-Control', content: 'no-siteapp' },
+          { name: 'format-detection', content: 'telephone=no, email=no' }
+        ]
+      }
+    }
+  }
+</script>
+
+<style lang="scss" type="text/scss">
+  @import "~assets/scss/mobileCommon";
+</style>

nuxt.config.js

@@ -55,6 +55,7 @@ module.exports = {
     vendor: [
       'axios',
       'element-ui',
+      'mint-ui',
       'vuerify',
       'vee-validate'
     ],
@@ -83,6 +84,8 @@ module.exports = {
     src: '~plugins/axios.js'
   }, {
     src: '~plugins/element-ui.js'
+  }, {
+    src: '~plugins/mint-ui.js'
   }, {
     src: '~plugins/filters.js',
     ssr: false

package.json

@@ -15,6 +15,7 @@
     "font-awesome": "^4.7.0",
     "http-proxy-middleware": "^0.17.4",
     "jsonp": "^0.2.1",
+    "mint-ui": "^2.2.13",
     "nuxt": "0.10.6",
     "v-vuerify-next": "^0.2.0",
     "vee-validate": "^2.0.0",

pages/index.vue

@@ -1,14 +1,30 @@
 <template>
   <div>
-    <login/>
+    <template v-if="isMobile">
+      <header-mobile/>
+      <login-mobile/>
+    </template>
+    <template v-else>
+      <login/>
+    </template>
   </div>
 </template>
 <script>
   import {Login} from '~components/login'
+  import {LoginMobile, HeaderMobile} from '~components/mobile'
   export default {
-    layout: 'loginDefault',
+    layout (context) {
+      return context.store.state.option.isMobile ? 'mobile' : 'loginDefault'
+    },
     components: {
-      Login
+      Login,
+      LoginMobile,
+      HeaderMobile
+    },
+    computed: {
+      isMobile () {
+        return this.$store.state.option.isMobile
+      }
     }
   }
 </script>

plugins/mint-ui.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import MintUI from 'mint-ui'
+import 'mint-ui/lib/style.css'
+Vue.use(MintUI)

store/index.js

@@ -6,7 +6,7 @@ export const actions = {
   nuxtServerInit (store, { params, route, isDev, isServer, req }) {
     // 检查设备类型
     const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
-    const isMobile = /(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
+    const isMobile = /(iPhone|iPad|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
     const cookie = isServer ? req.headers['cookie'] : null
     store.commit('option/SET_MOBILE_LAYOUT', isMobile)
     store.commit('option/SET_USER_AGENT', userAgent)

yarn.lock

@@ -145,9 +145,9 @@ arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
 
-array-find-index@^1.0.1:
+array-find-index@^1.0.1, array-find-index@^1.0.2:
   version "1.0.2"
-  resolved "http://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
 
 array-flatten@1.1.1:
   version "1.1.1"
@@ -3742,6 +3742,14 @@ minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "http://registry.npm.taobao.org/minimist/download/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
+mint-ui@^2.2.13:
+  version "2.2.13"
+  resolved "https://registry.yarnpkg.com/mint-ui/-/mint-ui-2.2.13.tgz#856a2cba9608c6ecf21f0e521ce89ed8ddfe33d3"
+  dependencies:
+    array-find-index "^1.0.2"
+    raf.js "0.0.4"
+    vue-lazyload "^1.0.1"
+
 mixin-deep@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.0.tgz#47a8732ba97799457c8c1eca28f95132d7e8150a"
@@ -4724,6 +4732,10 @@ querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "http://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
+raf.js@0.0.4:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/raf.js/-/raf.js-0.0.4.tgz#f15af445d241b27fa7131a57450b67ef9c402fec"
+
 randomatic@^1.1.3:
   version "1.1.7"
   resolved "http://registry.npm.taobao.org/randomatic/download/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -5875,6 +5887,10 @@ vue-i18n@^7.3.4:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.4.0.tgz#bd96cee90b3074e3f43e7347639e6fad0b45b6ae"
 
+vue-lazyload@^1.0.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.1.4.tgz#94dbb3fcb047f147f37900c0e22ad4fd478e31c4"
+
 vue-loader@^11.3.4:
   version "11.3.4"
   resolved "http://registry.npm.taobao.org/vue-loader/download/vue-loader-11.3.4.tgz#65e10a44ce092d906e14bbc72981dec99eb090d2"