msb-mca
/
shop-pc
2.1k
2
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
merge-requests/9/head
xiaoguang 2 years ago
parent c0e1a257fb
commit c152d778ff
8 changed files with 276 additions and 29 deletions
Show Stats Download Patch File Download Diff File

4
assets/scss/global.scss
Unescape View File

@ -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;
}

6
assets/scss/util.scss
Unescape View File

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

3
layouts/module/header/HeaderInfoBar.vue
Unescape View File

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

6
layouts/module/header/index.vue
Unescape View File

@ -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;
margin: 0 auto;
@include layout-box;
background: #ffffff;
.bar-header-box__wrap {
height: 42px;

7
nuxt.config.js
Unescape View File

@ -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/],

216
package-lock.json generated
Unescape View File

@ -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",

1
package.json
Unescape View File

@ -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",

62
pages/account/index.vue
Unescape View File

@ -6,30 +6,58 @@
* @Description: file content
-->
<template>
<div class="account">
<div class="account--nav">左侧栏</div>
<nuxt-child class="account--main"/>
</div>
<div class="account">
<div class="account--nav">左侧栏</div>
<nuxt-child class="account--main" />
</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{
width: 170px;
height: 300px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 30px;
&--nav {
width: 170px;
height: 300px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 30px;
}
&--main{
flex: 1;
&--main {
flex: 1;
}
}
</style>
</style>

Write Preview
Loading…
Cancel
Save