feat：完善页面样式和功能

package-lock.json

@@ -8,7 +8,6 @@
       "name": "datascreen",
       "version": "0.0.0",
       "dependencies": {
-        "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
         "axios": "^1.7.9",
         "echarts": "^5.5.1",
         "echarts-wordcloud": "^2.0.0",
@@ -18,9 +17,7 @@
         "vue": "^3.5.13",
         "vue-countup-v3": "^1.4.2",
         "vue-echarts": "^7.0.3",
-        "vue-router": "^4.4.5",
+        "vue-router": "^4.4.5"
-        "vue-video-player": "^6.0.0",
-        "vue3-video-play": "^1.3.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^5.2.1",
@@ -427,18 +424,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.26.0.tgz",
-      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
-      "peer": true,
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@babel/template": {
       "version": "7.25.9",
       "resolved": "https://registry.npmmirror.com/@babel/template/-/template-7.25.9.tgz",
@@ -537,11 +522,6 @@
       "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
-    "node_modules/@jiaminghi/color": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmmirror.com/@jiaminghi/color/-/color-1.1.3.tgz",
-      "integrity": "sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg=="
-    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -600,19 +580,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@newpanjing/datav-vue3": {
-      "version": "0.0.0-alpha.0",
-      "resolved": "https://registry.npmmirror.com/@newpanjing/datav-vue3/-/datav-vue3-0.0.0-alpha.0.tgz",
-      "integrity": "sha512-7otS3hY5cwuzdeVJ5LZhbWd0NBUUnJdkFJ6G/BgsUgNJ+zHX5u8ugVfKFz9da5GlLowgjPj+/f0VXQ9IS0YDVg==",
-      "dependencies": {
-        "@jiaminghi/color": "1.1.3",
-        "classnames": "^2.3.2",
-        "lodash-es": "^4.17.21"
-      },
-      "peerDependencies": {
-        "vue": ">=3.2.0"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmmirror.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -830,76 +797,11 @@
         "undici-types": "~6.20.0"
       }
     },
-    "node_modules/@types/video.js": {
-      "version": "7.3.58",
-      "resolved": "https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz",
-      "integrity": "sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==",
-      "peer": true
-    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.16",
       "resolved": "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
       "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
     },
-    "node_modules/@videojs-player/vue": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/@videojs-player/vue/-/vue-1.0.0.tgz",
-      "integrity": "sha512-WonTezRfKu3fYdQLt/ta+nuKH6gMZUv8l40Jke/j4Lae7IqeO/+lLAmBnh3ni88bwR+vkFXIlZ2Ci7VKInIYJg==",
-      "peerDependencies": {
-        "@types/video.js": "7.x",
-        "video.js": "7.x",
-        "vue": "3.x"
-      }
-    },
-    "node_modules/@videojs/http-streaming": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
-      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "3.0.5",
-        "aes-decrypter": "3.1.3",
-        "global": "^4.4.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "^0.22.1",
-        "mux.js": "6.0.1",
-        "video.js": "^6 || ^7"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      },
-      "peerDependencies": {
-        "video.js": "^6 || ^7"
-      }
-    },
-    "node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
-    "node_modules/@videojs/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmmirror.com/@videojs/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "global": "~4.4.0",
-        "is-function": "^1.0.1"
-      }
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -1328,15 +1230,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -1363,18 +1256,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/aes-decrypter": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
-      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0",
-        "pkcs7": "^1.0.4"
-      }
-    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmmirror.com/ajv/-/ajv-6.12.6.tgz",
@@ -1601,11 +1482,6 @@
         "node": ">=6.0"
       }
     },
-    "node_modules/classnames": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.5.1.tgz",
-      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
-    },
     "node_modules/clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmmirror.com/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -1773,12 +1649,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/dom-walk": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmmirror.com/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-      "peer": true
