minor css improve

This commit is contained in:
binary-husky
2024-07-20 10:29:47 +00:00
parent 0b08bb2cea
commit f0cd617ec2
2 changed files with 10 additions and 13 deletions

View File

@@ -158,39 +158,33 @@
transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;
opacity: 0; opacity: 0;
} }
.welcome-card-container.show { .welcome-card-container.show {
opacity: 1; opacity: 1;
} }
.welcome-card-container.hide { .welcome-card-container.hide {
opacity: 0; opacity: 0;
} }
.welcome-card { .welcome-card {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 6px 3px #e5e7eb6b; box-shadow: 0px 0px 6px 3px #e5e7eb6b;
padding: 15px; padding: 15px;
margin: 10px; margin: 10px;
flex: 0 0 calc(30% - 10px); flex: 1 0 calc(30% - 5px);
transition: opacity 0.2s ease-in-out; transition: opacity 0.1s ease-in-out;
opacity: 1; opacity: 1;
} }
.welcome-card.show { .welcome-card.show {
opacity: 1; opacity: 1;
} }
.welcome-card.hide { .welcome-card.hide {
opacity: 0; opacity: 0;
} }
.welcome-title { .welcome-title {
font-size: 40px; font-size: 40px;
padding: 20px; padding: 20px;
margin: 10px; margin: 10px;
flex: 0 0 calc(90%); flex: 0 0 calc(90%);
} }
.welcome-card-title { .welcome-card-title {
font-size: 20px; font-size: 20px;
margin: 2px; margin: 2px;
@@ -202,7 +196,6 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.welcome-svg { .welcome-svg {
padding-right: 10px; padding-right: 10px;
} }
@@ -210,9 +203,11 @@
.welcome-title-text { .welcome-title-text {
text-wrap: nowrap; text-wrap: nowrap;
} }
.welcome-content { .welcome-content {
text-wrap: balance; text-wrap: balance;
height: 55px;
display: flex;
align-items: center;
} }

View File

@@ -112,7 +112,7 @@ class WelcomeMessage {
// 更新卡片信息 // 更新卡片信息
const message = this.static_welcome_message_previous[index]; const message = this.static_welcome_message_previous[index];
const title = card.getElementsByClassName('welcome-card-title')[0]; const title = card.getElementsByClassName('welcome-card-title')[0];
const content = card.getElementsByClassName('welcome-content')[0]; const content = card.getElementsByClassName('welcome-content-c')[0];
const svg = card.getElementsByClassName('welcome-svg')[0]; const svg = card.getElementsByClassName('welcome-svg')[0];
const text = card.getElementsByClassName('welcome-title-text')[0]; const text = card.getElementsByClassName('welcome-title-text')[0];
svg.src = message.svg; svg.src = message.svg;
@@ -195,7 +195,10 @@ class WelcomeMessage {
// 创建内容 // 创建内容
const content = document.createElement('div'); const content = document.createElement('div');
content.classList.add('welcome-content'); content.classList.add('welcome-content');
content.textContent = message.content; const content_c = document.createElement('div');
content_c.classList.add('welcome-content-c');
content_c.textContent = message.content;
content.appendChild(content_c);
// 将标题和内容添加到卡片 div 中 // 将标题和内容添加到卡片 div 中
card.appendChild(title); card.appendChild(title);
@@ -243,7 +246,6 @@ class WelcomeMessage {
const welcome_card_container = document.getElementsByClassName('welcome-card-container')[0]; const welcome_card_container = document.getElementsByClassName('welcome-card-container')[0];
// 添加隐藏动画 // 添加隐藏动画
welcome_card_container.classList.add('hide'); welcome_card_container.classList.add('hide');
// 等待动画结束后再移除元素 // 等待动画结束后再移除元素
welcome_card_container.addEventListener('transitionend', () => { welcome_card_container.addEventListener('transitionend', () => {
elem_chatbot.removeChild(welcome_card_container); elem_chatbot.removeChild(welcome_card_container);