修改

package-lock.json

@@ -13,7 +13,9 @@
         "@vueuse/integrations": "^10.9.0",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "5.1.10",
+        "ant-design-vue": "^4.0.8",
         "axios": "^1.6.7",
+        "dayjs": "^1.11.10",
         "element-plus": "^2.5.6",
         "lodash-es": "^4.17.21",
         "moment": "^2.30.1",
@@ -24,7 +26,8 @@
         "universal-cookie": "^7.1.0",
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.1",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue3-seamless-scroll": "^2.0.1"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -51,6 +54,31 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "dependencies": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
+    },
+    "node_modules/@ant-design/icons-vue": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
+      "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1"
+      },
+      "peerDependencies": {
+        "vue": ">=3.0.3"
+      }
+    },
     "node_modules/@antfu/install-pkg": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.3.1.tgz",
@@ -104,6 +132,16 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1005,6 +1043,15 @@
       "integrity": "sha512-AAWymnpvHbGty1BmgbdfbqQDboXs6xN6h2yAacO4yKVyyUUBnpYkp+P9jjPrV9zrAGw7JVVriRtGOHPInnfjZQ==",
       "dev": true
     },
+    "node_modules/@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
+      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
+      "dependencies": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "node_modules/@transloadit/prettier-bytes": {
       "version": "0.0.7",
       "resolved": "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",
@@ -1605,6 +1652,41 @@
         "node": ">=8"
       }
     },
+    "node_modules/ant-design-vue": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.1.2.tgz",
+      "integrity": "sha512-ynFkDJLlHgumeK6Hr1UZ7PvQNZ1uBcri/pmejBdS3kRqHeA5VRsxneYDwa8YxA+uYB5YfT2jpYsSHsiMiCjRGg==",
+      "dependencies": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-vue": "^7.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
+        "dayjs": "^1.10.5",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -1651,6 +1733,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "node_modules/array-unique": {
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/array-unique/-/array-unique-0.3.2.tgz",
@@ -2025,6 +2112,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.36.1.tgz",
+      "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA==",
+      "hasInstallScript": true
+    },
     "node_modules/cors": {
       "version": "2.8.5",
       "resolved": "https://registry.npmmirror.com/cors/-/cors-2.8.5.tgz",
@@ -2274,6 +2367,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
+    },
+    "node_modules/dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
+    },
     "node_modules/dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -3621,6 +3724,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -3818,6 +3926,17 @@
       "resolved": "https://registry.npmmirror.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
       "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -4154,6 +4273,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nanopop": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.4.2.tgz",
+      "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw=="
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -4831,6 +4955,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
@@ -5040,6 +5169,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5431,6 +5565,11 @@
         "acorn": "^8.10.0"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -5728,6 +5867,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -6431,6 +6578,44 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
+      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
+      "dependencies": {
+        "is-plain-object": "3.0.1"
+      },
+      "engines": {
+        "node": ">=10.15.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-types/node_modules/is-plain-object": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
+      "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "dependencies": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -6504,6 +6689,28 @@
       "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
       "dev": true
     },
+    "@ant-design/colors": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@ant-design/colors/-/colors-6.0.0.tgz",
+      "integrity": "sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
+    },
+    "@ant-design/icons-vue": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons-vue/-/icons-vue-7.0.1.tgz",
+      "integrity": "sha512-eCqY2unfZK6Fe02AwFlDHLfoyEFreP6rBwAZMIJ1LugmfMiVgwWDYlp1YsRugaPtICYOabV1iWxXdP12u9U43Q==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-svg": "^4.2.1"
+      }
+    },
     "@antfu/install-pkg": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/@antfu/install-pkg/-/install-pkg-0.3.1.tgz",
@@ -6543,6 +6750,16 @@
       "integrity": "sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==",
       "requires": {}
     },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -7077,6 +7294,15 @@
       "integrity": "sha512-AAWymnpvHbGty1BmgbdfbqQDboXs6xN6h2yAacO4yKVyyUUBnpYkp+P9jjPrV9zrAGw7JVVriRtGOHPInnfjZQ==",
       "dev": true
     },
+    "@simonwep/pickr": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmmirror.com/@simonwep/pickr/-/pickr-1.8.2.tgz",
+      "integrity": "sha512-/l5w8BIkrpP6n1xsetx9MWPWlU6OblN5YgZZphxan0Tq4BByTCETL6lyIeY8lagalS2Nbt4F2W034KHLIiunKA==",
+      "requires": {
+        "core-js": "^3.15.1",
+        "nanopop": "^2.1.0"
+      }
+    },
     "@transloadit/prettier-bytes": {
       "version": "0.0.7",
       "resolved": "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",
@@ -7487,6 +7713,35 @@
         "color-convert": "^2.0.1"
       }
     },
+    "ant-design-vue": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmmirror.com/ant-design-vue/-/ant-design-vue-4.1.2.tgz",
+      "integrity": "sha512-ynFkDJLlHgumeK6Hr1UZ7PvQNZ1uBcri/pmejBdS3kRqHeA5VRsxneYDwa8YxA+uYB5YfT2jpYsSHsiMiCjRGg==",
+      "requires": {
+        "@ant-design/colors": "^6.0.0",
+        "@ant-design/icons-vue": "^7.0.0",
+        "@babel/runtime": "^7.10.5",
+        "@ctrl/tinycolor": "^3.5.0",
+        "@emotion/hash": "^0.9.0",
+        "@emotion/unitless": "^0.8.0",
+        "@simonwep/pickr": "~1.8.0",
+        "array-tree-filter": "^2.1.0",
+        "async-validator": "^4.0.0",
+        "csstype": "^3.1.1",
+        "dayjs": "^1.10.5",
+        "dom-align": "^1.12.1",
+        "dom-scroll-into-view": "^2.0.0",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.15",
+        "resize-observer-polyfill": "^1.5.1",
+        "scroll-into-view-if-needed": "^2.2.25",
+        "shallow-equal": "^1.0.0",
+        "stylis": "^4.1.3",
+        "throttle-debounce": "^5.0.0",
+        "vue-types": "^3.0.0",
+        "warning": "^4.0.0"
+      }
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
@@ -7521,6 +7776,11 @@
       "integrity": "sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==",
       "dev": true
     },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "array-unique": {
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/array-unique/-/array-unique-0.3.2.tgz",
@@ -7820,6 +8080,11 @@
       "integrity": "sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==",
       "dev": true
     },
+    "core-js": {
+      "version": "3.36.1",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.36.1.tgz",
+      "integrity": "sha512-BTvUrwxVBezj5SZ3f10ImnX2oRByMxql3EimVqMysepbC9EeMUOpLwdy6Eoili2x6E4kf+ZUB5k/+Jv55alPfA=="
+    },
     "cors": {
       "version": "2.8.5",
       "resolved": "https://registry.npmmirror.com/cors/-/cors-2.8.5.tgz",
@@ -8015,6 +8280,16 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmmirror.com/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
+    },
+    "dom-scroll-into-view": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/dom-scroll-into-view/-/dom-scroll-into-view-2.0.1.tgz",
+      "integrity": "sha512-bvVTQe1lfaUr1oFzZX80ce9KLDlZ3iU+XGNE/bz9HnGdklTieqsbmsLHe+rT2XWqopvL0PckkYqN7ksmm5pe3w=="
+    },
     "dom-serializer": {
       "version": "0.2.2",
       "resolved": "https://registry.npmmirror.com/dom-serializer/-/dom-serializer-0.2.2.tgz",
@@ -9079,6 +9354,11 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
     "js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmmirror.com/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -9249,6 +9529,14 @@
       "resolved": "https://registry.npmmirror.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
       "integrity": "sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw=="
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmmirror.com/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -9511,6 +9799,11 @@
         }
       }
     },
+    "nanopop": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmmirror.com/nanopop/-/nanopop-2.4.2.tgz",
+      "integrity": "sha512-NzOgmMQ+elxxHeIha+OG/Pv3Oc3p4RU2aBhwWwAqDpXrdTbtRylbRLQztLy8dMMwfl6pclznBdfUhccEn9ZIzw=="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -10036,6 +10329,11 @@
       "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.8.tgz",
@@ -10197,6 +10495,11 @@
         }
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10511,6 +10814,11 @@
         "acorn": "^8.10.0"
       }
     },
