* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #1890ff;
--primary-light: #40a9ff;
--primary-dark: #096dd9;
--success: #52c41a;
--warning: #faad14;
--error: #f5222d;
--gray-1: #fafafa;
--gray-2: #f5f5f5;
--gray-3: #f0f0f0;
--gray-4: #d9d9d9;
--gray-5: #bfbfbf;
--gray-6: #8c8c8c;
--gray-7: #595959;
--gray-8: #262626;
--gray-9: #000;
--white: #fff;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background: var(--gray-2);
color: var(--gray-8);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
/* 头部区域 */
.header {
text-align: center;
padding: 32px 0 24px;
margin-bottom: 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
}
.logo {
font-size: 28px;
font-weight: 700;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.logo i {
font-size: 32px;
}
.subtitle {
font-size: 16px;
margin-top: 8px;
opacity: 0.9;
}
.platform-count {
background: rgba(255, 255, 255, 0.2);
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 14px;
margin-top: 8px;
}
/* 卡片容器 */
.card {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
padding: 24px;
margin-bottom: 24px;
}
.yincang{
display:none;
}
.card-title {
font-size: 18px;
font-weight: 600;
color: var(--gray-9);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
}

/* ============ 修复：图片展示区域 - 完整显示和下载功能 ============ */
.images-preview-container {
margin-bottom: 24px;
display: none;
}
.images-preview-container.show {
display: block;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.images-preview-title {
font-size: 18px;
font-weight: 700;
color: var(--gray-9);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 10px;
}
.images-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 20px;
margin-bottom: 16px;
}
.image-preview-card {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: var(--transition);
border: 2px solid var(--gray-3);
}
.image-preview-card:hover {
border-color: var(--primary);
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.image-preview-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 75%; /* 4:3 比例 */
overflow: hidden;
cursor: pointer;
}
.image-preview-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* 修复：确保图片完整显示，不裁剪 */
background-color: var(--gray-1);
transition: var(--transition);
display: block;
}
.image-preview-wrapper:hover img {
transform: scale(1.02);
}
.image-preview-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.image-preview-wrapper:hover .image-preview-overlay {
opacity: 1;
}
.image-preview-overlay i {
font-size: 48px;
color: white;
}
.image-preview-info {
padding: 16px;
border-top: 1px solid var(--gray-3);
}
.image-preview-title {
font-size: 15px;
font-weight: 600;
color: var(--gray-9);
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-preview-meta {
font-size: 13px;
color: var(--gray-6);
display: flex;
justify-content: space-between;
margin-bottom: 12px;
}
.image-preview-actions {
display: flex;
gap: 10px;
}
.image-action-btn {
flex: 1;
padding: 10px;
border: none;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.image-action-btn.download {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.image-action-btn.download:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.image-action-btn.view {
background: var(--gray-2);
color: var(--gray-8);
}
.image-action-btn.view:hover {
background: var(--primary);
color: white;
transform: translateY(-2px);
}
/* 批量下载按钮 */
.batch-download-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 16px;
}
.batch-download-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.batch-download-btn:disabled {
background: var(--gray-4);
cursor: not-allowed;
opacity: 0.6;
transform: none;
}
/* 图片放大查看器 */
.image-viewer-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 9999;
align-items: center;
justify-content: center;
}
.image-viewer-modal.show {
display: flex;
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.image-viewer-content {
max-width: 90%;
max-height: 90%;
}
.image-viewer-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain; /* 修复：确保大图完整显示 */
border-radius: var(--radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.image-viewer-close {
position: absolute;
top: 30px;
right: 30px;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
color: white;
border: none;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.image-viewer-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}

/* 输入区域、按钮、结果区域等样式 - 保持原样 */
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
font-size: 14px;
color: var(--gray-7);
margin-bottom: 8px;
font-weight: 500;
}
.input-field {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--gray-4);
border-radius: var(--radius-md);
font-size: 16px;
transition: var(--transition);
background: var(--white);
color: var(--gray-9);
}
.input-field:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}
.input-field::placeholder {
color: var(--gray-5);
}
.platform-categories {
display: flex;
gap: 12px;
margin-bottom: 16px;
overflow-x: auto;
padding-bottom: 8px;
scrollbar-width: none;
}
.platform-categories::-webkit-scrollbar {
display: none;
}
.category-tab {
padding: 8px 16px;
border: 2px solid var(--gray-4);
border-radius: 20px;
background: var(--white);
color: var(--gray-7);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: var(--transition);
}
.category-tab:hover {
border-color: var(--primary);
color: var(--primary);
}
.category-tab.active {
border-color: var(--primary);
background: rgba(24, 144, 255, 0.08);
color: var(--primary);
font-weight: 600;
}
.platform-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 24px;
max-height: 300px;
overflow-y: auto;
padding-right: 8px;
}
.platform-item {
padding: 12px 8px;
border: 2px solid var(--gray-4);
border-radius: var(--radius-md);
background: var(--white);
color: var(--gray-7);
font-size: 13px;
font-weight: 500;
text-align: center;
cursor: pointer;
transition: var(--transition);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
}
.platform-item i {
font-size: 24px;
margin-bottom: 4px;
}
.platform-item:hover {
border-color: var(--primary-light);
color: var(--primary);
transform: translateY(-2px);
}
.platform-item.active {
border-color: var(--primary);
background: rgba(24, 144, 255, 0.08);
color: var(--primary);
font-weight: 600;
transform: translateY(-2px);
box-shadow: var(--shadow-sm);
}
.btn {
width: 100%;
padding: 14px 20px;
border: none;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--white);
color: var(--primary);
border: 1px solid var(--gray-4);
}
.btn-secondary:hover {
border-color: var(--primary);
background: rgba(24, 144, 255, 0.04);
}
.btn-success {
background: var(--success);
color: var(--white);
}
.btn-success:hover:not(:disabled) {
background: #49a916;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-app {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
color: var(--white);
}
.btn-app:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.result {
display: block;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity 0.3s ease, height 0.3s ease;
}
.result.show {
opacity: 1;
height: auto;
margin-top: 24px;
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--gray-3);
}
.platform-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: var(--gray-2);
border-radius: 20px;
font-size: 14px;
font-weight: 500;
color: var(--gray-7);
}
.char-count {
font-size: 13px;
color: var(--gray-6);
}
.copywriting-box {
background: var(--gray-2);
border-radius: var(--radius-md);
padding: 20px;
margin-bottom: 20px;
font-size: 16px;
line-height: 1.8;
min-height: 120px;
white-space: pre-line;
color: var(--gray-9);
border: 1px solid var(--gray-3);
position: relative;
}
.copy-overlay {
position: absolute;
top: 12px;
right: 12px;
background: rgba(24, 144, 255, 0.1);
color: var(--primary);
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.8;
transition: var(--transition);
z-index: 10;
}
.copy-overlay:hover {
opacity: 1;
background: rgba(24, 144, 255, 0.2);
transform: scale(1.1);
}
.copy-overlay.copied {
background: rgba(82, 196, 26, 0.2);
color: var(--success);
}
.copy-overlay i {
font-size: 16px;
}
.btn-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
.jump-hint {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
border: 1px solid var(--primary);
border-radius: var(--radius-md);
padding: 16px;
margin-top: 16px;
display: none;
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.jump-hint.show {
display: block;
}
.jump-hint-title {
font-weight: 600;
color: var(--primary);
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.jump-hint-desc {
color: var(--gray-7);
font-size: 14px;
margin-bottom: 12px;
line-height: 1.6;
}
.jump-hint-warning {
background: rgba(250, 173, 20, 0.1);
border: 1px solid var(--warning);
border-radius: var(--radius-sm);
padding: 8px 12px;
font-size: 13px;
color: var(--warning);
margin-top: 8px;
}
.loading {
display: none;
text-align: center;
padding: 24px;
}
.spinner {
width: 32px;
height: 32px;
border: 3px solid var(--gray-4);
border-top: 3px solid var(--primary);
border-radius: 50%;
margin: 0 auto 12px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-text {
color: var(--gray-7);
font-size: 14px;
}
.error {
display: none;
background: rgba(245, 34, 45, 0.08);
border: 1px solid var(--error);
border-radius: var(--radius-md);
padding: 12px 16px;
color: var(--error);
font-size: 14px;
margin-bottom: 16px;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.footer {
text-align: center;
padding: 24px 0;
color: var(--gray-6);
font-size: 13px;
line-height: 1.8;
}
.footer a {
color: var(--primary);
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: var(--white);
color: var(--gray-9);
padding: 12px 24px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
font-size: 14px;
font-weight: 500;
z-index: 9999;
transition: transform 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
border-left: 4px solid var(--primary);
}
.toast.show {
transform: translateX(-50%) translateY(0);
}
.toast.success {
border-left-color: var(--success);
color: var(--success);
}
.toast.error {
border-left-color: var(--error);
color: var(--error);
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
align-items: center;
justify-content: center;
}
.modal.show {
display: flex;
}
.modal-content {
background: var(--white);
border-radius: var(--radius-lg);
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: var(--shadow-lg);
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.modal-title {
font-size: 18px;
font-weight: 600;
color: var(--gray-9);
margin-bottom: 16px;
text-align: center;
}
.modal-desc {
color: var(--gray-7);
font-size: 14px;
line-height: 1.6;
margin-bottom: 20px;
text-align: center;
}
.modal-btn-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.modal-btn {
padding: 12px;
border: none;
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.modal-btn-cancel {
background: var(--gray-3);
color: var(--gray-8);
}
.modal-btn-confirm {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
}
.modal-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
.platform-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
max-height: 250px;
}
.btn-group {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.container {
padding: 12px;
}
.header {
padding: 16px 0;
}
.card {
padding: 16px;
border-radius: var(--radius-md);
}
.input-field {
padding: 10px 12px;
font-size: 15px;
}
.btn {
padding: 12px;
font-size: 15px;
}
.copywriting-box {
font-size: 15px;
padding: 14px;
}
.platform-grid {
grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
max-height: 200px;
}
.platform-item {
padding: 10px 6px;
font-size: 12px;
}
.platform-item i {
font-size: 20px;
}
.images-grid {
grid-template-columns: 1fr;
}
}