mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-04-22 02:54:28 +08:00
整理即梦生视频的API 代码
This commit is contained in:
GeekMaster
311
web/src/assets/css/jimeng.styl
Normal file
311
web/src/assets/css/jimeng.styl
Normal file
@@ -0,0 +1,311 @@
|
||||
.page-jimeng {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
background: var(--chat-bg);
|
||||
|
||||
// 左侧参数面板
|
||||
.params-panel {
|
||||
min-width: 380px;
|
||||
max-width: 380px;
|
||||
margin: 10px;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
overflow: auto;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
// 功能分类按钮组
|
||||
.category-buttons {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.category-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
color: #5865f2;
|
||||
}
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
|
||||
.category-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px 10px;
|
||||
border: 2px solid #f0f0f0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #fafafa;
|
||||
|
||||
&:hover {
|
||||
border-color: #5865f2;
|
||||
background: #f8f9ff;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: #5865f2;
|
||||
background: linear-gradient(135deg, #5865f2 0%, #7289da 100%);
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(88, 101, 242, 0.3);
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 功能开关
|
||||
.function-switch {
|
||||
margin-bottom: 25px;
|
||||
|
||||
.switch-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
|
||||
.el-icon {
|
||||
margin-right: 8px;
|
||||
color: #5865f2;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 10px;
|
||||
background: #f9f9f9;
|
||||
|
||||
.switch-info {
|
||||
flex: 1;
|
||||
|
||||
.switch-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.switch-desc {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 参数容器
|
||||
.params-container {
|
||||
.function-panel {
|
||||
.param-line {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&.pt {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.item-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.label {
|
||||
margin-right: 15px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
min-width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-info {
|
||||
margin: 20px 0;
|
||||
padding: 15px;
|
||||
background: #f0f8ff;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #5865f2;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
margin-top: 30px;
|
||||
|
||||
.el-button {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 右侧主要内容区域
|
||||
.main-content {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
background: var(--chat-bg);
|
||||
color: var(--text-theme-color);
|
||||
|
||||
.works-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.h-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--text-theme-color);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-list {
|
||||
.list-box {
|
||||
.task-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
margin-bottom: 15px;
|
||||
background: var(--card-bg);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.task-left {
|
||||
margin-right: 20px;
|
||||
|
||||
.task-preview {
|
||||
width: 120px;
|
||||
height: 90px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.preview-image, .preview-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-center {
|
||||
flex: 1;
|
||||
|
||||
.task-info {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.task-prompt {
|
||||
font-size: 14px;
|
||||
color: var(--text-theme-color);
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.task-meta {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.task-right {
|
||||
.task-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.page-jimeng {
|
||||
flex-direction: column;
|
||||
|
||||
.params-panel {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
.member {
|
||||
// background-color: #282c34;
|
||||
height 100%
|
||||
|
||||
.title {
|
||||
@@ -13,36 +12,79 @@
|
||||
|
||||
.inner {
|
||||
color var(--text-theme-color)
|
||||
padding 15px 0 15px 15px;
|
||||
padding 15px 0 15px 15px
|
||||
overflow-x hidden
|
||||
overflow-y visible
|
||||
display flex
|
||||
flex-flow row
|
||||
|
||||
.user-profile {
|
||||
padding 10px 20px 20px 20px
|
||||
width 300px
|
||||
background-color var(--chat-bg)
|
||||
color var(--text-theme-color)
|
||||
border-radius 10px
|
||||
//height 100vh
|
||||
|
||||
.el-form-item__label {
|
||||
color var(--text-theme-color)
|
||||
justify-content start
|
||||
.profile-card {
|
||||
max-width 300px
|
||||
border-radius 18px
|
||||
box-shadow 0 4px 8px rgba(0,0,0,0.08)
|
||||
padding 24px 16px
|
||||
background var(--panel-bg)
|
||||
position relative
|
||||
z-index 1
|
||||
margin-bottom 24px
|
||||
}
|
||||
.profile-title {
|
||||
font-size 18px
|
||||
font-weight bold
|
||||
margin-bottom 18px
|
||||
color #2d8cf0
|
||||
letter-spacing 2px
|
||||
text-align center
|
||||
}
|
||||
.profile-btn {
|
||||
width 100%
|
||||
margin-bottom 12px
|
||||
font-size 16px
|
||||
font-weight 500
|
||||
display flex
|
||||
align-items center
|
||||
justify-content center
|
||||
border none
|
||||
border-radius 8px
|
||||
background linear-gradient(90deg, #6dd5ed 0%, #2193b0 100%)
|
||||
color #fff
|
||||
transition all 0.3s
|
||||
i {
|
||||
margin-right 8px
|
||||
font-size 20px
|
||||
}
|
||||
|
||||
.user-opt {
|
||||
.el-col {
|
||||
padding 10px
|
||||
|
||||
.el-button {
|
||||
width 100%
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow 0 2px 12px #2193b0aa
|
||||
transform translateY(-2px) scale(1.03)
|
||||
background linear-gradient(90deg, #2193b0 0%, #6dd5ed 100%)
|
||||
}
|
||||
}
|
||||
|
||||
.profile-btn.email {
|
||||
background linear-gradient(90deg, #f7971e 0%, #ffd200 100%)
|
||||
}
|
||||
.profile-btn.mobile {
|
||||
background linear-gradient(90deg, #43cea2 0%, #185a9d 100%)
|
||||
}
|
||||
.profile-btn.third {
|
||||
background linear-gradient(90deg, #ff512f 0%, #dd2476 100%)
|
||||
}
|
||||
.profile-btn.password {
|
||||
background linear-gradient(90deg, #1d4350 0%, #a43931 100%)
|
||||
}
|
||||
.profile-btn.redeem {
|
||||
background linear-gradient(90deg, #00c6ff 0%, #0072ff 100%)
|
||||
}
|
||||
.profile-bg {
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
width 100%
|
||||
height 100%
|
||||
z-index 0
|
||||
background url('data:image/svg+xml;utf8,<svg width="100%25" height="100%25" viewBox="0 0 400 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="%23e0eaff"/><circle cx="300" cy="60" r="40" fill="%23f0f7ff"/><circle cx="320" cy="180" r="30" fill="%23e0eaff"/></svg>') no-repeat center/cover
|
||||
opacity 0.08
|
||||
pointer-events none
|
||||
}
|
||||
|
||||
.product-box {
|
||||
padding 0 20px
|
||||
|
||||
@@ -96,4 +96,7 @@
|
||||
|
||||
// el-dialog 阴影
|
||||
--el-box-shadow: 0 0 15px rgba(107, 80, 225, 0.8);
|
||||
|
||||
// 面板背景
|
||||
--panel-bg: linear-gradient(135deg, #252d58 0%, #1f243f 100%);
|
||||
}
|
||||
|
||||
@@ -57,6 +57,8 @@
|
||||
// 引用快样式
|
||||
--quote-bg-color: #e0dfff;
|
||||
--quote-text-color: #333;
|
||||
// 面板背景
|
||||
--panel-bg: linear-gradient(135deg, #f5eafe 0%, #e9e6fc 100%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user