+    "stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmmirror.com/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@@ -10748,6 +11056,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -11250,6 +11563,37 @@
         "@vue/devtools-api": "^6.5.1"
       }
     },
+    "vue-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmmirror.com/vue-types/-/vue-types-3.0.2.tgz",
+      "integrity": "sha512-IwUC0Aq2zwaXqy74h4WCvFCUtoV0iSWr0snWnE9TnU18S66GAQyqQbRf2qfJtUuiFsBf6qp0MEwdonlwznlcrw==",
+      "requires": {
+        "is-plain-object": "3.0.1"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmmirror.com/is-plain-object/-/is-plain-object-3.0.1.tgz",
+          "integrity": "sha512-Xnpx182SBMrr/aBik8y+GuR4U1L9FqMSojwDQwPMmxyC6bvEqly9UBCxhauBF5vNh2gwWJNX6oDV7O+OM4z34g=="
+        }
+      }
+    },
+    "vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "requires": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -13,10 +13,12 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.7.2",
+    "@vueuse/integrations": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
-    "@vueuse/integrations": "^10.9.0",
+    "ant-design-vue": "^4.0.8",
     "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "element-plus": "^2.5.6",
     "lodash-es": "^4.17.21",
     "moment": "^2.30.1",
@@ -27,7 +29,8 @@
     "universal-cookie": "^7.1.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/layout/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div class="common-layout">
