xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-29 14:34:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

视频页面整合完成

Browse Source
This commit is contained in:
GeekMaster
2025-07-17 18:05:19 +08:00
parent 1d6f0ab714
commit 149f598f6d
18 changed files with 2203 additions and 2016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
web/src/assets/css/keling.styl
View File

@@ -1,363 +0,0 @@
.page-keling
display flex
min-height 100vh
:deep(.el-form-item__label)
color var(--text-theme-color)
.grid-content
// background-color #383838
background var(--card-bg)
border-radius 8px
padding 8px 14px
display flex
cursor pointer
margin-bottom 10px
// border 1px solid #383838
border 1px solid var(--chat-bg)
&:hover
border 1px solid var(--theme-border-hover)
.icon
width 20px
height 20px
margin-bottom 5px
.texts
margin-left 5px
margin-top 2px
color var(--text-theme-color)
.param-line.pt
padding-top 5px
padding-bottom 5px
.grid-content.active
// color #47fff1
// background-color #585858
border 1px solid var(--theme-border-hover)
.h-20
height 4rem !important
.main-content
padding-right 1.5rem
padding-left 1.5rem
padding-bottom 1rem
flex 1
background var(--chat-bg)
// width: 100%;
// padding 0 10px 10px 10px
color var(--text-theme-color)
overflow-x hidden
.camera-control
padding 10px
border-radius 4px
background var(--card-bg)
:deep(.el-form-item:last-child)
margin-bottom 0 !important
.title-tabs
:deep(.el-tabs__item.is-active)
color var(--theme-textcolor-normal)
font-size 18px
:deep(.el-tabs__item)
color var(--text-theme-color)
font-size 18px
.el-tabs
--el-tabs-header-height 55px
.el-tabs__item
color var(--text-theme-color)
font-size 18px
.el-tabs__item.is-active, .title-tabs .el-tabs__item.is-active
.title-tabs .el-tabs__active-bar
background-color var(--theme-textcolor-normal)
:deep(.el-textarea)
--el-input-focus-border-color var(--el-color-primary)
:deep(.el-textarea__inner)
background transparent
color var(--text-theme-color)
.el-input__wrapper
background transparent
padding 5px
.text
margin-bottom 10px
color #6b778c
font-size 15px
.param-line.pt
padding-top 5px
padding-bottom 5px
.form-item-inner
display flex
align-items center
.el-icon
margin-left 10px
.el-form-item__label
color var(--text-theme-color)
// 图片上传样式
.img-inline
display flex
gap 20px
align-items center
.img-uploader
text-align center
:deep(.el-upload)
border 1px dashed var(--el-border-color)
border-radius 6px
cursor pointer
position relative
overflow hidden
width 120px
height 120px
line-height 120px
transition var(--el-transition-duration-fast)
margin-bottom 20px
&:hover
border-color var(--el-color-primary)
.el-icon.uploader-icon
font-size 28px
color #8c939d
width 100%
height 120px
text-align center
.img-list-box
display flex
.img-item
width 120px
position relative
margin-right 10px
.el-image
width 120px
height 120px
border-radius 5px
.el-button
position absolute
right 5px
top 5px
width 20px
height 20px
.el-row.text-info
width 100%
padding 10px 0
.el-tag
margin-right 10px
// 提交按钮
.submit-btn
display flex
margin 20px 0
.el-button
width 200px
.video-list
.btn
margin-right 10px
border none
border-radius 5px
padding 5px 10px
cursor pointer
color var(--theme-text-color-primary)
background-color var(--btn-bg)
&:hover
opacity 0.7
.list-box
padding 0
.item
display flex
flex-flow row
align-items center
min-height 100px
padding 10px 15px
border-radius 10px
cursor pointer
margin-bottom 20px
background var(--chat-bg)
.left
.container
width 160px
position relative
max-height 120px
overflow hidden
display flex
justify-content center
align-items center
.video
width 160px
border-radius 5px
.el-image
width 160px
height 90px
border-radius 5px
.duration
position absolute
bottom 0
right 0
background-color rgba(14, 8, 8, 0.7)
padding 0 3px
font-family 'Input Sans'
font-size 14px
font-weight 700
border-radius 0.125rem
.play
position absolute
width 100%
height 100%
top 0
left 50%
border none
border-radius 5px
background rgba(100, 100, 100, 0.3)
cursor pointer
color var(--text-theme-color)
opacity 0
transform translate(-50%, 0px)
transition opacity 0.3s ease 0s
&: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
padding 0 20px
.prompt, .failed
padding 0
font-size 16px
max-height 60px
line-height 28px
overflow hidden
text-overflow ellipsis
.prompt
color var(--text-fb)
cursor text
.failed
color #E4696B
.right
display flex
justify-content right
min-width 200px
font-size 14px
padding 0
.tools
display flex
justify-content left
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
.pagination
margin-top 20px
display flex
justify-content center
.inner
display flex
width 100%
.mj-box
margin 10px
// background-color #262626
// border 1px solid #454545
// height: calc(100vh - 50px)
// overflow: scroll
min-width 300px
max-width 300px
padding 20px
border-radius 10px
color var(--text-theme-color)
font-size 14px
overflow auto
h2
font-weight bold
font-size 20px
text-align center
color var(--theme-textcolor-normal)
// 隐藏滚动条
::-webkit-scrollbar
width 0
height 0
background-color transparent
.mj-params
margin-top 10px
overflow auto
.param-line
padding 0 10px
.el-icon
position relative
.model
background var(--card-bg)
// border 1px solid #454545
border-radius 8px
padding 5px
margin-bottom 10px
display flex
flex-flow column
align-items center
cursor pointer
border 1px solid var(--chat-bg)
&:hover
border 1px solid var(--theme-border-hover)
.el-image
height 40px
width 100%
.text
margin-top 4px
font-size 12px
.model.active
// color #47fff1
// background-color #585858
border 1px solid var(--theme-border-hover)
.form-item-inner
display flex
align-items center
.el-select
--el-select-input-focus-border-color var(--el-color-primary)
--el-input-focus-border-color var(--el-color-primary)
.el-input__wrapper
background var(--chat-bg)
.el-input__inner
color var(--text-theme-color)
.el-icon
margin-left 10px
.img-uploader
.el-upload
border 1px dashed var(--el-border-color)
border-radius 6px
cursor pointer
position relative
overflow hidden
width 100%
transition var(--el-transition-duration-fast)
&:hover
border-color var(--el-color-primary)
.el-icon.uploader-icon
font-size 28px
color #8c939d
width 100%
height 120px
text-align center
.param-line.pt
display flex
align-items center
padding-top 5px
padding-bottom 5px
.el-form
.el-form-item__label
color var(--text-theme-color)
.el-input, .el-slider
width 180px
.uploader-icon
font-size 24px
position relative
top 3px
.no-more-data
text-align center
padding 30px
.generate-btn
.iconfont
margin-right 5px

