初始化card插件

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "web_sh_audit",
   "version": "0.1.0",
-  "lockfileVersion": 2,
+  "lockfileVersion": 1,
   "requires": true,
   "packages": {
     "": {
@@ -11541,8 +11541,7 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -11605,6 +11604,29 @@
         "webpack-merge": "^5.7.3",
         "webpack-virtual-modules": "^0.4.2",
         "whatwg-fetch": "^3.6.2"
+      },
+      "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        }
       }
     },
     "@vue/cli-shared-utils": {
@@ -11754,27 +11776,6 @@
         }
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        }
-      }
-    },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
@@ -11959,8 +11960,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -12019,8 +12019,7 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ansi-escapes": {
       "version": "3.2.0",
@@ -12762,6 +12761,15 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.14.1"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "9.1.0",
       "resolved": "https://registry.npmmirror.com/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
@@ -12847,8 +12855,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-loader": {
       "version": "6.7.2",
@@ -13019,8 +13026,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "csso": {
       "version": "4.2.0",
@@ -13387,6 +13393,16 @@
       "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
       "dev": true
     },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmmirror.com/error-ex/-/error-ex-1.3.2.tgz",
@@ -14084,8 +14100,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -14099,6 +14114,13 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14230,6 +14252,12 @@
       "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
       "dev": true
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -14387,6 +14415,53 @@
         "launch-editor": "^2.6.0"
       }
     },
+    "less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-11.1.0.tgz",
+      "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4"
+      }
+    },
     "lilconfig": {
       "version": "2.0.6",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.0.6.tgz",
@@ -14876,6 +14951,40 @@
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
+    "needle": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.1.0.tgz",
+      "integrity": "sha512-gCE9weDhjVGCRqS8dwDR/D3GTAeyXLXuqp7I8EzH6DllZGXSUyxuqqLh+YX9rMAWaaTFyVAg6rHGL25dqvczKw==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz",
@@ -15211,6 +15320,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-5.1.1.tgz",
@@ -15297,6 +15412,13 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -15374,29 +15496,25 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -15486,8 +15604,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -15522,8 +15639,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -15720,6 +15836,13 @@
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -16021,6 +16144,13 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "dev": true,
+      "optional": true
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -16375,15 +16505,6 @@
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "dev": true
     },
-    "string_decoder": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
-      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.2.0"
-      }
-    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
@@ -16395,6 +16516,15 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -16872,8 +17002,7 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
-      "requires": {}
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
     },
     "watchpack": {
       "version": "2.4.0",
@@ -17172,8 +17301,7 @@
           "version": "8.11.0",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.11.0.tgz",
           "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         }
       }
     },
@@ -17294,8 +17422,7 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",

package.json

