xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2026-04-26 13:04:30 +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;
}
}
}
}
}