修改

package-lock.json

@@ -25,6 +25,7 @@
         "path-browserify": "^1.0.1",
         "path-to-regexp": "^6.2.1",
         "pinia": "^2.1.7",
+        "postcss-px2rem": "^0.3.0",
         "universal-cookie": "^7.1.0",
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.1",
@@ -1828,7 +1829,6 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true,
       "bin": {
         "atob": "bin/atob.js"
       },
@@ -1849,8 +1849,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/base": {
       "version": "0.11.2",
@@ -1916,7 +1915,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -2165,8 +2163,7 @@
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "node_modules/cookie": {
       "version": "0.6.0",
@@ -2222,6 +2219,17 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
@@ -2394,7 +2402,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
       "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10"
       }
@@ -3139,6 +3146,11 @@
         "type": "^2.7.2"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "node_modules/extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -3361,8 +3373,7 @@
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
@@ -3413,7 +3424,6 @@
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
       "deprecated": "Glob versions prior to v9 are no longer supported",
-      "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -3472,7 +3482,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^2.0.0"
       },
@@ -3484,7 +3493,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
       "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3703,7 +3711,6 @@
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
       "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
-      "dev": true,
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -3712,8 +3719,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/is-accessor-descriptor": {
       "version": "1.0.1",
@@ -3953,8 +3959,7 @@
     "node_modules/js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -4313,7 +4318,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -4528,6 +4532,12 @@
       "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.4.2.tgz",
       "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw=="
     },
+    "node_modules/natives": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/natives/-/natives-1.1.6.tgz",
+      "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA==",
+      "deprecated": "This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x."
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -4703,7 +4713,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -4827,7 +4836,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
       "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4987,6 +4995,114 @@
         "postcss": ">4 <9"
       }
     },
+    "node_modules/postcss-px2rem": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/postcss-px2rem/-/postcss-px2rem-0.3.0.tgz",
+      "integrity": "sha512-ACZRimmOEDma0L/sI5ENREY3BoYB4LNME9iM9VcZU2t598OB9KLEPDYX8JBohNsvwJ+Nvlvk3IcGm0bRqOBC/Q==",
+      "dependencies": {
+        "postcss": "^5.0.0",
+        "px2rem": "~0.5.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/chalk/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/has-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-1.0.0.tgz",
+      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/postcss": {
+      "version": "5.2.18",
+      "resolved": "https://registry.npmmirror.com/postcss/-/postcss-5.2.18.tgz",
+      "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+      "dependencies": {
+        "chalk": "^1.1.3",
+        "js-base64": "^2.1.9",
+        "source-map": "^0.5.6",
+        "supports-color": "^3.2.3"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-px2rem/node_modules/supports-color": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-3.2.3.tgz",
+      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
+      "dependencies": {
+        "has-flag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.0.16",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
@@ -5129,6 +5245,154 @@
         "node": ">=6"
       }
     },
