代码展示容器(浅色版)
* {
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; /* 超出部分滚动 */
}
中文提示词
复制
{高端编辑工作室摄影,展示[产品形式],由[材质]制成,带有[颜色][细节]… 置于自然纹理[底座表面]上,周围散落[液体]液滴和[装饰自然元素]枝叶,金色时刻色调。风格:3D真实感,奢侈产品摄影,浅景深。}
// 复制按钮功能(保持不变,正常生效)
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);
});
});