feat(ecommerce): add one-click video quick tool page
- Add '一键视频' button left of '更多功能' in quick action board - Create EcommerceOneClickVideoPanel with hot-clone-like UI - Reuse EcommerceVideoWorkspace on the right for video flow - Add light-theme CSS matching quick-set/hot-clone pages
This commit is contained in:
Codex
@@ -19210,3 +19210,297 @@ html body #root .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone
|
||||
height: 100% !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
/* ── Quick action: 一键视频 card theme ── */
|
||||
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--video {
|
||||
--quick-accent: #1073cc;
|
||||
--quick-bg: #eaf5ff;
|
||||
--quick-text: #123454;
|
||||
}
|
||||
|
||||
/* ── One-click video panel: hot-clone style layout + light video workspace ── */
|
||||
.ecommerce-standalone .ecom-one-click-video-page.ecom-hot-video-page .ecom-quick-set-body {
|
||||
grid-template-columns: minmax(386px, 420px) minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-quick-set-panel-head .ecom-quick-set-page-title {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-duration {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-duration > span {
|
||||
color: #1073cc;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-duration-scale {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #6b7c88;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-range {
|
||||
width: 100%;
|
||||
accent-color: #1073cc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-height: 52px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(16, 115, 204, 0.14);
|
||||
border-radius: 8px;
|
||||
background: #f8fbfc;
|
||||
color: #162535;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart.is-on {
|
||||
border-color: rgba(16, 115, 204, 0.34);
|
||||
background: linear-gradient(180deg, #edf8ff, #f8fdff);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart > span {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart strong {
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart em {
|
||||
color: #6b7c88;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart i {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 999px;
|
||||
background: #d0dbe3;
|
||||
position: relative;
|
||||
transition: background 160ms ease;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart.is-on i {
|
||||
background: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart i::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
transition: transform 160ms ease;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-one-click-video-smart.is-on i::after {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
/* Light-themed video workspace overrides */
|
||||
.ecommerce-standalone .ecom-one-click-video-page.ecom-hot-video-page .ecom-video-workspace {
|
||||
color: #162535;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flowbar.ecom-video-preview-head {
|
||||
background: #ffffff;
|
||||
border-bottom-color: rgba(16, 115, 204, 0.1);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-preview-copy h1 {
|
||||
color: #162535;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-preview-copy p {
|
||||
color: #6b7c88;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-preview-copy p span {
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-step-dot {
|
||||
background: rgba(16, 115, 204, 0.2);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-step-dot.is-done {
|
||||
background: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-step-dot.is-active {
|
||||
background: #1ebddb;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flowbar__stage-label {
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flowbar__error {
|
||||
color: #e03131;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flowbar__zoom button {
|
||||
border: 1px solid rgba(16, 115, 204, 0.1) !important;
|
||||
background: #edf8ff !important;
|
||||
color: #1073cc !important;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-action {
|
||||
border-color: rgba(16, 115, 204, 0.2);
|
||||
background: #edf8ff;
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-action--ghost {
|
||||
background: #f8fbfc;
|
||||
color: #6b7c88;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-action--danger {
|
||||
border-color: rgba(224, 49, 49, 0.3);
|
||||
background: #fff0f0;
|
||||
color: #e03131;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-canvas {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-empty {
|
||||
color: #6b7c88;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-dock button {
|
||||
border-color: rgba(16, 115, 204, 0.2);
|
||||
background: #edf8ff;
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-flow-notice {
|
||||
border-color: rgba(16, 115, 204, 0.2);
|
||||
background: #ffffff;
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
/* Light tree nodes */
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node {
|
||||
border-color: rgba(16, 115, 204, 0.16);
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--source {
|
||||
border-color: rgba(16, 115, 204, 0.2);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--text {
|
||||
border-color: rgba(16, 115, 204, 0.14);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--text.is-completed {
|
||||
border-color: rgba(16, 115, 204, 0.34);
|
||||
background: #edf8ff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--text.is-active {
|
||||
border-color: #1ebddb;
|
||||
background: #f0fdff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node__title {
|
||||
color: #162535;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node__desc {
|
||||
color: #6b7c88;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node__label {
|
||||
color: #6b7c88;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--image,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--video {
|
||||
border-color: rgba(16, 115, 204, 0.16);
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--image.is-completed,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--video.is-completed {
|
||||
border-color: rgba(16, 115, 204, 0.34);
|
||||
background: #edf8ff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--image.is-active,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--video.is-active {
|
||||
border-color: #1ebddb;
|
||||
background: #f0fdff;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node--video.is-failed {
|
||||
border-color: rgba(224, 49, 49, 0.4);
|
||||
background: #fff0f0;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node__placeholder {
|
||||
background: #edf1f4;
|
||||
color: #9badb9;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree-node__tag {
|
||||
border-color: rgba(16, 115, 204, 0.12);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: #1073cc;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__arrow {
|
||||
color: #9badb9;
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__trunk-line,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__branches-line::before,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__branch-tap::before {
|
||||
background: rgba(16, 115, 204, 0.2);
|
||||
}
|
||||
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__trunk-line::after,
|
||||
.ecommerce-standalone .ecom-one-click-video-page .ecom-video-tree__branch-tap::after {
|
||||
background: linear-gradient(90deg, transparent, #1ebddb, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.ecommerce-standalone .ecom-one-click-video-page.ecom-hot-video-page .ecom-quick-set-body {
|
||||
grid-template-columns: minmax(330px, 370px) minmax(0, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.ecommerce-standalone .ecom-one-click-video-page.ecom-hot-video-page .ecom-quick-set-body {
|
||||
grid-template-columns: 1fr !important;
|
||||
grid-template-rows: auto minmax(0, 1fr) !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user