From 80cceddce2781495a1c0c6a2a48a7c5783ee8bd2 Mon Sep 17 00:00:00 2001
From: soul2 <1052986332@qq.com>
Date: Mon, 3 Oct 2022 18:45:32 +0800
Subject: [PATCH] =?UTF-8?q?app-main=E5=A2=9E=E5=8A=A0=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=80=82=E9=85=8Dpadding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/navbar/index.vue | 39 ++++++++++++++++----------
 src/store/getters.js                   | 15 +++++++++-
 src/store/index.js                     |  6 ++--
 src/store/modules/screen.js            | 19 +++++++++++++
 src/views/home/index.vue               | 24 ++++++++--------
 src/views/sodemo/index.vue             | 26 ++++++++++++++---
 src/views/soui/index.vue               | 16 +++++++++--
 7 files changed, 108 insertions(+), 37 deletions(-)
 create mode 100644 src/store/modules/screen.js

diff --git a/src/layout/components/navbar/index.vue b/src/layout/components/navbar/index.vue
index f5cff5d..a04df17 100644
--- a/src/layout/components/navbar/index.vue
+++ b/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);
       }
     }
   },
diff --git a/src/store/getters.js b/src/store/getters.js
index 01c12b8..6253968 100644
--- a/src/store/getters.js
+++ b/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
diff --git a/src/store/index.js b/src/store/index.js
index 10a1375..83c6c1f 100644
--- a/src/store/index.js
+++ b/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
 })
diff --git a/src/store/modules/screen.js b/src/store/modules/screen.js
new file mode 100644
index 0000000..24f9318
--- /dev/null
+++ b/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
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index ee3b6e4..bb8b7a6 100644
--- a/src/views/home/index.vue
+++ b/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>
diff --git a/src/views/sodemo/index.vue b/src/views/sodemo/index.vue
index 0164218..3aa1bd3 100644
--- a/src/views/sodemo/index.vue
+++ b/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>
diff --git a/src/views/soui/index.vue b/src/views/soui/index.vue
index f521d8e..9c7f527 100644
--- a/src/views/soui/index.vue
+++ b/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>