hashirama/kun-galgame-vue
1
0
Fork 0
Code Issues Pull requests Actions Projects Releases Wiki Activity

use less!

Browse source
This commit is contained in:
KUN1007 2023-05-02 23:22:46 +08:00
parent 38bda6f0f3
commit 2a71b38595
50 changed files with 1064 additions and 1074 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
package-lock.json generated
View file

@ -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,
"peer": true
"optional": 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,
"optional": true,
"peer": true
"dev": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"optional": true,
"peer": true
"dev": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"optional": true,
"peer": true
"dev": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"optional": true,
"peer": true
"dev": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"peer": true
"optional": 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,
"optional": true,
"peer": true
"dev": true
},
"type": {
"version": "1.2.0",

1
package.json
View file

@ -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",

6
src/assets/css/color.css Normal file
View file

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

187
src/assets/css/color.less Normal file
View file

@ -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;

171
src/components/KUNGalgameTopBar.vue
View file

@ -1,28 +1,55 @@
<script setup lang="ts">
// 引入一个 vue3 中传参的函数
import { defineProps } from 'vue'
import { useHeaderStore } from '@/store/modules/header'
const topBarItem: string[] = [
'返回主页',
'所有帖子',
'发布帖子',
'技术交流',
'关于我们',
]
let topBarColor: string[] = [
'red',
'yellow',
'blue',
'green',
'purple',
'orange',
]
let topicStyle = {}
// 接受父组件的传值
const props = defineProps(['isMainPage'])
let props = defineProps(['isMainPage', 'isTopicPage'])
const store = useHeaderStore()
let navItemNum = store.topBarItem.length
const navItemNumString = navItemNum + '00px'
const isMain = true
if (isMain === true) {
store.topBarItem.unshift()
const isMain = props.isMainPage
const isTopicPage = props.isMainPage
// 如果是主页的话删除 “返回主页” 项目
if (isMain) {
topBarItem.shift()
}
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;
}
/* 网站 LOGO */
.kungal-info img {
img {
height: 50px;
margin-left: 50px;
cursor: pointer;
}
/* 网站名称 */
.kungal-info span {
}
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;
}
.top-bar ul {
display: flex;
width: v-bind(navItemNumString);
ul {
align-items: center;
display: flex;
right: 5%;
}
.top-bar ul .top-bar-box {
position: absolute;
.top-bar-box {
border-radius: 2px;
bottom: 0;
left: 0;
/* 如果导航栏就六个导航，那么每个导航的宽度都是整个导航
的六分之一 */
width: calc((100% / v-bind(navItemNum)) * 1);
height: 7px;
border-radius: 2px;
left: 0;
position: absolute;
transition: 0.5s;
}
.top-bar ul li {
width: 100%;
color: var(--kungalgame-blue-5);
font-weight: bold;
display: block;
width: 100%;
line-height: 58px;
width: calc(100% / @navNumber);
}
li {
color: @kungalgame-blue-5;
cursor: pointer;
}
.top-bar ul li:hover {
background-color: var(--kungalgame-blue-0);
transition: 0.5s;
display: block;
font-weight: bold;
line-height: 58px;
width: 100%;
&:hover {
background-color: @kungalgame-blue-0;
border-radius: 2px;
}
.top-bar ul li:nth-child(1):hover ~ .top-bar-box {
left: calc(100% / 4 * 0);
background-color: var(--kungalgame-red-3);
}
.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);
}
transition: 0.5s;
}
&:nth-child(1):hover ~ .top-bar-box {
background-color: @kungalgame-red-3;
left: calc(100% / @navNumber * 0);
}
/* 顶部搜索框 */
/*
&: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;
}

8
src/css/color.css Normal file
View file

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

17
src/main.ts
View file

@ -1,17 +1,16 @@
// core
import { createApp } from "vue";
/* 预设的样式 */
import "./assets/css/reset.css";
import App from "./App.vue";
import { createApp } from 'vue'
// APP
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 "./styles/color.css";
createApp(App).use(router).use(store).mount("#app");
import './assets/css/reset.css'
import './assets/css/color.less'
createApp(App).use(router).use(store).mount('#app')

12
src/store/modules/header.ts
View file

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

189
src/styles/color.css
View file

@ -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;
}

