diff --git a/package-lock.json b/package-lock.json
index 795b6af..66a651b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,9 +25,8 @@
         "@vitejs/plugin-vue": "^5.2.3",
         "amfe-flexible": "^2.2.1",
         "autoprefixer": "^10.4.21",
-        "less": "^4.3.0",
-        "less-loader": "^12.3.0",
         "prettier": "^3.6.0",
+        "sass": "^1.90.0",
         "vite": "^6.3.5",
         "vite-plugin-remove-console": "^2.2.0"
       }
@@ -618,6 +617,316 @@
         "node": ">=10"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -1257,6 +1566,20 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.25.1",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.1.tgz",
@@ -1457,6 +1780,20 @@
       "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==",
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/dotenv": {
       "version": "16.6.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.0.tgz",
@@ -1538,20 +1875,6 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "prr": "~1.0.1"
-      },
-      "bin": {
-        "errno": "cli.js"
-      }
-    },
     "node_modules/errx": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/errx/-/errx-0.1.0.tgz",
@@ -1698,6 +2021,20 @@
         }
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -1838,14 +2175,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true
-    },
     "node_modules/has-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -1891,20 +2220,6 @@
       "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
       "license": "MIT"
     },
-    "node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ignore": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
@@ -1914,20 +2229,49 @@
         "node": ">= 4"
       }
     },
-    "node_modules/image-size": {
-      "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
-      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+    "node_modules/immutable": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.3.tgz",
+      "integrity": "sha512-+chQdDfvscSF1SJqv2gn4SRO2ZyS3xL3r7IW/wWEEzrzLisnOlKiQu5ytC/BVNcS15C39WT2Hg/bjKjDMcu+zg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "bin": {
-        "image-size": "bin/image-size.js"
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-what": {
       "version": "4.1.16",
       "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
@@ -1970,80 +2314,6 @@
       "integrity": "sha512-xYSH7AvuQ6nXkq42x0v5S8/Iry+cfulBz/DJQzhIyESdLD7425jXsPy4vn5cCXU+HhRN2kVw51Vd1K6/By4BQg==",
       "license": "MIT"
     },
-    "node_modules/less": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.3.0.tgz",
-      "integrity": "sha512-X9RyH9fvemArzfdP8Pi3irr7lor2Ok4rOttDXBhlwDg+wKQsXOXgHWduAJE1EsF7JJx0w0bcO6BC6tCKKYnXKA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "copy-anything": "^2.0.1",
-        "parse-node-version": "^1.0.1",
-        "tslib": "^2.3.0"
-      },
-      "bin": {
-        "lessc": "bin/lessc"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "optionalDependencies": {
-        "errno": "^0.1.1",
-        "graceful-fs": "^4.1.2",
-        "image-size": "~0.5.0",
-        "make-dir": "^2.1.0",
-        "mime": "^1.4.1",
-        "needle": "^3.1.0",
-        "source-map": "~0.6.0"
-      }
-    },
-    "node_modules/less-loader": {
-      "version": "12.3.0",
-      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-12.3.0.tgz",
-      "integrity": "sha512-0M6+uYulvYIWs52y0LqN4+QM9TqWAohYSNTo4htE8Z7Cn3G/qQMEmktfHmyJT23k+20kU9zHH2wrfFXkxNLtVw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "@rspack/core": "0.x || 1.x",
-        "less": "^3.5.0 || ^4.0.0",
-        "webpack": "^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/core": {
-          "optional": true
-        },
-        "webpack": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/less/node_modules/copy-anything": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
-      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-what": "^3.14.1"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mesqueeb"
-      }
-    },
-    "node_modules/less/node_modules/is-what": {
-      "version": "3.14.1",
-      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
-      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/loadsh": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/loadsh/-/loadsh-0.0.4.tgz",
@@ -2100,21 +2370,6 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
-    "node_modules/make-dir": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "pify": "^4.0.1",
-        "semver": "^5.6.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -2130,18 +2385,33 @@
       "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
-    "node_modules/mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "bin": {
-        "mime": "cli.js"
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/mime-db": {
@@ -2218,23 +2488,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
-    "node_modules/needle": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
-      },
-      "engines": {
-        "node": ">= 4.4.x"
-      }
+      "optional": true
     },
     "node_modules/node-fetch-native": {
       "version": "1.6.6",
@@ -2290,16 +2550,6 @@
       "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==",
       "license": "MIT"
     },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -2330,17 +2580,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pinia": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.3.tgz",
@@ -2463,14 +2702,6 @@
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true
-    },
     "node_modules/quansync": {
       "version": "0.2.10",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.10.tgz",
@@ -2556,21 +2787,26 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+    "node_modules/sass": {
+      "version": "1.90.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.90.0.tgz",
+      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true
-    },
-    "node_modules/sax": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
-      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
     },
     "node_modules/scule": {
       "version": "1.3.0",
@@ -2578,28 +2814,6 @@
       "integrity": "sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==",
       "license": "MIT"
     },
-    "node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -2689,6 +2903,20 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
diff --git a/package.json b/package.json
index 77865b8..2841419 100644
--- a/package.json
+++ b/package.json
@@ -26,9 +26,8 @@
     "@vitejs/plugin-vue": "^5.2.3",
     "amfe-flexible": "^2.2.1",
     "autoprefixer": "^10.4.21",
-    "less": "^4.3.0",
-    "less-loader": "^12.3.0",
     "prettier": "^3.6.0",
+    "sass": "^1.90.0",
     "vite": "^6.3.5",
     "vite-plugin-remove-console": "^2.2.0"
   }