142
web/src/assets/css/luma.css
View File

@@ -1,142 +0,0 @@
.page-luma {
display: flex;
height: 100%;
background-color: #0e0808;
overflow: auto;
flex-flow: column;
align-items: center;
background: linear-gradient(180deg, rgba(75,62,53,0.8), rgba(144,50,181,0.3));
}
.page-luma .prompt-box {
display: flex;
max-width: 56rem;
width: 100%;
padding: 20px;
flex-flow: column;
}
.page-luma .prompt-box .images {
display: flex;
flex-flow: row;
padding-bottom: 10px;
justify-content: center;
}
.page-luma .prompt-box .images .item {
position: relative;
}
.page-luma .prompt-box .images .item .el-image {
width: 100px;
height: 100px;
border-radius: 6px;
margin-right: 10px;
}
.page-luma .prompt-box .images .item .el-icon {
position: absolute;
cursor: pointer;
font-size: 20px;
color: #545454;
right: 10px;
top: 0;
}
.page-luma .prompt-box .images .item .el-icon:hover {
color: #888;
}
.page-luma .prompt-box .prompt-container {
width: 100%;
}
.page-luma .prompt-box .prompt-container .input-container {
background: linear-gradient(90deg, rgba(75,62,53,0.8), rgba(144,50,181,0.3));
border-radius: 28px;
padding: 10px 20px;
display: flex;
align-items: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.page-luma .prompt-box .prompt-container .input-container .prompt-input {
background: transparent;
border: none;
outline: none;
color: #fff;
font-size: 14px;
width: 100%;
padding: 10px;
resize: none;
white-space: pre-wrap;
word-wrap: break-word;
line-height: 24px;
overflow-wrap: break-word;
scrollbar-width: none; /* 隐藏滚动条 */
}
.page-luma .prompt-box .prompt-container .input-container .prompt-input::placeholder {
color: rgba(255,255,255,0.6);
}
.page-luma .prompt-box .prompt-container .input-container .prompt-input::-webkit-scrollbar {
display: none;
}
.page-luma .prompt-box .prompt-container .input-container .upload-icon,
.page-luma .prompt-box .prompt-container .input-container .send-icon {
color: #e1e1e1;
}
.page-luma .prompt-box .prompt-container .input-container .upload-icon .iconfont,
.page-luma .prompt-box .prompt-container .input-container .send-icon .iconfont {
font-size: 20px;
cursor: pointer;
}
.page-luma .prompt-box .prompt-container .input-container .upload-icon {
position: relative;
}
.page-luma .video-container {
display: flex;
flex-flow: column;
width: 100%;
padding: 0 40px;
}
.page-luma .video-container .h-title {
color: #fff;
width: 100%;
font-size: 36px;
text-align: left;
}
.page-luma .video-container .videos .item {
margin-bottom: 20px;
}
.page-luma .video-container .videos .item .video-box {
width: 100%;
border-radius: 10px;
}
.page-luma .video-container .videos .item .video-box video,
.page-luma .video-container .videos .item .video-box img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
cursor: pointer;
}
.page-luma .video-container .videos .item .video-name {
color: #e1e1e1;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 6px 0;
text-align: center;
}
.page-luma .video-container .videos .item .opts {
display: flex;
justify-content: center;
}
.page-luma .video-container .videos .item .opts .btn {
margin-right: 10px;
background-color: rgba(255,255,255,0.15);
border: none;
border-radius: 20px;
padding: 3px 15px;
cursor: pointer;
color: #fff;
font-size: 14px;
}
.page-luma .video-container .videos .item .opts .btn .iconfont {
font-size: 12px;
}
.page-luma .video-container .videos .item .opts .btn:hover {
background-color: rgba(255,255,255,0.2);
}