16
src/views/403/403.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
color: var(--kungalgame-white);
background-color: @kungalgame-blue-4;
color: @kungalgame-white;
transition: 0.2s;
}
</style>

16
src/views/404/404.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
color: var(--kungalgame-white);
background-color: @kungalgame-blue-4;
color: @kungalgame-white;
transition: 0.2s;
}
</style>

10
src/views/Home/KUNGalgameMainPage.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts">
import KUNGalgameTopBar from "@/components/KUNGalgameTopBar.vue";
import MainPageContent from "./content/MainPageContent.vue";
import MainPageFooter from "./footer/MainPageFooter.vue";
import KUNGalgameTopBar from '@/components/KUNGalgameTopBar.vue'
import MainPageContent from './content/MainPageContent.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,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
</style>

14
src/views/Home/content/MainPageContent.vue
View file

@ -1,10 +1,6 @@
<script lang="ts">
import MainPageAside from "./aside/MainPageAside.vue";
import MainPageArticle from "./article/MainPageArticle.vue";
export default {
name: "MainPageContent",
components: { MainPageAside, MainPageArticle },
};
<script setup lang="ts">
import MainPageAside from './aside/MainPageAside.vue'
import MainPageArticle from './article/MainPageArticle.vue'
</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;

16
src/views/Home/content/article/MainPageArticle.vue
View file

@ -1,10 +1,6 @@
<script lang="ts">
import ArticleHeader from "./header/ArticleHeader.vue";
import ArticleContent from "./content/ArticleContent.vue";
export default {
name: "MainPageArticle",
components: { ArticleHeader, ArticleContent },
};
<script setup lang="ts">
import ArticleHeader from './header/ArticleHeader.vue'
import ArticleContent from './content/ArticleContent.vue'
</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);
background-color: var(--kungalgame-trans-blue-0);
border: 1px solid @kungalgame-trans-blue-4;
background-color: @kungalgame-trans-blue-0;
border-radius: 5px;
display: flex;
/* 文章区所有组件居中 */

14
src/views/Home/content/article/content/ArticleContent.vue
View file

@ -1,9 +1,5 @@
<script lang="ts">
import SingleTopic from "./topic/SingleTopic.vue";
export default {
name: "ArticleContent",
components: { SingleTopic },
};
<script setup lang="ts">
import SingleTopic from './topic/SingleTopic.vue'
</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>

16
src/views/Home/content/article/content/topic/SingleTopic.vue
View file

@ -1,10 +1,10 @@
<script setup lang="ts">
import UserPart from "./components/UserPart.vue";
import TopicPart from "./components/TopicPart.vue";
import { useRouter } from "vue-router";
import UserPart from './components/UserPart.vue'
import TopicPart from './components/TopicPart.vue'
import { useRouter } from 'vue-router'
const router = useRouter();
const toTopic = (url:string) => {
const router = useRouter()
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 {

20
src/views/Home/content/article/content/topic/components/TopicPart.vue
View file

@ -1,11 +1,5 @@
<script lang="ts">
import { Icon } from "@iconify/vue";
export default {
name: "TopicPart",
components: {
Icon,
},
};
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</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>

16
src/views/Home/content/article/content/topic/components/UserPart.vue
View file

@ -1,16 +1,10 @@
<script lang="ts">
export default {
name: "UserPart",
};
</script>
<script setup lang="ts"></script>
<template>
<!-- 帖子发布者个人信息 -->
<div class="kungalgamer-topic-info">
<!-- 发布者头像 -->
<div class="kungalgamer-topic-avatar">
<a href="#"
><img src="@/assets/images/topic.jpg" alt="鲲"
/></a>
<a href="#"><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>

143
src/views/Home/content/article/header/ArticleHeader.vue
View file

@ -1,11 +1,5 @@
<script lang="ts">
import { Icon } from "@iconify/vue";
export default {
name: "ArticleHeader",
components: {
Icon,
},
};
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</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);
color: var(--kungalgame-font-color-3);
border: 1px solid var(--kungalgame-red-1);
background-color: @kungalgame-trans-white-2;
color: @kungalgame-font-color-3;
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;

76
src/views/Home/content/aside/item/AsideItem.vue
View file

@ -1,11 +1,5 @@
<script lang="ts">
import { Icon } from "@iconify/vue";
export default {
name: "AsideItem",
components: {
Icon,
},
};
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</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><Icon class="moon" icon="line-md:sunny-outline-to-moon-loop-transition" />黑夜</li>
<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);
border: 1px solid var(--kungalgame-red-3);
background-color: @kungalgame-red-0;
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);
color: var(--kungalgame-red-0);
background-color: @kungalgame-red-3;
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);
background-color: var(--kungalgame-blue-0);
color: @kungalgame-font-color-3;
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);
box-shadow: 1px 2px 1px 1px var(--kungalgame-trans-red-3);
background-color: @kungalgame-blue-0;
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>

