feat(游戏王页面): 处理滚动文本过短导致的闪现问题
This commit is contained in:
parent
8ec79c104a
commit
efc1a907c5
@ -56,36 +56,7 @@
|
|||||||
<!-- 滚动容器 -->
|
<!-- 滚动容器 -->
|
||||||
<div class="scroll-wrapper" v-if="name">
|
<div class="scroll-wrapper" v-if="name">
|
||||||
<!-- 第一套内容 -->
|
<!-- 第一套内容 -->
|
||||||
<div class="scroll-content">
|
<div class="scroll-content" v-for="value in 3">
|
||||||
<div
|
|
||||||
style="color: #fff; font-weight: 700; white-space: nowrap"
|
|
||||||
:class="textSizeClass"
|
|
||||||
>
|
|
||||||
{{ name }}
|
|
||||||
</div>
|
|
||||||
<img
|
|
||||||
v-smart-img
|
|
||||||
src="/src/assets/icon/coin.png"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 1.1em"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style="
|
|
||||||
font-weight: 700;
|
|
||||||
background: linear-gradient(180deg, #ffe656 0%, #fff 100%);
|
|
||||||
background-clip: text;
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
"
|
|
||||||
class="showText"
|
|
||||||
:class="isTopOne ? 'top1Text' : 'text'"
|
|
||||||
>
|
|
||||||
{{ distributionValue }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 第二套内容,间隔30px -->
|
|
||||||
<div class="scroll-content">
|
|
||||||
<div
|
<div
|
||||||
style="color: #fff; font-weight: 700; white-space: nowrap"
|
style="color: #fff; font-weight: 700; white-space: nowrap"
|
||||||
:class="textSizeClass"
|
:class="textSizeClass"
|
||||||
@ -283,7 +254,7 @@ const isTopOne = computed(() => {
|
|||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(-50%);
|
transform: translateX(-33.3%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -292,7 +263,7 @@ const isTopOne = computed(() => {
|
|||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
100% {
|
100% {
|
||||||
transform: translateX(50%);
|
transform: translateX(33.3%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user