Skip to content
Snippets Groups Projects
Commit 01c2cfcc authored by 张 达's avatar 张 达
Browse files

将评论区加入中间区域

parent 78a6d8f4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 321
− 10
View file @ 01c2cfcc
......@@ -13,7 +13,7 @@
"axios": "^1.7.7",
"colorthief": "^2.4.0",
"core-js": "^3.38.1",
"element-plus": "^2.7.2",
"element-plus": "^2.8.2",
"pinia": "^2.2.2",
"swiper": "^11.1.14",
"vue": "^3.5.12",
......@@ -25,6 +25,8 @@
"@babel/preset-typescript": "^7.26.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"less": "^4.2.1",
"less-loader": "^12.2.0",
"ts-loader": "^9.5.1",
"typescript": "^5.6.3"
}
......@@ -4943,6 +4945,18 @@
"dev": true,
"license": "MIT"
},
"node_modules/copy-anything": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"dependencies": {
"is-what": "^3.14.1"
},
"funding": {
"url": "https://github.com/sponsors/mesqueeb"
}
},
"node_modules/copy-webpack-plugin": {
"version": "9.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
......@@ -5836,10 +5850,9 @@
"license": "ISC"
},
"node_modules/element-plus": {
"version": "2.8.6",
"resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.8.6.tgz",
"integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
"license": "MIT",
"version": "2.9.0",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.0.tgz",
"integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1",
......@@ -5849,7 +5862,7 @@
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^9.1.0",
"async-validator": "^4.2.5",
"dayjs": "^1.11.3",
"dayjs": "^1.11.13",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
......@@ -5924,6 +5937,19 @@
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/errno": {
"version": "0.1.8",
"resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
"dev": true,
"optional": true,
"dependencies": {
"prr": "~1.0.1"
},
"bin": {
"errno": "cli.js"
}
},
"node_modules/error-ex": {
"version": "1.3.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/error-ex/-/error-ex-1.3.2.tgz",
......@@ -7067,6 +7093,19 @@
"node": ">= 4"
}
},
"node_modules/image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"optional": true,
"bin": {
"image-size": "bin/image-size.js"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/import-fresh": {
"version": "3.3.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/import-fresh/-/import-fresh-3.3.0.tgz",
......@@ -7288,6 +7327,12 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-what": {
"version": "3.14.1",
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
"dev": true
},
"node_modules/is-wsl": {
"version": "2.2.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/is-wsl/-/is-wsl-2.2.0.tgz",
......@@ -7505,6 +7550,82 @@
"launch-editor": "^2.9.1"
}
},
"node_modules/less": {
"version": "4.2.1",
"resolved": "https://registry.npmmirror.com/less/-/less-4.2.1.tgz",
"integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==",
"dev": true,
"dependencies": {
"copy-anything": "^2.0.1",
"parse-node-version": "^1.0.1",
"tslib": "^2.3.0"
},
"bin": {
"lessc": "bin/lessc"
},
"engines": {
"node": ">=6"
},
"optionalDependencies": {
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"make-dir": "^2.1.0",
"mime": "^1.4.1",
"needle": "^3.1.0",
"source-map": "~0.6.0"
}
},
"node_modules/less-loader": {
"version": "12.2.0",
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-12.2.0.tgz",
"integrity": "sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==",
"dev": true,
"engines": {
"node": ">= 18.12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"@rspack/core": "0.x || 1.x",
"less": "^3.5.0 || ^4.0.0",
"webpack": "^5.0.0"
},
"peerDependenciesMeta": {
"@rspack/core": {
"optional": true
},
"webpack": {
"optional": true
}
}
},
"node_modules/less/node_modules/make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
"dev": true,
"optional": true,
"dependencies": {
"pify": "^4.0.1",
"semver": "^5.6.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/less/node_modules/semver": {
"version": "5.7.2",
"resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"optional": true,
"bin": {
"semver": "bin/semver"
}
},
"node_modules/lilconfig": {
"version": "2.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/lilconfig/-/lilconfig-2.1.0.tgz",
......@@ -8283,6 +8404,36 @@
"sharp": "^0.33.4"
}
},
"node_modules/needle": {
"version": "3.3.1",
"resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
"dev": true,
"optional": true,
"dependencies": {
"iconv-lite": "^0.6.3",
"sax": "^1.2.4"
},
"bin": {
"needle": "bin/needle"
},
"engines": {
"node": ">= 4.4.x"
}
},
"node_modules/needle/node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"optional": true,
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/negotiator": {
"version": "0.6.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/negotiator/-/negotiator-0.6.3.tgz",
......@@ -8786,6 +8937,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/parse-node-version": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
"dev": true,
"engines": {
"node": ">= 0.10"
}
},
"node_modules/parse5": {
"version": "5.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/parse5/-/parse5-5.1.1.tgz",
......@@ -8917,6 +9077,16 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/pify": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true,
"optional": true,
"engines": {
"node": ">=6"
}
},
"node_modules/pinia": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.0.tgz",
......@@ -9639,6 +9809,13 @@
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
"license": "MIT"
},
"node_modules/prr": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
"dev": true,
"optional": true
},
"node_modules/pseudomap": {
"version": "1.0.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/pseudomap/-/pseudomap-1.0.2.tgz",
......@@ -10094,6 +10271,13 @@
"dev": true,
"license": "MIT"
},
"node_modules/sax": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
"integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
"dev": true,
"optional": true
},
"node_modules/schema-utils": {
"version": "2.7.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/schema-utils/-/schema-utils-2.7.1.tgz",
......@@ -15518,6 +15702,15 @@
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
"dev": true
},
"copy-anything": {
"version": "2.0.6",
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
"integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
"dev": true,
"requires": {
"is-what": "^3.14.1"
}
},
"copy-webpack-plugin": {
"version": "9.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/copy-webpack-plugin/-/copy-webpack-plugin-9.1.0.tgz",
......@@ -16097,9 +16290,9 @@
"dev": true
},
"element-plus": {
"version": "2.8.6",
"resolved": "https://repo.huaweicloud.com/repository/npm/element-plus/-/element-plus-2.8.6.tgz",
"integrity": "sha512-fk5jB8V3efM02/4roZ5SWOLArgaYXbxEydZLlXSr+KPAwjNyHBlk2+HO5em8YKo5+RLBoHnn6BaThj6IE4nXoQ==",
"version": "2.9.0",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.9.0.tgz",
"integrity": "sha512-ccOFXKsauo2dtokAr4OX7gZsb7TuAoVxA2zGRZo5o2yyDDBLBaZxOoFQPoxITSLcHbBfQuNDGK5Iag5hnyKkZA==",
"requires": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.3.1",
......@@ -16109,7 +16302,7 @@
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^9.1.0",
"async-validator": "^4.2.5",
"dayjs": "^1.11.3",
"dayjs": "^1.11.13",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
......@@ -16160,6 +16353,16 @@
"resolved": "https://repo.huaweicloud.com/repository/npm/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
},
"errno": {
"version": "0.1.8",
"resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
"integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
"dev": true,
"optional": true,
"requires": {
"prr": "~1.0.1"
}
},
"error-ex": {
"version": "1.3.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/error-ex/-/error-ex-1.3.2.tgz",
......@@ -16937,6 +17140,13 @@
"integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
"dev": true
},
"image-size": {
"version": "0.5.5",
"resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
"integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
"dev": true,
"optional": true
},
"import-fresh": {
"version": "3.3.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/import-fresh/-/import-fresh-3.3.0.tgz",
......@@ -17077,6 +17287,12 @@
"integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
"dev": true
},
"is-what": {
"version": "3.14.1",
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
"integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
"dev": true
},
"is-wsl": {
"version": "2.2.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/is-wsl/-/is-wsl-2.2.0.tgz",
......@@ -17234,6 +17450,51 @@
"launch-editor": "^2.9.1"
}
},
"less": {
"version": "4.2.1",
"resolved": "https://registry.npmmirror.com/less/-/less-4.2.1.tgz",
"integrity": "sha512-CasaJidTIhWmjcqv0Uj5vccMI7pJgfD9lMkKtlnTHAdJdYK/7l8pM9tumLyJ0zhbD4KJLo/YvTj+xznQd5NBhg==",
"dev": true,
"requires": {
"copy-anything": "^2.0.1",
"errno": "^0.1.1",
"graceful-fs": "^4.1.2",
"image-size": "~0.5.0",
"make-dir": "^2.1.0",
"mime": "^1.4.1",
"needle": "^3.1.0",
"parse-node-version": "^1.0.1",
"source-map": "~0.6.0",
"tslib": "^2.3.0"
},
"dependencies": {
"make-dir": {
"version": "2.1.0",
"resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
"integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
"dev": true,
"optional": true,
"requires": {
"pify": "^4.0.1",
"semver": "^5.6.0"
}
},
"semver": {
"version": "5.7.2",
"resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
"integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
"dev": true,
"optional": true
}
}
},
"less-loader": {
"version": "12.2.0",
"resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-12.2.0.tgz",
"integrity": "sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==",
"dev": true,
"requires": {}
},
"lilconfig": {
"version": "2.1.0",
"resolved": "https://repo.huaweicloud.com/repository/npm/lilconfig/-/lilconfig-2.1.0.tgz",
......@@ -17783,6 +18044,29 @@
"sharp": "^0.33.4"
}
},
"needle": {
"version": "3.3.1",
"resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
"integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
"dev": true,
"optional": true,
"requires": {
"iconv-lite": "^0.6.3",
"sax": "^1.2.4"
},
"dependencies": {
"iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"optional": true,
"requires": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
}
}
}
},
"negotiator": {
"version": "0.6.3",
"resolved": "https://repo.huaweicloud.com/repository/npm/negotiator/-/negotiator-0.6.3.tgz",
......@@ -18118,6 +18402,12 @@
"lines-and-columns": "^1.1.6"
}
},
"parse-node-version": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
"integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
"dev": true
},
"parse5": {
"version": "5.1.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/parse5/-/parse5-5.1.1.tgz",
......@@ -18209,6 +18499,13 @@
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true
},
"pify": {
"version": "4.0.1",
"resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
"dev": true,
"optional": true
},
"pinia": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.0.tgz",
......@@ -18638,6 +18935,13 @@
"resolved": "https://repo.huaweicloud.com/repository/npm/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"prr": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
"integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
"dev": true,
"optional": true
},
"pseudomap": {
"version": "1.0.2",
"resolved": "https://repo.huaweicloud.com/repository/npm/pseudomap/-/pseudomap-1.0.2.tgz",
......@@ -18932,6 +19236,13 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
"sax": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/sax/-/sax-1.4.1.tgz",
"integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
"dev": true,
"optional": true
},
"schema-utils": {
"version": "2.7.1",
"resolved": "https://repo.huaweicloud.com/repository/npm/schema-utils/-/schema-utils-2.7.1.tgz",
......
package.json
+ 5
− 3
View file @ 01c2cfcc
......@@ -13,11 +13,11 @@
"axios": "^1.7.7",
"colorthief": "^2.4.0",
"core-js": "^3.38.1",
"element-plus": "^2.7.2",
"element-plus": "^2.8.2",
"pinia": "^2.2.2",
"swiper": "^11.1.14",
"vue": "^3.5.12",
"vue-router": "^4.4.5",
"pinia": "^2.2.2"
"vue-router": "^4.4.5"
},
"devDependencies": {
"@babel/core": "^7.12.16",
......@@ -25,6 +25,8 @@
"@babel/preset-typescript": "^7.26.0",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"less": "^4.2.1",
"less-loader": "^12.2.0",
"ts-loader": "^9.5.1",
"typescript": "^5.6.3"
},
......
src/App.vue
+ 2
− 1
View file @ 01c2cfcc
<template>
<div id="opacity-bg" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<div id="opacity-bg1" style="position: fixed; width: 100%; height: 100%; transition: 0.5s"></div>
<router-view/>
<router-view/>
</template>
<script>
......
src/assets/icons/comment/comment.png 0 → 100644
+ 0
− 0
View file @ 01c2cfcc
src/assets/icons/comment/comment.png

