feat: doc header bg

package.json

@@ -34,26 +34,27 @@
     "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "upload": "vue-cli-service build && node ./jd/upload.js"
   },
   "dependencies": {
     "core-js": "^3.6.5",
     "sass": "^1.27.0",
     "sass-loader": "^10.0.4",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0-0"
+    "vue-router": "^4.0.0-rc.1"
   },
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/cli-plugin-babel": "~4.5.8",
+    "@vue/cli-plugin-eslint": "~4.5.8",
+    "@vue/cli-plugin-router": "~4.5.8",
+    "@vue/cli-plugin-typescript": "~4.5.8",
+    "@vue/cli-service": "~4.5.8",
+    "@vue/compiler-sfc": "^3.0.2",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "eslint": "^6.7.2",
@@ -86,9 +87,7 @@
       "ecmaVersion": 2020
     },
     "rules": {
-      "vue/no-unused-components": "off",
-      "no-debugger": "off",
-      "no-console": "off"
+      "vue/no-unused-components": "off"
     }
   },
   "husky": {
@@ -109,4 +108,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/sites/assets/styles/variables.scss

@@ -1,15 +1,16 @@
 // doc
 $doc-default-color: #fa2c19;
 $doc-default-primary-bg: linear-gradient(
-    135deg,
-    rgba(250, 25, 44, 1) 0%,
-    rgba(250, 39, 40, 1) 45%,
-    rgba(250, 56, 31, 1) 83%,
-    rgba(250, 63, 25, 1) 100%
+  135deg,
+  rgba(250, 25, 44, 1) 0%,
+  rgba(250, 39, 40, 1) 45%,
+  rgba(250, 56, 31, 1) 83%,
+  rgba(250, 63, 25, 1) 100%
 );
 // header
 $doc-default-header-color: $white;
 $doc-header-height: 64px;
+$doc-header-bg: url('../../assets/images/header-bg.png') no-repeat;
 // nav
 $doc-default-nav-bg: $white;
 $doc-default-nav-color: $title-color;

src/sites/doc/components/Header.vue

@@ -13,7 +13,9 @@ export default defineComponent({
 <style lang="scss">
 .doc {
   &-header {
-    background: $doc-default-primary-bg;
+    background: $doc-header-bg;
+    background-size: cover;
+    background-position: center;
     height: $doc-header-height;
     line-height: $doc-header-height;
     text-align: left;