diff --git a/10.js b/10.js
new file mode 100644
index 0000000..33efdc6
--- /dev/null
+++ b/10.js
@@ -0,0 +1,83 @@
+{
+ "code": 200,
+ "message": "创建成功, 请等待生成完成",
+ "data": {
+ "metadataid": "y1WUKWrMR9chXjTr7tUgdcOITk8phBJU0Q4RxjAwODI~",
+ "metadata": {
+ "tags": "bass,guitar,pop,electro,electronic,rock,drum,heavy metal,beat,hard rock,catchy",
+ "prompt": "[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n\n[Verse 2]\n大家互相帮助\n为了共同目标\n日夜不知疲倦\n梦想如此燃烧\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n\n[Verse]\n无论风雨多大\n我们永不退缩\n坚定彼此信任\n为前途拼搏\n\n[Verse 2]\n困境中有依靠\n大家并肩奋斗\n希望就在前方\n工会帮你圆梦\n\n[Chorus]\n工会是我们家\n温暖又充满爱\n一起努力奋斗\n未来更美好\n[Verse]\n清晨的阳光照\n我们走到一起\n手牵手心连心\n工会的力量聚\n",
+ "gpt_description_prompt": "",
+ "audio_prompt_id": null,
+ "history": null,
+ "concat_history": null,
+ "type": "gen",
+ "duration": null,
+ "refund_credits": null,
+ "stream": true,
+ "infill": null,
+ "has_vocal": null,
+ "is_audio_upload_tos_accepted": null,
+ "error_type": null,
+ "error_message": null
+ },
+ "list": [
+ {
+ "id": "-j0HAIqpsMl9fMLIEwmF4KIkVpIuEg0zM2Iy",
+ "sid": "a6290e8b-3f3b-4d6c-97d9-4a29b1624a21",
+ "uid": 10002,
+ "video_url": "https://suno.ansnid.com/api/details/video?id=0WYldx0t3yoAmCrraqfqV1LyzEfJ2PgyYTMw",
+ "audio_url": "https://suno.ansnid.com/api/details/play?id=0WYldx0t3yoAmCrraqfqV1LyzEfJ2PgyYTMw",
+ "image_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGjY2l_57JF1f36NxsgRvsF4WPaXVDDwYO5yQwN5NDQyOQ~~",
+ "image_large_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGjY2l_57JF1f36NxsgRvsF4WPaXVDDwYO5yQwN5NDQyOQ~~",
+ "is_video_pending": 0,
+ "major_model_version": "v3",
+ "model_name": "chirp-v3",
+ "metadataid": "42iKU_T0nBBguTk3msyWKkxuxd0DHTBhYWM~",
+ "is_liked": 0,
+ "user_id": "a02ec653-e033-40d0-99f4-e19f62aa67a7",
+ "display_name": "SalsaInstrumentals248",
+ "handle": "salsainstrumentals248",
+ "is_handle_updated": 0,
+ "avatar_image_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGvUvCGHpt5oNTyM1Nwws44-UqWPEyOpLewjBmkLQOaVto5btLkHVTXbv066ilcr5nMBmbsIjkKlE7gjNuiLni516C4eUzQ0Mjk~",
+ "metadata": [],
+ "is_trashed": 0,
+ "reaction": null,
+ "created_at": "2024-07-18 06:38:12",
+ "status": "submitted",
+ "title": "工会的歌曲",
+ "play_count": 0,
+ "upvote_count": 0,
+ "is_public": 0
+ },
+ {
+ "id": "eWtLtIc1wlwhEwgKe9foQstvV8_iVoI2NDE5",
+ "sid": "4978ff05-9f66-47c5-8a4b-b5f8242e621c",
+ "uid": 10002,
+ "video_url": "https://suno.ansnid.com/api/details/video?id=D69uv2C77MjYBp-ZDiwq7_-dm_gDVcwzMjU0",
+ "audio_url": "https://suno.ansnid.com/api/details/play?id=X2YChd3odKK_NFQ_zXqrDU0Y371H8i4xYTA0",
+ "image_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGjY2l_57JF1f36NxsgRvsF4WPaXVDDwYO5yQwN5NDQyOQ~~",
+ "image_large_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGjY2l_57JF1f36NxsgRvsF4WPaXVDDwYO5yQwN5NDQyOQ~~",
+ "is_video_pending": 0,
+ "major_model_version": "v3",
+ "model_name": "chirp-v3",
+ "metadataid": "7noKnrfbl4I7BoUQ5NOBcr34zrrRlmEyMzg~",
+ "is_liked": 0,
+ "user_id": "a02ec653-e033-40d0-99f4-e19f62aa67a7",
+ "display_name": "SalsaInstrumentals248",
+ "handle": "salsainstrumentals248",
+ "is_handle_updated": 0,
+ "avatar_image_url": "https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xGvUvCGHpt5oNTyM1Nwws44-UqWPEyOpLewjBmkLQOaVto5btLkHVTXbv066ilcr5nMBmbsIjkKlE7gjNuiLni516C4eUzQ0Mjk~",
+ "metadata": [],
+ "is_trashed": 0,
+ "reaction": null,
+ "created_at": "2024-07-18 06:38:12",
+ "status": "submitted",
+ "title": "工会的歌曲",
+ "play_count": 0,
+ "upvote_count": 0,
+ "is_public": 0
+ }
+ ],
+ "traceCount": 0
+ }
+}
\ No newline at end of file
diff --git a/dist.rar b/dist.rar
index d8872f7..54fa7da 100644
Binary files a/dist.rar and b/dist.rar differ
diff --git a/index.html b/index.html
index 99f583a..c643083 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
-
Vite App
+ SunoAI音乐创作工具
diff --git a/src/App.vue b/src/App.vue
index 7f314dc..d0d328d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
-
+
+
+

