代码展示容器(浅色版)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ffffff; /* 页面背景改为白色,适配浅色容器 */
padding: 2rem;
}
/* 代码容器样式 – 浅色改版 */
.code-container {
position: relative;
background-color: #f8fafc; /* 浅灰背景,浅色核心 */
border: 1px solid #e2e8f0; /* 浅边框提升质感 */
border-radius: 6px;
padding: 1.2rem;
max-width: 900px;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 轻微阴影,增加层次感 */
}
/* 头部区域(标题+复制按钮) */
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.title {
font-size: 1.1rem;
color: #1e293b; /* 深色标题,保证可读性 */
font-weight: 500;
/* 无需额外添加 text-align: left; 原布局默认居左,添加后可进一步强化,效果一致 */
/* text-align: left; */
}
.copy-btn {
background: transparent;
border: none;
color: #2563eb; /* 深蓝色文字,适配浅色风格且醒目 */
cursor: pointer;
font-size: 1rem;
padding: 0.4rem 0.6rem;
transition: color 0.2s ease;
}
.copy-btn:hover {
color: #3b82f6; /* 浅一点的蓝色,hover交互效果 */
}
/* 代码块样式 – 浅色适配 */
.code-block {
color: #1f2937; /* 深灰文字,保证代码可读性 */
font-family: ‘Consolas’, ‘Monaco’, monospace; /* 等宽字体 */
white-space: pre-wrap; /* 保留换行和空格 */
line-height: 1.6;
overflow-x: auto; /* 超出部分滚动 */
}
{
Aspect ratio 9:16, with a warm red gradient background. A red-glazed porcelain bowl with steaming Laba Congee is placed slightly below the center, resting on a round red transparent dome with no extra decorations. At the top, "Laba FESTIVAL" is written in white handwritten English, with the small text "AFTER LABA, IT'S NEW YEAR" below it. In the upper-middle area, the Chinese copy "时光慢慢的第一缕年味 不等年到(已是满身温暖)" is in white, and "FULL OF WARMTH" is at the bottom. The style is minimalist modern, dominated by warm red tones, with soft hazy lighting, centered symmetric composition, creating a quiet and warm atmosphere.
}
// 复制按钮功能(保持不变,正常生效)
const copyBtn = document.querySelector(‘.copy-btn’);
const codeText = document.querySelector(‘.code-block code’).textContent;
copyBtn.addEventListener(‘click’, () => {
// 复制文本到剪贴板
navigator.clipboard.writeText(codeText).then(() => {
// 临时修改按钮文字提示
const originalText = copyBtn.textContent;
copyBtn.textContent = ‘已复制’;
setTimeout(() => {
copyBtn.textContent = originalText;
}, 2000);
}).catch(err => {
console.error(‘复制失败:’, err);
});
});