29
src/views/Home/content/aside/topic/HotTopic.vue
View file

@ -1,11 +1,5 @@
<script lang="ts">
import { Icon } from "@iconify/vue";
export default {
name: "HotTopic",
components: {
Icon,
},
};
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</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>

29
src/views/Home/content/aside/topic/NewTopic.vue
View file

@ -1,11 +1,5 @@
<script lang="ts">
import { Icon } from "@iconify/vue";
export default {
name: "NewTopic",
components: {
Icon,
},
};
<script setup lang="ts">
import { Icon } from '@iconify/vue'
</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>

18
src/views/Home/footer/info/KUNGalgameInfo.vue
View file

@ -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 {

58
src/views/balance/Banlance.vue
View file

@ -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);
background-color: var(--kungalgame-trans-blue-0);
border-bottom: 1px solid @kungalgame-blue-4;
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);
background-color: var(--kungalgame-trans-blue-0);
border-top: 1px solid @kungalgame-blue-4;
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);
background-color: var(--kungalgame-trans-red-0);
border-bottom: 1px solid @kungalgame-red-4;
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);
background-color: var(--kungalgame-trans-red-0);
border-top: 1px solid @kungalgame-red-4;
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);
color: var(--kungalgame-white);
background-color: @kungalgame-red-4;
color: @kungalgame-white;
}
.amount-status > div:last-child {
background-color: var(--kungalgame-red-2);
background-color: @kungalgame-red-2;
}
/* 版权 */
.copyright {

33
src/views/contacts/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
border: 1px solid var(--kungalgame-trans-blue-4);
background-color: @kungalgame-trans-blue-0;
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);
text-shadow: 2px 2px 3px var(--kungalgame-trans-blue-1);
color: @kungalgame-trans-white-7;
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 {

30
src/views/donate/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
box-shadow: var(--kungalgame-shadow-0);
background-color: @kungalgame-trans-blue-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);
color: var(--kungalgame-red-5);
border: 1px solid var(--kungalgame-red-4);
background-color: @kungalgame-trans-red-0;
color: @kungalgame-red-5;
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);
color: var(--kungalgame-blue-5);
border: 1px solid var(--kungalgame-blue-4);
background-color: @kungalgame-trans-blue-1;
color: @kungalgame-blue-5;
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;

98
src/views/edit/index.vue
View file