@@ -21,6 +21,8 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
     "vue-template-compiler": "^2.6.14"
   },
   "browserslist": [

src/components/layout/MenuCard.vue

@@ -0,0 +1,243 @@
+<template>
+  <!-- 外边框 -->
+  <div
+    class="menuMainBox"
+    :style="{
+      width: boxWidth ? boxWidth + 'px' : '410px',
+      height: boxHeight + 'px',
+      border: type !== 'chart' ? '' : '1px solid #2FB8FF',
+      background: boxBackground ? boxBackground : ''
+    }"
+  >
+    <!-- 头部 -->
+    <div class="menuMainBox_top" v-if="type !== 'chart'">
+      <!-- 头部左侧 -->
+      <div class="menuMainBox_top_left">
+        <!-- 左侧箭头图标 -->
+        <div class="menuMainBox_top_left_iconS"></div>
+        <!-- 标题 -->
+        <div class="menuMainBox_top_left_title">{{ title }}</div>
+        <!-- 右侧倾斜图标1 -->
+        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE1"></div>
+        <!-- 右侧倾斜图标2 -->
+        <div class="menuMainBox_top_left_iconE menuMainBox_top_left_iconE2"></div>
+      </div>
+      <!-- 头部右侧 -->
+      <div class="menuMainBox_top_right">
+        <!-- 方块1 -->
+        <div class="menuMainBox_top_right_d1"></div>
+        <!-- 方块2 -->
+        <div class="menuMainBox_top_right_d2"></div>
+      </div>
+      <!-- 右上角三个点 -->
+      <div class="menuMainBox_top_topRight">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+    <!-- 折线 -->
+    <div class="menuMainBox_topBottom" v-if="type !== 'chart'">
+      <!-- 圆球 -->
+      <div></div>
+    </div>
+    <div class="menuMainBox_topChart" v-if="type === 'chart'">
+      <div class="menuMainBox_topChart_title">
+        {{ title }}
+      </div>
+    </div>
+    <!-- 主题 -->
+    <div>
+      <!-- 上部 -->
+      <div></div>
+      <!-- 下部 -->
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "menuCard",
+  components: {},
+  data() {
+    return {};
+  },
+  mounted() {},
+  /**
+   * type: 类型【card:卡片;chart:echart组件】,默认为card（非必填）
+   * title: 标题（必填）
+   * boxWidth: 宽，默认为410px（非必填）
+   * boxHeight: 高，默认为auto（非必填）
+   * boxBackground: 背景色，默认为渐变蓝色（非必填）
+   */
+  props: ["type", "title", "boxWidth", "boxHeight", "boxBackground"],
+  methods: {},
+  watch: {}
+};
+</script>
+
+<style lang="less" scoped>
+.menuMainBox {
+  position: relative;
+  margin: 5px 0;
+  border: 2px solid transparent;
+  border-image: --webkit-linear-gradient(to top, #00aaff, transparent) 1;
+  border-image: --moz-linear-gradient(to top, #00aaff, transparent) 1;
+  border-image: linear-gradient(to top, #00aaff, transparent) 1;
+  background-image: --webkit-linear-gradient(to top, #002f56, #0a1026);
+  background-image: --moz-linear-gradient(to top, #002f56, #0a1026);
+  background-image: linear-gradient(to top, #002f56, #0a1026);
+  //   type !== chart
+  &_top {
+    position: relative;
+    width: 100%;
+    height: 10%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    align-content: center;
+    overflow: hidden;
+    background-color: #002f56;
+    &_left {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      align-content: center;
+      width: 50%;
+      height: 100%;
+      background-image: --webkit-linear-gradient(to left, #002f56, #00aaff, #002f56);
+      background-image: --moz-linear-gradient(to left, #002f56, #00aaff, #002f56);
+      background-image: linear-gradient(to left, #002f56, #00aaff, #002f56);
+      border-bottom: 2px solid #00aaff;
+      &_iconS {
+        margin: 10px;
+        width: 20px;
+        height: 20px;
+        background-image: linear-gradient(to top, #00447c, #17c6d7);
+        clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%, 0 0);
+      }
+      &_title {
+        // color: #fff;
+        // font-weight: bold;
+        // text-shadow: 1px 1px 2px #0a1026;
+        // font-size: 20px;
+        // letter-spacing: 5px;
+        font-size: 28px;
+        font-family: YouSheBiaoTiHei;
+        font-weight: 400;
+        color: #ffffff;
+      }
+      &_iconE {
+        position: absolute;
+        margin-left: 10px;
+        width: 15px;
+        height: 30px;
+        background-image: linear-gradient(to bottom, transparent, transparent, #17c6d7);
+        transform: skew(-45deg);
+      }
+      &_iconE1 {
+        right: 30px;
+      }
+      &_iconE2 {
+        right: 10px;
+      }
+    }
+    &_right {
+      position: absolute;
+      right: -10%;
+      width: 60%;
+      height: 100%;
+      border-top: 2px solid #00aaff;
+      border-left: 2px solid #00aaff;
+      transform: skew(-45deg);
+      background-color: #0a1026;
+      border-image: --webkit-linear-gradient(to right, #00aaff, transparent) 1;
+      border-image: --moz-linear-gradient(to right, #00aaff, transparent) 1;
+      border-image: linear-gradient(to right, #00aaff, transparent) 1;
+      &_d1 {
+        position: absolute;
+        left: 10px;
+        width: 50px;
+        height: 20px;
+        background-color: #00aaff64;
+      }
+      &_d2 {
+        position: absolute;
+        left: 70px;
+        width: 80px;
+        height: 10px;
+        background-color: #00aaff32;
+      }
+    }
+    &_topRight {
+      position: absolute;
+      top: 0;
+      right: 0;
+      display: flex;
+      div:nth-child(1) {
+        width: 5px;
+        height: 2px;
+        background-color: #00aaff;
+      }
+      div:nth-child(2) {
+        margin: 0 1px;
+        width: 5px;
+        height: 2px;
+        background-color: #f19b56;
+      }
+      div:nth-child(3) {
+        width: 5px;
+        height: 2px;
+        background-color: #00aaff;
+      }
+    }
+  }
+  &_topBottom {
+    position: absolute;
+    margin-top: 4px;
+    top: 5%;
+    left: 10%;
+    width: 38%;
+    height: 5%;
+    border-bottom: 2px solid #00aaff;
+    border-right: 2px solid #00aaff;
+    transform: skew(-45deg);
+    border-image: --webkit-linear-gradient(to left, #00aaff, transparent) 1;
+    border-image: --moz-linear-gradient(to left, #00aaff, transparent) 1;
+    border-image: linear-gradient(to left, #00aaff, transparent) 1;
+    div {
+      position: absolute;
+      top: -2px;
+      right: -2px;
+      width: 4px;
+      height: 4px;
+      border-radius: 4px;
+      background-color: #00aaff;
+      transform: skew(45deg);
+    }
+  }
+  //   type === chart
+  &_topChart {
+    width: 100%;
+    height: 30px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-content: center;
+    background-image: --webkit-linear-gradient(to left, #002f56, #00aaff, #002f56);
+    background-image: --moz-linear-gradient(to left, #002f56, #00aaff, #002f56);
+    background-image: linear-gradient(to left, #002f56, #00aaff, #002f56);
+    &_title {
+      font-size: 18px;
+      font-family: PingFang SC;
+      font-weight: 300;
+      color: #e6e6e6;
+      line-height: 60px;
+    }
+  }
+}
+</style>

src/views/HomeView.vue

@@ -2,33 +2,107 @@
   <div id="LayoutContent">
     <MapHolder></MapHolder>
     <Header @navSelect="navSelect"></Header>
+    <!-- 左侧菜单列 -->
+    <div id="leftMenus">
+      <MenuCard :type="menus.left[0].type" :title="menus.left[0].title" :boxHeight="menus.left[0].height"></MenuCard>
+      <MenuCard :type="menus.left[1].type" :title="menus.left[1].title" :boxHeight="menus.left[1].height"></MenuCard>
+      <MenuCard :type="menus.left[2].type" :title="menus.left[2].title" :boxHeight="menus.left[2].height"></MenuCard>
+    </div>
+    <!-- 中部菜单列 -->
+    <div id="mainMenus">
+      <div id="mainMenus_topRight">
+        <MenuCard
+          :type="menus.main[0].type"
+          :title="menus.main[0].title"
+          :boxWidth="menus.main[0].width"
+          :boxHeight="menus.main[0].height"
+          :boxBackground="menus.main[0].background"
+        ></MenuCard>
+      </div>
+    </div>
+    <!-- 右侧菜单列 -->
+    <div id="rightMenus">
+      <MenuCard :type="menus.right[0].type" :title="menus.right[0].title" :boxHeight="menus.right[0].height"></MenuCard>
+      <MenuCard :type="menus.right[1].type" :title="menus.right[1].title" :boxHeight="menus.right[1].height"></MenuCard>
+      <MenuCard :type="menus.right[2].type" :title="menus.right[2].title" :boxHeight="menus.right[2].height"></MenuCard>
+    </div>
   </div>
 </template>
 <script>
-import MapHolder from '@/components/map/MapHolder.vue'
-import Header from '@/components/layout/Header.vue'
+import MapHolder from "@/components/map/MapHolder.vue";
+import Header from "@/components/layout/Header.vue";
+import MenuCard from "@/components/layout/MenuCard";
 export default {
-  name: 'HomeView',
-  components:{
+  name: "HomeView",
+  components: {
     MapHolder,
-    Header
+    Header,
+    MenuCard
   },
-  data(){
+  data() {
     return {
-      activeIndex:1
-    }
+      testTitle: "土地资源",
+      activeIndex: 1,
+      menus: {
+        left: [
+          { type: "menu", title: "土地资源", height: "380" },
+          { type: "menu", title: "水资源", height: "300" },
+          { type: "menu", title: "林地资源", height: "280" }
+        ],
+        main: [{ type: "chart", title: "浦东新区自然资源分布TOP10", width: "360", height: "370" ,background : "rgba(0,39,77,0.6)"}],
+        right: [
+          { type: "menu", title: "资金投入情况", height: "380" },
+          { type: "menu", title: "资源环境项目", height: "300" },
+          { type: "menu", title: "历年频发问题TOP5", height: "280" }
+        ]
+      }
+    };
   },
-  methods:{
-    navSelect:function(data){
+  methods: {
+    navSelect: function (data) {
       console.log(data);
     }
   }
-}
+};
 </script>
-<style scoped>
-#LayoutContent{
+<style lang="less" scoped>
+#LayoutContent {
   position: relative;
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
+}
+/* 左侧菜单列 */
+#leftMenus {
+  position: absolute;
+  left: 10px;
+  top: 60px;
+  width: 410px;
+  height: calc(100% - 60px);
+  z-index: 999999;
+  box-sizing: border-box;
+}
+#mainMenus {
+  position: absolute;
+  left: 430px;
+  top: 60px;
+  width: calc(100% - 850px);
+  height: calc(100% - 60px);
+  box-sizing: border-box;
+  &_topRight {
+    position: absolute;
+    right: 10px;
+    top: 30px;
+    z-index: 999999;
+  }
+}
+#rightMenus {
+  position: absolute;
+  right: 10px;
+  top: 60px;
+  width: 410px;
+  height: calc(100% - 60px);
+  z-index: 999999;
+  box-sizing: border-box;
 }
 </style>