OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

fix: 系统名称横向滚动衔接动画

Browse Source
This commit is contained in:
TsMask
2024-07-16 11:21:16 +08:00
parent 79920542c1
commit a2d93ddafe
3 changed files with 54 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/layouts/BasicLayout.vue
View File

@@ -176,6 +176,7 @@ function fnCheckAppNameOverflow() {
if (!text) return; if (!text) return;
if (text.offsetWidth > container.offsetWidth) { if (text.offsetWidth > container.offsetWidth) {
text.classList.add('app-name_scrollable'); text.classList.add('app-name_scrollable');
text.setAttribute('data-content', text.innerText);
} else { } else {
text.classList.remove('app-name_scrollable'); text.classList.remove('app-name_scrollable');
} }
@@ -382,20 +383,26 @@ onUnmounted(() => {
// text-overflow: ellipsis; // text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 148px; width: 148px;
> .app-name_scrollable {
&_scrollable { padding-right: 12px;
// padding-left: 100%;
display: inline-block; display: inline-block;
animation: scrollable-animation linear 6s infinite both; animation: scrollable-animation linear 6s infinite both;
} &::after {
content: attr(data-content);
@keyframes scrollable-animation { position: absolute;
0% { top: 0;
transform: translate3d(0, 0, 0); right: -100%;
transition: right 0.3s ease;
} }
100% { @keyframes scrollable-animation {
transform: translate3d(-100%, 0, 0); 0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 12px));
}
} }
} }
} }

24
src/views/system/quick-start/components/SystemConfig.vue
View File

@@ -206,6 +206,7 @@ function fnCheckAppNameOverflow() {
if (!text) return; if (!text) return;
if (text.offsetWidth > container.offsetWidth) { if (text.offsetWidth > container.offsetWidth) {
text.classList.add('app-name_scrollable'); text.classList.add('app-name_scrollable');
text.setAttribute('data-content', text.innerText);
} else { } else {
text.classList.remove('app-name_scrollable'); text.classList.remove('app-name_scrollable');
} }
@@ -398,18 +399,25 @@ onMounted(() => {
font-size: 18px; font-size: 18px;
> .app-name_scrollable { > .app-name_scrollable {
// padding-left: 100%; padding-right: 12px;
display: inline-block; display: inline-block;
animation: scrollable-animation linear 6s infinite both; animation: scrollable-animation linear 6s infinite both;
} &::after {
content: attr(data-content);
@keyframes scrollable-animation { position: absolute;
0% { top: 0;
transform: translate3d(0, 0, 0); right: -100%;
transition: right 0.3s ease;
} }
100% { @keyframes scrollable-animation {
transform: translate3d(-100%, 0, 0); 0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 12px));
}
} }
} }
} }

32
src/views/system/setting/components/change-logo.vue
View File

@@ -184,12 +184,15 @@ watch(
/**检查系统名称是否超出范围进行滚动 */ /**检查系统名称是否超出范围进行滚动 */
function fnCheckAppNameOverflow() { function fnCheckAppNameOverflow() {
const container: HTMLDivElement | null = document.querySelector('.header-icon > .app-name'); const container: HTMLDivElement | null = document.querySelector(
'.header-icon > .app-name'
);
if (!container) return; if (!container) return;
const text: HTMLDivElement | null = container.querySelector('.marquee'); const text: HTMLDivElement | null = container.querySelector('.marquee');
if (!text) return; if (!text) return;
if (text.offsetWidth > container.offsetWidth) { if (text.offsetWidth > container.offsetWidth) {
text.classList.add('app-name_scrollable'); text.classList.add('app-name_scrollable');
text.setAttribute('data-content', text.innerText);
} else { } else {
text.classList.remove('app-name_scrollable'); text.classList.remove('app-name_scrollable');
} }
@@ -201,7 +204,7 @@ watch(
); );
onMounted(() => { onMounted(() => {
fnCheckAppNameOverflow() fnCheckAppNameOverflow();
Object.assign(state, { Object.assign(state, {
language: currentLocale.value, language: currentLocale.value,
filePath: '', filePath: '',
@@ -360,20 +363,27 @@ onMounted(() => {
margin: 0 0 0 12px; margin: 0 0 0 12px;
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
> .app-name_scrollable { > .app-name_scrollable {
// padding-left: 100%; padding-right: 12px;
display: inline-block; display: inline-block;
animation: scrollable-animation linear 6s infinite both; animation: scrollable-animation linear 6s infinite both;
} &::after {
content: attr(data-content);
@keyframes scrollable-animation { position: absolute;
0% { top: 0;
transform: translate3d(0, 0, 0); right: -100%;
transition: right 0.3s ease;
} }
100% { @keyframes scrollable-animation {
transform: translate3d(-100%, 0, 0); 0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-100% - 12px));
}
} }
} }
} }