add suno page

2025-11-14 21:23:44 +08:00 · 2024-07-17 18:58:09 +08:00
parent 37368fe13f
commit b248560ba2
20 changed files with 677 additions and 10 deletions
--- a/web/src/assets/css/suno.styl
+++ b/web/src/assets/css/suno.styl
@@ -0,0 +1,180 @@
+.page-suno {
+  display flex
+  height 100%
+  background-color #0E0808
+  overflow auto
+
+  .left-bar {
+    max-width 340px
+    min-width 340px
+    padding 20px 30px
+
+    .bar-top {
+      display flex
+      flex-flow row
+      justify-content: space-between;
+    }
+
+    .params {
+      padding 20px 0
+      color rgb(250 247 245)
+      position relative
+
+      .pure-music {
+        position absolute
+        right 0
+        top 24px
+        display flex
+
+        .text {
+          margin-top 5px
+          margin-left 5px
+        }
+      }
+
+      .label {
+        padding 10px 0
+
+        .text {
+          margin-right 10px
+        }
+      }
+      .item {
+        margin-bottom: 20px
+
+        .create-btn {
+          margin 20px 0
+          background-image url("~@/assets/img/suno-create-bg.svg")
+          background-size: cover;
+          background-position: 50% 50%;
+          transition: background 1s ease-in-out;
+          overflow: hidden;
+          font-size 16px
+          width 100%
+          padding 16px
+          border-radius 25px
+          border none
+          cursor pointer
+
+          img {
+            position relative
+            top 3px
+            margin-right 5px
+          }
+
+          &:hover {
+            opacity: 0.9;
+          }
+        }
+      }
+    }
+  }
+  .right-box {
+    width 100%
+    color rgb(250 247 245)
+
+    .list-box {
+      padding 0 0 0 20px
+      .item {
+        display flex
+        flex-flow row
+        padding 5px 0
+        cursor pointer
+
+        &:hover {
+          background-color #1C1616
+        }
+
+        .left {
+          .container {
+            width 60px
+            height 90px
+            position relative
+
+            .el-image {
+              height 90px
+              border-radius 5px
+            }
+
+            .duration {
+              position absolute
+              bottom 0
+              right 0
+              background-color rgba(14,8,8,.7)
+              padding 0 2px
+              font-family 'Input Sans'
+              font-size 14px
+              font-weight 700
+              border-radius .125rem
+            }
+          }
+        }
+
+        .center {
+          width 100%
+          //border 1px solid saddlebrown
+          display flex
+          justify-content center
+          align-items flex-start
+          flex-flow column
+          height 90px
+          padding 0 20px
+
+          .title {
+            padding 6px 0
+            font-size 16px
+            font-weight 700
+
+            .model {
+              color #E2E8F0
+              background-color #1C1616
+              border 1px solid #8f8f8f
+              font-weight normal
+              font-size 14px
+              padding 1px 3px
+              border-radius 5px
+              margin-left 10px
+            }
+          }
+
+          .tags {
+            font-size 14px
+            color #d1d1d1
+            padding 3px 0
+          }
+        }
+
+        .right {
+          width 200px;
+          font-size 14px
+          padding 0 15px
+
+          .tools {
+            display flex
+            justify-content left
+            align-items center
+            flex-flow row
+            height 90px
+
+            .btn {
+              background-color #363030
+              border none
+              border-radius 5px
+              padding 5px 10px
+              cursor pointer
+
+              &:hover {
+                background-color #5F5958
+              }
+            }
+          }
+        }
+      }
+
+      .item.active {
+        background-color #2A2525
+      }
+    }
+  }
+
+}