-    },
     "node_modules/echarts": {
       "version": "5.5.1",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
@@ -2214,16 +2084,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/global": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/global/-/global-4.4.0.tgz",
-      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "peer": true,
-      "dependencies": {
-        "min-document": "^2.19.0",
-        "process": "^0.11.10"
-      }
-    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmmirror.com/globals/-/globals-11.12.0.tgz",
@@ -2249,12 +2109,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/hls.js": {
-      "version": "1.5.17",
-      "resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.5.17.tgz",
-      "integrity": "sha512-wA66nnYFvQa1o4DO/BFgLNRKnBTVXpNeldGRBJ2Y0SvFtdwvFKCbqa9zhHoZLoxHhZ+jYsj3aIBkWQQCPNOhMw==",
-      "license": "Apache-2.0"
-    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
@@ -2288,12 +2142,6 @@
       "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
       "dev": true
     },
-    "node_modules/individual": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
-      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g==",
-      "peer": true
-    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2330,12 +2178,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-function": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-      "peer": true
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
@@ -2535,12 +2377,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
-      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
-      "peer": true
-    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz",
@@ -2637,17 +2473,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/m3u8-parser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
-      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "global": "^4.4.0"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.14",
       "resolved": "https://registry.npmmirror.com/magic-string/-/magic-string-0.30.14.tgz",
@@ -2721,15 +2546,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/min-document": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmmirror.com/min-document/-/min-document-2.19.0.tgz",
-      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
-      "peer": true,
-      "dependencies": {
-        "dom-walk": "^0.1.0"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.5.tgz",
@@ -2772,21 +2588,6 @@
         "ufo": "^1.5.4"
       }
     },
-    "node_modules/mpd-parser": {
-      "version": "0.22.1",
-      "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",
-      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
-        "@xmldom/xmldom": "^0.8.3",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "mpd-to-m3u8-json": "bin/parse.js"
-      }
-    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.0.tgz",
@@ -2802,23 +2603,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
-    "node_modules/mux.js": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-6.0.1.tgz",
-      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.11.2",
-        "global": "^4.4.0"
-      },
-      "bin": {
-        "muxjs-transmux": "bin/transmux.js"
-      },
-      "engines": {
-        "node": ">=8",
-        "npm": ">=5"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.8.tgz",
@@ -3015,18 +2799,6 @@
         }
       }
     },
-    "node_modules/pkcs7": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-1.0.4.tgz",
-      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.5.5"
-      },
-      "bin": {
-        "pkcs7": "bin/cli.js"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "1.2.1",
       "resolved": "https://registry.npmmirror.com/pkg-types/-/pkg-types-1.2.1.tgz",
@@ -3080,15 +2852,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
-      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3146,12 +2909,6 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "peer": true
-    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/reusify/-/reusify-1.0.4.tgz",
@@ -3240,15 +2997,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rust-result": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
-      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
-      "peer": true,
-      "dependencies": {
-        "individual": "^2.0.0"
-      }
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -3270,15 +3018,6 @@
       ],
       "peer": true
     },
-    "node_modules/safe-json-parse": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
-      "peer": true,
-      "dependencies": {
-        "rust-result": "^1.0.0"
-      }
-    },
     "node_modules/sass": {
       "version": "1.82.0",
       "resolved": "https://registry.npmmirror.com/sass/-/sass-1.82.0.tgz",
@@ -3623,15 +3362,6 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/throttle-debounce": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
-      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/tinyglobby": {
       "version": "0.2.10",
       "resolved": "https://registry.npmmirror.com/tinyglobby/-/tinyglobby-0.2.10.tgz",
@@ -3907,48 +3637,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-toolkit": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz",
-      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
-      "peer": true
-    },
-    "node_modules/video.js": {
-      "version": "7.21.6",
-      "resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.21.6.tgz",
-      "integrity": "sha512-m41TbODrUCToVfK1aljVd296CwDQnCRewpIm5tTXMuV87YYSGw1H+VDOaV45HlpcWSsTWWLF++InDgGJfthfUw==",
-      "peer": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "2.16.3",
-        "@videojs/vhs-utils": "^3.0.4",
-        "@videojs/xhr": "2.6.0",
-        "aes-decrypter": "3.1.3",
-        "global": "^4.4.0",
-        "keycode": "^2.2.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "0.22.1",
-        "mux.js": "6.0.1",
-        "safe-json-parse": "4.0.0",
-        "videojs-font": "3.2.0",
-        "videojs-vtt.js": "^0.15.5"
-      }
-    },
-    "node_modules/videojs-font": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-3.2.0.tgz",
-      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
-      "peer": true
-    },
-    "node_modules/videojs-vtt.js": {
-      "version": "0.15.5",
-      "resolved": "https://registry.npmmirror.com/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
-      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
-      "peer": true,
-      "dependencies": {
-        "global": "^4.3.1"
-      }
-    },
     "node_modules/vite": {
       "version": "6.0.2",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.0.2.tgz",
@@ -4193,29 +3881,6 @@
         "vue": "^3.2.0"
       }
     },