362
web/src/assets/css/luma.styl
View File

@@ -1,362 +0,0 @@
.page-luma {
display flex
height 100%
// background-color #0E0808
// background: var(--chat-bg);
overflow auto
//justify-content center
flex-flow column
align-items center
// background: linear-gradient(180deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
.prompt-box {
display flex
max-width 56rem
width 100%
padding 20px
flex-flow column
.images {
display flex
flex-flow row
padding-bottom 10px
justify-content center
align-items center
.item {
position relative
.el-image {
width 100px
height 100px
border-radius 6px
margin-right 10px
}
.el-icon {
position absolute
cursor pointer
font-size 20px
color #545454
right 10px
top 0
&:hover {
color #888888
}
}
}
.btn-swap {
margin-right 10px
.icon-exchange{
color var(--text-theme-color)
cursor pointer
}
}
}
.prompt-container {
width: 100%;
.input-container {
background: var(--chat-bg);
// background: linear-gradient(90deg, rgba(75, 62, 53, 0.8), rgba(144, 50, 181, 0.3));
border-radius: 28px;
padding: 10px 20px;
display: flex;
align-items: center;
margin-bottom: 16px;
// box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
.prompt-input {
background: transparent;
border: none;
outline: none;
color var(--text-theme-color);
font-size: 14px;
width: 100%;
padding: 10px;
resize: none;
white-space: pre-wrap;
word-wrap: break-word;
line-height 24px
overflow-wrap: break-word;
scrollbar-width: none; /* 隐藏滚动条 */
&::-webkit-scrollbar {
display: none;
}
}
.upload-icon, .send-icon {
color var( --el-color-primary)
.iconfont {
font-size 20px
cursor pointer
}
}
.upload-icon {
position relative
}
}
.params {
display flex
justify-content right
color var(--text-theme-color);
font-size 14px
padding 10px 30px
.item-group {
margin-left 20px
.label {
margin-right 5px
position relative
top 1px
}
}
}
}
}
.video-container {
display flex
flex-flow column
width 100%
padding 0 40px
.h-title {
color var(--text-theme-color)
width 100%
// font-size 36px
text-align left
}
.list-box {
padding 0
.item {
display flex
flex-flow row
align-items center
min-height 100px
padding 10px 15px
border-radius 10px
cursor pointer
margin-bottom 20px
background: var(--chat-bg);
.left {
.container {
width 160px
position relative
.video{
width 160px
border-radius 5px
}
.el-image {
width 160px
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: 100%
height 100%
top: 0;
left: 50%;
border none
border-radius 5px
background rgba(100, 100, 100, 0.3)
cursor pointer
color var(--text-theme-color)
opacity 0
transform: translate(-50%, 0px);
transition opacity 0.3s ease 0s
}
&: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
padding 0 20px
.prompt,.failed {
padding 0
font-size 16px
max-height 80px
line-height 28px
overflow hidden
text-overflow ellipsis
}
.prompt {
color var( --text-fb)
cursor: text
}
.failed {
color #E4696B
}
}
.right {
display flex
justify-content right
min-width 200px;
font-size 14px
padding 0
.tools {
display flex
justify-content left
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
}
}
}
}
}
}
.pagination {
margin-top 20px
display flex
justify-content center
}
//.videos {
// .item {
// margin-bottom 20px
//
// .video-box {
// width 100%
// aspect-ratio: 16/9;
// border-radius 10px
// video,img {
// width: 100%;
// height: 100%;
// object-fit: cover;
// border-radius 10px
// cursor pointer
// }
// }
//
//
// .video-name {
// color #e1e1e1
// font-size 16px
// white-space nowrap
// overflow hidden
// text-overflow ellipsis
// padding 6px 0
// text-align center
// }
//
// .opts {
// display flex
// justify-content center
// .btn {
// margin-right 10px
// background-color hsla(0,0%,100%,.15)
// border none
// border-radius 20px
// padding 3px 15px
// cursor pointer
// color var(--text-theme-color)
// font-size 14px
//
// .iconfont {
// font-size 11px
// position relative
// margin-right 5px
// top -2px
// }
//
// .el-image {
// width 14px
// height 14px
// margin-right 5px
// }
//
// &:hover {
// background-color hsla(0,0%,100%,.2)
// }
// }
// }
// }
//}
}
.btn {
margin-right 10px
border none
border-radius 5px
padding 5px 10px
cursor pointer
color: var(--theme-text-color-primary)
background-color var(--btn-bg)
&:hover {
opacity: 0.7
}
}
}

