feat(cp排行榜): 历史榜首居中放大、点击切换榜首的功能实现
This commit is contained in:
hzj
parent
9c6da845b6
commit
24b5354569
@ -39,58 +39,77 @@
|
|||||||
:contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
|
:contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
style="width: 100%; display: flex; justify-content: space-between; align-items: center"
|
style="width: 100%; height: 73%; min-width: 0; display: flex; overflow: hidden"
|
||||||
|
class="scrollX"
|
||||||
>
|
>
|
||||||
<!-- 上一个季度 -->
|
<div class="topList" :style="{ left: listLeftPosition }">
|
||||||
<div
|
<!-- 右占位 -->
|
||||||
style="
|
<div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
|
||||||
width: 8vw;
|
|
||||||
align-self: stretch;
|
|
||||||
|
|
||||||
display: flex;
|
<!-- top1情侣头像 -->
|
||||||
justify-content: center;
|
<itemCenter
|
||||||
align-items: center;
|
v-for="(item, index) in 1"
|
||||||
"
|
style="z-index: 1; min-width: 0; flex-shrink: 0; transition: all 0.8s ease"
|
||||||
>
|
:style="{ width: index === centerIndex ? '60vw' : '40vw' }"
|
||||||
<!-- <img
|
:imgUrl="imageUrl('topCoupleFrame')"
|
||||||
v-smart-img
|
:contentStyle="``"
|
||||||
v-show="result.length > 1 && resultShowIndex > 0"
|
@click="moveToCenter(index)"
|
||||||
:src="imageUrl('resultBack')"
|
>
|
||||||
alt=""
|
<!-- 头像 -->
|
||||||
style="display: block; width: 80%; object-fit: cover"
|
<div style="position: relative; width: 100%; height: 100%">
|
||||||
@click="resultShowIndex--"
|
<div
|
||||||
/> -->
|
style="
|
||||||
</div>
|
position: relative;
|
||||||
<!-- top1 -->
|
z-index: -1;
|
||||||
<itemCenter
|
top: 26%;
|
||||||
style="width: 75%"
|
left: 0;
|
||||||
:imgUrl="imageUrl('topCoupleFrame')"
|
width: 100%;
|
||||||
:contentStyle="``"
|
height: 50%;
|
||||||
></itemCenter>
|
display: flex;
|
||||||
<!-- 下一个季度 -->
|
justify-content: center;
|
||||||
<div
|
align-items: center;
|
||||||
style="
|
gap: 16%;
|
||||||
width: 8vw;
|
"
|
||||||
align-self: stretch;
|
>
|
||||||
|
<!-- 情侣1头像 -->
|
||||||
|
<img
|
||||||
|
:src="''"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%;
|
||||||
|
"
|
||||||
|
@error="handleAvatarImageError"
|
||||||
|
@click="viewUserInfo(rankingItem.userId)"
|
||||||
|
/>
|
||||||
|
<!-- 情侣2头像 -->
|
||||||
|
<img
|
||||||
|
:src="''"
|
||||||
|
alt=""
|
||||||
|
style="
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
border-radius: 50%;
|
||||||
|
"
|
||||||
|
@error="handleAvatarImageError"
|
||||||
|
@click="viewUserInfo(rankingItem.cpUserId)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</itemCenter>
|
||||||
|
|
||||||
display: flex;
|
<!-- 左占位 -->
|
||||||
justify-content: center;
|
<div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
|
||||||
align-items: center;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<!-- <img
|
|
||||||
v-smart-img
|
|
||||||
v-show="result.length > 1 && resultShowIndex + 1 < result.length"
|
|
||||||
:src="imageUrl('resultNext')"
|
|
||||||
alt=""
|
|
||||||
style="display: block; width: 80%; object-fit: cover"
|
|
||||||
@click="resultShowIndex++"
|
|
||||||
/> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 奖品说明 -->
|
<!-- 奖品说明 -->
|
||||||
<div style="display: flex; justify-content: center; align-items: center">
|
<div style="min-width: 0; display: flex; justify-content: center; align-items: center">
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
@ -1388,6 +1407,26 @@ const seasonTop1List = ref([]) // 赛季榜Top1列表
|
|||||||
|
|
||||||
const resultShowIndex = ref(0) // 抽奖结果索引
|
const resultShowIndex = ref(0) // 抽奖结果索引
|
||||||
|
|
||||||
|
const listLeftPosition = ref('0') //top历史榜单
|
||||||
|
const centerIndex = ref(0) // 默认中间项的索引为1
|
||||||
|
|
||||||
|
// 计算移动到中心位置的函数
|
||||||
|
const moveToCenter = (targetIndex) => {
|
||||||
|
if (centerIndex.value == targetIndex) return // 如果当前索引和目标索引相同，则不需要移动
|
||||||
|
|
||||||
|
// 每个项目的宽度（包括间距）
|
||||||
|
const itemWidth = 40 // vw
|
||||||
|
const itemSpacing = 2 // vw
|
||||||
|
|
||||||
|
// 计算目标元素的偏移量
|
||||||
|
const targetOffset = (itemWidth + itemSpacing) * targetIndex
|
||||||
|
|
||||||
|
// 由于我们使用的是left属性，负值向左移动
|
||||||
|
listLeftPosition.value = targetOffset + 'vw'
|
||||||
|
|
||||||
|
centerIndex.value = targetIndex
|
||||||
|
}
|
||||||
|
|
||||||
// 选中伴侣
|
// 选中伴侣
|
||||||
const selectCouple = (couple) => {
|
const selectCouple = (couple) => {
|
||||||
if (selectedCouple.value.account === couple.account) {
|
if (selectedCouple.value.account === couple.account) {
|
||||||
@ -1817,6 +1856,21 @@ onUnmounted(() => {
|
|||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scrollX::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2vw;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
transition: all 0.8s ease; // 添加平滑过渡效果
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
@ -1868,7 +1922,7 @@ textarea::placeholder {
|
|||||||
|
|
||||||
@media screen and (min-width: 360px) {
|
@media screen and (min-width: 360px) {
|
||||||
* {
|
* {
|
||||||
font-size: 14px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user