1.07 KiB

src/assets/pictures/jj.png 0 → 100644
+ 0
− 0
View file @ 01c2cfcc
src/assets/pictures/jj.png

118 KiB

src/components/Comment.vue
+ 128
− 30
View file @ 01c2cfcc
<script setup>
import { reactive, ref, onMounted, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { toggleImg } from '../utils'
import { commentInfo, commentSong, commentPlaylist } from "@/api/comment"
import { getUserById } from "@/api/user"
import { ElMessage } from "element-plus"
import {reactive, ref, onMounted, watch, nextTick} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {toggleImg} from '@/utils'
import {commentInfo, commentSong, commentPlaylist} from "@/api/comment"
import {getUserById} from "@/api/user"
import {ElMessage} from "element-plus"
import {Star} from "@element-plus/icons-vue";
import defaultBg from '@/assets/pictures/jj.png'
import {useTheme} from "@/store/theme";
import Pagination from "@/components/Pagination.vue";
const theme = useTheme()
const state = reactive({
comments: [],
commenters: [],
......@@ -17,8 +22,19 @@ const state = reactive({
const router = useRouter()
const route = useRoute()
const songId = route.params.songId.toString()
const userId = route.params.userId.toString()
// const songId = route.params.songId.toString()
// const userId = route.params.userId.toString()
const {songId, userId} = defineProps({
songId: {
type: String,
required: true
},
userId: {
type: String,
required: true
}
}
)
const page = ref(1)
const imgEl = ref()
const bg = ref('')
......@@ -29,9 +45,81 @@ const showDetail = ref(false)
onMounted(() => {
watch(bg, (val) => {
toggleImg(val).then((img) => {
imgEl.value!.style.backgroundImage = `url(${img.src})`
if (imgEl.value) {
imgEl.value.style.backgroundImage = `url(${img.src})`
}
})
})
console.log(songId, userId)
// 初始化所有state数据
state.comments = [
{
userId: 1,
comment: "这首歌真的太棒了！林俊杰的声音太有感染力了",
createTime: "2024-03-15 14:30",
likedCount: 156
},
{
userId: 2,
comment: "歌词写得太深刻了，每次听都有新的感悟",
createTime: "2024-03-14 18:45",
likedCount: 89
},
{
userId: 3,
comment: "编曲非常精妙，层次感很强",
createTime: "2024-03-13 20:15",
likedCount: 67
}
]
state.commenters = [
{
userId: 1,
username: "音乐爱好者",
avatarUrl: "https://example.com/avatar1.jpg"
},
{
userId: 2,
username: "JJ粉丝",
avatarUrl: "https://example.com/avatar2.jpg"
},
{
userId: 3,
username: "乐评人",
avatarUrl: "https://example.com/avatar3.jpg"
}
]
state.song = {
song: {
name: '达尔文',
},
singer: [
{
name: '林俊杰'
}
],
songDetail: {
lyricist: '林可邦',
composer: '蔡健雅',
arranger: '林俊杰 JJ Lin',
language: '国语',
genre: 'Pop',
originalArtist: '达尔文 - 蔡健雅',
recordCompany: '就是俊杰音乐股份有限公司',
description: '《达尔文》是林俊杰的一首经典之作，以进化论之父Charles Darwin为名，寓意生命的进化与演变。这首歌不仅旋律悠扬，更在歌词中蕴含了深刻的哲理，引人深思。当林俊杰的歌声响起，仿佛带领我们穿越时空，见证生命从简单到复杂的蜕变过程。每一个音符都如同自然的密码，诠释着生命的奥秘。用心聆听，你会发现，这首歌不仅仅是一首歌，更是一部关于生命进化的壮丽史诗。'
}
}
state.total = 50 // 总评论数
state.pageSize = 20 // 每页显示评论数
state.currentPage = 1 // 当前页码
bg.value = defaultBg
// getCommentMusicFn(parseInt(songId), page.value)
theme.change(defaultBg)
})
const getCommentMusicFn = async (id, page) => {
......@@ -95,6 +183,7 @@ const showDetails = () => {
navLeft.classList.remove('active')
navRight.classList.add('active')
}
function adjustHeight(event) {
nextTick(() => {
event.target.style.height = 'auto'
......@@ -109,13 +198,13 @@ function adjustHeight(event) {
<div class="info">
<div ref="imgEl" class="bg-img"></div>
<div class="song-info">
<div class="song-name">{{ (state.song as GetMusicDetailData).song.name }}</div>
<div class="song-name">{{ state.song.song.name }}</div>
<div class="singers">
<div class="singer-info">
<span v-for="(item, index) in state.song.singer"
>歌手:
{{
item.name + (index < (state.song as GetMusicDetailData).singer.length - 1 ? '/' : '')
item.name + (index < state.song.singer.length - 1 ? '/' : '')
}}</span
>
</div>
......@@ -128,13 +217,13 @@ function adjustHeight(event) {
</div>
<div v-if="showComment" class="user-comment">
<textarea placeholder="请输入您的评论..." @input="adjustHeight"></textarea>
<el-button
<span
class="custom-button"
text
style="color: white; font-size: 20px; position: absolute; bottom: 5px; right: 2%"
style="color: white; font-size: 20px; position: absolute; bottom: 8px; right: 2%"
@click.stop="handleSubmit"
>
发布
</el-button>
</span>
</div>
<div v-if="showComment" class="comment-content">
<div class="comment-content-box">
......@@ -179,42 +268,39 @@ function adjustHeight(event) {
<div v-if="showDetail" class="song-info-container">
<div class="song-info-row">
<div class="song-info-label">演唱者:</div>
<div class="song-info-value">林俊杰</div>
<div class="song-info-value">{{ state.song.singer[0].name }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">作词:</div>
<div class="song-info-value">林可邦</div>
<div class="song-info-value">{{ state.song.songDetail.lyricist }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">作曲:</div>
<div class="song-info-value">蔡健雅</div>
<div class="song-info-value">{{ state.song.songDetail.composer }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">编曲:</div>
<div class="song-info-value">林俊杰 JJ Lin</div>
<div class="song-info-value">{{ state.song.songDetail.arranger }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">歌曲语种:</div>
<div class="song-info-value">国语</div>
<div class="song-info-value">{{ state.song.songDetail.language }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">歌曲流派:</div>
<div class="song-info-value">Pop</div>
<div class="song-info-value">{{ state.song.songDetail.genre }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">原唱:</div>
<div class="song-info-value">达尔文 - 蔡健雅</div>
<div class="song-info-value">{{ state.song.songDetail.originalArtist }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">唱片公司:</div>
<div class="song-info-value">就是俊杰音乐股份有限公司</div>
<div class="song-info-value">{{ state.song.songDetail.recordCompany }}</div>
</div>
<div class="song-info-row">
<div class="song-info-label">简介:</div>
<div class="song-info-value">
《达尔文》是林俊杰的一首经典之作，以进化论之父Charles
Darwin为名，寓意生命的进化与演变。这首歌不仅旋律悠扬，更在歌词中蕴含了深刻的哲理，引人深思。当林俊杰的歌声响起，仿佛带领我们穿越时空，见证生命从简单到复杂的蜕变过程。每一个音符都如同自然的密码，诠释着生命的奥秘。用心聆听，你会发现，这首歌不仅仅是一首歌，更是一部关于生命进化的壮丽史诗。
</div>
<div class="song-info-value">{{ state.song.songDetail.description }}</div>
</div>
</div>
</div>
......@@ -274,7 +360,9 @@ function adjustHeight(event) {
width: 130px;
height: 130px;
border-radius: 10px;
.bgSetting();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin-right: 20px;
}
}
......@@ -339,9 +427,14 @@ function adjustHeight(event) {
resize: none;
}
.custom-button {
cursor: pointer; /* 默认显示手型光标 */
}
.custom-button:focus,
.custom-button.active,
.custom-button:hover {
cursor: default; /* 鼠标移入时显示箭头光标 */
background-color: inherit !important; /* 保持背景色 */
border-color: inherit !important; /* 保持边框色 */
color: #ddc323 !important;
......@@ -349,6 +442,7 @@ function adjustHeight(event) {
transition: color 0.2s ease;
}
}
.comment-content {
:deep(.el-tabs__item) {
margin-right: 30px;
......@@ -359,6 +453,7 @@ function adjustHeight(event) {
margin-bottom: 150px;
.title {
display: flex;
font-size: 18px;
margin-bottom: 5px;
}
......@@ -392,7 +487,9 @@ function adjustHeight(event) {
border-radius: 50%;
background-color: #42b983;
margin-right: 20px;
.bgSetting();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.right-box {
......@@ -471,6 +568,7 @@ function adjustHeight(event) {
}
.song-info-value {
display: flex;
width: 80%;
}
}
......
src/components/Pagination.vue 0 → 100644
+ 90
− 0
View file @ 01c2cfcc
<script setup>
const props = defineProps({
total: {
type: Number,
required: true
},
pageSize: {
type: Number,
required: true
},
currentPage: {
type: Number,
required: true
},
background: {
type: Boolean,
default: false
},
layout: {
type: String,
default: 'prev, pager, next'
}
})
const emit = defineEmits(['size-change', 'current-change'])
</script>
<template>
<div class="box">
<el-pagination
@size-change="emit('size-change', $event)"
@current-change="emit('current-change', $event)"
:current-page="currentPage"
:page-size="pageSize"
:background="background"
:layout="layout"
:total="total"
/>
</div>
</template>
<style lang="less" scoped>
.box {
display: flex;
justify-content: center;
padding: 30px 0;
}
.el-pagination {
:deep(button) {
background-color: rgba(255, 255, 255, 0.12) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
transition: 0.3s;
color: white !important;
&:hover:not(button:disabled) {
background-color: rgba(255, 255, 255, 0.08) !important;
}
}
:deep(button:disabled) {
cursor: auto !important;
}
}
:deep(.el-pager) {
.is-active.number {
background-color: rgb(236,65,65) !important;
color: white;
}
.more {
background-color: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgb(210,210,210) !important;
}
.number {
background-color: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgb(210,210,210) !important;
transition: 0.3s;
&:hover:not(.is-active) {
background-color: rgba(220, 55, 55, 0.5) !important;
color: white;
}
}
}
</style>
src/store/theme.js
+ 1
− 1
View file @ 01c2cfcc
import { defineStore } from 'pinia'
import ColorThief from 'colorthief'
import { toggleImg } from '../utils'
import { toggleImg } from '@/utils'
export const useTheme = defineStore('themeId', {
state() {
......
src/views/HomePage.vue
+ 240
− 204
View file @ 01c2cfcc
......@@ -6,9 +6,11 @@ import {PLAY, PAUSE, NORMAL_MODE, LOOP_MODE, RANDOM_MODE} from "../assets/base64
import {ElLoading} from "element-plus";
import {parseLrc} from "../utils/parseLyrics";
import Header from "../components/Header.vue";
import Comment from "../components/Comment.vue";
const current_view = ref();
const album_selected = ref(false);
const show_comment = ref(false);
const selectAlbum = () => {
console.log("selectAlbum");
......@@ -208,169 +210,176 @@ onMounted(() => {
updateSongInfo();
})
const toggleComment = () => {
show_comment.value = !show_comment.value;
}
</script>
<template>
<body>
<Header />
<main @click="unSelectAlbum">
<nav class="main-menu">
<div>
<div class="user-info">
<router-link to="/profile">
<img src="../assets/pictures/avatar.png" alt="user"/>
</router-link>
<p>CosSky</p>
</div>
<ul>
<li class="nav-item">
<a href="#" @click="current_view = 'discover'">
<i class="fa fa-compact-disc nav-icon"></i>
<span class="nav-text">Discover</span>
</a>
</li>
<li class="nav-item">
<a href="#" @click="current_view = 'playlist'">
<i class="fa fa-circle-play nav-icon"></i>
<span class="nav-text">Playlist</span>
</a>
</li>
<li class="nav-item">
<a href="#settings">
<i class="fa fa-gear nav-icon"></i>
<span class="nav-text">Settings</span>
</a>
</li>
</ul>
</div>
<ul>
<li class="nav-item">
<a href="#/login">
<i class="fa fa-right-from-bracket nav-icon"></i>
<span class="nav-text">Logout</span>
</a>
</li>
</ul>
</nav>
<section class="content">
<div class="left-content">
<div class="albums" v-if="!album_selected">
<h1 style="margin: 20px 0 14px 0;" v-if="!album_selected">Playlists</h1>
<div style="display: flex; flex-direction: row">
<el-container class="album-container" style="margin-right: 20px">
<el-card class="album">
<div class="album-frame">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path></svg>
</div>
<div>
<h2>New Playlist</h2>
</div>
</el-card>
</el-container>
<el-container class="album-container containers" >
<el-card @click.stop="selectAlbum" class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/1.jpg" alt="" />
</div>
<div>
<h2>中古 | 凯尔特民谣</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/4.png" alt="" />
</div>
<div>
<h2>Xeuphoria Collection 1</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/2.jpg" alt="" />
</div>
<div>
<h2>花と水飴、最終電車</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/3.jpg" alt="" />
</div>
<div>
<h2>だから僕は音楽を辞めた</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/5.jpg" alt="" />
</div>
<div>
<h2 style="max-width: 120px; overflow-wrap: break-word">testtesttesttesttesttesttesttesttest</h2>
<p>CosSky</p>
</div>
</el-card>
</el-container>
</div>
</div>
<div class="album-details" v-if="album_selected" style="
<body>
<Header />
<main @click="unSelectAlbum">
<nav class="main-menu">
<div>
<div class="user-info">
<router-link to="/profile">
<img src="../assets/pictures/avatar.png" alt="user"/>
</router-link>
<p>CosSky</p>
</div>
<ul>
<li class="nav-item">
<a href="#" @click="current_view = 'discover'">
<i class="fa fa-compact-disc nav-icon"></i>
<span class="nav-text">Discover</span>
</a>
</li>
<li class="nav-item">
<a href="#" @click="current_view = 'playlist'">
<i class="fa fa-circle-play nav-icon"></i>
<span class="nav-text">Playlist</span>
</a>
</li>
<li class="nav-item">
<a href="#settings">
<i class="fa fa-gear nav-icon"></i>
<span class="nav-text">Settings</span>
</a>
</li>
</ul>
</div>
<ul>
<li class="nav-item">
<a href="#/login">
<i class="fa fa-right-from-bracket nav-icon"></i>
<span class="nav-text">Logout</span>
</a>
</li>
</ul>
</nav>
<section class="content">
<div class="left-content">
<el-container v-if="show_comment" class="playlist-container" style="overflow: auto; height: 600px">
<Comment songId = "1" userId = "1"/>
</el-container>
<div class="albums" v-if="!show_comment">
<h1 style="margin: 20px 0 14px 0;" v-if="!album_selected">Playlists</h1>
<div style="display: flex; flex-direction: row">
<el-container class="album-container" style="margin-right: 20px">
<el-card class="album">
<div class="album-frame">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M480 480V128a32 32 0 0 1 64 0v352h352a32 32 0 1 1 0 64H544v352a32 32 0 1 1-64 0V544H128a32 32 0 0 1 0-64z"></path></svg>
</div>
<div>
<h2>New Playlist</h2>
</div>
</el-card>
</el-container>
<el-container class="album-container containers" >
<el-card @click.stop="selectAlbum" class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/1.jpg" alt="" />
</div>
<div>
<h2>中古 | 凯尔特民谣</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/4.png" alt="" />
</div>
<div>
<h2>Xeuphoria Collection 1</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/2.jpg" alt="" />
</div>
<div>
<h2>花と水飴、最終電車</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/3.jpg" alt="" />
</div>
<div>
<h2>だから僕は音楽を辞めた</h2>
<p>CosSky</p>
</div>
</el-card>
<el-card class="album">
<div class="album-frame">
<img src="../assets/pictures/playlists/5.jpg" alt="" />
</div>
<div>
<h2 style="max-width: 120px; overflow-wrap: break-word">testtesttesttesttesttesttesttesttest</h2>
<p>CosSky</p>
</div>
</el-card>
</el-container>
</div>
</div>
<div class="album-details" v-if="album_selected" style="
display: grid;
grid-template-columns: 30% 70%;
width: 750px;
height: 200px;
">
<img src="../assets/pictures/playlists/1.jpg" alt="Album Cover" style="width: 100%; height: 100%"/>
<div class="details-text">
<h2 style="text-align: left; margin-left: 20px">Hi</h2>
<p style="text-align: left; margin-left: 20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsa, praesentium. Aliquid blanditiis excepturi, expedita fugiat illum iure labore nulla placeat quasi quidem ratione rem reprehenderit tempore temporibus voluptate voluptatum?</p>
</div>
</div>
</div>
<div class="right-content">
<div class="music-player music-info">
<a href="#play" style="margin: 10px 0 0 0;">
<div class="album-cover">
<img src="../assets/pictures/songs/2.jpg" id="rotatingImage" alt="" />
<span class="point"></span>
</div>
</a>
<h2>ウミユリ海底譚</h2>
<p>n-buna</p>
<audio id="song">
<source src="../assets/audio/2.mp3" type="audio/mpeg" />
</audio>
</div>
<div class="current-playlist" style="margin-top: 10px">
<el-container class="playlist-container" style="height: 64px">
<div class="playlist-item" style="display: flex; flex-direction: row">
<img src="../assets/icons/add.png" alt="" style=""/>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 10px">
<p class="playlist-container-desc" style="
<img src="../assets/pictures/playlists/1.jpg" alt="Album Cover" style="width: 100%; height: 100%"/>
<div class="details-text">
<h2 style="text-align: left; margin-left: 20px">Hi</h2>
<p style="text-align: left; margin-left: 20px">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ipsa, praesentium. Aliquid blanditiis excepturi, expedita fugiat illum iure labore nulla placeat quasi quidem ratione rem reprehenderit tempore temporibus voluptate voluptatum?</p>
</div>
</div>
</div>
<div class="right-content">
<div class="music-player music-info">
<a href="#play" style="margin: 10px 0 0 0;">
<div class="album-cover">
<img src="../assets/pictures/songs/2.jpg" id="rotatingImage" alt="" />
<span class="point"></span>
</div>
</a>
<h2>ウミユリ海底譚</h2>
<p>n-buna</p>
<audio id="song">
<source src="../assets/audio/2.mp3" type="audio/mpeg" />
</audio>
</div>
<div class="current-playlist" style="margin-top: 10px">
<el-container class="playlist-container" style="height: 64px">
<div class="playlist-item" style="display: flex; flex-direction: row">
<img src="../assets/icons/add.png" alt="" style=""/>
<div style="display: flex; flex-direction: column; align-items: center; margin-left: 10px">
<p class="playlist-container-desc" style="
color: white;
font-size: 16px;
text-align: left;
margin-top: 16px;
">New Song</p>
</div>
</div>
</el-container>
<el-container class="playlist-container" style="overflow: auto; height: 256px">
<div v-for="_ in 10" class="playlist-item" style="display: flex; flex-direction: row">
<div>
<img src="../assets/pictures/bg1.jpg" alt=""/>
</div>
<div style="display: flex; flex-direction: column; margin-left: 10px">
<p class="playlist-container-desc" style="
</div>
</div>
</el-container>
<el-container class="playlist-container" style="overflow: auto; height: 256px">
<div v-for="_ in 10" class="playlist-item" style="display: flex; flex-direction: row">
<div>
<img src="../assets/pictures/bg1.jpg" alt=""/>
</div>
<div style="display: flex; flex-direction: column; margin-left: 10px">
<p class="playlist-container-desc" style="
color: white;
font-size: 16px;
text-align: left;
......@@ -378,7 +387,7 @@ onMounted(() => {
width: 240px;
height: 24px
">Unknown Song</p>
<p class="playlist-container-desc" style="
<p class="playlist-container-desc" style="
color: white;
font-size: 12px;
text-align: left;
......@@ -386,21 +395,21 @@ onMounted(() => {
width: 240px;
height: 18px
">testtesttesttesttesttesttesttesttesttest</p>
</div>
</div>
</el-container>
</div>
</div>
</section>
</main>
<footer>
<div class="bottom-description bottom-component" style="display: flex; flex-direction: row; justify-content: center;">
<div>
<a href="#play">
<div>
<img src="../assets/pictures/songs/2.jpg" alt=""
style="
</div>
</div>
</el-container>
</div>
</div>
</section>
</main>
<footer>
<div class="bottom-description bottom-component" style="display: flex; flex-direction: row; justify-content: center;">
<div>
<a href="#play">
<div>
<img src="../assets/pictures/songs/2.jpg" alt=""
style="
width: 60px;
margin: 0 0 0 10px;
border-radius: 5%;
......@@ -408,45 +417,56 @@ onMounted(() => {
max-width: 120px;
box-shadow: 0 10px 60px rgba(200, 187, 255);
"/>
</div>
</a>
</div>
<div style="display: flex; flex-direction: column; justify-content: center;">
<p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">ウミユリ海底譚</p>
<p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">n-buna</p>
</div>
</div>
<el-card class="bottom-controller bottom-component" style="
</div>
</a>
</div>
<div style="display: flex; flex-direction: column; justify-content: center;">
<p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">ウミユリ海底譚</p>
<p style="font-family: Consolas, serif; color: white; font-size: 16px; text-align: left; margin-left: 5px">n-buna</p>
</div>
</div>
<div class="comment-icon bottom-component" style="
position: absolute;
left: 15%;
transform: translateX(-50%);
color: white;
cursor: pointer;
">
<img src="../assets/icons/comment/comment.png" alt="" style="width: 24px; height: 24px;"
@click="toggleComment">
</div>
<el-card class="bottom-controller bottom-component" style="
position: absolute;
left: 50%;
transform: translateX(-50%);
">
<div class="controls" style="display: flex; flex-direction: row; margin: 10px 0 0 0">
<button class="share-btn" style="margin: 0">
<img src="../assets/icons/controller/share.png" alt="" style="width: 60%">
</button>
<button class="backward" style="margin: 0 10px 0 10px">
<img src="../assets/icons/controller/last.png" alt="" style="width: 60%">
</button>
<button class="play-pause-btn" style="margin: 0 10px 0 10px">
<img id="controlIcon" src="../assets/icons/controller/play.png" alt="" style="width: 60%">
</button>
<button class="forward" style="margin: 0 10px 0 10px">
<img src="../assets/icons/controller/next.png" alt="" style="width: 60%">
</button>
<button class="play-mode-btn" style="margin: 0">
<img id="playModeIcon" src="../assets/icons/controller/normal.png" alt="" style="width: 60%">
</button>
</div>
<input type="range" value="0" id="progress" style="margin: 0 0 10px 0; width: 500px"/>
</el-card>
<el-card class="bottom-settings bottom-component">
<h1></h1>
</el-card>
</footer>
</body>
<div class="controls" style="display: flex; flex-direction: row; margin: 10px 0 0 0">
<button class="share-btn" style="margin: 0">
<img src="../assets/icons/controller/share.png" alt="" style="width: 60%">
</button>
<button class="backward" style="margin: 0 10px 0 10px">
<img src="../assets/icons/controller/last.png" alt="" style="width: 60%">
</button>
<button class="play-pause-btn" style="margin: 0 10px 0 10px">
<img id="controlIcon" src="../assets/icons/controller/play.png" alt="" style="width: 60%">
</button>
<button class="forward" style="margin: 0 10px 0 10px">
<img src="../assets/icons/controller/next.png" alt="" style="width: 60%">
</button>
<button class="play-mode-btn" style="margin: 0">
<img id="playModeIcon" src="../assets/icons/controller/normal.png" alt="" style="width: 60%">
</button>
</div>
<input type="range" value="0" id="progress" style="margin: 0 0 10px 0; width: 500px"/>
</el-card>
<el-card class="bottom-settings bottom-component">
<h1></h1>
</el-card>
</footer>
</body>
</template>
<style scoped>
......@@ -504,7 +524,7 @@ main {
height: 600px;
width: 95%;
margin: 20px 0 0 0;
background: rgba(16, 21, 61, 0.6);
/*background: rgba(16, 21, 61, 0.6);*/
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
......@@ -522,7 +542,7 @@ footer {
height: 75px;
width: 100%;
margin: 20px 0 0 0;
background: rgba(16, 21, 61, 0.8);
/*background: rgba(16, 21, 61, 0.8);*/
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.5);
......@@ -1172,4 +1192,20 @@ footer {
}
}
</style>
\ No newline at end of file
.comment-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.comment-icon:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(-50%) scale(1.1);
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment