feat: add device recognition

src/App.vue

@@ -5,8 +5,16 @@
 </template>
 
 <script>
+import enquireScreen from './utils/device'
+
 export default {
-  name: 'App'
+  name: 'App',
+  created () {
+    let _this = this
+    enquireScreen(isMobile => {
+      _this.$store.commit('setting/setDevice', isMobile)
+    })
+  }
 }
 </script>
 

src/store/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import account from './modules/account'
+import setting from './modules/setting'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   modules: {
-    account
+    account,
+    setting
   }
 })

src/store/modules/setting.js

@@ -0,0 +1,11 @@
+export default {
+  namespaced: true,
+  state: {
+    isMobile: false
+  },
+  mutations: {
+    setDevice (state, isMobile) {
+      state.isMobile = isMobile
+    }
+  }
+}

src/utils/device.js

@@ -0,0 +1,15 @@
+import enquireJs from 'enquire.js'
+
+const enquireScreen = function (call) {
+  const hanlder = {
+    match: function () {
+      call && call(true)
+    },
+    unmatch: function () {
+      call && call(false)
+    }
+  }
+  enquireJs.register('only screen and (max-width: 767.99px)', hanlder)
+}
+
+export default enquireScreen

src/utils/utils.less

@@ -0,0 +1,48 @@
+.textOverflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+
+.textOverflowMulti(@line: 3, @bg: #fff) {
+  overflow: hidden;
+  position: relative;
+  line-height: 1.5em;
+  max-height: @line * 1.5em;
+  text-align: justify;
+  margin-right: -1em;
+  padding-right: 1em;
+  &:before {
+    background: @bg;
+    content: '...';
+    padding: 0 1px;
+    position: absolute;
+    right: 14px;
+    bottom: 0;
+  }
+  &:after {
+    background: white;
+    content: '';
+    margin-top: 0.2em;
+    position: absolute;
+    right: 14px;
+    width: 1em;
+    height: 1em;
+  }
+}
+
+.clearfix() {
+  zoom: 1;
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+  &:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0;
+  }
+}