1
web/src/assets/css/theme-light.styl
View File

@@ -5,6 +5,7 @@
--text-fb:#000;
--text-color: #5b62ce; // 主要的文本颜色
--normal-color: rgba(43, 54, 116, 1); // 普通颜色
--theme-textcolor-normal:#5b62ce;;
p, h1, h2, h3, h4, h5, h6, article {
font-family: $font-regular;
}

567
web/src/assets/css/video.styl Normal file
View File

@@ -0,0 +1,567 @@
// 视频生成页面统一样式
.page-video {
display: flex;
min-height: 100vh;
background: var(--chat-bg);
// Element Plus 样式覆盖
:deep(.el-form-item__label) {
color: var(--text-theme-color);
}
:deep(.el-textarea) {
--el-input-focus-border-color: var(--el-color-primary);
}
:deep(.el-textarea__inner) {
background: transparent;
color: var(--text-theme-color);
}
.el-input__wrapper {
background: transparent;
padding: 5px;
}
// 左侧参数面板
.params-panel {
min-width: 320px;
max-width: 320px;
margin: 10px;
padding: 0 15px 20px 15px;
border-radius: 10px;
color: var(--text-theme-color);
font-size: 14px;
overflow: auto;
background: var(--card-bg);
h2 {
font-weight: bold;
font-size: 20px;
text-align: center;
color: var(--theme-textcolor-normal);
margin-bottom: 20px;
}
// 隐藏滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
// 标签页样式
.video-type-tabs {
margin-bottom: 20px;
:deep(.el-tabs__item.is-active) {
color: var(--theme-textcolor-normal);
font-size: 16px;
}
:deep(.el-tabs__item) {
color: var(--text-theme-color);
font-size: 16px;
}
:deep(.el-tabs__active-bar) {
background-color: var(--theme-textcolor-normal);
}
.el-tabs {
--el-tabs-header-height: 45px;
}
}
// 参数行
.param-line {
padding: 5px 0;
&.pt {
padding-top: 10px;
padding-bottom: 10px;
}
.label {
margin-right: 5px;
position: relative;
top: 1px;
}
.form-item-inner {
display: flex;
align-items: center;
.el-icon {
margin-left: 10px;
}
}
}
// 表单项样式
.el-form {
.el-form-item__label {
color: var(--text-theme-color);
}
.el-input, .el-slider {
width: 100%;
}
.el-select {
width: 100%;
--el-select-input-focus-border-color: var(--el-color-primary);
--el-input-focus-border-color: var(--el-color-primary);
.el-input__wrapper {
background: var(--chat-bg);
}
.el-input__inner {
color: var(--text-theme-color);
}
}
}
// 网格内容项
.grid-content {
background: var(--card-bg);
border-radius: 8px;
padding: 8px 14px;
display: flex;
cursor: pointer;
margin-bottom: 10px;
border: 1px solid var(--chat-bg);
&:hover {
border: 1px solid var(--theme-border-hover);
}
&.active {
border: 1px solid var(--theme-border-hover);
}
.icon {
width: 20px;
height: 20px;
margin-bottom: 5px;
&.proportion {
width: 20px;
height: 20px;
}
}
.texts {
margin-left: 5px;
margin-top: 2px;
color: var(--text-theme-color);
}
}
// 运镜控制
.camera-control {
padding: 10px;
border-radius: 4px;
background: var(--card-bg);
:deep(.el-form-item:last-child) {
margin-bottom: 0 !important;
}
}
// 生成按钮
.generate-btn {
.iconfont {
margin-right: 5px;
}
}
// 项目组样式
.item-group {
display: flex;
align-items: center;
margin-bottom: 15px;
.label {
margin-right: 10px;
}
}
// 图片模式切换样式
.image-mode-toggle {
display: flex;
align-items: center;
justify-content: space-between;
.label {
margin-right: 10px;
color: var(--text-theme-color);
}
}
// 过渡动画
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.3s ease-in;
}
.slide-fade-enter-from {
transform: translateY(-10px);
opacity: 0;
}
.slide-fade-leave-to {
transform: translateY(-10px);
opacity: 0;
}
}
// KeLing 参数面板特有样式
.params-container {
// 任务类型标签页
.task-type-tabs {
margin-bottom: 20px;
.text {
margin-bottom: 10px;
color: #6b778c;
font-size: 15px;
}
}
// 图片上传样式
.img-inline {
display: flex;
flex-wrap: wrap;
.img-uploader {
text-align: center;
position: relative;
:deep(.el-upload) {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
width: 120px;
height: 120px;
transition: var(--el-transition-duration-fast);
margin-bottom: 20px;
&:hover {
border-color: var(--el-color-primary);
}
}
.removeimg {
position: absolute;
right: -5px;
top: -5px;
z-index: 10;
cursor: pointer;
color: #f56c6c;
font-size: 20px;
}
}
.btn-swap {
.icon-exchange {
color: var(--text-theme-color);
cursor: pointer;
font-size: 20px;
}
}
}
// 提交按钮
.submit-btn {
display: flex;
margin: 20px 0;
.el-button {
width: 100%;
}
}
// 算力信息
.text-info {
width: 100%;
padding: 10px 0;
.el-tag {
margin-right: 10px;
}
}
}
// 右侧主要内容区域
.main-content {
padding: 1.5rem;
flex: 1;
background: var(--chat-bg);
color: var(--text-theme-color);
overflow-x: hidden;
// 作品标题栏
.works-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.h-title {
color: var(--text-theme-color);
margin: 0;
}
// .filter-buttons {
// .el-button-group {
// .el-button {
// --el-button-bg-color: var(--card-bg);
// --el-button-border-color: var(--chat-bg);
// --el-button-text-color: var(--text-theme-color);
// --el-button-hover-bg-color: var(--theme-border-hover);
// --el-button-hover-border-color: var(--theme-border-hover);
// --el-button-active-bg-color: var(--el-color-primary);
// --el-button-active-border-color: var(--el-color-primary);
// &.is-type-primary {
// --el-button-bg-color: var(--el-color-primary);
// --el-button-border-color: var(--el-color-primary);
// --el-button-text-color: #ffffff;
// }
// }
// }
// }
}
// 任务列表
.video-list {
.list-box {
padding: 0;
.item {
display: flex;
flex-flow: row;
align-items: center;
min-height: 100px;
padding: 10px 15px;
border-radius: 10px;
cursor: pointer;
margin-bottom: 20px;
background: var(--card-bg);
.left {
.container {
width: 160px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.video {
width: 160px;
height: 120px;
border-radius: 5px;
background-color: var(--el-fill-color-light);
}
.el-image {
width: 160px;
height: 90px;
border-radius: 5px;
}
.duration {
position: absolute;
bottom: 0;
right: 0;
background-color: rgba(14, 8, 8, 0.7);
padding: 0 3px;
font-family: 'Input Sans';
font-size: 14px;
font-weight: 700;
border-radius: 0.125rem;
}
.play {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
border: none;
border-radius: 5px;
background: rgba(100, 100, 100, 0.3);
cursor: pointer;
color: var(--text-theme-color);
opacity: 0;
transform: translate(-50%, 0px);
transition: opacity 0.3s ease 0s;
}
&:hover {
.play {
opacity: 1;
}
}
}
}
.center {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-flow: column;
padding: 0 20px;
.prompt, .failed {
padding: 0;
font-size: 16px;
max-height: 80px;
line-height: 28px;
overflow: hidden;
text-overflow: ellipsis;
}
.prompt {
color: var(--text-fb);
cursor: text;
}
.failed {
color: #E4696B;
}
.pb-2 {
padding-bottom: 8px;
.el-tag {
margin-right: 4px;
margin-bottom: 4px;
}
}
}
.right {
display: flex;
justify-content: right;
min-width: 200px;
font-size: 14px;
padding: 0;
.tools {
display: flex;
justify-content: left;
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 {
color: var(--el-color-primary);
}
.downloading {
width: 16px;
}
}
}
}
.right-error {
display: flex;
justify-content: center;
align-items: center;
}
}
}
// 分页
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
}
}
// 通用按钮样式
.btn {
margin-right: 10px;
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
color: var(--theme-text-color-primary);
background-color: var(--btn-bg);
&:hover {
opacity: 0.7;
}
}
// 无数据样式
.no-data {
text-align: center;
padding: 40px;
color: var(--text-theme-color);
}
}
// 响应式设计
@media (max-width: 768px) {
.page-video {
flex-direction: column;
.params-panel {
min-width: 100%;
max-width: 100%;
margin: 10px 0;
}
.main-content {
padding: 1rem;
.video-list .list-box .item {
.left .container {
width: 120px;
.video, .el-image {
width: 120px;
}
}
.center {
padding: 0 10px;
}
.right {
min-width: 120px;
}
}
}
}
}