@ -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 { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted } from '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>";
}, 1500);
});
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const editor = editorRef.value
if (editor == null) return
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);
background-color: var(--kungalgame-trans-white-2);
color: var(--kungalgame-font-color-3);
box-shadow: @shadow;
background-color: @kungalgame-trans-white-2;
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);
background-color: var(--kungalgame-trans-white-9);
border: 1px solid @kungalgame-blue-4;
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);
background-color: var(--kungalgame-trans-purple-1);
color: var(--kungalgame-purple-4);
border: 1px solid @kungalgame-purple-4;
background-color: @kungalgame-trans-purple-1;
color: @kungalgame-purple-4;
}
/* 按钮的容器 */
.btn-container {
@ -316,34 +316,34 @@ body::-webkit-scrollbar {
}
/* 确认按钮的样式 */
.confirm-btn {
color: var(--kungalgame-blue-4);
background-color: var(--kungalgame-trans-blue-1);
border: 1px solid var(--kungalgame-blue-4);
color: @kungalgame-blue-4;
background-color: @kungalgame-trans-blue-1;
border: 1px solid @kungalgame-blue-4;
}
.confirm-btn:hover {
color: var(--kungalgame-trans-white-1);
background-color: var(--kungalgame-blue-4);
color: @kungalgame-trans-white-1;
background-color: @kungalgame-blue-4;
transition: 0.1s;
}
.confirm-btn:active {
background-color: var(--kungalgame-red-4);
border: 1px solid var(--kungalgame-red-4);
background-color: @kungalgame-red-4;
border: 1px solid @kungalgame-red-4;
font-size: 17px;
}
/* 保存按钮的样式 */
.save-btn {
color: var(--kungalgame-orange-4);
background-color: var(--kungalgame-trans-orange-1);
border: 1px solid var(--kungalgame-orange-4);
color: @kungalgame-orange-4;
background-color: @kungalgame-trans-orange-1;
border: 1px solid @kungalgame-orange-4;
}
.save-btn:hover {
color: var(--kungalgame-trans-white-1);
background-color: var(--kungalgame-orange-4);
color: @kungalgame-trans-white-1;
background-color: @kungalgame-orange-4;
transition: 0.1s;
}
.save-btn:active {
background-color: var(--kungalgame-trans-orange-1);
color: var(--kungalgame-orange-4);
background-color: @kungalgame-trans-orange-1;
color: @kungalgame-orange-4;
}
/* 版权 */
.copyright {

22
src/views/kungalgame/index.vue
View file

@ -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;

12
src/views/licence/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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;
}
/* 页面的标题 */

91
src/views/login/Login.vue
View file

@ -1,25 +1,25 @@
<script setup lang="ts">
import { useRouter } from "vue-router";
import { Ref, ref } from "vue";
import { log } from "console";
import { useRouter } from 'vue-router'
import { Ref, ref } from 'vue'
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";
};
const router = useRouter();
isLogIn.value = 'right-panel-active'
}
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="email" placeholder="邮箱 (gmail, outlook, sina, qq, 163)" class="input" />
<input type="password" placeholder="密码 (7 ~ 17位, 数字、字母、符号组合)" class="input" /> -->
<!-- <input type="text" placeholder="用户名 (中文 < 7个字符, 英文 < 14 个字符" class="input" />
<input type="email" placeholder="邮箱 (gmail, outlook, sina, qq, 163" 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(
var(--kungalgame-pink-0),
var(--kungalgame-blue-0)
);
background: linear-gradient(@kungalgame-pink-0, @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);
background-color: var(--kungalgame-white);
border: 1px solid @kungalgame-blue-1;
background-color: @kungalgame-white;
cursor: pointer;
}
.mail-confirm:hover {
background-color: var(--kungalgame-blue-4);
color: var(--kungalgame-white);
background-color: @kungalgame-blue-4;
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),
0 0.7rem 0.7rem var(--kungalgame-blue-0);
box-shadow: 0 0.9rem 1.7rem @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);
border: 1px solid var(--kungalgame-blue-4);
color: var(--kungalgame-blue-4);
background-color: @kungalgame-trans-white-1;
border: 1px solid @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);
color: var(--kungalgame-trans-white-1);
background-color: @kungalgame-blue-4;
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);
border: 1px solid var(--kungalgame-red-4);
color: var(--kungalgame-red-4);
background-color: @kungalgame-red-0;
border: 1px solid @kungalgame-red-4;
color: @kungalgame-red-4;
}
.overlay__panel .btn:hover {
background-color: var(--kungalgame-red-4);
color: var(--kungalgame-trans-white-1);
background-color: @kungalgame-red-4;
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 {

36
src/views/pool/index.vue
View file

@ -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,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'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);
box-shadow: var(--shadow);
background-color: @kungalgame-blue-2;
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>

16
src/views/privacy/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
border: 1px solid var(--kungalgame-trans-blue-4);
background-color: @kungalgame-trans-blue-0;
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;
}
/* 内容区 */

50
src/views/rank/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-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);
box-shadow: var(--shadow);
border: 1px solid @kungalgame-pink-4;
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;

6
src/views/redirect/index.vue
View file

@ -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),
var(--kungalgame-trans-blue-1)
@kungalgame-trans-pink-1,
@kungalgame-trans-blue-1
);
display: flex;
flex-direction: column;

22
src/views/regulations/index.vue
View file