+    "node_modules/px2rem": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/px2rem/-/px2rem-0.5.0.tgz",
+      "integrity": "sha512-R+LQj3Evbjbpmglo7D0PBVsnAbKP4WSvZEZUnF8RGIpWkIHFeAT+BlDOxxBxKVyMDecmfv9qdzNLTZLMq32osA==",
+      "dependencies": {
+        "chalk": "~0.5.1",
+        "commander": "~2.6.0",
+        "css": "~2.2.0",
+        "extend": "~3.0.0",
+        "fs-extra": "~0.16.3"
+      },
+      "bin": {
+        "px2rem": "bin/px2rem.js"
+      }
+    },
+    "node_modules/px2rem/node_modules/ansi-regex": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-0.2.1.tgz",
+      "integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/ansi-styles": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-1.1.0.tgz",
+      "integrity": "sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/chalk": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmmirror.com/chalk/-/chalk-0.5.1.tgz",
+      "integrity": "sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==",
+      "dependencies": {
+        "ansi-styles": "^1.1.0",
+        "escape-string-regexp": "^1.0.0",
+        "has-ansi": "^0.1.0",
+        "strip-ansi": "^0.3.0",
+        "supports-color": "^0.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/commander": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/commander/-/commander-2.6.0.tgz",
+      "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg==",
+      "engines": {
+        "node": ">= 0.6.x"
+      }
+    },
+    "node_modules/px2rem/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/fs-extra": {
+      "version": "0.16.5",
+      "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-0.16.5.tgz",
+      "integrity": "sha512-yb7ti8kVH+qboUQWYxUuOPj/qcMUA6lO68ErZoPQOTP+7qroCIN/1gZ1lLk/rs2p0gPFzrvPYujKGnHTu+HHxA==",
+      "dependencies": {
+        "graceful-fs": "^3.0.5",
+        "jsonfile": "^2.0.0",
+        "rimraf": "^2.2.8"
+      }
+    },
+    "node_modules/px2rem/node_modules/graceful-fs": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-3.0.12.tgz",
+      "integrity": "sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==",
+      "dependencies": {
+        "natives": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/has-ansi": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmmirror.com/has-ansi/-/has-ansi-0.1.0.tgz",
+      "integrity": "sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==",
+      "dependencies": {
+        "ansi-regex": "^0.2.0"
+      },
+      "bin": {
+        "has-ansi": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/jsonfile": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-2.4.0.tgz",
+      "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/px2rem/node_modules/jsonfile/node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "optional": true
+    },
+    "node_modules/px2rem/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "deprecated": "Rimraf versions prior to v4 are no longer supported",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/px2rem/node_modules/strip-ansi": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-0.3.0.tgz",
+      "integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==",
+      "dependencies": {
+        "ansi-regex": "^0.2.1"
+      },
+      "bin": {
+        "strip-ansi": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/px2rem/node_modules/supports-color": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-0.2.0.tgz",
+      "integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA==",
+      "bin": {
+        "supports-color": "cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-4.3.4.tgz",
@@ -5305,8 +5569,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/resolve-url/-/resolve-url-0.2.1.tgz",
       "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
-      "deprecated": "https://github.com/lydell/resolve-url#deprecated",
-      "dev": true
+      "deprecated": "https://github.com/lydell/resolve-url#deprecated"
     },
     "node_modules/ret": {
       "version": "0.1.15",
@@ -5722,7 +5985,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5740,7 +6002,6 @@
       "resolved": "https://registry.npmmirror.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
       "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
       "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-      "dev": true,
       "dependencies": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
@@ -5753,8 +6014,7 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/source-map-url/-/source-map-url-0.4.1.tgz",
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
-      "deprecated": "See https://github.com/lydell/source-map-url#deprecated",
-      "dev": true
+      "deprecated": "See https://github.com/lydell/source-map-url#deprecated"
     },
     "node_modules/split-string": {
       "version": "3.1.0",
@@ -6759,8 +7019,7 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/urix/-/urix-0.1.0.tgz",
       "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
-      "deprecated": "Please see https://github.com/lydell/urix#deprecated",
-      "dev": true
+      "deprecated": "Please see https://github.com/lydell/urix#deprecated"
     },
     "node_modules/use": {
       "version": "3.1.1",
@@ -7064,8 +7323,7 @@
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "node_modules/xml-name-validator": {
       "version": "4.0.0",
@@ -8227,8 +8485,7 @@
     "atob": {
       "version": "2.1.2",
       "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "dev": true
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
     "axios": {
       "version": "1.6.8",
@@ -8243,8 +8500,7 @@
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "base": {
       "version": "0.11.2",
@@ -8297,7 +8553,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -8487,8 +8742,7 @@
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
     "cookie": {
       "version": "0.6.0",
@@ -8527,6 +8781,17 @@
         "which": "^2.0.1"
       }
     },
+    "css": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmmirror.com/css/-/css-2.2.4.tgz",
+      "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.5.2",
+        "urix": "^0.1.0"
+      }
+    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmmirror.com/css-select/-/css-select-4.3.0.tgz",
@@ -8647,8 +8912,7 @@
     "decode-uri-component": {
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-      "dev": true
+      "integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ=="
     },
     "deep-is": {
       "version": "0.1.4",
@@ -9195,6 +9459,11 @@
         "type": "^2.7.2"
       }
     },
+    "extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
     "extend-shallow": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/extend-shallow/-/extend-shallow-2.0.1.tgz",
@@ -9366,8 +9635,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
     },
     "fsevents": {
       "version": "2.3.3",
@@ -9398,7 +9666,6 @@
       "version": "7.2.3",
       "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
       "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -9442,7 +9709,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       },
@@ -9450,8 +9716,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-          "dev": true
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
         }
       }
     },
@@ -9620,7 +9885,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -9629,8 +9893,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmmirror.com/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "is-accessor-descriptor": {
       "version": "1.0.1",
@@ -9798,8 +10061,7 @@
     "js-base64": {
       "version": "2.6.4",
       "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-2.6.4.tgz",
-      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
-      "dev": true
+      "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -10089,7 +10351,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -10251,6 +10512,11 @@
       "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.4.2.tgz",
       "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw=="
     },
+    "natives": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmmirror.com/natives/-/natives-1.1.6.tgz",
+      "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -10389,7 +10655,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -10476,8 +10741,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
     },
     "path-key": {
       "version": "3.1.1",
@@ -10570,6 +10834,88 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-px2rem": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmmirror.com/postcss-px2rem/-/postcss-px2rem-0.3.0.tgz",
+      "integrity": "sha512-ACZRimmOEDma0L/sI5ENREY3BoYB4LNME9iM9VcZU2t598OB9KLEPDYX8JBohNsvwJ+Nvlvk3IcGm0bRqOBC/Q==",
+      "requires": {
+        "postcss": "^5.0.0",
+        "px2rem": "~0.5.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz",
+              "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
+            }
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+        },
+        "has-flag": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-1.0.0.tgz",
+          "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA=="
+        },
+        "postcss": {
+          "version": "5.2.18",
+          "resolved": "https://registry.npmmirror.com/postcss/-/postcss-5.2.18.tgz",
+          "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
+          "requires": {
+            "chalk": "^1.1.3",
+            "js-base64": "^2.1.9",
+            "source-map": "^0.5.6",
+            "supports-color": "^3.2.3"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "3.2.3",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-3.2.3.tgz",
+          "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
+          "requires": {
+            "has-flag": "^1.0.0"
+          }
+        }
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.16",
       "resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
@@ -10677,6 +11023,115 @@
       "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
       "dev": true
     },