-    "node_modules/vue-video-player": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/vue-video-player/-/vue-video-player-6.0.0.tgz",
-      "integrity": "sha512-WP47OtefsjMEReRCIKIL3tRRgH/PyNm8ELjsbYgr/WWrYAj5Ih9Adzkzp+ylYOI/v57jJ4O7O4XkbXBCmsTqNw==",
-      "dependencies": {
-        "@videojs-player/vue": "1.x"
-      },
-      "peerDependencies": {
-        "@types/video.js": "7.x",
-        "video.js": "7.x",
-        "vue": "3.x"
-      }
-    },
-    "node_modules/vue3-video-play": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmmirror.com/vue3-video-play/-/vue3-video-play-1.3.2.tgz",
-      "integrity": "sha512-eEwCJ0NIkfVQgTj0I3Kf9b1E/04Qne8mQQiE8r77BocblHsZ2T6af3q8l8Zzs/OvjlpQAQvkN/ACVUOJC3RSXg==",
-      "dependencies": {
-        "hls.js": "^1.0.10",
-        "throttle-debounce": "^3.0.1",
-        "vue": "^3.2.2"
-      }
-    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.2.tgz",

package.json

@@ -9,7 +9,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@newpanjing/datav-vue3": "^0.0.0-alpha.0",
     "axios": "^1.7.9",
     "echarts": "^5.5.1",
     "echarts-wordcloud": "^2.0.0",
@@ -19,9 +18,7 @@
     "vue": "^3.5.13",
     "vue-countup-v3": "^1.4.2",
     "vue-echarts": "^7.0.3",
-    "vue-router": "^4.4.5",
+    "vue-router": "^4.4.5"
-    "vue-video-player": "^6.0.0",
-    "vue3-video-play": "^1.3.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",

src/components/Correspondence/index.vue

@@ -3,56 +3,37 @@
     <div class="top-box">
       <div class="title">融合通信</div>
       <div class="icon-box flex">
-        <div class="item"><img src="/src/assets/images/r-icon-1.png" alt="" /> 白帝城 </div>
+        <div class="item"><img src="/src/assets/images/r-icon-1.png" />白帝城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-2.png" alt="" />三峡之颠</div>
+        <div class="item"><img src="/src/assets/images/r-icon-2.png" />三峡之颠</div>
-        <div class="item"><img src="/src/assets/images/r-icon-3.png" alt="" />龙桥河</div>
+        <div class="item"><img src="/src/assets/images/r-icon-3.png" />龙桥河</div>
-        <div class="item"><img src="/src/assets/images/r-icon-4.png" alt="" />消防队</div>
+        <div class="item"><img src="/src/assets/images/r-icon-4.png" />消防队</div>
-        <div class="item"><img src="/src/assets/images/r-icon-5.png" alt="" />文旅城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-5.png" />文旅城</div>
-        <div class="item"><img src="/src/assets/images/r-icon-6.png" alt="" />交通城</div>
+        <div class="item"><img src="/src/assets/images/r-icon-6.png" />交通城</div>
       </div>
     </div>
     <div class="bom-box">