@ -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);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-white-2;
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);
border-bottom: 1px solid var(--kungalgame-blue-4);
color: @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;
}

84
src/views/technology/index.vue
View file

@ -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,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'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);
border: 1px solid var(--kungalgame-trans-blue-1);
color: @kungalgame-font-color-3;
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);
border: 1px solid var(--kungalgame-trans-blue-4);
background-color: @kungalgame-trans-white-5;
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),
var(--kungalgame-trans-red-1)
@kungalgame-trans-blue-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);
background-color: var(--kungalgame-trans-blue-0);
border: 1px solid @kungalgame-blue-4;
background-color: @kungalgame-trans-blue-0;
}
.page-switch > button:hover {
background-color: var(--kungalgame-blue-4);
color: var(--kungalgame-white);
background-color: @kungalgame-blue-4;
color: @kungalgame-white;
}
.page-switch > button:active {
background-color: var(--kungalgame-blue-3);
background-color: @kungalgame-blue-3;
}
/* 上一页和下一页两个按钮更宽 */
.page-switch > button:first-child {

16
src/views/thanks-list/index.vue
View file

@ -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,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'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);
background-color: var(--kungalgame-trans-blue-0);
color: @kungalgame-font-color-3;
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 {

14
src/views/topic/KUNGalgameTopicPage.vue
View file

@ -2,14 +2,14 @@
KUNGalgame 的帖子页面
-->
<script setup lang="ts">
import KUNGalgameTopBar from "../../components/KUNGalgameTopBar.vue";
import KUNGalgameTopicAside from "./aside/KUNGalgameTopicAside.vue";
import KUNGalgameTopicContent from "./content/KUNGalgameTopicContent.vue";
import KUNGalgameTopBar from '../../components/KUNGalgameTopBar.vue'
import KUNGalgameTopicAside from './aside/KUNGalgameTopicAside.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;

18
src/views/topic/aside/master/TopicAsideMaster.vue
View file

@ -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);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-pink-0;
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);
background-color: var(--kungalgame-trans-pink-1);
border-left: 4px solid @kungalgame-blue-3;
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;
}

12
src/views/topic/aside/nav/TopicAsideNav.vue
View file

@ -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);
box-shadow: var(--shadow);
border: 1px solid @kungalgame-trans-red-4;
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;
}

18
src/views/topic/aside/same/TopicAsideSame.vue
View file

@ -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);
background-color: var(--kungalgame-trans-blue-1);
border-left: 4px solid @kungalgame-red-3;
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;
}

71
src/views/topic/content/master/TopicMaster.vue
View file

@ -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(
var(--kungalgame-blue-1),
var(--kungalgame-pink-1)
);
background: linear-gradient(@kungalgame-blue-1, @kungalgame-pink-1);
opacity: 0.8;
font-size: 37px;
font-weight: bold;
font-style: oblique;
color: var(--kungalgame-pink-1);
text-shadow: -1px 0 var(--kungalgame-blue-4), 0 -1px var(--kungalgame-blue-4),
1px 0 var(--kungalgame-blue-4), 0 1px var(--kungalgame-blue-4),
1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
-1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
4px 2px 2px var(--kungalgame-red-4);
color: @kungalgame-pink-1;
text-shadow: -1px 0 @kungalgame-blue-4, 0 -1px @kungalgame-blue-4,
1px 0 @kungalgame-blue-4, 0 1px @kungalgame-blue-4,
1px 1px @kungalgame-black, -1px -1px @kungalgame-black,
-1px 1px @kungalgame-black, 1px -1px @kungalgame-black,
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);
background-color: var(--kungalgame-trans-white-3);
box-shadow: @shadow;
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);
color: var(--kungalgame-white);
background-color: @kungalgame-green-3;
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;
}

49
src/views/topic/content/others/single/SingleTopic.vue
View file

