html,
body,
#app {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure elements use border-box sizing by default */
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
background-color: #576c90;
min-height: 100vh;
}
.page-bg {
background-color: #0b101e;
min-height: 100vh;
color: #fff;
}
.navigation-bar[data-v-925fc97e] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
/* 添加轻微透明底色和毛玻璃效果 */
background: rgba(11, 16, 30, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: white;
width: 100%;
margin: 0;
box-sizing: border-box;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
transition: background 0.3s ease;
}
/* （可选）如果你以后想要用户滚动时变成不透明，可以在这加上一个 .scrolled class */
.navigation-bar.scrolled[data-v-925fc97e] {
background: rgba(11, 16, 30, 0.9);
backdrop-filter: blur(10px);
}
.logo[data-v-925fc97e] {
display: inline-flex;
align-items: center;
color: white;
text-decoration: none;
}
.logo-text[data-v-925fc97e] {
color: white;
text-decoration: none;
font-size: 1.25rem;
font-weight: bold;
}
.logo-img[data-v-925fc97e] {
width: 36px;
height: auto;
display: inline-block;
margin-right: 0.5rem;
/* Force SVG/icon to appear white even if its internal color is gray */
filter: brightness(0) invert(1);
}
.nav-links a[data-v-925fc97e] {
color: #ffffff;
text-decoration: none;
margin: 0 1rem;
font-size: 1rem;
position: relative;
}
.nav-links a.router-link-active[data-v-925fc97e]::after {
content: '';
position: absolute;
left: 0;
bottom: -5px;
width: 100%;
height: 2px;
background-color: white;
}
.nav-icons a[data-v-925fc97e] {
color: #ffffff;
margin-left: 1rem;
}
/* You can replace these with actual icons */
.icon-placeholder[data-v-925fc97e],
.icon-placeholder-gear[data-v-925fc97e] {
display: inline-block;
width: 24px;
height: 24px;
background-color: white;
/* Placeholder color */
-webkit-mask-size: cover;
mask-size: cover;
}
.icon-placeholder[data-v-925fc97e] {
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
mask: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
}
.icon-placeholder-gear[data-v-925fc97e] {
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
mask: url('data:image/svg+xml;utf8,') no-repeat 50% 50%;
}
/* 汉堡按钮 — 默认隐藏 */
.hamburger[data-v-925fc97e] {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 4px;
z-index: 110;
}
.hamburger span[data-v-925fc97e] {
display: block;
width: 22px;
height: 2px;
background: #fff;
margin: 5px 0;
transition: all 0.3s ease;
border-radius: 1px;
}
.hamburger.active span[data-v-925fc97e]:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span[data-v-925fc97e]:nth-child(2) {
opacity: 0;
}
.hamburger.active span[data-v-925fc97e]:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 768px) {
.hamburger[data-v-925fc97e] {
display: block;
}
.nav-links[data-v-925fc97e] {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(11, 16, 30, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
flex-direction: column;
padding: 16px 24px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-links.open[data-v-925fc97e] {
display: flex;
}
.nav-links a[data-v-925fc97e] {
padding: 12px 0;
margin: 0;
font-size: 0.95rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.nav-links a[data-v-925fc97e]:last-child {
border-bottom: none;
}
.nav-icons[data-v-925fc97e] {
display: none;
}
.logo-text[data-v-925fc97e] {
font-size: 1rem;
}
}
.app-footer[data-v-6c0793c8] {
background-color: #0b101e;
/* 设计稿的深蓝/深灰色底 */
color: #ffffff;
padding: 4rem 2rem 2rem 2rem;
font-family: inherit;
}
.footer-container[data-v-6c0793c8] {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2rem;
align-items: start;
}
.footer-col[data-v-6c0793c8] {
display: flex;
flex-direction: column;
}
/* 列 1 样式 */
.brand-name[data-v-6c0793c8] {
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 1.5rem 0;
letter-spacing: 1px;
}
.brand-desc[data-v-6c0793c8] {
font-size: 0.85rem;
color: #a0aec0;
/* 灰白色文本 */
line-height: 1.6;
margin: 0 0 1.5rem 0;
}
.social-icons[data-v-6c0793c8] {
display: flex;
gap: 1rem;
}
.icon-link[data-v-6c0793c8] {
color: #ffffff;
width: 20px;
height: 20px;
opacity: 0.8;
transition: opacity 0.3s;
}
.icon-link[data-v-6c0793c8]:hover {
opacity: 1;
}
/* 列 2 & 列 3 样式 */
.col-title[data-v-6c0793c8] {
font-size: 0.75rem;
color: #a0aec0;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 1.5rem 0;
font-weight: 500;
}
.links-col ul[data-v-6c0793c8] {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.links-col a[data-v-6c0793c8] {
color: #ffffff;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.3s;
}
.links-col a[data-v-6c0793c8]:hover {
color: #dce3ff;
}
/* 列 4 样式 */
.contact-col[data-v-6c0793c8] {
align-items: flex-start;
}
.contact-btn[data-v-6c0793c8] {
background-color: #dce3ff;
/* 浅紫蓝色 */
color: #1a202c;
border: none;
border-radius: 999px;
/* 胶囊形状 */
padding: 0.875rem 2.5rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 20px rgba(220, 227, 255, 0.15);
/* 发光效果 */
transition: transform 0.2s, box-shadow 0.2s;
margin-bottom: 2rem;
}
.contact-btn[data-v-6c0793c8]:hover {
transform: translateY(-2px);
box-shadow: 0 0 25px rgba(220, 227, 255, 0.3);
}
.copyright[data-v-6c0793c8] {
font-size: 0.75rem;
color: #718096;
margin: 0;
}
/* 响应式调整 */
@media (max-width: 900px) {
.footer-container[data-v-6c0793c8] {
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
}
@media (max-width: 600px) {
.footer-container[data-v-6c0793c8] {
grid-template-columns: 1fr;
gap: 2.5rem;
}
}
/* 浮动触发按钮 - 毛玻璃 */
.floating-trigger[data-v-c21c08c2] {
position: fixed;
bottom: 32px;
right: 32px;
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(147, 197, 253, 0.15);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #93c5fd;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
transition: all 0.25s ease;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.floating-trigger[data-v-c21c08c2]:hover {
background: rgba(147, 197, 253, 0.25);
border-color: rgba(147, 197, 253, 0.4);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4),
0 0 20px rgba(147, 197, 253, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.trigger-icon[data-v-c21c08c2] {
width: 26px;
height: 26px;
}
/* 可拖拽悬浮窗 */
.float-window[data-v-c21c08c2] {
position: fixed;
z-index: 1000;
width: 920px;
max-width: 92vw;
user-select: none;
}
.float-window[data-v-c21c08c2] * {
box-sizing: border-box;
}
/* 主面板高阶毛玻璃 */
.upload-modal-glass[data-v-c21c08c2] {
width: 100%;
background: rgba(23, 30, 43, 0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
padding: 40px;
box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 头部标题排版 */
.modal-header[data-v-c21c08c2] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
cursor: move;
}
.header-title[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 6px;
}
.title-zh[data-v-c21c08c2] {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.title-en[data-v-c21c08c2] {
font-size: 11px;
font-family: monospace;
color: #64748b;
letter-spacing: 0.18em;
font-weight: 700;
}
.btn-close[data-v-c21c08c2] {
background: none;
border: none;
color: #64748b;
font-size: 16px;
cursor: pointer;
transition: color 0.2s;
padding: 4px;
}
.btn-close[data-v-c21c08c2]:hover {
color: #ffffff;
}
/* 双栏栅格 */
.modal-body[data-v-c21c08c2] {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 40px;
}
@media (max-width: 820px) {
.modal-body[data-v-c21c08c2] {
grid-template-columns: 1fr;
}
}
/* 左侧：圆角双层嵌套拖拽区 */
.upload-left-col[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 20px;
}
.outer-dash-bounds[data-v-c21c08c2] {
width: 100%;
aspect-ratio: 1.42 / 1;
border: 1.5px dashed rgba(255, 255, 255, 0.25);
border-radius: 20px;
padding: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.outer-dash-bounds[data-v-c21c08c2]:hover,
.outer-dash-bounds.is-dragover[data-v-c21c08c2] {
border-color: #93c5fd;
}
.inner-glass-card[data-v-c21c08c2] {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}
.outer-dash-bounds:hover .inner-glass-card[data-v-c21c08c2] {
background-color: rgba(255, 255, 255, 0.07);
}
.upload-icon-wrapper[data-v-c21c08c2] {
margin-bottom: 20px;
color: #93c5fd;
filter: drop-shadow(0 0 10px rgba(147, 197, 253, 0.5));
}
.upload-cloud-icon[data-v-c21c08c2] {
width: 60px;
height: 60px;
}
.dropzone-hint-main[data-v-c21c08c2] {
font-size: 14px;
color: #cbd5e1;
margin: 0 0 8px 0;
letter-spacing: 0.02em;
}
.dropzone-hint-main span[data-v-c21c08c2] {
color: #93c5fd;
font-weight: 500;
}
.dropzone-hint-sub[data-v-c21c08c2] {
font-size: 11px;
color: #64748b;
margin: 0;
letter-spacing: 0.05em;
}
.upload-status-bar-glass[data-v-c21c08c2] {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.04);
backdrop-filter: blur(8px);
padding: 8px;
border-radius: 14px;
display: flex;
align-items: center;
gap: 16px;
}
.btn-select-file[data-v-c21c08c2] {
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.06);
color: #e2e8f0;
padding: 12px 24px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
backdrop-filter: blur(4px);
transition: all 0.2s;
}
.btn-select-file[data-v-c21c08c2]:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.file-summary[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 2px;
}
.summary-text[data-v-c21c08c2] {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
}
.summary-size[data-v-c21c08c2] {
font-size: 11px;
color: #64748b;
font-family: monospace;
}
.btn-continue-add[data-v-c21c08c2] {
background: none;
border: none;
color: #93c5fd;
font-size: 12px;
font-weight: 600;
cursor: pointer;
padding: 6px 12px;
margin-left: auto;
transition: opacity 0.2s;
}
.btn-continue-add[data-v-c21c08c2]:hover {
opacity: 0.8;
}
.hidden-file-input[data-v-c21c08c2] {
display: none;
}
/* 右侧：精细表单 */
.upload-right-col[data-v-c21c08c2] {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.form-fields-stack[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-item[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-label[data-v-c21c08c2] {
display: flex;
flex-direction: column;
gap: 2px;
}
.label-zh[data-v-c21c08c2] {
font-size: 13px;
font-weight: 500;
color: #94a3b8;
letter-spacing: 0.02em;
}
.label-en[data-v-c21c08c2] {
font-size: 9px;
font-family: monospace;
color: #475569;
letter-spacing: 0.12em;
font-weight: 700;
}
.form-input[data-v-c21c08c2] {
width: 100%;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #f1f5f9;
outline: none;
transition: all 0.25s ease;
}
.form-input[data-v-c21c08c2]:focus {
border-color: rgba(147, 197, 253, 0.4);
background: rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(147, 197, 253, 0.15);
}
.select-wrapper[data-v-c21c08c2] {
position: relative;
width: 100%;
}
.region-autocomplete[data-v-c21c08c2] {
position: relative;
}
.region-options[data-v-c21c08c2] {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 5;
max-height: 240px;
overflow-y: auto;
background: rgba(10, 14, 24, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
padding: 6px;
}
.region-option[data-v-c21c08c2],
.region-empty[data-v-c21c08c2] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
color: #e2e8f0;
}
.region-option[data-v-c21c08c2]:hover {
background: rgba(147, 197, 253, 0.12);
cursor: pointer;
}
.region-empty[data-v-c21c08c2] {
color: #64748b;
}
.region-create[data-v-c21c08c2] {
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin-top: 4px;
padding-top: 12px;
color: #93c5fd;
}
.region-name[data-v-c21c08c2] {
font-weight: 600;
color: #f1f5f9;
}
.region-code[data-v-c21c08c2] {
font-family: monospace;
font-size: 11px;
color: #94a3b8;
}
.select-arrow[data-v-c21c08c2] {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-30%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #64748b;
pointer-events: none;
}
/* 底部控制台 */
.form-actions[data-v-c21c08c2] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 14px;
margin-top: auto;
padding-top: 32px;
}
.btn-cancel[data-v-c21c08c2] {
padding: 14px 0;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
color: #94a3b8;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel[data-v-c21c08c2]:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.btn-submit[data-v-c21c08c2] {
padding: 14px 0;
border-radius: 12px;
background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
border: none;
color: #0f172a;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 0 8px 24px -6px rgba(147, 197, 253, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-submit[data-v-c21c08c2]:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -4px rgba(147, 197, 253, 0.65);
filter: brightness(1.05);
}
.btn-submit[data-v-c21c08c2]:active {
transform: translateY(0);
}
.btn-submit[data-v-c21c08c2]:disabled {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.02);
color: #475569;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
}
.btn-cancel[data-v-c21c08c2]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* 上传进度条 */
.upload-progress[data-v-c21c08c2] {
margin-top: auto;
margin-bottom: 16px;
}
.progress-bar[data-v-c21c08c2] {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.08);
border-radius: 2px;
overflow: hidden;
margin-bottom: 8px;
}
.progress-fill[data-v-c21c08c2] {
height: 100%;
background: linear-gradient(90deg, #93c5fd, #60a5fa);
border-radius: 2px;
transition: width 0.3s ease;
}
.progress-text[data-v-c21c08c2] {
font-size: 11px;
color: #64748b;
font-family: monospace;
}
/* 上传结果提示 */
.upload-result[data-v-c21c08c2] {
margin-top: auto;
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
text-align: center;
}
.result-success[data-v-c21c08c2] {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #4ade80;
}
.result-error[data-v-c21c08c2] {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
color: #f87171;
}
.float-window[data-v-b7baa739] {
position: fixed;
z-index: 1000;
width: 520px;
max-width: 92vw;
user-select: none;
}
.float-window[data-v-b7baa739] * {
box-sizing: border-box;
}
.create-modal-glass[data-v-b7baa739] {
width: 100%;
background: rgba(23, 30, 43, 0.85);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
padding: 40px;
box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.modal-header[data-v-b7baa739] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
cursor: move;
}
.header-title[data-v-b7baa739] {
display: flex;
flex-direction: column;
gap: 6px;
}
.title-zh[data-v-b7baa739] {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.title-en[data-v-b7baa739] {
font-size: 11px;
font-family: monospace;
color: #64748b;
letter-spacing: 0.18em;
font-weight: 700;
}
.btn-close[data-v-b7baa739] {
background: none;
border: none;
color: #64748b;
font-size: 16px;
cursor: pointer;
transition: color 0.2s;
padding: 4px;
}
.btn-close[data-v-b7baa739]:hover {
color: #ffffff;
}
.modal-body[data-v-b7baa739] {
display: flex;
flex-direction: column;
gap: 32px;
}
.form-fields-stack[data-v-b7baa739] {
display: flex;
flex-direction: column;
gap: 22px;
}
.form-item[data-v-b7baa739] {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-label[data-v-b7baa739] {
display: flex;
flex-direction: column;
gap: 2px;
}
.label-zh[data-v-b7baa739] {
font-size: 13px;
font-weight: 500;
color: #94a3b8;
letter-spacing: 0.02em;
}
.label-en[data-v-b7baa739] {
font-size: 9px;
font-family: monospace;
color: #475569;
letter-spacing: 0.12em;
font-weight: 700;
}
.form-input[data-v-b7baa739] {
width: 100%;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #f1f5f9;
outline: none;
transition: all 0.25s ease;
}
.form-input[data-v-b7baa739]:focus {
border-color: rgba(147, 197, 253, 0.4);
background: rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(147, 197, 253, 0.15);
}
.form-textarea[data-v-b7baa739] {
width: 100%;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #f1f5f9;
outline: none;
resize: none;
font-family: inherit;
transition: all 0.25s ease;
}
.form-textarea[data-v-b7baa739]:focus {
border-color: rgba(147, 197, 253, 0.4);
background: rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(147, 197, 253, 0.15);
}
.toggle-btn[data-v-b7baa739] {
padding: 8px 20px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.25);
color: #64748b;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.toggle-btn.active[data-v-b7baa739] {
background: rgba(147, 197, 253, 0.15);
border-color: rgba(147, 197, 253, 0.4);
color: #93c5fd;
}
.form-actions[data-v-b7baa739] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 14px;
}
.btn-cancel[data-v-b7baa739] {
padding: 14px 0;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
color: #94a3b8;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel[data-v-b7baa739]:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.btn-submit[data-v-b7baa739] {
padding: 14px 0;
border-radius: 12px;
background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
border: none;
color: #0f172a;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 0 8px 24px -6px rgba(147, 197, 253, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-submit[data-v-b7baa739]:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -4px rgba(147, 197, 253, 0.65);
filter: brightness(1.05);
}
.btn-submit[data-v-b7baa739]:disabled {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.02);
color: #475569;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex: 1;
/* 让路由内容撑满剩余空间 */
padding-top: 5rem;
/* 防止内容被固定导航栏遮挡 */
}
.cards-container[data-v-e7c2d0ed] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2rem;
flex: 1.2;
margin-bottom: -4rem;
align-self: flex-end;
}
.cards-section[data-v-e7c2d0ed] {
display: flex;
gap: 2.5rem;
justify-content: flex-end;
}
.collection-card[data-v-e7c2d0ed] {
position: relative;
width: 260px;
height: 380px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
cursor: pointer;
filter: brightness(0.6);
transform: scale(0.95);
animation: fadeLeft-e7c2d0ed 1s ease forwards;
background-color: #0b101e;
}
.collection-card[data-v-e7c2d0ed]:nth-child(1) {
animation-delay: 0.2s;
}
.collection-card[data-v-e7c2d0ed]:nth-child(2) {
animation-delay: 0.4s;
}
.collection-card[data-v-e7c2d0ed]:nth-child(3) {
animation-delay: 0.6s;
}
.collection-card.is-active[data-v-e7c2d0ed],
.collection-card[data-v-e7c2d0ed]:hover {
filter: brightness(1);
transform: scale(1) translateY(-15px);
}
.collection-card.is-active[data-v-e7c2d0ed] {
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.6);
}
.card-img[data-v-e7c2d0ed] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.collection-card:hover .card-img[data-v-e7c2d0ed],
.collection-card.is-active .card-img[data-v-e7c2d0ed] {
transform: scale(1.08);
}
.card-overlay[data-v-e7c2d0ed] {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 60%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 1.5rem;
pointer-events: none;
}
.card-subtitle[data-v-e7c2d0ed] {
font-size: 0.7rem;
letter-spacing: 1px;
color: #a0aec0;
margin-bottom: 0.25rem;
text-transform: uppercase;
}
.card-title[data-v-e7c2d0ed] {
font-size: 1.2rem;
font-weight: 500;
margin: 0;
color: #fff;
}
.carousel-controls[data-v-e7c2d0ed] {
display: flex;
gap: 1rem;
margin-right: 1rem;
margin-bottom: 1rem;
}
.control-btn[data-v-e7c2d0ed] {
width: 44px;
height: 44px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: transparent;
color: #fff;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
.control-btn[data-v-e7c2d0ed]:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.8);
}
@keyframes fadeLeft-e7c2d0ed {
from {
opacity: 0;
transform: translateX(30px) scale(0.95);
filter: brightness(0.6);
}
to {
opacity: 1;
transform: translateX(0) scale(0.95);
filter: brightness(0.6);
}
}
@media (max-width: 1200px) {
.cards-container[data-v-e7c2d0ed] {
width: 100%;
align-items: center;
margin-bottom: 0;
}
.cards-section[data-v-e7c2d0ed] {
width: 100%;
overflow-x: auto;
padding-bottom: 2rem;
justify-content: flex-start;
}
}
.viewfinder-section[data-v-12709036] {
display: flex;
justify-content: center;
padding: 6rem 2rem 4rem;
}
.viewfinder[data-v-12709036] {
display: flex;
align-items: center;
gap: 0;
}
.vf-body[data-v-12709036] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
/* 取景器屏幕 */
.vf-screen[data-v-12709036] {
position: relative;
width: min(72vw, 640px);
aspect-ratio: 3/2;
background: #000;
border-radius: 8px;
overflow: hidden;
border: 2px solid #2a2a2a;
box-shadow:
inset 0 0 30px rgba(0, 0, 0, 0.5),
0 8px 32px rgba(0, 0, 0, 0.4);
}
.vf-image[data-v-12709036] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 切换动画 */
.vf-fade-enter-active[data-v-12709036],
.vf-fade-leave-active[data-v-12709036] {
transition: opacity 0.8s ease;
}
.vf-fade-enter-from[data-v-12709036],
.vf-fade-leave-to[data-v-12709036] {
opacity: 0;
}
.vf-fade-leave-active[data-v-12709036] {
position: absolute;
inset: 0;
}
/* 取景器叠加层 */
.vf-overlay[data-v-12709036] {
position: absolute;
inset: 0;
pointer-events: none;
}
/* 九宫格 */
.vf-grid-line[data-v-12709036] {
position: absolute;
background: rgba(255, 255, 255, 0.12);
}
.vf-grid-line.vh[data-v-12709036] {
top: 0;
bottom: 0;
left: 33.33%;
width: 1px;
}
.vf-grid-line.hh[data-v-12709036] {
left: 0;
right: 0;
top: 33.33%;
height: 1px;
}
/* 对焦点 */
.vf-focus-point[data-v-12709036] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
}
.vf-focus-corner[data-v-12709036] {
position: absolute;
width: 14px;
height: 14px;
border-color: rgba(255, 255, 255, 0.7);
border-style: solid;
border-width: 0;
}
.vf-focus-corner.tl[data-v-12709036] { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px;
}
.vf-focus-corner.tr[data-v-12709036] { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px;
}
.vf-focus-corner.bl[data-v-12709036] { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px;
}
.vf-focus-corner.br[data-v-12709036] { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px;
}
/* 角落标记 */
.vf-corner-mark[data-v-12709036] {
position: absolute;
color: rgba(255, 255, 255, 0.2);
font-size: 1.5rem;
font-family: monospace;
line-height: 1;
}
.vf-corner-mark.tl[data-v-12709036] { top: 8px; left: 10px;
}
.vf-corner-mark.tr[data-v-12709036] { top: 8px; right: 10px;
}
.vf-corner-mark.bl[data-v-12709036] { bottom: 8px; left: 10px;
}
.vf-corner-mark.br[data-v-12709036] { bottom: 8px; right: 10px;
}
/* 信息文字 */
.vf-info-top[data-v-12709036],
.vf-info-bottom[data-v-12709036] {
position: absolute;
left: 16px;
right: 16px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'SF Mono', 'Consolas', monospace;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.5px;
pointer-events: none;
}
.vf-info-top[data-v-12709036] {
top: 12px;
}
.vf-info-bottom[data-v-12709036] {
bottom: 12px;
}
.vf-dot[data-v-12709036] {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #e53e3e;
margin-right: 8px;
animation: pulse-dot-12709036 2s ease-in-out infinite;
}
@keyframes pulse-dot-12709036 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.3;
}
}
.vf-counter[data-v-12709036] {
color: rgba(255, 255, 255, 0.4);
}
/* 快门按钮 */
.vf-shutter[data-v-12709036] {
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.1s;
}
.vf-shutter[data-v-12709036]:active {
transform: scale(0.92);
}
.vf-shutter[data-v-12709036]:disabled {
cursor: not-allowed;
}
.vf-shutter-ring[data-v-12709036] {
width: 56px;
height: 56px;
border-radius: 50%;
border: 3px solid #555;
display: grid;
place-items: center;
transition: border-color 0.2s;
}
.vf-shutter:hover .vf-shutter-ring[data-v-12709036] {
border-color: #999;
}
.vf-shutter-btn[data-v-12709036] {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(145deg, #666, #444);
border: 2px solid #555;
transition: background 0.2s;
}
.vf-shutter:hover .vf-shutter-btn[data-v-12709036] {
background: linear-gradient(145deg, #777, #555);
}
/* 快门动画 */
.is-shooting .vf-screen[data-v-12709036] {
animation: shutter-flash-12709036 0.6s ease;
}
@keyframes shutter-flash-12709036 {
0% { filter: brightness(1);
}
15% { filter: brightness(0.1);
}
30% { filter: brightness(1.2);
}
100% { filter: brightness(1);
}
}
/* 侧面拨轮 */
.vf-dial[data-v-12709036] {
width: 28px;
height: 80px;
background: linear-gradient(180deg, #4a4a4a, #333, #4a4a4a);
border-radius: 4px;
margin-left: -2px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
border: 1px solid #555;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
}
.vf-dial-notch[data-v-12709036] {
width: 18px;
height: 2px;
background: #666;
border-radius: 1px;
}
@media (max-width: 760px) {
.vf-screen[data-v-12709036] {
width: min(92vw, 400px);
}
}
.footprint-preview[data-v-aea73f09] {
position: relative;
z-index: 1;
width: 95%;
max-width: 1700px;
margin: 0 auto;
padding: 2rem 0 4rem;
}
.preview-inner[data-v-aea73f09] {
display: flex;
align-items: center;
gap: 48px;
}
.map-side[data-v-aea73f09] {
flex: 1;
max-width: 1200px;
cursor: pointer;
background: #0f1729;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.map-side[data-v-aea73f09]:hover {
transform: translateY(-3px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.map-svg[data-v-aea73f09] {
width: 100%;
height: auto;
display: block;
}
.text-side[data-v-aea73f09] {
flex: 0 0 320px;
}
.preview-label[data-v-aea73f09] {
font-size: 0.7rem;
letter-spacing: 0.3em;
color: #64748b;
font-weight: 500;
}
.preview-title[data-v-aea73f09] {
font-size: 1.8rem;
font-weight: 600;
margin: 0.4rem 0 1rem;
letter-spacing: 0.5px;
}
.preview-desc[data-v-aea73f09] {
font-size: 0.95rem;
color: #94a3b8;
line-height: 1.7;
margin: 0 0 1.2rem;
}
.preview-desc strong[data-v-aea73f09] {
color: #e2e8f0;
font-weight: 600;
}
.place-tags[data-v-aea73f09] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 1.5rem;
}
.place-tag[data-v-aea73f09] {
padding: 4px 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
font-size: 0.8rem;
color: #94a3b8;
}
.explore-link[data-v-aea73f09] {
background: none;
border: none;
color: #f59e0b;
font-size: 0.9rem;
cursor: pointer;
padding: 0;
transition: color 0.2s;
}
.explore-link[data-v-aea73f09]:hover {
color: #fbbf24;
}
.marker-glow[data-v-aea73f09] {
animation: pulse-aea73f09 2.5s ease-in-out infinite;
}
@keyframes pulse-aea73f09 {
0%,
100% {
opacity: 0.1;
}
50% {
opacity: 0.35;
}
}
@media (max-width: 900px) {
.preview-inner[data-v-aea73f09] {
flex-direction: column;
gap: 24px;
}
.text-side[data-v-aea73f09] {
flex: none;
width: 100%;
}
}
.home-container[data-v-80e5e073] {
position: relative;
min-height: 100vh;
margin-top: -5rem;
padding-top: 5rem;
overflow: hidden;
}
.hero-bg[data-v-80e5e073] {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100vh;
background-size: cover;
background-position: center;
z-index: 0;
}
.hero-bg[data-v-80e5e073]::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(11, 16, 30, 0.95) 0%, rgba(11, 16, 30, 0.4) 50%, transparent 100%),
linear-gradient(to bottom, transparent 60%, rgba(11, 16, 30, 0.9) 90%, #0b101e 100%);
}
.hero-content[data-v-80e5e073] {
position: relative;
z-index: 1;
width: 95%;
max-width: 1700px;
margin: 0 auto;
padding: 8rem 0 2rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 5%;
min-height: 80vh;
}
.text-section[data-v-80e5e073] {
flex: 1;
max-width: 600px;
margin-top: -3rem;
}
.pre-title[data-v-80e5e073] {
font-size: 0.875rem;
letter-spacing: 0.3em;
color: #a0aec0;
margin-bottom: 1.5rem;
font-weight: 500;
}
.main-title[data-v-80e5e073] {
font-size: 4.5rem;
line-height: 1.2;
font-weight: 600;
margin-bottom: 2rem;
letter-spacing: 2px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.desc[data-v-80e5e073] {
font-size: 1.15rem;
line-height: 1.9;
color: #cbd5e0;
margin-bottom: 3rem;
}
.explore-btn[data-v-80e5e073] {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 1.2rem 2.5rem;
border-radius: 999px;
font-size: 0.875rem;
letter-spacing: 1px;
cursor: pointer;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.explore-btn[data-v-80e5e073]:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(5px);
border-color: rgba(255, 255, 255, 0.4);
}
.bg-fade-enter-active[data-v-80e5e073],
.bg-fade-leave-active[data-v-80e5e073] {
transition: opacity 1s ease-in-out;
}
.bg-fade-enter-from[data-v-80e5e073],
.bg-fade-leave-to[data-v-80e5e073] {
opacity: 0;
}
.bg-fade-leave-active[data-v-80e5e073] {
position: absolute;
z-index: -1;
}
.text-fade-enter-active[data-v-80e5e073],
.text-fade-leave-active[data-v-80e5e073] {
transition: all 0.5s ease;
}
.text-fade-enter-from[data-v-80e5e073] {
opacity: 0;
transform: translateY(20px);
}
.text-fade-leave-to[data-v-80e5e073] {
opacity: 0;
transform: translateY(-20px);
}
@keyframes fadeUp-80e5e073 {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1200px) {
.hero-content[data-v-80e5e073] {
flex-direction: column;
align-items: flex-start;
padding-top: 4rem;
}
}
.accordion-gallery[data-v-60190c59] {
display: flex;
gap: 1rem;
height: 480px;
margin-bottom: 6rem;
}
.gallery-item[data-v-60190c59] {
flex: 1;
background-size: cover;
background-position: center;
border-radius: 12px;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
filter: grayscale(0.8) brightness(0.7);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.gallery-item.active[data-v-60190c59] {
flex: 3.5;
filter: grayscale(0) brightness(1);
}
.gallery-item[data-v-60190c59]:hover {
filter: grayscale(0.3) brightness(0.9);
}
.timeline-section[data-v-7363ba06] {
margin-top: 4rem;
}
.timeline-header[data-v-7363ba06] {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 1.5rem;
margin-bottom: 4rem;
margin-left: 160px;
}
.section-title[data-v-7363ba06] {
font-size: 2.2rem;
font-style: italic;
font-weight: bold;
margin: 0;
color: #fff;
}
.latest-entries[data-v-7363ba06] {
font-size: 0.75rem;
letter-spacing: 1px;
color: #a0aec0;
font-weight: bold;
}
.timeline-container[data-v-7363ba06] {
display: flex;
flex-direction: column;
gap: 4rem;
position: relative;
}
.vertical-line[data-v-7363ba06] {
position: absolute;
left: 60px;
top: 0;
bottom: 0;
width: 1px;
background-color: rgba(255, 255, 255, 0.1);
z-index: 0;
}
.timeline-item[data-v-7363ba06] {
display: flex;
align-items: center;
position: relative;
z-index: 1;
}
.timeline-left[data-v-7363ba06] {
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.time-label[data-v-7363ba06] {
font-size: 0.75rem;
font-weight: bold;
color: #64748b;
margin-bottom: 10px;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
}
.dot[data-v-7363ba06] {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #64748b;
}
.timeline-item:hover .dot[data-v-7363ba06] {
background-color: #e2e8f0;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.timeline-item:hover .time-label[data-v-7363ba06] {
color: #e2e8f0;
}
.timeline-right[data-v-7363ba06] {
flex: 1;
display: flex;
gap: 2.5rem;
align-items: center;
margin-left: 40px;
}
.blog-img-placeholder[data-v-7363ba06] {
width: 320px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px dashed rgba(255, 255, 255, 0.15);
color: #64748b;
font-size: 0.9rem;
}
.blog-img[data-v-7363ba06] {
width: 320px;
height: 200px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
filter: grayscale(0.6);
transition: all 0.4s ease;
cursor: pointer;
}
.timeline-item:hover .blog-img[data-v-7363ba06] {
filter: grayscale(0);
transform: translateY(-5px);
}
.blog-content[data-v-7363ba06] {
flex: 1;
}
.blog-meta[data-v-7363ba06] {
font-size: 0.8rem;
font-weight: bold;
margin-bottom: 1rem;
letter-spacing: 0.5px;
}
.blog-meta .date[data-v-7363ba06] {
color: #f6ad55;
}
.blog-meta .separator[data-v-7363ba06] {
color: #4a5568;
margin: 0 0.5rem;
}
.blog-meta .category[data-v-7363ba06] {
color: #63b3ed;
}
.blog-title[data-v-7363ba06] {
font-size: 1.6rem;
font-weight: bold;
margin: 0 0 1rem;
color: #fff;
}
.blog-desc[data-v-7363ba06] {
color: #a0aec0;
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: 1.5rem;
}
.view-entry[data-v-7363ba06] {
color: #e2e8f0;
text-decoration: none;
font-size: 0.85rem;
font-weight: bold;
display: inline-flex;
align-items: center;
transition: color 0.3s;
}
.view-entry[data-v-7363ba06]:hover {
color: #f6ad55;
}
.load-more[data-v-7363ba06] {
text-align: center;
margin-top: 6rem;
}
.load-btn[data-v-7363ba06] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: #a0aec0;
padding: 1rem 3rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.3s;
}
.load-btn[data-v-7363ba06]:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
@media (max-width: 1024px) {
.timeline-header[data-v-7363ba06] {
margin-left: 0;
}
.timeline-right[data-v-7363ba06] {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.blog-img[data-v-7363ba06],
.blog-img-placeholder[data-v-7363ba06] {
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
.archive-page[data-v-77a435ed] {
margin-top: -5rem;
padding-top: 8rem;
padding-bottom: 5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.archive-wrapper[data-v-77a435ed] {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* 头部样式 */
.header-section[data-v-77a435ed] {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
}
.page-title[data-v-77a435ed] {
font-size: 3rem;
font-style: italic;
font-weight: 900;
margin: 0 0 0.5rem;
letter-spacing: 2px;
}
.page-subtitle[data-v-77a435ed] {
color: #8c9baf;
font-size: 0.85rem;
letter-spacing: 2px;
font-weight: 600;
}
.header-right[data-v-77a435ed] {
text-align: right;
color: #cbd5e0;
font-size: 0.9rem;
line-height: 1.8;
max-width: 400px;
}
@media (max-width: 1024px) {
.header-section[data-v-77a435ed] {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.header-right[data-v-77a435ed] {
text-align: left;
}
}
.folder-card[data-v-ecfe9235] {
position: relative;
aspect-ratio: 1.4 / 1;
border-radius: 16px;
overflow: hidden;
background-color: #161b22;
border: 1px solid rgba(255, 255, 255, 0.03);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease;
display: flex;
flex-direction: column;
}
.folder-card[data-v-ecfe9235]:hover {
transform: translateY(-2px);
border-color: rgba(255, 255, 255, 0.08);
}
.folder-cover[data-v-ecfe9235] {
flex: 1;
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
display: flex;
align-items: center;
justify-content: center;
}
.folder-cover img[data-v-ecfe9235] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.folder-card:hover .folder-cover img[data-v-ecfe9235] {
transform: scale(1.02);
}
.folder-empty-hint[data-v-ecfe9235] {
color: #3a4150;
font-size: 13px;
}
.folder-info[data-v-ecfe9235] {
padding: 14px 16px;
background: linear-gradient(to top, #1a2030, #161b22);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.folder-name[data-v-ecfe9235] {
font-size: 14px;
font-weight: 600;
color: #ffffff;
margin: 0 0 4px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.folder-meta[data-v-ecfe9235] {
font-size: 10px;
font-family: monospace;
color: #64748b;
margin: 0;
letter-spacing: 0.05em;
}
.folder-info[data-v-ecfe9235] {
position: relative;
}
.btn-delete[data-v-ecfe9235] {
position: absolute;
top: 12px;
right: 12px;
background: transparent;
border: none;
color: #4b5563;
cursor: pointer;
padding: 4px;
border-radius: 4px;
opacity: 0;
transition: all 0.2s;
}
.folder-card:hover .btn-delete[data-v-ecfe9235] {
opacity: 1;
}
.btn-delete[data-v-ecfe9235]:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
/* 弹窗样式 */
.modal-overlay[data-v-ecfe9235] {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
}
.modal-box[data-v-ecfe9235] {
background: #1a2235;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 28px;
width: 320px;
text-align: center;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.modal-title[data-v-ecfe9235] {
font-size: 16px;
font-weight: 600;
color: #e5e7eb;
margin: 0 0 8px;
}
.modal-desc[data-v-ecfe9235] {
font-size: 13px;
color: #9ca3af;
margin: 0 0 20px;
line-height: 1.5;
}
.modal-actions[data-v-ecfe9235] {
display: flex;
gap: 12px;
justify-content: center;
}
.modal-btn[data-v-ecfe9235] {
padding: 8px 24px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.modal-btn.cancel[data-v-ecfe9235] {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #9ca3af;
}
.modal-btn.cancel[data-v-ecfe9235]:hover {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.modal-btn.confirm[data-v-ecfe9235] {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #e5e7eb;
}
.modal-btn.confirm[data-v-ecfe9235]:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.modal-loading[data-v-ecfe9235] {
color: #6b7280;
font-size: 13px;
margin-bottom: 20px;
}
.modal-warn[data-v-ecfe9235] {
margin-bottom: 20px;
}
.modal-warn p[data-v-ecfe9235] {
margin: 0 0 4px;
color: #e5e7eb;
font-size: 14px;
}
.modal-warn strong[data-v-ecfe9235] {
color: #f59e0b;
}
.warn-hint[data-v-ecfe9235] {
color: #6b7280;
font-size: 12px;
}
.modal-enter-active[data-v-ecfe9235],
.modal-leave-active[data-v-ecfe9235] {
transition: opacity 0.2s ease;
}
.modal-enter-active .modal-box[data-v-ecfe9235],
.modal-leave-active .modal-box[data-v-ecfe9235] {
transition: transform 0.2s ease;
}
.modal-enter-from[data-v-ecfe9235],
.modal-leave-to[data-v-ecfe9235] {
opacity: 0;
}
.modal-enter-from .modal-box[data-v-ecfe9235],
.modal-leave-to .modal-box[data-v-ecfe9235] {
transform: scale(0.95);
}
.placeholder-card[data-v-ca0ac4db] {
aspect-ratio: 1.4 / 1;
border-radius: 16px;
border: 1px dashed rgba(255, 255, 255, 0.04);
background-color: rgba(255, 255, 255, 0.005);
display: flex;
align-items: center;
justify-content: center;
}
.placeholder-content[data-v-ca0ac4db] {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.folder-icon[data-v-ca0ac4db] {
font-size: 24px;
color: #21262d;
margin-bottom: 12px;
opacity: 0.6;
}
.placeholder-main[data-v-ca0ac4db] {
font-size: 18px;
color: #485260;
margin-bottom: 16px;
}
.placeholder-actions[data-v-ca0ac4db] {
display: flex;
gap: 8px;
}
.btn-p-action[data-v-ca0ac4db] {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 6px;
padding: 6px 12px;
font-size: 15px;
font-weight: 700;
font-family: monospace;
color: #485260;
cursor: pointer;
transition: all 0.2s;
}
.btn-p-action[data-v-ca0ac4db]:hover {
background-color: rgba(255, 255, 255, 0.05);
color: #8b949e;
}
.pagination-footer[data-v-39ca915f] {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.page-arrow[data-v-39ca915f] {
background: transparent;
border: none;
color: #4b5563;
font-size: 14px;
cursor: pointer;
font-family: monospace;
}
.page-arrow[data-v-39ca915f]:disabled {
cursor: not-allowed;
opacity: 0.3;
}
.page-numbers[data-v-39ca915f] {
display: flex;
align-items: center;
gap: 4px;
}
.page-num-btn[data-v-39ca915f] {
background: transparent;
border: none;
width: 32px;
height: 32px;
border-radius: 8px;
color: #8b949e;
font-size: 12px;
font-family: monospace;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.page-num-btn[data-v-39ca915f]:hover:not(:disabled) {
color: #ffffff;
}
.page-num-btn.active[data-v-39ca915f] {
background-color: #ffffff;
color: #0d0f12;
font-weight: 700;
}
.page-num-btn.is-dot[data-v-39ca915f] {
color: #4b5563;
cursor: default;
}
.upload-box-card[data-v-c18d11df] {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 24px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 24px;
}
.cloud-icon-circle[data-v-c18d11df] {
width: 44px;
height: 44px;
border-radius: 12px;
background-color: rgba(255, 255, 255, 0.04);
display: flex;
align-items: center;
justify-content: center;
color: #8b949e;
margin-bottom: 16px;
}
.icon-svg[data-v-c18d11df] {
width: 22px;
height: 22px;
}
.upload-title[data-v-c18d11df] {
font-size: 13px;
font-weight: 600;
color: #e5e7eb;
}
.upload-formats[data-v-c18d11df] {
font-size: 10px;
font-family: monospace;
color: #4b5563;
margin-top: 4px;
letter-spacing: 0.05em;
}
.btn-batch-upload[data-v-c18d11df] {
width: 100%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 10px 0;
color: #d1d5db;
font-size: 12px;
font-weight: 600;
margin-top: 20px;
cursor: pointer;
transition: all 0.2s;
}
.btn-batch-upload[data-v-c18d11df]:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.time-filter[data-v-bdd87d03] {
position: relative;
}
.filter-trigger[data-v-bdd87d03] {
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 10px 16px;
font-size: 12px;
color: #8b949e;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.2s;
}
.filter-trigger[data-v-bdd87d03]:hover {
border-color: rgba(255, 255, 255, 0.1);
}
.arrow-down[data-v-bdd87d03] {
font-size: 8px;
color: #4b5563;
transform: scale(0.8);
transition: transform 0.2s;
}
.arrow-down.rotated[data-v-bdd87d03] {
transform: scale(0.8) rotate(180deg);
}
.filter-dropdown[data-v-bdd87d03] {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 180px;
background-color: #161b22;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
z-index: 100;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.filter-year[data-v-bdd87d03] {
font-size: 10px;
font-family: monospace;
font-weight: 700;
color: #4b5563;
letter-spacing: 0.08em;
padding: 8px 10px 4px;
}
.filter-option[data-v-bdd87d03] {
width: 100%;
background: transparent;
border: none;
padding: 8px 10px;
border-radius: 8px;
font-size: 12px;
color: #8b949e;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.15s;
}
.filter-option[data-v-bdd87d03]:hover {
background-color: rgba(255, 255, 255, 0.04);
color: #ffffff;
}
.filter-option.active[data-v-bdd87d03] {
background-color: rgba(255, 255, 255, 0.06);
color: #ffffff;
font-weight: 600;
}
.month-count[data-v-bdd87d03] {
font-size: 10px;
font-family: monospace;
color: #4b5563;
}
.search-input-wrapper[data-v-cd255a3d] {
position: relative;
flex-grow: 1;
max-width: 320px;
}
.search-icon[data-v-cd255a3d] {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%) scale(0.85);
opacity: 0.4;
}
.search-input-wrapper input[data-v-cd255a3d] {
width: 100%;
background-color: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 10px 14px 10px 38px;
font-size: 12px;
color: #ffffff;
outline: none;
}
/* ==========================================================================
1. 页面大框架基座 Layout
========================================================================== */
.drafts-dashboard[data-v-8ad7f0e4] {
min-height: 100vh;
color: #c9d1d9;
display: grid;
grid-template-columns: 280px 1fr;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
margin-top: -5rem;
padding: 5rem 60px 0 60px;
}
.drafts-dashboard[data-v-8ad7f0e4] * {
box-sizing: border-box;
}
@media (max-width: 1024px) {
.drafts-dashboard[data-v-8ad7f0e4] {
grid-template-columns: 1fr;
padding: 5rem 24px 0 24px;
}
.sidebar-panel[data-v-8ad7f0e4] {
display: none;
}
}
@media (max-width: 768px) {
.drafts-dashboard[data-v-8ad7f0e4] {
padding: 5rem 16px 0 16px;
}
.content-main[data-v-8ad7f0e4] {
padding: 20px 0;
}
.assets-grid-flow[data-v-8ad7f0e4] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.top-filter-bar[data-v-8ad7f0e4] {
flex-wrap: wrap;
gap: 10px;
}
}
@media (max-width: 480px) {
.assets-grid-flow[data-v-8ad7f0e4] {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
2. 左侧控制面板样式栏 (Sidebar Panel)
========================================================================== */
.sidebar-panel[data-v-8ad7f0e4] {
padding: 40px 24px;
border-right: 1px solid rgba(255, 255, 255, 0.03);
display: flex;
flex-direction: column;
}
.brand-header[data-v-8ad7f0e4] {
margin-bottom: 12px;
}
.main-title-zh[data-v-8ad7f0e4] {
font-size: 34px;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.brand-sub[data-v-8ad7f0e4] {
display: flex;
gap: 10px;
margin-top: 4px;
font-family: monospace;
font-size: 13px;
}
.sub-en[data-v-8ad7f0e4] {
color: #4b5563;
letter-spacing: 0.1em;
}
.sub-count[data-v-8ad7f0e4] {
color: #8b949e;
}
.highlight-num[data-v-8ad7f0e4] {
font-weight: 700;
color: #ffffff;
}
.panel-desc[data-v-8ad7f0e4] {
font-size: 12px;
line-height: 1.6;
color: #57606a;
margin: 0 0 32px 0;
}
/* ==========================================================================
3. 右侧：工作流面板主内容区 (Main Panel)
========================================================================== */
.content-main[data-v-8ad7f0e4] {
padding: 40px;
display: flex;
flex-direction: column;
}
/* 顶部过滤器行 */
.top-filter-bar[data-v-8ad7f0e4] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
/* 视图切换键 */
.view-toggle-btns[data-v-8ad7f0e4] {
display: flex;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.04);
padding: 3px;
border-radius: 8px;
}
.view-btn[data-v-8ad7f0e4] {
background: transparent;
border: none;
padding: 6px;
border-radius: 6px;
color: #4b5563;
cursor: pointer;
display: flex;
align-items: center;
}
.view-btn.active[data-v-8ad7f0e4] {
background-color: rgba(255, 255, 255, 0.06);
color: #ffffff;
}
.v-icon[data-v-8ad7f0e4] {
width: 14px;
height: 14px;
}
/* ==========================================================================
4. 图片内容流列表 (Assets Flow Grid)
========================================================================== */
.assets-grid-flow[data-v-8ad7f0e4] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: start;
}
.location-card[data-v-121493b9] {
position: absolute;
width: min(525px, 34vw);
padding: 28px 30px 30px;
border: 1px solid rgba(245, 158, 11, 0.58);
border-radius: 12px;
background: rgba(4, 7, 13, 0.9);
box-shadow: 0 0 24px rgba(234, 88, 12, 0.22), 0 22px 70px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(14px);
cursor: default;
}
.close-btn[data-v-121493b9] {
position: absolute;
top: 10px;
right: 14px;
width: 28px;
height: 28px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
color: #9ca7b8;
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
}
.close-btn[data-v-121493b9]:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.card-heading[data-v-121493b9] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 24px;
}
.card-heading h1[data-v-121493b9] {
margin: 0;
font-size: 1.85rem;
line-height: 1.1;
letter-spacing: 0;
}
.card-heading span[data-v-121493b9] {
color: #9ca7b8;
font-size: 0.95rem;
white-space: nowrap;
}
.photo-grid[data-v-121493b9] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.photo-grid img[data-v-121493b9] {
width: 100%;
aspect-ratio: 1.35;
border-radius: 8px;
object-fit: cover;
display: block;
}
.view-all[data-v-121493b9] {
width: 100%;
height: 38px;
margin-top: 20px;
border: 1px solid rgba(245, 158, 11, 0.38);
border-radius: 8px;
background: rgba(245, 158, 11, 0.28);
color: #ffc84a;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 1100px) {
.location-card[data-v-121493b9] {
top: auto;
right: 20px;
bottom: 72px;
left: 20px;
width: auto;
padding: 22px;
}
}
@media (max-width: 680px) {
.card-heading[data-v-121493b9] {
align-items: flex-start;
flex-direction: column;
gap: 6px;
margin-bottom: 16px;
}
.photo-grid[data-v-121493b9] {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
}
.footprints-page[data-v-fbc71f47] {
min-height: 100vh;
margin-top: -5rem;
padding-top: 5rem;
overflow: hidden;
}
.map-stage[data-v-fbc71f47] {
position: relative;
min-height: calc(100vh - 5rem);
overflow: hidden;
background: #050a15;
cursor: grab;
user-select: none;
}
.map-stage.is-dragging[data-v-fbc71f47] {
cursor: grabbing;
}
.travel-map[data-v-fbc71f47] {
width: 100%;
height: calc(100vh - 5rem);
min-height: 720px;
display: block;
}
path[data-v-fbc71f47] {
vector-effect: non-scaling-stroke;
}
path.highlighted[data-v-fbc71f47] {
filter: url(#visited-glow);
}
.map-marker[data-v-fbc71f47] {
cursor: pointer;
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));
transition: opacity 0.2s ease;
}
.map-controls[data-v-fbc71f47] {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
background: rgba(5, 10, 21, 0.88);
border-top: 1px solid rgba(42, 53, 85, 0.82);
backdrop-filter: blur(10px);
cursor: default;
}
.map-controls button[data-v-fbc71f47] {
border: 0;
background: transparent;
color: #8e98aa;
font-size: 0.85rem;
cursor: pointer;
}
.map-controls button[data-v-fbc71f47]:hover {
color: #e5e7eb;
}
.map-controls span[data-v-fbc71f47] {
width: 1px;
height: 14px;
background: #293247;
}
.map-controls p[data-v-fbc71f47] {
margin: 0;
color: #6f7a8d;
font-size: 0.82rem;
}
@media (max-width: 1100px) {
.travel-map[data-v-fbc71f47] {
width: 1250px;
max-width: none;
transform: translateX(-250px);
transform-origin: left center;
}
}
@media (max-width: 680px) {
.travel-map[data-v-fbc71f47] {
width: 1120px;
min-height: 620px;
transform: translateX(-420px);
}
.map-controls[data-v-fbc71f47] {
gap: 10px;
}
}
.image-viewer[data-v-b37a58dd] {
position: relative;
width: 100%;
max-height: 60vh;
border-radius: 20px;
overflow: hidden;
background-color: #020617;
border: 1px solid rgba(255, 255, 255, 0.04);
}
.source-img[data-v-b37a58dd] {
width: 100%;
display: block;
object-fit: contain;
max-height: 60vh;
}
.tags-row[data-v-b37a58dd] {
position: absolute;
top: 20px;
left: 20px;
display: flex;
gap: 10px;
z-index: 2;
}
.viewer-tag[data-v-b37a58dd] {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
padding: 6px 14px;
border-radius: 9999px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
color: #9ca3af;
border: 1px solid rgba(255, 255, 255, 0.06);
display: flex;
align-items: center;
gap: 6px;
}
.pulse-dot[data-v-b37a58dd] {
width: 6px;
height: 6px;
background-color: #22d3ee;
border-radius: 50%;
box-shadow: 0 0 8px #22d3ee;
animation: ripple-b37a58dd 1.8s infinite ease-in-out;
}
@keyframes ripple-b37a58dd {
0%, 100% { opacity: 0.4;
}
50% { opacity: 1;
}
}
.sync-icon[data-v-b37a58dd] {
font-size: 11px;
color: #6b7280;
}
.scan-line[data-v-b37a58dd] {
position: absolute;
bottom: 12%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0) 0%, rgba(34, 211, 238, 0.3) 50%, rgba(34, 211, 238, 0) 100%);
box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
}
.generating-overlay[data-v-b37a58dd] {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.72);
backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
z-index: 5;
}
.neural-spinner[data-v-b37a58dd] {
width: 36px;
height: 36px;
border: 2px solid rgba(34, 211, 238, 0.15);
border-top-color: #22d3ee;
border-radius: 50%;
animation: spin-b37a58dd 0.8s linear infinite;
}
@keyframes spin-b37a58dd {
to { transform: rotate(360deg);
}
}
.generating-text[data-v-b37a58dd] {
font-size: 10px;
font-family: monospace;
letter-spacing: 0.15em;
color: #22d3ee;
animation: blink-b37a58dd 1.4s ease-in-out infinite;
}
@keyframes blink-b37a58dd {
0%, 100% { opacity: 0.4;
}
50% { opacity: 1;
}
}
.meta-spec-bar[data-v-4e7417a9] {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 20px;
}
.specs-group[data-v-4e7417a9] {
display: flex;
gap: 28px;
font-family: monospace;
}
.spec-item[data-v-4e7417a9] {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.spec-label[data-v-4e7417a9] {
font-size: 9px;
color: #4b5563;
font-weight: 700;
margin-bottom: 2px;
}
.spec-value[data-v-4e7417a9] {
font-size: 11px;
color: #ffffff;
font-weight: 600;
}
.mode-tabs-track[data-v-ec87a8d8] {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
background-color: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.04);
padding: 4px;
border-radius: 9999px;
margin-bottom: 20px;
z-index: 1;
}
.tab-btn[data-v-ec87a8d8] {
position: relative;
background: none;
border: none;
padding: 10px 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: #6b7280;
cursor: pointer;
z-index: 3;
transition: color 0.25s ease;
}
.tab-btn.active[data-v-ec87a8d8] {
color: #083344;
}
.tab-slider[data-v-ec87a8d8] {
position: absolute;
top: 4px;
bottom: 4px;
width: calc(50% - 4px);
background-color: #e0f7fa;
border-radius: 9999px;
z-index: 2;
transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.slide-creator[data-v-ec87a8d8] {
transform: translateX(0%);
}
.slide-ai[data-v-ec87a8d8] {
transform: translateX(100%);
}
.panel-fade-in[data-v-0dfdf229] {
animation: fadeIn-0dfdf229 0.35s ease;
}
@keyframes fadeIn-0dfdf229 {
from { opacity: 0; transform: translateY(4px);
}
to { opacity: 1; transform: translateY(0);
}
}
.panel-label[data-v-0dfdf229] {
font-size: 9px;
font-family: monospace;
font-weight: 700;
letter-spacing: 0.12em;
color: #4b5563;
display: block;
margin-bottom: 12px;
}
.perspective-buttons[data-v-0dfdf229] {
display: flex;
gap: 8px;
margin-bottom: 24px;
}
.p-btn[data-v-0dfdf229] {
background: none;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 6px 14px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
font-family: monospace;
color: #9ca3af;
cursor: pointer;
transition: all 0.2s;
}
.p-btn.active[data-v-0dfdf229] {
border-color: rgba(255, 255, 255, 0.3);
color: #ffffff;
background-color: rgba(255, 255, 255, 0.02);
}
.candidate-tabs[data-v-0dfdf229] {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.candidate-tab[data-v-0dfdf229] {
background: none;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 5px 14px;
border-radius: 8px;
font-size: 10px;
font-family: monospace;
color: #6b7280;
cursor: pointer;
transition: all 0.2s;
}
.candidate-tab.active[data-v-0dfdf229] {
border-color: #22d3ee;
color: #22d3ee;
background-color: rgba(34, 211, 238, 0.06);
}
.candidate-tab[data-v-0dfdf229]:hover:not(.active) {
border-color: rgba(255, 255, 255, 0.15);
color: #9ca3af;
}
.no-history-hint[data-v-0dfdf229] {
font-size: 12px;
color: #4b5563;
text-align: center;
padding: 24px 0;
font-family: monospace;
}
.output-narrative[data-v-0dfdf229] {
margin-bottom: 24px;
position: relative;
}
.output-narrative.iterating[data-v-0dfdf229] {
opacity: 0.45;
}
.narrative-title[data-v-0dfdf229] {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
border-left: 2px solid #22d3ee;
padding-left: 10px;
}
.narrative-body[data-v-0dfdf229] {
font-size: 13px;
color: #9ca3af;
line-height: 1.7;
margin: 0;
}
.iterating-bar[data-v-0dfdf229] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
font-size: 10px;
font-family: monospace;
font-weight: 700;
letter-spacing: 0.12em;
color: #22d3ee;
}
.iterating-spinner[data-v-0dfdf229] {
width: 14px;
height: 14px;
border: 2px solid rgba(34, 211, 238, 0.2);
border-top-color: #22d3ee;
border-radius: 50%;
animation: spin-0dfdf229 0.7s linear infinite;
}
@keyframes spin-0dfdf229 {
to { transform: rotate(360deg);
}
}
.select-action[data-v-0dfdf229] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.btn-apply[data-v-0dfdf229] {
padding: 8px 18px;
background: rgba(34, 211, 238, 0.1);
border: 1px solid rgba(34, 211, 238, 0.35);
border-radius: 8px;
font-size: 11px;
font-weight: 700;
color: #22d3ee;
cursor: pointer;
transition: all 0.2s;
}
.btn-apply[data-v-0dfdf229]:hover:not(:disabled) {
background: rgba(34, 211, 238, 0.2);
border-color: #22d3ee;
}
.btn-apply[data-v-0dfdf229]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.save-hint[data-v-0dfdf229] {
font-size: 11px;
font-weight: 600;
color: #34d399;
animation: fadeIn-0dfdf229 0.3s ease;
}
.optimize-header[data-v-0dfdf229] {
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-redraft[data-v-0dfdf229] {
font-size: 10px;
font-family: monospace;
font-weight: 700;
color: #9ca3af;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
}
.mini-icon[data-v-0dfdf229] {
width: 12px;
height: 12px;
}
.input-wrapper[data-v-0dfdf229] {
position: relative;
width: 100%;
margin-top: 6px;
}
.input-wrapper input[data-v-0dfdf229] {
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 12px 40px 12px 14px;
font-size: 12px;
color: #ffffff;
outline: none;
}
.input-wrapper input[data-v-0dfdf229]:focus {
border-color: rgba(34, 211, 238, 0.3);
}
.send-btn[data-v-0dfdf229] {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 14px;
}
.send-btn[data-v-0dfdf229]:hover {
color: #22d3ee;
}
.panel-fade-in[data-v-f29dba85] {
animation: fadeIn-f29dba85 0.35s ease;
}
@keyframes fadeIn-f29dba85 {
from { opacity: 0; transform: translateY(4px);
}
to { opacity: 1; transform: translateY(0);
}
}
.panel-label[data-v-f29dba85] {
font-size: 9px;
font-family: monospace;
font-weight: 700;
letter-spacing: 0.12em;
color: #4b5563;
display: block;
margin-bottom: 12px;
}
.creator-meta-hint[data-v-f29dba85] {
font-size: 12px;
color: #6b7280;
margin-top: -6px;
margin-bottom: 16px;
}
.manual-editor-box[data-v-f29dba85] {
display: flex;
flex-direction: column;
gap: 12px;
background-color: rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.02);
}
.manual-title-input[data-v-f29dba85] {
background: none;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 8px;
font-size: 16px;
font-weight: 700;
color: #ffffff;
outline: none;
}
.manual-textarea[data-v-f29dba85] {
background: none;
border: none;
resize: none;
height: 140px;
font-size: 13px;
line-height: 1.7;
color: #d1d5db;
outline: none;
}
.word-count-badge[data-v-f29dba85] {
text-align: right;
font-size: 10px;
color: #4b5563;
font-family: monospace;
margin-top: 6px;
}
.select-action[data-v-f29dba85] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.btn-apply[data-v-f29dba85] {
padding: 8px 18px;
background: rgba(34, 211, 238, 0.1);
border: 1px solid rgba(34, 211, 238, 0.35);
border-radius: 8px;
font-size: 11px;
font-weight: 700;
color: #22d3ee;
cursor: pointer;
transition: all 0.2s;
}
.btn-apply[data-v-f29dba85]:hover:not(:disabled) {
background: rgba(34, 211, 238, 0.2);
border-color: #22d3ee;
}
.btn-apply[data-v-f29dba85]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.save-hint[data-v-f29dba85] {
font-size: 11px;
font-weight: 600;
color: #34d399;
animation: fadeIn-f29dba85 0.3s ease;
}
/* ==========================================================================
1. 全局排版及页面容器
========================================================================== */
.visual-notes-container[data-v-cdaa6a17] {
min-height: 100vh;
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin-top: -5rem;
padding: 6.5rem 200px 40px 200px;
box-sizing: border-box;
}
.visual-notes-container[data-v-cdaa6a17] * {
box-sizing: border-box;
}
.notes-header[data-v-cdaa6a17] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
}
.header-right[data-v-cdaa6a17] {
display: flex;
align-items: center;
gap: 12px;
margin-top: 24px;
}
.analyzed-hint[data-v-cdaa6a17] {
font-size: 11px;
color: #34d399;
font-weight: 600;
}
.module-tag[data-v-cdaa6a17] {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.25em;
color: #4b5563;
margin-bottom: 6px;
}
.main-title[data-v-cdaa6a17] {
font-size: 32px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
letter-spacing: 0.05em;
}
.en-title[data-v-cdaa6a17] {
font-size: 28px;
font-weight: 300;
color: #4b5563;
margin-left: 10px;
font-family: "Times New Roman", serif;
letter-spacing: 0.1em;
}
.subtitle[data-v-cdaa6a17] {
font-size: 13px;
font-weight: 500;
color: #8b949e;
margin: 0;
}
/* ==========================================================================
2. 双栏网格架构
========================================================================== */
.notes-grid[data-v-cdaa6a17] {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 32px;
}
@media (max-width: 1150px) {
.notes-grid[data-v-cdaa6a17] {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.visual-notes-container[data-v-cdaa6a17] {
padding: 6.5rem 16px 24px 16px;
}
.notes-header[data-v-cdaa6a17] {
flex-direction: column;
gap: 16px;
}
.interactive-panel[data-v-cdaa6a17] {
padding: 20px;
min-height: auto;
}
}
/* Toast 提示条 */
.toast-bar[data-v-cdaa6a17] {
display: flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 14px 20px;
background: rgba(234, 88, 12, 0.08);
border: 1px solid rgba(234, 88, 12, 0.3);
border-radius: 12px;
font-size: 13px;
color: #fb923c;
}
.toast-icon[data-v-cdaa6a17] {
font-size: 14px;
}
.toast-enter-active[data-v-cdaa6a17],
.toast-leave-active[data-v-cdaa6a17] {
transition: all 0.35s ease;
}
.toast-enter-from[data-v-cdaa6a17],
.toast-leave-to[data-v-cdaa6a17] {
opacity: 0;
transform: translateY(-8px);
}
/* 规格底栏 */
.btn-ai-generate[data-v-cdaa6a17] {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background-color: #e0f7fa;
border: none;
border-radius: 9999px;
color: #083344;
font-size: 11px;
font-weight: 800;
cursor: pointer;
transition: all 0.2s;
}
.btn-ai-generate[data-v-cdaa6a17]:hover {
background-color: #22d3ee;
box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}
.btn-ai-generate[data-v-cdaa6a17]:disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
.sparkle-icon[data-v-cdaa6a17] {
width: 14px;
height: 14px;
}
/* 面板卡片底框 */
.interactive-panel[data-v-cdaa6a17] {
background-color: rgba(17, 22, 32, 0.7);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 24px;
padding: 28px;
min-height: 440px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.waterfall-card[data-v-a0bae04f] {
position: relative;
break-inside: avoid;
margin-bottom: 20px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition: transform 0.4s;
}
.waterfall-card[data-v-a0bae04f]:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.card-img[data-v-a0bae04f] {
width: 100%;
display: block;
transition: transform 0.4s;
}
.waterfall-card:hover .card-img[data-v-a0bae04f] {
transform: scale(1.05);
}
.card-overlay[data-v-a0bae04f] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 16px 20px;
transform: translateY(100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.waterfall-card:hover .card-overlay[data-v-a0bae04f] {
transform: translateY(0);
opacity: 1;
}
.card-title[data-v-a0bae04f] {
font-size: 15px;
font-weight: 700;
color: #ffffff;
margin: 0 0 6px 0;
}
.card-caption[data-v-a0bae04f] {
font-size: 12px;
color: #8b949e;
margin: 0;
line-height: 1.5;
}
.hero-viewer[data-v-8f898629] {
width: 100%;
aspect-ratio: 3 / 2;
position: relative;
border-radius: 18px;
overflow: hidden;
background: #080d18;
}
.flip-book[data-v-8f898629] {
width: 100%;
height: 100%;
}
.flip-page[data-v-8f898629] {
background: #080d18;
overflow: hidden;
}
.flip-page img[data-v-8f898629] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
user-select: none;
}
.page-half[data-v-8f898629] {
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
pointer-events: none;
user-select: none;
}
.page-left[data-v-8f898629] {
background-position: left center;
}
.page-right[data-v-8f898629] {
background-position: right center;
}
.hero-empty[data-v-8f898629] {
width: 100%;
height: 40vh;
min-height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #64748b;
font-size: 1.1rem;
}
.player-controls[data-v-8090f4f1] {
display: inline-block;
}
.player-box[data-v-8090f4f1] {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
display: flex;
align-items: center;
padding: 0.5rem 1.5rem 0.5rem 0.5rem;
backdrop-filter: blur(10px);
}
.icon-btn[data-v-8090f4f1] {
background: transparent;
border: none;
color: #fff;
font-size: 1.2rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity 0.3s;
}
.icon-btn[data-v-8090f4f1]:hover {
opacity: 0.7;
}
.play-btn[data-v-8090f4f1] {
background: #d4f4f0;
color: #000;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
font-size: 0.9rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
margin: 0 0.5rem;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 224, 198, 0.4);
transition: all 0.3s;
}
.play-btn[data-v-8090f4f1]:hover {
box-shadow: 0 0 25px rgba(0, 224, 198, 0.8);
transform: scale(1.05);
}
.play-icon[data-v-8090f4f1] {
margin-left: 2px;
}
.player-text[data-v-8090f4f1] {
margin-left: 1.5rem;
display: flex;
flex-direction: column;
}
.p-title[data-v-8090f4f1] {
font-size: 0.65rem;
color: #8c9baf;
letter-spacing: 1.5px;
font-weight: bold;
}
.p-status[data-v-8090f4f1] {
font-size: 0.9rem;
font-weight: 500;
margin-top: 0.2rem;
color: #e2e8f0;
}
.meta-section[data-v-6cbcafe7] {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
gap: 2rem;
margin-top: 4rem;
padding-bottom: 5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.meta-left[data-v-6cbcafe7] {
max-width: 100%;
}
.meta-center[data-v-6cbcafe7] {
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 2rem;
}
.meta-right[data-v-6cbcafe7] {
display: flex;
justify-content: flex-end;
gap: 3rem;
padding-top: 2rem;
}
.volume-label[data-v-6cbcafe7] {
color: #00e0c6;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 2px;
margin-bottom: 1rem;
text-transform: uppercase;
}
.gallery-title[data-v-6cbcafe7] {
font-size: 2.5rem;
margin: 0 0 1rem;
font-weight: bold;
letter-spacing: 2px;
}
.gallery-desc[data-v-6cbcafe7] {
color: #a0aec0;
line-height: 1.8;
margin-bottom: 2.5rem;
font-size: 0.95rem;
}
.meta-block[data-v-6cbcafe7] {
border-left: 1px solid #1e293b;
padding-left: 1.5rem;
}
.m-label[data-v-6cbcafe7] {
font-size: 0.65rem;
color: #64748b;
letter-spacing: 1px;
margin-bottom: 0.8rem;
}
.m-val-primary[data-v-6cbcafe7] {
font-size: 1.1rem;
font-weight: bold;
margin-bottom: 0.4rem;
}
.m-val-sec[data-v-6cbcafe7] {
font-size: 0.85rem;
color: #94a3b8;
}
@media (max-width: 1024px) {
.meta-section[data-v-6cbcafe7] {
flex-direction: column;
gap: 2rem;
}
.meta-right[data-v-6cbcafe7] {
justify-content: flex-start;
}
}
.lyrics-scroll[data-v-c0726c54] {
max-height: 55vh;
overflow-y: auto;
overflow-x: hidden;
padding-right: 1rem;
width: 100%;
}
.lyrics-scroll[data-v-c0726c54]::-webkit-scrollbar {
width: 4px;
}
.lyrics-scroll[data-v-c0726c54]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.lyric-item[data-v-c0726c54] {
padding: 1rem 0;
padding-left: 1.2rem;
transition: all 0.4s ease;
opacity: 0.4;
transform: scale(0.9);
transform-origin: center center;
cursor: pointer;
}
.lyric-item.active[data-v-c0726c54] {
opacity: 1;
transform: scale(1.05);
}
.lyric-title[data-v-c0726c54] {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.3rem;
color: #e2e8f0;
}
.lyric-item.active .lyric-title[data-v-c0726c54] {
font-size: 1.4rem;
color: #fff;
}
.lyric-caption[data-v-c0726c54] {
font-size: 0.85rem;
color: #94a3b8;
line-height: 1.5;
}
.lyric-item.active .lyric-caption[data-v-c0726c54] {
font-size: 1rem;
color: #e2e8f0;
}
.gallery-detail-page[data-v-b90e1d34] {
margin-top: -5rem;
padding-top: 8rem;
padding-bottom: 5rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.content-wrapper[data-v-b90e1d34] {
max-width: 1600px;
margin: 0 auto;
padding: 0 3rem;
}
/* 翻页 + 歌词区 */
.hero-section[data-v-b90e1d34] {
display: flex;
gap: 3rem;
margin-bottom: 4rem;
align-items: center;
}
.hero-left[data-v-b90e1d34] {
flex: 0 0 58%;
}
.hero-right[data-v-b90e1d34] {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
}
/* 瀑布流长廊 */
.waterfall-section[data-v-b90e1d34] {
margin-top: 5rem;
}
.w-header[data-v-b90e1d34] {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
}
.w-text h2[data-v-b90e1d34] {
font-size: 1.8rem;
margin: 0 0 0.5rem;
}
.w-text p[data-v-b90e1d34] {
color: #a0aec0;
font-size: 0.95rem;
max-width: 500px;
line-height: 1.6;
}
/* 瀑布流 Grid */
.masonry-grid[data-v-b90e1d34] {
column-count: 3;
column-gap: 20px;
}
@media (max-width: 1024px) {
.meta-section[data-v-b90e1d34] {
flex-direction: column;
gap: 2rem;
}
.meta-right[data-v-b90e1d34] {
justify-content: flex-start;
}
.w-header[data-v-b90e1d34] {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.masonry-grid[data-v-b90e1d34] {
column-count: 2;
}
}
@media (max-width: 600px) {
.masonry-grid[data-v-b90e1d34] {
column-count: 1;
}
}
.comparison-viewer[data-v-afbad061] {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
border-radius: 24px;
overflow: hidden;
border: 1px solid #1f2937;
background-color: #111827;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.image-layer[data-v-afbad061] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.original-layer-wrapper[data-v-afbad061] {
position: absolute;
inset: 0;
user-select: none;
pointer-events: none;
}
/* 选择器 */
.selector[data-v-afbad061] {
position: absolute;
top: 16px;
z-index: 20;
}
.selector-left[data-v-afbad061] {
left: 16px;
}
.selector-right[data-v-afbad061] {
right: 16px;
}
.selector-btn[data-v-afbad061] {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9999px;
color: #e5e7eb;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.selector-btn[data-v-afbad061]:hover {
background: rgba(0, 0, 0, 0.7);
border-color: rgba(255, 255, 255, 0.25);
}
.selector-arrow[data-v-afbad061] {
width: 10px;
height: 10px;
color: #6b7280;
transition: transform 0.2s;
}
.selector-arrow.open[data-v-afbad061] {
transform: rotate(180deg);
}
/* 下拉菜单 */
.dropdown-menu[data-v-afbad061] {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 160px;
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 6px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
z-index: 30;
}
.selector-right .dropdown-menu[data-v-afbad061] {
left: auto;
right: 0;
}
.dropdown-item[data-v-afbad061] {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
padding: 4px 6px;
background: transparent;
border-radius: 10px;
transition: background 0.15s;
}
.dropdown-item[data-v-afbad061]:hover {
background: rgba(255, 255, 255, 0.06);
}
.item-select[data-v-afbad061] {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
padding: 6px 8px;
background: transparent;
border: none;
color: #9ca3af;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
transition: color 0.15s;
text-align: left;
min-width: 0;
}
.item-select[data-v-afbad061]:hover {
color: #e5e7eb;
}
.dropdown-item.active .item-select[data-v-afbad061] {
color: #22d3ee;
}
.item-action[data-v-afbad061] {
flex-shrink: 0;
padding: 4px;
background: transparent;
border: none;
color: #6b7280;
cursor: pointer;
border-radius: 4px;
transition: all 0.15s;
display: flex;
align-items: center;
}
.item-action[data-v-afbad061]:hover {
color: #e5e7eb;
background: rgba(255, 255, 255, 0.08);
}
.item-action.danger[data-v-afbad061]:hover {
color: #f87171;
background: rgba(248, 113, 113, 0.1);
}
.rename-input[data-v-afbad061] {
background: rgba(0, 0, 0, 0.4);
border: 1px solid #22d3ee;
border-radius: 4px;
color: #e5e7eb;
font-size: 12px;
padding: 2px 6px;
width: 100px;
outline: none;
}
/* 删除确认弹窗 */
.modal-overlay[data-v-afbad061] {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
}
.modal-box[data-v-afbad061] {
background: #1a2235;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 32px;
width: 320px;
text-align: center;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.modal-icon[data-v-afbad061] {
color: #f87171;
margin-bottom: 16px;
}
.modal-title[data-v-afbad061] {
font-size: 16px;
font-weight: 600;
color: #e5e7eb;
margin: 0 0 8px;
}
.modal-desc[data-v-afbad061] {
font-size: 13px;
color: #9ca3af;
margin: 0 0 24px;
line-height: 1.5;
}
.modal-actions[data-v-afbad061] {
display: flex;
gap: 12px;
justify-content: center;
}
.modal-btn[data-v-afbad061] {
padding: 8px 24px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.modal-btn.cancel[data-v-afbad061] {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #9ca3af;
}
.modal-btn.cancel[data-v-afbad061]:hover {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.modal-btn.danger[data-v-afbad061] {
background: #dc2626;
color: #fff;
}
.modal-btn.danger[data-v-afbad061]:hover {
background: #ef4444;
}
/* 弹窗动画 */
.modal-enter-active[data-v-afbad061],
.modal-leave-active[data-v-afbad061] {
transition: opacity 0.2s ease;
}
.modal-enter-active .modal-box[data-v-afbad061],
.modal-leave-active .modal-box[data-v-afbad061] {
transition: transform 0.2s ease;
}
.modal-enter-from[data-v-afbad061],
.modal-leave-to[data-v-afbad061] {
opacity: 0;
}
.modal-enter-from .modal-box[data-v-afbad061] {
transform: scale(0.95);
}
.modal-leave-to .modal-box[data-v-afbad061] {
transform: scale(0.95);
}
.item-dot[data-v-afbad061] {
width: 6px;
height: 6px;
border-radius: 50%;
background: #374151;
flex-shrink: 0;
transition: background 0.15s;
}
.item-dot.active[data-v-afbad061] {
background: #22d3ee;
box-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
}
/* 下拉动画 */
.dropdown-enter-active[data-v-afbad061],
.dropdown-leave-active[data-v-afbad061] {
transition: opacity 0.15s ease, transform 0.15s ease;
}
.dropdown-enter-from[data-v-afbad061],
.dropdown-leave-to[data-v-afbad061] {
opacity: 0;
transform: translateY(-6px);
}
/* 拖拽中心中轴 */
.slider-handle[data-v-afbad061] {
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background-color: #22d3ee;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.handle-button[data-v-afbad061] {
width: 48px;
height: 48px;
border-radius: 50px;
background-color: #083344;
border: 2px solid #22d3ee;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 900;
letter-spacing: 0.1em;
color: #22d3ee;
text-transform: uppercase;
box-shadow: 0 0 15px rgba(34, 211, 238, 0.3);
}
/* 隐藏的原生拖动滑块覆盖整图 */
.hidden-range-input[data-v-afbad061] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: ew-resize;
z-index: 10;
margin: 0;
}
.versions-section[data-v-91603de7] {
display: flex;
flex-direction: column;
gap: 16px;
}
.section-title-bar[data-v-91603de7] {
display: flex;
justify-content: space-between;
align-items: center;
}
.title-group[data-v-91603de7] {
display: flex;
align-items: baseline;
gap: 8px;
}
.title-zh[data-v-91603de7] {
font-size: 14px;
font-weight: 700;
color: #ffffff;
}
.title-en[data-v-91603de7] {
font-size: 12px;
color: #6b7280;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-transform: uppercase;
}
.carousel-arrows[data-v-91603de7] {
display: flex;
gap: 8px;
}
.arrow-btn[data-v-91603de7] {
padding: 4px 10px;
border-radius: 9999px;
background-color: #111827;
border: 1px solid #1f2937;
color: #9ca3af;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
}
.arrow-btn[data-v-91603de7]:hover {
border-color: #374151;
color: #ffffff;
}
.cards-list[data-v-91603de7] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 640px) {
.cards-list[data-v-91603de7] {
grid-template-columns: repeat(2, 1fr);
}
}
.version-card[data-v-91603de7] {
position: relative;
overflow: visible;
background-color: rgba(17, 24, 39, 0.3);
border: 1px solid rgba(31, 41, 55, 0.8);
padding: 8px;
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
}
.version-card[data-v-91603de7]:hover {
border-color: #374151;
}
.active-card[data-v-91603de7] {
background-color: rgba(17, 24, 39, 0.5);
border-color: rgba(34, 211, 238, 0.5);
box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.2);
}
.card-thumb[data-v-91603de7] {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 12px;
overflow: hidden;
background-color: #1f2937;
margin-bottom: 8px;
}
.card-thumb img[data-v-91603de7] {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 展示版星标按钮 */
.display-btn[data-v-91603de7] {
position: absolute;
top: 6px;
right: 6px;
width: 28px;
height: 28px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
opacity: 0;
color: #6b7280;
z-index: 2;
}
.version-card:hover .display-btn[data-v-91603de7],
.display-btn.is-display[data-v-91603de7] {
opacity: 1;
}
.display-btn[data-v-91603de7]:hover {
background: rgba(0, 0, 0, 0.7);
border-color: rgba(255, 255, 255, 0.2);
color: #fbbf24;
}
.display-btn.is-display[data-v-91603de7] {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.3);
box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}
/* 确认弹窗 */
.confirm-popover[data-v-91603de7] {
position: absolute;
top: -4px;
right: -4px;
width: 180px;
background: rgba(17, 24, 39, 0.95);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 14px;
z-index: 30;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
animation: popIn-91603de7 0.15s ease;
}
@keyframes popIn-91603de7 {
from { opacity: 0; transform: translateY(-6px) scale(0.95);
}
to { opacity: 1; transform: translateY(0) scale(1);
}
}
.confirm-text[data-v-91603de7] {
font-size: 13px;
font-weight: 600;
color: #e5e7eb;
}
.confirm-hint[data-v-91603de7] {
font-size: 10px;
color: #6b7280;
margin-top: 4px;
line-height: 1.4;
}
.confirm-actions[data-v-91603de7] {
display: flex;
gap: 8px;
margin-top: 12px;
}
.confirm-btn[data-v-91603de7] {
flex: 1;
padding: 5px 0;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
border: none;
transition: all 0.15s;
}
.confirm-btn.cancel[data-v-91603de7] {
background: rgba(255, 255, 255, 0.06);
color: #9ca3af;
}
.confirm-btn.cancel[data-v-91603de7]:hover {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.confirm-btn.ok[data-v-91603de7] {
background: rgba(251, 191, 36, 0.15);
color: #fbbf24;
border: 1px solid rgba(251, 191, 36, 0.2);
}
.confirm-btn.ok[data-v-91603de7]:hover {
background: rgba(251, 191, 36, 0.25);
}
.card-title-zh[data-v-91603de7] {
font-size: 11px;
font-weight: 700;
color: #ffffff;
}
.card-title-en[data-v-91603de7] {
font-size: 9px;
color: #6b7280;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-transform: uppercase;
margin-top: 2px;
}
/* 空状态 */
.empty-versions[data-v-91603de7] {
display: flex;
align-items: center;
justify-content: center;
padding: 32px 16px;
border: 1px dashed rgba(55, 65, 81, 0.6);
border-radius: 16px;
background-color: rgba(17, 24, 39, 0.2);
}
.empty-text[data-v-91603de7] {
font-size: 12px;
color: #6b7280;
letter-spacing: 0.05em;
}
.scifi-panel[data-v-1c838c95] {
background-color: rgba(18, 24, 36, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(31, 41, 55, 0.8);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
}
.exif-panel[data-v-1c838c95] {
justify-content: space-between;
min-height: 340px;
}
.panel-header[data-v-1c838c95] {
display: flex;
justify-content: space-between;
align-items: center;
}
.title-group[data-v-1c838c95] {
display: flex;
align-items: baseline;
gap: 8px;
}
.panel-title-zh[data-v-1c838c95] {
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.05em;
}
.panel-title-en[data-v-1c838c95] {
font-size: 12px;
color: #6b7280;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-transform: uppercase;
}
.exif-list[data-v-1c838c95] {
display: flex;
flex-direction: column;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
}
.exif-item[data-v-1c838c95] {
display: flex;
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid rgba(31, 41, 55, 0.6);
}
.exif-item[data-v-1c838c95]:last-child {
border-bottom: none;
}
.exif-label[data-v-1c838c95] {
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 12px;
}
.exif-value[data-v-1c838c95] {
color: #e5e7eb;
font-weight: 500;
}
.color-panel-outer[data-v-618dbdd8] {
position: absolute;
right: -180px;
top: 0;
width: 160px;
}
.scifi-panel[data-v-618dbdd8] {
background-color: rgba(18, 24, 36, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(31, 41, 55, 0.8);
border-radius: 24px;
padding: 24px;
display: flex;
flex-direction: column;
}
.color-panel[data-v-618dbdd8] {
gap: 15px;
}
.panel-header[data-v-618dbdd8] {
display: flex;
justify-content: space-between;
align-items: center;
}
.title-group[data-v-618dbdd8] {
display: flex;
align-items: baseline;
gap: 8px;
}
.panel-title-zh[data-v-618dbdd8] {
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.05em;
}
.panel-title-en[data-v-618dbdd8] {
font-size: 12px;
color: #6b7280;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
text-transform: uppercase;
}
.color-list[data-v-618dbdd8] {
display: flex;
flex-direction: column;
gap: 12px;
}
.color-item[data-v-618dbdd8] {
display: flex;
align-items: center;
gap: 10px;
}
.swatch[data-v-618dbdd8] {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
cursor: pointer;
transition: transform 0.2s;
position: relative;
}
.swatch[data-v-618dbdd8]:hover {
transform: scale(1.15);
border-color: rgba(255, 255, 255, 0.3);
}
.copied-tip[data-v-618dbdd8] {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
color: #22d3ee;
white-space: nowrap;
pointer-events: none;
}
.color-info[data-v-618dbdd8] {
display: flex;
flex-direction: column;
gap: 2px;
}
.color-name[data-v-618dbdd8] {
font-size: 11px;
color: #e5e7eb;
white-space: nowrap;
}
.color-hex[data-v-618dbdd8] {
font-size: 12px;
color: #6b7280;
white-space: nowrap;
letter-spacing: 0.03em;
}
.analysis-panel[data-v-345bfa03] {
background-color: rgba(18, 24, 36, 0.6);
backdrop-filter: blur(12px);
border: 1px solid rgba(31, 41, 55, 0.8);
border-radius: 24px;
padding: 16px;
gap: 12px;
}
.panel-header[data-v-345bfa03] {
display: flex;
justify-content: space-between;
align-items: center;
}
.title-group[data-v-345bfa03] {
display: flex;
align-items: baseline;
gap: 8px;
}
.panel-title-zh[data-v-345bfa03] {
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.05em;
}
.panel-title-en[data-v-345bfa03] {
font-size: 12px;
color: #6b7280;
text-transform: uppercase;
}
.radar-section[data-v-345bfa03] {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.analysis-result[data-v-345bfa03] {
max-height: 200px;
overflow-y: auto;
padding: 12px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 12px;
border: 1px solid rgba(31, 41, 55, 0.6);
}
.analysis-result[data-v-345bfa03]::-webkit-scrollbar {
width: 4px;
}
.analysis-result[data-v-345bfa03]::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 2px;
}
.analysis-text[data-v-345bfa03] {
font-size: 13px;
line-height: 1.8;
color: #d1d5db;
white-space: pre-wrap;
}
.analysis-loading[data-v-345bfa03] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
color: #6b7280;
font-size: 12px;
}
.spinner[data-v-345bfa03] {
width: 16px;
height: 16px;
border: 2px solid #4b5563;
border-top-color: #22d3ee;
border-radius: 50%;
animation: spin-345bfa03 1s linear infinite;
}
@keyframes spin-345bfa03 {
to {
transform: rotate(360deg);
}
}
.btn-reanalyze[data-v-345bfa03] {
width: 100%;
padding: 10px;
border-radius: 12px;
background-color: rgba(17, 24, 39, 0.8);
border: 1px solid #1f2937;
color: #9ca3af;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.btn-reanalyze[data-v-345bfa03]:hover {
background-color: #1a2232;
border-color: #374151;
color: #ffffff;
}
.btn-reanalyze[data-v-345bfa03]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.grid-right-col[data-v-d2363d9d] {
position: relative;
display: flex;
flex-direction: column;
gap: 16px;
}
.exif-gap[data-v-d2363d9d] {
margin-bottom: 16px;
}
.modal-overlay[data-v-501c6c27] {
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
}
.modal-glass[data-v-501c6c27] {
width: 440px;
max-width: 92vw;
background: rgba(23, 30, 43, 0.92);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;
padding: 40px;
box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.modal-header[data-v-501c6c27] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.header-title[data-v-501c6c27] {
display: flex;
flex-direction: column;
gap: 4px;
}
.title-zh[data-v-501c6c27] {
font-size: 22px;
font-weight: 600;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.title-en[data-v-501c6c27] {
font-size: 11px;
font-family: monospace;
color: #64748b;
letter-spacing: 0.18em;
font-weight: 700;
}
.btn-close[data-v-501c6c27] {
background: none;
border: none;
color: #64748b;
font-size: 16px;
cursor: pointer;
transition: color 0.2s;
padding: 4px;
}
.btn-close[data-v-501c6c27]:hover {
color: #ffffff;
}
.modal-body[data-v-501c6c27] {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 拖拽区 */
.drop-zone[data-v-501c6c27] {
border: 1.5px dashed rgba(255, 255, 255, 0.25);
border-radius: 20px;
padding: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.drop-zone[data-v-501c6c27]:hover,
.drop-zone.is-dragover[data-v-501c6c27] {
border-color: #93c5fd;
}
.drop-zone.has-file[data-v-501c6c27] {
cursor: default;
border-color: rgba(255, 255, 255, 0.1);
}
.drop-hint[data-v-501c6c27] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 0;
}
.drop-icon[data-v-501c6c27] {
width: 40px;
height: 40px;
color: #93c5fd;
filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.4));
}
.drop-text[data-v-501c6c27] {
font-size: 13px;
color: #cbd5e1;
margin: 0;
}
.drop-text span[data-v-501c6c27] {
color: #93c5fd;
font-weight: 500;
}
.drop-sub[data-v-501c6c27] {
font-size: 10px;
color: #64748b;
margin: 0;
letter-spacing: 0.05em;
}
.hidden-input[data-v-501c6c27] {
display: none;
}
/* 文件预览 */
.file-preview[data-v-501c6c27] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.preview-thumb[data-v-501c6c27] {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.file-info[data-v-501c6c27] {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
.file-name[data-v-501c6c27] {
font-size: 13px;
color: #e2e8f0;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size[data-v-501c6c27] {
font-size: 11px;
color: #64748b;
font-family: monospace;
}
.btn-remove[data-v-501c6c27] {
background: rgba(255, 255, 255, 0.06);
border: none;
color: #94a3b8;
width: 28px;
height: 28px;
border-radius: 8px;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-remove[data-v-501c6c27]:hover {
background: rgba(239, 68, 68, 0.2);
color: #f87171;
}
/* 表单 */
.form-item[data-v-501c6c27] {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-label[data-v-501c6c27] {
display: flex;
flex-direction: column;
gap: 2px;
}
.label-zh[data-v-501c6c27] {
font-size: 13px;
font-weight: 500;
color: #94a3b8;
}
.label-en[data-v-501c6c27] {
font-size: 9px;
font-family: monospace;
color: #475569;
letter-spacing: 0.12em;
font-weight: 700;
}
.form-input[data-v-501c6c27] {
width: 100%;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 14px 16px;
font-size: 13px;
color: #f1f5f9;
outline: none;
transition: all 0.25s ease;
}
.form-input[data-v-501c6c27]:focus {
border-color: rgba(147, 197, 253, 0.4);
background: rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(147, 197, 253, 0.12);
}
.form-input[data-v-501c6c27]::placeholder {
color: #475569;
}
.error-msg[data-v-501c6c27] {
margin: 0;
font-size: 12px;
color: #f87171;
letter-spacing: 0.02em;
}
/* 按钮 */
.form-actions[data-v-501c6c27] {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 12px;
padding-top: 4px;
}
.btn-cancel[data-v-501c6c27] {
padding: 14px 0;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
color: #94a3b8;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-cancel[data-v-501c6c27]:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.btn-submit[data-v-501c6c27] {
padding: 14px 0;
border-radius: 12px;
background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
border: none;
color: #0f172a;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
box-shadow: 0 8px 24px -6px rgba(147, 197, 253, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-submit[data-v-501c6c27]:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px -4px rgba(147, 197, 253, 0.55);
filter: brightness(1.05);
}
.btn-submit[data-v-501c6c27]:active {
transform: translateY(0);
}
.btn-submit[data-v-501c6c27]:disabled {
background: rgba(255, 255, 255, 0.03);
color: #475569;
cursor: not-allowed;
box-shadow: none;
transform: none;
filter: none;
}
/* ==========================================================================
1. 基础版面样式 (Base & Layout)
========================================================================== */
.scifi-container[data-v-a9430ced] {
min-height: 100vh;
color: #adb5bd;
margin-top: -5rem;
padding-top: 6rem;
padding-bottom: 5rem;
padding-left: 32px;
padding-right: 32px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
}
.scifi-container[data-v-a9430ced] * {
box-sizing: border-box;
}
.scifi-header[data-v-a9430ced] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.header-left[data-v-a9430ced] {
display: flex;
align-items: center;
gap: 16px;
}
.section-tag[data-v-a9430ced] {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.15em;
color: #93c5fd;
text-transform: uppercase;
}
.divider-line[data-v-a9430ced] {
height: 1px;
width: 48px;
background-color: #374151;
}
.upload-btn[data-v-a9430ced] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background-color: rgba(31, 41, 55, 0.5);
border: 1px solid rgba(55, 65, 81, 0.5);
border-radius: 9999px;
color: #e5e7eb;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
backdrop-filter: blur(4px);
}
.upload-btn[data-v-a9430ced]:hover {
background-color: #1f2937;
border-color: #4b5563;
}
.upload-btn[data-v-a9430ced]:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.upload-icon[data-v-a9430ced] {
width: 16px;
height: 16px;
color: #22d3ee;
}
/* 栅格网格 */
.scifi-grid[data-v-a9430ced] {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 24px;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1024px) {
.scifi-grid[data-v-a9430ced] {
grid-template-columns: 1fr;
}
}
.grid-left-col[data-v-a9430ced] {
display: flex;
flex-direction: column;
gap: 24px;
}
.photo-desk-page[data-v-a3c672c3] {
min-height: 100vh;
margin-top: -5rem;
padding: 5rem 40px 60px;
}
@media (max-width: 768px) {
.photo-desk-page[data-v-a3c672c3] {
padding: 5rem 16px 40px;
}
}
/* 头部 */
.photo-desk-header[data-v-a3c672c3] {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 24px;
}
.btn-back[data-v-a3c672c3] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 8px 16px;
color: #8b949e;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-back[data-v-a3c672c3]:hover {
background: rgba(255, 255, 255, 0.05);
color: #fff;
}
.header-info[data-v-a3c672c3] {
display: flex;
align-items: baseline;
gap: 16px;
}
.region-title[data-v-a3c672c3] {
font-size: 28px;
font-weight: 700;
margin: 0;
letter-spacing: 0.02em;
}
.region-count[data-v-a3c672c3] {
font-size: 13px;
font-family: monospace;
color: #64748b;
}
/* 散落照片区域 */
.photo-desk[data-v-a3c672c3] {
position: relative;
min-height: 600px;
max-width: 1400px;
margin: 100px auto;
}
/* 单张照片容器 */
.scattered-photo[data-v-a3c672c3] {
position: absolute;
transform: translate(-50%, -50%) rotate(var(--rotate));
cursor: pointer;
animation: photo-appear-a3c672c3 0.6s ease both;
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), z-index 0s;
}
@keyframes photo-appear-a3c672c3 {
from {
opacity: 0;
transform: translate(-50%, -50%) rotate(var(--rotate)) scale(0.7);
}
to {
opacity: 1;
transform: translate(-50%, -50%) rotate(var(--rotate)) scale(1);
}
}
.scattered-photo[data-v-a3c672c3]:hover {
z-index: 999 !important;
transform: translate(-50%, -50%) rotate(0deg) scale(1.15);
}
/* 照片卡片（正反面） */
.photo-card[data-v-a3c672c3] {
position: relative;
width: 100%;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.photo-card.is-hovered[data-v-a3c672c3] {
transform: rotateY(180deg);
}
.photo-front[data-v-a3c672c3] {
position: relative;
backface-visibility: hidden;
border-radius: 2px;
overflow: hidden;
background: #fffdf5;
padding: 8px 8px 48px;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
0 8px 24px rgba(0, 0, 0, 0.1);
}
.photo-front img[data-v-a3c672c3] {
width: 100%;
height: var(--card-h, 260px);
object-fit: cover;
display: block;
}
.photo-back[data-v-a3c672c3] {
position: absolute;
inset: 0;
backface-visibility: hidden;
border-radius: 2px;
overflow: hidden;
background: #fffdf5;
transform: rotateY(180deg);
padding: 24px 20px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
0 8px 24px rgba(0, 0, 0, 0.1);
}
.photo-title[data-v-a3c672c3] {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.1rem;
color: #2d2d2d;
margin: 0 0 12px;
line-height: 1.3;
}
.photo-date[data-v-a3c672c3] {
font-size: 0.75rem;
color: #999;
margin: 0 0 16px;
font-family: monospace;
}
.photo-caption[data-v-a3c672c3] {
font-size: 0.85rem;
color: #666;
line-height: 1.7;
margin: 0;
font-family: 'KaiTi', 'STKaiti', serif;
}
/* 胶带效果 */
.photo-tape[data-v-a3c672c3] {
position: absolute;
width: 60px;
height: 20px;
opacity: 0.7;
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
}
.tape-yellow[data-v-a3c672c3] {
background: linear-gradient(180deg, rgba(255, 235, 150, 0.8), rgba(255, 220, 100, 0.6));
}
.tape-white[data-v-a3c672c3] {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(240, 240, 240, 0.5));
}
.tape-pink[data-v-a3c672c3] {
background: linear-gradient(180deg, rgba(255, 200, 200, 0.7), rgba(255, 180, 180, 0.5));
}
.tape-blue[data-v-a3c672c3] {
background: linear-gradient(180deg, rgba(200, 220, 255, 0.7), rgba(180, 200, 255, 0.5));
}
/* 加载提示 */
.loading-hint[data-v-a3c672c3] {
text-align: center;
padding: 40px 0;
font-size: 13px;
color: #4b5563;
font-family: monospace;
}
@media (max-width: 760px) {
.scattered-photo[data-v-a3c672c3] {
max-width: 160px;
}
}
.asset-card[data-v-d4302392] {
position: relative;
aspect-ratio: 3 / 2;
border-radius: 16px;
overflow: hidden;
background-color: #161b22;
cursor: pointer;
}
.asset-img[data-v-d4302392] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.asset-card:hover .asset-img[data-v-d4302392] {
transform: scale(1.02);
}
.card-top-overlay[data-v-d4302392] {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 3;
}
.status-indicator[data-v-d4302392] {
width: 24px;
height: 24px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
border: 1.5px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #f0ad4e;
}
.status-indicator.completed[data-v-d4302392] {
border-color: #5cb85c;
color: #5cb85c;
}
/* 三点菜单 */
.menu-wrapper[data-v-d4302392] {
position: relative;
}
.menu-trigger[data-v-d4302392] {
width: 28px;
height: 28px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
border: 1.5px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s;
}
.asset-card:hover .menu-trigger[data-v-d4302392] {
opacity: 1;
}
.menu-trigger[data-v-d4302392]:hover {
background-color: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.4);
}
.menu-dropdown[data-v-d4302392] {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 160px;
background: rgba(10, 14, 22, 0.8);
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 6px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
z-index: 10;
}
.menu-item[data-v-d4302392] {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
color: #e2e8f0;
cursor: pointer;
transition: background 0.15s;
}
.menu-item[data-v-d4302392]:hover {
background: rgba(255, 255, 255, 0.08);
}
.menu-item-delete[data-v-d4302392] {
color: #f87171;
}
.menu-item-delete[data-v-d4302392]:hover {
background: rgba(248, 113, 113, 0.12);
}
.menu-divider[data-v-d4302392] {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 4px 0;
}
.move-sublist[data-v-d4302392] {
padding: 4px 0 4px 12px;
}
.move-option[data-v-d4302392] {
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
color: #93c5fd;
cursor: pointer;
transition: background 0.15s;
}
.move-option[data-v-d4302392]:hover {
background: rgba(147, 197, 253, 0.12);
}
.move-empty[data-v-d4302392] {
padding: 6px 12px;
font-size: 11px;
color: #4b5563;
}
/* 删除弹窗 */
.modal-overlay[data-v-d4302392] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-box[data-v-d4302392] {
background: rgba(17, 22, 32, 0.95);
backdrop-filter: blur(24px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 20px;
padding: 32px;
width: 360px;
text-align: center;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.modal-title[data-v-d4302392] {
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin: 0 0 12px 0;
}
.modal-desc[data-v-d4302392] {
font-size: 13px;
color: #9ca3af;
margin: 0 0 28px 0;
line-height: 1.5;
}
.modal-actions[data-v-d4302392] {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
}
.modal-btn[data-v-d4302392] {
padding: 12px;
border-radius: 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.modal-btn-remove[data-v-d4302392] {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e2e8f0;
}
.modal-btn-remove[data-v-d4302392]:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.2);
}
.modal-btn-delete[data-v-d4302392] {
background: rgba(248, 113, 113, 0.15);
border: 1px solid rgba(248, 113, 113, 0.3);
color: #f87171;
}
.modal-btn-delete[data-v-d4302392]:hover {
background: rgba(248, 113, 113, 0.25);
border-color: rgba(248, 113, 113, 0.5);
}
.modal-cancel[data-v-d4302392] {
background: none;
border: none;
color: #6b7280;
font-size: 12px;
cursor: pointer;
padding: 4px;
transition: color 0.15s;
}
.modal-cancel[data-v-d4302392]:hover {
color: #9ca3af;
}
/* 卡片底部信息 */
.card-bottom-glass[data-v-d4302392] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 10px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
z-index: 2;
transform: translateY(100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.asset-card:hover .card-bottom-glass[data-v-d4302392] {
transform: translateY(0);
opacity: 1;
}
.asset-title[data-v-d4302392] {
font-size: 15px;
font-weight: 700;
color: #ffffff;
margin: 0 0 6px 0;
}
.asset-meta[data-v-d4302392] {
font-size: 12px;
color: #8b949e;
margin: 0;
}
.work-detail-page[data-v-6cd32153] {
min-height: 100vh;
color: #c9d1d9;
display: grid;
grid-template-columns: 280px 1fr;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
box-sizing: border-box;
margin-top: -5rem;
padding: 5rem 60px 0 60px;
}
.work-detail-page[data-v-6cd32153] * {
box-sizing: border-box;
}
.sidebar-panel[data-v-6cd32153] {
padding: 40px 24px;
border-right: 1px solid rgba(255, 255, 255, 0.03);
display: flex;
flex-direction: column;
}
.brand-header[data-v-6cd32153] {
margin-bottom: 32px;
}
.btn-back[data-v-6cd32153] {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 8px 16px;
color: #8b949e;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
margin-bottom: 16px;
}
.btn-back[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.05);
color: #ffffff;
}
.main-title-zh[data-v-6cd32153] {
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin: 0;
letter-spacing: 0.04em;
}
.brand-sub[data-v-6cd32153] {
display: flex;
gap: 10px;
margin-top: 4px;
font-family: monospace;
font-size: 13px;
}
/* 作品集信息 */
.work-info-section[data-v-6cd32153] {
margin-bottom: 24px;
padding: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 12px;
}
.info-row[data-v-6cd32153] {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 12px;
}
.info-row[data-v-6cd32153]:last-child {
margin-bottom: 0;
}
.info-label[data-v-6cd32153] {
font-size: 11px;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.08em;
min-width: 32px;
flex-shrink: 0;
margin-top: 2px;
}
.info-value[data-v-6cd32153] {
font-size: 13px;
color: #e5e7eb;
flex: 1;
line-height: 1.4;
}
.info-value.desc[data-v-6cd32153] {
color: #8b949e;
font-size: 12px;
}
.btn-edit-info[data-v-6cd32153] {
background: transparent;
border: none;
color: #4b5563;
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: all 0.2s;
flex-shrink: 0;
}
.btn-edit-info[data-v-6cd32153]:hover {
color: #e5e7eb;
background: rgba(255, 255, 255, 0.06);
}
/* 编辑表单 */
.edit-form[data-v-6cd32153] {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 20px;
text-align: left;
}
.form-label[data-v-6cd32153] {
font-size: 11px;
color: #4b5563;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.form-input[data-v-6cd32153],
.form-textarea[data-v-6cd32153] {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 10px 12px;
color: #e5e7eb;
font-size: 13px;
font-family: inherit;
transition: all 0.2s;
resize: vertical;
}
.form-input[data-v-6cd32153]:focus,
.form-textarea[data-v-6cd32153]:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
}
.modal-btn.primary[data-v-6cd32153] {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #e5e7eb;
}
.modal-btn.primary[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.15);
}
.sub-en[data-v-6cd32153] {
color: #4b5563;
letter-spacing: 0.1em;
}
.sub-count[data-v-6cd32153] {
color: #8b949e;
}
.highlight-num[data-v-6cd32153] {
font-weight: 700;
color: #ffffff;
}
.filter-navigation[data-v-6cd32153] {
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-item[data-v-6cd32153] {
width: 100%;
background: transparent;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.nav-left[data-v-6cd32153] {
display: flex;
align-items: center;
gap: 12px;
}
.status-dot[data-v-6cd32153] {
width: 6px;
height: 6px;
border-radius: 50%;
}
.nav-name[data-v-6cd32153] {
font-size: 13px;
color: #8b949e;
}
.nav-count[data-v-6cd32153] {
font-size: 12px;
font-family: monospace;
color: #4b5563;
}
.nav-item.active[data-v-6cd32153] {
background-color: rgba(255, 255, 255, 0.04);
}
.nav-item.active .nav-name[data-v-6cd32153] {
color: #ffffff;
font-weight: 500;
}
.nav-item.active .nav-count[data-v-6cd32153] {
color: #8b949e;
}
.content-main[data-v-6cd32153] {
padding: 40px;
display: flex;
flex-direction: column;
}
.top-filter-bar[data-v-6cd32153] {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
.assets-grid-flow[data-v-6cd32153] {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
align-items: start;
}
.select-toggle[data-v-6cd32153] {
margin-left: auto;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #94a3b8;
font-size: 13px;
cursor: pointer;
transition: all 0.2s;
}
.select-toggle[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.select-toggle.active[data-v-6cd32153] {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: #e5e7eb;
}
/* 批量操作栏 */
.batch-bar[data-v-6cd32153] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
margin-bottom: 20px;
}
.batch-count[data-v-6cd32153] {
font-size: 13px;
color: #94a3b8;
font-weight: 500;
}
.batch-btn[data-v-6cd32153] {
padding: 6px 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #94a3b8;
font-size: 12px;
cursor: pointer;
transition: all 0.2s;
}
.batch-btn[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.batch-btn.danger[data-v-6cd32153] {
border-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.batch-btn.danger[data-v-6cd32153]:hover {
background: rgba(239, 68, 68, 0.08);
}
.batch-bar-enter-active[data-v-6cd32153],
.batch-bar-leave-active[data-v-6cd32153] {
transition: all 0.2s ease;
}
.batch-bar-enter-from[data-v-6cd32153],
.batch-bar-leave-to[data-v-6cd32153] {
opacity: 0;
transform: translateY(-8px);
}
/* 照片包装器 */
.photo-wrapper[data-v-6cd32153] {
position: relative;
}
.select-check[data-v-6cd32153] {
position: absolute;
bottom: 8px;
right: 8px;
z-index: 10;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
border: 1.5px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: all 0.15s;
}
.select-check[data-v-6cd32153]:hover {
border-color: rgba(255, 255, 255, 0.5);
}
.select-check.checked[data-v-6cd32153] {
background: #e5e7eb;
border-color: #e5e7eb;
color: #111;
}
.photo-wrapper.selected[data-v-6cd32153] {
outline: 2px solid rgba(255, 255, 255, 0.3);
outline-offset: 2px;
border-radius: 16px;
}
/* 弹窗 */
.modal-overlay[data-v-6cd32153] {
position: fixed;
inset: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
}
.modal-box[data-v-6cd32153] {
background: #1a2235;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 28px;
width: 340px;
max-height: 60vh;
text-align: center;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.modal-icon[data-v-6cd32153] {
color: #f87171;
margin-bottom: 12px;
}
.modal-title[data-v-6cd32153] {
font-size: 16px;
font-weight: 600;
color: #e5e7eb;
margin: 0 0 8px;
}
.modal-desc[data-v-6cd32153] {
font-size: 13px;
color: #9ca3af;
margin: 0 0 20px;
line-height: 1.5;
}
.modal-work-list[data-v-6cd32153] {
display: flex;
flex-direction: column;
gap: 4px;
max-height: 300px;
overflow-y: auto;
margin-bottom: 16px;
}
.modal-work-item[data-v-6cd32153] {
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
color: #9ca3af;
font-size: 13px;
cursor: pointer;
text-align: left;
transition: all 0.15s;
}
.modal-work-item[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.08);
color: #e5e7eb;
border-color: rgba(255, 255, 255, 0.12);
}
.modal-actions[data-v-6cd32153] {
display: flex;
gap: 12px;
justify-content: center;
}
.modal-btn[data-v-6cd32153] {
padding: 8px 24px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.modal-btn.cancel[data-v-6cd32153] {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #9ca3af;
}
.modal-btn.cancel[data-v-6cd32153]:hover {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.modal-btn.danger[data-v-6cd32153] {
background: #dc2626;
color: #fff;
}
.modal-btn.danger[data-v-6cd32153]:hover {
background: #ef4444;
}
.modal-enter-active[data-v-6cd32153],
.modal-leave-active[data-v-6cd32153] {
transition: opacity 0.2s ease;
}
.modal-enter-active .modal-box[data-v-6cd32153],
.modal-leave-active .modal-box[data-v-6cd32153] {
transition: transform 0.2s ease;
}
.modal-enter-from[data-v-6cd32153],
.modal-leave-to[data-v-6cd32153] {
opacity: 0;
}
.modal-enter-from .modal-box[data-v-6cd32153],
.modal-leave-to .modal-box[data-v-6cd32153] {
transform: scale(0.95);
}
/* 移动端适配 */
@media (max-width: 1024px) {
.work-detail-page[data-v-6cd32153] {
grid-template-columns: 1fr;
padding: 5rem 24px 0 24px;
}
.sidebar-panel[data-v-6cd32153] {
display: none;
}
}
@media (max-width: 768px) {
.work-detail-page[data-v-6cd32153] {
padding: 5rem 16px 0 16px;
}
.content-main[data-v-6cd32153] {
padding: 20px 0;
}
.assets-grid-flow[data-v-6cd32153] {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.top-filter-bar[data-v-6cd32153] {
flex-wrap: wrap;
gap: 10px;
}
.modal-box[data-v-6cd32153] {
width: min(90vw, 340px);
}
}
@media (max-width: 480px) {
.assets-grid-flow[data-v-6cd32153] {
grid-template-columns: 1fr;
}
}
.postcard[data-v-29df59af] {
position: absolute;
left: 50%;
top: 0;
z-index: 1;
width: min(80vw, 780px);
display: grid;
grid-template-columns: 3fr 4fr;
gap: 22px;
padding: 22px 26px;
background: #fff9ee;
color: #27211d;
box-shadow: 0 26px 68px rgba(0, 0, 0, 0.5);
opacity: 0;
transform: translate(-50%, -440px) scale(1);
transform-origin: 50% 0;
transition:
opacity 0.55s ease,
transform 1.2s ease;
pointer-events: none;
}
.postcard.is-active[data-v-29df59af] {
z-index: 3;
opacity: 1;
transform: translate(-50%, 200px) scale(1);
}
.postcard.is-active.is-delivering[data-v-29df59af] {
animation: deliverPostcard-29df59af 4.5s ease-in-out forwards;
}
.postcard.is-next[data-v-29df59af] {
z-index: 2;
opacity: 0;
transform: translate(-50%, 72px) scale(0.8);
}
.photo-window[data-v-29df59af] {
position: relative;
overflow: hidden;
aspect-ratio: 3/4;
background: #ddd4c6;
}
.photo-window img[data-v-29df59af] {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.message-panel[data-v-29df59af] {
position: relative;
min-width: 0;
padding: 2px 12px 10px 26px;
text-align: left;
border-left: 1px solid rgba(39, 33, 29, 0.16);
}
.stamp-box[data-v-29df59af] {
position: absolute;
top: 12px;
right: 12px;
width: 84px;
height: 96px;
border: 2px solid rgba(39, 33, 29, 0.48);
display: grid;
place-items: center;
color: rgba(39, 33, 29, 0.34);
font-size: 0.65rem;
letter-spacing: 0.16em;
transform: rotate(2deg);
}
.ticket[data-v-29df59af] {
position: absolute;
top: 118px;
right: 24px;
width: 100px;
height: 38px;
border: 1px dashed rgba(39, 33, 29, 0.5);
display: grid;
place-items: center;
transform: rotate(-7deg);
}
.ticket span[data-v-29df59af] {
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid rgba(39, 33, 29, 0.42);
}
.scribble[data-v-29df59af] {
max-width: 220px;
margin: 0 0 30px;
color: rgba(39, 33, 29, 0.22);
font-family: 'Brush Script MT', 'Segoe Script', cursive;
font-size: 1.6rem;
line-height: 1.1;
transform: rotate(-5deg);
}
.message-panel h3[data-v-29df59af] {
max-width: 100%;
margin: 0 0 1.1rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(1.4rem, 2.5vw, 2.4rem);
line-height: 1.2;
}
.caption[data-v-29df59af] {
max-width: 90%;
margin: 0;
color: rgba(39, 33, 29, 0.72);
font-family: 'KaiTi', 'STKaiti', serif;
font-size: clamp(1.15rem, 1.9vw, 1.6rem);
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.postmark[data-v-29df59af] {
position: absolute;
right: 88px;
bottom: 52px;
width: 74px;
height: 74px;
border: 2px solid rgba(39, 33, 29, 0.48);
border-radius: 50%;
color: rgba(39, 33, 29, 0.48);
display: grid;
place-items: center;
text-align: center;
font-size: 0.68rem;
line-height: 1.15;
}
.postmark[data-v-29df59af]::after {
content: '';
position: absolute;
left: 62px;
top: 36px;
width: 88px;
height: 28px;
background:
repeating-linear-gradient(0deg,
transparent 0 5px,
rgba(39, 33, 29, 0.44) 5px 6px,
transparent 6px 9px);
}
.corner-grid[data-v-29df59af] {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
display: grid;
grid-template-columns: repeat(6, 32px);
gap: 6px;
}
.corner-grid i[data-v-29df59af] {
display: block;
aspect-ratio: 1;
border: 2px solid rgba(39, 33, 29, 0.48);
}
.address-grid[data-v-29df59af] {
position: absolute;
right: 14px;
bottom: 10px;
display: grid;
grid-template-columns: repeat(6, 32px);
gap: 6px;
}
.address-grid i[data-v-29df59af] {
display: block;
aspect-ratio: 1;
border: 2px solid rgba(39, 33, 29, 0.48);
}
@keyframes deliverPostcard-29df59af {
0% {
opacity: 0;
transform: translate(-50%, -440px) scale(1);
}
8% {
opacity: 1;
transform: translate(-50%, -440px) scale(1);
}
70% {
opacity: 1;
transform: translate(-50%, 200px) scale(1);
}
100% {
opacity: 1;
transform: translate(-50%, 200px) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
.postcard[data-v-29df59af],
.postcard.is-active[data-v-29df59af] {
animation: none;
transition: none;
}
}
.postcard-section[data-v-639125cb] {
min-height: 100vh;
background: #0b101e;
color: #fff;
overflow: hidden;
}
.postcard-scene[data-v-639125cb] {
position: relative;
width: min(100%, 1400px);
min-height: 100vh;
margin: 0 auto;
padding: 6rem 2rem 5rem;
}
.postcard-scene[data-v-639125cb]::before {
content: '';
position: absolute;
z-index: 6;
top: 0;
left: 0;
right: 0;
height: calc(6rem + 8px);
background: #0b101e;
}
.letterbox[data-v-639125cb] {
position: relative;
width: min(88vw, 900px);
height: 280px;
margin: 0 auto;
padding: 44px 48px 38px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%),
#7d1808;
border: 1px solid rgba(255, 195, 157, 0.3);
box-shadow:
inset 0 0 0 14px rgba(72, 11, 3, 0.68),
inset 0 -24px 42px rgba(40, 5, 0, 0.54),
0 32px 56px rgba(0, 0, 0, 0.55);
overflow: visible;
}
.letterbox[data-v-639125cb]::before {
content: '';
position: absolute;
inset: 30px;
border: 3px solid rgba(65, 10, 2, 0.75);
box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.42);
}
.letterbox[data-v-639125cb]::after {
content: '';
position: absolute;
z-index: 6;
top: 0;
left: 0;
right: 0;
height: 110px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
#7d1808;
box-shadow:
inset 0 0 0 14px rgba(72, 11, 3, 0.68),
inset 0 18px 28px rgba(40, 5, 0, 0.44);
}
.letterbox-slot[data-v-639125cb] {
position: relative;
z-index: 8;
height: 16px;
margin: 50px auto 30px;
border-radius: 14px;
background: #030303;
box-shadow:
inset 0 12px 18px rgba(0, 0, 0, 0.92),
0 2px 0 rgba(255, 180, 143, 0.12);
}
.letterbox-title[data-v-639125cb] {
position: relative;
z-index: 3;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1;
letter-spacing: 0.08em;
color: #fff6ee;
text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.postcard-stack[data-v-639125cb] {
position: relative;
z-index: 5;
width: min(82vw, 860px);
height: 680px;
margin: -190px auto 0;
}
.counter[data-v-639125cb] {
position: absolute;
z-index: 9;
top: 24px;
right: 30px;
min-width: 70px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(120, 126, 134, 0.78);
color: #fff;
font-weight: 800;
font-size: 1.2rem;
line-height: 1;
}
.lever[data-v-639125cb] {
position: absolute;
z-index: 25;
right: -56px;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 160px;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.lever-track[data-v-639125cb] {
position: absolute;
left: 50%;
top: 12px;
bottom: 12px;
width: 10px;
transform: translateX(-50%);
background: linear-gradient(180deg, #4a3a2a, #2a1a0a);
border-radius: 5px;
box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.12),
inset -1px 0 0 rgba(0, 0, 0, 0.3);
}
.lever-knob[data-v-639125cb] {
position: absolute;
left: 50%;
top: 12px;
width: 36px;
height: 36px;
transform: translate(-50%, 0);
background:
radial-gradient(circle at 38% 35%, #d4a056, #8a5a2a 60%, #5a3a1a);
border-radius: 50%;
border: 2px solid #3a2a1a;
box-shadow:
0 3px 8px rgba(0, 0, 0, 0.5),
inset 0 1px 3px rgba(255, 220, 160, 0.4);
transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.lever.is-pulled .lever-knob[data-v-639125cb] {
top: 110px;
}
.lever:hover .lever-knob[data-v-639125cb] {
background:
radial-gradient(circle at 38% 35%, #e4b066, #9a6a3a 60%, #6a4a2a);
}
.lever:active .lever-knob[data-v-639125cb] {
top: 80px;
}
.save-btn[data-v-639125cb] {
position: absolute;
z-index: 25;
right: -56px;
top: calc(50% + 100px);
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid rgba(255, 195, 157, 0.3);
background: rgba(125, 24, 8, 0.8);
color: #fff6ee;
display: grid;
place-items: center;
cursor: pointer;
transition: background 0.2s;
}
.save-btn[data-v-639125cb]:hover {
background: rgba(125, 24, 8, 1);
}
.postcards-page[data-v-61a82812] {
margin-top: -5rem;
padding-top: 5rem;
}