+

+

+
灵感模式
自定义模式
@@ -351,7 +503,7 @@ const formatTime = time => {
歌曲描述
-
+
@@ -359,13 +511,13 @@ const formatTime = time => {
-
+
纯音乐
-
+
@@ -376,7 +528,7 @@ const formatTime = time => {
音乐模型
-
+
@@ -384,7 +536,7 @@ const formatTime = time => {
-
+
@@ -395,7 +547,7 @@ const formatTime = time => {
纯音乐
-
+
@@ -407,7 +559,7 @@ const formatTime = time => {
歌词
-
+
@@ -426,15 +578,19 @@ const formatTime = time => {
-
-
+
+
+

+
{{ obj.prompt ? "AI优化歌词" : "生成歌词" }}
+
+
{{ obj.prompt.length }}/3000
音乐风格
-
+
@@ -442,10 +598,12 @@ const formatTime = time => {
-
+
-
{{ item }}
+
+ {{ item }}
+
@@ -453,7 +611,7 @@ const formatTime = time => {
歌曲名称
-
+
@@ -467,7 +625,7 @@ const formatTime = time => {
音乐模型
-
+
@@ -475,12 +633,27 @@ const formatTime = time => {
-
+
创作
+
+
+
+

+
微信用户
+
+
+ 退出登录
+
+
+

+
+
+
+
@@ -493,7 +666,7 @@ const formatTime = time => {
生成中...
![]()
-

+
@@ -503,13 +676,17 @@ const formatTime = time => {
{{ item.tags || item?.metadata?.tags }}
+
+

+

+
+
-
-
下载MP3
-
-
-
下载视频
-
+
@@ -521,26 +698,38 @@ const formatTime = time => {
-
+
+
选择要预览的歌曲。
-
-

-
-
-
-
{{ songInfo.title }}
-
{{ songInfo?.metadata?.tags }}
-
+
+
+

+
+
![]()
+
+
{{ songInfo.title }}
+
+
+

+

+
+
+
+
+
-
+
@@ -556,13 +745,13 @@ const formatTime = time => {
{{ formatTime(currentTime) }}
-
+
{{ formatTime(duration) }}
-
+
@@ -614,47 +803,130 @@ body {
.left-box {
width: 320px;
// height: calc(100vh - 69px);
- // overflow: auto;
+ height: 100vh;
+ overflow: auto;
padding: 10px;
background-color: #000;
+ background-image: url("./assets/img/left-bj.svg");
+ background: -webkit-linear-gradient(289.179008025811deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
+ background: -moz-linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
+ background: linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
border-right: 1px solid #252323;
- height: calc(100vh - 69px);
+ // height: calc(100vh - 69px);
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ .hemisphere-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 80px;
+ height: 83px;
+ }
+ .logo {
+ width: 138px;
+ height: 32px;
+ margin: 20px auto 44px;
+ }
+ .star {
+ z-index: -1;
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ width: 154px;
+ height: 158px;
+ left: 34px;
+ bottom: 63px;
+ }
+ .user-box {
+ display: flex;
+ align-items: center;
+ // padding: 4px;
+ padding-left: 10px;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ .user-img {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ }
+ .user-text {
+ color: #fff;
+ font-size: 14px;
+ padding-left: 7px;
+ }
+
+ .user-dot {
+ padding: 0 12px;
+ min-width: 32px;
+ height: 32px;
+ cursor: pointer;
+ border-radius: 6px;
+ .user-dot-icon {
+ width: 16px;
+ height: 16px;
+ }
+ }
+ }
+
.tab-box {
display: flex;
align-items: center;
- padding: 4px;
- border: 1px solid #adadad;
- border-radius: 23px;
+ padding: 0 5px;
+ height: 50px;
+ border: 1px solid rgba(255, 255, 255, 0.196078);
+ background: rgba(255, 255, 255, 0.0980392);
+ border-radius: 10px;
color: #adadad;
- margin-bottom: 18px;
+ margin-bottom: 24px;
.tab-item {
flex: 1;
- height: 34px;
cursor: pointer;
text-align: center;
- line-height: 34px;
+ font-size: 20px;
+ height: 40px;
+ line-height: 40px;
+ color: rgba(255, 255, 255, 0.8);
+ &:first-of-type {
+ margin-right: 5px;
+ }
&.sel {
color: #000;
- border-radius: 20px;
- background-color: #fbd38d;
+ background: -webkit-linear-gradient(344.577838681261deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ background: -moz-linear-gradient(105.422161318739deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ background: linear-gradient(105.422161318739deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ border: none;
+ border-radius: 10px;
}
}
}
.description {
- margin-bottom: 10px;
+ margin-bottom: 24px;
.title {
margin-bottom: 10px;
}
.description-input {
/deep/ .el-textarea__inner {
- box-shadow: 0 0 0 1px #252323 inset !important;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
+ background: rgba(255, 255, 255, 0.0980392);
+ border-radius: 10px;
+
+ color: #fff;
+ min-height: 180px !important;
+ // max-height: 300px;
+ padding: 16px 13px;
+ }
+ /deep/ .el-input__count {
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.498039215686275);
background: transparent;
}
- min-height: 31px;
- height: 94px;
+ // min-height: 31px;
+ min-height: 94px;
width: 100%;
color: #ffffffeb;
line-height: 1.5;
@@ -668,7 +940,7 @@ body {
.el-switch {
margin-right: 10px;
}
- margin-bottom: 10px;
+ margin-bottom: 24px !important;
}
.title-box {
@@ -676,12 +948,12 @@ body {
justify-content: space-between;
.title-left {
- font-size: 14px;
- color: #fff;
+ font-size: 16px;
+ color: rgba(255, 255, 255, 0.8);
.question-icon {
- width: 14px;
- height: 14px;
- margin-left: 3px;
+ width: 16px;
+ height: 16px;
+ margin-left: 10px;
cursor: pointer;
}
@@ -704,43 +976,50 @@ body {
}
.model {
+ margin-bottom: 24px;
.title {
margin-bottom: 10px;
}
/deep/ .el-select__wrapper {
- box-shadow: 0 0 0 1px #252323 inset !important;
- background: transparent;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
+ background: rgba(255, 255, 255, 0.0980392);
+ height: 40px;
+ line-height: 40px;
+ border-radius: 10px;
.el-select__selected-item {
color: #fff;
}
}
- /deep/ .el-popper {
- .el-select-dropdown.model-select {
- .el-select-dropdown__item {
- color: #606266;
- &.is-selected {
- color: #fff;
- }
- &.is-hovering {
- background: #232426 !important;
- }
- }
- }
- }
+ // /deep/ .el-popper {
+ // .el-select-dropdown.model-select {
+ // .el-select-dropdown__item {
+ // color: #606266;
+ // &.is-selected {
+ // color: #fff;
+ // }
+ // &.is-hovering {
+ // background: #232426 !important;
+ // }
+ // }
+ // }
+ // }
}
.creation-btn {
- color: #1a202c;
- font-size: 16px;
- font-weight: 700;
padding: 0 16px;
- background-color: #fbd38d;
- height: 44px;
- border-radius: 4px;
- margin-top: 24px;
cursor: pointer;
+ min-height: 44px;
+ height: 50px;
+ background: -webkit-linear-gradient(350.537677791974deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ background: -moz-linear-gradient(99.4623222080256deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ background: linear-gradient(99.4623222080256deg, rgba(254, 233, 125, 1) 0%, rgba(231, 194, 91, 1) 49%, rgba(254, 140, 125, 1) 100%);
+ border: none;
+ border-radius: 10px;
+ font-weight: 650;
+ font-size: 24px;
+ color: #000000;
}
.lyric {
@@ -771,6 +1050,9 @@ body {
.el-textarea__inner {
background: transparent;
box-shadow: none;
+ color: #fff;
+ min-height: 107px !important;
+ max-height: 300px;
}
.el-input__count {
@@ -778,8 +1060,22 @@ body {
}
}
padding-bottom: 5px;
- box-shadow: 0 0 0 1px #252323 inset !important;
- margin-bottom: 10px;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
+ // border: 1px solid rgba(255, 255, 255, 0.196078);
+ background: rgba(255, 255, 255, 0.0980392);
+
+ border-radius: 10px;
+ color: #adadad;
+ margin-bottom: 24px;
+
+ position: relative;
+ .numberwords {
+ position: absolute;
+ bottom: 6px;
+ right: 13px;
+ font-size: 13px;
+ color: rgba(255, 255, 255, 0.498039215686275);
+ }
}
}
@@ -790,42 +1086,86 @@ body {
background: transparent;
box-shadow: none;
min-height: 100px !important;
+ color: #fff;
+ max-height: 300px;
}
}
padding-bottom: 5px;
- box-shadow: 0 0 0 1px #252323 inset !important;
- margin-bottom: 10px;
+ // box-shadow: 0 0 0 1px #252323 inset !important;
+ // margin-bottom: 10px;
+ border: 1px solid rgba(255, 255, 255, 0.196078);
+ background: rgba(255, 255, 255, 0.0980392);
+ margin-bottom: 24px;
+ border-radius: 10px;
.style-list {
- width: 100%;
+ width: calc(100% - 12px);
display: flex;
overflow: auto;
white-space: pre;
+ margin: 0 6px;
+ box-sizing: border-box;
.style-item {
- color: rgb(250 247 245);
- font-size: 13px;
- padding: 8px 12px;
- background: #363030bf;
- margin-left: 4px;
- border-radius: 9999px;
+ padding: 0 8px;
+ margin-right: 6px;
+ font-size: 14px;
+ color: #000000;
cursor: pointer;
+ border-radius: 10px;
+ height: 26px;
+ line-height: 26px;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 10px;
+ margin-bottom: 8px;
+ }
+
+ &::-webkit-scrollbar {
+ width: 13px;
+ height: 13px;
+ background-color: rgba(255, 255, 255, 0.6);
+ border-radius: 10px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background-color: rgba(255, 255, 255, 1);
}
}
}
}
.random-btn {
- background: rgba(255, 255, 255, 0.16);
- width: 120px;
+ // background: rgba(255, 255, 255, 0.16);
+ // width: 120px;
margin-left: 5px;
cursor: pointer;
- padding: 0 12px;
- min-width: 32px;
- height: 32px;
- border-radius: 6px;
- color: #fff;
- font-size: 12px;
+ // padding: 0 12px;
+ // min-width: 32px;
+ // height: 32px;
+ // border-radius: 6px;
+ // color: #fff;
+ // font-size: 12px;
+ width: 109px;
+ height: 36px;
+ background-color: rgba(255, 255, 255, 0.6);
+ // border: none;
+ border-radius: 10px;
+ font-size: 16px;
+ color: #000000;
+ .loading-icon {
+ width: 20px;
+ height: 20px;
+ animation: rotate 1s linear infinite;
+ @keyframes rotate {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+ }
}
.name {
@@ -833,8 +1173,16 @@ body {
.name-input {
/deep/ .el-input__wrapper {
- background: none;
- box-shadow: 0 0 0 1px #252323 inset !important;
+ // background: none;
+ // box-shadow: 0 0 0 1px #252323 inset !important;
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
+ background: rgba(255, 255, 255, 0.0980392);
+ height: 40px;
+ border-radius: 10px;
+ }
+
+ /deep/ .el-input__inner {
+ color: #fff;
}
}
}
@@ -853,9 +1201,17 @@ body {
.right-box {
width: 294px;
- height: calc(100vh - 69px);
+ height: 100vh;
+ overflow: auto;
+ // height: calc(100vh - 69px);
overflow: auto;
position: relative;
+ flex-direction: column;
+ justify-content: space-between;
+ .song-info-box {
+ height: calc(100vh - 40px);
+ overflow: auto;
+ }
.nosong {
color: #a0aec0;
font-size: 14px;
@@ -881,22 +1237,64 @@ body {
font-size: 14px;
padding: 10px;
color: #fff;
+ overflow: auto;
.name {
line-height: 24px;
font-size: 14px;
+ word-wrap: break-word;
}
+
.desc {
white-space: pre-line;
line-height: 24px;
- margin-bottom: 40px;
+ // margin-bottom: 40px;
+ word-wrap: break-word;
+ }
+
+ .like-box {
+ padding: 0 10px;
+ width: fit-content;
+ height: 32px;
+ cursor: pointer;
+ margin-bottom: 20px;
+
+ &:hover {
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.08);
+ }
+
+ .like-icon {
+ width: 17px;
+ }
+ }
+ }
+
+ .register-box {
+ justify-content: space-between;
+ align-items: center;
+ height: 40px;
+ padding: 0 15px;
+ background-color: rgba(51, 51, 51, 1);
+
+ .register-text {
+ font-weight: 650;
+ font-size: 20px;
+ color: #8080ff;
+ }
+
+ .register-btn {
+ font-size: 13px;
+ cursor: pointer;
+ color: rgba(255, 255, 255, 0.498039215686275);
}
}
}
.middle-box {
border-right: 1px solid #252323;
- height: calc(100vh - 69px);
+ // height: calc(100vh - 69px);
+ height: 100vh;
overflow: auto;
.nodata {
color: #a0aec0;
@@ -985,9 +1383,11 @@ body {
line-height: 21px;
flex-direction: column;
justify-content: center;
+ margin-right: 10px;
.name {
font-weight: 700;
color: #fff;
+ word-break: break-word;
}
.desc {
overflow: hidden;
@@ -1002,18 +1402,36 @@ body {
}
}
+ .like-box {
+ padding: 0 10px;
+ height: 32px;
+ cursor: pointer;
+ &:hover {
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.08);
+ }
+
+ .like-icon {
+ width: 17px;
+ }
+ }
+
.dot {
- padding: 0 12px;
+ padding: 0 10px;
min-width: 32px;
height: 32px;
cursor: pointer;
- border-radius: 6px;
+ &:hover {
+ border-radius: 5px;
+ background: rgba(255, 255, 255, 0.08);
+ }
.dot-icon {
widows: 16px;
height: 16px;
}
}
+
/deep/ .dot-popover {
padding: 0;
@@ -1045,6 +1463,16 @@ body {
padding-left: 24px;
padding-right: 24px;
height: 68px;
+ display: flex;
+ justify-content: center;
+ position: fixed;
+ bottom: 10px;
+ width: 540px;
+ height: 96px;
+ border-radius: 10px;
+ z-index: 10;
+ left: 50%;
+ transform: translateX(-50%);
.base-side {
width: 450px;
}
@@ -1194,3 +1622,44 @@ body {
}
}
+
+
diff --git a/src/assets/img/default-icon.png b/src/assets/img/default-icon.png
deleted file mode 100644
index e976532..0000000
Binary files a/src/assets/img/default-icon.png and /dev/null differ
diff --git a/src/assets/img/hemisphere-icon.png b/src/assets/img/hemisphere-icon.png
new file mode 100644
index 0000000..6f3c4c8
Binary files /dev/null and b/src/assets/img/hemisphere-icon.png differ
diff --git a/src/assets/img/left-bj.svg b/src/assets/img/left-bj.svg
new file mode 100644
index 0000000..25f2dc1
--- /dev/null
+++ b/src/assets/img/left-bj.svg
@@ -0,0 +1,11 @@
+
+
\ No newline at end of file
diff --git a/src/assets/img/left-box-bj.png b/src/assets/img/left-box-bj.png
new file mode 100644
index 0000000..22c0382
Binary files /dev/null and b/src/assets/img/left-box-bj.png differ
diff --git a/src/assets/img/like-c-icon.png b/src/assets/img/like-c-icon.png
new file mode 100644
index 0000000..51d8473
Binary files /dev/null and b/src/assets/img/like-c-icon.png differ
diff --git a/src/assets/img/like-icon.png b/src/assets/img/like-icon.png
new file mode 100644
index 0000000..3333a9c
Binary files /dev/null and b/src/assets/img/like-icon.png differ
diff --git a/src/assets/img/loading-icon.svg b/src/assets/img/loading-icon.svg
new file mode 100644
index 0000000..f98dc2d
--- /dev/null
+++ b/src/assets/img/loading-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/img/logo-icon.png b/src/assets/img/logo-icon.png
new file mode 100644
index 0000000..7145423
Binary files /dev/null and b/src/assets/img/logo-icon.png differ
diff --git a/src/assets/img/question-icon.svg b/src/assets/img/question-icon.svg
index ef010d4..2c0d42c 100644
--- a/src/assets/img/question-icon.svg
+++ b/src/assets/img/question-icon.svg
@@ -1 +1,6 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/assets/img/star-icon.png b/src/assets/img/star-icon.png
new file mode 100644
index 0000000..965d964
Binary files /dev/null and b/src/assets/img/star-icon.png differ
diff --git a/src/assets/main.css b/src/assets/main.css
index eead539..fed1b63 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,44 +1,27 @@
-/* @import './base.css';
-
-#app {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- font-weight: normal;
-}
-
-a,
-.green {
- text-decoration: none;
- color: hsla(160, 100%, 37%, 1);
- transition: 0.4s;
- padding: 3px;
-}
-
-@media (hover: hover) {
- a:hover {
- background-color: hsla(160, 100%, 37%, 0.2);
- }
-}
-
-@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-} */
-
-
* {
padding: 0;
margin: 0;
box-sizing: border-box;
+ font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+}
+
+*::-webkit-scrollbar-track-piece {
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar {
+ width: 7px;
+ height: 7px;
+ background-color: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: hsla(220, 4%, 58%, 0.3);
+}
+
+body {
+ min-width: 1200px;
}
.flexflex {
diff --git a/src/utils/api.js b/src/utils/api.js
index 750b3ac..0808032 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -24,9 +24,29 @@ export const Generate = params => {
export const monitorMusic = params => {
return Http.post("/api/music/monitor", params)
}
+
// 获取音乐详情
export const getDetails = params => {
return Http.post("/api/details", params)
}
+// 歌词相关 - 创建歌词
+export const lyricsGenerateHttp = params => {
+ return Http.post("/api/lyrics/generate", params)
+}
+
+// 歌词相关 - 创建歌词
+export const lyricsMonitorHttp = params => {
+ return Http.post("/api/lyrics/monitor", params)
+}
+
+// 登录相关 - 退出登录
+export const quitLoginHttp = params => {
+ return Http.post("/api/login/quit", params)
+}
+
+// 音乐相关 - 点赞
+export const likeDetailsHttp = params => {
+ return Http.post("/api/details/like", params)
+}
diff --git a/src/utils/http.js b/src/utils/http.js
index ef8d946..77b6ff7 100644
--- a/src/utils/http.js
+++ b/src/utils/http.js
@@ -56,11 +56,11 @@ const post = (url, params) => {
// axios.post(url, QS.stringify(params)).then(res => {
axios.post(url, params).then(res => {
let data = res.data
- if (data.code == 401 && !process.server) goLogin()
+ // if (data.code == 401 && !process.server) goLogin()
resolve(data)
}).catch(err => {
if (err.data.code == 401) {
- goLogin()
+ // goLogin()
resolve(err.data);
} else reject(err.data)
})
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..1fd675d
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ devServer: {
+ hot: false,
+ liveReload: false,
+ },
+}