Merge pull request 'app-main增加移动端适配padding' (#2) from soul2/views into develop

Reviewed-on: soul2-demo-module/cn-soul2-web#2

src/layout/components/navbar/index.vue

@@ -1,15 +1,15 @@
 <template>
   <div id="navbar">
     <el-menu
-        :default-active="activeMenu"
-        :background-color="variables.menuBg"
-        :text-color="variables.menuText"
-        :active-text-color="variables.menuActiveText"
-        :unique-opened="false"
-        :collapse-transition="false"
-        mode="horizontal"
-        :router="true"
-        :style="menuStyle"
+      :default-active="activeMenu"
+      :background-color="variables.menuBg"
+      :text-color="variables.menuText"
+      :active-text-color="variables.menuActiveText"
+      :unique-opened="false"
+      :collapse-transition="false"
+      mode="horizontal"
+      :router="true"
+      :style="screenPadding"
     >
       <el-col :xs="menuItemSize.xs" :sm="menuItemSize.sm" :md="menuItemSize.md" :lg="menuItemSize.lg"
               :xl="menuItemSize.xl"
@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     ...mapGetters([
-      'routes'
+      'routes',
     ]),
     menuItemSize() {
       return {
@@ -53,11 +53,18 @@ export default {
         xl: 2
       }
     },
-    menuStyle() {
+    screenPadding() {
       if (this.screenWidth >= 600) {
-        return {
-          paddingLeft: '15%',
-          paddingRight: '15%'
+        if (this.screenWidth >= 1000) {
+          return {
+            paddingLeft: '15%',
+            paddingRight: '15%'
+          }
+        } else {
+          return {
+            paddingLeft: '5%',
+            paddingRight: '5%'
+          }
         }
       } else {
         return {}
@@ -79,6 +86,7 @@ export default {
   mounted() {
     window.onresize = () => {
       this.screenWidth = document.body.clientWidth
+      this.$store.commit('screen/UPDATE_SCREEN_WIDTH', document.body.clientWidth)
     }
     // console.log('routes -> ', this.routes)
   },
@@ -88,11 +96,12 @@ export default {
       if (!this.timer) {
         // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
         this.screenWidth = newValue;
+        this.$store.commit('screen/UPDATE_SCREEN_WIDTH', newValue)
         this.timer = true;
         setTimeout(() => {
           //console.log(this.screenWidth);
           this.timer = false;
-        }, 400);
+        }, 1250);
       }
     }
   },

src/store/getters.js

@@ -1,5 +1,18 @@
 const getters = {
-  routes: state => state.menu.routes
+  routes: state => state.menu.routes,
+  screenWidth: state => state.screen.screenWidth,
+  screenPadding: state => {
+    let width = state.screen.screenWidth
+    if (width >= 600) {
+      if (width >= 1000) {
+        return {paddingLeft: '15%', paddingRight: '15%'}
+      } else {
+        return {paddingLeft: '5%', paddingRight: '5%'}
+      }
+    } else {
+      return {}
+    }
+  }
 }
 
 export default getters

src/store/index.js

@@ -1,13 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from "@/store/getters";
-import menu from "@/store/modules/menu"
+import menu from "@/store/modules/menu";
+import screen from "@/store/modules/screen";
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
-    menu
+    menu,
+    screen
   },
   getters
 })

src/store/modules/screen.js

@@ -0,0 +1,19 @@
+const state = {
+  screenWidth: document.body.clientWidth
+}
+
+const mutations = {
+  UPDATE_SCREEN_WIDTH(state, value) {
+    state.screenWidth = value
+    console.log('run update screen width')
+  }
+}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}

src/views/home/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div id="home">
+  <div id="home" :style="screenPadding">
     <!--    这是一个首页 <br>-->
     <!--    如你所见，它现在还什么都没有，但马上就会有了。 <br>-->
     <!--    By Soul2-->
     <el-card shadow="always">
-      <el-collapse :accordion="accordion" v-model="expand" style="text-align: left">
+      <el-collapse :accordion="false" v-model="expand" style="text-align: left">
         <el-collapse-item name="openShow">
           <template slot="title">
             关于灵魂演示
@@ -59,7 +59,7 @@
               </el-link>
               一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
             </p>
-            <div style="margin-top: 7px;">
+            <div id="dl-btn">
               <el-button size="mini" class="el-icon-position"
                          @click="goto('https://wow8.org/soul-demo/')"
               >
@@ -104,13 +104,18 @@
 
 <script>
 
+import {mapGetters} from "vuex";
+
 export default {
   name: "Home",
   components: {},
   computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
     expand() {
       return ['openShow', 'soui']
-    }
+    },
   },
   methods: {
     goto(where) {
@@ -121,14 +126,7 @@ export default {
 </script>
 
 <style scoped>
-@import "~@/style/layout/index.scss";
-
-#home {
-  padding-left: 15%;
-  padding-right: 15%;
-}
-
-a {
-
+#dl-btn .el-button {
+  margin-top: 7px;
 }
 </style>

src/views/sodemo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="so-demo" style="padding: 0 15%;">
+  <div id="so-demo" :style="screenPadding">
     <el-card shadow="always">
       <div slot="header">
         关于灵魂演示
@@ -50,7 +50,7 @@
           </el-link>
           一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。
         </p>
-        <div style="margin-top: 7px;">
+        <div id="goto-btn">
           <el-button size="mini" class="el-icon-position"
                      @click="goto('https://wow8.org/soul-demo/')"
           >
@@ -92,11 +92,29 @@
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
-  name: "SoDemo"
+  name: "SoDemo",
+  computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+#goto-btn {
+  text-align: left;
+}
 
+#goto-btn .el-button {
+  margin-top: 7px;
+}
 </style>

src/views/soui/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="soui" style="text-align: left;padding: 0 15%;">
+  <div id="soui" style="text-align: left;" :style="screenPadding">
     <el-card shadow="always">
       <div class="title" slot="header" style="text-align: center">
         关于SoUI
@@ -45,8 +45,20 @@
 </template>
 
 <script>
+import {mapGetters} from "vuex";
+
 export default {
-  name: "SoUi"
+  name: "SoUi",
+  computed: {
+    ...mapGetters([
+      "screenPadding"
+    ]),
+  },
+  methods: {
+    goto(where) {
+      location.href = where
+    }
+  }
 }
 </script>