完善界面样式与功能
This commit is contained in:
Cx330 committed
1 parent
cff6266d00
commit
f82dfc67c4
22 files changed
+1413
-162
No files matched your search
+458
-26
@@ -1,49 +1,479 @@
|
||||
:root {
|
||||
--main_text_color: #000000;
|
||||
--main_bg_color: linear-gradient(50deg, #a2d0ff, #ffffff);
|
||||
--gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%);
|
||||
--purple_text_color: #747bff;
|
||||
--text_bg_color: rgb(26, 4, 48);
|
||||
--item_bg_color: rgba(255, 255, 255, 0.35);
|
||||
--item_hover_color: rgba(255, 255, 255, 0.45);
|
||||
--card_filter: 20px;
|
||||
--back_filter: 15px;
|
||||
--back_filter_color: rgba(255, 255, 255, 0.1);
|
||||
--fill: #000000;
|
||||
}
|
||||
|
||||
html[data-theme="Dark"] {
|
||||
--main_text_color: #fff;
|
||||
--main_bg_color: linear-gradient(50deg, #1a1a2e, #16213e);
|
||||
--gradient: linear-gradient(120deg, rgb(133, 62, 255), #f76cc6 30%, rgb(255, 255, 255) 60%);
|
||||
--purple_text_color: #747bff;
|
||||
--text_bg_color: rgb(26, 4, 48);
|
||||
--item_bg_color: rgba(255, 255, 255, 0.18);
|
||||
--item_hover_color: rgba(255, 255, 255, 0.25);
|
||||
--card_filter: 20px;
|
||||
--back_filter: 15px;
|
||||
--back_filter_color: rgba(0, 0, 0, 0.2);
|
||||
--fill: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Arial", sans-serif;
|
||||
|
||||
/* 背景图 */
|
||||
background-image: url("../blackboard/.jpg"); /* 图片地址 */
|
||||
background-size: cover; /* 自动缩放并裁剪 */
|
||||
background-position: center center; /* 居中裁剪 */
|
||||
background-repeat: no-repeat; /* 不重复平铺 */
|
||||
|
||||
/* 铺满整个屏幕 */
|
||||
font-family: 'Arial', sans-serif;
|
||||
background: var(--main_bg_color);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
color: var(--main_text_color);
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc(100vh - 100px);
|
||||
padding-bottom: 100px;
|
||||
/* 避免 fixed 页脚/聊天区遮挡：用 footer 高度 + 预留区间替代魔法数 */
|
||||
height: calc(100vh - (var(--footer-height, 32px) + 68px));
|
||||
padding: 60px 20px 20px;
|
||||
max-width: 1150px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
gap: 14px;
|
||||
/* 允许左右溢出显示，避免 logo 两端被父容器裁切 */
|
||||
overflow-x: visible;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.left-panel, .right-panel {
|
||||
width: 50%;
|
||||
.left-panel {
|
||||
flex: 0 0 30%;
|
||||
width: 30%;
|
||||
display: flex;
|
||||
justify-content: center; /* 水平居中 */
|
||||
align-items: center; /* 垂直居中 */
|
||||
flex-direction: column; /* 内容垂直排列 */
|
||||
padding: 20px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 16px 20px;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin-top: 40px;
|
||||
font-size: 50px;
|
||||
.right-panel {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: stretch;
|
||||
flex-direction: column;
|
||||
padding: 20px 10px 20px 0;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding-bottom: calc(var(--footer-height, 32px) + 120px);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
display: block;
|
||||
margin: 5px 0;
|
||||
.left-panel::-webkit-scrollbar,
|
||||
.right-panel::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'Pacifico', cursive;
|
||||
font-size: 52px;
|
||||
font-weight: 800;
|
||||
margin: 12px 0;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: visible;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 200%;
|
||||
background-position: 0%;
|
||||
animation: backgroundSizeAnimation 10s ease-in-out infinite;
|
||||
background-image: var(--gradient);
|
||||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
.left-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 14px;
|
||||
box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.daily-quote {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
margin-bottom: 18px;
|
||||
text-align: center;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.quote-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: var(--main_text_color);
|
||||
margin-bottom: 8px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote-author {
|
||||
font-size: 12px;
|
||||
color: var(--main_text_color);
|
||||
opacity: 0.7;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.quote-author:not(:empty)::before {
|
||||
content: "——";
|
||||
}
|
||||
|
||||
.left-design {
|
||||
margin-top: auto;
|
||||
padding-top: 14px;
|
||||
font-size: 12px;
|
||||
font-family: 'Pacifico', cursive;
|
||||
font-style: italic;
|
||||
color: var(--main_text_color);
|
||||
opacity: 0.65;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.design-name {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.design-name::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background-color: var(--main_text_color);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.design-name:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.intro {
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
background: var(--item_bg_color);
|
||||
border-radius: 13px;
|
||||
padding: 25px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
transition: transform 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.intro:hover {
|
||||
transform: translateY(-5px);
|
||||
background: var(--item_hover_color);
|
||||
}
|
||||
|
||||
.intro h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: var(--main_text_color);
|
||||
}
|
||||
|
||||
.intro ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.intro li {
|
||||
margin: 8px 0;
|
||||
font-size: 16px;
|
||||
color: var(--main_text_color);
|
||||
}
|
||||
|
||||
.intro a {
|
||||
display: block;
|
||||
margin: 8px 0;
|
||||
padding: 10px 15px;
|
||||
background: var(--item_bg_color);
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: var(--main_text_color);
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
}
|
||||
|
||||
.intro a:hover {
|
||||
background: var(--item_hover_color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
@keyframes backgroundSizeAnimation {
|
||||
0% {
|
||||
background-position: 100%;
|
||||
}
|
||||
25% {
|
||||
background-position: 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 0%;
|
||||
}
|
||||
75% {
|
||||
background-position: 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.left-tags {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
background: var(--item_bg_color);
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
transition: transform 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tag-item:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.gradientText {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-size: 200%;
|
||||
background-position: 0%;
|
||||
font-family: 'Pacifico', cursive;
|
||||
animation: backgroundSizeAnimation 10s ease-in-out infinite;
|
||||
background-image: var(--gradient);
|
||||
}
|
||||
|
||||
.purpleText {
|
||||
color: var(--purple_text_color);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.right-intro {
|
||||
width: 100%;
|
||||
background: var(--item_bg_color);
|
||||
border-radius: 13px;
|
||||
padding: 12px 18px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.music-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.music-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--main_text_color);
|
||||
margin-bottom: 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.music-artist {
|
||||
font-size: 14px;
|
||||
color: var(--main_text_color);
|
||||
opacity: 0.7;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.music-controls {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
background: var(--item_bg_color);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--main_text_color);
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
}
|
||||
|
||||
.control-btn:hover {
|
||||
transform: scale(1.1);
|
||||
background: var(--item_hover_color);
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.future-content {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 6px 0 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
margin: 22px 0 14px;
|
||||
}
|
||||
|
||||
.section-title-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.right-section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.projectList {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.projectItem {
|
||||
display: flex;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
background-color: var(--item_bg_color);
|
||||
border-radius: 12px;
|
||||
padding: 15px;
|
||||
height: 110px;
|
||||
width: calc(50% - 6px);
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
transition: opacity 0.3s ease, background-color 0.2s ease, transform 0.3s ease;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.projectItem:hover {
|
||||
background: var(--item_hover_color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.projectItemLeft {
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.projectItemLeft h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.projectItemLeft p {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
opacity: 0.85;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.projectItemRight {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.projectItemRight img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* 默认隐藏 */
|
||||
@@ -53,6 +483,8 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 全屏按钮样式（仅大屏幕显示） */
|
||||
#fullscreen-button {
|
||||
position: absolute;
|
||||
@@ -68,5 +500,5 @@ body {
|
||||
}
|
||||
|
||||
#fullscreen-button:hover {
|
||||
transform: scale(1.20); /* 悬停时上下左右均匀放大 20% */
|
||||
transform: scale(1.10); /* 悬停时上下左右均匀放大 10% */
|
||||
}
|
||||
+96
-26
@@ -1,13 +1,13 @@
|
||||
.chat-container {
|
||||
position: fixed;
|
||||
bottom: 50px;
|
||||
bottom: calc(var(--footer-height, 32px) + 18px);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0); /* 几乎全透明 */
|
||||
background: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
z-index: 5;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
@@ -15,15 +15,18 @@
|
||||
min-height: 20px;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
background: rgba(200, 200, 200, 0.1); /* 淡灰半透明 */
|
||||
backdrop-filter: blur(8px); /* 背景模糊 */
|
||||
-webkit-backdrop-filter: blur(8px); /* Safari 兼容 */
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
background: var(--item_bg_color);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background-clip: padding-box;
|
||||
margin-bottom: 15px;
|
||||
padding: 20px;
|
||||
border-radius: 13px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.chat-box.show {
|
||||
@@ -35,27 +38,58 @@
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 5px 0;
|
||||
padding: 10px 15px;
|
||||
max-width: fit-content;
|
||||
border-radius: 12px;
|
||||
margin: 8px 0;
|
||||
padding: 12px 18px;
|
||||
max-width: 80%;
|
||||
width: fit-content; /* 让气泡宽度随文字内容自适应 */
|
||||
min-width: 10px;
|
||||
display: block;
|
||||
border-radius: 16px;
|
||||
word-break: break-word;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
user-select: text;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.message:hover .copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
background-color: #daf1fc;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
align-self: flex-end;
|
||||
text-align: left;
|
||||
margin-left: auto;
|
||||
color: var(--main_text_color);
|
||||
}
|
||||
|
||||
.message.bot {
|
||||
background-color: #eee;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
align-self: flex-start;
|
||||
text-align: left;
|
||||
margin-right: auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
color: var(--main_text_color);
|
||||
}
|
||||
|
||||
/* 清除常见 markdown 元素的默认 margin */
|
||||
@@ -91,33 +125,69 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
#userInput {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
padding: 12px 16px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
border-radius: 13px;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
background: var(--item_bg_color);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background-clip: padding-box;
|
||||
color: var(--main_text_color);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#userInput:focus {
|
||||
outline: none;
|
||||
background: var(--item_hover_color);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
html[data-theme="Dark"] .chat-box {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
html[data-theme="Dark"] .message.user {
|
||||
background: rgba(255, 255, 255, 0.20);
|
||||
border: 1px solid rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
|
||||
html[data-theme="Dark"] .message.bot {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
html[data-theme="Dark"] #userInput {
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border-radius: 6px;
|
||||
border-radius: 13px;
|
||||
backdrop-filter: blur(var(--card_filter));
|
||||
-webkit-backdrop-filter: blur(var(--card_filter));
|
||||
background: var(--item_bg_color);
|
||||
color: var(--main_text_color);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0056b3;
|
||||
background: var(--item_hover_color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.typing {
|
||||
color: #aaa;
|
||||
color: var(--purple_text_color);
|
||||
font-style: italic;
|
||||
animation: blink 1.8s infinite;
|
||||
}
|
||||
|
||||
+9
-4
@@ -1,3 +1,8 @@
|
||||
:root {
|
||||
/* 供布局计算：footer 由于使用 fixed + max-height，实际高度通常不会超过该值 */
|
||||
--footer-height: 40px;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
footer {
|
||||
background-color: rgba(51, 51, 51, 0.5); /* 半透明背景 */
|
||||
@@ -12,11 +17,11 @@ footer {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 14px;
|
||||
min-height: 20px; /* 保证最低高度 */
|
||||
max-height: 32px; /* 移除高度上限，允许内容扩展 */
|
||||
min-height: 40px; /* 保证最低高度 */
|
||||
max-height: 40px; /* 移除高度上限，允许内容扩展 */
|
||||
z-index: 2000;
|
||||
text-align: center;
|
||||
line-height: 1.4; /* 行高适配多行文字 */
|
||||
line-height: 1.2; /* 行高适配多行文字 */
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -35,7 +40,7 @@ footer {
|
||||
}
|
||||
|
||||
.line-1 {
|
||||
margin-bottom: -12px;
|
||||
margin-bottom: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+142
-28
@@ -1,46 +1,160 @@
|
||||
@media screen and (max-width: 768px) {
|
||||
@media screen and (max-width: 800px) {
|
||||
.main-layout {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#fullscreen-button {
|
||||
padding-right: 10px;
|
||||
padding-top: 10px;
|
||||
height: calc(100vh - (var(--footer-height, 32px) + 68px));
|
||||
min-height: 0;
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: none; /* 移动端默认只展示右侧，配合 Switch 按钮切换 */
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 100%;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 15px;
|
||||
padding-bottom: calc(var(--footer-height, 32px) + 120px);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 8.7vw;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* 移动端同样避免横向裁切 */
|
||||
.logo {
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.intro {
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.left-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.intro h3 {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.intro li {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
.intro a {
|
||||
font-size: 4vw;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 15vw;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
.future-content {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.switch_button {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
bottom: 120px;
|
||||
z-index: 1;
|
||||
#tanChiShe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.swbutton {
|
||||
color: black;
|
||||
background-color: rgba(200, 200, 200, 0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
transition: background-color 1s ease, transform 0.5s ease;
|
||||
.left-panel {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
padding: 140px 15px 15px;
|
||||
transition: transform 0.3s ease;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.swbutton:hover {
|
||||
background-color: rgba(200, 200, 200, 0.3);
|
||||
transform: scale(1.02); /* 可选的小缩放效果 */
|
||||
|
||||
.right-panel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
padding: 140px 15px calc(var(--footer-height, 32px) + 120px) 15px;
|
||||
transition: transform 0.3s ease;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
bottom: calc(var(--footer-height, 32px) + 16px);
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
width: 95%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
width: 95%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#userInput {
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 10px 14px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.projectItem {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
/* 隐藏移动端滚动条 */
|
||||
.left-panel::-webkit-scrollbar,
|
||||
.right-panel::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.left-panel,
|
||||
.right-panel {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
+3
-2
@@ -1,6 +1,7 @@
|
||||
/* PC端设置 */
|
||||
#tanChiShe {
|
||||
width: clamp(100px, 40vw, 600px);
|
||||
/* 尽量贴近下方卡片的视觉高度/宽度量级 */
|
||||
width: clamp(140px, 42vw, 660px);
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
@@ -9,6 +10,6 @@
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
#tanChiShe {
|
||||
width: clamp(100px, 80vw, 600px);
|
||||
width: clamp(140px, 78vw, 660px);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user