144
web/src/assets/iconfont/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
src: url('iconfont.woff2?t=1740279975534') format('woff2'),
url('iconfont.woff?t=1740279975534') format('woff'),
url('iconfont.ttf?t=1740279975534') format('truetype');
src: url('iconfont.woff2?t=1752731646117') format('woff2'),
url('iconfont.woff?t=1752731646117') format('woff'),
url('iconfont.ttf?t=1752731646117') format('truetype');
}
.iconfont {
@@ -13,6 +13,142 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-video:before {
content: "\e63f";
}
.icon-empty-box:before {
content: "\e638";
}
.icon-check2:before {
content: "\e7e2";
}
.icon-creator:before {
content: "\e6a1";
}
.icon-withdraw:before {
content: "\e689";
}
.icon-withdraw-log:before {
content: "\e635";
}
.icon-money:before {
content: "\e831";
}
.icon-doller:before {
content: "\e633";
}
.icon-wallet:before {
content: "\e64d";
}
.icon-check:before {
content: "\e810";
}
.icon-refuse:before {
content: "\e629";
}
.icon-Reject:before {
content: "\e70d";
}
.icon-clock:before {
content: "\e65d";
}
.icon-eye-close:before {
content: "\e7aa";
}
.icon-eye-open:before {
content: "\e7ab";
}
.icon-list:before {
content: "\e650";
}
.icon-categroy:before {
content: "\e620";
}
.icon-zhankai:before {
content: "\e632";
}
.icon-wechat-mini:before {
content: "\e63d";
}
.icon-niutou:before {
content: "\e64c";
}
.icon-qiniu:before {
content: "\e62c";
}
.icon-storage:before {
content: "\e69a";
}
.icon-localstorage:before {
content: "\ea8d";
}
.icon-minio:before {
content: "\e855";
}
.icon-aliyun:before {
content: "\e672";
}
.icon-sms:before {
content: "\e82c";
}
.icon-duanxin:before {
content: "\e65c";
}
.icon-yanzm:before {
content: "\e625";
}
.icon-yaoqm:before {
content: "\e66e";
}
.icon-epay:before {
content: "\e628";
}
.icon-coze:before {
content: "\e61b";
}
.icon-token:before {
content: "\e68e";
}
.icon-reset:before {
content: "\e649";
}
.icon-stats:before {
content: "\e878";
}
.icon-keling:before {
content: "\eab7";
}
@@ -289,7 +425,7 @@
content: "\e6c4";
}
.icon-mp1:before {
.icon-mp4:before {
content: "\e647";
}

2
web/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

240
web/src/assets/iconfont/iconfont.json
View File

@@ -5,6 +5,244 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1283",
"name": "视频",
"font_class": "video",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "35224131",
"name": "empty-box",
"font_class": "empty-box",
"unicode": "e638",
"unicode_decimal": 58936
},
{
"icon_id": "9143175",
"name": "审核",
"font_class": "check2",
"unicode": "e7e2",
"unicode_decimal": 59362
},
{
"icon_id": "15450788",
"name": "创作者中心",
"font_class": "creator",
"unicode": "e6a1",
"unicode_decimal": 59041
},
{
"icon_id": "1134341",
"name": "提现",
"font_class": "withdraw",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "10887127",
"name": "提现记录",
"font_class": "withdraw-log",
"unicode": "e635",
"unicode_decimal": 58933
},
{
"icon_id": "34452904",
"name": "money-rmb",
"font_class": "money",
"unicode": "e831",
"unicode_decimal": 59441
},
{
"icon_id": "34467697",
"name": "doller",
"font_class": "doller",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "9512709",
"name": "钱包￥",
"font_class": "wallet",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "8365142",
"name": "check",
"font_class": "check",
"unicode": "e810",
"unicode_decimal": 59408
},
{
"icon_id": "10213506",
"name": "refuse",
"font_class": "refuse",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "19393806",
"name": "Reject",
"font_class": "Reject",
"unicode": "e70d",
"unicode_decimal": 59149
},
{
"icon_id": "248916",
"name": "clock",
"font_class": "clock",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "6151096",
"name": "eye-close",
"font_class": "eye-close",
"unicode": "e7aa",
"unicode_decimal": 59306
},
{
"icon_id": "6151097",
"name": "eye-open",
"font_class": "eye-open",
"unicode": "e7ab",
"unicode_decimal": 59307
},
{
"icon_id": "6145570",
"name": "list",
"font_class": "list",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "13127646",
"name": "categroy",
"font_class": "categroy",
"unicode": "e620",
"unicode_decimal": 58912
},
{
"icon_id": "1613505",
"name": "展开",
"font_class": "zhankai",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "10905663",
"name": "微信小程序",
"font_class": "wechat-mini",
"unicode": "e63d",
"unicode_decimal": 58941
},
{
"icon_id": "21530643",
"name": "牛头",
"font_class": "niutou",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "24877229",
"name": "七牛云",
"font_class": "qiniu",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "3717493",
"name": "存储服务",
"font_class": "storage",
"unicode": "e69a",
"unicode_decimal": 59034
},
{
"icon_id": "7133059",
"name": "本地存储",
"font_class": "localstorage",
"unicode": "ea8d",
"unicode_decimal": 60045
},
{
"icon_id": "9360420",
"name": "minio",
"font_class": "minio",
"unicode": "e855",
"unicode_decimal": 59477
},
{
"icon_id": "21053628",
"name": "阿里云",
"font_class": "aliyun",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "30046100",
"name": "comment-sms",
"font_class": "sms",
"unicode": "e82c",
"unicode_decimal": 59436
},
{
"icon_id": "4893414",
"name": "短信",
"font_class": "duanxin",
"unicode": "e65c",
"unicode_decimal": 58972
},
{
"icon_id": "553324",
"name": "验证码",
"font_class": "yanzm",
"unicode": "e625",
"unicode_decimal": 58917
},
{
"icon_id": "1264836",
"name": "邀请码",
"font_class": "yaoqm",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "24827618",
"name": "网易支付",
"font_class": "epay",
"unicode": "e628",
"unicode_decimal": 58920
},
{
"icon_id": "43863501",
"name": "Coze",
"font_class": "coze",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "11551884",
"name": "token",
"font_class": "token",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "38795534",
"name": "reset",
"font_class": "reset",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "5838820",
"name": "统计",
"font_class": "stats",
"unicode": "e878",
"unicode_decimal": 59512
},
{
"icon_id": "42692844",
"name": "可灵大模型",
@@ -491,7 +729,7 @@
{
"icon_id": "12600802",
"name": "mp4",
"font_class": "mp1",
"font_class": "mp4",
"unicode": "e647",
"unicode_decimal": 58951
},

BIN
web/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.