@ -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(
var(--kungalgame-blue-1),
var(--kungalgame-pink-1)
);
background: linear-gradient(@kungalgame-blue-1, @kungalgame-pink-1);
opacity: 0.7;
font-size: 18px;
font-weight: bold;
font-style: oblique;
color: var(--kungalgame-pink-1);
text-shadow: -1px 0 var(--kungalgame-blue-5), 0 -1px var(--kungalgame-blue-5),
1px 0 var(--kungalgame-blue-5), 0 1px var(--kungalgame-blue-5),
1px 1px var(--kungalgame-black), -1px -1px var(--kungalgame-black),
-1px 1px var(--kungalgame-black), 1px -1px var(--kungalgame-black),
4px 2px 2px var(--kungalgame-red-4);
color: @kungalgame-pink-1;
text-shadow: -1px 0 @kungalgame-blue-5, 0 -1px @kungalgame-blue-5,
1px 0 @kungalgame-blue-5, 0 1px @kungalgame-blue-5,
1px 1px @kungalgame-black, -1px -1px @kungalgame-black,
-1px 1px @kungalgame-black, 1px -1px @kungalgame-black,
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);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-white-3;
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;
}
/* 其它人回帖的底部 */

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

@ -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 {

30
src/views/unmoe/index.vue
View file

@ -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,
"BlinkMacSystemFont", "Segoe UI,Roboto", sans-serif;
font-family: 'adobe-clean', 'Source Sans Pro', -apple-system,
'BlinkMacSystemFont', 'Segoe UI,Roboto', sans-serif;
}
/* 根容器 */
.container {
@ -182,16 +182,16 @@
width: 700px;
/* 居中 */
margin: auto;
background-color: var(--kungalgame-trans-white-5);
border: 1px solid var(--kungalgame-red-4);
background-color: @kungalgame-trans-white-5;
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);
border-left: 1px solid var(--kungalgame-red-4);
background-color: @kungalgame-trans-white-3;
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;

26
src/views/update-log/index.vue
View file

@ -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);
border: 1px solid var(--kungalgame-trans-blue-2);
box-shadow: var(--shadow);
color: @kungalgame-font-color-3;
border: 1px solid @kungalgame-trans-blue-2;
box-shadow: @shadow;
}
/* 内容区 */
.content {
@ -276,12 +276,12 @@
/* 访问 github */
.preview > span {
margin-top: 10px;
color: var(--kungalgame-blue-4);
border-bottom: 2px solid var(--kungalgame-trans-white-8);
color: @kungalgame-blue-4;
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;

42
src/views/user/info.vue
View file

@ -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);
border: 1px solid var(--kungalgame-blue-4);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-white-2;
border: 1px solid @kungalgame-blue-4;
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-bottom: 1px solid var(--kungalgame-blue-4);
border-top: 2px solid @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);
border-right: 1px solid var(--kungalgame-blue-4);
background-color: @kungalgame-trans-red-0;
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);
background-color: var(--kungalgame-trans-blue-0);
border: 1px solid @kungalgame-blue-4;
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 {

48
src/views/user/pwd.vue
View file

@ -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);
border: 1px solid var(--kungalgame-blue-4);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-white-2;
border: 1px solid @kungalgame-blue-4;
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-bottom: 1px solid var(--kungalgame-blue-4);
border-top: 2px solid @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);
border-right: 1px solid var(--kungalgame-blue-4);
background-color: @kungalgame-trans-red-0;
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);
background-color: var(--kungalgame-trans-white-5);
border: 1px solid @kungalgame-blue-4;
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);
background-color: var(--kungalgame-trans-red-0);
border: 1px solid @kungalgame-red-4;
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 {

46
src/views/user/topic.vue
View file

@ -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);
border: 1px solid var(--kungalgame-blue-4);
box-shadow: var(--shadow);
background-color: @kungalgame-trans-white-2;
border: 1px solid @kungalgame-blue-4;
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-bottom: 1px solid var(--kungalgame-blue-4);
border-top: 2px solid @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);
border-right: 1px solid var(--kungalgame-blue-4);
background-color: @kungalgame-trans-red-0;
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);
background-color: var(--kungalgame-trans-blue-1);
border-bottom: 1px solid @kungalgame-blue-4;
background-color: @kungalgame-trans-blue-1;
}
/* 单个帖子的标题 */
.topic-title {

23
vite.config.ts
View file

@ -1,8 +1,8 @@
import { PluginOption, defineConfig } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import { PluginOption, defineConfig } from 'vite'
import path, { resolve } from 'path'
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"
)}";`,
},
},
},
})