+    "px2rem": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmmirror.com/px2rem/-/px2rem-0.5.0.tgz",
+      "integrity": "sha512-R+LQj3Evbjbpmglo7D0PBVsnAbKP4WSvZEZUnF8RGIpWkIHFeAT+BlDOxxBxKVyMDecmfv9qdzNLTZLMq32osA==",
+      "requires": {
+        "chalk": "~0.5.1",
+        "commander": "~2.6.0",
+        "css": "~2.2.0",
+        "extend": "~3.0.0",
+        "fs-extra": "~0.16.3"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-0.2.1.tgz",
+          "integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA=="
+        },
+        "ansi-styles": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-1.1.0.tgz",
+          "integrity": "sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA=="
+        },
+        "chalk": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-0.5.1.tgz",
+          "integrity": "sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==",
+          "requires": {
+            "ansi-styles": "^1.1.0",
+            "escape-string-regexp": "^1.0.0",
+            "has-ansi": "^0.1.0",
+            "strip-ansi": "^0.3.0",
+            "supports-color": "^0.2.0"
+          }
+        },
+        "commander": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmmirror.com/commander/-/commander-2.6.0.tgz",
+          "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg=="
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmmirror.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+        },
+        "fs-extra": {
+          "version": "0.16.5",
+          "resolved": "https://registry.npmmirror.com/fs-extra/-/fs-extra-0.16.5.tgz",
+          "integrity": "sha512-yb7ti8kVH+qboUQWYxUuOPj/qcMUA6lO68ErZoPQOTP+7qroCIN/1gZ1lLk/rs2p0gPFzrvPYujKGnHTu+HHxA==",
+          "requires": {
+            "graceful-fs": "^3.0.5",
+            "jsonfile": "^2.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "graceful-fs": {
+          "version": "3.0.12",
+          "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-3.0.12.tgz",
+          "integrity": "sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==",
+          "requires": {
+            "natives": "^1.1.3"
+          }
+        },
+        "has-ansi": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmmirror.com/has-ansi/-/has-ansi-0.1.0.tgz",
+          "integrity": "sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==",
+          "requires": {
+            "ansi-regex": "^0.2.0"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmmirror.com/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          },
+          "dependencies": {
+            "graceful-fs": {
+              "version": "4.2.11",
+              "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+              "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+              "optional": true
+            }
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "strip-ansi": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-0.3.0.tgz",
+          "integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==",
+          "requires": {
+            "ansi-regex": "^0.2.1"
+          }
+        },
+        "supports-color": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-0.2.0.tgz",
+          "integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA=="
+        }
+      }
+    },
     "query-string": {
       "version": "4.3.4",
       "resolved": "https://registry.npmmirror.com/query-string/-/query-string-4.3.4.tgz",
@@ -10801,8 +11256,7 @@
     "resolve-url": {
       "version": "0.2.1",
       "resolved": "https://registry.npmmirror.com/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
-      "dev": true
+      "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg=="
     },
     "ret": {
       "version": "0.1.15",
@@ -11102,8 +11556,7 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
     },
     "source-map-js": {
       "version": "1.2.0",
@@ -11114,7 +11567,6 @@
       "version": "0.5.3",
       "resolved": "https://registry.npmmirror.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
       "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
-      "dev": true,
       "requires": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
@@ -11126,8 +11578,7 @@
     "source-map-url": {
       "version": "0.4.1",
       "resolved": "https://registry.npmmirror.com/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
-      "dev": true
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
     },
     "split-string": {
       "version": "3.1.0",
@@ -11880,8 +12331,7 @@
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmmirror.com/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
-      "dev": true
+      "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
     },
     "use": {
       "version": "3.1.1",
@@ -12070,8 +12520,7 @@
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
     "xml-name-validator": {
       "version": "4.0.0",

package.json

@@ -28,6 +28,7 @@
     "path-browserify": "^1.0.1",
     "path-to-regexp": "^6.2.1",
     "pinia": "^2.1.7",
+    "postcss-px2rem": "^0.3.0",
     "universal-cookie": "^7.1.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",

src/App.vue

@@ -12,7 +12,7 @@ body {
   width: 1200px;
   margin: 0 auto;
 }
-.textOver {
+.textOne {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

src/components/custom/custom-layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="c-layout">
-    <div class="header" height="120px">
+    <div class="header">
       <el-col :span="24" class="header_1">
         <div class="left">
           <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
@@ -28,12 +28,12 @@
             @mouseover="handleMouseOver(index)"
             @mouseleave="handleMouseLeave(index)"
           >
-            <div>{{ item.title }}</div>
+            <span>{{ item.title }}</span>
           </div>
         </el-col>
-        <div v-if="info && info.children" class="info">
-          <el-row v-if="info.key == '3'" style="justify-content: center; margin: 10px 0 0 0">
-            <el-col :span="11" class="list_1" v-for="(item, index) in info.children" :key="index">
+        <div v-if="info && info.children">
+          <div class="info_1" v-if="info.key == '3'">
+            <el-col :span="12" class="list_1" v-for="(item, index) in info.children" :key="index">
               <div class="title">{{ item.title }}</div>
               <div class="list_1_1">
                 <div
@@ -46,8 +46,8 @@
                 </div>
               </div>
             </el-col>
-          </el-row>
-          <el-row v-else>
+          </div>
+          <div class="info_2" v-else>
             <el-col :span="24" class="list_2">
               <div
                 v-for="(item, index) in info.children"
@@ -58,14 +58,14 @@
                 {{ item.title }}
               </div>
             </el-col>
-          </el-row>
+          </div>
         </div>
       </el-col>
     </div>
     <div class="main">
       <slot></slot>
     </div>
-    <div class="footer" v-if="is_foot" height="235px">
+    <div class="footer" v-if="is_foot">
       <div class="footer_1">
         <div class="left">
           <el-image class="image" :src="footInfo.Logo" fit="fill" />
@@ -109,6 +109,7 @@ const search = async () => {
     else val.hover = false
   }
   data.value = menuList
+  console.log(window.innerWidth)
   // 基础设置
   const result = await designStore.query({})
   if ($checkRes(result)) configInfo.value = result.data[0] || {}
@@ -125,10 +126,19 @@ const selectMenu = (item, query) => {
   router.push({ path: `/${item}`, query })
 }
 const handleMouseOver = (index) => {
-  console.log(index)
+  data.value[index].hover = true
+  info.value = data.value[index]
 }
 const handleMouseLeave = (index) => {
-  console.log(index)
+  data.value[index].hover = false
+  // info.value = {}
+  const arr = data.value.every((i) => i.hover === false)
+  if (arr) {
+    for (const val of data.value) {
+      if (route.name === val.route) val.hover = true
+      else val.hover = false
+    }
+  }
 }
 </script>
 
@@ -139,6 +149,7 @@ const handleMouseLeave = (index) => {
     position: sticky;
     top: 0;
     z-index: 1000;
+    padding: 5px 0;
     background: $global-color-fff;
     .header_1 {
       display: flex;
@@ -181,41 +192,24 @@ const handleMouseLeave = (index) => {
           cursor: pointer; /* 改变鼠标样式为手形 */
         }
       }
-      .info {
-        width: 100%;
+
+      .info_1 {
         position: absolute;
-        left: 0;
-        background: #ffffff;
+        left: 2%;
+        top: 128px;
+        display: flex;
         padding: 10px 0;
+        background: $global-color-107;
+        width: 700px;
         .list_1 {
           margin: 0 10px 0 0;
-          border: #e4e4e4 1px dashed;
           .title {
             margin: 5px 0;
-            font-size: $global-font-size-18;
+            font-size: $global-font-size-20;
             font-weight: 600;
             text-align: center;
-            color: #252f49;
-          }
-          .title::before {
-            content: '';
-            position: absolute;
-            transform: translateY(-50%);
-            top: 15px;
-            margin-left: -70px;
-            width: 40px;
-            height: 1px;
-            border-bottom: 1px #252f49 solid;
-          }
-          .title::after {
-            content: '';
-            position: absolute;
-            transform: translateY(-50%);
-            top: 15px;
-            margin-left: 30px;
-            width: 40px;
-            height: 1px;
-            border-bottom: 1px #252f49 solid;
+            color: #fff;
+            cursor: pointer; /* 改变鼠标样式为手形 */
           }
           .list_1_1 {
             display: flex;
@@ -223,47 +217,47 @@ const handleMouseLeave = (index) => {
             justify-content: center;
             margin: 5px 0;
             .title1 {
-              width: 110px;
-              margin: 8px;
+              width: 120px;
+              margin: 5px;
               padding: 5px;
               text-align: center;
-              border: 1px #fff solid;
-              background-image: linear-gradient(to bottom, #f8f3ff 0%, #e0e8fe 100%);
-              border-radius: 4px;
-            }
-            .title1:hover {
-              background: #2280ff;
               color: #ffffff;
+              font-size: $global-font-size-18;
+              cursor: pointer; /* 改变鼠标样式为手形 */
             }
           }
         }
+      }
+      .info_2 {
+        position: absolute;
+        left: 69.3%;
+        top: 128px;
+        display: flex;
+        padding: 10px 0;
+        background: $global-color-107;
         .list_2 {
           display: flex;
-          flex-wrap: wrap;
-          justify-content: center;
+          flex-direction: column;
+          align-items: center;
+          width: 145px;
           margin: 5px 0;
           .title1 {
             width: 110px;
-            margin: 8px;
+            margin: 5px;
             padding: 5px;
             text-align: center;
-            border: 1px #fff solid;
-            background-image: linear-gradient(to bottom, #f8f3ff 0%, #e0e8fe 100%);
-            border-radius: 4px;
-          }
-          .title1:hover {
-            background: #2280ff;
             color: #ffffff;
+            font-size: $global-font-size-18;
+            cursor: pointer; /* 改变鼠标样式为手形 */
           }
         }
       }
     }
   }
   .main {
-    padding: 0;
   }
   .footer {
-    padding: 0;
+    padding: 0 5px 10px 5px;
     background-color: $global-color-2D2;
     color: $global-color-fff;
     font-size: $global-font-size-18;
@@ -289,10 +283,29 @@ const handleMouseLeave = (index) => {
     }
   }
 }
+@media screen and (max-width: 1280px) {
+  #c-layout {
+    min-width: 1920px;
+    margin: 0 auto;
+  }
+}
 @media screen and (min-width: 1921px) {
-  // #c-layout {
-  //   width: 1200px;
-  //   margin: 0 auto;
-  // }
+  #c-layout {
+    max-width: 1920px;
+    margin: 0 auto;
+  }
+}
+@media screen and (max-width: 1746px) {
+  #c-layout {
+    .header {
+      .header_2 {
+        .list {
+          .text {
+            font-size: $global-font-size-18;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/main.js

@@ -13,6 +13,7 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // 请求检查函数
 import { InitCheckResult } from './utils/checkResult'
 import { InitVariable } from './utils/variable'
+import './utils/rem'
 // 组件
 import globalComponents from '@/components'
 // 自动滚动

src/styles/variables.scss

@@ -23,6 +23,7 @@ $global-color-107: #1073ff;
 $global-color-2D2: #2d2d2d;
 $global-color-fff: #ffffff;
 $global-color-bbb: #bbbbbb;
+$global-color-595: #595959;
 
 /* 全局覆盖antd表格表头样式 */
 .ant-table-thead > tr > th {
@@ -91,6 +92,12 @@ $global-color-bbb: #bbbbbb;
 .el-pagination__item {
   font-size: 16px !important; /* 设置分页项（如页码、跳转按钮等）的字体大小 */
 }
+.el-select--large .el-select__wrapper {
+  font-size: 16px !important; /* 设置分页项（如页码、跳转按钮等）的字体大小 */
+}
+.el-range-editor--large .el-range-input {
+  font-size: 16px !important; /* 设置分页项（如页码、跳转按钮等）的字体大小 */
+}
 
 /* 如果需要调整页码选择器的字体大小 */
 .el-select-dropdown__item {

src/utils/rem.js

@@ -0,0 +1,16 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 14
+// 设置 rem 函数
+function setRem() {
+  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
+  const scale = document.documentElement.clientWidth / 1920
+  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 `rem`
+window.onresize = function () {
+  setRem()
+}

src/views/thr/index.vue

@@ -1,25 +1,177 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <el-image class="image" :src="list" fit="fill" />
+    </el-col>
+    <el-col :span="24" class="two">
+      <div class="w_1300">
+        <div class="tab">
+          <div class="tab_1" :class="[active == '0' ? 'active' : '']" @click="toTab('0')">
+            <span>需求中心</span>
+          </div>
+          <div class="tab_2" :class="[active == '1' ? 'active' : '']" @click="toTab('1')">
+            <span>供方中心</span>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="thr">
+      <div class="w_1300">
+        <demand v-if="active == '0'"></demand>
+        <supply v-else></supply>
+      </div>
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import list from '/images/bg-tec-list.jpg'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
+// 组件
+import demand from './parts/demand.vue'
+import supply from './parts/supply.vue'
 // 加载中
 const loading = ref(false)
+const active = ref('0')
+const $checkRes = inject('$checkRes')
+import { getCity } from '@/utils/city'
+import { DictDataStore } from '@/store/api/system/dictData'
+import { DemandStore } from '@/store/api/platform/demand'
+const demandStore = DemandStore()
+const dictDataStore = DictDataStore()
 // 路由
 const router = useRouter()
+// 字典表
+const isUseList = ref([])
+const statusList = ref([])
+const methodList = ref([])
+const urgentList = ref([])
+const fieldList = ref([])
+const cityList = ref([])
+const demandList = ref([])
+const typeList = ref([
+  { label: '不限', value: '-1' },
+  { label: '教育休闲', value: '0' },
+  { label: '包装印刷', value: '1' },
+  { label: '电气自动化', value: '2' },
+  { label: '采矿冶金', value: '3' },
+  { label: '航空航天', value: '4' },
+  { label: '海洋开发', value: '5' },
+  { label: '衣林牧业', value: '6' },
+  { label: '医药与医疗', value: '7' },
+  { label: '电子信息', value: '8' }
+])
+const plateList = ref([
+  { label: '不限', value: '-1' },
+  { label: '汽车电子及新型汽车零部件', value: '0' },
+  { label: '精细化工及天然气化工', value: '1' },
+  { label: '农产品加工及绿色食品', value: '2' },
+  { label: '光电子及智能传感器', value: '3' },
+  { label: '车规级芯片及功率半导体器件', value: '4' },
+  { label: '新能源及动力电池', value: '5' },
+  { label: '生物基新材料', value: '6' },
+  { label: '人工智能及智能机器人', value: '7' },
+  { label: '碳纤维及复合材料', value: '8' },
+  { label: '遥感卫星及航天航空技术', value: '9' },
+  { label: '精密仪器及先进装备', value: '10' },
+  { label: '生物医药及先进医疗器械', value: '11' }
+])
+// 选择
+const toTab = async (status) => {
+  active.value = status
+}
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+  await searchOther()
+})
+const searchOther = async () => {
+  let result
+  // 是否使用
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+  if ($checkRes(result)) isUseList.value = result.data
+  // 状态
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
+  // 合作方式
+  result = await dictDataStore.query({ code: 'method', is_use: '0' })
+  if ($checkRes(result)) methodList.value = result.data
+  // 需求紧急度
+  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
+  if ($checkRes(result)) urgentList.value = result.data
+  // 技术领域
+  result = await dictDataStore.query({ code: 'field', is_use: '0' })
+  if ($checkRes(result)) fieldList.value = result.data
+  // 需求状态
+  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
+  if ($checkRes(result)) demandList.value = result.data
+  // 城市
+  getCity().then(
+    (response) => (cityList.value = [{ label: '不限', value: '-1' }, ...response.address])
+  )
+}
+provide('plateList', plateList)
+provide('typeList', typeList)
+provide('cityList', cityList)
 </script>
 <style scoped lang="scss">
 .main {
+  .one {
+    height: 350px;
+  }
+  .two {
+    background: url(/images/kyw-home-aibg.jpg) no-repeat top center;
+
+    .tab {
+      display: flex;
+      justify-content: center;
+      align-items: flex-end;
+      height: 115px;
+      .tab_1 {
+        height: 64px;
+        border-radius: 10px 10px 0 0;
+        overflow: hidden;
+        margin-right: 10px !important;
+        padding: 0 50px;
+        font-size: $global-font-size-20;
+        color: #fff;
+        line-height: 64px;
+        cursor: pointer;
+        background: rgb(243, 244, 251, 0.1);
+      }
+      .tab_2 {
+        height: 64px;
+        border-radius: 10px 10px 0 0;
+        overflow: hidden;
+        padding: 0 50px;
+        font-size: $global-font-size-20;
+        line-height: 64px;
+        color: #fff;
+        cursor: pointer;
+        background: rgb(243, 244, 251, 0.1);
+      }
+      .active {
+        background-image: linear-gradient(to right, #d4e7fc 0%, #f0f6fe 100%);
+        span {
+          background-image: linear-gradient(to right, #3339c1 0%, #000 100%);
+          -webkit-background-clip: text;
+          color: transparent;
+        }
+      }
+    }
+  }
+  .thr {
+    background: url(/images/demand.png) no-repeat top center;
+    background-size: 100% 100%;
+  }
+  .w_1300 {
+    margin: 0 auto;
+    width: 1300px;
+  }
 }
 </style>

src/views/thr/parts/demand.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="demand">
+    <div class="demandOne">
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>行业</span>
+        </div>
+        <div v-if="oneShow" class="demandOneRight">
+          <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+        <div v-else class="demandOneRight">
+          <div class="label" v-for="(item, index) in plateList" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+        <div class="button">
+          <span v-if="!oneShow" @click="oneShow = true">
+            <el-icon><ArrowUp /></el-icon>
+          </span>
+          <span v-else @click="oneShow = false">
+            <el-icon><ArrowDown /></el-icon>
+          </span>
+        </div>
+      </div>
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>行业分类</span>
+        </div>
+        <div class="demandOneRight">
+          <div class="label" v-for="(item, index) in typeList" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+      <div class="demandSeacher">
+        <div class="demandOneLeft">
+          <span>所在地</span>
+        </div>
+        <div class="demandOneRight">
+          <div class="label" v-for="(item, index) in cityList.slice(0, 15)" :key="index">
+            {{ item.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="demandTwo">
+      <div class="demandTable">
+        <div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
+          {{ item.name }}
+        </div>
+        <div class="value" v-for="(item, index) in list" :key="index" :style="item.style">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+const plateList = inject('plateList')
+const typeList = inject('typeList')
+const cityList = inject('cityList')
+// 是否展开
+const oneShow = ref(false)
+const column = ref([
+  { name: '序号', style: { width: '100px' }, key: 'num' },
+  { name: '需方名称', style: { width: '220px' }, key: 'num' },
+  { name: '行业', style: { width: '160px' }, key: 'num' },
+  { name: '所在地', style: { width: '160px' }, key: 'num' },
+  { name: '投入预算', style: { width: '160px' }, key: 'num' },
+  { name: '状态', style: { width: '160px' }, key: 'num' },
+  { name: '截至日期', style: { width: '160px' }, key: 'num' },
+  { name: '操作', style: { width: '160px' }, key: 'num' }
+])
+const list = ref([])
+</script>
+<style scoped lang="scss">
+.demand {
+  padding: 10px 0;
+  .demandOne {
+    background-color: $global-color-fff;
+    .demandSeacher {
+      display: flex;
+      justify-content: center;
+      align-items: stretch;
+      position: relative;
+      border: solid 1px #e5e5e5;
+      border-bottom: 0;
+      font-size: $global-font-size-18;
+      color: #666;
+      min-height: 60px;
+      overflow: hidden;
+      .demandOneLeft {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-shrink: 0;
+        width: 110px;
+        text-align: center;
+        color: #000;
+        font-weight: bold;
+        background-color: #fafafa;
+      }
+      .demandOneRight {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 12px;
+        flex: 1;
+        border-left: solid 1px #e5e5e5;
+        background-color: #fff;
+        .label {
+          color: #313131;
+          margin-bottom: 10px;
+          padding: 8px 10px;
+          border-radius: 3px;
+          background-color: #fff;
+          border: solid 1px transparent;
+          cursor: pointer;
+        }
+        .label:first-child {
+          color: #0a58c2;
+          border: solid 1px #006dd2;
+        }
+      }
+      .button {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+  .demandTwo {
+    margin: 10px 0;
+    .demandTable {
+      display: flex;
+      justify-content: space-between;
+      color: $global-color-fff;
+      font-size: $global-font-size-20;
+      background-color: rgba(255, 255, 255, 0.1);
+      padding: 10px 0;
+      .label {
+        text-align: center;
+      }
+    }
+  }
+}
+</style>

src/views/thr/parts/supply.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="demand">供方</div>
+</template>
+<script setup></script>
+<style scoped lang="scss"></style>

src/views/two/index.vue

@@ -1,25 +1,281 @@
 <template>
-  <div class="main">
-    <el-row>
-      <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
-        <custom-layout>
-          <el-col :span="24" class="one">首页 </el-col>
-        </custom-layout>
-      </el-col>
-    </el-row>
-  </div>
+  <custom-layout class="main">
+    <el-col :span="24" class="one">
+      <div class="w_1300">
+        <div class="one_1">
+          <div class="title">需求信息</div>
+        </div>
+        <div class="one_2">
+          <div class="left">
+            <div class="left_1">
+              <div class="left_left">
+                <el-image class="image" :src="xxzl" fit="fill"></el-image>
+                <span>需求列表</span>
+              </div>
+              <div class="left_right">更多 ></div>
+            </div>
+            <div class="left_2">
+              <div class="list" v-for="(item, index) in demandList" :key="index">
+                <div class="list_1">
+                  <el-image class="image" :src="item.url" fit="fill"></el-image>
+                  <div class="box">
+                    <div class="name">{{ item.title }}</div>
+                    <div class="total">{{ item.total }} 个项目</div>
+                  </div>
+                </div>
+                <div class="list_2">
+                  <div class="list_2Left">已订阅：{{ item.follow }}</div>
+                  <div class="list_2Right">订阅</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <div>需方发布</div>
+            </div>
+            <div class="right_2">
+              <demand></demand>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-col>
+    <el-col :span="24" class="one">
+      <div class="w_1300">
+        <div class="one_1">
+          <div class="title">供方信息</div>
+        </div>
+        <div class="one_2">
+          <div class="left">
+            <div class="left_1">
+              <div class="left_left">
+                <el-image class="image" :src="xmdy" fit="fill"></el-image>
+                <span>供方列表</span>
+              </div>
+              <div class="left_right">更多 ></div>
+            </div>
+            <div class="left_2">
+              <div class="list" v-for="(item, index) in demandList" :key="index">
+                <div class="list_1">
+                  <el-image class="image" :src="item.url" fit="fill"></el-image>
+                  <div class="box">
+                    <div class="name">{{ item.title }}</div>
+                    <div class="total">{{ item.total }} 个项目</div>
+                  </div>
+                </div>
+                <div class="list_2">
+                  <div class="list_2Left">已订阅：{{ item.follow }}</div>
+                  <div class="list_2Right">订阅</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="right">
+            <div class="right_1">
+              <div>供方发布</div>
+            </div>
+            <div class="right_2">
+              <supply></supply>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-col>
+  </custom-layout>
 </template>
 
 <script setup>
+// 图片引入
+import xxzl from '/images/xxzl.png'
+import xmdy from '/images/xmdy.png'
+import url_1 from '/images/information/1.jpg'
+import url_2 from '/images/information/2.jpg'
+import url_3 from '/images/information/3.jpg'
+import url_4 from '/images/information/4.jpg'
+import url_5 from '/images/information/5.jpg'
+import url_6 from '/images/information/6.jpg'
+import url_7 from '/images/information/7.jpg'
+import url_8 from '/images/information/8.jpg'
+import url_9 from '/images/information/9.jpg'
+import url_10 from '/images/information/10.jpg'
+import url_11 from '/images/information/11.jpg'
+import url_12 from '/images/information/12.jpg'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
+// 组件
+import demand from './parts/demand.vue'
+import supply from './parts/supply.vue'
 // 加载中
 const loading = ref(false)
 // 路由
 const router = useRouter()
+
+const demandList = ref([
+  { url: url_1, title: '数字化服务', total: '231', follow: '37' },
+  { url: url_2, title: '人工智能', total: '120', follow: '62' },
+  { url: url_3, title: '自动化生产线', total: '92', follow: '53' },
+  { url: url_4, title: '高分子材料', total: '95', follow: '55' },
+  { url: url_5, title: '半导体', total: '44', follow: '53' },
+  { url: url_6, title: '太阳能', total: '23', follow: '51' },
+  { url: url_7, title: '化工', total: '78', follow: '23' },
+  { url: url_8, title: '电子元器件', total: '201', follow: '39' },
+  { url: url_9, title: '生物制药', total: '23', follow: '51' },
+  { url: url_10, title: '新能源汽车', total: '50', follow: '53' },
+  { url: url_11, title: '工业物联网', total: '101', follow: '63' },
+  { url: url_12, title: '环保', total: '144', follow: '53' }
+])
 </script>
 <style scoped lang="scss">
 .main {
+  .one {
+    margin: 0 0 10px 0;
+    padding: 10px;
+    background-image: url(/images/information.jpg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    .w_1300 {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+
+    .one_1 {
+      display: flex;
+      justify-content: center;
+      padding: 20px 0;
+      .title {
+        background-image: url(/images/sg-title.png);
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        text-align: center;
+        font-size: $global-font-size-36;
+        width: 500px;
+        line-height: 46px;
+        height: 46px;
+        color: $global-color-fff;
+      }
+    }
+    .one_2 {
+      display: flex;
+      align-items: center;
+      margin: 10px;
+      padding: 10px;
+      border-radius: 20px;
+      background-color: $global-color-fff;
+      .left {
+        padding: 10px 20px 10px 10px;
+        width: 59%;
+        border-right: 1px dashed #a6bbd8;
+        .left_1 {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          .left_left {
+            display: flex;
+            align-items: center;
+            color: $global-color-595;
+            font-size: $global-font-size-22;
+            .image {
+              margin: 10px 15px 0 0;
+            }
+            span {
+              margin: 0 0 0 5px;
+            }
+          }
+        }
+        .left_2 {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-wrap: wrap;
+          margin: 10px 0;
+          .list {
+            margin: 0 6px 10px 0;
+            padding: 5px 0;
+            width: 220px;
+            height: 145px;
+            background-color: $global-color-fff;
+            box-shadow: 0px 0px 24px 0px rgba(27, 93, 215, 0.24);
+            border-radius: 3px;
+            .list_1 {
+              position: relative;
+              margin: 0 auto;
+              width: 200px;
+              height: 100px;
+              border-radius: 3px;
+              .box {
+                position: absolute;
+                top: 17px;
+                left: 15px;
+                width: 90px;
+                .name {
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 2;
+                  height: 40px !important;
+                  line-height: 20px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  color: $global-color-fff;
+                  font-size: $global-font-size-18;
+                }
+                .total {
+                  font-size: $global-font-size-16;
+                  margin-top: 10px !important;
+                  color: $global-color-fff;
+                }
+              }
+            }
+            .list_2 {
+              font-size: $global-font-size-16;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              margin: 5px 13px 0;
+              .list_2Right {
+                display: block;
+                width: 47px;
+                height: 25px;
+                background-color: #ffffff;
+                border-radius: 3px;
+                border: solid 1px #ff5d1f;
+                line-height: 25px;
+                text-align: center;
+                font-size: 12px;
+                color: #ff5d1f;
+              }
+            }
+          }
+          .list:hover {
+            box-shadow: 0px 0px 24px 0px rgba(255, 93, 31, 0.24);
+          }
+        }
+      }
+      .right {
+        padding-left: 20px;
+        width: 41%;
+        .right_1 {
+          background: url(/images/dy-form-bg-t.png) center no-repeat;
+          background-size: 100% 100%;
+          height: 56px;
+          line-height: 56px;
+          font-size: 16px;
+          color: #fff;
+          text-align: center;
+          font-size: $global-font-size-18;
+        }
+        .right_2 {
+          background: url(/images/dy-form-bg-body.png) center no-repeat;
+          background-size: 100% 100%;
+          height: 580px;
+          padding: 10px 20px;
+          text-align: center;
+        }
+      }
+    }
+  }
 }
 </style>

src/views/two/parts/demand.vue

@@ -0,0 +1,222 @@
+<template>
+  <div class="demand">
+    <el-form ref="DemandRules" :model="form" :rules="rules" label-width="120px" class="form">
+      <el-form-item label="需求名称" prop="name">
+        <el-input size="large" clearable v-model="form.name" placeholder="请输入需求名称">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="行业领域" prop="field">
+        <el-select size="large" v-model="form.field" clearable placeholder="请选择行业领域">
+          <el-option
+            v-for="(item, index) in fieldList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="需求紧急度" prop="urgent">
+        <el-select size="large" v-model="form.urgent" clearable placeholder="请选择需求紧急度">
+          <el-option
+            v-for="(item, index) in urgentList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="合作方式" prop="method">
+        <el-select size="large" v-model="form.method" clearable placeholder="请选择合作方式">
+          <el-option
+            v-for="(item, index) in methodList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="价格(万元)" prop="money">
+        <el-input size="large" clearable v-model="form.money" placeholder="请输入价格(万元)">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="需求地区" prop="area">
+        <el-cascader
+          size="large"
+          v-model="form.area"
+          :props="{ value: 'label', label: 'label' }"
+          :options="cityList"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item label="有效期" prop="time">
+        <el-date-picker
+          size="large"
+          v-model="form.time"
+          type="daterange"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-form-item>
+
+      <el-form-item label="是否启用" prop="is_use">
+        <el-radio-group v-model="form.is_use">
+          <el-radio v-for="(item, index) in isUseList" :key="index" :value="item.value">{{
+            item.label
+          }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-row :gutter="20" align="middle">
+        <el-col :span="12">
+          <el-form-item label="上传图片" prop="file">
+            <custom-upload
+              model="file"
+              :list="form.file"
+              :limit="1"
+              url="/files/web/template_demand/upload"
+              @change="onUpload"
+            ></custom-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="上传视频" prop="video">
+            <custom-upload
+              model="video"
+              :list="form.video"
+              :limit="1"
+              url="/files/web/template_demand/upload"
+              @change="onUpload"
+            ></custom-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="简介" prop="brief">
+        <el-input
+          size="large"
+          v-model="form.brief"
+          :autosize="{ minRows: 2, maxRows: 8 }"
+          type="textarea"
+          placeholder="请输入简介"
+        />
+      </el-form-item>
+      <el-col :span="24" class="button">
+        <el-button type="primary" @click="submitForm(DemandRules)">发布</el-button>
+      </el-col>
+    </el-form>
+    <a-modal v-model:open="open" title="相关推荐" @ok="handleOk"> 是否查看相关供给推荐 </a-modal>
+  </div>
+</template>
+<script setup>
+import { cloneDeep, get } from 'lodash-es'
+const $checkRes = inject('$checkRes')
+import { getCity } from '@/utils/city'
+import { DictDataStore } from '@/store/api/system/dictData'
+import { DemandStore } from '@/store/api/platform/demand'
+const demandStore = DemandStore()
+const dictDataStore = DictDataStore()
+const form = ref({})
+const DemandRules = ref()
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 路由
+const router = useRouter()
+// 字典表
+const isUseList = ref([])
+const statusList = ref([])
+const methodList = ref([])
+const urgentList = ref([])
+const fieldList = ref([])
+const cityList = ref([])
+const demandList = ref([])
+const rules = reactive({
+  name: [{ required: true, message: '请输入需求名称', trigger: 'blur' }],
+  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
+  urgent: [{ required: true, message: '请选择需求紧急度', trigger: 'change' }],
+  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
+  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+  area: [{ required: true, message: '请选择需求地区', trigger: 'change' }],
+  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
+  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
+  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
+})
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+  await searchOther()
+})
+const searchOther = async () => {
+  let result
+  // 是否使用
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+  if ($checkRes(result)) isUseList.value = result.data
+  // 状态
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
+  // 合作方式
+  result = await dictDataStore.query({ code: 'method', is_use: '0' })
+  if ($checkRes(result)) methodList.value = result.data
+  // 需求紧急度
+  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
+  if ($checkRes(result)) urgentList.value = result.data
+  // 技术领域
+  result = await dictDataStore.query({ code: 'field', is_use: '0' })
+  if ($checkRes(result)) fieldList.value = result.data
+  // 需求状态
+  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
+  if ($checkRes(result)) demandList.value = result.data
+}
+// 上传图片
+const onUpload = (e) => {
+  const { model, value } = e
+  form.value[model] = value
+}
+// 保存
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      const other = { status: '0', user: user.value.id }
+      let res
+      if (get(data, '_id')) res = await demandStore.update({ ...data, ...other })
+      else await demandStore.create({ ...data, ...other })
+      if ($checkRes(res, true)) {
+        open.value = true
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const open = ref(false)
+const handleOk = () => {
+  const query = { type: 'search' }
+  router.push({ path: '/search', query })
+}
+</script>
+<style scoped lang="scss">
+:deep(.el-form-item) {
+  margin-bottom: 10px !important;
+}
+:deep(.el-form-item__label) {
+  margin-bottom: 10px !important;
+}
+.el-form-item__label {
+  justify-content: flex-start !important;
+  max-width: 120px !important;
+}
+.button {
+  text-align: center;
+}
+</style>

src/views/two/parts/supply.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="supply">
+    <el-form ref="SupplyRules" :model="form" :rules="rules" label-width="120px" class="form">
+      <el-form-item label="供应名称" prop="name">
+        <el-input size="large" clearable v-model="form.name" placeholder="请输入供应名称">
+        </el-input>
+      </el-form-item>
+      <el-form-item label="行业领域" prop="field">
+        <el-select size="large" v-model="form.field" clearable placeholder="请选择行业领域">
+          <el-option
+            v-for="(item, index) in fieldList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="供应紧急度" prop="urgent">
+        <el-select size="large" v-model="form.urgent" clearable placeholder="请选择供应紧急度">
+          <el-option
+            v-for="(item, index) in urgentList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="合作方式" prop="method">
+        <el-select size="large" v-model="form.method" clearable placeholder="请选择合作方式">
+          <el-option
+            v-for="(item, index) in methodList"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="价格(万元)" prop="money">
+        <el-input size="large" clearable v-model="form.money" placeholder="请输入价格(万元)">
+        </el-input>
+      </el-form-item>
+
+      <el-form-item label="供应地区" prop="area">
+        <el-cascader
+          size="large"
+          v-model="form.area"
+          :props="{ value: 'label', label: 'label' }"
+          :options="cityList"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item label="有效期" prop="time">
+        <el-date-picker
+          size="large"
+          v-model="form.time"
+          type="daterange"
+          format="YYYY-MM-DD"
+          value-format="YYYY-MM-DD"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+        />
+      </el-form-item>
+      <el-form-item label="是否启用" prop="is_use">
+        <el-radio-group v-model="form.is_use">
+          <el-radio v-for="(item, index) in isUseList" :key="index" :value="item.value">{{
+            item.label
+          }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-row :gutter="20" align="middle">
+        <el-col :span="12">
+          <el-form-item label="上传图片" prop="file">
+            <custom-upload
+              model="file"
+              :list="form.file"
+              :limit="1"
+              url="/files/web/template_demand/upload"
+              @change="onUpload"
+            ></custom-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="上传视频" prop="video">
+            <custom-upload
+              model="video"
+              :list="form.video"
+              :limit="1"
+              url="/files/web/template_demand/upload"
+              @change="onUpload"
+            ></custom-upload>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="简介" prop="brief">
+        <el-input
+          size="large"
+          v-model="form.brief"
+          :autosize="{ minRows: 2, maxRows: 8 }"
+          type="textarea"
+          placeholder="请输入简介"
+        />
+      </el-form-item>
+      <el-col :span="24" class="button">
+        <el-button type="primary" @click="submitForm(DemandRules)">发布</el-button>
+      </el-col>
+    </el-form>
+    <a-modal v-model:open="open" title="相关推荐" @ok="handleOk"> 是否查看相关需求推荐 </a-modal>
+  </div>
+</template>
+<script setup>
+import { cloneDeep, get } from 'lodash-es'
+const $checkRes = inject('$checkRes')
+import { getCity } from '@/utils/city'
+import { DictDataStore } from '@/store/api/system/dictData'
+import { SupplyStore } from '@/store/api/platform/supply'
+const supplyStore = SupplyStore()
+const dictDataStore = DictDataStore()
+const form = ref({})
+const SupplyRules = ref()
+import { UserStore } from '@/store/user'
+const userStore = UserStore()
+const user = computed(() => userStore.user)
+// 路由
+const router = useRouter()
+// 字典表
+const isUseList = ref([])
+const statusList = ref([])
+const methodList = ref([])
+const urgentList = ref([])
+const fieldList = ref([])
+const cityList = ref([])
+const demandList = ref([])
+const rules = reactive({
+  name: [{ required: true, message: '请输入供应名称', trigger: 'blur' }],
+  field: [{ required: true, message: '请选择行业领域', trigger: 'change' }],
+  // type: [{ required: true, message: '请选择类型', trigger: 'change' }],
+  urgent: [{ required: true, message: '请选择供应紧急度', trigger: 'change' }],
+  method: [{ required: true, message: '请选择合作方式', trigger: 'change' }],
+  money: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+  area: [{ required: true, message: '请选择供应地区', trigger: 'change' }],
+  time: [{ required: true, message: '请选择起始时间', trigger: 'change' }],
+  is_use: [{ required: true, message: '请选择是否使用', trigger: 'change' }],
+  brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
+})
+// 请求
+onMounted(async () => {
+  getCity().then((response) => {
+    cityList.value = response.address
+  })
+  await searchOther()
+})
+
+const searchOther = async () => {
+  let result
+  // 是否使用
+  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
+  if ($checkRes(result)) isUseList.value = result.data
+  // 状态
+  result = await dictDataStore.query({ code: 'examStatus', is_use: '0' })
+  if ($checkRes(result)) statusList.value = result.data
+  // 合作方式
+  result = await dictDataStore.query({ code: 'method', is_use: '0' })
+  if ($checkRes(result)) methodList.value = result.data
+  // 需求紧急度
+  result = await dictDataStore.query({ code: 'urgent', is_use: '0' })
+  if ($checkRes(result)) urgentList.value = result.data
+  // 技术领域
+  result = await dictDataStore.query({ code: 'field', is_use: '0' })
+  if ($checkRes(result)) fieldList.value = result.data
+  // 需求状态
+  result = await dictDataStore.query({ code: 'demandStatus', is_use: '0' })
+  if ($checkRes(result)) demandList.value = result.data
+}
+// 上传图片
+const onUpload = (e) => {
+  const { model, value } = e
+  form.value[model] = value
+}
+// 保存
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      const data = cloneDeep(form.value)
+      const other = { status: '0', user: user.value.id }
+      let res
+      if (get(data, '_id')) res = await supplyStore.update({ ...data, ...other })
+      else res = await supplyStore.create({ ...data, ...other })
+      if ($checkRes(res, true)) {
+        open.value = true
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const open = ref(false)
+const handleOk = () => {
+  const query = { type: 'search' }
+  router.push({ path: '/search', query })
+}
+</script>
+<style scoped lang="scss">
+:deep(.el-form-item) {
+  margin-bottom: 10px !important;
+}
+:deep(.el-form-item__label) {
+  margin-bottom: 10px !important;
+}
+.el-form-item__label {
+  justify-content: flex-start !important;
+  max-width: 120px !important;
+}
+.button {
+  text-align: center;
+}
+</style>

vite.config.js

@@ -8,6 +8,13 @@ import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Inspect from 'vite-plugin-inspect'
 import path from 'path'
+import px2rem from 'postcss-px2rem'
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  // remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时，它会自动转成 (14px/14)rem
+  remUnit: 14
+})
 // eslint-disable-next-line no-undef
 const pathSrc = path.resolve(__dirname, 'src')
 // https://vitejs.dev/config/
@@ -47,7 +54,16 @@ export default defineConfig(({ mode }) => {
         '@': pathSrc
       }
     },
+    lintOnSave: true,
     css: {
+      loaderOptions: {
+        less: {
+          javascriptEnabled: true
+        },
+        postcss: {
+          plugins: [postcss]
+        }
+      },
       // CSS 预处理器
       preprocessorOptions: {
         // 定义全局 SCSS 变量