diff --git a/src/App.vue b/src/App.vue
index 24b2a5f..1f7051a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -50,10 +50,11 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
+@use "@/utils/self-adaption.scss" as *;
 .app-container {
-  max-width: 100vw;
-  min-height: 100vh;
+  max-width: vw(1920);
+  min-height: vh(1080);
   background: url("@/assets/images/bci.png");
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/src/components/timeAxis.vue b/src/components/timeAxis.vue
index 148c5db..1bb0b90 100644
--- a/src/components/timeAxis.vue
+++ b/src/components/timeAxis.vue
@@ -255,7 +255,7 @@ defineExpose({
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .timeAxis-component {
   width: 100%;
   height: 100%;
diff --git a/src/layout/components/aside/index.vue b/src/layout/components/aside/index.vue
index acfe129..1a99f00 100644
--- a/src/layout/components/aside/index.vue
+++ b/src/layout/components/aside/index.vue
@@ -11,16 +11,13 @@
             class="title-active-left"
           />
           <div class="tltlemenu-left">
-            <img
-              src="@/assets/images/titlelogo.png"
-              style="width: 20px; height: 20px; margin-right: 12px"
-            />
+            <img src="@/assets/images/titlelogo.png" class="titlelogo" />
             {{ item.title }}
           </div>
-          <img src="@/assets/images/titleright.png" alt="" style="width: 66px; height: 16px" />
+          <img src="@/assets/images/titleright.png" class="titleright" />
         </div>
         <ul class="menu-items">
-          <div v-for="child in item.subItems" :key="child.index" style="text-decoration: none">
+          <div v-for="child in item.subItems" :key="child.index">
             <li
               :key="child.index"
               class="el-menu-item"
@@ -114,23 +111,23 @@ onMounted(() => {
 })
 </script>
 
-<style lang="less">
+<style scoped lang="scss">
 .aside-component {
   width: 100%;
   height: 102.1%;
   .menu {
     width: 100%;
     height: 100%;
-    border-width: 2px;
+    border-width: vw(2);
     border-style: solid;
     border-image: linear-gradient(to bottom, #3aa1f8, #3aa1f833) 1;
     background-image: linear-gradient(to right, #063d7133, #081e38cc);
     display: flex;
     flex-direction: column;
-    padding: 10px 10px;
+    padding: vh(10) vw(10);
     .menu-title {
       cursor: pointer;
-      padding: 10px;
+      padding: vh(10) vw(10);
       width: 100%;
       display: flex;
       align-items: center;
@@ -138,9 +135,13 @@ onMounted(() => {
       border-radius: 2px;
       background: linear-gradient(90deg, rgba(24, 57, 92, 0.66) 0%, rgba(51, 120, 194, 0) 100%);
       &:hover {
-        border-radius: 2px;
+        border-radius: vw(2);
         background: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
       }
+      .titleright {
+        width: vw(66);
+        height: vh(16);
+      }
     }
   }
 }
@@ -153,45 +154,49 @@ onMounted(() => {
   background-size: contain;
   position: relative;
   border: none;
-  padding-left: 30px;
+  padding-left: vw(30);
 }
 
 .title-active-left {
   position: absolute;
   left: 0;
   top: 8%;
-  width: 3px; /* 根据实际图片大小调整 */
+  width: vw(3); /* 根据实际图片大小调整 */
   height: 88%;
   z-index: 1;
 }
 
 .el-menu-item {
   width: 100%;
-  height: 36px;
-  margin: 12px 0;
+  margin: vh(12) 0;
   cursor: pointer;
   color: #fff;
-  border-radius: 2px;
+  border-radius: vw(2);
   .el-menu-child-font {
-    margin-left: 20px;
+    margin-left: vw(20);
   }
 }
 
 .el-menu-item.active {
   background-image: linear-gradient(270deg, rgba(14, 167, 213, 0) 0%, rgba(8, 118, 190, 0.24) 100%);
-  border-radius: 2px;
+  border-radius: vw(2);
 }
 
 .tltlemenu-left {
   display: flex;
   align-items: center;
+  .titlelogo {
+    width: vw(20);
+    height: vh(20);
+    margin-right: vw(12);
+  }
 }
 
 .sub-menu-items {
   list-style-type: none;
   padding: 0;
   margin: 0;
-  margin-top: 5px;
+  margin-top: vh(5);
 }
 
 .el-menu-item:hover {
diff --git a/src/layout/components/dialog/index.vue b/src/layout/components/dialog/index.vue
index f9a5b3e..f65d6d6 100644
--- a/src/layout/components/dialog/index.vue
+++ b/src/layout/components/dialog/index.vue
@@ -20,19 +20,19 @@ const props = defineProps({
 const openDialog = ref(props.openDialog)
 </script>
 
-<style lang="less">
+<style lang="scss">
 :deep(.custom-dialog-prepare) {
-  width: 480px;
-  height: 250px;
+  width: vw(480);
+  height: vh(250);
   background: url("@/assets/images/preparation.png") no-repeat center;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 :deep(.custom-dialog-prepare) .pre-icon {
-  width: 30px;
-  height: 30px;
-  margin-right: 10px;
+  width: vw(30);
+  height: vh(30);
+  margin-right: vw(10);
 }
 :deep(.custom-dialog-prepare) .center-tips {
   display: flex;
diff --git a/src/layout/components/header/index.vue b/src/layout/components/header/index.vue
index a3d7a02..707c2d2 100644
--- a/src/layout/components/header/index.vue
+++ b/src/layout/components/header/index.vue
@@ -4,7 +4,7 @@
 
 <script setup></script>
 
-<style lang="less">
+<style lang="scss">
 .header-logo {
   width: 100%;
   height: 100%;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 00df27a..c2bb278 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -24,27 +24,27 @@ const openDialog = ref(false)
 const handleOpenDialog = (isOpen) => (openDialog.value = isOpen)
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .el-container-beside {
   width: 100%;
   display: flex;
   flex-direction: column;
   .el-header {
     width: 100%;
-    height: 110px;
+    height: vh(125);
     padding: 0;
   }
   .el-aside {
     overflow: visible;
     color: aliceblue;
     font-family: Arial, sans-serif;
-    margin-left: 20px;
-    margin-bottom: 20px;
+    margin-left: vw(20);
+    margin-bottom: vh(20);
   }
   .el-main {
     flex: 1;
     padding: 0 0;
-    padding: 0 13px;
+    padding: 0 vw(13);
   }
 }
 </style>
diff --git a/src/store/authentication/index.js b/src/store/authentication/index.js
index b57adf5..f2e04cc 100644
--- a/src/store/authentication/index.js
+++ b/src/store/authentication/index.js
@@ -19,12 +19,27 @@ export const useLoginStore = defineStore("loginStore", {
       ElMessage.success("登录成功!")
       router.push("/navigation")
     },
+
     async loginForRefreshToken() {
-      const res = await refreshToken()
-      if (res.code == 200) {
-        this.setToken(res.data.accessToken)
-        return true // 刷新成功
-      } else {
+      try {
+        const res = await refreshToken()
+        console.log('刷新token结果:', res)
+        if (res.code === 200) {
+          this.setToken(res.data.accessToken)
+          return true // 刷新成功
+        } else {
+          // 刷新失败，清除token并跳转登录
+          this.token = null
+          cache.removeItem("token")
+          router.push("/login")
+          return false
+        }
+      } catch (error) {
+        console.error("刷新token失败:", error)
+        // 网络错误或其他异常，清除token并跳转登录
+        this.token = null
+        cache.removeItem("token")
+        router.push("/login")
         return false
       }
     }
diff --git a/src/utils/echarts-self-adaption.js b/src/utils/echarts-self-adaption.js
new file mode 100644
index 0000000..72629c1
--- /dev/null
+++ b/src/utils/echarts-self-adaption.js
@@ -0,0 +1,3 @@
+export function nowSize(val, initWidth = 1920) {
+  return val * (window.visualViewport.width / initWidth)
+}
diff --git a/src/utils/self-adaption.scss b/src/utils/self-adaption.scss
new file mode 100644
index 0000000..5adbfa4
--- /dev/null
+++ b/src/utils/self-adaption.scss
@@ -0,0 +1,12 @@
+@use "sass:math";
+
+$designWidth: 1920;
+$designHeight: 1080;
+
+@function vw($px) {
+  @return math.div($px, $designWidth) * 100vw;
+}
+
+@function vh($px) {
+  @return math.div($px, $designHeight) * 100vh;
+}
diff --git a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue
index 5570525..9fcc717 100644
--- a/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue
+++ b/src/views/GroupEvolution/abnormalGroup/components/anomalousContentInfo.vue
@@ -63,7 +63,7 @@ const props = defineProps({
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .anomalousContent-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue b/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue
index 200c4d0..a65a87f 100644
--- a/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue
+++ b/src/views/GroupEvolution/abnormalGroup/components/groupPanel.vue
@@ -56,7 +56,7 @@ const props = defineProps({
 })
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .groupPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/abnormalGroup/index.vue b/src/views/GroupEvolution/abnormalGroup/index.vue
index 6d197c6..1e6f6ec 100644
--- a/src/views/GroupEvolution/abnormalGroup/index.vue
+++ b/src/views/GroupEvolution/abnormalGroup/index.vue
@@ -114,7 +114,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/GroupEvolution/components/groupChart.vue b/src/views/GroupEvolution/components/groupChart.vue
index caca2e4..aa91a86 100644
--- a/src/views/GroupEvolution/components/groupChart.vue
+++ b/src/views/GroupEvolution/components/groupChart.vue
@@ -312,7 +312,7 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupChart-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/components/groupGraph.vue b/src/views/GroupEvolution/components/groupGraph.vue
index 21f3d87..e4e3498 100644
--- a/src/views/GroupEvolution/components/groupGraph.vue
+++ b/src/views/GroupEvolution/components/groupGraph.vue
@@ -380,7 +380,7 @@ watch(
 )
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupGraph-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/components/groupPanel.vue b/src/views/GroupEvolution/components/groupPanel.vue
index 1c76c14..9e1fd47 100644
--- a/src/views/GroupEvolution/components/groupPanel.vue
+++ b/src/views/GroupEvolution/components/groupPanel.vue
@@ -77,7 +77,7 @@ const typeTitle = ref({
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/components/groupPost.vue b/src/views/GroupEvolution/components/groupPost.vue
index c1b304e..7254653 100644
--- a/src/views/GroupEvolution/components/groupPost.vue
+++ b/src/views/GroupEvolution/components/groupPost.vue
@@ -281,7 +281,7 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .postList-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/components/groupShow.vue b/src/views/GroupEvolution/components/groupShow.vue
index f57f6fc..c0602bd 100644
--- a/src/views/GroupEvolution/components/groupShow.vue
+++ b/src/views/GroupEvolution/components/groupShow.vue
@@ -124,7 +124,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupShow-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/groupIdentifyDiscovery/index.vue b/src/views/GroupEvolution/groupIdentifyDiscovery/index.vue
index 822154e..6f9694b 100644
--- a/src/views/GroupEvolution/groupIdentifyDiscovery/index.vue
+++ b/src/views/GroupEvolution/groupIdentifyDiscovery/index.vue
@@ -91,7 +91,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue b/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
index 0afc67c..d45e906 100644
--- a/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
+++ b/src/views/GroupEvolution/groupMember/components/groupAnalysis.vue
@@ -81,7 +81,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupAnalysis-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/groupMember/components/groupPanel.vue b/src/views/GroupEvolution/groupMember/components/groupPanel.vue
index 27ff235..ab3110d 100644
--- a/src/views/GroupEvolution/groupMember/components/groupPanel.vue
+++ b/src/views/GroupEvolution/groupMember/components/groupPanel.vue
@@ -300,7 +300,7 @@ const handleResize = () => {
 // })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/groupMember/index.vue b/src/views/GroupEvolution/groupMember/index.vue
index 2868ed3..cb3e877 100644
--- a/src/views/GroupEvolution/groupMember/index.vue
+++ b/src/views/GroupEvolution/groupMember/index.vue
@@ -121,7 +121,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue b/src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue
index 689229c..2ad3ecb 100644
--- a/src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue
+++ b/src/views/GroupEvolution/groupStructure/components/groupAnalysis.vue
@@ -78,7 +78,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupAnalysis-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/groupStructure/components/groupPanel.vue b/src/views/GroupEvolution/groupStructure/components/groupPanel.vue
index a8689d2..908ead6 100644
--- a/src/views/GroupEvolution/groupStructure/components/groupPanel.vue
+++ b/src/views/GroupEvolution/groupStructure/components/groupPanel.vue
@@ -225,7 +225,7 @@ const focusedTopicMap = {
 onMounted(() => {})
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .groupPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/GroupEvolution/groupStructure/index.vue b/src/views/GroupEvolution/groupStructure/index.vue
index 7004fe7..b0ef654 100644
--- a/src/views/GroupEvolution/groupStructure/index.vue
+++ b/src/views/GroupEvolution/groupStructure/index.vue
@@ -132,7 +132,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorGraph.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorGraph.vue
index c2fa8e6..5781de4 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorGraph.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorGraph.vue
@@ -71,15 +71,15 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
-  width: 640px;
-  border-width: 0px, 0px, 0px, 0px;
+  width: vw(640);
+  border-width: 0, 0, 0, 0;
   border-style: solid;
   border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
   background-color: rgba(6, 45, 90, 1);
-  border: 1px solid #1a8bff;
-  border-radius: 2px;
+  border: vw(1) solid #1a8bff;
+  border-radius: vw(2);
   padding: 0 0;
   z-index: 1;
 }
@@ -87,7 +87,7 @@ onMounted(() => {
 :deep(.custom-dialog) .dialog-content .content {
   color: rgba(255, 255, 255, 0.8);
   font-family: "PingFang SC";
-  font-size: 16px;
+  font-size: vw(16);
   font-style: normal;
   font-weight: 400;
   opacity: 0.7;
@@ -104,18 +104,18 @@ onMounted(() => {
   }
 
   .statistics-container {
-    height: 42px;
+    height: vh(42);
     width: 97%;
-    border-radius: 4px;
+    border-radius: vw(4);
     border: 1px solid #3aa1f8;
     background: linear-gradient(270deg, rgba(0, 82, 125, 0.48) 0%, rgba(0, 200, 255, 0.23) 100%);
-    backdrop-filter: blur(3px);
+    backdrop-filter: blur(vw(3));
     display: flex;
     justify-content: space-around;
     align-items: center;
     position: absolute;
-    bottom: 13px;
-    left: 10px;
+    bottom: vh(13);
+    left: vw(10);
     .statistics-item {
       display: flex;
       height: 100%;
@@ -123,13 +123,13 @@ onMounted(() => {
       align-items: center;
       color: #fff;
       .statistics-item-icon {
-        margin-right: 5px;
-        margin-top: 2px;
+        margin-right: vw(5);
+        margin-top: vh(2);
       }
       .statistics-item-name {
         color: #fff;
         font-family: OPPOSans;
-        font-size: 14px;
+        font-size: vw(14);
         font-style: normal;
         font-weight: 400;
         line-height: normal;
@@ -137,7 +137,7 @@ onMounted(() => {
       .statistics-item-number {
         color: #fff;
         font-family: D-DIN;
-        font-size: 17px;
+        font-size: vw(17);
         font-style: normal;
         font-weight: 700;
       }
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorPost.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorPost.vue
index 66b708e..6b9eeea 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorPost.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/anchorPost.vue
@@ -3,7 +3,7 @@
     <img
       src="@/assets/images/head/ContextoftheincidentTitle.png"
       alt=""
-      style="margin-top: -17px; margin-left: -11px"
+      class="ContextoftheincidentTitle"
     />
     <div
       class="post-list-wrapper"
@@ -110,31 +110,31 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .anchorStatistics-component {
   width: 100%;
   height: 100%;
+  .ContextoftheincidentTitle {
+    margin-top: vh(-18);
+    margin-left: vw(-12);
+  }
   .post-list-wrapper {
     width: 100%;
     height: 80%;
     overflow: auto;
-  }
-  /* 滚动条整体样式 - WebKit浏览器 */
-  .post-list-wrapper::-webkit-scrollbar {
-    width: 3px; /* 垂直滚动条宽度 */
-    height: 5px; /* 水平滚动条高度 */
+    &::-webkit-scrollbar {
+      width: vw(3); /* 垂直滚动条宽度 */
+      height: vh(5); /* 水平滚动条高度 */
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
+      border-radius: vw(4);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
+    }
   }
 
-  /* 滚动条滑块 */
-  .post-list-wrapper::-webkit-scrollbar-thumb {
-    background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
-    border-radius: 4px;
-  }
-
-  /* 鼠标悬停在滑块上的效果 */
-  .post-list-wrapper::-webkit-scrollbar-thumb:hover {
-    background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
-  }
   .scrolling-content {
     display: flex;
     flex-direction: column;
@@ -151,16 +151,16 @@ onBeforeUnmount(() => {
   .post-item {
     display: flex;
     align-items: center;
-    height: 36px;
-    padding: 0 16px;
+    height: vh(36);
+    padding: 0 vw(16);
     background: linear-gradient(90deg, rgba(63, 169, 245, 0.16) 0%, rgba(0, 84, 187, 0) 100%);
-    border-left: 2px solid #3fa9f5;
+    border-left: vw(2) solid #3fa9f5;
     color: white;
-    font-size: 14px;
-    gap: 12px;
+    font-size: vw(14);
+    gap: vw(12);
     flex-shrink: 0;
     cursor: pointer;
-    margin: 8px 0;
+    margin: vh(8) 0;
   }
 
   .post-item.highlighted {
@@ -170,15 +170,15 @@ onBeforeUnmount(() => {
   .post-type {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: vw(8);
     flex-shrink: 0;
   }
 
   .post-type-text {
     color: #8efbff;
-    font-size: 14px;
+    font-size: vw(14);
     font-weight: 400;
-    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+    text-shadow: 0px vh(1) vh(1) rgba(0, 0, 0, 0.25);
   }
 
   .timestamp {
@@ -196,17 +196,17 @@ onBeforeUnmount(() => {
   .influence-section {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: vw(8);
     flex-shrink: 0;
   }
   .influence-label {
-    width: 90px;
+    width: vw(90);
     display: flex;
     justify-content: flex-start;
   }
   .influence-bar {
-    width: 200px;
-    height: 10px;
+    width: vw(200);
+    height: vh(10);
     position: relative;
     display: flex;
     align-items: center;
@@ -214,14 +214,14 @@ onBeforeUnmount(() => {
 
   .bar-track {
     width: 100%;
-    height: 2px;
+    height: vh(2);
     background-color: rgba(208, 222, 238, 0.1);
     position: absolute;
   }
 
   .bar-fill {
     position: absolute;
-    height: 2px;
+    height: vh(2);
     background: linear-gradient(270deg, #00f3ff 0%, #00527d 100%);
   }
 
@@ -229,20 +229,20 @@ onBeforeUnmount(() => {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    height: 16px;
-    width: 16px;
+    height: vh(16);
+    width: vw(16);
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
   .bar-handle {
-    width: 10px;
-    height: 10px;
+    width: vw(10);
+    height: vh(10);
     border-radius: 50%;
     background-color: #e0f1ff;
     position: relative;
-    box-shadow: 0 0 6px 0 rgba(13, 97, 255, 0.8);
+    box-shadow: 0 0 vw(6) 0 rgba(13, 97, 255, 0.8);
   }
 
   .bar-handle::before {
@@ -251,10 +251,10 @@ onBeforeUnmount(() => {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: 16px;
-    height: 16px;
+    width: vw(16);
+    height: vh(16);
     border-radius: 50%;
-    border: 1px solid rgba(21, 154, 255, 0.3);
+    border: vw(1) solid rgba(21, 154, 255, 0.3);
   }
 }
 </style>
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue
index b022f5e..88f0fc1 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/attentionTopic.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, watch } from "vue"
+import { ref, onMounted, onUnmounted } from "vue"
 import * as echarts from "echarts"
 import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index"
 const keyNodeStore = useKeyNodeRecognitionStore()
@@ -267,36 +267,36 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .attentionTopic-component {
   width: 100%;
   height: 100%;
   .headerImage {
-    margin-top: -7px;
+    margin-top: vh(-8);
   }
   .attentionTopic-content {
-    padding: 10px 10px;
+    padding: vh(10) vw(10);
     color: #fff;
     .topic-list {
       width: 100%;
-      height: 285px;
+      height: vh(285);
       overflow: auto;
       &::-webkit-scrollbar {
-        width: 3px; /* 垂直滚动条宽度 */
-        height: 5px; /* 水平滚动条高度 */
+        width: vw(3); /* 垂直滚动条宽度 */
+        height: vh(5); /* 水平滚动条高度 */
       }
       &::-webkit-scrollbar-thumb {
         background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
-        border-radius: 4px;
+        border-radius: vw(4);
       }
       &::-webkit-scrollbar-thumb:hover {
         background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
       }
       .topic-item {
         width: 100%;
-        height: 70px;
+        height: vh(70);
         border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
-        padding: 10px 5px;
+        padding: vh(10) vw(5);
         .topic-item-content {
           cursor: pointer;
           width: 100%;
@@ -310,11 +310,11 @@ onUnmounted(() => {
           }
           &:hover {
             background-color: #182441;
-            border-radius: 5px;
+            border-radius: vw(5);
           }
           .topic-content {
-            width: 220px;
-            font-size: 15px;
+            width: vw(220);
+            font-size: vw(15);
             white-space: nowrap; /* 强制不换行 */
             overflow: hidden; /* 隐藏溢出内容 */
             text-overflow: ellipsis; /* 用省略号代替溢出文本 */
@@ -324,7 +324,7 @@ onUnmounted(() => {
     }
     .topic-chart {
       width: 100%;
-      height: 200px;
+      height: vh(200);
     }
   }
 }
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue
index ccbb06a..c9aee6c 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/communityNode.vue
@@ -154,20 +154,6 @@ const initChart = async () => {
       {
         data: categories.map((c) => ({
           name: c.name,
-          /* itemStyle: {
-            color:
-              c.category === 0
-                ? new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    { offset: 1, color: "#1a3860" }, // 最左侧
-                    { offset: 0.5, color: "#38546b" }, // 中间
-                    { offset: 0, color: "#5fb3b3" } // 最右侧
-                  ]) // 分类0的渐变
-                : new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    { offset: 0, color: "#9eec9c" },
-                    { offset: 0.37, color: "#aef295" },
-                    { offset: 1, color: "#c2f989" }
-                  ])
-          }, */
           icon: c.icon
         })),
         right: 15,
@@ -329,19 +315,24 @@ const handleClickNode = () => {
   })
 }
 
+//echarts自适应方法
+window.addEventListener("resize", function () {
+  chart.resize()
+})
+
 onMounted(() => {
   initChart()
   handleClickNode()
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .communityNode-component {
   width: 100%;
   height: 100%;
   .container {
     width: 100%;
-    height: 450px;
+    height: vh(450);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/detailNode.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/detailNode.vue
index a631e64..4f4b609 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/detailNode.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/detailNode.vue
@@ -395,7 +395,7 @@ onMounted(async () => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .detailNode-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue
index 346064e..25b4412 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/monitoring.vue
@@ -4,7 +4,7 @@
     <div class="monitor-list" ref="monitorListRef">
       <div class="monitor-item" v-for="(item, index) in anchorMonitorList" :key="index">
         <div class="monitor-item-content">
-          <img :src="item.avatar" alt="" class="avatar" />
+          <img :src="item.avatar" class="avatar" />
           <div class="context">
             <div class="title-and-time">
               <div class="title">{{ item.commenter }}</div>
@@ -38,7 +38,7 @@ const props = defineProps({
 const sortAnchorMonitorListByTime = (anchorMonitorList) => {
   return anchorMonitorList.sort((a, b) => {
     // 将时间字符串转换为时间戳进行比较
-    return new Date(a.time.trim()) - new Date(b.time.trim());
+    return new Date(a.time.trim()) - new Date(b.time.trim())
   })
 }
 props.anchorMonitorList = sortAnchorMonitorListByTime(props.anchorMonitorList)
@@ -68,42 +68,51 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .monitoring-component {
   width: 100%;
   height: 100%;
-
+  padding: 0 vw(10);
   .headerImage {
-    margin-top: -7px;
+    margin-top: vh(-8);
+    margin-left: vw(-12);
   }
   .monitor-list {
-    padding: 20px 20px;
-    margin-bottom: 15px;
+    padding: vh(20) vw(10);
     width: 100%;
-    height: 190px;
+    height: vh(190);
     overflow: auto;
-    -ms-overflow-style: none; /* IE 和 Edge */
-    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar {
+      width: vw(3); /* 垂直滚动条宽度 */
+      height: vh(5); /* 水平滚动条高度 */
+    }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
+      border-radius: vw(4);
+    }
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
+    }
     .monitor-item {
       width: 100%;
-      height: 80px;
+      height: vh(80);
       border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
       display: flex;
       align-items: center;
       .monitor-item-content {
         width: 100%;
         height: 80%;
-        padding: 0px 10px;
+        padding: vh(0) vw(10);
         display: flex;
         align-items: center;
         cursor: pointer;
         .avatar {
-          width: 32px;
-          height: 32px;
-          border-radius: 5px;
+          width: vw(32);
+          height: vh(32);
+          border-radius: vw(5);
         }
         .context {
-          padding-left: 15px;
+          padding-left: vw(15);
           flex: 1;
           display: flex;
           flex-direction: column;
@@ -113,9 +122,9 @@ onBeforeUnmount(() => {
             display: flex;
             justify-content: space-between;
             .title {
-              width: 100px;
+              width: vw(100);
               color: #fff;
-              font-size: 16px;
+              font-size: vw(16);
               white-space: nowrap; /* 禁止换行 */
               overflow: hidden; /* 隐藏溢出内容 */
               text-overflow: ellipsis; /* 显示省略号 */
@@ -123,7 +132,7 @@ onBeforeUnmount(() => {
             .time {
               color: rgba(255, 255, 255, 0.8);
               font-family: "PingFang SC";
-              font-size: 12px;
+              font-size: vw(12);
               font-style: normal;
               font-weight: 400;
               line-height: normal;
@@ -138,7 +147,7 @@ onBeforeUnmount(() => {
             -webkit-line-clamp: 2; /* 限制显示的行数 */
             overflow: hidden;
             text-overflow: ellipsis;
-            font-size: 13px;
+            font-size: vw(13);
             font-family: "PingFang SC";
             font-style: normal;
             font-weight: 400;
@@ -150,7 +159,7 @@ onBeforeUnmount(() => {
         }
         &:hover {
           background-color: #152341;
-          border-radius: 10px;
+          border-radius: vw(10);
         }
       }
     }
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/search.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/search.vue
deleted file mode 100644
index 169c7ec..0000000
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/search.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <div class="search-component">
-    <input
-      type="text"
-      class="search-input"
-      placeholder="南海争端系列舆情事件"
-      v-model="searchValue"
-    />
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18"
-      height="18"
-      viewBox="0 0 16 16"
-      fill="none"
-      @click="handleSearchBtn"
-      class="rear-icon"
-    >
-      <path
-        d="M9.15194 5.0478C8.66938 4.56523 8.00271 4.26676 7.26631 4.26676C6.52994 4.26676 5.86328 4.56523 5.38071 5.0478M11.3401 11.3407L14.1686 14.1691M7.26628 12.9334C10.3959 12.9334 12.9329 10.3964 12.9329 7.26676C12.9329 4.13716 10.3959 1.6001 7.26628 1.6001C4.13668 1.6001 1.59961 4.13716 1.59961 7.26676C1.59961 10.3964 4.13668 12.9334 7.26628 12.9334Z"
-        stroke="#8ADCFA"
-        stroke-width="1.5"
-      />
-    </svg>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue"
-
-const searchValue = ref(null)
-const emit = defineEmits(["click:search"])
-
-const handleSearchBtn = () => {
-  if (!searchValue.value) return
-  emit("click:search", searchValue.value)
-}
-</script>
-
-<style scoped lang="less">
-.search-component {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .search-input {
-    border: none;
-    outline: none;
-    background: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    appearance: none;
-    -webkit-appearance: none;
-    font: inherit;
-    color: inherit;
-    width: 100%;
-    height: 75%;
-    max-height: 75%;
-    border-radius: 58px;
-    background: rgba(35, 98, 145, 0.66);
-    border: 1px solid #3fa9f5;
-    text-indent: 1em;
-    color: #fff;
-
-    &::placeholder {
-      color: #fff; // 你想要的颜色
-      opacity: 0.6; // 保证颜色不透明
-    }
-  }
-  .rear-icon {
-    margin-left: -30px;
-    cursor: pointer;
-  }
-}
-</style>
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/userChart.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/userChart.vue
index 964ff83..fa6d28b 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/userChart.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/userChart.vue
@@ -209,18 +209,18 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .diamond {
-  width: 6px;
-  height: 6px;
+  width: vw(6);
+  height: vh(6);
   background-color: #fff;
-  margin-right: 10px;
-  box-shadow: 0 4px 8px rgb(0, 123, 255);
+  margin-right: vw(10);
+  box-shadow: 0 vh(4) vh(8) rgb(0, 123, 255);
 }
 .userChart-component {
   width: 100%;
   height: 100%;
-  padding: 0px 5px;
+  padding: 0 vw(5);
   display: flex;
   flex-direction: column;
   .scroll-content {
@@ -228,12 +228,12 @@ onMounted(() => {
     height: 100%;
     overflow-y: auto;
     &::-webkit-scrollbar {
-      width: 3px; /* 垂直滚动条宽度 */
-      height: 5px; /* 水平滚动条高度 */
+      width: vw(3); /* 垂直滚动条宽度 */
+      height: vh(5); /* 水平滚动条高度 */
     }
     &::-webkit-scrollbar-thumb {
       background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
-      border-radius: 4px;
+      border-radius: vw(4);
     }
     &::-webkit-scrollbar-thumb:hover {
       background: rgba(147, 210, 255, 0.5); /* 更明显的蓝色 */
@@ -247,7 +247,7 @@ onMounted(() => {
         align-items: center;
         color: #c6e3f5;
         font-family: "PingFang SC";
-        font-size: 16px;
+        font-size: vw(16);
         font-style: normal;
         font-weight: 400;
         line-height: normal;
@@ -255,29 +255,29 @@ onMounted(() => {
     }
   }
   .anchor-info-content {
-    padding: 10px 15px;
+    padding: vh(10) vw(15);
     color: #fff;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 10px;
+    gap: vw(10);
     .info-item {
       display: flex;
-      width: 150px;
-      font-size: 14px;
+      width: vw(150);
+      font-size: vw(14);
 
       .info-item-icon {
-        width: 24px;
-        height: 24px;
-        margin-top: 4px;
+        width: vw(24);
+        height: vh(24);
+        margin-top: vh(4);
       }
       .info-item-number {
         display: flex;
         flex-direction: column;
-        margin-left: 10px;
+        margin-left: vw(10);
         .number {
           color: #fff;
           font-family: MiSans;
-          font-size: 18px;
+          font-size: vw(18);
           font-style: normal;
           font-weight: 630;
         }
@@ -287,7 +287,7 @@ onMounted(() => {
   .chart-tab {
     display: flex;
     justify-content: space-around;
-    border-radius: 5px;
+    border-radius: vw(5);
     overflow: hidden;
     border: 1px solid #20406e;
 
@@ -296,16 +296,16 @@ onMounted(() => {
       color: #fff;
       opacity: 0.7;
       cursor: pointer;
-      font-size: 14px;
+      font-size: vw(14);
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 4px 10px;
+      padding: vh(4) vw(10);
     }
   }
   .category-chart {
     width: 100%;
-    height: 130px; // 你可以根据实际需求调整高度
+    height: vh(130); // 你可以根据实际需求调整高度
   }
 }
 
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/components/userPanel.vue b/src/views/KeyNodeDiscern/anchorRecommendation/components/userPanel.vue
index a5685df..85d84c7 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/components/userPanel.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/components/userPanel.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="userPanel-container">
-    <img
-      src="@/assets/images/head/anchorUserListTitle2.png"
-      alt=""
-      class="headerImage"
-      style="margin-top: -7px"
-    />
+    <img src="@/assets/images/head/anchorUserListTitle2.png" class="headerImage" />
     <div class="tabs">
       <div class="tabs-switch">
         <div
@@ -70,16 +65,18 @@ const highLightNodeHandle = (item) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .userPanel-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
-
+  .headerImage {
+    margin-top: vh(-8);
+  }
   .tabs {
     flex: 1;
-    padding: 10px 20px;
+    padding: vh(10) vw(20);
 
     .tabs-switch {
       margin: 0 auto;
@@ -87,82 +84,82 @@ const highLightNodeHandle = (item) => {
       justify-content: space-between;
       .switch-item {
         flex: 1;
-        padding: 4px 0px;
+        padding: vh(4) 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        border: 1px solid #20406e;
-        font-size: 14px;
+        border: vw(1) solid #20406e;
+        font-size: vw(14);
         cursor: pointer;
         color: #cccccc9d;
         &:first-child {
-          border-radius: 5px 0 0 5px;
+          border-radius: vw(5) 0 0 vw(5);
         }
         &:last-child {
-          border-radius: 0px 5px 5px 0px;
+          border-radius: 0 vw(5) vw(5) 0;
         }
       }
     }
     .tabs-list {
       width: 100%;
-      height: 430px;
-      margin-top: 10px;
-      padding-right: 5px;
+      height: vh(430);
+      margin-top: vh(10);
+      padding-right: vw(5);
       overflow: auto;
       &::-webkit-scrollbar {
-        width: 3px; /* 垂直滚动条宽度 */
-        height: 5px; /* 水平滚动条高度 */
+        width: vw(3); /* 垂直滚动条宽度 */
+        height: vh(5); /* 水平滚动条高度 */
       }
       &::-webkit-scrollbar-thumb {
         background: rgba(147, 210, 255, 0.3); /* 蓝色半透明滑块 */
-        border-radius: 4px;
+        border-radius: vw(4);
       }
       &::-webkit-scrollbar-thumb:hover {
         background: rgba(147, 210, 255, 0.3); /* 更明显的蓝色 */
       }
       .tabs-list-item {
         width: 100%;
-        height: 80px;
-        padding: 10px 0px;
+        height: vh(80);
+        padding: vh(10) 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         cursor: pointer;
-        border-bottom: 0.5px solid rgba(0, 113, 188, 0.5);
+        border-bottom: vw(0.5) solid rgba(0, 113, 188, 0.5);
         .order {
           color: #fff;
-          font-size: 16px;
+          font-size: vw(16);
           font-style: normal;
           font-weight: 400;
-          margin-right: 15px;
+          margin-right: vw(15);
         }
         .avatar {
-          width: 48px;
-          height: 48px;
-          border-radius: 5px;
+          width: vw(48);
+          height: vh(48);
+          border-radius: vw(5);
         }
         .user-info {
           flex: 1;
-          padding-left: 15px;
+          padding-left: vw(15);
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           .username {
             color: #fff;
-            font-size: 16px;
+            font-size: vw(16);
             font-family: "微软雅黑";
           }
           .userState {
             display: flex;
             justify-content: space-between;
-            margin-top: 8px;
-            font-size: 13px;
+            margin-top: vh(8);
+            font-size: vw(13);
             color: #cccccc9d;
             div {
               display: flex;
               p {
                 color: #fff;
-                margin-left: 5px;
+                margin-left: vw(5);
               }
             }
           }
@@ -178,6 +175,6 @@ const highLightNodeHandle = (item) => {
   color: #fff;
   opacity: 1;
   background-color: #236291;
-  border: 1px solid #3fa9f5;
+  border: vw(1) solid #3fa9f5;
 }
 </style>
diff --git a/src/views/KeyNodeDiscern/anchorRecommendation/index.vue b/src/views/KeyNodeDiscern/anchorRecommendation/index.vue
index c691798..0e1058b 100644
--- a/src/views/KeyNodeDiscern/anchorRecommendation/index.vue
+++ b/src/views/KeyNodeDiscern/anchorRecommendation/index.vue
@@ -45,7 +45,7 @@
       </div>
     </div>
 
-    <el-dialog v-model="postDialog" width="640" align-center class="custom-dialog">
+    <el-dialog v-model="postDialog" :width="nowSize(640)" align-center class="custom-dialog">
       <img src="@/assets/images/head/post-dialog-title.png" alt="" class="postTitleImage" />
       <div class="dialog-content">
         <div class="post-content">{{ currentPostPost.content }}</div>
@@ -67,7 +67,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog v-model="topicDialog" width="591" align-center class="custom-dialog">
+    <el-dialog v-model="topicDialog" :width="nowSize(591)" align-center class="custom-dialog">
       <img src="@/assets/images/head/anchorTopicDetail.png" alt="" class="postTitleImage" />
       <div class="dialog-content topic-dialog-content">
         <div class="dialog-title">{{ currentTopic.title }}</div>
@@ -140,7 +140,7 @@
       </div>
     </el-dialog>
 
-    <el-dialog v-model="anchorDialog" width="640" align-center class="custom-dialog">
+    <el-dialog v-model="anchorDialog" :width="nowSize(640)" align-center class="custom-dialog">
       <img src="@/assets/images/head/anchorDialogTitle.png" alt="" class="dialogTitleImg" />
       <div class="dialog-content">
         <div class="dialog-content-leaderInfo">
@@ -216,7 +216,7 @@ import AttentionTopic from "./components/attentionTopic.vue"
 import Monitoring from "./components/monitoring.vue"
 import { Icon } from "@iconify/vue"
 import * as echarts from "echarts"
-
+import { nowSize } from "@/utils/echarts-self-adaption"
 import { useKeyNodeRecognitionStore } from "@/store/keyNodeRecognition/index"
 const KeyNodeOneStore = useKeyNodeRecognitionStore()
 
@@ -403,34 +403,34 @@ watch(topicDialog, (val) => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
-  width: 640px;
-  border-width: 0px, 0px, 0px, 0px;
+  width: vw(640);
+  border-width: 0;
   border-style: solid;
   border-image-source: linear-gradient(180deg, #3aa1f8 0%, rgba(58, 161, 248, 0.2) 100%);
   background-color: rgba(6, 45, 90, 1);
-  border: 1px solid #1a8bff;
-  border-radius: 2px;
+  border: vw(1) solid #1a8bff;
+  border-radius: vw(2);
   padding: 0 0;
   z-index: 1;
 }
 :deep(.post-dialog) {
-  height: 300px;
+  height: vh(300);
 }
 :deep(.custom-dialog) .postTitleImage {
-  margin-top: -24px;
-  margin-left: -2px;
+  margin-top: vh(-27);
+  margin-left: vw(-2);
 }
 :deep(.custom-dialog) .dialog-content {
   width: 100%;
-  padding: 25px 20px;
+  padding: vh(25) vw(20);
 }
 
 :deep(.custom-dialog) .dialog-content .content {
   color: rgba(255, 255, 255, 0.8);
   font-family: "PingFang SC";
-  font-size: 16px;
+  font-size: vw(16);
   font-style: normal;
   font-weight: 400;
   opacity: 0.7;
@@ -438,7 +438,7 @@ watch(topicDialog, (val) => {
 .heat {
   display: flex;
   justify-content: flex-end;
-  margin-top: 20px;
+  margin-top: vh(20);
   .item-heat-detail {
     display: flex;
     justify-content: space-between;
@@ -446,7 +446,7 @@ watch(topicDialog, (val) => {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 70px;
+      width: vw(70);
       color: #fff;
       opacity: 0.7;
     }
@@ -455,40 +455,40 @@ watch(topicDialog, (val) => {
 .keyNode3-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: vw(10);
   .top-container {
     width: 100%;
-    height: 88px;
+    height: vh(110);
     background-image: url(@/assets/images/head/bigTitle2.png);
     background-repeat: no-repeat;
     background-size: cover;
     fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
-    stroke-width: 1px;
+    stroke-width: vw(1);
     stroke: #3aa1f8;
   }
 
   .content {
-    height: 805px;
+    height: vh(805);
     display: flex;
     justify-content: space-between;
-    gap: 15px;
+    gap: vw(15);
     .left-container {
       flex: 10%;
       display: flex;
       flex-direction: column;
-      gap: 15px;
+      gap: vw(15);
       .userPanel {
-        height: 540px;
-        border-radius: 2px;
+        height: vh(540);
+        border-radius: vw(2);
         flex-shrink: 0;
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
       }
       .anchorChart {
         flex: 1;
-        border-radius: 2px;
+        border-radius: vw(2);
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
         overflow: auto;
         -ms-overflow-style: none; /* IE 和 Edge */
         scrollbar-width: none; /* Firefox */
@@ -499,25 +499,25 @@ watch(topicDialog, (val) => {
       flex: 60%;
       display: flex;
       flex-direction: column;
-      gap: 15px;
+      gap: vw(15);
       .anchorGraph {
         width: 100%;
-        height: 541px;
+        height: vh(541);
         background-color: #070a22;
-        border-radius: 4px;
+        border-radius: vw(4);
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
       }
       .anchorGrap-statistics {
         flex: 1;
-        border-radius: 4px;
+        border-radius: vw(4);
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
         fill: linear-gradient(270deg, rgba(6, 61, 113, 0.1) 0%, rgba(8, 30, 56, 0.38) 100%);
-        stroke-width: 1px;
+        stroke-width: vw(1);
         stroke: #3aa1f8;
         overflow: auto;
-        padding: 10px 10px;
+        padding: vh(10) vw(10);
       }
     }
 
@@ -526,21 +526,21 @@ watch(topicDialog, (val) => {
       height: 100%;
       display: flex;
       flex-direction: column;
-      gap: 15px;
+      gap: vw(15);
       .attention-topic {
         width: 100%;
-        height: 540px;
-        border-radius: 2px;
+        height: vh(540);
+        border-radius: vw(2);
         flex-shrink: 0;
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
       }
       .monitoring-situation {
         flex: 1;
-        border-radius: 2px;
+        border-radius: vw(2);
         flex-shrink: 0;
         background-color: rgba(6, 45, 90, 0.3);
-        border: 1px solid rgba(0, 113, 188, 0.705);
+        border: vw(1) solid rgba(0, 113, 188, 0.705);
       }
     }
   }
@@ -549,65 +549,63 @@ watch(topicDialog, (val) => {
     .dialog-title {
       color: #fff;
       font-family: "PingFang SC";
-      font-size: 20px;
+      font-size: vw(20);
       font-style: normal;
     }
     .event-title {
       display: flex;
       align-items: center;
       .title-font {
-        margin-left: 8px;
+        margin-left: vw(8);
         color: #fff;
         font-family: "PingFang SC";
-        font-size: 16px;
+        font-size: vw(16);
         font-style: normal;
         font-weight: 400;
       }
     }
     .event-forecast-container {
       width: 100%;
-      height: 300px;
-
-      margin-top: 22px;
+      height: vh(300);
+      margin-top: vh(22);
       .event-hotChart-container {
         width: 100%;
-        height: 400px;
-        margin-top: 10px;
+        height: vh(400);
+        margin-top: vh(10);
       }
     }
     .event-keyUser-container {
-      margin-top: 150px;
+      margin-top: vh(150);
       .key-user-info-list {
-        margin-top: 20px;
+        margin-top: vh(20);
         display: grid;
         grid-template-columns: 1fr 1fr;
-        gap: 20px;
+        gap: vw(20);
         .info-item {
           display: flex;
           align-items: center;
           .diamond {
-            width: 6px;
-            height: 6px;
+            width: vw(6);
+            height: vh(6);
             background-color: #fff;
-            margin-right: 10px;
-            box-shadow: 0 4px 8px rgb(0, 123, 255);
+            margin-right: vw(10);
+            box-shadow: 0 vw(4) vw(8) rgb(0, 123, 255);
           }
           .user-label {
             display: flex;
             align-items: center;
-
             .label-key {
               color: #c6e3f5;
               font-family: "PingFang SC";
-              font-size: 16px;
+              font-size: vw(16);
               font-style: normal;
               font-weight: 400;
             }
             .label-value {
-              width: 170px;
+              width: vw(170);
               color: #fff;
               font-family: "PingFang SC";
-              font-size: 16px;
+              font-size: vw(16);
               font-style: normal;
               font-weight: 400;
               white-space: nowrap;
@@ -622,78 +620,79 @@ watch(topicDialog, (val) => {
   }
 }
 .dialogTitleImg {
-  margin-top: -23px;
+  margin-top: vh(-26);
+  margin-left: vh(-2);
 }
 .post-content {
   color: #fff;
-  font-size: 16px;
+  font-size: vw(16);
   opacity: 0.7;
 }
 .dialog-content-leaderInfo {
   width: 100%;
-  height: 70px;
+  height: vh(70);
   display: flex;
 }
 .leaderInfo-avatar {
-  width: 70px;
-  height: 70px;
-  border-radius: 5px;
+  width: vw(70);
+  height: vh(70);
+  border-radius: vw(5);
 }
 .leaderInfo-message {
   flex: 1;
   height: 100%;
-  padding-left: 15px;
+  padding-left: vh(15);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 .leader-name {
-  font-size: 20px;
+  font-size: vw(20);
   color: #fff;
 }
 .leader-heat {
   display: flex;
   color: #fff;
-  font-size: 16px;
+  font-size: vw(16);
 }
 .post-number {
-  margin-left: 30px;
+  margin-left: vw(30);
 }
 .dialog-content-post {
   width: 100%;
-  padding: 25px 0px;
+  padding: vh(25) 0px;
 }
 .leader-post-detail-content {
   width: 100%;
   background:
     linear-gradient(0deg, #0d2743, #0d2743),
     linear-gradient(270deg, rgba(147, 210, 255, 0.06) 0%, rgba(147, 210, 255, 0.16) 100%);
-  margin-top: 30px;
-  height: 262px;
+  margin-top: vh(30);
+  height: vh(262);
   overflow: auto;
-  padding: 10px 20px;
+  padding: vh(10) vw(20);
 }
 .leader-post-detail-content::-webkit-scrollbar {
-  width: 5px;
-  height: 5px;
+  width: vw(5);
+  height: vh(5);
 }
 .leader-post-detail-content::-webkit-scrollbar-thumb {
   background: rgba(147, 210, 255, 0.3);
-  border-radius: 4px;
+  border-radius: vw(4);
 }
 .leader-post-detail-content::-webkit-scrollbar-thumb:hover {
   background: rgba(147, 210, 255, 0.5);
 }
 .item-type {
-  font-size: 16px;
+  font-size: vw(16);
   color: #ffffff;
 }
 .item-content {
   color: #ffffffcc;
-  font-size: 16px;
+  font-size: vw(16);
 }
 .content-item div {
-  margin-bottom: 10px;
+  margin-bottom: vh(10);
 }
 .item-heat {
   display: flex;
@@ -704,27 +703,27 @@ watch(topicDialog, (val) => {
   display: flex;
 }
 .item-heat-detail div {
-  width: 60px;
-  margin-right: 20px;
+  width: vw(60);
+  margin-right: vw(20);
   display: flex;
   align-items: center;
 }
 .dialog-content-heat-degree {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  row-gap: 15px;
+  row-gap: vw(15);
   color: #fff;
-  font-size: 16px;
+  font-size: vw(16);
 }
 .heat-item {
   display: flex;
   align-items: center;
 }
 .heat-item .diamond {
-  width: 6px;
-  height: 6px;
+  width: vw(6);
+  height: vh(6);
   background-color: #fff;
-  margin-right: 10px;
-  box-shadow: 0 4px 8px rgb(0, 123, 255);
+  margin-right: vw(10);
+  box-shadow: 0 vw(4) vw(8) rgb(0, 123, 255);
 }
 </style>
diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue b/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
index 3caecdc..9d0eee4 100644
--- a/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
+++ b/src/views/KeyNodeDiscern/bridgeCommunication/components/GraphPanel.vue
@@ -178,7 +178,7 @@ const handleTimePointClick = (pointId) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .right-panel {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/components/LeaderList.vue b/src/views/KeyNodeDiscern/bridgeCommunication/components/LeaderList.vue
index 5a5e549..a4df76f 100644
--- a/src/views/KeyNodeDiscern/bridgeCommunication/components/LeaderList.vue
+++ b/src/views/KeyNodeDiscern/bridgeCommunication/components/LeaderList.vue
@@ -82,7 +82,7 @@ watch(
 )
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .left-panel {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/detailCommunityGraph.vue b/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/detailCommunityGraph.vue
index f7e7d53..afc10f0 100644
--- a/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/detailCommunityGraph.vue
+++ b/src/views/KeyNodeDiscern/bridgeCommunication/components/graph/detailCommunityGraph.vue
@@ -497,7 +497,7 @@ const handleGoback = () => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .detailCommunityGraph-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/bridgeCommunication/index.vue b/src/views/KeyNodeDiscern/bridgeCommunication/index.vue
index 3066cdb..6c35a58 100644
--- a/src/views/KeyNodeDiscern/bridgeCommunication/index.vue
+++ b/src/views/KeyNodeDiscern/bridgeCommunication/index.vue
@@ -295,7 +295,7 @@ const wordCloudData = ref([
 ])
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.leader-custom-dialog) {
   width: 640px;
   height: 680px;
diff --git a/src/views/KeyNodeDiscern/components/PostDynamics.vue b/src/views/KeyNodeDiscern/components/PostDynamics.vue
index 16389d6..ba833cb 100644
--- a/src/views/KeyNodeDiscern/components/PostDynamics.vue
+++ b/src/views/KeyNodeDiscern/components/PostDynamics.vue
@@ -104,7 +104,7 @@ onBeforeUnmount(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .anchorStatistics-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue b/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
index 8095a9f..c23f3bf 100644
--- a/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
+++ b/src/views/KeyNodeDiscern/opinionLeader/components/GraphPanel.vue
@@ -156,7 +156,7 @@ const handleTimePointClick = (pointId) => {
 defineExpose({ highlightNode })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .right-panel {
   height: 540px;
   position: relative;
diff --git a/src/views/KeyNodeDiscern/opinionLeader/components/LeaderList.vue b/src/views/KeyNodeDiscern/opinionLeader/components/LeaderList.vue
index 5742f17..bfd8ba2 100644
--- a/src/views/KeyNodeDiscern/opinionLeader/components/LeaderList.vue
+++ b/src/views/KeyNodeDiscern/opinionLeader/components/LeaderList.vue
@@ -82,7 +82,7 @@ watch(
 )
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .left-panel {
   width: 100%;
   height: 100%;
diff --git a/src/views/KeyNodeDiscern/opinionLeader/index.vue b/src/views/KeyNodeDiscern/opinionLeader/index.vue
index dad7015..10f9ed7 100644
--- a/src/views/KeyNodeDiscern/opinionLeader/index.vue
+++ b/src/views/KeyNodeDiscern/opinionLeader/index.vue
@@ -248,7 +248,7 @@ const wordCloudData = ref([
 ])
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-leader-dialog) {
   width: 640px;
   height: 680px;
diff --git a/src/views/LinkPrediction/characterInteraction/index.vue b/src/views/LinkPrediction/characterInteraction/index.vue
index df2ec16..5e0d463 100644
--- a/src/views/LinkPrediction/characterInteraction/index.vue
+++ b/src/views/LinkPrediction/characterInteraction/index.vue
@@ -166,7 +166,7 @@ provide("communityNodeList", communityNodeList) // 提供响应式数据
 provide("statisticsList", interactionStore.statisticsList)
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
index c466d2b..82a3793 100644
--- a/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
+++ b/src/views/LinkPrediction/charactersHiddenInteraction/index.vue
@@ -164,7 +164,7 @@ provide("communityNodeList", communityNodeList) // 提供响应式数据
 provide("statisticsList", characterHiddenStore.statisticsList)
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/LinkPrediction/components/anlysisPanle.vue b/src/views/LinkPrediction/components/anlysisPanle.vue
index 4bfe664..a3ae37f 100644
--- a/src/views/LinkPrediction/components/anlysisPanle.vue
+++ b/src/views/LinkPrediction/components/anlysisPanle.vue
@@ -54,7 +54,7 @@ const props = defineProps({
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .leader-ansys {
   position: relative;
   width: 100%;
diff --git a/src/views/LinkPrediction/components/communityNode.vue b/src/views/LinkPrediction/components/communityNode.vue
index 57cb1da..9f8a25e 100644
--- a/src/views/LinkPrediction/components/communityNode.vue
+++ b/src/views/LinkPrediction/components/communityNode.vue
@@ -312,7 +312,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .communityNode-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/components/detailNode.vue b/src/views/LinkPrediction/components/detailNode.vue
index 8f574c4..37f9c78 100644
--- a/src/views/LinkPrediction/components/detailNode.vue
+++ b/src/views/LinkPrediction/components/detailNode.vue
@@ -405,7 +405,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .detailNode-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/components/graph.vue b/src/views/LinkPrediction/components/graph.vue
index 7f20598..e3e9f24 100644
--- a/src/views/LinkPrediction/components/graph.vue
+++ b/src/views/LinkPrediction/components/graph.vue
@@ -59,7 +59,7 @@ const handleClickGoBack = (currentComponentName) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .graph-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/components/postList.vue b/src/views/LinkPrediction/components/postList.vue
index 5612543..f0ec32f 100644
--- a/src/views/LinkPrediction/components/postList.vue
+++ b/src/views/LinkPrediction/components/postList.vue
@@ -40,7 +40,7 @@ const listRef = ref(null)
 onMounted(() => {})
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .postList-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/components/userChart.vue b/src/views/LinkPrediction/components/userChart.vue
index 4e6e81e..a2d4e97 100644
--- a/src/views/LinkPrediction/components/userChart.vue
+++ b/src/views/LinkPrediction/components/userChart.vue
@@ -54,7 +54,7 @@ const specialHandle = computed(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .userChart-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/components/userPanel.vue b/src/views/LinkPrediction/components/userPanel.vue
index addabc6..5184ba1 100644
--- a/src/views/LinkPrediction/components/userPanel.vue
+++ b/src/views/LinkPrediction/components/userPanel.vue
@@ -61,7 +61,7 @@ const handleUserItem = (index, group = {}) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .userPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/anlysisPanle.vue b/src/views/LinkPrediction/socialGroups/components/anlysisPanle.vue
index 4bfe664..a3ae37f 100644
--- a/src/views/LinkPrediction/socialGroups/components/anlysisPanle.vue
+++ b/src/views/LinkPrediction/socialGroups/components/anlysisPanle.vue
@@ -54,7 +54,7 @@ const props = defineProps({
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .leader-ansys {
   position: relative;
   width: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/communityNode.vue b/src/views/LinkPrediction/socialGroups/components/communityNode.vue
index bbabfc5..4038ec9 100644
--- a/src/views/LinkPrediction/socialGroups/components/communityNode.vue
+++ b/src/views/LinkPrediction/socialGroups/components/communityNode.vue
@@ -315,7 +315,7 @@ onUnmounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .communityNode-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/detailNode.vue b/src/views/LinkPrediction/socialGroups/components/detailNode.vue
index a09c78c..88bf968 100644
--- a/src/views/LinkPrediction/socialGroups/components/detailNode.vue
+++ b/src/views/LinkPrediction/socialGroups/components/detailNode.vue
@@ -645,7 +645,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .detailNode-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/graph.vue b/src/views/LinkPrediction/socialGroups/components/graph.vue
index db2af47..6c0558f 100644
--- a/src/views/LinkPrediction/socialGroups/components/graph.vue
+++ b/src/views/LinkPrediction/socialGroups/components/graph.vue
@@ -58,7 +58,7 @@ const handleClickGoBack = (currentComponentName) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .graph-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/postList.vue b/src/views/LinkPrediction/socialGroups/components/postList.vue
index af85323..411d3aa 100644
--- a/src/views/LinkPrediction/socialGroups/components/postList.vue
+++ b/src/views/LinkPrediction/socialGroups/components/postList.vue
@@ -58,7 +58,7 @@ onMounted(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .postList-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/userChart.vue b/src/views/LinkPrediction/socialGroups/components/userChart.vue
index 4e6e81e..a2d4e97 100644
--- a/src/views/LinkPrediction/socialGroups/components/userChart.vue
+++ b/src/views/LinkPrediction/socialGroups/components/userChart.vue
@@ -54,7 +54,7 @@ const specialHandle = computed(() => {
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .userChart-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/components/userPanel.vue b/src/views/LinkPrediction/socialGroups/components/userPanel.vue
index 0d3371c..e0dea11 100644
--- a/src/views/LinkPrediction/socialGroups/components/userPanel.vue
+++ b/src/views/LinkPrediction/socialGroups/components/userPanel.vue
@@ -70,7 +70,7 @@ const handleUserItem = (index, group = {}) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .userPanel-component {
   width: 100%;
   height: 100%;
diff --git a/src/views/LinkPrediction/socialGroups/index.vue b/src/views/LinkPrediction/socialGroups/index.vue
index 05f9ffa..a64e5ae 100644
--- a/src/views/LinkPrediction/socialGroups/index.vue
+++ b/src/views/LinkPrediction/socialGroups/index.vue
@@ -196,7 +196,7 @@ provide("communityNodeList", communityNodeList)
 provide("statisticsList", socialGroupsStore.statisticsList)
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 :deep(.custom-dialog) {
   width: 640px;
   border-width: 0px, 0px, 0px, 0px;
diff --git a/src/views/Navigation/index.vue b/src/views/Navigation/index.vue
index 3f5a0c5..b2e12be 100644
--- a/src/views/Navigation/index.vue
+++ b/src/views/Navigation/index.vue
@@ -47,7 +47,7 @@
               slideShadows: true
             }"
             :slides-per-view="5"
-            :space-between="32"
+            :space-between="nowSize(32)"
             :loop="true"
             :speed="500"
             :mousewheel="true"
@@ -96,7 +96,7 @@
 import { ref } from "vue"
 import { Swiper, SwiperSlide } from "swiper/vue"
 import { Navigation, Pagination, EffectCoverflow, Mousewheel } from "swiper/modules"
-
+import { nowSize } from "@/utils/echarts-self-adaption"
 import { useRouter } from "vue-router"
 
 // Swiper 样式
@@ -304,10 +304,10 @@ const onSetTransition = (swiper, duration) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .navigation-container {
-  width: 100vw;
-  height: 100vh;
+  max-width: vw(1920);
+  min-height: vh(1080);
   display: flex;
   flex-direction: column;
   .header {
@@ -386,11 +386,11 @@ const onSetTransition = (swiper, duration) => {
           font-family: YouSheBiaoTiHei;
           font-weight: 400;
           font-style: Regular;
-          font-size: 40px;
+          font-size: vw(40);
           color: #fff;
           text-shadow:
-            0 0 23px rgba(8, 105, 160, 0.82),
-            2px 4px 4px rgba(9, 18, 26, 0.26);
+            0 0 vw(23) rgba(8, 105, 160, 0.82),
+            vw(2) vw(4) vw(4) rgba(9, 18, 26, 0.26);
         }
         .nav-name-next {
           /* 移除绝对定位 */
@@ -403,7 +403,7 @@ const onSetTransition = (swiper, duration) => {
       /* 菜单区域水平居中，让两侧对称展开 */
       .navigation-menu {
         height: 60%;
-        max-width: 1843px;
+        max-width: vw(1843);
         overflow: visible;
         display: flex;
         justify-content: center;
@@ -412,15 +412,15 @@ const onSetTransition = (swiper, duration) => {
         .nav-card {
           width: 18%;
           height: 100%;
-          padding: 0 16px;
-          border-radius: 10px;
+          padding: 0 vw(16);
+          border-radius: vw(16);
           display: flex;
           align-items: center;
           justify-content: center;
           text-align: center;
           line-height: 1.4;
-          font-size: 18px;
-          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+          font-size: vw(18);
+          box-shadow: 0 vw(10) vw(30) rgba(0, 0, 0, 0.08);
           user-select: none;
           background-size: cover;
           background-position: center;
diff --git a/src/views/login/components/loginPanel.vue b/src/views/login/components/loginPanel.vue
index 31b8081..c913974 100644
--- a/src/views/login/components/loginPanel.vue
+++ b/src/views/login/components/loginPanel.vue
@@ -94,21 +94,22 @@ const submitForm = (formEl) => {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .loginPanel-component {
   width: 42.5%;
   height: 44.5%;
+  aspect-ratio: 450 / 438;
   background-image: url("@/assets/images/login/login.png");
   // 设置背景图片大小以覆盖整个元素
-  background-size: cover;
+  background-size: 100% 100%;
   // 设置背景图片位置居中
   background-position: center;
   // 防止背景图片重复
   background-repeat: no-repeat;
-  padding: 0 40px;
+  padding: 0 vw(40);
 
   .demo-ruleForm {
-    margin-top: 32px;
+    margin-top: vh(32);
     height: 50%;
     display: flex;
     flex-direction: column;
@@ -116,8 +117,8 @@ const submitForm = (formEl) => {
     .title {
       color: #fff;
       text-align: center;
-      margin-bottom: 46px;
-      font-size: 32px;
+      margin-bottom: vh(46);
+      font-size: vw(32);
     }
     /* 修改 el-input 样式 */
     :deep(.el-input__wrapper) {
@@ -125,7 +126,7 @@ const submitForm = (formEl) => {
       border: 1px solid rgba(0, 166, 255, 0.1); /* 必须要有边框，否则看不到渐变 */
       background-clip: padding-box, border-box;
       background-origin: border-box;
-      box-shadow: inset 0 0 0 1px #1a9adb;
+      box-shadow: inset 0 0 0 vw(1) #1a9adb;
     }
 
     :deep(.el-input__inner) {
@@ -135,14 +136,14 @@ const submitForm = (formEl) => {
 
     .submit {
       margin: 0 auto;
-      margin-top: 20px;
+      margin-top: vh(20);
       width: 100%;
       height: 80%;
-      border: 1px solid #00a6ff !important;
+      border: vw(1) solid #00a6ff !important;
       background:
         radial-gradient(77.05% 52.73% at 50% 131.82%, #00a6ff 12.05%, rgba(63, 129, 207, 0) 95.88%),
         rgba(0, 166, 255, 0.3) !important;
-      font-size: 24px;
+      font-size: vh(24);
     }
 
     /* 按下时略微下沉手感 */
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b3342a8..f3c637d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -13,41 +13,32 @@
 import LoginPanel from "@/views/login/components/loginPanel.vue"
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .login-container {
-  max-width: 100vw;
-  min-height: 100vh;
+  max-width: vw(1920);
+  min-height: vh(1080);
   display: flex;
   flex-direction: column;
   position: relative;
   .header {
-    flex: 0 1 100px; // 可扩展、可收缩，初始100px
+    flex: 0 1 vw(100); // 可扩展、可收缩，初始100px
     position: absolute;
   }
   .body {
     flex: 1;
+
     background-image: url("@/assets/images/login/backimg.png");
     background-repeat: no-repeat;
     background-size: cover;
     display: flex;
     justify-content: flex-end;
     .login-panel {
-      width: 50%;
-      min-height: 100vh;
+      width: 52.5%;
+      min-height: vh(1080);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
-      // 当视口 ≤ 1350px 时，固定宽度但高度自适应
-      @media (max-width: 1350px) {
-        width: 750px; // 固定宽度
-      }
-
-      // 当视口高度 ≤ 750px 时，固定高度并允许滚动
-      @media (max-height: 750px) {
-        height: 750px; // 固定高度（根据需求调整）
-        min-height: auto; // 覆盖默认的 min-height: 100vh
-      }
     }
   }
 }
diff --git a/vite.config.js b/vite.config.js
index e4bfc62..566dac3 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,6 +6,16 @@ import path from "path"
 export default defineConfig({
   plugins: [vue(), removeConsole()],
   assetsInclude: ["**/*.csv"], // 明确包含CSV文件
+  css: {
+    preprocessorOptions: {
+      scss: {
+        //全局引入
+        additionalData: `
+          @use "@/utils/self-adaption.scss" as *;
+        `
+      }
+    }
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "src"),