+    <div class="top">
+      <el-row :gutter="20" align="middle">
+        <el-col :span="9" class="top_1">
+          <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
+          <div class="content">
+            <text class="title">{{ siteInfo.zhTitle }}</text>
+            <text class="english">{{ siteInfo.zhBrief }}</text>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <a-tabs v-model:activeKey="current" size="large" @tabClick="selectMenu">
+            <a-tab-pane v-for="item in menuList" :key="item.href" :tab="item.title"> </a-tab-pane>
+          </a-tabs>
+        </el-col>
+        <el-col :span="3">
+          <el-row :gutter="20">
+            <el-col :span="5">
+              <SearchOutlined />
+            </el-col>
+            <el-col :span="12" class="top_3">
+              <text @click="toLogin(1)">登录</text>
+              <text>|</text>
+              <text @click="toLogin(2)">注册</text>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="center">
+      <el-col :span="24" class="container">
+        <router-view :style="viewStyle"></router-view>
+      </el-col>
+    </div>
+    <div class="bottom">
+      <div class="w_1200 footflex">
+        <el-image class="image" :src="unit" fit="fill" />
+        <el-col :span="12" class="foot_1">
+          <div class="footTitle">
+            <span>业务洽谈：{{ footInfo.Phone }}</span>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <span>企业邮箱：{{ footInfo.Email }}</span>
+          </div>
+          <div class="footTitle">地 址：{{ footInfo.Address }}</div>
+          <div class="footTitle">版权所有：{{ footInfo.Copyright }}</div>
+          <div class="footTitle">技术支持：{{ footInfo.Company }}</div>
+        </el-col>
+        <el-col :span="3" class="foot_2">
+          <div class="footTop">关于我们</div>
+          <div class="footTitle footflex1">
+            <span class="footSpan" @click="toHelp('1')">关于我们</span>
+            <span class="footSpan" @click="toHelp('2')">意见反馈</span>
+          </div>
+          <div class="footTitle footflex1">
+            <span class="footSpan" @click="toHelp('3')">联系我们</span>
+            <span class="footSpan" @click="toHelp('4')">法律条款</span>
+          </div>
+        </el-col>
+        <el-col :span="4" class="foot_3 footflex">
+          <el-image class="image" :src="code" fit="fill" />
+          <el-image class="image" :src="code" fit="fill" />
+        </el-col>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { siteInfo, footInfo, menuList } from '@/layout/site'
+import { SearchOutlined } from '@ant-design/icons-vue'
+const router = useRouter()
+const current = ref('home')
+// 图片引入
+import code from '@/assets/code.png'
+import unit from '@/assets/unit.png'
+
+const selectMenu = (item) => {
+  current.value = item
+  router.push({ path: `/${item}` })
+}
+// 登录|注册
+const toLogin = (status) => {
+  if (status === 1) router.push({ path: '/login' })
+  else router.push({ path: '/register' })
+}
+// 帮助中心
+const toHelp = (type) => {
+  router.push({ path: '/help', query: { type } })
+}
+</script>
+
+<style scoped lang="scss">
+.common-layout {
+  height: 100%;
+  width: 100%;
+  .top {
+    position: sticky;
+    top: 0;
+    z-index: 99999;
+    padding: 10px 80px;
+    background: #ffffff;
+
+    .top_1 {
+      display: flex;
+      align-items: center;
+
+      .image {
+        height: 45px;
+        width: 45px;
+        margin: 0 5px 0 0;
+      }
+
+      .content {
+        margin: 0 0 0 5px;
+
+        .title {
+          margin: 0 0 5px 0;
+          font-size: 23px;
+          font-weight: bold;
+        }
+
+        .english {
+          margin: 0 0 0 5px;
+          font-size: 12px;
+          opacity: 0.8;
+          color: #1c66e7;
+        }
+      }
+    }
+
+    :deep(.ant-tabs-nav) {
+      margin: 0 !important;
+    }
+
+    :deep(.ant-tabs-nav::before) {
+      border: 0 !important;
+    }
+
+    .top_3 {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .center {
+    min-height: 77.3vh;
+  }
+  .bottom {
+    width: 100%;
+    padding: 7px 0;
+    font-size: 14px;
+    background-color: #2e3546;
+    color: #f0f2f5;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+      'Noto Color Emoji';
+    font-variant: tabular-nums;
+    line-height: 1.5715;
+    font-feature-settings: 'tnum', 'tnum';
+
+    .image {
+      width: 78px;
+      height: 78px;
+    }
+
+    .footTitle {
+      margin: 5px 0 0 0;
+
+      .footSpan {
+        margin-bottom: 3px;
+      }
+    }
+
+    .footTop {
+      font-size: 18px;
+      margin-bottom: 12px;
+    }
+  }
+
+  .footflex {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  .footflex1 {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+</style>

src/layout/site.js

@@ -0,0 +1,32 @@
+// 图片引入
+import logo from '@/assets/logo.png'
+import home from '@/assets/home.jpg'
+// 网站基本设置
+export const siteInfo = {
+  display: false,
+  zhTitle: '新一代信息技术孵化平台',
+  zhEnglish: 'Information Technology Incubation Platform',
+  zhBrief: '方寸心间 创新无限',
+  zhAddress: '吉林省长春市前进大街力旺广场',
+  zhPhone: '400-469-1899',
+  zhMailbox: '123456789@.com',
+  logoUrl: logo,
+  videoUrl: home
+}
+// 网站底部信息
+export const footInfo = {
+  Phone: '0431-81165166',
+  Email: 'jlpstm@126.com',
+  Address: '长春朝阳区前进大街1244号（吉林省科技厅科研园）',
+  Copyright: 'Copyright©2007-2024 吉林省创新指导中心 │ 吉ICP备14005689号',
+  Company: '长春市福瑞科技有限公司'
+}
+// 菜单设置
+export const menuList = [
+  { title: '首页', href: 'home', English: 'Home' },
+  { title: '政策新闻', href: 'news', English: 'Policy News' },
+  { title: '新闻资讯', href: 'brain', English: 'News Information' },
+  { title: '供需商城', href: 'demand', English: 'Demand Mall' },
+  { title: '创新大赛', href: 'innovation', English: 'Innovation Competition' },
+  { title: '成果展示', href: 'achievement', English: 'Achievement Display' }
+]

src/main.js

@@ -17,6 +17,12 @@ import { InitVariable } from './utils/variable'
 import globalComponents from '@/components'
 // 指令
 import { InitDirective } from './utils/directives'
+// 自动滚动
+import vue3SeamlessScroll from 'vue3-seamless-scroll'
+// Antd
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+
 const app = createApp(App)
 globalComponents(app)
 setupStore(app)
@@ -24,6 +30,8 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.use(i18n).use(router).mount('#app')
+app.use(Antd)
+app.use(vue3SeamlessScroll, { name: 'vue3SeamlessScroll' })
 InitCheckResult(app)
 InitVariable(app)
 InitDirective(app)

src/router/index.js

@@ -1,13 +1,77 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/home/index.vue'
-
+export const Layout = () => import('@/layout/index.vue')
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      redirect: '/index'
+    },
+    {
+      path: '/index',
+      name: 'index',
+      meta: { title: '吉林省信息技术孵化平台' },
+      component: () => import('@/views/index/index.vue')
+    },
+    {
+      path: '/',
+      name: 'Layout',
+      component: Layout,
+      children: [
+        {
+          path: '/home',
+          name: 'home',
+          meta: { title: '吉林省信息技术孵化平台-首页' },
+          component: () => import('@/views/home/index.vue')
+        },
+        {
+          path: '/news',
+          name: 'news',
+          meta: { title: '吉林省信息技术孵化平台-政策新闻' },
+          component: () => import('@/views/news/index.vue')
+        },
+        {
+          path: '/demand',
+          name: 'demand',
+          meta: { title: '吉林省信息技术孵化平台-供需商城' },
+          component: () => import('@/views/demand/index.vue')
+        },
+        {
+          path: '/brain',
+          name: 'brain',
+          meta: { title: '吉林省信息技术孵化平台-新闻资讯' },
+          component: () => import('@/views/brain/index.vue')
+        },
+        {
+          path: '/innovation',
+          name: 'innovation',
+          meta: { title: '吉林省信息技术孵化平台-创新大赛' },
+          component: () => import('@/views/innovation/index.vue')
+        },
+        {
+          path: '/achievement',
+          name: 'achievement',
+          meta: { title: '吉林省信息技术孵化平台-成果展示' },
+          component: () => import('@/views/achievement/index.vue')
+        },
+        {
+          path: '/login',
+          name: 'login',
+          meta: { title: '吉林省信息技术孵化平台-用户登录' },
+          component: () => import('@/views/login/index.vue')
+        },
+        {
+          path: '/register',
+          name: 'register',
+          meta: { title: '吉林省信息技术孵化平台-用户注册' },
+          component: () => import('@/views/register/index.vue')
+        },
+        {
+          path: '/help',
+          meta: { title: '吉林省信息技术孵化平台-帮助中心' },
+          component: () => import('@/views/help/index.vue')
+        }
+      ]
     }
   ]
 })

src/views/achievement/index.vue

@@ -0,0 +1,442 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col :span="24" class="iachievement">
+          <el-image class="image" :src="achievement" fit="fill" />
+          <div class="input">
+            <a-input v-model:value="searchValue" placeholder="请输入想要搜索的内容">
+              <template #suffix>
+                <SearchOutlined :style="{ fontSize: '30px', color: '#ffffff' }" />
+              </template>
+            </a-input>
+          </div>
+        </el-col>
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
+              <el-col :span="3" class="left">{{ val.title }}</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in val.list"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  >{{ item.label }}</a-button
+                >
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col
+              :span="24"
+              class="list"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="toView(item)"
+            >
+              <el-col :span="24" class="name">
+                <el-tooltip effect="dark" :content="item.name" placement="top">
+                  {{ item.name || '暂无成果名称' }}
+                </el-tooltip>
+              </el-col>
+              <el-row class="other">
+                <el-col :span="8" class="other_1"
+                  ><span>技术领域：</span>{{ item.area || '暂无技术领域' }}</el-col
+                >
+                <el-col :span="8" class="other_1"
+                  ><span>成果地区：</span>{{ item.city || '暂无成果地区' }}</el-col
+                >
+                <el-col :span="8" class="other_1"
+                  ><span>单位：</span>{{ item.unit || '暂无单位' }}</el-col
+                >
+              </el-row>
+              <el-col :span="24" class="brief textOver">{{
+                item.brief || '没有更多成果简介'
+              }}</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="thr">
+            <el-pagination
+              background
+              layout="total, prev, pager, next"
+              :page-sizes="[10, 20, 50, 100, 200]"
+              :total="total"
+              :page-size="limit"
+              v-model:current-page="currentPage"
+              @current-change="changePage"
+              @size-change="sizeChange"
+            >
+            </el-pagination>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { SearchOutlined } from '@ant-design/icons-vue'
+// 路由
+const router = useRouter()
+// 图片引入
+import achievement from '@/assets/achievement.png'
+// 加载中
+const loading = ref(false)
+const searchValue = ref('')
+// 列表
+const list = ref([
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司',
+    brief:
+      '技术特点：专为电子商务行业设计，以自动化和流程化地管理订单、财务、仓库、物流和发货等业务为主。它的目标是提高商家的订单速度和出货速度，有效管理企业内部员工的工作能力和监管财务系统，以及改善企业业务流程、提高企业核心竞争力'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  }
+])
+let total = ref(12)
+let skip = 0
+let limit = inject('limit')
+const searchList = ref([
+  {
+    title: '行业分市场',
+    list: [
+      { 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: '海洋科技' }
+    ]
+  },
+  {
+    title: '技术领域',
+    list: [
+      { 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', label: '航空航天' }
+    ]
+  },
+  {
+    title: '成熟度',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '正在研发' },
+      { value: '2', label: '已有样品' },
+      { value: '3', label: '通过小试' },
+      { value: '4', label: '通过中试' }
+    ]
+  },
+  {
+    title: '出让方式',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '转让' },
+      { value: '2', label: '许可' },
+      { value: '3', label: '作价入股' },
+      { value: '4', label: '其他' },
+      { value: '4', label: '免费许可/先用后转' }
+    ]
+  },
+  {
+    title: '交易价格',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '面议' },
+      { value: '2', label: '1-10万元' },
+      { value: '3', label: '10-20万元' },
+      { value: '4', label: '20-100万元' },
+      { value: '5', label: '100-500万元' },
+      { value: '6', label: '500-1000万元' },
+      { value: '7', label: '1000万元以上' }
+    ]
+  },
+  {
+    title: '成果地区',
+    list: [
+      { 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', 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', label: '云南省' }
+    ]
+  }
+])
+// 查看
+const toView = (item) => {
+  router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
+}
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await search({ skip, limit })
+  loading.value = false
+})
+const search = async (e) => {
+  const info = { skip: e.skip, limit: e.limit }
+  console.log(info)
+  //   const res: IQueryResult = await userCheckAxios.query(info);
+  //   if (res.errcode == '0') {
+  //     list.value = res.data;
+  //     total.value = res.total;
+  //   }
+}
+// 查询其他信息
+const searchOther = async () => {
+  //   let res: IQueryResult;
+  //   // 性别
+  //   res = await dictAxios.query({ type: 'common_gender' });
+  //   if (res.errcode == '0') genderList.value = res.data;
+}
+</script>
+<style lang="scss" scoped>
+.main {
+  background: rgb(248, 248, 248);
+
+  .iachievement {
+    position: relative;
+
+    .image {
+      width: 100%;
+      height: 250px;
+    }
+
+    .input {
+      width: 800px;
+      position: absolute;
+      left: 25%;
+      bottom: 40%;
+
+      :deep(.ant-input-affix-wrapper) {
+        background-color: transparent;
+        border: 3px solid #fff !important;
+      }
+
+      :deep(.ant-input) {
+        height: 45px;
+        line-height: 45px;
+        font-family: PingFangSC-Regular;
+        font-size: 16px;
+        padding-right: 24px;
+
+        border: none !important;
+        outline: none !important;
+        box-shadow: 0 0 0 0 !important;
+        text-shadow: 0 0 0 0 !important;
+        background-color: transparent !important;
+
+        &::placeholder {
+          color: #ffffff !important;
+        }
+      }
+    }
+  }
+
+  .one {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0 0 0;
+
+    .one_1 {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: #9d9898 1px dashed;
+
+      .left {
+        background: #778cb3;
+        border-radius: 15px;
+        line-height: 26px;
+        color: #fff;
+        text-align: center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: PingFangSC-Medium;
+      }
+
+      .right {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          margin: 0 10px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
+
+        .title:hover {
+          color: #2374ff;
+        }
+      }
+    }
+  }
+
+  .two {
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+
+    .list {
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+
+      .name {
+        color: #337ab7;
+        font-size: 18px;
+        font-weight: bold;
+        display: inline-block;
+        margin: 10px 0;
+      }
+
+      .name:hover {
+        color: #2374ff;
+      }
+
+      .other {
+        padding: 5px 0;
+
+        .other_1 {
+          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
+            sans-serif;
+          font-size: 12px;
+          font-weight: normal;
+        }
+
+        .other_1:hover {
+          color: #2374ff;
+        }
+      }
+
+      .brief {
+        line-height: 30px;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .thr {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
+}
+</style>

src/views/demand/index.vue

@@ -0,0 +1,374 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight">
+        <el-col :span="24" class="idemand">
+          <el-image class="image" :src="demand" fit="fill" />
+        </el-col>
+        <div class="w_1200">
+          <el-col :span="24" class="one">
+            <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
+              <el-col :span="3" class="left">{{ val.title }}</el-col>
+              <el-col :span="21" class="right">
+                <a-button
+                  class="title"
+                  v-for="(item, index) in val.list"
+                  :key="index"
+                  type="link"
+                  size="samll"
+                  >{{ item.label }}</a-button
+                >
+              </el-col>
+            </el-row>
+          </el-col>
+          <el-col :span="24" class="two">
+            <el-col
+              :span="24"
+              class="list"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="toView(item)"
+            >
+              <el-col :span="24" class="name">
+                <el-tooltip effect="dark" :content="item.name" placement="top">
+                  {{ item.name || '暂无需求名称' }}
+                </el-tooltip>
+              </el-col>
+              <el-row class="other">
+                <el-col :span="8" class="other_1"
+                  ><span>技术领域：</span>{{ item.area || '暂无技术领域' }}</el-col
+                >
+                <el-col :span="8" class="other_1"
+                  ><span>需求地区：</span>{{ item.city || '暂无需求地区' }}</el-col
+                >
+                <el-col :span="8" class="other_1"
+                  ><span>单位：</span>{{ item.unit || '暂无单位' }}</el-col
+                >
+              </el-row>
+              <el-col :span="24" class="brief textOver">{{
+                item.brief || '没有更多需求简介'
+              }}</el-col>
+            </el-col>
+          </el-col>
+          <el-col :span="24" class="thr">
+            <el-pagination
+              background
+              layout="total, prev, pager, next"
+              :page-sizes="[10, 20, 50, 100, 200]"
+              :total="total"
+              :page-size="limit"
+              v-model:current-page="currentPage"
+              @current-change="changePage"
+              @size-change="sizeChange"
+            >
+            </el-pagination>
+          </el-col>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 图片引入
+import demand from '@/assets/demand.png'
+// 路由
+const router = useRouter()
+// 加载中
+const loading = ref(false)
+// 列表
+const list = ref([
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司',
+    brief:
+      '技术特点：专为电子商务行业设计，以自动化和流程化地管理订单、财务、仓库、物流和发货等业务为主。它的目标是提高商家的订单速度和出货速度，有效管理企业内部员工的工作能力和监管财务系统，以及改善企业业务流程、提高企业核心竞争力'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  },
+  {
+    name: '拉力均衡强稳定性无焊口锚链',
+    area: '先进制造',
+    city: '舟山市',
+    unit: '浙江易丰安全科技有限公司'
+  }
+])
+let total = ref(12)
+let skip = 0
+let limit = inject('limit')
+const searchList = ref([
+  {
+    title: '技术领域',
+    list: [
+      { 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', label: '航空航天' }
+    ]
+  },
+  {
+    title: '合作方式',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '技术开发' },
+      { value: '2', label: '技术咨询' },
+      { value: '3', label: '技术服务' },
+      { value: '4', label: '许可转让' },
+      { value: '4', label: '完全转让' },
+      { value: '4', label: '技术入股' },
+      { value: '4', label: '合作开发' },
+      { value: '4', label: '其他' }
+    ]
+  },
+  {
+    title: '需求地区',
+    list: [
+      { 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', 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', label: '云南省' }
+    ]
+  },
+  {
+    title: '需求状态',
+    list: [
+      { value: '0', label: '全部' },
+      { value: '1', label: '洽谈中' },
+      { value: '2', label: '已结束' }
+    ]
+  }
+])
+// 查看
+const toView = (item) => {
+  router.push({ path: '/demand/detail', query: { id: item.id || item._id } })
+}
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await searchOther()
+  await search({ skip, limit })
+  loading.value = false
+})
+const search = async (e) => {
+  const info = { skip: e.skip, limit: e.limit }
+  console.log(info)
+  //   const res: IQueryResult = await userCheckAxios.query(info);
+  //   if (res.errcode == '0') {
+  //     list.value = res.data;
+  //     total.value = res.total;
+  //   }
+}
+// 查询其他信息
+const searchOther = async () => {
+  //   let res: IQueryResult;
+  //   // 性别
+  //   res = await dictAxios.query({ type: 'common_gender' });
+  //   if (res.errcode == '0') genderList.value = res.data;
+}
+</script>
+<style lang="scss" scoped>
+.main {
+  background: rgb(248, 248, 248);
+
+  .idemand {
+    .image {
+      width: 100%;
+      height: 250px;
+    }
+  }
+
+  .one {
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+    margin: 10px 0 0 0;
+
+    .one_1 {
+      display: flex;
+      align-items: center;
+      padding: 10px 0;
+      border-bottom: #9d9898 1px dashed;
+
+      .left {
+        background: #778cb3;
+        border-radius: 15px;
+        line-height: 26px;
+        color: #fff;
+        text-align: center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: PingFangSC-Medium;
+      }
+
+      .right {
+        .title {
+          color: #666;
+          font-size: 14px;
+          line-height: 15px;
+          margin: 0 10px;
+          display: inline-block;
+          overflow: hidden;
+          text-decoration: none;
+        }
+
+        .title:hover {
+          color: #2374ff;
+        }
+      }
+    }
+  }
+
+  .two {
+    margin-top: 20px;
+    background: #ffffff;
+    border-radius: 10px;
+    padding: 15px;
+
+    .list {
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ebebeb;
+      padding-bottom: 10px;
+
+      .name {
+        color: #337ab7;
+        font-size: 18px;
+        font-weight: bold;
+        display: inline-block;
+        margin: 10px 0;
+      }
+
+      .name:hover {
+        color: #2374ff;
+      }
+
+      .other {
+        padding: 5px 0;
+
+        .other_1 {
+          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
+            sans-serif;
+          font-size: 12px;
+          font-weight: normal;
+        }
+
+        .other_1:hover {
+          color: #2374ff;
+        }
+      }
+
+      .brief {
+        line-height: 30px;
+        color: #666;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .thr {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 20px;
+  }
+}
+</style>

src/views/help/index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <div class="w_1200">
+          <el-row class="help">
+            <el-col :span="6" class="left">
+              <a-menu
+                v-model:selectedKeys="selectedKeys"
+                style="width: 256px"
+                mode="inline"
+                :items="menuList"
+                @select="onOpenChange"
+              ></a-menu>
+            </el-col>
+            <el-col v-if="select === '1'" :span="18" class="right">
+              <h2>关于我们</h2>
+              <el-col :span="24" class="other">
+                吉林省重点领域技术转移平台是全国最早开设的大型常设网上技术交易市场，为我国探索网上技术交易提供了大量的“浙江经验”。
+                吉林省重点领域技术转移平台3.0版按照全要素聚集、全链条服务、全球化生态的规划思路升级建设，将打造统一的科技成果交易体系、服务体系、统计监测分析体系，构建线上线下、有形无形、国际国内一体化的技术市场体系，形成“招拍挂、股改投”联动的技术交易模式和辐射全国、链接全球的技术交易生态。
+              </el-col>
+            </el-col>
+            <el-col v-else-if="select === '2'" :span="18" class="right">意见反馈</el-col>
+            <el-col v-else-if="select === '3'" :span="18" class="right">
+              <el-row :gutter="20">
+                <el-col :span="12" class="left">
+                  <el-image class="image" :src="map" fit="fill" />
+                </el-col>
+                <el-col :span="12" class="right">
+                  <el-col :span="24" class="other">
+                    <el-icon color="#2374ff">
+                      <Message />
+                    </el-icon>
+                    <span>联系我们</span> 吉林省科技开发交流中心
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <el-icon color="#2374ff">
+                      <Location />
+                    </el-icon>
+                    <span>联系地址</span>长春朝阳区前进大街1244号（吉林省科技厅科研园）
+                  </el-col>
+                  <el-col :span="24" class="other">
+                    <el-icon color="#2374ff">
+                      <Iphone />
+                    </el-icon>
+                    <span>联系电话</span> 0431-81165166
+                  </el-col>
+                </el-col>
+              </el-row>
+            </el-col>
+            <el-col v-else-if="select === '4'" :span="18" class="right">法律条款</el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 基础
+import { onMounted, ref, reactive } from 'vue'
+import { useRoute } from 'vue-router'
+// 图片引入
+import map from '@/assets/map.jpg'
+const route = useRoute()
+// 加载中
+const loading = ref(false)
+const selectedKeys = ref(['1'])
+const select = ref('1')
+const menuList = reactive([
+  {
+    key: '1',
+    label: '关于我们',
+    title: '关于我们'
+  },
+  {
+    key: '2',
+    label: '意见反馈',
+    title: '意见反馈'
+  },
+  {
+    key: '3',
+    label: '联系我们',
+    title: '联系我们'
+  },
+  {
+    key: '4',
+    label: '法律条款',
+    title: '法律条款'
+  }
+])
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {
+  if (route.query.type) {
+    select.value = route.query.type
+    selectedKeys.value = [route.query.type]
+  }
+}
+const onOpenChange = (item) => {
+  select.value = item.key
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .help {
+    padding: 10px 0;
+    min-height: 490px;
+
+    .left {
+      display: flex;
+      align-items: normal;
+    }
+
+    .right {
+      background: rgba(40, 77, 191, 0.03);
+      padding: 20px;
+
+      h2 {
+        font-size: 32px;
+        color: #284dbf;
+      }
+
+      .other {
+        margin-bottom: 10px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        color: #7e8288;
+        line-height: 25px;
+
+        span {
+          font-family: PingFangSC-Regular;
+          font-size: 14px;
+          color: #383b40;
+          line-height: 25px;
+          margin: 0 5px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -2,19 +2,241 @@
   <div id="index">
     <el-row>
       <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> 首页 </el-col>
+        <el-col :span="24" class="one">
+          <el-carousel height="250px">
+            <el-carousel-item v-for="(item, index) in carouselList" :key="index">
+              <el-image class="image" :src="item.url" fit="fill" />
+            </el-carousel-item>
+          </el-carousel>
+        </el-col>
+        <el-col :span="24" class="two"> 创高创新 · 共赢未来 </el-col>
+        <el-col :span="24" class="thr">
+          <div class="w_1200" v-for="(item, index) in list" :key="index">
+            <el-col :span="24" class="thr_1" v-if="(index + 1) % 2 == 0">
+              <el-col :span="12" class="left">
+                <el-image class="image" :src="item.url" fit="fill" />
+              </el-col>
+              <el-col :span="12" class="right">
+                <el-col :span="24" class="title">{{ item.title }}</el-col>
+                <el-col :span="12" class="brief">{{ item.brief }} </el-col>
+                <el-col :span="24" class="right">
+                  <a-button type="primary" ghost>了解更多</a-button>
+                </el-col>
+              </el-col>
+            </el-col>
+            <el-col :span="24" class="thr_2" v-else>
+              <el-col :span="12" class="left">
+                <el-col :span="24" class="title">{{ item.title }}</el-col>
+                <el-col :span="12" class="brief">{{ item.brief }} </el-col>
+                <el-col :span="24" class="right">
+                  <a-button type="primary" ghost>了解更多</a-button>
+                </el-col>
+              </el-col>
+              <el-col :span="12" class="right">
+                <el-image class="image" :src="item.url" fit="fill" />
+              </el-col>
+            </el-col>
+          </div>
+        </el-col>
+        <el-col :span="24" class="four">
+          <el-col :span="24" class="four_1">创新平台</el-col>
+          <el-col :span="24" class="four_2"
+            >灵感一触即发，成果就在眼前。创新创业，点亮未来。</el-col
+          >
+          <el-col :span="24" class="four_3 w_1200">
+            <div v-for="(item, index) in otherList" :key="index">
+              <div class="list">
+                <el-col :span="24" class="list_1">
+                  <el-image class="image" :src="item.url" fit="fill"
+                /></el-col>
+                <el-col :span="24" class="list_2">{{ item.title }}</el-col>
+              </div>
+            </div>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script setup>
+// 图片引入
+import video_1 from '@/assets/video_1.png'
+import video_2 from '@/assets/video_2.jpg'
+import home_1 from '@/assets/home_1.png'
+import home_2 from '@/assets/home_2.png'
+import home_3 from '@/assets/home_3.png'
+import home_4 from '@/assets/home_4.png'
 // 加载中
 const loading = ref(false)
+const carouselList = ref([{ url: video_1 }, { url: video_2 }, { url: video_1 }])
+const list = ref([
+  {
+    title: '政策新闻',
+    brief: '推动政策落地，让每一分投入都发挥最大效益，让每一步行动都引领未来发展。',
+    url: home_1
+  },
+  {
+    title: '供需商城',
+    brief: '我们向您献上最诚挚的敬意，希望我们能一起开拓更广阔的合作领域。',
+    url: home_2
+  },
+  { title: '创新大赛', brief: '科技点亮希望,创新改变世界。', url: home_3 },
+  {
+    title: '成果展示',
+    brief: '通过不懈的努力，我们成功地完成了项目目标，取得了显著的成果。',
+    url: home_4
+  },
+  {
+    title: '新闻资讯',
+    brief: '新闻资讯也指一个集中的空间，能够在企业创办初期举步维艰时，提供资金、管理等多种便利。',
+    url: home_1
+  }
+])
+const otherList = ref([
+  { title: '汽车电子', url: home_1 },
+  { title: '碳纤维', url: home_2 },
+  { title: '光电', url: home_3 },
+  { title: '农产品', url: home_4 },
+  { title: '车芯片', url: home_1 },
+  { title: '人工智能', url: home_1 },
+  { title: '生物基', url: home_2 },
+  { title: '新能源', url: home_3 },
+  { title: '遥感卫星', url: home_4 },
+  { title: '天然气', url: home_1 },
+  { title: '精密仪器', url: home_4 },
+  { title: '生物医药', url: home_1 }
+])
 // 请求
 onMounted(async () => {
   loading.value = true
+  search()
   loading.value = false
 })
+const search = async () => {
+  //   let res: IQueryResult = await toolsAxios.dataCount();
+  //   if (res.errcode == '0') {
+  //     info.value = res.data;
+  //   }
+}
 </script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.main {
+  .two {
+    text-align: center;
+    font-size: 28px;
+    margin: 40px 0;
+  }
+
+  .thr {
+    margin: 10px 0;
+
+    .thr_1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        .image {
+          width: 90%;
+          height: 350px;
+        }
+      }
+
+      .right {
+        .title {
+          font-size: 20px;
+          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+          font-weight: bold;
+        }
+
+        .title:hover {
+          color: #3894ff;
+          transform: translateY(-10px);
+          /* 当鼠标悬停时，向上平移20像素 */
+        }
+
+        .brief {
+          margin: 20px 0;
+          font-size: 16px;
+          font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+        }
+      }
+    }
+
+    .thr_2 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .left {
+        .title {
+          font-size: 20px;
+          font-weight: bold;
+        }
+
+        .title:hover {
+          color: #3894ff;
+          transform: translateY(-10px);
+          /* 当鼠标悬停时，向上平移20像素 */
+        }
+
+        .brief {
+          margin: 20px 0;
+          font-size: 16px;
+        }
+      }
+
+      .right {
+        .image {
+          width: 90%;
+          height: 350px;
+        }
+      }
+    }
+  }
+
+  .four {
+    background: #efefef;
+    padding: 20px;
+
+    .four_1 {
+      text-align: center;
+      font-size: 28px;
+      margin: 40px 0 20px 0;
+    }
+
+    .four_2 {
+      text-align: center;
+      font-size: 16px;
+      margin: 0 0 20px 0;
+      color: #333333;
+    }
+
+    .four_3 {
+      display: flex;
+      flex-wrap: wrap;
+
+      .list {
+        width: 260px;
+        margin: 20px;
+        background: #ffffff;
+        padding: 20px;
+
+        .list_2 {
+          text-align: center;
+          margin: 10px 0 0 0;
+        }
+        .list_2:hover {
+          color: #3894ff;
+        }
+      }
+
+      .list:hover {
+        transform: translateY(-20px);
+        /* 当鼠标悬停时，向上平移20像素 */
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-image class="video" :src="siteInfo.videoUrl" fit="fill" />
+        <div class="content">
+          <div class="one">
+            <el-row>
+              <el-col :span="14" class="left">
+                <el-image class="image" :src="siteInfo.logoUrl" fit="fill" />
+                <div class="left_1">
+                  <div class="title">{{ siteInfo.zhTitle }}</div>
+                  <div class="english">{{ siteInfo.zhEnglish }}</div>
+                </div>
+              </el-col>
+              <el-col :span="10" class="right">
+                <el-row align="middle">
+                  <el-col :span="6" class="right_1" @click="toCommon(0)">帮助中心</el-col>
+                  <el-col :span="14" class="right_2">
+                    <a-input-search
+                      v-model:value="searchValue"
+                      placeholder="请输入您想要搜索的内容"
+                      style="width: 240px"
+                      enter-button
+                      @search="onSearch"
+                    />
+                  </el-col>
+                  <el-col :span="4" class="right_3">
+                    <text @click="toCommon(1)">登录</text>
+                    <text>|</text>
+                    <text @click="toCommon(2)">注册</text>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="two">
+            <el-row justify="center" align="middle">
+              <el-col
+                class="list"
+                :span="8"
+                v-for="(item, index) in menuList"
+                :key="index"
+                @click="switchMenu(item)"
+              >
+                <div class="bg"></div>
+                <div class="two_1">
+                  <text>{{ item.title }}</text>
+                  <text>{{ item.English }}</text>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+          <div class="thr">
+            版权所有(C)2002-2024新一代信息技术孵化平台.All Rights Reserved.吉ICP备12029479号-2
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 基础
+import { siteInfo, menuList } from '@/layout/site'
+// 加载中
+const loading = ref(false)
+// 路由
+const router = useRouter()
+// 搜索
+const searchValue = ref('')
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {
+  //   let res: IQueryResult = await toolsAxios.dataCount();
+  //   if (res.errcode == '0') {
+  //     info.value = res.data;
+  //   }
+}
+// 搜索
+const onSearch = (data) => {
+  console.log('use value', data)
+  console.log('or use this.value', searchValue.value)
+}
+const toCommon = (type) => {
+  if (type == 0) {
+    console.log('帮助中心')
+  } else {
+    console.log('登录或注册')
+  }
+}
+// 点击指定模块
+const switchMenu = async (item) => {
+  localStorage.setItem('href', item.href)
+  router.push({ path: '/home' })
+}
+</script>
+<style scoped lang="scss">
+.main {
+  height: 100vh;
+  min-width: 1200px;
+
+  .video {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+  }
+
+  .content {
+    position: absolute;
+    top: 0px;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    color: #ffffff;
+
+    .one {
+      width: 1200px;
+      min-width: 1200px;
+      margin: 0 auto;
+      padding-top: 32px;
+      padding-bottom: 12px;
+
+      .left {
+        display: flex;
+        align-items: center;
+
+        .image {
+          height: 45px;
+          width: 45px;
+        }
+
+        .left_1 {
+          margin: 0 0 0 5px;
+
+          .title {
+            margin: 0 0 5px 0;
+            font-size: 23px;
+            font-weight: bold;
+          }
+
+          .english {
+            font-size: 12px;
+            color: #fff;
+          }
+        }
+      }
+
+      .right {
+        font-size: 14px;
+        letter-spacing: 0;
+        color: #fff;
+        font-weight: 500;
+
+        .right_3 {
+          display: flex;
+          justify-content: space-between;
+        }
+      }
+    }
+
+    .two {
+      width: 1200px;
+      min-width: 1200px;
+      margin: 0 auto;
+
+      .list {
+        position: relative;
+        display: flex;
+        justify-content: center;
+
+        .bg {
+          margin: 10px;
+          width: 250px;
+          height: 250px;
+          z-index: 1;
+          background-image: url(@/assets/homebg.png);
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: contain;
+          animation: animationName 5s linear infinite;
+        }
+
+        .two_1 {
+          position: absolute;
+          top: 43%;
+          left: 25%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          z-index: 999;
+          width: 200px;
+
+          text {
+            font-size: 20px;
+            color: #ffffff;
+          }
+
+          text:last-child {
+            margin: 5px 0 0 0;
+            font-size: 12px;
+          }
+        }
+
+        @keyframes animationName {
+          100% {
+            transform: rotate(1turn);
+          }
+        }
+      }
+    }
+
+    .thr {
+      margin: 30px 0 0 0;
+      text-align: center;
+      font-size: 12px;
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/innovation/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <el-image class="image" :src="innovation" fit="fill" />
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+// 图片引入
+import innovation from '@/assets/innovation.png'
+// 接口
+// import { ToolsStore } from '@/stores/tool';
+// import type { IQueryResult } from '@/util/types.util';
+// const toolsAxios = ToolsStore();
+
+// 加载中
+const loading = ref(false)
+const info = ref({})
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {
+  //   let res: IQueryResult = await toolsAxios.dataCount();
+  //   if (res.errcode == '0') {
+  //     info.value = res.data;
+  //   }
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    .image {
+      width: 100%;
+      height: 250px;
+    }
+  }
+}
+</style>

src/views/login/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <div class="loginform">
+            <el-col :span="24" class="tab">
+              <el-col
+                :span="6"
+                class="title"
+                @click="toTab(0)"
+                :class="[activeName == '0' ? 'tab0' : 'tab1']"
+                >个人登录</el-col
+              >
+              <el-col
+                :span="6"
+                class="title"
+                @click="toTab(1)"
+                :class="[activeName == '1' ? 'tab0' : 'tab1']"
+                >法人登录</el-col
+              >
+            </el-col>
+            <el-col :span="24" class="content" v-show="activeName == '0'">
+              <el-form
+                ref="ruleFormRef"
+                :model="form"
+                :rules="rules"
+                label-width="60px"
+                class="form"
+                label-position="left"
+              >
+                <el-form-item label="账号" prop="account">
+                  <el-input v-model="form.account" placeholder="请输入账号">
+                    <template #prefix>
+                      <el-icon>
+                        <User />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                  <el-input
+                    v-model="form.password"
+                    type="password"
+                    show-password
+                    placeholder="请输入登录密码"
+                  >
+                    <template #prefix>
+                      <el-icon>
+                        <Unlock />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-col :span="24" class="remark">
+                  <span>其他方式登录</span>
+                  <span>忘记密码?</span>
+                </el-col>
+                <el-col :span="24" class="button">
+                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+                </el-col>
+                <el-col :span="24" class="agree">
+                  <span>登录即表示您同意</span>
+                  <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                </el-col>
+                <el-col :span="24" class="other">
+                  <span>还没有账号?</span>
+                  &nbsp;&nbsp;
+                  <span @click="toRegister">去注册</span>
+                </el-col>
+              </el-form>
+            </el-col>
+            <el-col :span="24" class="content" v-show="activeName == '1'">
+              <el-form
+                ref="ruleFormRef"
+                :model="form"
+                :rules="rules"
+                label-width="60px"
+                class="form"
+                label-position="left"
+              >
+                <el-form-item label="账号" prop="account">
+                  <el-input v-model="form.account" placeholder="请输入账号">
+                    <template #prefix>
+                      <el-icon>
+                        <User />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-form-item label="密码" prop="password">
+                  <el-input
+                    v-model="form.password"
+                    type="password"
+                    show-password
+                    placeholder="请输入登录密码"
+                  >
+                    <template #prefix>
+                      <el-icon>
+                        <Unlock />
+                      </el-icon>
+                    </template>
+                  </el-input>
+                </el-form-item>
+                <el-col :span="24" class="remark">
+                  <span>其他方式登录</span>
+                  <span>忘记密码?</span>
+                </el-col>
+                <el-col :span="24" class="button">
+                  <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
+                </el-col>
+                <el-col :span="24" class="agree">
+                  <span>登录即表示您同意</span>
+                  <span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+                </el-col>
+                <el-col :span="24" class="other">
+                  <span>还没有账号?</span>
+                  &nbsp; &nbsp;
+                  <span @click="toRegister">去注册</span>
+                </el-col>
+              </el-form>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog v-model="dialog" title="使用协议">使用协议</el-dialog>
+  </div>
+</template>
+<script setup>
+// 基础
+import { siteInfo } from '@/layout/site'
+// 路由
+const router = useRouter()
+// 加载中
+const loading = ref(false)
+const dialog = ref(false)
+const form = ref({})
+const ruleFormRef = ref()
+const rules = reactive({
+  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+const activeName = ref(0)
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {}
+// 选择
+const toTab = async (active) => {
+  activeName.value = active
+}
+// 登录
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 去注册
+const toRegister = () => {
+  router.push({ path: '/register' })
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    background-image: url(@/assets/loginbg.jpeg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    height: calc(100vh - 20vh);
+    width: 100%;
+    background-size: cover;
+    display: flex;
+    justify-content: space-evenly;
+
+    .loginform {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      height: 380px;
+      padding: 20px 85px;
+      background: hsla(0, 0%, 100%, 0.6);
+      box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      border-top: 10px solid #1492ff;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .title {
+          text-align: center;
+          margin: 0 40px;
+          font-family: PingFangSC-Semibold !important;
+          font-size: 20px;
+          letter-spacing: -0.14px;
+          line-height: 32px;
+          font-weight: bold;
+        }
+
+        .tab0 {
+          color: #1492ff;
+          border-bottom: 2px solid;
+          border-bottom-color: #1492ff;
+          padding-bottom: 10px;
+        }
+
+        .tab1 {
+          color: #333333;
+          padding-bottom: 10px;
+        }
+      }
+
+      .content {
+        margin: 35px 50px 0px;
+
+        .remark {
+          display: flex;
+          justify-content: space-between;
+
+          span {
+            cursor: pointer;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #333333;
+            letter-spacing: -0.09px;
+            text-align: right;
+            line-height: 32px;
+          }
+
+          span:hover {
+            color: #2374ff;
+          }
+        }
+
+        .button {
+          padding: 10px 0;
+
+          :deep(.el-button) {
+            width: 100% !important;
+            height: 44px !important;
+            border: 0 !important;
+            color: #f8f8f8 !important;
+            font-size: 16px !important;
+            text-align: center !important;
+            line-height: 40px !important;
+            cursor: pointer !important;
+            font-family: PingFangSC-Regular !important;
+            background-color: #1492ff !important;
+          }
+        }
+
+        .agree {
+          padding: 0 0 30px 0;
+          color: #999;
+          font-size: 12px;
+
+          span:last-child {
+            color: #2374ff;
+          }
+        }
+
+        .other {
+          text-align: center;
+          font-family: PingFangSC-Regular;
+          font-size: 14px;
+          color: #333333;
+
+          span:last-child {
+            color: #2374ff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/register/index.vue

@@ -0,0 +1,236 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <div class="loginform">
+            <el-col :span="24" class="tab">
+              <el-col
+                :span="5"
+                class="title"
+                @click="toTab(0)"
+                :class="[activeName == '0' ? 'tab0' : 'tab1']"
+                >平台用户</el-col
+              >
+              <el-col
+                :span="5"
+                class="title"
+                @click="toTab(1)"
+                :class="[activeName == '1' ? 'tab0' : 'tab1']"
+                >企业用户</el-col
+              >
+              <el-col
+                :span="5"
+                class="title"
+                @click="toTab(2)"
+                :class="[activeName == '2' ? 'tab0' : 'tab1']"
+                >科研单位</el-col
+              >
+            </el-col>
+            <el-col :span="24" class="content" v-show="activeName == '0'">
+              <component
+                :is="user"
+                :form="form"
+                :rules="rules"
+                :isAgree="isAgree"
+                @toLogin="toLogin"
+                @toBack="toBack"
+                @submitForm="submitForm"
+              >
+              </component>
+            </el-col>
+            <el-col :span="24" class="content" v-show="activeName == '1'">
+              <component
+                :is="user"
+                :form="form"
+                :rules="rules"
+                :isAgree="isAgree"
+                @toLogin="toLogin"
+                @toBack="toBack"
+                @submitForm="submitForm"
+              >
+              </component>
+            </el-col>
+            <el-col :span="24" class="content" v-show="activeName == '2'">
+              <component
+                :is="user"
+                :form="form"
+                :rules="rules"
+                :isAgree="isAgree"
+                @toLogin="toLogin"
+                @toBack="toBack"
+                @submitForm="submitForm"
+              >
+              </component>
+            </el-col>
+          </div>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog v-model="dialog" title="使用协议">使用协议</el-dialog>
+  </div>
+</template>
+<script setup>
+// 组件
+import user from './parts/user.vue'
+// 路由
+const router = useRouter()
+// 加载中
+const loading = ref(false)
+const form = ref({})
+const dialog = ref(false)
+const rules = reactive({
+  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
+  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+})
+const activeName = ref(0)
+const isAgree = ref(false)
+// 请求
+onMounted(async () => {
+  loading.value = true
+  search()
+  loading.value = false
+})
+const search = async () => {
+  // let res: IQueryResult = await toolsAxios.dataCount();
+  // if (res.errcode == '0') {
+  //     info.value = res.data;
+  // }
+}
+// 选择
+const toTab = async (active) => {
+  activeName.value = active
+}
+// 注册
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 去登录
+const toLogin = () => {
+  router.push({ path: '/login', query: { status: '0' } })
+}
+// 返回
+const toBack = () => {
+  router.push({ path: '/home' })
+}
+</script>
+<style scoped lang="scss">
+.main {
+  .one {
+    background-image: url(@/assets/loginbg.jpeg);
+    background-position: center center;
+    background-repeat: no-repeat;
+    height: calc(100vh - 20vh);
+    width: 100%;
+    background-size: cover;
+    display: flex;
+    justify-content: space-evenly;
+
+    .loginform {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      min-height: 460px;
+      padding: 20px 85px;
+      background: hsla(0, 0%, 100%, 0.6);
+      box-shadow: 0 0 30px 0 rgba(51, 51, 51, 0.2);
+      -webkit-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+      border-top: 10px solid #1492ff;
+
+      .tab {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .title {
+          text-align: center;
+          margin: 0 20px;
+          font-family: PingFangSC-Semibold !important;
+          font-size: 15px;
+          letter-spacing: -0.14px;
+          line-height: 30px;
+          font-weight: bold;
+        }
+
+        .tab0 {
+          color: #1492ff;
+          border-bottom: 2px solid;
+          border-bottom-color: #1492ff;
+          padding-bottom: 10px;
+        }
+
+        .tab1 {
+          color: #333333;
+          padding-bottom: 10px;
+        }
+      }
+
+      .content {
+        margin: 30px 30px 0 30px;
+        height: 340px;
+        overflow-y: auto;
+
+        .remark {
+          display: flex;
+          justify-content: space-between;
+
+          span {
+            cursor: pointer;
+            font-family: PingFangSC-Regular;
+            font-size: 14px;
+            color: #333333;
+            letter-spacing: -0.09px;
+            text-align: right;
+            line-height: 32px;
+          }
+
+          span:hover {
+            color: #2374ff;
+          }
+        }
+
+        .button {
+          padding: 10px 0;
+
+          :deep(.el-button) {
+            width: 100% !important;
+            height: 44px !important;
+            border: 0 !important;
+            color: #f8f8f8 !important;
+            font-size: 16px !important;
+            text-align: center !important;
+            line-height: 40px !important;
+            cursor: pointer !important;
+            font-family: PingFangSC-Regular !important;
+            background-color: #1492ff !important;
+          }
+        }
+
+        .agree {
+          display: flex;
+          align-items: center;
+          padding: 0 0 40px 0;
+          color: #999;
+          font-size: 12px;
+
+          span:last-child {
+            color: #2374ff;
+          }
+        }
+      }
+
+      .content::-webkit-scrollbar {
+        display: none;
+      }
+    }
+  }
+}
+</style>

src/views/register/parts/company.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="user">
+    <el-form
+      ref="ruleFormRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      class="form"
+      label-position="left"
+    >
+      <el-form-item label="账号" prop="account">
+        <el-input v-model="form.account" placeholder="请输入账号">
+          <template #prefix>
+            <el-icon>
+              <User />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          show-password
+          placeholder="请输入登录密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="refpassword">
+        <el-input
+          v-model="form.refpassword"
+          type="password"
+          show-password
+          placeholder="请再次确认输入密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="用户名" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+          <template #prefix>
+            <el-icon>
+              <Avatar />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入联系电话">
+          <template #prefix>
+            <el-icon>
+              <Iphone />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-col :span="24" class="remark">
+        <span @click="toLogin">已有账号去登录</span>
+        <span @click="toBack">返回首页</span>
+      </el-col>
+      <el-col :span="24" class="button">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+      </el-col>
+      <el-col :span="24" class="agree">
+        <el-checkbox v-model="isAgree"></el-checkbox>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span
+        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+      </el-col>
+    </el-form>
+  </div>
+</template>
+<script setup>
+import { siteInfo } from '@/layout/site'
+const props = defineProps({
+  form: { type: Object },
+  rules: { type: Object },
+  isAgree: { type: Boolean, default: false }
+})
+const { form, rules, isAgree } = toRefs(props)
+const ruleFormRef = ref()
+// 选择菜单
+const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
+// 注册
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 去登录
+const toLogin = () => {
+  emit('toLogin')
+}
+// 返回
+const toBack = () => {
+  emit('toBack')
+}
+</script>
+<style scoped lang="scss">
+.user {
+  margin: 30px 30px 0 30px;
+  height: 340px;
+  overflow-y: auto;
+
+  .remark {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      cursor: pointer;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: -0.09px;
+      text-align: right;
+      line-height: 32px;
+    }
+
+    span:hover {
+      color: #2374ff;
+    }
+  }
+
+  .button {
+    padding: 10px 0;
+
+    :deep(.el-button) {
+      width: 100% !important;
+      height: 44px !important;
+      border: 0 !important;
+      color: #f8f8f8 !important;
+      font-size: 16px !important;
+      text-align: center !important;
+      line-height: 40px !important;
+      cursor: pointer !important;
+      font-family: PingFangSC-Regular !important;
+      background-color: #1492ff !important;
+    }
+  }
+
+  .agree {
+    display: flex;
+    align-items: center;
+    padding: 0 0 40px 0;
+    color: #999;
+    font-size: 12px;
+
+    span:last-child {
+      color: #2374ff;
+    }
+  }
+}
+
+.user::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/register/parts/unit.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="user">
+    <el-form
+      ref="ruleFormRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      class="form"
+      label-position="left"
+    >
+      <el-form-item label="账号" prop="account">
+        <el-input v-model="form.account" placeholder="请输入账号">
+          <template #prefix>
+            <el-icon>
+              <User />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          show-password
+          placeholder="请输入登录密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="refpassword">
+        <el-input
+          v-model="form.refpassword"
+          type="password"
+          show-password
+          placeholder="请再次确认输入密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="用户名" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+          <template #prefix>
+            <el-icon>
+              <Avatar />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入联系电话">
+          <template #prefix>
+            <el-icon>
+              <Iphone />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-col :span="24" class="remark">
+        <span @click="toLogin">已有账号去登录</span>
+        <span @click="toBack">返回首页</span>
+      </el-col>
+      <el-col :span="24" class="button">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+      </el-col>
+      <el-col :span="24" class="agree">
+        <el-checkbox v-model="isAgree"></el-checkbox>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span
+        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+      </el-col>
+    </el-form>
+  </div>
+</template>
+<script setup>
+import { siteInfo } from '@/layout/site'
+const props = defineProps({
+  form: { type: Object },
+  rules: { type: Object },
+  isAgree: { type: Boolean, default: false }
+})
+const { form, rules, isAgree } = toRefs(props)
+const ruleFormRef = ref()
+// 选择菜单
+const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
+// 注册
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 去登录
+const toLogin = () => {
+  emit('toLogin')
+}
+// 返回
+const toBack = () => {
+  emit('toBack')
+}
+</script>
+<style scoped lang="scss">
+.user {
+  margin: 30px 30px 0 30px;
+  height: 340px;
+  overflow-y: auto;
+
+  .remark {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      cursor: pointer;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: -0.09px;
+      text-align: right;
+      line-height: 32px;
+    }
+
+    span:hover {
+      color: #2374ff;
+    }
+  }
+
+  .button {
+    padding: 10px 0;
+
+    :deep(.el-button) {
+      width: 100% !important;
+      height: 44px !important;
+      border: 0 !important;
+      color: #f8f8f8 !important;
+      font-size: 16px !important;
+      text-align: center !important;
+      line-height: 40px !important;
+      cursor: pointer !important;
+      font-family: PingFangSC-Regular !important;
+      background-color: #1492ff !important;
+    }
+  }
+
+  .agree {
+    display: flex;
+    align-items: center;
+    padding: 0 0 40px 0;
+    color: #999;
+    font-size: 12px;
+
+    span:last-child {
+      color: #2374ff;
+    }
+  }
+}
+
+.user::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/register/parts/user.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="user">
+    <el-form
+      ref="ruleFormRef"
+      :model="form"
+      :rules="rules"
+      label-width="80px"
+      class="form"
+      label-position="left"
+    >
+      <el-form-item label="账号" prop="account">
+        <el-input v-model="form.account" placeholder="请输入账号">
+          <template #prefix>
+            <el-icon>
+              <User />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="密码" prop="password">
+        <el-input
+          v-model="form.password"
+          type="password"
+          show-password
+          placeholder="请输入登录密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="确认密码" prop="refpassword">
+        <el-input
+          v-model="form.refpassword"
+          type="password"
+          show-password
+          placeholder="请再次确认输入密码"
+        >
+          <template #prefix>
+            <el-icon>
+              <Unlock />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="用户名" prop="nick_name">
+        <el-input v-model="form.nick_name" placeholder="请输入用户名">
+          <template #prefix>
+            <el-icon>
+              <Avatar />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="联系电话" prop="phone">
+        <el-input v-model="form.phone" placeholder="请输入联系电话">
+          <template #prefix>
+            <el-icon>
+              <Iphone />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-col :span="24" class="remark">
+        <span @click="toLogin">已有账号去登录</span>
+        <span @click="toBack">返回首页</span>
+      </el-col>
+      <el-col :span="24" class="button">
+        <el-button type="primary" @click="submitForm(ruleFormRef)">注册</el-button>
+      </el-col>
+      <el-col :span="24" class="agree">
+        <el-checkbox v-model="isAgree"></el-checkbox>
+        <span style="margin: 0 0 0 5px">我已阅读并同意</span
+        ><span @click="dialog = true">《{{ siteInfo.zhTitle }}使用协议》</span>
+      </el-col>
+    </el-form>
+  </div>
+</template>
+<script setup>
+import { siteInfo } from '@/layout/site'
+const props = defineProps({
+  form: { type: Object },
+  rules: { type: Object },
+  isAgree: { type: Boolean, default: false }
+})
+const { form, rules, isAgree } = toRefs(props)
+const ruleFormRef = ref()
+// 选择菜单
+const emit = defineEmits(['submitForm', 'toLogin', 'toBack'])
+// 注册
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+// 去登录
+const toLogin = () => {
+  emit('toLogin')
+}
+// 返回
+const toBack = () => {
+  emit('toBack')
+}
+</script>
+<style scoped lang="scss">
+.user {
+  margin: 30px 30px 0 30px;
+  height: 340px;
+  overflow-y: auto;
+
+  .remark {
+    display: flex;
+    justify-content: space-between;
+
+    span {
+      cursor: pointer;
+      font-family: PingFangSC-Regular;
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: -0.09px;
+      text-align: right;
+      line-height: 32px;
+    }
+
+    span:hover {
+      color: #2374ff;
+    }
+  }
+
+  .button {
+    padding: 10px 0;
+
+    :deep(.el-button) {
+      width: 100% !important;
+      height: 44px !important;
+      border: 0 !important;
+      color: #f8f8f8 !important;
+      font-size: 16px !important;
+      text-align: center !important;
+      line-height: 40px !important;
+      cursor: pointer !important;
+      font-family: PingFangSC-Regular !important;
+      background-color: #1492ff !important;
+    }
+  }
+
+  .agree {
+    display: flex;
+    align-items: center;
+    padding: 0 0 40px 0;
+    color: #999;
+    font-size: 12px;
+
+    span:last-child {
+      color: #2374ff;
+    }
+  }
+}
+
+.user::-webkit-scrollbar {
+  display: none;
+}
+</style>