minor css improve
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in New Issue
Block a user