mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-13 04:33:42 +08:00
426 lines
9.3 KiB
Stylus
426 lines
9.3 KiB
Stylus
.page-suno {
|
||
display flex
|
||
height 100%
|
||
// background-color #0E0808
|
||
overflow auto
|
||
.item-group{
|
||
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
|
||
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
|
||
::-webkit-scrollbar {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
.left-bar {
|
||
max-width 340px
|
||
min-width 340px
|
||
padding 20px 30px
|
||
|
||
.bar-top {
|
||
display flex
|
||
flex-flow row
|
||
justify-content: space-between;
|
||
align-items center
|
||
|
||
.upload-music {
|
||
.iconfont {
|
||
margin-right 5px
|
||
font-size 14px
|
||
}
|
||
}
|
||
}
|
||
|
||
.params {
|
||
padding 20px 0
|
||
color: var(--text-theme-color);
|
||
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
|
||
}
|
||
.el-icon {
|
||
top 2px
|
||
}
|
||
}
|
||
.item {
|
||
margin-bottom: 20px
|
||
position relative
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
|
||
.song {
|
||
display flex
|
||
padding 10px
|
||
background-color #252020
|
||
border-radius 10px
|
||
margin-bottom 10px
|
||
font-size 14px
|
||
position relative
|
||
|
||
.el-image {
|
||
width 50px
|
||
height 50px
|
||
border-radius 10px
|
||
}
|
||
.icon-mp3 {
|
||
font-size 42px
|
||
color #A85295
|
||
}
|
||
.title {
|
||
display flex
|
||
margin-left 10px
|
||
align-items center
|
||
}
|
||
|
||
.el-button--info {
|
||
position absolute
|
||
right 20px
|
||
top 20px
|
||
}
|
||
}
|
||
|
||
.extend-secs {
|
||
padding 10px 0
|
||
font-size 14px
|
||
|
||
input {
|
||
width 50px
|
||
text-align center
|
||
padding 8px 10px
|
||
font-size 14px
|
||
background none
|
||
border 1px solid #8f8f8f
|
||
margin 0 10px
|
||
border-radius 10px
|
||
outline: none;
|
||
transition: border-color 0.5s ease, box-shadow 0.5s ease;
|
||
&:focus {
|
||
border-color: #0F7A71;
|
||
box-shadow: 0 0 5px #0F7A71;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-lyric {
|
||
position absolute
|
||
left 10px
|
||
bottom 10px
|
||
font-size 12px
|
||
padding 2px 5px
|
||
background-color var(--sm-btn-bg)
|
||
color: #fff
|
||
}
|
||
}
|
||
|
||
.tag-select {
|
||
position relative
|
||
overflow-x auto
|
||
overflow-y hidden
|
||
scrollbar-width: auto !important; /* 恢复滚动条（Firefox） */
|
||
-ms-overflow-style: auto !important; /* 恢复滚动条（IE、Edge） */
|
||
width 100%
|
||
|
||
::-webkit-scrollbar {
|
||
display: block !important;
|
||
}
|
||
|
||
.inner {
|
||
display flex
|
||
flex-flow row
|
||
padding-bottom 10px
|
||
|
||
.tag {
|
||
margin-right 10px
|
||
word-break keep-all
|
||
background: var(--card-bg);
|
||
color:var(--theme-text-color-primary);
|
||
opacity 0.7
|
||
border-radius 8px
|
||
padding 3px 6px
|
||
cursor pointer
|
||
font-size 13px
|
||
&:hover{
|
||
color:var( --el-color-primary)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right-box {
|
||
width 100%
|
||
color rgb(250 247 245)
|
||
overflow auto
|
||
background: var(--chat-bg)
|
||
|
||
|
||
.list-box {
|
||
padding 20px
|
||
.item {
|
||
display flex
|
||
flex-flow row
|
||
padding 5px 0
|
||
cursor pointer
|
||
margin-bottom 10px
|
||
|
||
&:hover {
|
||
background: rgba(188,149,236,0.08)
|
||
}
|
||
|
||
.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 3px
|
||
font-family 'Input Sans'
|
||
font-size 14px
|
||
font-weight 700
|
||
border-radius .125rem
|
||
}
|
||
|
||
.play {
|
||
position absolute
|
||
width: 56px;
|
||
height 100%
|
||
top: 0;
|
||
left: 50%;
|
||
border none
|
||
border-radius 5px
|
||
background rgba(100, 100, 100, 0.3)
|
||
cursor pointer
|
||
color #ffffff
|
||
opacity 0
|
||
transform: translate(-50%, 0px);
|
||
transition opacity 0.3s ease 0s
|
||
display flex
|
||
justify-content center
|
||
align-items center
|
||
}
|
||
|
||
&:hover {
|
||
.play {
|
||
opacity 1
|
||
//display block
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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
|
||
|
||
a {
|
||
color var( --a-link-color)
|
||
&:hover {
|
||
text-decoration underline
|
||
}
|
||
}
|
||
|
||
.model {
|
||
color #8f8f8f
|
||
// background-color #1C1616
|
||
// border 1px solid #8f8f8f
|
||
font-weight normal
|
||
font-size 12px
|
||
padding 1px 3px
|
||
border-radius 5px
|
||
margin-left 10px
|
||
|
||
.iconfont {
|
||
font-size 12px
|
||
}
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
font-size 14px
|
||
color var(--text-fb)
|
||
padding 3px 0
|
||
}
|
||
}
|
||
|
||
.right {
|
||
min-width 350px;
|
||
font-size 14px
|
||
padding 0 0 0 15px
|
||
display flex
|
||
justify-content right
|
||
|
||
.tools {
|
||
display flex
|
||
justify-content right
|
||
align-items center
|
||
flex-flow row
|
||
height 90px
|
||
|
||
.btn-publish {
|
||
padding 2px 10px
|
||
|
||
// .text {
|
||
// margin-right 10px
|
||
// }
|
||
}
|
||
|
||
.btn-icon {
|
||
background none
|
||
padding 6px
|
||
transition background 0.6s ease 0s
|
||
color #919191
|
||
|
||
&:hover {
|
||
// background #5f5958
|
||
// color #e1e1e1
|
||
color:var(--el-color-primary)
|
||
}
|
||
|
||
.downloading {
|
||
width 16px
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.task {
|
||
height 100px
|
||
background-color #2A2525
|
||
display flex
|
||
margin-bottom 10px
|
||
.left {
|
||
display flex
|
||
justify-content left
|
||
align-items center
|
||
padding 20px
|
||
width 320px
|
||
.title {
|
||
font-size 14px
|
||
color #e1e1e1
|
||
white-space: nowrap; /* 防止文字换行 */
|
||
overflow: hidden; /* 隐藏溢出的内容 */
|
||
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
|
||
}
|
||
}
|
||
.center {
|
||
display flex
|
||
width 100%
|
||
justify-content center
|
||
.failed {
|
||
display flex
|
||
align-items center
|
||
color #E4696B
|
||
font-size 14px
|
||
}
|
||
}
|
||
.right {
|
||
display flex
|
||
width 100px
|
||
justify-content center
|
||
align-items center
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
margin-top 20px
|
||
display flex
|
||
justify-content center
|
||
}
|
||
.music-player {
|
||
width 100%
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50px;
|
||
padding 20px 0
|
||
}
|
||
}
|
||
|
||
|
||
.btn {
|
||
margin-right 10px
|
||
color: var((--theme-text-color-primary))
|
||
border none
|
||
border-radius 5px
|
||
padding 5px 10px
|
||
cursor pointer
|
||
background: var(--btn-bg)
|
||
|
||
|
||
&:hover {
|
||
opacity :0.8
|
||
}
|
||
}
|
||
}
|
||
.submit-btn {
|
||
display flex
|
||
align-items: center
|
||
margin: 20px 0
|
||
justify-content: center;
|
||
.el-button {
|
||
width 200px
|
||
}
|
||
|
||
} |