use less!

package-lock.json

@@ -19,6 +19,7 @@
         "@iconify/vue": "^4.1.1",
         "@types/node": "^18.15.12",
         "@vitejs/plugin-vue": "^4.1.0",
+        "less": "^4.1.3",
         "rollup-plugin-visualizer": "^5.9.0",
         "typescript": "^4.9.3",
         "vite": "^4.2.0",
@@ -991,8 +992,6 @@
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
       "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "is-what": "^3.14.1"
       },
@@ -1026,7 +1025,6 @@
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "dependencies": {
         "ms": "^2.1.1"
       }
@@ -1060,7 +1058,6 @@
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "dependencies": {
         "prr": "~1.0.1"
       },
@@ -1208,8 +1205,7 @@
       "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,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/has": {
       "version": "1.0.3",
@@ -1255,7 +1251,6 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -1269,7 +1264,6 @@
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "bin": {
         "image-size": "bin/image-size.js"
       },
@@ -1344,9 +1338,7 @@
       "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,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "node_modules/is-wsl": {
       "version": "2.2.0",
@@ -1365,8 +1357,6 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
       "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -1437,7 +1427,6 @@
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -1452,7 +1441,6 @@
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "bin": {
         "mime": "cli.js"
       },
@@ -1488,8 +1476,7 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/muggle-string": {
       "version": "0.2.2",
@@ -1525,7 +1512,6 @@
       "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "dependencies": {
         "debug": "^3.2.6",
         "iconv-lite": "^0.6.3",
@@ -1565,8 +1551,6 @@
       "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
       "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 0.10"
       }
@@ -1600,7 +1584,6 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -1700,8 +1683,7 @@
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
@@ -1790,16 +1772,14 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "node_modules/scroll-into-view-if-needed": {
       "version": "2.2.31",
@@ -1815,7 +1795,6 @@
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "bin": {
         "semver": "bin/semver"
       }
@@ -1955,9 +1934,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-      "dev": true,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "node_modules/type": {
       "version": "1.2.0",
@@ -2786,8 +2763,6 @@
       "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
       "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "requires": {
         "is-what": "^3.14.1"
       }
@@ -2818,7 +2793,6 @@
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "requires": {
         "ms": "^2.1.1"
       }
@@ -2849,7 +2823,6 @@
       "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "requires": {
         "prr": "~1.0.1"
       }
@@ -2972,8 +2945,7 @@
       "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,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "has": {
       "version": "1.0.3",
@@ -3009,7 +2981,6 @@
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       }
@@ -3019,8 +2990,7 @@
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
       "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "immer": {
       "version": "9.0.21",
@@ -3067,9 +3037,7 @@
       "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,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "is-wsl": {
       "version": "2.2.0",
@@ -3085,8 +3053,6 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
       "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
       "dev": true,
