yanxulong/AIEC-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
闫旭隆
2025-10-17 09:31:28 +08:00
commit 4698145045
589 changed files with 196795 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

415
AIEC-server/css/adaptive-sizing.css Normal file
View File

@ -0,0 +1,415 @@
/* ===== 自适应尺寸系统 - 基于视口比例 ===== */
/*
* 仅处理尺寸比例，不改变任何布局逻辑
* 基准分辨率：1920x1080
* 原始尺寸：图片380x200px，输入框1020px
* 底部间距：50px → 自适应
*/
/* ===== 底部新闻图片自适应尺寸 ===== */
/* 380px ÷ 1920px = 19.8vw */
/* 200px ÷ 1080px = 18.5vh */
.news-image,
.ticker-flip-card img,
.flip-card-front img,
.flip-card-back img,
img[src*="新闻"] {
/* 宽度：基于视口宽度，限制最小和最大值 */
width: min(max(19.8vw, 280px), 380px) !important;
/* 高度：保持宽高比 380:200 = 1.9:1 */
height: min(max(10.4vw, 147px), 200px) !important;
min-width: min(max(19.8vw, 280px), 380px) !important;
min-height: min(max(10.4vw, 147px), 200px) !important;
max-width: min(max(19.8vw, 280px), 380px) !important;
max-height: min(max(10.4vw, 147px), 200px) !important;
}
/* 翻转卡片容器 - 匹配图片尺寸 */
.ticker-flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
width: min(max(19.8vw, 280px), 380px) !important;
height: min(max(10.4vw, 147px), 200px) !important;
min-width: min(max(19.8vw, 280px), 380px) !important;
min-height: min(max(10.4vw, 147px), 200px) !important;
max-width: min(max(19.8vw, 280px), 380px) !important;
max-height: min(max(10.4vw, 147px), 200px) !important;
}
/* ===== 图片容器布局设置 ===== */
/* 保持原始的居中逻辑，调整间距让3张图片整体居中对齐 */
.ticker-carousel {
gap: min(max(4.2vw, 60px), 80px) !important; /* 80px ÷ 1920px = 4.2vw，增大间距让3张图片分布更均匀 */
}
/* 确保ticker-carousel使用原始的居中方式 */
.ticker-3d-container .ticker-carousel,
#tickerCarousel,
body .ticker-carousel {
position: absolute !important;
top: 50% !important;
left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
transform: translate(-50%, -50%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important; /* 让宽度自适应内容 */
max-width: 100% !important;
}
/* 侧边栏折叠时的偏移 */
body.sidebar-collapsed .ticker-carousel {
left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
transform: translate(-50%, -50%) !important;
}
/* 侧边栏展开时的偏移 */
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-carousel {
left: calc(50% - 130px - 2%) !important; /* 向左偏移130px + 2% */
transform: translate(-50%, -50%) !important;
}
/* ===== 输入框自适应宽度 ===== */
/* 调整为 1200px ÷ 1920px = 62.5vw，更宽的输入框 */
.deepseek-input-section .input-area,
#welcomeMode .input-area,
#chatModeInput .container {
max-width: min(max(62.5vw, 600px), 1200px) !important;
}
.input-wrapper {
/* 在大屏幕上自适应，小屏幕保持最小值 */
max-width: min(max(62.5vw, 600px), 1200px) !important;
}
/* ===== 聊天消息容器宽度 ===== */
.chat-messages {
/* 移除限制，由layout-fixes.css控制 */
}
/* ===== 聊天模式输入框宽度 ===== */
#chatModeInput .container,
#chatModeInput .input-wrapper {
max-width: min(max(62.5vw, 600px), 1200px) !important; /* 与主页输入框一致 */
margin: 0 auto !important;
}
/* ===== 聊天消息项宽度 ===== */
.chat-message,
.message-content {
/* 消息项宽度由容器控制 */
}
/* ===== 侧边栏字体大小调整 ===== */
/* 调整侧边栏菜单项文字大小，与聊天内容区一致 */
.menu-item,
.menu-text,
.sidebar .menu-item {
font-size: 16px !important; /* 与聊天内容保持一致 */
}
/* 增加侧边栏内边距，防止图标被遮挡 */
.sidebar,
#sidebar {
padding-left: 8px !important; /* 增加左内边距 */
padding-right: 8px !important; /* 增加右内边距 */
}
/* 侧边栏内容区域调整 */
.sidebar-content {
padding: 0 4px !important; /* 给内容增加一点内边距 */
}
/* 历史记录标题 */
.chat-history-title {
font-size: 16px !important;
font-weight: 600 !important;
}
/* 历史记录项 */
.chat-history-item,
.chat-history-item .chat-title,
.chat-history-list .chat-history-item {
font-size: 16px !important;
line-height: 1.5 !important;
}
/* 历史记录区域整体 */
.chat-history-section {
font-size: 16px !important;
}
/* 确保所有历史记录文字统一 */
.sidebar .chat-history-item,
#sidebar .chat-history-item {
font-size: 16px !important;
}
/* 侧边栏底部菜单项 */
.sidebar-bottom-items .menu-item {
font-size: 16px !important;
}
/* ===== 自定义滚动条样式 ===== */
/* Webkit浏览器（Chrome, Safari, Edge）*/
::-webkit-scrollbar {
width: 8px !important; /* 滚动条宽度 */
height: 8px !important; /* 水平滚动条高度 */
}
::-webkit-scrollbar-track {
background: transparent !important; /* 轨道透明 */
border-radius: 4px !important;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2) !important; /* 滑块颜色 */
border-radius: 4px !important;
transition: background 0.2s !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3) !important; /* 悬停时颜色加深 */
}
/* Firefox浏览器 */
* {
scrollbar-width: thin !important; /* 细滚动条 */
scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
}
/* 聊天区域特定的滚动条样式 */
.chat-messages::-webkit-scrollbar,
.chat-container::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar {
width: 6px !important; /* 更细的滚动条 */
}
.chat-messages::-webkit-scrollbar-thumb,
.chat-container::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15) !important;
}
.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-container::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.25) !important;
}
/* ===== 欢迎文字自适应大小 ===== */
.deepseek-welcome-section h2,
.text-4xl {
/* 4rem = 64px，64px ÷ 1080px = 5.9vh */
font-size: min(max(3.3vw, 2rem), 4rem) !important;
}
/* ===== 底部图片区域位置自适应 ===== */
/* 50px ÷ 1080px = 4.6vh，但这太大了，改为 2.6vh (约28px在1080p) */
.ticker-section,
body .ticker-section,
html body .ticker-section {
/* 底部间距：基于视口高度，最小20px，最大40px */
bottom: min(max(2.6vh, 20px), 40px) !important;
/* 确保3D翻转有足够空间 */
overflow: visible !important;
z-index: 10 !important;
/* 确保使用全屏宽度 */
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
/* 强制覆盖侧边栏响应式设置 */
body:not(.chat-mode) .ticker-section,
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-section {
left: 0 !important;
width: 100% !important;
}
/* ===== 欢迎栏和输入框位置自适应 ===== */
/* 欢迎栏文字位置 - 垂直居中偏上 */
.deepseek-welcome-section {
/* 使用绝对定位，基于视口 */
position: absolute !important;
top: max(23vh, 140px) !important; /* 距顶部23%视口高度（原25% - 2%） */
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
text-align: center !important;
}
/* 输入框位置 - 紧贴欢迎栏下方 */
body:not(.chat-mode) .deepseek-input-section {
position: fixed !important;
/* 紧贴欢迎栏，只留小间距 */
top: max(35vh, 220px) !important; /* 欢迎栏25vh + 文字高度约8vh + 小间距2vh = 35vh */
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
max-width: min(max(62.5vw, 600px), 1200px) !important; /* 更宽的输入框 */
z-index: 20 !important;
}
/* 小窗口时的特殊处理 */
@media (max-height: 700px) {
.deepseek-welcome-section {
top: 70px !important; /* 固定位置，更靠上（原80px - 10px） */
}
body:not(.chat-mode) .deepseek-input-section {
top: 160px !important; /* 紧贴欢迎栏下方 */
}
.deepseek-welcome-section h2 {
font-size: 1.8rem !important; /* 进一步缩小文字 */
}
}
/* ===== 不同分辨率优化 ===== */
/* 2K屏幕 (2560x1440) */
@media (min-width: 2560px) {
/* 在2K屏幕上限制最大尺寸，防止过大 */
.news-image,
.ticker-flip-card img {
width: 420px !important; /* 380 × 1.1 */
height: 221px !important; /* 200 × 1.1 */
}
.ticker-flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
width: 420px !important;
height: 221px !important;
}
.input-wrapper,
.deepseek-input-section .input-area,
#chatModeInput .container,
.chat-messages,
.chat-message {
max-width: 1320px !important; /* 1200 × 1.1 */
}
.ticker-section {
bottom: 35px !important; /* 适度增加底部间距 */
}
}
/* 4K屏幕 (3840x2160) */
@media (min-width: 3840px) {
/* 在4K屏幕上进一步限制，防止元素过大 */
.news-image,
.ticker-flip-card img {
width: 480px !important; /* 380 × 1.26 */
height: 253px !important; /* 200 × 1.26 */
}
.ticker-flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
width: 480px !important;
height: 253px !important;
}
.input-wrapper,
.deepseek-input-section .input-area,
#chatModeInput .container,
.chat-messages,
.chat-message {
max-width: 1500px !important; /* 1200 × 1.25 */
}
.deepseek-welcome-section h2 {
font-size: 5rem !important;
}
.ticker-section {
bottom: 40px !important; /* 4K屏幕保持合理间距 */
}
}
/* 小屏幕笔记本 (1366x768) */
@media (max-width: 1366px) {
/* 使用vw单位自动缩放 */
/* 图片会自动变为约270px宽 (19.8vw × 1366px) */
/* 输入框会自动变为约725px宽 (53.1vw × 1366px) */
/* 调整欢迎栏和输入框位置 */
.deepseek-welcome-section {
top: max(18vh, 110px) !important; /* 上移2% */
}
body:not(.chat-mode) .deepseek-input-section {
top: max(30vh, 190px) !important; /* 紧贴欢迎栏 */
}
}
/* 更小屏幕 (1280x720) */
@media (max-width: 1280px) {
/* 确保最小尺寸 */
.news-image,
.ticker-flip-card img {
width: max(19.8vw, 250px) !important;
height: max(10.4vw, 132px) !important;
}
}
/* 平板和移动设备保持原有逻辑 */
@media (max-width: 768px) {
/* 平板设备使用固定小尺寸 */
.news-image,
.ticker-flip-card img {
width: 250px !important;
height: 132px !important;
}
.ticker-flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
width: 250px !important;
height: 132px !important;
}
.input-wrapper {
max-width: 90vw !important;
}
/* 平板上调整位置 */
.deepseek-welcome-section {
top: 60px !important; /* 固定位置 */
}
body:not(.chat-mode) .deepseek-input-section {
top: 140px !important; /* 紧贴欢迎栏 */
}
}
@media (max-width: 480px) {
/* 手机设备隐藏底部图片 */
.ticker-section {
display: none !important;
}
.input-wrapper {
max-width: 95vw !important;
}
.deepseek-welcome-section h2 {
font-size: 1.8rem !important;
}
/* 手机上调整位置 */
.deepseek-welcome-section {
top: 40px !important; /* 固定位置 */
}
body:not(.chat-mode) .deepseek-input-section {
top: 110px !important; /* 紧贴欢迎栏 */
}
}