-      <div class="title">
+      <Title2 title="最近联系" />
-        <span>最近联系</span>
+      <div class="table">
+        <div class="header">
+          <div>人员姓名</div>
+          <div>部门</div>
+          <div>职位</div>
+          <div>时间</div>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item, index) in 10" :key="index">
+            <div>January</div>
+            <div>消防队</div>
+            <div>消防员</div>
+            <div>消防员</div>
+          </div>
+        </div>
       </div>
-      <table class="table">
-        <tr class="tr-th">
-          <th>人员姓名</th>
-          <th>部门</th>
-          <th>职位</th>
-          <th>时间</th>
-        </tr>
-        <tr class="tr-td">
-          <td>January</td>
-          <td>$100</td>
-          <td>January</td>
-          <td>$100</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-        <tr class="tr-td">
-          <td>February</td>
-          <td>$80</td>
-          <td>February</td>
-          <td>$80</td>
-        </tr>
-      </table>
     </div>
   </div>
 </template>
 
 <script setup>
-  import { fitChartSize } from '@/utils/dataUtil'
   const props = defineProps({
     width: {
       type: Number,
@@ -67,57 +48,73 @@
 
 <style lang="scss" scoped>
   .box-4-content {
-    width: vw(300);
+    position: relative;
-    height: vh(1060);
-    background-image: url('/src/assets/images/rt-bg.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
     margin-top: vh(10);
     margin-left: vw(10);
-    position: relative;
+    width: vw(300);
-    z-index: 999;
+    height: vh(1060);
+    background-image: url('@/assets/images/bg-1.png');
+    background-size: 100% 100%;
     .bom-box {
       .table {
         width: 100%;
         margin-top: vh(5);
-        .tr-th {
+        .header {
-          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
+          height: vh(28);
-          border-radius: 0px 0px 0px 0px;
-          // border: 1px solid;
-          border-image: linear-gradient(180deg, rgba(0, 150, 255, 0), rgba(0, 150, 255, 1)) 1 1;
           font-weight: 400;
           font-size: vw(12);
           color: #0096ff;
-          line-height: vh(14);
+          display: flex;
-          text-align: left;
+          background: linear-gradient(180deg, rgba(0, 99, 255, 0) 0%, #0063ff 100%);
-          font-style: normal;
+          & > div {
-          text-transform: none;
+            flex: 1;
-
+            display: flex;
-          th {
+            align-items: center;
-            padding: vw(5);
+            justify-content: center;
           }
         }
-        .tr-td {
+        .list {
+          overflow-y: auto;
+          height: vh(490);
+          /* 滚动条整体样式 */
+          &::-webkit-scrollbar {
+            width: vw(4); /* 滚动条的宽度 */
+          }
+          /* 滚动条轨道 */
+          &::-webkit-scrollbar-track {
+            background: 'transparent'; /* 轨道的背景色 */
+          }
+          /* 滚动条滑块 */
+          &::-webkit-scrollbar-thumb {
+            background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
+            border-radius: 5px; /* 滑块的圆角 */
+          }
+          .item {
+            height: vh(50);
             font-weight: 400;
             font-size: vw(14);
             color: #f1f7ff;
-          line-height: vh(16);
+            display: flex;
-          text-align: left;
+            &:nth-child(2n + 1) {
-          font-style: normal;
+              background: linear-gradient(
-          text-transform: none;
+                90deg,
-
+                rgba(0, 150, 255, 0) 0%,
-          td {
+                rgba(0, 150, 255, 0.22) 100%
-            padding: vh(5) vw(10);
+              );
+            }
+            & > div {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              white-space: nowrap; /* 保证文本在一行内显示 */
+              overflow: hidden; /* 隐藏溢出的内容 */
+              text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
             }
           }
-        .tr-td:nth-child(odd) {
-          background: linear-gradient(90deg, rgba(0, 150, 255, 0) 0%, rgba(0, 150, 255, 0.22) 100%);
         }
       }
       .title {
-        background-image: url('/src/assets/images/nav-l-t-bg.png');
-        background-size: 100% 100%;
-
         span {
           margin-left: vw(30);
           font-weight: 800;
@@ -143,11 +140,9 @@
         color: #ffffff;
         line-height: vh(16);
         flex-wrap: wrap;
-        // margin-left: vw(20);
         .item {
           width: 33.33%;
           margin-top: vh(40);
-          // margin-right: vh(20);
           display: flex;
           flex-direction: column;
           align-items: center;
@@ -157,22 +152,21 @@
           }
           & > img {
             width: vw(54);
-            height: vh(60);
+            height: auto;
           }
         }
       }
       .title {
-        font-weight: 800;
+        width: vw(260);
-        font-size: vw(16);
+        height: vh(26);
-        line-height: vh(26);
         text-align: center;
-        font-style: normal;
+        line-height: vh(26);
-        text-transform: none;
+        margin-left: vw(32.5);
-        background: linear-gradient(90deg, #ffffff 0%, #5cb5ff 100%);
+        font-size: vw(16);
-        -webkit-background-clip: text;
+        font-weight: 800;
-        background-clip: text;
+        color: #fff;
-        -webkit-text-fill-color: transparent;
+        background-image: url('@/assets/images/title-1.png');
-        color: transparent;
+        background-size: 100% 100%;
       }
     }
   }

src/components/Header/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="header">
-    <div v-if="isBack" class="back" @click="handleBack">返回</div>
     <ul class="nav-left">
       <li
         class="nav-left-item"
@@ -27,6 +26,17 @@
         {{ item.name }}
       </li>
     </ul>
+    <div class="weather">
+      <span>25˚C-晴</span>
+      <span class="line">|</span>
+      <span>风速：A2-4级</span>
+      <span class="line">|</span>
+      <span>空气质量：A2-优</span>
+      <span class="ml-20">{{ currentDate }}</span>
+    </div>
+    <div v-if="isBack" class="back" @click="handleBack">
+      <img class="icon" src="@/assets/images/back.png" alt="" /> 返回
+    </div>
   </div>
 </template>
 
@@ -63,6 +73,7 @@
   })
   const emit = defineEmits(['change'])
   const router = useRouter()
+  let currentDate = ref('')
 
   const name = computed(() => {
     if (!props.isSkip && props.navLeft.length > 0) {
@@ -71,6 +82,22 @@
     return props.title
   })
 
+  const fillZero = (value) => {
+    return value < 10 ? `0${value}` : value
+  }
+  const getCurrentDate = () => {
+    var time = new Date()
+    var year = time.getFullYear()
+    var month = time.getMonth() + 1
+    var day = time.getDate()
+    var second = time.getSeconds()
+    var hour = time.getHours()
+    var minute = time.getMinutes()
+    var second = time.getSeconds()
+    currentDate.value = `${year}-${fillZero(month)}-${fillZero(day)} ${hour}:${fillZero(
+      minute
+    )}:${fillZero(second)}`
+  }
   const handleBack = () => {
     router.go(-1)
   }
@@ -81,18 +108,35 @@
       emit('on-change', index)
     }
   }
+  onMounted(() => {
+    getCurrentDate()
+    setInterval(() => {
+      getCurrentDate()
+    }, 1000)
+  })
 </script>
 
 <style scoped lang="scss">
   .header {
     position: absolute;
     left: vw(326);
+    .weather {
+      position: absolute;
+      right: 0;
+      top: vh(10);
+      font-weight: 400;
+      font-size: vw(18);
+      color: #ffffff;
+      .line {
+        margin: 0 vw(10);
+      }
+    }
     .back {
       position: absolute;
-      right: vw(20);
+      right: 0;
-      top: vh(40);
+      top: vh(50);
-      width: vw(120);
+      width: vw(130);
-      height: vh(30);
+      height: vh(36);
       font-weight: 600;
       font-size: vw(20);
       color: #ffffff;
@@ -103,6 +147,11 @@
       border-radius: vw(60);
       border: 1px solid rgba(0, 114, 220, 0.3);
       background: linear-gradient(270deg, rgba(8, 41, 86, 0.16) 0%, #0b61b4 100%);
+      .icon {
+        margin-right: vw(10);
+        width: vw(24);
+        height: auto;
+      }
     }
     .title {
       width: vw(3133);

src/components/ScrollNumber/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="number-digital">
+    <div class="box-item">
+      <li
+        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
+        v-for="(item, index) in orderNum"
+        :key="index"
+      >
+        <span v-if="!isNaN(item)">
+          <i :id="`${prefix}numberItem${index}`">0123456789</i>
+        </span>
+      </li>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  const props = defineProps({
+    count: {
+      type: Number,
+      default: 0
+    },
+    prefix: {
+      type: String,
+      default: ''
+    }
+  })
+
+  const orderNum = ref([])
+
+  const toOrderNum = (num) => {
+    num = num.toString()
+    orderNum.value = num.split('') // 将其便变成数据，渲染至滚动数组
+    nextTick(() => {
+      setNumberTransform()
+    })
+  }
+  watch(
+    () => props.count,
+    (newVal) => {
+      toOrderNum(newVal)
+    },
+    {
+      immediate: true
+    }
+  )
+  function setNumberTransform() {
+    for (let index = 0; index < orderNum.value.length; index++) {
+      const ele = document.getElementById(`${props.prefix}numberItem${index}`)
+      if (ele) {
+        ele.style.transform = `translate(-50%, -${orderNum.value[index] * 10}%)`
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .number-digital {
+    .box-item {
+      position: relative;
+      height: vh(40);
+      list-style: none;
+      color: #2d7cff;
+      writing-mode: vertical-lr;
+      text-orientation: upright;
+      /*文字禁止编辑*/
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      -khtml-user-select: none;
+      user-select: none;
+    }
+
+    /*滚动数字设置*/
+    .number-item {
+      width: vw(40);
+      height: vh(40);
+      margin-right: vw(4);
+      border-radius: vw(4);
+      color: #ffffff;
+      font-size: vw(28);
+      font-weight: bold;
+      background: linear-gradient(180deg, #00b7ff 0%, #0033ff 100%);
+
+      & > span {
+        position: relative;
+        display: inline-block;
+        margin-right: vw(14);
+        width: 100%;
+        height: 100%;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        overflow: hidden;
+
+        & > i {
+          position: absolute;
+          top: vh(10);
+          left: 50%;
+          transform: translate(-50%, 0);
+          transition: transform 1s ease-in-out;
+          letter-spacing: 10px;
+        }
+      }
+    }
+
+    .number-item:last-child {
+      margin-right: 0;
+    }
+
+    .num-dot {
+      display: inline-block;
+      margin-left: 8px;
+      height: 53px;
+      font-size: 47px;
+      font-family: MiSans, MiSans-Demibold;
+      font-weight: normal;
+      text-align: CENTER;
+      color: #ffffff;
+      line-height: 47px;
+    }
+  }
+</style>

src/main.js

@@ -4,11 +4,9 @@ import App from './App.vue'
 import router from './router'
 import '@/styles/reset.css'
 import '@/styles/common.scss'
-// import vue3videoPlay from 'vue3-video-play' // 引入组件
+
-// import 'vue3-video-play/dist/style.css' // 引入css
 const app = createApp(App)
 
-// app.use(vue3videoPlay)
 app.use(createPinia())
 app.use(router)
 

src/router/index.js

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import NotFound from '@/views/404/index.vue'
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -10,17 +12,17 @@ const router = createRouter({
     {
       path: '/monitor',
       name: 'monitor',
-      component: () => import('../views/monitor/index.vue')
+      component: () => import('@/views/monitor/index.vue')
     },
     {
       path: '/sceneTesting',
       name: 'sceneTesting',
-      component: () => import('../views/testing/index.vue')
+      component: () => import('@/views/testing/index.vue')
     },
     {
       path: '/roadTesting',
       name: 'roadTesting',
-      component: () => import('../views/testing/road.vue')
+      component: () => import('@/views/testing/road.vue')
     },
     {
       path: '/scenic',
@@ -41,6 +43,15 @@ const router = createRouter({
       path: '/workOrder',
       name: 'workOrder',
       component: () => import('@/views/workOrder/index.vue')
+    },
+    {
+      path: '/404',
+      name: 'NotFound',
+      component: NotFound
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      redirect: '/404'
     }
   ]
 })

src/styles/common.scss

@@ -43,18 +43,24 @@
 .mt-10 {
   margin-top: vh(10) !important;
 }
+.ml-10 {
+  margin-left: vw(10) !important;
+}
 .mr-10 {
-  margin-right: vh(10) !important;
+  margin-right: vw(10) !important;
 }
 .mt-20 {
   margin-top: vh(20) !important;
 }
 .ml-20 {
-  margin-left: vh(20) !important;
+  margin-left: vw(20) !important;
 }
 .pt-20 {
   padding-top: vh(20) !important;
 }
+.pb-20 {
+  padding-bottom: vh(20) !important;
+}
 .pr-20 {
   padding-right: vh(20) !important;
 }

src/views/404/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="not-found"> 页面走丢啦~ </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="scss">
+  .not-found {
+    flex: 1;
+    text-align: center;
+    margin-top: vh(40);
+    color: #fff;
+  }
+</style>

src/views/home/components/box-2.vue

@@ -2,7 +2,7 @@
   <div class="box-2">
     <Title1 title="景区信息">
       <template #right>
-        <span class="more" />
+        <img class="more" src="@/assets/images/more.png" />
       </template>
     </Title1>
     <div class="flex pt-20">
@@ -118,7 +118,7 @@
     <div class="ticket-box">
       <Title2 title="景区购票数" />
       <div class="ticket-wrap">
-        <img src="@/assets/images/ticket.png" alt="" />
+        <img src="@/assets/images/ticket.png" />
         <div> <span class="label">当日购票量：</span><countup endVal="768578" /> </div>
         <div> <span class="label">未来3天购票量：</span><countup endVal="768578" /> </div>
         <div> <span class="label">3天后购票量：</span><countup endVal="768578" /> </div>
@@ -216,9 +216,7 @@
       right: vw(20);
       cursor: pointer;
       width: vw(60);
-      height: vh(24);
+      height: auto;
-      background-image: url('@/assets/images/more.png');
-      background-size: 100% 100%;
     }
     .item {
       position: relative;
@@ -339,7 +337,7 @@
       }
       .icon {
         width: vw(26);
-        height: vh(28);
+        height: auto;
         margin-right: vw(4);
       }
       .text {
@@ -389,12 +387,13 @@
       }
     }
     .ticket-wrap {
+      margin-top: vh(8);
       display: flex;
       align-items: center;
       justify-content: space-between;
       & > img {
         width: vw(74);
-        height: vh(74);
+        height: auto;
       }
       & > div {
         flex: 1;

src/views/home/components/box-3.vue

@@ -5,15 +5,15 @@
         <div class="left">
           <div class="item">
             <div class="label">今年总游客数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="1" />
           </div>
           <div class="item">
             <div class="label">全县景区总游客人数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="2" />
           </div>
           <div class="item">
             <div class="label">总在园人数</div>
-            <countup v-for="item in count" :endVal="item" />
+            <ScrollNumber :count="count" prefix="3" />
           </div>
         </div>
         <div class="right">
@@ -120,9 +120,8 @@
 </template>
 
 <script setup>
+  import ScrollNumber from '@/components/ScrollNumber/index.vue'
   import countup from 'vue-countup-v3'
-  import Map from '@/components/Map/index.vue'
-
   let count = ref('6945959')
 </script>
 
@@ -288,4 +287,3 @@
     }
   }
 </style>
-

src/views/home/components/box-4.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="box-4">
     <Title1 title="交通信息" />
-    <div class="flex justify-evenly pt-10">
+    <div class="flex justify-evenly pt-10 pb-20">
       <div v-for="item in list" class="cell">
         <img class="icon" :src="item.icon" alt="" width="64" height="64" />
         <div>
@@ -324,7 +324,7 @@
       align-items: center;
       .icon {
         width: vw(64);
-        height: vh(60);
+        height: auto;
       }
       .countup-wrap {
         color: #02f9fa;
@@ -357,7 +357,7 @@
       gap: vw(20);
       .icon {
         width: vw(45);
-        height: vh(48);
+        height: auto;
       }
       & > div {
         flex: 1;
@@ -403,16 +403,17 @@
           display: flex;
           flex-direction: column;
           justify-content: center;
-          background-size: 100% 100%;
           box-sizing: border-box;
         }
         .car {
           @extend .icon;
           background-image: url('@/assets/images/icon-6.png');
+          background-size: 100% 100%;
         }
         .ship {
           @extend .icon;
           background-image: url('@/assets/images/icon-7.png');
+          background-size: 100% 100%;
         }
         .label {
           font-weight: 400;

src/views/home/components/vacancy.vue

@@ -66,15 +66,15 @@
             fontSize: fitChartSize(12)
           },
           verticalAlign: 'bottom',
-          padding: [0, 0, 6, 0],
+          padding: [0, 0, fitChartSize(6), 0],
           inside: true,
           formatter: function (value) {
-            return `余{value|${value}}`
+            return `{label|余} {value|${value}}`
           },
           rich: {
-            name: {
+            label: {
               align: 'center',
-              color: '#D3E5FF',
+              color: '#fff',
               fontSize: fitChartSize(14),
               fontFamily: 'Source Han Sans CN'
             },

src/views/home/index.vue

@@ -11,6 +11,7 @@
   import box2 from './components/box-2.vue'
   import box3 from './components/box-3.vue'
   import box4 from './components/box-4.vue'
+  let numm = ref(1231241)
   const navLeft = [
     { name: '安全', path: '/monitor' },
     { name: '景区', path: '/scenic' },
@@ -22,5 +23,8 @@
     { name: '舆情', path: '/sentiment' },
     { name: '酒店' }
   ]
+  const handleChange = () => {
+    numm.value++
+  }
   onMounted(() => {})
 </script>

src/views/scenic/components/box-2.vue

@@ -269,8 +269,7 @@
     }
   }
   .container {
-    flex: 1;
+    margin: vh(120) 0 0 vw(10);
-    margin: vh(120) vw(10) 0 vw(10);
     .count-box {
       padding: 0 vw(10);
       height: vh(70);
@@ -289,12 +288,12 @@
     }
     .box {
       @extend .bg;
-      width: vw(575);
+      width: vw(570);
       height: vh(475);
     }
     .box-1 {
       @extend .bg;
-      width: vw(770);
+      width: vw(750);
       height: vh(475);
     }
     .box-2 {
@@ -309,12 +308,12 @@
     }
     .box-4 {
       @extend .bg;
-      width: vw(850);
+      width: vw(840);
       height: vh(465);
     }
     .box-5 {
       @extend .bg;
-      width: vw(670);
+      width: vw(650);
       height: vh(465);
     }
     .car-box {

src/views/scenic/components/top.vue

@@ -182,6 +182,6 @@
 <style scoped lang="scss">
   .top {
     width: 100%;
-    height: vh(300);
+    height: vh(360);
   }
 </style>

src/views/sentiment/index.vue

@@ -102,8 +102,7 @@
 
 <style scoped lang="scss">
   .container {
-    flex: 1;
+    margin-top: vh(120);
-    margin: vh(120) vw(10) 0 vw(10);
     .bg {
       background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
     }
@@ -112,7 +111,7 @@
       margin-top: vh(35);
     }
     .box-1 {
-      width: vw(770);
+      width: vw(780);
       height: vh(470);
       @extend .bg;
     }

src/views/workOrder/index.vue

@@ -1,12 +1,10 @@
 <template>
-  <main class="wrapper">
+  <Header title="工单消息" is-skip is-back />
   <CoreVideo />
   <box1 />
   <box2 />
   <box3 />
-    <Header title="工单消息" is-skip  />
   <Correspondence />
-  </main>
 </template>
 
 <script setup>
@@ -16,12 +14,4 @@
   onMounted(() => {})
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-  .wrapper {
-    display: flex;
-    width: 100vw;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #0a254b;
-  }
-</style>