-      "optional": true,
-      "peer": true,
       "requires": {
         "copy-anything": "^2.0.1",
         "errno": "^0.1.1",
@@ -3149,7 +3115,6 @@
       "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "requires": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -3160,8 +3125,7 @@
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "mime-match": {
       "version": "1.0.2",
@@ -3185,8 +3149,7 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "muggle-string": {
       "version": "0.2.2",
@@ -3210,7 +3173,6 @@
       "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
       "dev": true,
       "optional": true,
-      "peer": true,
       "requires": {
         "debug": "^3.2.6",
         "iconv-lite": "^0.6.3",
@@ -3237,9 +3199,7 @@
       "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,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "path-parse": {
       "version": "1.0.7",
@@ -3263,8 +3223,7 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "pinia": {
       "version": "2.0.35",
@@ -3308,8 +3267,7 @@
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
       "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "regenerator-runtime": {
       "version": "0.13.11",
@@ -3367,16 +3325,14 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "scroll-into-view-if-needed": {
       "version": "2.2.31",
@@ -3391,8 +3347,7 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
       "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
       "dev": true,
-      "optional": true,
+      "optional": true
-      "peer": true
     },
     "slate": {
       "version": "0.72.8",
@@ -3498,9 +3453,7 @@
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
       "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==",
-      "dev": true,
+      "dev": true
-      "optional": true,
-      "peer": true
     },
     "type": {
       "version": "1.2.0",

package.json

@@ -28,6 +28,7 @@
     "@iconify/vue": "^4.1.1",
     "@types/node": "^18.15.12",
     "@vitejs/plugin-vue": "^4.1.0",
+    "less": "^4.1.3",
     "rollup-plugin-visualizer": "^5.9.0",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",

src/assets/css/color.css

@@ -0,0 +1,6 @@
+/* 基本阴影 */
+/* 
+    
+    transparent color
+    
+    */

src/assets/css/color.less

@@ -0,0 +1,187 @@
+/* 基本阴影 */
+@shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
+  0 2px 8px hsla(0, 0%, 0%, 0.05);
+@kungalgame-shadow-0: 5px 5px 7px var(@kungalgame-trans-gray-4),
+  -5px -5px 7px var(@kungalgame-trans-white-1);
+@kungalgame-shadow-1: 2px 2px 4px var(@kungalgame-trans-gray-4),
+  -2px -2px 4px var(@kungalgame-trans-white-1);
+@kungalgame-font-color-0: #777777;
+@kungalgame-font-color-1: #666666;
+@kungalgame-font-color-2: #4d4d4d;
+@kungalgame-font-color-3: #242424;
+@kungalgame-black: #1f2328;
+@kungalgame-white: #ffffff;
+@kungalgame-gray-0: #f6f8fa;
+@kungalgame-gray-1: #eaeef2;
+@kungalgame-gray-2: #d0d7de;
+@kungalgame-gray-3: #afb8c1;
+@kungalgame-gray-4: #8c959f;
+@kungalgame-gray-5: #6e7781;
+@kungalgame-gray-6: #57606a;
+@kungalgame-gray-7: #424a53;
+@kungalgame-gray-8: #32383f;
+@kungalgame-gray-9: #24292f;
+@kungalgame-blue-0: #ddf4ff;
+@kungalgame-blue-1: #b6e3ff;
+@kungalgame-blue-2: #80ccff;
+@kungalgame-blue-3: #54aeff;
+@kungalgame-blue-4: #218bff;
+@kungalgame-blue-5: #0969da;
+@kungalgame-blue-6: #0550ae;
+@kungalgame-blue-7: #033d8b;
+@kungalgame-blue-8: #0a3069;
+@kungalgame-blue-9: #002155;
+@kungalgame-green-0: #dafbe1;
+@kungalgame-green-1: #aceebb;
+@kungalgame-green-2: #6fdd8b;
+@kungalgame-green-3: #4ac26b;
+@kungalgame-green-4: #2da44e;
+@kungalgame-green-5: #1a7f37;
+@kungalgame-green-6: #116329;
+@kungalgame-green-7: #044f1e;
+@kungalgame-green-8: #003d16;
+@kungalgame-green-9: #002d11;
+@kungalgame-yellow-0: #fff8c5;
+@kungalgame-yellow-1: #fae17d;
+@kungalgame-yellow-2: #eac54f;
+@kungalgame-yellow-3: #d4a72c;
+@kungalgame-yellow-4: #bf8700;
+@kungalgame-yellow-5: #9a6700;
+@kungalgame-yellow-6: #7d4e00;
+@kungalgame-yellow-7: #633c01;
+@kungalgame-yellow-8: #4d2d00;
+@kungalgame-yellow-9: #3b2300;
+@kungalgame-orange-0: #fff1e5;
+@kungalgame-orange-1: #ffd8b5;
+@kungalgame-orange-2: #ffb77c;
+@kungalgame-orange-3: #fb8f44;
+@kungalgame-orange-4: #e16f24;
+@kungalgame-orange-5: #bc4c00;
+@kungalgame-orange-6: #953800;
+@kungalgame-orange-7: #762c00;
+@kungalgame-orange-8: #5c2200;
+@kungalgame-orange-9: #471700;
+@kungalgame-red-0: #ffebe9;
+@kungalgame-red-1: #ffcecb;
+@kungalgame-red-2: #ffaba8;
+@kungalgame-red-3: #ff8182;
+@kungalgame-red-4: #fa4549;
+@kungalgame-red-5: #cf222e;
+@kungalgame-red-6: #a40e26;
+@kungalgame-red-7: #82071e;
+@kungalgame-red-8: #660018;
+@kungalgame-red-9: #4c0014;
+@kungalgame-purple-0: #fbefff;
+@kungalgame-purple-1: #ecd8ff;
+@kungalgame-purple-2: #d8b9ff;
+@kungalgame-purple-3: #c297ff;
+@kungalgame-purple-4: #a475f9;
+@kungalgame-purple-5: #8250df;
+@kungalgame-purple-6: #6639ba;
+@kungalgame-purple-7: #512a97;
+@kungalgame-purple-8: #3e1f79;
+@kungalgame-purple-9: #2e1461;
+@kungalgame-pink-0: #ffeff7;
+@kungalgame-pink-1: #ffd3eb;
+@kungalgame-pink-2: #ffadda;
+@kungalgame-pink-3: #ff80c8;
+@kungalgame-pink-4: #e85aad;
+@kungalgame-pink-5: #bf3989;
+@kungalgame-pink-6: #99286e;
+@kungalgame-pink-7: #772057;
+@kungalgame-pink-8: #611347;
+@kungalgame-pink-9: #4d0336;
+/* 
+    
+    transparent color
+    
+    */
+@kungalgame-trans-black: #1f2328;
+@kungalgame-trans-white-1: #fffffff7;
+@kungalgame-trans-white-2: #ffffffd9;
+@kungalgame-trans-white-3: #ffffffc7;
+@kungalgame-trans-white-4: #ffffffa1;
+@kungalgame-trans-white-5: #ffffff8e;
+@kungalgame-trans-white-6: #ffffff77;
+@kungalgame-trans-white-7: #ffffff48;
+@kungalgame-trans-white-8: #ffffff1a;
+@kungalgame-trans-gray-0: #f6f8fa77;
+@kungalgame-trans-gray-1: #eaeef277;
+@kungalgame-trans-gray-2: #d0d7de77;
+@kungalgame-trans-gray-3: #afb8c177;
+@kungalgame-trans-gray-4: #8c959f77;
+@kungalgame-trans-gray-5: #6e778177;
+@kungalgame-trans-gray-6: #57606a77;
+@kungalgame-trans-gray-7: #424a5377;
+@kungalgame-trans-gray-8: #32383f77;
+@kungalgame-trans-gray-9: #24292f77;
+@kungalgame-trans-blue-0: #ddf4ff77;
+@kungalgame-trans-blue-1: #b6e3ff77;
+@kungalgame-trans-blue-2: #80ccff77;
+@kungalgame-trans-blue-3: #54aeff77;
+@kungalgame-trans-blue-4: #218bff77;
+@kungalgame-trans-blue-5: #0969da77;
+@kungalgame-trans-blue-6: #0550ae77;
+@kungalgame-trans-blue-7: #033d8b77;
+@kungalgame-trans-blue-8: #0a306977;
+@kungalgame-trans-blue-9: #00215577;
+@kungalgame-trans-green-0: #dafbe177;
+@kungalgame-trans-green-1: #aceebb77;
+@kungalgame-trans-green-2: #6fdd8b77;
+@kungalgame-trans-green-3: #4ac26b77;
+@kungalgame-trans-green-4: #2da44e77;
+@kungalgame-trans-green-5: #1a7f3777;
+@kungalgame-trans-green-6: #11632977;
+@kungalgame-trans-green-7: #044f1e77;
+@kungalgame-trans-green-8: #003d1677;
+@kungalgame-trans-green-9: #002d1177;
+@kungalgame-trans-yellow-0: #fff8c577;
+@kungalgame-trans-yellow-1: #fae17d77;
+@kungalgame-trans-yellow-2: #eac54f77;
+@kungalgame-trans-yellow-3: #d4a72c77;
+@kungalgame-trans-yellow-4: #bf870077;
+@kungalgame-trans-yellow-5: #9a670077;
+@kungalgame-trans-yellow-6: #7d4e0077;
+@kungalgame-trans-yellow-7: #633c0177;
+@kungalgame-trans-yellow-8: #4d2d0077;
+@kungalgame-trans-yellow-9: #3b230077;
+@kungalgame-trans-orange-0: #fff1e577;
+@kungalgame-trans-orange-1: #ffd8b577;
+@kungalgame-trans-orange-2: #ffb77c77;
+@kungalgame-trans-orange-3: #fb8f4477;
+@kungalgame-trans-orange-4: #e16f2477;
+@kungalgame-trans-orange-5: #bc4c0077;
+@kungalgame-trans-orange-6: #95380077;
+@kungalgame-trans-orange-7: #762c0077;
+@kungalgame-trans-orange-8: #5c220077;
+@kungalgame-trans-orange-9: #47170077;
+@kungalgame-trans-red-0: #ffebe977;
+@kungalgame-trans-red-1: #ffcecb77;
+@kungalgame-trans-red-2: #ffaba877;
+@kungalgame-trans-red-3: #ff818277;
+@kungalgame-trans-red-4: #fa454977;
+@kungalgame-trans-red-5: #cf222e77;
+@kungalgame-trans-red-6: #a40e2677;
+@kungalgame-trans-red-7: #82071e77;
+@kungalgame-trans-red-8: #66001877;
+@kungalgame-trans-red-9: #4c001477;
+@kungalgame-trans-purple-0: #fbefff77;
+@kungalgame-trans-purple-1: #ecd8ff77;
+@kungalgame-trans-purple-2: #d8b9ff77;
+@kungalgame-trans-purple-3: #c297ff77;
+@kungalgame-trans-purple-4: #a475f977;
+@kungalgame-trans-purple-5: #8250df77;
+@kungalgame-trans-purple-6: #6639ba77;
+@kungalgame-trans-purple-7: #512a9777;
+@kungalgame-trans-purple-8: #3e1f7977;
+@kungalgame-trans-purple-9: #2e146177;
+@kungalgame-trans-pink-0: #ffeff777;
+@kungalgame-trans-pink-1: #ffd3eb77;
+@kungalgame-trans-pink-2: #ffadda77;
+@kungalgame-trans-pink-3: #ff80c877;
+@kungalgame-trans-pink-4: #e85aad77;
+@kungalgame-trans-pink-5: #bf398977;
+@kungalgame-trans-pink-6: #99286e77;
+@kungalgame-trans-pink-7: #77205777;
+@kungalgame-trans-pink-8: #61134777;
+@kungalgame-trans-pink-9: #4d033677;

src/components/KUNGalgameTopBar.vue

@@ -1,28 +1,55 @@
 <script setup lang="ts">
-// 引入一个 vue3 中传参的函数
+const topBarItem: string[] = [
-import { defineProps } from 'vue'
+  '返回主页',
-import { useHeaderStore } from '@/store/modules/header'
+  '所有帖子',
+  '发布帖子',
+  '技术交流',
+  '关于我们',
+]
+
+let topBarColor: string[] = [
+  'red',
+  'yellow',
+  'blue',
+  'green',
+  'purple',
+  'orange',
+]
+
+let topicStyle = {}
 
 // 接受父组件的传值
-const props = defineProps(['isMainPage'])
+let props = defineProps(['isMainPage', 'isTopicPage'])
 
-const store = useHeaderStore()
+const isMain = props.isMainPage
-
+const isTopicPage = props.isMainPage
-let navItemNum = store.topBarItem.length
+// 如果是主页的话删除 “返回主页” 项目
-
+if (isMain) {
-const navItemNumString = navItemNum + '00px'
+  topBarItem.shift()
-
-const isMain = true
-
-if (isMain === true) {
-  store.topBarItem.unshift()
 }
 
-let topBarItem: string[] = store.topBarItem
+if (isTopicPage) {
+  topicStyle = {
+    top: 0,
+    position: 'sticky',
+    'z-index': 1007,
+    /* 设置可视区域内容不覆盖顶部 shadow */
+    'margin-bottom': '10px',
+  }
+}
+
+// 根据导航条的项目个数操作 css 中导航条的宽度
+let navItemNum = topBarItem.length
+const navItemNumString = navItemNum + '00px'
+
+// 根据导航条的项目个数操作 css 中导航条的 hover
+topBarColor.forEach((e, index) => {
+  topBarColor[index] = '--kungalgame-' + e + '-3'
+})
 </script>
 
 <template>
-  <div class="header" :isMainPage="isMain">
+  <div class="header" :style="topicStyle">
     <!-- 顶部左侧交互栏 -->
     <div class="nav-top">
       <div class="kungal-info">
@@ -46,16 +73,16 @@ let topBarItem: string[] = store.topBarItem
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 头部样式 */
 .header {
   /* 头部高度 */
   height: 58px;
   /* 头部下方阴影 */
-  box-shadow: 0 2px 4px 0 var(--kungalgame-trans-blue-1);
+  box-shadow: 0 2px 4px 0 @kungalgame-trans-blue-1;
   /* 头部背景 */
   backdrop-filter: blur(5px);
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -67,81 +94,77 @@ let topBarItem: string[] = store.topBarItem
 .kungal-info {
   display: flex;
   align-items: center;
-}
+  img {
-/* 网站 LOGO */
-.kungal-info img {
     height: 50px;
     margin-left: 50px;
     cursor: pointer;
-}
+  }
-/* 网站名称 */
+  span {
-.kungal-info span {
     margin-left: 20px;
     margin-right: 7px;
-  color: var(--kungalgame-font-color-3);
+    color: @kungalgame-font-color-3;
     font-weight: bold;
     cursor: pointer;
+  }
 }
-/* 顶部导航栏 */
+
+@navNumber: v-bind(navItemNum);
+
 .top-bar {
-  /* 导航条内容个数的变化 */
-  width: v-bind(navItemNumString);
   position: relative;
   text-align: center;
-}
+  width: v-bind(navItemNumString);
-.top-bar ul {
+  ul {
-  display: flex;
     align-items: center;
+    display: flex;
     right: 5%;
-}
+    .top-bar-box {
-.top-bar ul .top-bar-box {
+      border-radius: 2px;
-  position: absolute;
       bottom: 0;
-  left: 0;
-  /* 如果导航栏就六个导航，那么每个导航的宽度都是整个导航
-            的六分之一 */
-  width: calc((100% / v-bind(navItemNum)) * 1);
       height: 7px;
-  border-radius: 2px;
+      left: 0;
+      position: absolute;
       transition: 0.5s;
-}
+      width: calc(100% / @navNumber);
-.top-bar ul li {
+    }
-  width: 100%;
+    li {
-  color: var(--kungalgame-blue-5);
+      color: @kungalgame-blue-5;
-  font-weight: bold;
-  display: block;
-  width: 100%;
-  line-height: 58px;
       cursor: pointer;
-}
+      display: block;
-.top-bar ul li:hover {
+      font-weight: bold;
-  background-color: var(--kungalgame-blue-0);
+      line-height: 58px;
-  transition: 0.5s;
+      width: 100%;
+      &:hover {
+        background-color: @kungalgame-blue-0;
         border-radius: 2px;
-}
+        transition: 0.5s;
-.top-bar ul li:nth-child(1):hover ~ .top-bar-box {
+      }
-  left: calc(100% / 4 * 0);
+      &:nth-child(1):hover ~ .top-bar-box {
-  background-color: var(--kungalgame-red-3);
+        background-color: @kungalgame-red-3;
-}
+        left: calc(100% / @navNumber * 0);
-.top-bar ul li:nth-child(2):hover ~ .top-bar-box {
+      }
-  left: calc(100% / 4 * 1);
-  background-color: var(--kungalgame-yellow-3);
-}
-.top-bar ul li:nth-child(3):hover ~ .top-bar-box {
-  left: calc(100% / 4 * 2);
-  background-color: var(--kungalgame-blue-3);
-}
-.top-bar ul li:nth-child(4):hover ~ .top-bar-box {
-  left: calc(100% / 4 * 3);
-  background-color: var(--kungalgame-green-3);
-}
 
-/* 顶部搜索框 */
+      &:nth-child(2):hover ~ .top-bar-box {
-/* 
+        background-color: @kungalgame-yellow-3;
+        left: calc(100% / @navNumber * 1);
+      }
 
-TODO:
+      &:nth-child(3):hover ~ .top-bar-box {
+        background-color: @kungalgame-blue-3;
+        left: calc(100% / @navNumber * 2);
+      }
 
-*/
+      &:nth-child(4):hover ~ .top-bar-box {
+        background-color: @kungalgame-green-3;
+        left: calc(100% / @navNumber * 3);
+      }
+      &:nth-child(5):hover ~ .top-bar-box {
+        background-color: @kungalgame-purple-3;
+        left: calc(100% / @navNumber * 4);
+      }
+    }
+  }
+}
 
 /* 用户个人信息 */
 .kungalgamer-info {
@@ -156,7 +179,7 @@ TODO:
 }
 
 .kungalgamer-info > span {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   margin-left: 30px;
   padding-right: 50px;
 }

src/css/color.css

@@ -0,0 +1,8 @@
+:root {
+  /* 基本阴影 */
+  /* 
+    
+    transparent color
+    
+    */
+}

src/main.ts

@@ -1,17 +1,16 @@
 // core
-import { createApp } from "vue";
+import { createApp } from 'vue'
-/* 预设的样式 */
+// APP
-import "./assets/css/reset.css";
+import App from './App.vue'
-import App from "./App.vue";
 /* 引入 vue-router */
-import router from "./router";
+import router from './router'
 /* 引入 Pinia */
-import { createPinia } from "pinia";
+import { createPinia } from 'pinia'
 
 /* 导入 Pinia */
 const store = createPinia()
 
 // css
-import "./assets/css/reset.css";
+import './assets/css/reset.css'
-import "./styles/color.css";
+import './assets/css/color.less'
-createApp(App).use(router).use(store).mount("#app");
+createApp(App).use(router).use(store).mount('#app')

src/store/modules/header.ts

@@ -1,12 +0,0 @@
-import { defineStore } from "pinia";
-
-export const useHeaderStore = defineStore("header", () => {
-  const topBarItem: string[] = [
-    "返回主页",
-    "所有帖子",
-    "发布帖子",
-    "技术交流",
-    "关于我们",
-  ];
-  return { topBarItem };
-});

src/styles/color.css

@@ -1,189 +0,0 @@
-:root {
-  /* 基本阴影 */
-  --shadow: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05),
-    0 2px 8px hsla(0, 0%, 0%, 0.05);
-  --kungalgame-shadow-0: 5px 5px 7px var(--kungalgame-trans-gray-4),
-    -5px -5px 7px var(--kungalgame-trans-white-1);
-  --kungalgame-shadow-1: 2px 2px 4px var(--kungalgame-trans-gray-4),
-    -2px -2px 4px var(--kungalgame-trans-white-1);
-  --kungalgame-font-color-0: #777777;
-  --kungalgame-font-color-1: #666666;
-  --kungalgame-font-color-2: #4d4d4d;
-  --kungalgame-font-color-3: #242424;
-  --kungalgame-black: #1f2328;
-  --kungalgame-white: #ffffff;
-  --kungalgame-gray-0: #f6f8fa;
-  --kungalgame-gray-1: #eaeef2;
-  --kungalgame-gray-2: #d0d7de;
-  --kungalgame-gray-3: #afb8c1;
-  --kungalgame-gray-4: #8c959f;
-  --kungalgame-gray-5: #6e7781;
-  --kungalgame-gray-6: #57606a;
-  --kungalgame-gray-7: #424a53;
-  --kungalgame-gray-8: #32383f;
-  --kungalgame-gray-9: #24292f;
-  --kungalgame-blue-0: #ddf4ff;
-  --kungalgame-blue-1: #b6e3ff;
-  --kungalgame-blue-2: #80ccff;
-  --kungalgame-blue-3: #54aeff;
-  --kungalgame-blue-4: #218bff;
-  --kungalgame-blue-5: #0969da;
-  --kungalgame-blue-6: #0550ae;
-  --kungalgame-blue-7: #033d8b;
-  --kungalgame-blue-8: #0a3069;
-  --kungalgame-blue-9: #002155;
-  --kungalgame-green-0: #dafbe1;
-  --kungalgame-green-1: #aceebb;
-  --kungalgame-green-2: #6fdd8b;
-  --kungalgame-green-3: #4ac26b;
-  --kungalgame-green-4: #2da44e;
-  --kungalgame-green-5: #1a7f37;
-  --kungalgame-green-6: #116329;
-  --kungalgame-green-7: #044f1e;
-  --kungalgame-green-8: #003d16;
-  --kungalgame-green-9: #002d11;
-  --kungalgame-yellow-0: #fff8c5;
-  --kungalgame-yellow-1: #fae17d;
-  --kungalgame-yellow-2: #eac54f;
-  --kungalgame-yellow-3: #d4a72c;
-  --kungalgame-yellow-4: #bf8700;
-  --kungalgame-yellow-5: #9a6700;
-  --kungalgame-yellow-6: #7d4e00;
-  --kungalgame-yellow-7: #633c01;
-  --kungalgame-yellow-8: #4d2d00;
-  --kungalgame-yellow-9: #3b2300;
-  --kungalgame-orange-0: #fff1e5;
-  --kungalgame-orange-1: #ffd8b5;
-  --kungalgame-orange-2: #ffb77c;
-  --kungalgame-orange-3: #fb8f44;
-  --kungalgame-orange-4: #e16f24;
-  --kungalgame-orange-5: #bc4c00;
-  --kungalgame-orange-6: #953800;
-  --kungalgame-orange-7: #762c00;
-  --kungalgame-orange-8: #5c2200;
-  --kungalgame-orange-9: #471700;
-  --kungalgame-red-0: #ffebe9;
-  --kungalgame-red-1: #ffcecb;
-  --kungalgame-red-2: #ffaba8;
-  --kungalgame-red-3: #ff8182;
-  --kungalgame-red-4: #fa4549;
-  --kungalgame-red-5: #cf222e;
-  --kungalgame-red-6: #a40e26;
-  --kungalgame-red-7: #82071e;
-  --kungalgame-red-8: #660018;
-  --kungalgame-red-9: #4c0014;
-  --kungalgame-purple-0: #fbefff;
-  --kungalgame-purple-1: #ecd8ff;
-  --kungalgame-purple-2: #d8b9ff;
-  --kungalgame-purple-3: #c297ff;
-  --kungalgame-purple-4: #a475f9;
-  --kungalgame-purple-5: #8250df;
-  --kungalgame-purple-6: #6639ba;
-  --kungalgame-purple-7: #512a97;
-  --kungalgame-purple-8: #3e1f79;
-  --kungalgame-purple-9: #2e1461;
-  --kungalgame-pink-0: #ffeff7;
-  --kungalgame-pink-1: #ffd3eb;
-  --kungalgame-pink-2: #ffadda;
-  --kungalgame-pink-3: #ff80c8;
-  --kungalgame-pink-4: #e85aad;
-  --kungalgame-pink-5: #bf3989;
-  --kungalgame-pink-6: #99286e;
-  --kungalgame-pink-7: #772057;
-  --kungalgame-pink-8: #611347;
-  --kungalgame-pink-9: #4d0336;
-  /* 
-    
-    transparent color
-    
-    */
-  --kungalgame-trans-black: #1f2328;
-  --kungalgame-trans-white-1: #fffffff7;
-  --kungalgame-trans-white-2: #ffffffd9;
-  --kungalgame-trans-white-3: #ffffffc7;
-  --kungalgame-trans-white-4: #ffffffa1;
-  --kungalgame-trans-white-5: #ffffff8e;
-  --kungalgame-trans-white-6: #ffffff77;
-  --kungalgame-trans-white-7: #ffffff48;
-  --kungalgame-trans-white-8: #ffffff1a;
-  --kungalgame-trans-gray-0: #f6f8fa77;
-  --kungalgame-trans-gray-1: #eaeef277;
-  --kungalgame-trans-gray-2: #d0d7de77;
-  --kungalgame-trans-gray-3: #afb8c177;
-  --kungalgame-trans-gray-4: #8c959f77;
-  --kungalgame-trans-gray-5: #6e778177;
-  --kungalgame-trans-gray-6: #57606a77;
-  --kungalgame-trans-gray-7: #424a5377;
-  --kungalgame-trans-gray-8: #32383f77;
-  --kungalgame-trans-gray-9: #24292f77;
-  --kungalgame-trans-blue-0: #ddf4ff77;
-  --kungalgame-trans-blue-1: #b6e3ff77;
-  --kungalgame-trans-blue-2: #80ccff77;
-  --kungalgame-trans-blue-3: #54aeff77;
-  --kungalgame-trans-blue-4: #218bff77;
-  --kungalgame-trans-blue-5: #0969da77;
-  --kungalgame-trans-blue-6: #0550ae77;
-  --kungalgame-trans-blue-7: #033d8b77;
-  --kungalgame-trans-blue-8: #0a306977;
-  --kungalgame-trans-blue-9: #00215577;
-  --kungalgame-trans-green-0: #dafbe177;
-  --kungalgame-trans-green-1: #aceebb77;
-  --kungalgame-trans-green-2: #6fdd8b77;
-  --kungalgame-trans-green-3: #4ac26b77;
-  --kungalgame-trans-green-4: #2da44e77;
-  --kungalgame-trans-green-5: #1a7f3777;
-  --kungalgame-trans-green-6: #11632977;
-  --kungalgame-trans-green-7: #044f1e77;
-  --kungalgame-trans-green-8: #003d1677;
-  --kungalgame-trans-green-9: #002d1177;
-  --kungalgame-trans-yellow-0: #fff8c577;
-  --kungalgame-trans-yellow-1: #fae17d77;
-  --kungalgame-trans-yellow-2: #eac54f77;
-  --kungalgame-trans-yellow-3: #d4a72c77;
-  --kungalgame-trans-yellow-4: #bf870077;
-  --kungalgame-trans-yellow-5: #9a670077;
-  --kungalgame-trans-yellow-6: #7d4e0077;
-  --kungalgame-trans-yellow-7: #633c0177;
-  --kungalgame-trans-yellow-8: #4d2d0077;
-  --kungalgame-trans-yellow-9: #3b230077;
-  --kungalgame-trans-orange-0: #fff1e577;
-  --kungalgame-trans-orange-1: #ffd8b577;
-  --kungalgame-trans-orange-2: #ffb77c77;
-  --kungalgame-trans-orange-3: #fb8f4477;
-  --kungalgame-trans-orange-4: #e16f2477;
-  --kungalgame-trans-orange-5: #bc4c0077;
-  --kungalgame-trans-orange-6: #95380077;
-  --kungalgame-trans-orange-7: #762c0077;
-  --kungalgame-trans-orange-8: #5c220077;
-  --kungalgame-trans-orange-9: #47170077;
-  --kungalgame-trans-red-0: #ffebe977;
-  --kungalgame-trans-red-1: #ffcecb77;
-  --kungalgame-trans-red-2: #ffaba877;
-  --kungalgame-trans-red-3: #ff818277;
-  --kungalgame-trans-red-4: #fa454977;
-  --kungalgame-trans-red-5: #cf222e77;
-  --kungalgame-trans-red-6: #a40e2677;
-  --kungalgame-trans-red-7: #82071e77;
-  --kungalgame-trans-red-8: #66001877;
-  --kungalgame-trans-red-9: #4c001477;
-  --kungalgame-trans-purple-0: #fbefff77;
-  --kungalgame-trans-purple-1: #ecd8ff77;
-  --kungalgame-trans-purple-2: #d8b9ff77;
-  --kungalgame-trans-purple-3: #c297ff77;
-  --kungalgame-trans-purple-4: #a475f977;
-  --kungalgame-trans-purple-5: #8250df77;
-  --kungalgame-trans-purple-6: #6639ba77;
-  --kungalgame-trans-purple-7: #512a9777;
-  --kungalgame-trans-purple-8: #3e1f7977;
-  --kungalgame-trans-purple-9: #2e146177;
-  --kungalgame-trans-pink-0: #ffeff777;
-  --kungalgame-trans-pink-1: #ffd3eb77;
-  --kungalgame-trans-pink-2: #ffadda77;
-  --kungalgame-trans-pink-3: #ff80c877;
-  --kungalgame-trans-pink-4: #e85aad77;
-  --kungalgame-trans-pink-5: #bf398977;
-  --kungalgame-trans-pink-6: #99286e77;
-  --kungalgame-trans-pink-7: #77205777;
-  --kungalgame-trans-pink-8: #61134777;
-  --kungalgame-trans-pink-9: #4d033677;
-}

src/views/403/403.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -28,8 +28,8 @@
   min-width: 700px;
   min-height: 600px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
   flex-direction: column;
@@ -48,19 +48,19 @@ p {
 p:first-child {
   font-size: 50px;
   font-weight: bold;
-  color: var(--kungalgame-red-5);
+  color: @kungalgame-red-5;
 }
 button {
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   width: 200px;
   height: 30px;
   font-size: 17px;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   cursor: pointer;
 }
 button:hover {
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
   transition: 0.2s;
 }
 </style>

src/views/404/404.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -28,8 +28,8 @@
   min-width: 700px;
   min-height: 600px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
   flex-direction: column;
@@ -48,19 +48,19 @@ p {
 p:first-child {
   font-size: 50px;
   font-weight: bold;
-  color: var(--kungalgame-red-5);
+  color: @kungalgame-red-5;
 }
 button {
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   width: 200px;
   height: 30px;
   font-size: 17px;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   cursor: pointer;
 }
 button:hover {
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
   transition: 0.2s;
 }
 </style>

src/views/Home/KUNGalgameMainPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import KUNGalgameTopBar from "@/components/KUNGalgameTopBar.vue";
+import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
-import MainPageContent from "./content/MainPageContent.vue";
+import MainPageContent from './content/MainPageContent.vue'
-import MainPageFooter from "./footer/MainPageFooter.vue";
+import MainPageFooter from './footer/MainPageFooter.vue'
 </script>
 
 <template>
@@ -24,7 +24,7 @@ import MainPageFooter from "./footer/MainPageFooter.vue";
   background-position: center;
   background-size: cover;
   min-width: 800px;
-  font-family: "adobe-clean", "Source Sans Pro", -apple-system,
+  font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
-    "BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
+    'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
 }
 </style>

src/views/Home/content/MainPageContent.vue

@@ -1,10 +1,6 @@
-<script lang="ts">
+<script setup lang="ts">
-import MainPageAside from "./aside/MainPageAside.vue";
+import MainPageAside from './aside/MainPageAside.vue'
-import MainPageArticle from "./article/MainPageArticle.vue";
+import MainPageArticle from './article/MainPageArticle.vue'
-export default {
-  name: "MainPageContent",
-  components: { MainPageAside, MainPageArticle },
-};
 </script>
 
 <template>
@@ -21,7 +17,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 主体部分配置 */
 .main {
   width: 100%;
@@ -55,7 +51,7 @@ export default {
   align-items: center;
   /* 设置背景毛玻璃效果 */
   backdrop-filter: blur(5px);
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   /* 设置背景边框和圆角 */
   border-radius: 5px;
   padding: 5px;

src/views/Home/content/article/MainPageArticle.vue

@@ -1,10 +1,6 @@
-<script lang="ts">
+<script setup lang="ts">
-import ArticleHeader from "./header/ArticleHeader.vue";
+import ArticleHeader from './header/ArticleHeader.vue'
-import ArticleContent from "./content/ArticleContent.vue";
+import ArticleContent from './content/ArticleContent.vue'
-export default {
-  name: "MainPageArticle",
-  components: { ArticleHeader, ArticleContent },
-};
 </script>
 
 <template>
@@ -18,7 +14,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 文章部分 */
 .article {
   width: 1px;
@@ -35,8 +31,8 @@ export default {
   /* 盒子的边显示在内侧 */
   box-sizing: border-box;
   /* 文章区边上的颜色 */
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   border-radius: 5px;
   display: flex;
   /* 文章区所有组件居中 */

src/views/Home/content/article/content/ArticleContent.vue

@@ -1,9 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import SingleTopic from "./topic/SingleTopic.vue";
+import SingleTopic from './topic/SingleTopic.vue'
-export default {
-  name: "ArticleContent",
-  components: { SingleTopic },
-};
 </script>
 
 <template>
@@ -30,7 +26,7 @@ export default {
     <SingleTopic />
   </div>
 </template>
-<style scoped>
+<style lang="less" scoped>
 /* 帖子区容器 */
 .topic-container {
   /* 帖子区域占文章总区域的宽度 */
@@ -48,11 +44,11 @@ export default {
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .topic-container::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 </style>

src/views/Home/content/article/content/topic/SingleTopic.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import UserPart from "./components/UserPart.vue";
+import UserPart from './components/UserPart.vue'
-import TopicPart from "./components/TopicPart.vue";
+import TopicPart from './components/TopicPart.vue'
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
 
-const router = useRouter();
+const router = useRouter()
-const toTopic = (url:string) => {
+const toTopic = (url: string) => {
   router.push(url)
 }
 </script>
@@ -14,20 +14,20 @@ const toTopic = (url:string) => {
     <TopicPart />
   </div>
 </template>
-<style scoped>
+<style lang="less" scoped>
 /* 单个帖子 */
 .topic {
   width: 100%;
   height: 70px;
   flex-shrink: 0;
   border-radius: 3px;
-  background-color: var(--kungalgame-trans-white-4);
+  background-color: @kungalgame-trans-white-4;
   margin-bottom: 3px;
   /* 单个帖子横向弹性盒 */
   display: flex;
 }
 .topic:hover {
-  background-color: var(--kungalgame-trans-white-1);
+  background-color: @kungalgame-trans-white-1;
   transition: 0.2s;
 }
 .topic:last-child {

src/views/Home/content/article/content/topic/components/TopicPart.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
-export default {
-  name: "TopicPart",
-  components: {
-    Icon,
-  },
-};
 </script>
 <template>
   <!-- 帖子信息 -->
@@ -41,7 +35,7 @@ export default {
     </div>
   </div>
 </template>
-<style scoped>
+<style lang="less" scoped>
 /* 帖子信息 */
 .topic-info {
   width: 1px;
@@ -85,7 +79,7 @@ export default {
 }
 /* 帖子标题的字体颜色 */
 .topic-title span {
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   font-weight: 500;
 }
 /* 帖子点赞数等信息 */
@@ -99,7 +93,7 @@ export default {
 /* 设置点赞、评论、查看字体和位置 */
 .topic-status ul {
   display: flex;
-  color: var(--kungalgame-gray-7);
+  color: @kungalgame-gray-7;
   font-size: smaller;
 }
 /* 点赞、评论、查看之间的距离 */
@@ -112,7 +106,7 @@ export default {
 .topic-post-date {
   width: 45px;
   font-size: x-small;
-  color: var(--kungalgame-gray-4);
+  color: @kungalgame-gray-4;
   /* 居中 */
   display: flex;
   justify-content: center;
@@ -142,6 +136,6 @@ export default {
 /* 发帖预览信息的字体 */
 .topic-introduction-text p {
   font-size: 14px;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 </style>

src/views/Home/content/article/content/topic/components/UserPart.vue

@@ -1,16 +1,10 @@
-<script lang="ts">
+<script setup lang="ts"></script>
-export default {
-  name: "UserPart",
-};
-</script>
 <template>
   <!-- 帖子发布者个人信息 -->
   <div class="kungalgamer-topic-info">
     <!-- 发布者头像 -->
     <div class="kungalgamer-topic-avatar">
-      <a href="#"
+      <a href="#"><img src="@/assets/images/topic.jpg" alt="鲲" /></a>
-        ><img src="@/assets/images/topic.jpg" alt="鲲"
-      /></a>
     </div>
     <!-- 发布者姓名 -->
     <div class="kungalgamer-name">
@@ -20,7 +14,7 @@ export default {
     <!--                   <div class="kungalgamer-rank"></div> -->
   </div>
 </template>
-<style scoped>
+<style lang="less" scoped>
 /* 发帖人信息 */
 .kungalgamer-topic-info {
   width: 70px;
@@ -58,7 +52,7 @@ export default {
 }
 /* 发帖人昵称位置设置 */
 .kungalgamer-name {
-  border-top: 1px solid var(--kungalgame-gray-2);
+  border-top: 1px solid @kungalgame-gray-2;
   flex-grow: 1;
   display: flex;
 }
@@ -77,7 +71,7 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
   /* 颜色和字体大小 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   font-size: x-small;
 }
 </style>

src/views/Home/content/article/header/ArticleHeader.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
-export default {
-  name: "ArticleHeader",
-  components: {
-    Icon,
-  },
-};
 </script>
 
 <template>
@@ -72,41 +66,88 @@ export default {
         <div class="search-history-container">
           <div>
             <span
-              >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" />
+              >啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+              />
             </span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
           <div>
-            <span>啊这可海星<Icon class="del-history" icon="line-md:close-circle-twotone" /></span>
+            <span
+              >啊这可海星<Icon
+                class="del-history"
+                icon="line-md:close-circle-twotone"
+            /></span>
           </div>
         </div>
       </div>
@@ -119,7 +160,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 文章顶部交互栏 */
 .nav-article {
   width: 100%;
@@ -141,16 +182,16 @@ export default {
 }
 /* 筛选 */
 .nav-article-sort-container {
-  background-color: var(--kungalgame-trans-red-3);
+  background-color: @kungalgame-trans-red-3;
   flex-grow: 1;
   border-radius: 5px 0 0 0;
   position: relative;
-  border-bottom: 1px solid var(--kungalgame-trans-blue-4);
+  border-bottom: 1px solid @kungalgame-trans-blue-4;
   box-sizing: border-box;
   cursor: pointer;
 }
 .nav-article-sort-container:hover {
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
 }
 .sort-container {
   width: 100%;
@@ -164,16 +205,16 @@ export default {
 .sort-submenu {
   display: none;
   flex-direction: column;
-  box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-blue-4);
+  box-shadow: 1px 2px 1px 1px @kungalgame-trans-blue-4;
 }
 .nav-article-sort-container:hover .sort-submenu {
   display: flex;
 }
 .sort-submenu > div {
   padding: 10px 0;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
   font-size: 14px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -181,13 +222,13 @@ export default {
 }
 /* 单个二级菜单 hover */
 .sort-submenu > div:hover {
-  background-color: var(--kungalgame-red-1);
+  background-color: @kungalgame-red-1;
 }
 .sort-submenu > div:active {
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 .icon-item {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   padding-right: 3px;
 }
 /* 搜索帖子 */
@@ -198,17 +239,17 @@ export default {
   align-items: center;
   /* 页面缩小不换行 */
   white-space: nowrap;
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
   flex-grow: 2;
   /* 相对于二级菜单定位 */
   position: relative;
   display: flex;
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   box-sizing: border-box;
 }
 /* 中间搜索菜单的 hover */
 .nav-article-search-container:hover {
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
 }
 /* 搜索框表单 */
 .article-search-form {
@@ -233,11 +274,11 @@ export default {
   /* 搜索时输入的字体大小 */
   font-size: 16px;
   border: none;
-  background-color: var(--kungalgame-trans-white-9);
+  background-color: @kungalgame-trans-white-8;
 }
 /* 提示文字“搜索帖子”的文字颜色 */
 .nav-search-input::placeholder {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 获取焦点后的框体 */
 .nav-search-input:focus {
@@ -249,7 +290,7 @@ export default {
   height: 40px;
   width: 40px;
   flex-shrink: 0;
-  border-left: 1px solid var(--kungalgame-trans-blue-4);
+  border-left: 1px solid @kungalgame-trans-blue-4;
   /* 搜索图标居中 */
   display: flex;
   justify-content: center;
@@ -260,11 +301,11 @@ export default {
 }
 /* 搜索按钮的 hover */
 .nav-search-btn:hover {
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 /* 搜索按钮的 active */
 .nav-search-btn:active {
-  background-color: var(--kungalgame-red-3);
+  background-color: @kungalgame-red-3;
 }
 /* 搜索历史的容器 */
 .article-search-history {
@@ -277,11 +318,11 @@ export default {
   /* 无 hover 时不显示搜索历史 */
   display: none;
   flex-direction: column;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
-  border: 1px solid var(--kungalgame-red-1);
+  border: 1px solid @kungalgame-red-1;
   border-radius: 7px;
-  box-shadow: 0 1px 6px var(--kungalgame-gray-2);
+  box-shadow: 0 1px 6px @kungalgame-gray-2;
 }
 /* hover 时显示搜索历史 */
 .nav-article-search-container:hover .article-search-history {
@@ -299,10 +340,10 @@ export default {
 }
 .search-history-title span:nth-child(2) {
   cursor: pointer;
-  border-bottom: 1.5px solid var(--kungalgame-trans-white-2);
+  border-bottom: 1.5px solid @kungalgame-trans-white-2;
 }
 .search-history-title span:nth-child(2):hover {
-  border-bottom: 1.5px solid var(--kungalgame-blue-4);
+  border-bottom: 1.5px solid @kungalgame-blue-4;
 }
 /* 搜索历史 TAG 的存放容器 */
 .search-history-container {
@@ -317,12 +358,12 @@ export default {
 .search-history-container > div {
   padding: 7px 3px;
   margin: 2px 0;
-  background-color: var(--kungalgame-trans-gray-1);
+  background-color: @kungalgame-trans-gray-1;
   cursor: pointer;
 }
 /* 单个搜索历史的 hover */
 .search-history-container > div:hover {
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
 }
 /* 单个搜索按钮 hover 时显示删除按钮 */
 .search-history-container > div:hover .del-history {
@@ -340,7 +381,7 @@ export default {
   right: 1%;
   font-size: medium;
   position: absolute;
-  color: var(--kungalgame-font-color-0);
+  color: @kungalgame-font-color-0;
   display: none;
 }
 /* 更多 */
@@ -353,18 +394,18 @@ export default {
   align-items: center;
   /* 页面缩小不换行 */
   white-space: nowrap;
-  background-color: var(--kungalgame-trans-purple-3);
+  background-color: @kungalgame-trans-purple-3;
   flex-grow: 1;
   border-radius: 0 5px 0 0;
   cursor: pointer;
-  border-bottom: 1px solid var(--kungalgame-trans-blue-4);
+  border-bottom: 1px solid @kungalgame-trans-blue-4;
   box-sizing: border-box;
 }
 .nav-article-more-topic:hover {
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
 }
 .nav-article-more-topic:active {
-  background-color: var(--kungalgame-trans-red-3);
+  background-color: @kungalgame-trans-red-3;
 }
 .all-topic {
   font-size: 18px;

src/views/Home/content/aside/item/AsideItem.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
-export default {
-  name: "AsideItem",
-  components: {
-    Icon,
-  },
-};
 </script>
 
 <template>
@@ -28,8 +22,18 @@ export default {
       <div class="kungalgame-model-container">
         模式切换
         <ul class="kungalgame-model">
-          <li><Icon class="sun" icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition" />白天</li>
+          <li>
-          <li><Icon class="moon" icon="line-md:sunny-outline-to-moon-loop-transition" />黑夜</li>
+            <Icon
+              class="sun"
+              icon="line-md:moon-filled-alt-to-sunny-filled-loop-transition"
+            />白天
+          </li>
+          <li>
+            <Icon
+              class="moon"
+              icon="line-md:sunny-outline-to-moon-loop-transition"
+            />黑夜
+          </li>
         </ul>
       </div>
       <div>其它游戏</div>
@@ -72,7 +76,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 侧边栏交互 */
 .nav-aside {
   width: 100%;
@@ -86,7 +90,7 @@ export default {
   text-align: center;
   /* 字体设置 */
   font-size: small;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 页面缩小到最小时不换行 */
   overflow: hidden;
   white-space: nowrap;
@@ -112,11 +116,11 @@ export default {
 .new-article button {
   height: 100%;
   width: 100%;
-  background-color: var(--kungalgame-red-0);
+  background-color: @kungalgame-red-0;
-  border: 1px solid var(--kungalgame-red-3);
+  border: 1px solid @kungalgame-red-3;
   border-radius: 5px;
   cursor: pointer;
-  color: var(--kungalgame-red-3);
+  color: @kungalgame-red-3;
   font-weight: bold;
   font-size: larger;
   /* 页面缩小到最小时不换行 */
@@ -126,8 +130,8 @@ export default {
 /* 发布按钮 hover 效果 */
 .new-article button:hover {
   font-size: xx-large;
-  background-color: var(--kungalgame-red-3);
+  background-color: @kungalgame-red-3;
-  color: var(--kungalgame-red-0);
+  color: @kungalgame-red-0;
   /* 效果过渡时长 */
   transition: 0.3s;
 }
@@ -140,7 +144,7 @@ export default {
   grid-template-rows: repeat(2, 40px);
   font-size: 14px;
   /* 字体颜色 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 相对定位 */
   position: relative;
 }
@@ -151,7 +155,7 @@ export default {
   justify-content: center;
   align-items: center;
   font-weight: bold;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 模式切换 */
 .kungalgame-model {
@@ -162,7 +166,7 @@ export default {
   width: 80px;
   display: none;
   flex-direction: column;
-  background-color: var(--kungalgame-blue-0);
+  background-color: @kungalgame-blue-0;
   z-index: 7;
 }
 /* hover 时菜单出现 */
@@ -181,21 +185,21 @@ export default {
 .sun {
   margin-right: 5px;
   font-size: x-large;
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 .moon {
   margin-right: 5px;
   font-size: x-large;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 /* 每一个模式切换的 hover */
 .kungalgame-model li:hover {
-  background-color: var(--kungalgame-red-1);
+  background-color: @kungalgame-red-1;
 }
 /* 设置六个功能（模式、排行、背景等）的 hover */
 .item-box-container > div:hover {
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
-  background-color: var(--kungalgame-blue-0);
+  background-color: @kungalgame-blue-0;
   cursor: pointer;
 }
 /* hover 时展示背景功能板块 */
@@ -211,11 +215,11 @@ export default {
   position: absolute;
   top: 100%;
   left: 0%;
-  background-color: var(--kungalgame-blue-0);
+  background-color: @kungalgame-blue-0;
-  box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-red-3);
+  box-shadow: 1px 2px 1px 1px @kungalgame-trans-red-3;
   font-size: 15px;
   font-weight: normal;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 /* 背景容器的标题字体 */
 .kungalgame-background-container span {
@@ -230,7 +234,7 @@ export default {
   display: grid;
   grid-template-columns: repeat(3, 80px);
   grid-template-rows: repeat(3, 50px);
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   position: relative;
   /* 距离下方区域的距离 */
   margin-bottom: 17px;
@@ -242,7 +246,7 @@ export default {
   align-items: center;
 }
 /* 单个图片的距离 */
-.kungalgame-reset-bg img{
+.kungalgame-reset-bg img {
   width: 70px;
 }
 /* 图片的 hover */
@@ -263,29 +267,29 @@ export default {
 }
 .bg-url-input input {
   height: 25px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
 }
 /* 粘贴框的 focus */
 .bg-url-input input:focus {
   outline: none;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
 }
 /* 确定按钮 */
 .bg-url-input button {
   padding: 0 10px;
   height: 27px;
   box-sizing: border-box;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   border-left: none;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   cursor: pointer;
 }
 /* 确定按钮的 hover */
 .bg-url-input button:hover {
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
 }
 /* 确定按钮的 active */
 .bg-url-input button:active {
-  background-color: var(--kungalgame-trans-red-3);
+  background-color: @kungalgame-trans-red-3;
 }
 </style>

src/views/Home/content/aside/topic/HotTopic.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
-export default {
-  name: "HotTopic",
-  components: {
-    Icon,
-  },
-};
 </script>
 
 <template>
@@ -112,7 +106,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 侧边栏动态推送帖子的总容器 */
 .top-topic-wrap {
   width: 100%;
@@ -134,7 +128,7 @@ export default {
 .top-topic-title-name {
   /* 设置盒子的 border 在内侧显示 */
   box-sizing: border-box;
-  border: 3px dashed var(--kungalgame-trans-blue-1);
+  border: 3px dashed @kungalgame-trans-blue-1;
   border-bottom: none;
   /* 设置（今日热门话题）居中 */
   display: flex;
@@ -142,14 +136,14 @@ export default {
   align-items: center;
   /* 设置（今日热门话题占整个热门区域的宽度） */
   flex-grow: 1;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 设置页面缩小到最小时该行不换行 */
   overflow: hidden;
   white-space: nowrap;
 }
 /* 展示热门帖子标题的区域 */
 .top-topic-content {
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   /* 热门帖子标题区域占整个左侧页面中部的比例 */
   flex-grow: 10;
   /* 热门帖子标题部分为弹性盒 */
@@ -163,16 +157,17 @@ export default {
   justify-content: space-between;
   /* 设置每个帖子高度相等 */
   flex-grow: 1;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   align-items: center;
   cursor: pointer;
 }
 /* 单个热门帖子的 hover */
 .hot-topic:hover {
-  box-shadow: -2px -2px 5px var(--kungalgame-white), 2px 2px 5px var(--kungalgame-gray-3);
+  box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
 }
 .hot-topic:active {
-  box-shadow: inset 1px 1px 2px var(--kungalgame-gray-3), inset -1px -1px 2px var(--kungalgame-white);
+  box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
+    inset -1px -1px 2px @kungalgame-white;
 }
 /* 单个帖子的标题样式 */
 .top-topic-title {
@@ -197,12 +192,12 @@ export default {
   align-items: center;
 }
 .top-topic-number {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 .top-topic-number span {
   width: 38px;
   font-size: small;
   margin-left: 5px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 </style>

src/views/Home/content/aside/topic/NewTopic.vue

@@ -1,11 +1,5 @@
-<script lang="ts">
+<script setup lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
-export default {
-  name: "NewTopic",
-  components: {
-    Icon,
-  },
-};
 </script>
 
 <template>
@@ -112,7 +106,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 最新话题 */
 .new-topic-wrap {
   width: 100%;
@@ -131,7 +125,7 @@ export default {
 .new-topic-title-name {
   /* 设置盒子的 border 在内侧显示 */
   box-sizing: border-box;
-  border: 3px dashed var(--kungalgame-trans-pink-1);
+  border: 3px dashed @kungalgame-trans-pink-1;
   border-bottom: none;
   /* 设置（今日热门话题）居中 */
   display: flex;
@@ -139,13 +133,13 @@ export default {
   align-items: center;
   /* 设置（今日热门话题占整个热门区域的宽度） */
   flex-grow: 1;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 设置页面缩小到最小时该行不换行 */
   overflow: hidden;
   white-space: nowrap;
 }
 .new-topic-content {
-  background-color: var(--kungalgame-trans-pink-1);
+  background-color: @kungalgame-trans-pink-1;
   /* 热门帖子标题区域占整个左侧页面中部的比例 */
   flex-grow: 10;
   /* 热门帖子标题部分为弹性盒 */
@@ -159,16 +153,17 @@ export default {
   justify-content: space-between;
   /* 设置每个帖子高度相等 */
   flex-grow: 1;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   align-items: center;
   cursor: pointer;
 }
 /* 单个新帖子的 hover */
 .new-topic:hover {
-  box-shadow: -2px -2px 5px var(--kungalgame-white), 2px 2px 5px var(--kungalgame-gray-3);
+  box-shadow: -2px -2px 5px @kungalgame-white, 2px 2px 5px @kungalgame-gray-3;
 }
 .new-topic:active {
-  box-shadow: inset 1px 1px 2px var(--kungalgame-gray-3), inset -1px -1px 2px var(--kungalgame-white);
+  box-shadow: inset 1px 1px 2px @kungalgame-gray-3,
+    inset -1px -1px 2px @kungalgame-white;
 }
 /* 单个帖子的标题样式 */
 .new-topic-title {
@@ -195,7 +190,7 @@ export default {
 /* 时钟图标的颜色 */
 .new-topic-number {
   /* 设置 fa 图标字体的颜色 */
-  color: var(--kungalgame-purple-4);
+  color: @kungalgame-purple-4;
 }
 /* 右侧区域的大小 */
 .new-topic-number span {
@@ -203,6 +198,6 @@ export default {
   font-size: xx-small;
   /* 右侧区域距离最右侧的距离 */
   margin-left: 5px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 </style>

src/views/Home/footer/info/KUNGalgameInfo.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-import { Icon } from "@iconify/vue";
+import { Icon } from '@iconify/vue'
 export default {
-  name: "KUNGalgameInfo",
+  name: 'KUNGalgameInfo',
   components: {
     Icon,
   },
-};
+}
 </script>
 
 <template>
@@ -89,7 +89,7 @@ export default {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 头部下面的信息展示部分,目的是使信息区域居中且占比 61.8 */
 .kungalgame-footer-info {
   /* 信息区域的增长 */
@@ -126,7 +126,7 @@ export default {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: small;
 }
 .footer-catalog-wrap ul li {
@@ -134,10 +134,10 @@ export default {
 }
 .footer-catalog-wrap ul li a {
   flex-grow: 1;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 .footer-catalog-wrap ul {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 左侧下方的信息 */
 .footer-left-bottom-info {
@@ -152,7 +152,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: small;
 }
 .kungalgame-contact h2 {
@@ -184,7 +184,7 @@ export default {
   align-items: center;
   /* 右侧网站介绍部分相对于左侧的占比 */
   flex-grow: 1;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 网站名 */
 .kungalgame {

src/views/balance/Banlance.vue

@@ -306,7 +306,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -321,7 +321,7 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg1.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -335,15 +335,15 @@
   height: 500px;
   /* 居中 */
   margin: auto;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
   /* 模糊背景 */
   backdrop-filter: blur(5px);
   /* 边距 */
   padding: 10px;
   border-radius: 7px;
-  border: 1px solid var(--kungalgame-trans-blue-2);
+  border: 1px solid @kungalgame-trans-blue-2;
   /* 阴影 */
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   /* 竖直弹性盒 */
   display: flex;
   align-items: center;
@@ -373,7 +373,7 @@
   width: 49%;
   /* 固定高度 */
   height: 300px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   display: flex;
   flex-direction: column;
 }
@@ -383,8 +383,8 @@
   display: flex;
   justify-content: center;
   padding: 10px 0;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
 }
 /* 收入记录的容器 */
 .revenue-container {
@@ -398,21 +398,21 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .revenue-container::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单条收入 */
 .single-revenue {
   margin-top: 20px;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
 }
 /* 收入来源 */
 .revenue-reason {
-  border-left: 5px solid var(--kungalgame-blue-4);
+  border-left: 5px solid @kungalgame-blue-4;
   padding-left: 5px;
 }
 /* 收入时间和金额 */
@@ -428,7 +428,7 @@
 /* 收入金额 */
 .revenue-amount {
   padding: 0 5px;
-  background-color: var(--kungalgame-blue-2);
+  background-color: @kungalgame-blue-2;
 }
 /* 总收入 */
 .revenue-sum {
@@ -438,14 +438,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid var(--kungalgame-blue-4);
+  border-top: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
 }
 /* 支出 */
 .expenditure {
   width: 49%;
   height: 300px;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
   display: flex;
   flex-direction: column;
 }
@@ -455,8 +455,8 @@
   display: flex;
   justify-content: center;
   padding: 10px 0;
-  border-bottom: 1px solid var(--kungalgame-red-4);
+  border-bottom: 1px solid @kungalgame-red-4;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
 }
 /* 支出记录的容器 */
 .expenditure-container {
@@ -469,21 +469,21 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .expenditure-container::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单条支出 */
 .single-expenditure {
   margin-top: 20px;
-  border-bottom: 1px solid var(--kungalgame-red-4);
+  border-bottom: 1px solid @kungalgame-red-4;
 }
 /* 支出原因 */
 .expenditure-reason {
-  border-left: 5px solid var(--kungalgame-red-4);
+  border-left: 5px solid @kungalgame-red-4;
   padding-left: 5px;
 }
 /* 支出的时间和金额 */
@@ -499,7 +499,7 @@
 /* 支出金额 */
 .expenditure-amount {
   padding: 0 5px;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 /* 总支出 */
 .expenditure-sum {
@@ -508,8 +508,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-top: 1px solid var(--kungalgame-red-4);
+  border-top: 1px solid @kungalgame-red-4;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
 }
 /* 收入支出总结 */
 .sum {
@@ -528,7 +528,7 @@
 }
 .disposable-amount > span {
   padding: 5px;
-  background-color: var(--kungalgame-green-2);
+  background-color: @kungalgame-green-2;
 }
 /* 经济状态 */
 .amount-status {
@@ -538,11 +538,11 @@
 }
 .amount-status span {
   padding: 5px;
-  background-color: var(--kungalgame-red-4);
+  background-color: @kungalgame-red-4;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
 }
 .amount-status > div:last-child {
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 /* 版权 */
 .copyright {

src/views/contacts/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue';</script>
+import { Icon } from '@iconify/vue'
+</script>
 
 <template>
   <!-- 根容器 -->
@@ -40,7 +41,7 @@ import { Icon } from '@iconify/vue';</script>
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -57,8 +58,8 @@ import { Icon } from '@iconify/vue';</script>
   min-width: 500px;
   min-height: 500px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
 }
@@ -70,19 +71,19 @@ import { Icon } from '@iconify/vue';</script>
   /* 居中 */
   margin: auto;
   position: relative;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   border-radius: 7px;
-  box-shadow: var(--kungalgame-shadow-0);
+  box-shadow: @kungalgame-shadow-0;
   /* 竖直方向弹性分布 */
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 /* 内容区容器 hover */
 .container:hover {
-  box-shadow: var(--kungalgame-shadow-1);
+  box-shadow: @kungalgame-shadow-1;
   transition: 0.3s;
 }
 /* 页面的标题 */
@@ -105,14 +106,14 @@ import { Icon } from '@iconify/vue';</script>
 .kungalgame {
   position: absolute;
   bottom: 15%;
-  color: var(--kungalgame-trans-white-7);
+  color: @kungalgame-trans-white-7;
-  text-shadow: 2px 2px 3px var(--kungalgame-trans-blue-1);
+  text-shadow: 2px 2px 3px @kungalgame-trans-blue-1;
   font-size: 60px;
   font-style: italic;
   cursor: pointer;
 }
 .kungalgame:hover {
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
   transition: 0.1s;
 }
 /* 联系方式容器 */
@@ -137,12 +138,12 @@ import { Icon } from '@iconify/vue';</script>
 /* 图标字体 */
 .content i {
   height: 100%;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
   cursor: pointer;
   text-align: center;
 }
 .content i:hover {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
   transform: scale(1.2);
   transition: 0.1s;
 }
@@ -151,11 +152,11 @@ import { Icon } from '@iconify/vue';</script>
   position: absolute;
   bottom: 1%;
   left: 2%;
-  color: var(--kungalgame-font-color-0);
+  color: @kungalgame-font-color-0;
   cursor: pointer;
 }
 .return:hover {
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 /* 版权 */
 .copyright {

src/views/donate/index.vue

@@ -20,7 +20,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -36,8 +36,8 @@
   min-width: 500px;
   min-height: 500px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
   flex-direction: column;
@@ -51,15 +51,15 @@
   margin: auto;
   display: flex;
   flex-direction: column;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
-  box-shadow: var(--kungalgame-shadow-0);
+  box-shadow: @kungalgame-shadow-0;
   padding: 20px;
   box-sizing: border-box;
   position: relative;
   border-radius: 7px;
 }
 .container:hover {
-  box-shadow: var(--kungalgame-shadow-1);
+  box-shadow: @kungalgame-shadow-1;
   transition: 0.3s;
 }
 .title {
@@ -73,7 +73,7 @@
   font-size: 30px;
 }
 .warning span {
-  color: var(--kungalgame-red-5);
+  color: @kungalgame-red-5;
 }
 .btn {
   margin-top: 40px;
@@ -84,22 +84,22 @@
   padding: 7px 10px;
 }
 .btn > div:nth-child(1) {
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
-  color: var(--kungalgame-red-5);
+  color: @kungalgame-red-5;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
   cursor: pointer;
 }
 .btn > div:nth-child(1):hover {
-  background-color: var(--kungalgame-red-1);
+  background-color: @kungalgame-red-1;
 }
 .btn > div:nth-child(2) {
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
-  color: var(--kungalgame-blue-5);
+  color: @kungalgame-blue-5;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   cursor: pointer;
 }
 .btn > div:nth-child(2):hover {
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
 }
 .copyright {
   margin-bottom: 20px;

src/views/edit/index.vue

@@ -1,39 +1,39 @@
 <script setup lang="ts">
-import "@wangeditor/editor/dist/css/style.css"; // 引入 css
+import '@wangeditor/editor/dist/css/style.css' // 引入 css
 
-import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
+import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
-import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
 // 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef();
+const editorRef = shallowRef()
 
 // 编辑器的模式
-const mode = "default"
+const mode = 'default'
 
 // 内容 HTML
-const valueHtml = ref("<p>hello</p>");
+const valueHtml = ref('<p>hello</p>')
 
 // 模拟 ajax 异步获取内容
 onMounted(() => {
   setTimeout(() => {
-    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
+    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
-  }, 1500);
+  }, 1500)
-});
+})
 
-const toolbarConfig = {};
+const toolbarConfig = {}
-const editorConfig = { placeholder: "请输入内容..." };
+const editorConfig = { placeholder: '请输入内容...' }
 
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-  const editor = editorRef.value;
+  const editor = editorRef.value
-  if (editor == null) return;
+  if (editor == null) return
-  editor.destroy();
+  editor.destroy()
-});
+})
 
 // TODO:
 const handleCreated = (editor: any) => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
+  editorRef.value = editor // 记录 editor 实例，重要！
-};
+}
 </script>
 
 <template>
@@ -142,7 +142,7 @@ const handleCreated = (editor: any) => {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -173,7 +173,7 @@ body::-webkit-scrollbar {
 /* 编辑器的样式 */
 #editor—wrapper {
   /* 编辑器的 border */
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   box-sizing: border-box;
   /* 编辑器的宽度 */
   width: 75vw;
@@ -181,7 +181,7 @@ body::-webkit-scrollbar {
   z-index: 100; /* 按需定义 */
 }
 #toolbar-container {
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
 }
 /* 编辑器编辑部分 */
 #editor-container {
@@ -194,9 +194,9 @@ body::-webkit-scrollbar {
   /* 距离顶部 header 的距离 */
   margin-top: 7px;
   /* 容器的阴影 */
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 /* 容器的顶部 */
 .content-header {
@@ -213,7 +213,7 @@ body::-webkit-scrollbar {
 }
 /* 帖子标题的输入框 */
 .topic-title input {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   /* 距离外轮廓的距离 */
   padding: 7px;
   /* 内边距盒子 */
@@ -221,12 +221,12 @@ body::-webkit-scrollbar {
   width: 100%;
   /* 标题输入字体大小 */
   font-size: 40px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-white-9);
+  background-color: @kungalgame-trans-white-9;
 }
 /* 标题输入框 focus 之后的样式 */
 .topic-title input:focus {
-  box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
+  box-shadow: 0px 0px 5px @kungalgame-blue-4;
 }
 /* 内容区的底部样式 */
 .content-footer {
@@ -244,17 +244,17 @@ body::-webkit-scrollbar {
 }
 /* 标签输入框 */
 .tags-container input {
-  background-color: var(--kungalgame-trans-white-9);
+  background-color: @kungalgame-trans-white-9;
   /* 输入标签的字体 */
   font-size: 17px;
   width: 100%;
   box-sizing: border-box;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   padding: 5px;
 }
 /* 标签输入框 focus */
 .tags-container input:focus {
-  box-shadow: 0px 0px 3px var(--kungalgame-blue-4);
+  box-shadow: 0px 0px 3px @kungalgame-blue-4;
 }
 /* 单个标签容器 */
 .tags {
@@ -268,11 +268,11 @@ body::-webkit-scrollbar {
 .tags > span {
   font-size: 14px;
   padding: 3px;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   cursor: pointer;
 }
 .tags > span:hover {
-  background-color: var(--kungalgame-trans-red-1);
+  background-color: @kungalgame-trans-red-1;
 }
 /* 话题分类的容器 */
 .topic-group {
@@ -292,9 +292,9 @@ body::-webkit-scrollbar {
   width: 20%;
   font-size: 17px;
   cursor: pointer;
-  border: 1px solid var(--kungalgame-purple-4);
+  border: 1px solid @kungalgame-purple-4;
-  background-color: var(--kungalgame-trans-purple-1);
+  background-color: @kungalgame-trans-purple-1;
-  color: var(--kungalgame-purple-4);
+  color: @kungalgame-purple-4;
 }
 /* 按钮的容器 */
 .btn-container {
@@ -316,34 +316,34 @@ body::-webkit-scrollbar {
 }
 /* 确认按钮的样式 */
 .confirm-btn {
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
 }
 .confirm-btn:hover {
-  color: var(--kungalgame-trans-white-1);
+  color: @kungalgame-trans-white-1;
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
   transition: 0.1s;
 }
 .confirm-btn:active {
-  background-color: var(--kungalgame-red-4);
+  background-color: @kungalgame-red-4;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
   font-size: 17px;
 }
 /* 保存按钮的样式 */
 .save-btn {
-  color: var(--kungalgame-orange-4);
+  color: @kungalgame-orange-4;
-  background-color: var(--kungalgame-trans-orange-1);
+  background-color: @kungalgame-trans-orange-1;
-  border: 1px solid var(--kungalgame-orange-4);
+  border: 1px solid @kungalgame-orange-4;
 }
 .save-btn:hover {
-  color: var(--kungalgame-trans-white-1);
+  color: @kungalgame-trans-white-1;
-  background-color: var(--kungalgame-orange-4);
+  background-color: @kungalgame-orange-4;
   transition: 0.1s;
 }
 .save-btn:active {
-  background-color: var(--kungalgame-trans-orange-1);
+  background-color: @kungalgame-trans-orange-1;
-  color: var(--kungalgame-orange-4);
+  color: @kungalgame-orange-4;
 }
 /* 版权 */
 .copyright {

src/views/kungalgame/index.vue

@@ -215,7 +215,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -228,7 +228,7 @@
 .root {
   height: 100vh;
   background-image: url(../img/bg/bg1.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -237,7 +237,7 @@
 }
 /* 内容区容器 */
 .content-container {
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
   backdrop-filter: blur(5px);
   border-radius: 7px;
   /* 固定高度 */
@@ -253,17 +253,17 @@
 /* 内容区 */
 .content {
   height: 100%;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   border-radius: 7px;
   display: flex;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 /* 侧边的文章结构索引 */
 .aside {
   width: 122px;
   height: 100%;
   flex-shrink: 0;
-  border-right: 1px solid var(--kungalgame-blue-4);
+  border-right: 1px solid @kungalgame-blue-4;
 }
 /* 侧边的标题 */
 .aside > div {
@@ -294,7 +294,7 @@
 }
 /* 单个项目的 hover */
 .aside > ul li:hover {
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
 }
 /* 文章区距离侧边的距离 */
 .article {
@@ -307,7 +307,7 @@ h2,
 h3,
 p,
 .list {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* da标题的字体 */
 h1 {
@@ -320,7 +320,7 @@ h1 {
 h2 {
   margin-top: 77px;
   margin-bottom: 30px;
-  border-left: 4px solid var(--kungalgame-blue-4);
+  border-left: 4px solid @kungalgame-blue-4;
   text-indent: 1em;
 }
 h3 {
@@ -334,9 +334,9 @@ p {
 }
 /* 被划出来的链接字体 */
 .skip {
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   cursor: pointer;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 .list > li {
   list-style: inside;

src/views/licence/index.vue

@@ -27,7 +27,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -44,8 +44,8 @@
   min-width: 600px;
   min-height: 500px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
 }
@@ -58,18 +58,18 @@
   margin: auto;
   position: relative;
   border-radius: 7px;
-  box-shadow: var(--kungalgame-shadow-0);
+  box-shadow: @kungalgame-shadow-0;
   /* 竖直方向弹性分布 */
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   padding: 20px;
   box-sizing: border-box;
 }
 /* 内容区容器 hover */
 .container:hover {
-  box-shadow: var(--kungalgame-shadow-1);
+  box-shadow: @kungalgame-shadow-1;
   transition: 0.3s;
 }
 /* 页面的标题 */

src/views/login/Login.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter } from 'vue-router'
-import { Ref, ref } from "vue";
+import { Ref, ref } from 'vue'
-import { log } from "console";
+import { log } from 'console'
 
-let isLogIn: Ref<string> = ref("right-panel-active");
+let isLogIn: Ref<string> = ref('right-panel-active')
 
 const handleSignIn = () => {
-  isLogIn.value = "";
+  isLogIn.value = ''
-};
+}
 
 const handleSignUp = () => {
-  isLogIn.value = "right-panel-active";
+  isLogIn.value = 'right-panel-active'
-};
+}
-const router = useRouter();
+const router = useRouter()
 
 const login = () => {
-  router.push({ path: "/" });
+  router.push({ path: '/' })
-};
+}
 const register = () => {
-  router.push({ path: "/" });
+  router.push({ path: '/' })
-};
+}
 </script>
 
 <template>
@@ -42,9 +42,9 @@ const register = () => {
         <!-- 阻止冒泡？ -->
         <form action="#" class="form" id="form2" @submit.preventDefault>
           <h2 class="form__title">注册</h2>
-          <!--           <input type="text" placeholder="用户名 (中文 < 7个字符, 英文 < 14 个字符)" class="input" />
+          <!--           <input type="text" placeholder="用户名 (中文 < 7个字符, 英文 < 14 个字符" class="input" />
-          <input type="email" placeholder="邮箱 (gmail, outlook, sina, qq, 163)" class="input" />
+          <input type="email" placeholder="邮箱 (gmail, outlook, sina, qq, 163" class="input" />
-          <input type="password" placeholder="密码 (7 ~ 17位, 数字、字母、符号组合)" class="input" /> -->
+          <input type="password" placeholder="密码 (7 ~ 17位, 数字、字母、符号组合" class="input" /> -->
           <input type="text" placeholder="用户名" class="input" />
           <input type="email" placeholder="邮箱" class="input" />
           <input type="password" placeholder="密码" class="input" />
@@ -87,7 +87,7 @@ const register = () => {
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -105,10 +105,7 @@ const register = () => {
   place-items: center;
   min-height: 500px;
   min-width: 800px;
-  background: linear-gradient(
+  background: linear-gradient(@kungalgame-pink-0, @kungalgame-blue-0);
-    var(--kungalgame-pink-0),
-    var(--kungalgame-blue-0)
-  );
   background-repeat: no-repeat;
   position: relative;
 }
@@ -117,7 +114,7 @@ const register = () => {
   font-weight: 300;
   font-weight: bold;
   margin-bottom: 1.25rem;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 
 /* 获取验证码 */
@@ -125,7 +122,7 @@ const register = () => {
 .link {
   text-decoration: none;
   font-size: small;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 .mail-confirm {
   position: absolute;
@@ -133,13 +130,13 @@ const register = () => {
   height: 30px;
   top: 46%;
   right: 12%;
-  border: 1px solid var(--kungalgame-blue-1);
+  border: 1px solid @kungalgame-blue-1;
-  background-color: var(--kungalgame-white);
+  background-color: @kungalgame-white;
   cursor: pointer;
 }
 .mail-confirm:hover {
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
 }
 /* 忘记密码 */
 .link {
@@ -150,25 +147,25 @@ const register = () => {
   position: absolute;
   bottom: 2%;
   font-size: x-small;
-  color: var(--kungalgame-font-color-1);
+  color: @kungalgame-font-color-1;
   text-decoration: none;
 }
 .user-agreement span {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
   font-style: oblique;
 }
 /* 总容器 */
 .container {
   /* 背景图片 */
-  background: url("@/assets/images/bg/bg1.png");
+  background: url('@/assets/images/bg/bg1.png');
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
   /* 圆角 */
   border-radius: 5px;
   /* 容器的阴影 */
-  box-shadow: 0 0.9rem 1.7rem var(--kungalgame-blue-0),
+  box-shadow: 0 0.9rem 1.7rem @kungalgame-blue-0,
-    0 0.7rem 0.7rem var(--kungalgame-blue-0);
+    0 0.7rem 0.7rem @kungalgame-blue-0;
   height: 490px;
   max-width: 700px;
   overflow: hidden;
@@ -256,9 +253,9 @@ const register = () => {
   position: absolute;
   bottom: 7%;
   border-radius: 50px;
-  background-color: var(--kungalgame-trans-white-1);
+  background-color: @kungalgame-trans-white-1;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
   cursor: pointer;
   font-size: 0.9em;
   letter-spacing: 0.1rem;
@@ -269,8 +266,8 @@ const register = () => {
   white-space: nowrap;
 }
 .btn:hover {
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
-  color: var(--kungalgame-trans-white-1);
+  color: @kungalgame-trans-white-1;
 }
 /* 交互页面的盒子 */
 .overlay__panel {
@@ -285,19 +282,19 @@ const register = () => {
   transform: translateX(0);
   transition: transform 0.6s ease-in-out;
   width: 50%;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
 }
 .overlay__panel .btn {
   /* 红色按钮距离底部的距离 */
   position: absolute;
   bottom: 7%;
-  background-color: var(--kungalgame-red-0);
+  background-color: @kungalgame-red-0;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 .overlay__panel .btn:hover {
-  background-color: var(--kungalgame-red-4);
+  background-color: @kungalgame-red-4;
-  color: var(--kungalgame-trans-white-1);
+  color: @kungalgame-trans-white-1;
 }
 
 .overlay__panel h2 {
@@ -306,7 +303,7 @@ const register = () => {
   color: #333;
 }
 .overlay__panel h2 span {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
   padding: 0 5px;
   font-size: large;
 }
@@ -345,7 +342,7 @@ const register = () => {
 }
 /* 表单的设置 */
 .form {
-  background-color: var(--kungalgame-white);
+  background-color: @kungalgame-white;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -358,13 +355,13 @@ const register = () => {
 .input {
   border: none;
   outline: none;
-  border-bottom: 1.5px solid var(--kungalgame-blue-0);
+  border-bottom: 1.5px solid @kungalgame-blue-0;
   padding: 0.9rem 0.9rem;
   margin: 0.5rem 0;
   width: 100%;
 }
 .input:focus {
-  border-bottom: 1.5px solid var(--kungalgame-blue-4);
+  border-bottom: 1.5px solid @kungalgame-blue-4;
   transition: 0.2s linear;
 }
 .copyright {

src/views/pool/index.vue

@@ -369,7 +369,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -384,13 +384,13 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg6.png);
-  /* background-image: url(./img/bg-dark.png); */
+  /* background-image: url(./img/bg-dark.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   min-width: 700px;
-  font-family: "adobe-clean", "Source Sans Pro", -apple-system,
+  font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
-    "BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
+    'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
 }
 /* 帖子池容器 */
 .pool-container {
@@ -411,7 +411,7 @@
   flex-direction: column;
   /* 毛玻璃背景 */
   backdrop-filter: blur(5px);
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   border-radius: 7px;
   margin-top: 7px;
 }
@@ -433,12 +433,12 @@
   font-size: 14px;
   margin: 2px;
   padding: 7px;
-  background-color: var(--kungalgame-trans-blue-3);
+  background-color: @kungalgame-trans-blue-3;
   border-radius: 17px;
   cursor: pointer;
 }
 .nav-tags:hover {
-  background-color: var(--kungalgame-trans-red-3);
+  background-color: @kungalgame-trans-red-3;
 }
 /* 帖子池内容区容器 */
 .content-container {
@@ -467,7 +467,7 @@
   cursor: pointer;
 }
 .single-topic-container:hover {
-  background-color: var(--kungalgame-blue-1);
+  background-color: @kungalgame-blue-1;
 }
 /* 帖子的标题 */
 .topic-title {
@@ -482,7 +482,7 @@
   margin-top: 7px;
   padding: 0 7px;
   font-weight: bold;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 帖子的内容区 */
 .topic-content {
@@ -503,7 +503,7 @@
   flex-wrap: wrap;
 }
 .topic-status i {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 .topic-post-time {
   display: flex;
@@ -518,7 +518,7 @@
 }
 .topic-post-time i {
   margin: 0 5px;
-  color: var(--kungalgame-purple-5);
+  color: @kungalgame-purple-5;
 }
 /* 右侧的功能栏 */
 .kungalgame-right-bar {
@@ -538,13 +538,13 @@
   right: 50px;
   cursor: pointer;
   display: none;
-  background-color: var(--kungalgame-blue-2);
+  background-color: @kungalgame-blue-2;
 }
 .kungalgame-right-bar-left > div {
   padding: 7px;
 }
 .kungalgame-right-bar-left > div:hover {
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 /* 排序 hover 出现 */
 .kungalgame-right-bar .sort:hover .kungalgame-right-bar-left {
@@ -553,7 +553,7 @@
 /* 图标字体的颜色 */
 .kungalgame-right-bar-left i {
   margin-right: 10px;
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 /* 最后一个排序的样式 */
 .kungalgame-right-bar-left div:last-child i {
@@ -571,12 +571,12 @@
   align-items: center;
   height: 50px;
   padding: 0 9px;
-  background-color: var(--kungalgame-blue-2);
+  background-color: @kungalgame-blue-2;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   cursor: pointer;
 }
 .top {
-  background-color: var(--kungalgame-red-1);
+  background-color: @kungalgame-red-1;
 }
 .top {
   margin-top: 11px;
@@ -584,6 +584,6 @@
 .sort i,
 .top i {
   margin-top: 5px;
-  color: var(--kungalgame-red-6);
+  color: @kungalgame-red-6;
 }
 </style>

src/views/privacy/index.vue

@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -55,8 +55,8 @@
   min-width: 700px;
   min-height: 600px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
   flex-direction: column;
@@ -70,19 +70,19 @@
   /* 居中 */
   margin: auto;
   position: relative;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   border-radius: 7px;
-  box-shadow: var(--kungalgame-shadow-0);
+  box-shadow: @kungalgame-shadow-0;
   /* 竖直方向弹性分布 */
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 /* 内容区容器 hover */
 .container:hover {
-  box-shadow: var(--kungalgame-shadow-1);
+  box-shadow: @kungalgame-shadow-1;
   transition: 0.3s;
 }
 /* 内容区 */

src/views/rank/index.vue

@@ -952,7 +952,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -967,7 +967,7 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg1.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -983,34 +983,34 @@
   height: 800px;
   /* 渐变背景色 */
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   /* 调和背景色 */
-  background-color: var(--kungalgame-trans-white-4);
+  background-color: @kungalgame-trans-white-4;
   /* 模糊 */
   backdrop-filter: blur(5px);
-  border: 1px solid var(--kungalgame-pink-4);
+  border: 1px solid @kungalgame-pink-4;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   border-radius: 7px;
   margin: auto;
   display: flex;
   padding: 10px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
 }
 /* 用户排行 */
 .kungalgamer-rank {
   width: 50%;
-  border-right: 1px solid var(--kungalgame-blue-4);
+  border-right: 1px solid @kungalgame-blue-4;
   box-sizing: border-box;
 }
 /* 用户排行标题 */
 .kungalgamer-title {
   /* 字体设置 */
   font-size: 30px;
-  color: var(--kungalgame-pink-4);
+  color: @kungalgame-pink-4;
   font-style: italic;
-  text-shadow: 2px 2px 4px var(--kungalgame-blue-0);
+  text-shadow: 2px 2px 4px @kungalgame-blue-0;
   height: 50px;
   display: flex;
   justify-content: center;
@@ -1025,7 +1025,7 @@
   cursor: pointer;
 }
 .kungalgamer-nav > div:hover {
-  background-color: var(--kungalgame-pink-1);
+  background-color: @kungalgame-pink-1;
   transition: 0.2s;
 }
 /* 排行选择项 */
@@ -1035,7 +1035,7 @@
 .reply {
   height: 30px;
   width: 100%;
-  border: 1px solid var(--kungalgame-pink-4);
+  border: 1px solid @kungalgame-pink-4;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1048,7 +1048,7 @@
 /* 单个用户的容器 */
 .kungalgamer-container {
   height: 700px;
-  border: 1px solid var(--kungalgame-pink-4);
+  border: 1px solid @kungalgame-pink-4;
   border-top: none;
   display: flex;
   flex-direction: column;
@@ -1060,18 +1060,18 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .kungalgamer-container::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单个用户 */
 .single-kungalgamer {
   height: 37px;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--kungalgame-pink-4);
+  border-bottom: 1px solid @kungalgame-pink-4;
   margin: 7px;
   display: flex;
   justify-content: space-between;
@@ -1104,9 +1104,9 @@
 /* 帖子排行标题 */
 .topic-title {
   font-size: 30px;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
   font-style: italic;
-  text-shadow: 2px 2px 4px var(--kungalgame-pink-0);
+  text-shadow: 2px 2px 4px @kungalgame-pink-0;
   height: 50px;
   display: flex;
   justify-content: center;
@@ -1121,7 +1121,7 @@
   cursor: pointer;
 }
 .topic-nav > div:hover {
-  background-color: var(--kungalgame-blue-1);
+  background-color: @kungalgame-blue-1;
   transition: 0.2s;
 }
 /* 单个交互项目 */
@@ -1131,7 +1131,7 @@
 .top {
   height: 30px;
   width: 100%;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1144,7 +1144,7 @@
 /* 单个帖子的容器 */
 .topic-container {
   height: 700px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
   border-top: none;
   display: flex;
   flex-direction: column;
@@ -1156,18 +1156,18 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .topic-container::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单个帖子 */
 .single-topic {
   flex-shrink: 0;
   height: 37px;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   margin: 7px;
   display: flex;
   justify-content: space-between;

src/views/redirect/index.vue

@@ -9,7 +9,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -25,8 +25,8 @@
   min-width: 700px;
   min-height: 600px;
   background: linear-gradient(
-    var(--kungalgame-trans-pink-1),
+    @kungalgame-trans-pink-1,
-    var(--kungalgame-trans-blue-1)
+    @kungalgame-trans-blue-1
   );
   display: flex;
   flex-direction: column;

src/views/regulations/index.vue

@@ -112,7 +112,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -127,7 +127,7 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg1.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -143,9 +143,9 @@
   /* 固定宽高 */
   width: 700px;
   height: 1300px;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   border-radius: 7px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -156,11 +156,11 @@
 .content {
   padding: 10px;
   height: 100%;
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   border-radius: 7px;
   box-sizing: border-box;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 /* 一级标题 */
 .title-0 {
@@ -169,21 +169,21 @@
 }
 /* 提示消息 */
 .tips {
-  border-top: 2px solid var(--kungalgame-blue-4);
+  border-top: 2px solid @kungalgame-blue-4;
   padding-top: 10px;
   margin-bottom: 47px;
 }
 /* 规则跳转页面 */
 .tips span {
   cursor: pointer;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
 }
 /* 二级标题 */
 .title-1 {
   font-size: 25px;
   margin: 20px 0;
-  border-left: 2px solid var(--kungalgame-blue-4);
+  border-left: 2px solid @kungalgame-blue-4;
   /* 距离左侧的缩进距离 */
   padding-left: 5px;
 }

src/views/technology/index.vue

@@ -551,7 +551,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -566,13 +566,13 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg1.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   min-width: 800px;
-  font-family: "adobe-clean", "Source Sans Pro", -apple-system,
+  font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
-    "BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
+    'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
 }
 /* 内容区 */
 .content {
@@ -586,10 +586,10 @@
   /* 水平垂直居中 */
   margin: auto;
   display: flex;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   /* 全局字体颜色 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
-  border: 1px solid var(--kungalgame-trans-blue-1);
+  border: 1px solid @kungalgame-trans-blue-1;
   border-radius: 5px;
 }
 /* 侧边的交互栏 */
@@ -597,8 +597,8 @@
   /* 固定宽度 */
   width: 200px;
   height: 100%;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   box-sizing: border-box;
   border-radius: 5px;
 }
@@ -606,8 +606,8 @@
 .aside-container {
   height: 100%;
   background: linear-gradient(
-    var(--kungalgame-trans-blue-1),
+    @kungalgame-trans-blue-1,
-    var(--kungalgame-trans-red-1)
+    @kungalgame-trans-red-1
   );
   display: flex;
   flex-direction: column;
@@ -623,18 +623,18 @@
   justify-content: center;
   align-items: center;
   font-size: 40px;
-  color: var(--kungalgame-blue-3);
+  color: @kungalgame-blue-3;
   font-style: italic;
-  text-shadow: 1px 1px 3px var(--kungalgame-red-4);
+  text-shadow: 1px 1px 3px @kungalgame-red-4;
 }
 /* 侧边搜索框 */
 .nav-search {
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
   display: flex;
   box-sizing: border-box;
 }
 .nav-search:hover {
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
 }
 /* 搜索框表单 */
 .article-search-form {
@@ -659,11 +659,11 @@
   /* 搜索时输入的字体大小 */
   font-size: 16px;
   border: none;
-  background-color: var(--kungalgame-trans-white-9);
+  background-color: @kungalgame-trans-white-9;
 }
 /* 提示文字“搜索帖子”的文字颜色 */
 .nav-search-input::placeholder {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 获取焦点后的框体 */
 .nav-search-input:focus {
@@ -675,7 +675,7 @@
   height: 40px;
   width: 40px;
   flex-shrink: 0;
-  border-left: 1px solid var(--kungalgame-trans-blue-3);
+  border-left: 1px solid @kungalgame-trans-blue-3;
   /* 搜索图标居中 */
   display: flex;
   justify-content: center;
@@ -685,11 +685,11 @@
 }
 /* 搜索按钮的 hover */
 .nav-search-btn:hover {
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
 }
 /* 搜索按钮的 active */
 .nav-search-btn:active {
-  background-color: var(--kungalgame-red-3);
+  background-color: @kungalgame-red-3;
 }
 /* 推荐标签 */
 .recommend {
@@ -704,11 +704,11 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border-bottom: 1px solid var(--kungalgame-trans-blue-4);
+  border-bottom: 1px solid @kungalgame-trans-blue-4;
   cursor: pointer;
 }
 .recommend span:hover {
-  background-color: var(--kungalgame-trans-red-2);
+  background-color: @kungalgame-trans-red-2;
 }
 /* 热门标签池 */
 .tags-container {
@@ -735,16 +735,16 @@
 }
 /* 标签的图标字体 */
 .tags > li i {
-  color: var(--kungalgame-red-3);
+  color: @kungalgame-red-3;
   margin-right: 5px;
 }
 /* 标签的文字部分 */
 .tags > li > span {
   cursor: pointer;
-  border-bottom: 2px solid var(--kungalgame-trans-white-8);
+  border-bottom: 2px solid @kungalgame-trans-white-8;
 }
 .tags > li > span:hover {
-  border-bottom: 2px solid var(--kungalgame-blue-4);
+  border-bottom: 2px solid @kungalgame-blue-4;
 }
 /* 版权 */
 .copyright {
@@ -788,11 +788,11 @@
 }
 /* 单个帖子 */
 .topic {
-  border: 1px solid var(--kungalgame-trans-blue-4);
+  border: 1px solid @kungalgame-trans-blue-4;
   border-radius: 5px;
   /* 帖子内容距离边的距离 */
   padding: 0 10px;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
   /* 相对于底部状态的定位 */
   position: relative;
   display: inline-block;
@@ -802,9 +802,9 @@
 }
 /* 单个帖子 hover */
 .topic:hover {
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   /* 放大、旋转 */
-  transform: scale(1.2) rotate(1deg);
+  transform: scale(1.2 rotate(1deg));
   transition: 0.2s;
   z-index: 7;
 }
@@ -820,7 +820,7 @@
   left: 0;
   width: 100%;
   height: 3px;
-  background: linear-gradient(90deg, transparent, var(--kungalgame-blue-4));
+  background: linear-gradient(90deg, transparent, @kungalgame-blue-4);
   animation: animate1 1s linear infinite;
 }
 @keyframes animate1 {
@@ -838,7 +838,7 @@
   right: 0;
   width: 3px;
   height: 100%;
-  background: linear-gradient(180deg, transparent, var(--kungalgame-blue-4));
+  background: linear-gradient(180deg, transparent, @kungalgame-blue-4);
   animation: animate2 1s linear infinite;
   animation-delay: 0.25s;
 }
@@ -856,7 +856,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
-  background: linear-gradient(270deg, transparent, var(--kungalgame-blue-4));
+  background: linear-gradient(270deg, transparent, @kungalgame-blue-4);
   animation: animate3 1s linear infinite;
   animation-delay: 0.5s;
 }
@@ -877,7 +877,7 @@
   left: 0;
   width: 3px;
   height: 100%;
-  background: linear-gradient(360deg, transparent, var(--kungalgame-blue-4));
+  background: linear-gradient(360deg, transparent, @kungalgame-blue-4);
   animation: animate4 1s linear infinite;
   animation-delay: 0.75s;
 }
@@ -940,7 +940,7 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  background-color: var(--kungalgame-trans-white-9);
+  background-color: @kungalgame-trans-white-9;
   /* 起初看不见文字 */
   opacity: 0;
   cursor: pointer;
@@ -950,15 +950,15 @@
   margin-bottom: 3px;
 }
 .topic-tags > span > i {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
   margin-right: 5px;
 }
 /* 单个帖子 hover 时显示帖子标签 */
 .topic:hover .topic-tags {
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   backdrop-filter: blur(5px);
   /* 放大、旋转回正 */
-  transform: scale(1.1) rotate(-1deg);
+  transform: scale(1.1 rotate(-1deg));
   /* 完全不透明，可视 */
   opacity: 1;
   transition: 0.2s;
@@ -976,15 +976,15 @@
   height: 30px;
   width: 30px;
   margin-right: 10px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
 }
 .page-switch > button:hover {
-  background-color: var(--kungalgame-blue-4);
+  background-color: @kungalgame-blue-4;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
 }
 .page-switch > button:active {
-  background-color: var(--kungalgame-blue-3);
+  background-color: @kungalgame-blue-3;
 }
 /* 上一页和下一页两个按钮更宽 */
 .page-switch > button:first-child {

src/views/thanks-list/index.vue

@@ -113,7 +113,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -134,8 +134,8 @@
   background-size: cover;
   min-width: 1000px;
   min-height: 1300px;
-  font-family: "adobe-clean", "Source Sans Pro", -apple-system,
+  font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
-    "BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
+    'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
 }
 .container {
   /* 固定宽高 */
@@ -145,13 +145,13 @@
   margin: auto;
   position: relative;
   border-radius: 7px;
-  box-shadow: var(--kungalgame-shadow-0);
+  box-shadow: @kungalgame-shadow-0;
   /* 竖直方向弹性分布 */
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   backdrop-filter: blur(17px);
   padding: 20px;
   box-sizing: border-box;
@@ -168,9 +168,9 @@
 }
 /* 被划出来的链接字体 */
 .skip {
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   cursor: pointer;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 /* 单个列表项 */
 .list > li {

src/views/topic/KUNGalgameTopicPage.vue

@@ -2,14 +2,14 @@
   KUNGalgame 的帖子页面
  -->
 <script setup lang="ts">
-import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
+import KUNGalgameTopBar from '../../components/KUNGalgameTopBar.vue'
-import KUNGalgameTopicAside from "./aside/KUNGalgameTopicAside.vue";
+import KUNGalgameTopicAside from './aside/KUNGalgameTopicAside.vue'
-import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
+import KUNGalgameTopicContent from './content/KUNGalgameTopicContent.vue'
 </script>
 <template>
   <!-- 总容器 -->
   <div class="main-wrapper">
-    <KUNGalgameTopBar />
+    <KUNGalgameTopBar :isTopicPage="true" />
     <!-- 下面帖子详情区的容器 -->
     <div class="topic-wrapper">
       <!-- 下方可视内容区的容器 -->
@@ -20,7 +20,7 @@ import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
     </div>
   </div>
 </template>
-<style scoped>
+<style lang="less" scoped>
 /* 页面总容器 */
 .main-wrapper {
   display: flex;
@@ -28,7 +28,7 @@ import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
   flex-direction: column;
   min-width: 1040px;
   /* 背景图片 */
-  /* background-image: url(../img/bg.png); */
+  background-image: url(../../assets/images/bg/bg1.png);
   /*         background-image: url(../img/bg-dark.png); */
   background-repeat: no-repeat;
   background-position: center;
@@ -50,7 +50,7 @@ import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
   display: flex;
   /* 设置背景的毛玻璃效果 */
   backdrop-filter: blur(5px);
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
   /* 设置背景边框和圆角 */
   border-radius: 5px;
   padding: 5px;

src/views/topic/aside/master/TopicAsideMaster.vue

@@ -17,19 +17,19 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 楼主的其它帖子 */
 .master-other-topic {
   width: 100%;
   height: 1px;
   flex-grow: 4;
   /* 上方区域的配色 */
-  border: 1px solid var(--kungalgame-trans-pink-2);
+  border: 1px solid @kungalgame-trans-pink-2;
   /* 隐藏溢出的颜色 */
   overflow: hidden;
   border-radius: 5px;
-  background-color: var(--kungalgame-trans-pink-0);
+  background-color: @kungalgame-trans-pink-0;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 .master-other-topic ul {
   height: 100%;
@@ -52,15 +52,15 @@
 }
 /* 上方的 hover 效果 */
 .master-other-topic ul li:hover {
-  border-left: 4px solid var(--kungalgame-blue-3);
+  border-left: 4px solid @kungalgame-blue-3;
-  background-color: var(--kungalgame-trans-pink-1);
+  background-color: @kungalgame-trans-pink-1;
   transition: 0.3s;
 }
 /* 单个标题的样式 */
 .master-other-topic ul li a {
   /* 左右两侧的距离 */
   margin: 0 17px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 标题显示两行、超出部分隐藏 */
   overflow: hidden; /* 超出部分隐藏 */
   text-overflow: ellipsis; /* 显示省略号 */
@@ -81,9 +81,9 @@
   line-height: 40px;
   font-size: 1.8ch;
   font-weight: bold;
-  background-color: var(--kungalgame-trans-pink-1);
+  background-color: @kungalgame-trans-pink-1;
   /* 与单个帖子标题的分割线 */
-  border-bottom: 1px solid var(--kungalgame-trans-pink-2);
+  border-bottom: 1px solid @kungalgame-trans-pink-2;
   /* 水平居中 */
   justify-content: center;
 }

src/views/topic/aside/nav/TopicAsideNav.vue

@@ -17,15 +17,15 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 帖子详情页的交互 */
 .topic-page-nav {
   flex-grow: 1;
   display: flex;
   justify-content: center;
   /* 左边第一个部分的边 */
-  border: 1px solid var(--kungalgame-trans-red-4);
+  border: 1px solid @kungalgame-trans-red-4;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   border-radius: 5px;
   /* 距离顶部的距离 */
   margin-bottom: 17px;
@@ -36,7 +36,7 @@
 .topic-page-nav-container {
   flex-grow: 1;
   display: flex;
-  background-color: var(--kungalgame-trans-yellow-0);
+  background-color: @kungalgame-trans-yellow-0;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
 }
@@ -62,7 +62,7 @@
 .topic-page-nav-container > li::before {
   transform: scaleX(0);
   transform-origin: bottom right;
-  content: " ";
+  content: ' ';
   display: block;
   position: absolute;
   top: 0;
@@ -70,7 +70,7 @@
   bottom: 0;
   left: 0;
   inset: 0 0 0 0;
-  background-color: var(--kungalgame-trans-red-4);
+  background-color: @kungalgame-trans-red-4;
   z-index: -1;
   transition: transform 0.3s ease;
 }

src/views/topic/aside/same/TopicAsideSame.vue

@@ -31,22 +31,22 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 相同标签下的其它帖子 */
 .same-tag-topic {
   height: 1px;
   flex-grow: 4;
   width: 100%;
   /* 上方区域的配色 */
-  border: 1px solid var(--kungalgame-trans-blue-2);
+  border: 1px solid @kungalgame-trans-blue-2;
   /* 隐藏溢出的颜色 */
   overflow: hidden;
   border-radius: 5px;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   /* 左侧两个部分之间的距离 */
   margin-bottom: 17px;
   /* 盒子的阴影 */
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 .same-tag-topic ul {
   height: 100%;
@@ -69,15 +69,15 @@
 }
 /* 上方的 hover 效果 */
 .same-tag-topic ul li:hover {
-  border-left: 4px solid var(--kungalgame-red-3);
+  border-left: 4px solid @kungalgame-red-3;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   transition: 0.3s;
 }
 /* 单个标题的样式 */
 .same-tag-topic ul li a {
   /* 左右两侧的距离 */
   margin: 0 17px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   /* 标题显示两行、超出部分隐藏 */
   overflow: hidden; /* 超出部分隐藏 */
   text-overflow: ellipsis; /* 显示省略号 */
@@ -98,9 +98,9 @@
   line-height: 40px;
   font-size: 1.8ch;
   font-weight: bold;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
   /* 与单个帖子标题的分割线 */
-  border-bottom: 1px solid var(--kungalgame-trans-blue-2);
+  border-bottom: 1px solid @kungalgame-trans-blue-2;
   /* 水平居中 */
   justify-content: center;
 }

src/views/topic/content/master/TopicMaster.vue

@@ -176,7 +176,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 楼主帖子容器 */
 .master-topic-container {
   width: 100%;
@@ -189,7 +189,7 @@
   margin-bottom: 5px;
   /* TODO: */
   /* 楼主帖子背景图 */
-  /*   background-image: url(../../img/bg-dark.png); */
+  /*   background-image: url(../../img/bg-dark.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -215,20 +215,17 @@
   height: 70px;
   border-radius: 50%;
   letter-spacing: 2px;
-  background: linear-gradient(
+  background: linear-gradient(@kungalgame-blue-1, @kungalgame-pink-1);
-    var(--kungalgame-blue-1),
-    var(--kungalgame-pink-1)
-  );
   opacity: 0.8;
   font-size: 37px;
   font-weight: bold;
   font-style: oblique;
-  color: var(--kungalgame-pink-1);
+  color: @kungalgame-pink-1;
-  text-shadow: -1px 0 var(--kungalgame-blue-4), 0 -1px var(--kungalgame-blue-4),
+  text-shadow: -1px 0 @kungalgame-blue-4, 0 -1px @kungalgame-blue-4,
-    1px 0 var(--kungalgame-blue-4), 0 1px var(--kungalgame-blue-4),
+    1px 0 @kungalgame-blue-4, 0 1px @kungalgame-blue-4,
-    1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
+    1px 1px @kungalgame-black, -1px -1px @kungalgame-black,
-    -1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
+    -1px 1px @kungalgame-black, 1px -1px @kungalgame-black,
-    4px 2px 2px var(--kungalgame-red-4);
+    4px 2px 2px @kungalgame-red-4;
 }
 
 /* 楼主帖子内容区的容器 */
@@ -237,11 +234,11 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  border: 1px solid var(--kungalgame-blue-1);
+  border: 1px solid @kungalgame-blue-1;
   border-radius: 5px;
   overflow: hidden;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
-  background-color: var(--kungalgame-trans-white-3);
+  background-color: @kungalgame-trans-white-3;
   box-sizing: border-box;
 }
 /* 楼主帖子头部 */
@@ -251,9 +248,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   font-size: 17px;
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
   box-sizing: border-box;
 }
 /* 楼主帖子标题 */
@@ -283,7 +280,7 @@
   /* 时间和标签分居两侧 */
   justify-content: space-between;
   /* 下面的分割线 */
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
   box-sizing: border-box;
 }
 /* 帖子的标签 */
@@ -295,7 +292,7 @@
 /* 图标字体 */
 .master-topic-tags i {
   padding: 0 20px;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 /* 单个标签的盒子 */
 .master-topic-tags ul {
@@ -306,14 +303,14 @@
   margin-left: 5px;
   font-size: small;
   padding: 2px;
-  background-color: var(--kungalgame-blue-0);
+  background-color: @kungalgame-blue-0;
   overflow: hidden;
   white-space: nowrap;
   border-radius: 5px;
   cursor: pointer;
 }
 .master-topic-tags ul li:hover {
-  background-color: var(--kungalgame-red-0);
+  background-color: @kungalgame-red-0;
   transition: 0.2s;
 }
 /* 发帖时间 */
@@ -331,7 +328,7 @@
 /* 沙漏的样式 */
 .master-topic-time i {
   padding: 0 10px;
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 /* 发帖时间的样式 */
 .master-topic-time div {
@@ -342,7 +339,7 @@
   width: 100%;
   display: flex;
   flex-shrink: 0;
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
   box-sizing: border-box;
 }
 /* 内容区左侧楼主的信息 */
@@ -384,7 +381,7 @@
 .master-topic-content-center-right {
   font-size: 15px;
   padding: 17px;
-  border-left: 1px solid var(--kungalgame-blue-1);
+  border-left: 1px solid @kungalgame-blue-1;
 }
 /* 内容区的底部 */
 .master-topic-content-bottom {
@@ -393,7 +390,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
 }
 /* 内容区域下方字体样式 */
 .master-topic-content-bottom span {
@@ -406,8 +403,8 @@
 }
 /* 帖子状态 */
 .master-topic-content-bottom span span {
-  background-color: var(--kungalgame-green-3);
+  background-color: @kungalgame-green-3;
-  color: var(--kungalgame-white);
+  color: @kungalgame-white;
 }
 /* 楼主帖子底部 */
 .master-topic-footer {
@@ -428,11 +425,11 @@
   margin-left: 17px;
 }
 .master-topic-footer-left ul li a {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: 20px;
 }
 .master-topic-footer-left ul li:nth-child(1) a {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 /* 底部右侧部分（回复、评论、只看、编辑） */
 .master-topic-footer-right ul {
@@ -445,7 +442,7 @@
   margin-right: 17px;
 }
 .master-topic-footer-right ul li a {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: 20px;
 }
 /* button 的容器 li */
@@ -459,16 +456,16 @@
   position: relative;
   display: inline-block;
   padding: 7px 17px;
-  color: var(--kungalgame-blue-3);
+  color: @kungalgame-blue-3;
   overflow: hidden;
-  border: 2px solid var(--kungalgame-blue-2);
+  border: 2px solid @kungalgame-blue-2;
   filter: hue-rotate(0deg);
   transition: all 0.1s linear;
   cursor: pointer;
 }
 .kungalgame-reply-btn:hover {
   border: 2px solid transparent;
-  color: var(--kungalgame-orange-3);
+  color: @kungalgame-orange-3;
 }
 .kungalgame-reply-btn:hover span {
   position: absolute;
@@ -480,7 +477,7 @@
   left: 0;
   width: 100%;
   height: 3px;
-  background: linear-gradient(90deg, transparent, var(--kungalgame-blue-3));
+  background: linear-gradient(90deg, transparent, @kungalgame-blue-3);
   animation: animate1 1s linear infinite;
 }
 @keyframes animate1 {
@@ -498,7 +495,7 @@
   right: 0;
   width: 3px;
   height: 100%;
-  background: linear-gradient(180deg, transparent, var(--kungalgame-blue-3));
+  background: linear-gradient(180deg, transparent, @kungalgame-blue-3);
   animation: animate2 1s linear infinite;
   animation-delay: 0.25s;
 }
@@ -516,7 +513,7 @@
   bottom: 0;
   right: 0;
   width: 100%;
-  background: linear-gradient(270deg, transparent, var(--kungalgame-blue-3));
+  background: linear-gradient(270deg, transparent, @kungalgame-blue-3);
   animation: animate3 1s linear infinite;
   animation-delay: 0.5s;
 }
@@ -537,7 +534,7 @@
   left: 0;
   width: 3px;
   height: 100%;
-  background: linear-gradient(360deg, transparent, var(--kungalgame-blue-3));
+  background: linear-gradient(360deg, transparent, @kungalgame-blue-3);
   animation: animate4 1s linear infinite;
   animation-delay: 0.75s;
 }

src/views/topic/content/others/single/SingleTopic.vue

@@ -4,7 +4,7 @@
   里面包含着每个人的回复和下方回复这个人的评论
  -->
 <script setup lang="ts">
-import Comments from './comments/Comments.vue';
+import Comments from './comments/Comments.vue'
 </script>
 
 <template>
@@ -144,13 +144,13 @@ import Comments from './comments/Comments.vue';
           </div>
         </div>
         <!-- 底部的评论 -->
-        <Comments/>
+        <Comments />
       </div>
     </div>
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 其它人的楼层 */
 .other-topic-floor {
   /* 标志在最左边 */
@@ -170,20 +170,17 @@ import Comments from './comments/Comments.vue';
   width: 50px;
   height: 50px;
   border-radius: 50%;
-  background: linear-gradient(
+  background: linear-gradient(@kungalgame-blue-1, @kungalgame-pink-1);
-    var(--kungalgame-blue-1),
-    var(--kungalgame-pink-1)
-  );
   opacity: 0.7;
   font-size: 18px;
   font-weight: bold;
   font-style: oblique;
-  color: var(--kungalgame-pink-1);
+  color: @kungalgame-pink-1;
-  text-shadow: -1px 0 var(--kungalgame-blue-5), 0 -1px var(--kungalgame-blue-5),
+  text-shadow: -1px 0 @kungalgame-blue-5, 0 -1px @kungalgame-blue-5,
-    1px 0 var(--kungalgame-blue-5), 0 1px var(--kungalgame-blue-5),
+    1px 0 @kungalgame-blue-5, 0 1px @kungalgame-blue-5,
-    1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
+    1px 1px @kungalgame-black, -1px -1px @kungalgame-black,
-    -1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
+    -1px 1px @kungalgame-black, 1px -1px @kungalgame-black,
-    4px 2px 2px var(--kungalgame-red-4);
+    4px 2px 2px @kungalgame-red-4;
 }
 /* 其他人帖子内容区容器 */
 .other-topic-content-container {
@@ -191,10 +188,10 @@ import Comments from './comments/Comments.vue';
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  border: 1px solid var(--kungalgame-blue-1);
+  border: 1px solid @kungalgame-blue-1;
   border-radius: 5px;
-  background-color: var(--kungalgame-trans-white-3);
+  background-color: @kungalgame-trans-white-3;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 /* 其它人回帖的内容区 */
 .other-topic-content {
@@ -260,7 +257,7 @@ import Comments from './comments/Comments.vue';
 }
 /* 被回复的人 */
 .other-topic-content-right-top-left span a {
-  color: var(--kungalgame-blue-5);
+  color: @kungalgame-blue-5;
   font-weight: 500;
 }
 .other-topic-content-right-top-left span a:hover {
@@ -277,7 +274,7 @@ import Comments from './comments/Comments.vue';
 /* 右侧部分分文本 */
 .other-topic-content-right-text {
   padding: 7px;
-  border-left: 1px solid var(--kungalgame-blue-1);
+  border-left: 1px solid @kungalgame-blue-1;
   font-size: 15px;
 }
 /* 其他人回帖的下部 */
@@ -285,7 +282,7 @@ import Comments from './comments/Comments.vue';
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
   padding-bottom: 7px;
 }
 /* 其他人回帖的下部分左侧 */
@@ -303,21 +300,21 @@ import Comments from './comments/Comments.vue';
 /* 图标字体 */
 .other-topic-content-bottom-left i {
   padding: 0 20px;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
 }
 /* 单个标签的样式 */
 .other-topic-content-bottom-left ul li {
   margin-left: 5px;
   font-size: small;
   padding: 2px;
-  background-color: var(--kungalgame-blue-0);
+  background-color: @kungalgame-blue-0;
   overflow: hidden;
   white-space: nowrap;
   border-radius: 5px;
   cursor: pointer;
 }
 .other-topic-content-bottom-left ul li:hover {
-  background-color: var(--kungalgame-red-1);
+  background-color: @kungalgame-red-1;
   transition: 0.2s;
 }
 /* 其他人回帖的下部分右侧 */
@@ -339,7 +336,7 @@ import Comments from './comments/Comments.vue';
 /* 沙漏的样式 */
 .other-topic-time i {
   padding: 0 10px;
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 /* 发帖时间的样式 */
 .other-topic-time div {
@@ -371,11 +368,11 @@ import Comments from './comments/Comments.vue';
   margin-left: 17px;
 }
 .other-topic-footer-top-left ul li a {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: 20px;
 }
 .other-topic-footer-top-left ul li:nth-child(1) a {
-  color: var(--kungalgame-red-4);
+  color: @kungalgame-red-4;
 }
 /* 回复、评论、编辑 */
 .other-topic-footer-top-right ul {
@@ -388,7 +385,7 @@ import Comments from './comments/Comments.vue';
   margin-right: 17px;
 }
 .other-topic-footer-top-right ul li a {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
   font-size: 20px;
 }
 /* 其它人回帖的底部 */

src/views/topic/content/others/single/comments/components/SingleComment.vue

@@ -38,7 +38,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 /* 单个评论容器 */
 .single-comment-container {
   display: flex;
@@ -64,7 +64,7 @@
   font-size: 15px;
 }
 .single-comment-left a {
-  color: var(--kungalgame-blue-5);
+  color: @kungalgame-blue-5;
 }
 .single-comment-left a:hover {
   text-decoration: underline;
@@ -77,7 +77,7 @@
   margin-right: 10px;
 }
 .single-comment-right ul li a {
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 单个评论内容区底部 */
 .single-comment-content-bottom {

src/views/unmoe/index.vue

@@ -151,7 +151,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -172,8 +172,8 @@
   background-size: cover;
   min-width: 800px;
   min-height: 750px;
-  font-family: "adobe-clean", "Source Sans Pro", -apple-system,
+  font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
-    "BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
+    'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
 }
 /* 根容器 */
 .container {
@@ -182,16 +182,16 @@
   width: 700px;
   /* 居中 */
   margin: auto;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
   overflow: hidden;
   border-radius: 7px;
   /* 模糊背景 */
   backdrop-filter: blur(5px);
   display: flex;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   position: relative;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 /* 页面标题 */
 .title {
@@ -203,13 +203,13 @@
   justify-content: center;
   align-items: center;
   font-weight: bold;
-  color: var(--kungalgame-font-color-2);
+  color: @kungalgame-font-color-2;
 }
 /* 文章部分 */
 .article {
   width: 90%;
-  background-color: var(--kungalgame-trans-white-3);
+  background-color: @kungalgame-trans-white-3;
-  border-left: 1px solid var(--kungalgame-red-4);
+  border-left: 1px solid @kungalgame-red-4;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -234,11 +234,11 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .content::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 原因、处理方式 */
@@ -254,17 +254,17 @@
 /* 单个记录 */
 .single-log {
   margin: 20px 40px;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
 }
 /* 原因 */
 .reason {
   width: 80%;
   padding-left: 5px;
-  border-left: 2px solid var(--kungalgame-blue-4);
+  border-left: 2px solid @kungalgame-blue-4;
 }
 /* 后果 */
 .result {
-  border-right: 4px solid var(--kungalgame-red-4);
+  border-right: 4px solid @kungalgame-red-4;
   padding-right: 5px;
   margin-top: 10px;
   display: flex;

src/views/update-log/index.vue

@@ -187,7 +187,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   list-style: none;
   padding: 0;
@@ -202,7 +202,7 @@
   display: flex;
   flex-direction: column;
   background-image: url(../img/bg/bg6.png);
-  /* background-image: url(./img/bg/bg2.png); */
+  /* background-image: url(./img/bg/bg2.png; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -218,7 +218,7 @@
   position: relative;
   /* 居中 */
   margin: auto;
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
   /* 模糊背景 */
   backdrop-filter: blur(5px);
   border-radius: 7px;
@@ -226,9 +226,9 @@
   flex-direction: column;
   align-items: center;
   padding: 10px;
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
-  border: 1px solid var(--kungalgame-trans-blue-2);
+  border: 1px solid @kungalgame-trans-blue-2;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
 }
 /* 内容区 */
 .content {
@@ -276,12 +276,12 @@
 /* 访问 github */
 .preview > span {
   margin-top: 10px;
-  color: var(--kungalgame-blue-4);
+  color: @kungalgame-blue-4;
-  border-bottom: 2px solid var(--kungalgame-trans-white-8);
+  border-bottom: 2px solid @kungalgame-trans-white-8;
   cursor: pointer;
 }
 .preview > span:hover {
-  border-bottom: 2px solid var(--kungalgame-blue-4);
+  border-bottom: 2px solid @kungalgame-blue-4;
 }
 /* 预计更新时间 */
 .time {
@@ -296,7 +296,7 @@
 }
 /* 历史更新的内容 */
 .article-history {
-  border-left: 1px solid var(--kungalgame-blue-4);
+  border-left: 1px solid @kungalgame-blue-4;
   height: 75%;
   padding: 10px;
 }
@@ -318,11 +318,11 @@
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .history-list::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单个更新历史 */
@@ -331,7 +331,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
 }
 .article-history ul > li:first-child {
   margin-top: 10px;

src/views/user/info.vue

@@ -85,7 +85,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   margin: 0;
   padding: 0;
@@ -120,9 +120,9 @@ input:focus {
   max-width: 1350px;
   max-width: 1200px;
   /* 背景色和边框阴影 */
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   border-radius: 7px;
   /* 居中 */
   margin: auto;
@@ -130,7 +130,7 @@ input:focus {
   display: flex;
   flex-direction: column;
   /* 用户页面的所有字体颜色 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   overflow: hidden;
 }
 /* 页面的头部 */
@@ -147,7 +147,7 @@ input:focus {
   flex-grow: 2;
   width: 100%;
   /* 头部的颜色 */
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   align-items: center;
 }
 /* 用户名字的位置 */
@@ -163,9 +163,9 @@ input:focus {
   position: absolute;
   right: 0;
   font-size: 100px;
-  color: var(--kungalgame-trans-white-6);
+  color: @kungalgame-trans-white-6;
   font-style: italic;
-  text-shadow: 2px 2px 2px var(--kungalgame-trans-white-8);
+  text-shadow: 2px 2px 2px @kungalgame-trans-white-8;
 }
 /* 用户头像 */
 .kungalgamer-avatar {
@@ -179,7 +179,7 @@ input:focus {
 .kungalgamer-avatar img {
   width: 140px;
   border-radius: 50%;
-  box-shadow: 0px 0px 2px 4px var(--kungalgame-trans-red-2);
+  box-shadow: 0px 0px 2px 4px @kungalgame-trans-red-2;
 }
 /* 头像的 hover */
 .kungalgamer-avatar img:hover {
@@ -193,7 +193,7 @@ input:focus {
     transform: scale(1.1);
   }
   80% {
-    box-shadow: 0px 0px 2px 7px var(--kungalgame-trans-red-2);
+    box-shadow: 0px 0px 2px 7px @kungalgame-trans-red-2;
   }
 }
 /* 用户萌萌点 */
@@ -201,8 +201,8 @@ input:focus {
   height: 1px;
   flex-grow: 1;
   /* 分割线 */
-  border-top: 2px solid var(--kungalgame-blue-4);
+  border-top: 2px solid @kungalgame-blue-4;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   /* 内 border 盒子 */
   box-sizing: border-box;
   display: flex;
@@ -214,7 +214,7 @@ input:focus {
   height: 100%;
   /* 这个数值会根据用户的萌萌点数增长，引起页面蓝色占比的变化 */
   width: 77%;
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
 }
 /* 萌萌点进度提示数字 */
 .moemoepoint span {
@@ -240,8 +240,8 @@ input:focus {
   /* 固定宽度 */
   height: 100%;
   width: 120px;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
-  border-right: 1px solid var(--kungalgame-blue-4);
+  border-right: 1px solid @kungalgame-blue-4;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -256,14 +256,14 @@ input:focus {
 /* 列表中的单个项目 */
 .nav > ul li {
   height: 40px;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 /* 单个项目的 hover */
 .nav > ul li:hover {
-  background-color: var(--kungalgame-trans-blue-4);
+  background-color: @kungalgame-trans-blue-4;
   transition: 0.1s;
 }
 /* 内容区 */
@@ -309,15 +309,15 @@ input:focus {
 .change-btn button {
   height: 30px;
   width: 49%;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   cursor: pointer;
 }
 .change-btn button:hover {
-  background-color: var(--kungalgame-trans-blue-4);
+  background-color: @kungalgame-trans-blue-4;
 }
 .change-btn button:active {
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
 }
 /* 更改按钮距离签名的距离 */
 .change-pwd > div {

src/views/user/pwd.vue

@@ -69,7 +69,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   margin: 0;
   padding: 0;
@@ -104,9 +104,9 @@ input:focus {
   max-width: 1350px;
   max-width: 1200px;
   /* 背景色和边框阴影 */
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   border-radius: 7px;
   /* 居中 */
   margin: auto;
@@ -114,7 +114,7 @@ input:focus {
   display: flex;
   flex-direction: column;
   /* 用户页面的所有字体颜色 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   overflow: hidden;
 }
 /* 页面的头部 */
@@ -131,7 +131,7 @@ input:focus {
   flex-grow: 2;
   width: 100%;
   /* 头部的颜色 */
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   align-items: center;
 }
 /* 用户名字的位置 */
@@ -147,9 +147,9 @@ input:focus {
   position: absolute;
   right: 0;
   font-size: 100px;
-  color: var(--kungalgame-trans-white-6);
+  color: @kungalgame-trans-white-6;
   font-style: italic;
-  text-shadow: 2px 2px 2px var(--kungalgame-trans-white-8);
+  text-shadow: 2px 2px 2px @kungalgame-trans-white-8;
 }
 /* 用户头像 */
 .kungalgamer-avatar {
@@ -163,7 +163,7 @@ input:focus {
 .kungalgamer-avatar img {
   width: 140px;
   border-radius: 50%;
-  box-shadow: 0px 0px 2px 4px var(--kungalgame-trans-red-2);
+  box-shadow: 0px 0px 2px 4px @kungalgame-trans-red-2;
 }
 /* 头像的 hover */
 .kungalgamer-avatar img:hover {
@@ -177,7 +177,7 @@ input:focus {
     transform: scale(1.1);
   }
   80% {
-    box-shadow: 0px 0px 2px 7px var(--kungalgame-trans-red-2);
+    box-shadow: 0px 0px 2px 7px @kungalgame-trans-red-2;
   }
 }
 /* 用户萌萌点 */
@@ -185,8 +185,8 @@ input:focus {
   height: 1px;
   flex-grow: 1;
   /* 分割线 */
-  border-top: 2px solid var(--kungalgame-blue-4);
+  border-top: 2px solid @kungalgame-blue-4;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   /* 内 border 盒子 */
   box-sizing: border-box;
   display: flex;
@@ -198,7 +198,7 @@ input:focus {
   height: 100%;
   /* 这个数值会根据用户的萌萌点数增长，引起页面蓝色占比的变化 */
   width: 77%;
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
 }
 /* 萌萌点进度提示数字 */
 .moemoepoint span {
@@ -224,8 +224,8 @@ input:focus {
   /* 固定宽度 */
   height: 100%;
   width: 120px;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
-  border-right: 1px solid var(--kungalgame-blue-4);
+  border-right: 1px solid @kungalgame-blue-4;
   box-sizing: border-box;
 }
 /* 左侧交互区的无需列表容器 */
@@ -237,14 +237,14 @@ input:focus {
 /* 列表中的单个项目 */
 .nav > ul li {
   height: 40px;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 /* 单个项目的 hover */
 .nav > ul li:hover {
-  background-color: var(--kungalgame-trans-blue-4);
+  background-color: @kungalgame-trans-blue-4;
   transition: 0.1s;
 }
 /* 内容区 */
@@ -273,24 +273,24 @@ input:focus {
 .pwd-form input {
   height: 16px;
   padding: 2px;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-white-5);
+  background-color: @kungalgame-trans-white-5;
 }
 .pwd-form input:focus {
-  box-shadow: 0px 0px 3px var(--kungalgame-blue-4);
+  box-shadow: 0px 0px 3px @kungalgame-blue-4;
 }
 /* 更改密码 button */
 .pwd-form button {
   width: 304px;
-  border: 1px solid var(--kungalgame-red-4);
+  border: 1px solid @kungalgame-red-4;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
   cursor: pointer;
 }
 .pwd-form button:hover {
-  background-color: var(--kungalgame-trans-red-4);
+  background-color: @kungalgame-trans-red-4;
 }
 .pwd-form button:active {
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
 }
 /* 更改邮箱 */
 .change-mail {

src/views/user/topic.vue

@@ -207,7 +207,7 @@
   </div>
 </template>
 
-<style scoped>
+<style lang="less" scoped>
 * {
   margin: 0;
   padding: 0;
@@ -242,9 +242,9 @@ input:focus {
   max-width: 1350px;
   max-width: 1200px;
   /* 背景色和边框阴影 */
-  background-color: var(--kungalgame-trans-white-2);
+  background-color: @kungalgame-trans-white-2;
-  border: 1px solid var(--kungalgame-blue-4);
+  border: 1px solid @kungalgame-blue-4;
-  box-shadow: var(--shadow);
+  box-shadow: @shadow;
   border-radius: 7px;
   /* 居中 */
   margin: auto;
@@ -252,7 +252,7 @@ input:focus {
   display: flex;
   flex-direction: column;
   /* 用户页面的所有字体颜色 */
-  color: var(--kungalgame-font-color-3);
+  color: @kungalgame-font-color-3;
   overflow: hidden;
 }
 /* 页面的头部 */
@@ -269,7 +269,7 @@ input:focus {
   flex-grow: 2;
   width: 100%;
   /* 头部的颜色 */
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   align-items: center;
 }
 /* 用户名字的位置 */
@@ -285,9 +285,9 @@ input:focus {
   position: absolute;
   right: 0;
   font-size: 100px;
-  color: var(--kungalgame-trans-white-6);
+  color: @kungalgame-trans-white-6;
   font-style: italic;
-  text-shadow: 2px 2px 2px var(--kungalgame-trans-white-8);
+  text-shadow: 2px 2px 2px @kungalgame-trans-white-8;
 }
 /* 用户头像 */
 .kungalgamer-avatar {
@@ -301,7 +301,7 @@ input:focus {
 .kungalgamer-avatar img {
   width: 140px;
   border-radius: 50%;
-  box-shadow: 0px 0px 2px 4px var(--kungalgame-trans-red-2);
+  box-shadow: 0px 0px 2px 4px @kungalgame-trans-red-2;
 }
 /* 头像的 hover */
 .kungalgamer-avatar img:hover {
@@ -315,7 +315,7 @@ input:focus {
     transform: scale(1.1);
   }
   80% {
-    box-shadow: 0px 0px 2px 7px var(--kungalgame-trans-red-2);
+    box-shadow: 0px 0px 2px 7px @kungalgame-trans-red-2;
   }
 }
 /* 用户萌萌点 */
@@ -323,8 +323,8 @@ input:focus {
   height: 1px;
   flex-grow: 1;
   /* 分割线 */
-  border-top: 2px solid var(--kungalgame-blue-4);
+  border-top: 2px solid @kungalgame-blue-4;
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
   /* 内 border 盒子 */
   box-sizing: border-box;
   display: flex;
@@ -336,7 +336,7 @@ input:focus {
   height: 100%;
   /* 这个数值会根据用户的萌萌点数增长，引起页面蓝色占比的变化 */
   width: 77%;
-  background-color: var(--kungalgame-trans-blue-2);
+  background-color: @kungalgame-trans-blue-2;
 }
 /* 萌萌点进度提示数字 */
 .moemoepoint span {
@@ -362,8 +362,8 @@ input:focus {
   /* 固定宽度 */
   height: 100%;
   width: 120px;
-  background-color: var(--kungalgame-trans-red-0);
+  background-color: @kungalgame-trans-red-0;
-  border-right: 1px solid var(--kungalgame-blue-4);
+  border-right: 1px solid @kungalgame-blue-4;
   box-sizing: border-box;
 }
 /* 左侧交互区的无需列表容器 */
@@ -375,14 +375,14 @@ input:focus {
 /* 列表中的单个项目 */
 .nav > ul li {
   height: 40px;
-  background-color: var(--kungalgame-trans-blue-0);
+  background-color: @kungalgame-trans-blue-0;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 /* 单个项目的 hover */
 .nav > ul li:hover {
-  background-color: var(--kungalgame-trans-blue-4);
+  background-color: @kungalgame-trans-blue-4;
   transition: 0.1s;
 }
 /* 内容区 */
@@ -401,11 +401,11 @@ input:focus {
   display: inline;
   width: 4px;
   height: 0;
-  background-color: var(--kungalgame-red-2);
+  background-color: @kungalgame-red-2;
   border-radius: 2px;
 }
 .article::-webkit-scrollbar-thumb {
-  background: var(--kungalgame-blue-4);
+  background: @kungalgame-blue-4;
   border-radius: 2px;
 }
 /* 单个帖子的样式 */
@@ -419,14 +419,14 @@ input:focus {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  border-bottom: 1px solid var(--kungalgame-blue-1);
+  border-bottom: 1px solid @kungalgame-blue-1;
   box-sizing: border-box;
-  border-left: 2px solid var(--kungalgame-blue-4);
+  border-left: 2px solid @kungalgame-blue-4;
   cursor: pointer;
 }
 .topic:hover {
-  border-bottom: 1px solid var(--kungalgame-blue-4);
+  border-bottom: 1px solid @kungalgame-blue-4;
-  background-color: var(--kungalgame-trans-blue-1);
+  background-color: @kungalgame-trans-blue-1;
 }
 /* 单个帖子的标题 */
 .topic-title {

vite.config.ts

@@ -1,8 +1,8 @@
-import { PluginOption, defineConfig } from "vite";
+import { PluginOption, defineConfig } from 'vite'
-import path from "path";
+import path, { resolve } from 'path'
-import vue from "@vitejs/plugin-vue";
+import vue from '@vitejs/plugin-vue'
 // 引入 Rollup Plugin Visualizer 打包可视化工具
-import { visualizer } from "rollup-plugin-visualizer";
+import { visualizer } from 'rollup-plugin-visualizer'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,7 +10,18 @@ export default defineConfig({
   /* src 别名为 @ */
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      '@': path.resolve(__dirname, './src'),
     },
   },
-});
+  css: {
+    preprocessorOptions: {
+        less: {
+            javascriptEnabled: true,
+            additionalData: `@import "${resolve(
+                __dirname,
+                "./src/assets/css/color.less"
+            )}";`,
+        },
+    },
+},
+})