feat: 安装@nuxtjs/style-resources插件，配置scss全局变量

assets/scss/global.scss

@@ -34,8 +34,4 @@ table {border-collapse: collapse; border-spacing: 0;
 a { text-decoration:none;
   color: #333;
   &:hover { text-decoration:none;}
-}
-.layout-box {
-  width: 1200px;
-  margin: 0 auto;
 }

assets/scss/util.scss

@@ -85,4 +85,10 @@ $baseFontSize: 100 !default;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+}
+
+/*内容居中布局*/
+@mixin layout-box {
+  width: 1200px;
+  margin: 0 auto;
 }

layouts/module/header/HeaderInfoBar.vue

@@ -179,8 +179,7 @@ export default {
   border-radius: 0px 0px 0px 0px;
   .info-bar-header-wrap {
     height: 100%;
-    width: 1200px;
+    @include layout-box;
-    margin: 0 auto;
     .header-wrap__content {
       .header-wrap-content__login {
         .wrap-content-login__text {

layouts/module/header/index.vue

@@ -265,9 +265,8 @@ export default {
   background: #ffffff;
   box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.10000000149011612);
   .sticky-bar-header__wrap {
-    width: 1200px;
+    @include layout-box;
     height: 100%;
-    margin: 0 auto;
     .bar-header-wrap__logo {
       width: 164px;
       height: 28px;
@@ -335,8 +334,7 @@ export default {
   position: relative;
   z-index: 3;
   .bar-header-box {
-    width: 1200px;
+    @include layout-box;
-    margin: 0 auto;
     background: #ffffff;
     .bar-header-box__wrap {
       height: 42px;

nuxt.config.js

@@ -56,9 +56,14 @@ export default {
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
     '@nuxtjs/axios',
-    'cookie-universal-nuxt'
+    'cookie-universal-nuxt',
+    '@nuxtjs/style-resources'
   ],
 
+  styleResources:  {
+    scss: '@/assets/scss/global.scss'
+  },
+
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {
     transpile: [/^element-ui/],

package-lock.json

@@ -39,6 +39,7 @@
         "@babel/helpers": "^7.17.9",
         "@babel/parser": "^7.17.10",
         "@babel/template": "^7.16.7",
+        "@babel/traverse": "^7.17.10",
         "@babel/types": "^7.17.10",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
@@ -48,7 +49,7 @@
       },
       "dependencies": {
         "@babel/traverse": {
-          "version": "7.17.9",
+          "version": "7.17.10",
           "resolved": "https://registry.npmmirror.com/@babel/traverse/-/traverse-7.17.9.tgz",
           "integrity": "sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==",
           "requires": {
@@ -2647,6 +2648,16 @@
         "http-proxy-middleware": "^1.0.6"
       }
     },
+    "@nuxtjs/style-resources": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/@nuxtjs/style-resources/-/style-resources-1.2.1.tgz",
+      "integrity": "sha512-sOp71gCBNuGK2jchybTtVab83yB7jnSr+hw6DAKDgAGX/jrMYUyxRc9tiFxe+8YDSnqghTgQrkEkqPsfS4D4sg==",
+      "requires": {
+        "consola": "^2.15.3",
+        "glob-all": "^3.2.1",
+        "sass-resources-loader": "^2.2.4"
+      }
+    },
     "@nuxtjs/youch": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/@nuxtjs/youch/-/youch-4.2.3.tgz",
@@ -3493,6 +3504,11 @@
       "resolved": "https://registry.npmmirror.com/assign-symbols/-/assign-symbols-1.0.0.tgz",
       "integrity": "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw=="
     },
+    "async": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/async/-/async-3.2.3.tgz",
+      "integrity": "sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g=="
+    },
     "async-each": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/async-each/-/async-each-1.0.3.tgz",
@@ -7087,6 +7103,148 @@
         "path-is-absolute": "^1.0.0"
       }
     },
+    "glob-all": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmmirror.com/glob-all/-/glob-all-3.3.0.tgz",
+      "integrity": "sha512-30gCh9beSb+YSAh0vsoIlBRm4bSlyMa+5nayax1EJhjwYrCohX0aDxcxvWVe3heOrJikbHgRs75Af6kPLcumew==",
+      "requires": {
+        "glob": "^7.1.2",
+        "yargs": "^15.3.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmmirror.com/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
+        "string-width": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
+          "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "yargs": {
+          "version": "15.4.1",
+          "resolved": "https://registry.npmmirror.com/yargs/-/yargs-15.4.1.tgz",
+          "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^18.1.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "18.1.3",
+          "resolved": "https://registry.npmmirror.com/yargs-parser/-/yargs-parser-18.1.3.tgz",
+          "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "glob-parent": {
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
@@ -13265,6 +13423,62 @@
         }
       }
     },
+    "sass-resources-loader": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmmirror.com/sass-resources-loader/-/sass-resources-loader-2.2.5.tgz",
+      "integrity": "sha512-po8rfETH9cOQACWxubT/1CCu77KjxwRtCDm6QAXZH99aUHBydwSoxdIjC40SGp/dcS/FkSNJl0j1VEojGZqlvQ==",
+      "requires": {
+        "async": "^3.2.3",
+        "chalk": "^4.1.0",
+        "glob": "^7.1.6",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/style-resources": "^1.2.1",
     "cookie-universal-nuxt": "^2.1.5",
     "core-js": "^3.19.3",
     "element-ui": "^2.15.8",

pages/account/index.vue

@@ -6,30 +6,58 @@
  * @Description: file content
 -->
 <template>
-	<div class="account">
+  <div class="account">
-		<div class="account--nav">左侧栏</div>
+    <div class="account--nav">左侧栏</div>
-		<nuxt-child class="account--main"/>
+    <nuxt-child class="account--main" />
-	</div>
+  </div>
 </template>
 <script>
 export default {
-	
+  name: "Account",
-}
+  data() {
+    return {
+      navTabs: [
+        {
+          label: "个人中心",
+          childrens: [
+            { label: "我的主页", value: "/home" },
+            { label: "消息通知", value: "/message" },
+          ],
+        },
+        {
+          label: "订单中心",
+          childrens: [
+            { label: "我的订单", value: "/order/lsit" },
+            { label: "售后订单", value: "/order/saleAfter" },
+          ],
+        },
+        {
+          label: "账户管理",
+          childrens: [
+            { label: "个人资料", value: "/userInfo" },
+            { label: "收货地址", value: "/address" },
+          ],
+        },
+      ],
+    };
+  },
+};
 </script>
 <style lang="scss" scoped>
-.account{
+.account {
+  @include layout-box;
   padding-top: 370px;
-  margin:  0 auto;
+  margin: 0 auto;
   display: flex;
-  &--nav{
+  &--nav {
-	  width: 170px;
+    width: 170px;
-	  height: 300px;
+    height: 300px;
-	  border: 1px solid #ddd;
+    border: 1px solid #ddd;
-	  border-radius: 4px;
+    border-radius: 4px;
-	  margin-right: 30px;
+    margin-right: 30px;
   }
-  &--main{
+  &--main {
-	  flex: 1;
+    flex: 1;
   }
 }
-</style>
+</style>