hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cp排行榜): 历史榜首居中放大、点击切换榜首的功能实现

Browse Source
This commit is contained in:
hzj 2026-01-22 14:33:59 +08:00
parent 9c6da845b6
commit 24b5354569
1 changed files with 100 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
src/views/Ranking/Couple/index.vue
View File

@ -39,58 +39,77 @@
:contentStyle="`inset: 30vw 9vw 27vw;flex-direction: column;gap:2vw`"
>
<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
style="
width: 8vw;
align-self: stretch;
<div class="topList" :style="{ left: listLeftPosition }">
<!-- 右占位 -->
<div style="width: 9vw; min-width: 0; flex-shrink: 0"></div>
display: flex;
justify-content: center;
align-items: center;
"
>
<!-- <img
v-smart-img
v-show="result.length > 1 && resultShowIndex > 0"
:src="imageUrl('resultBack')"
alt=""
style="display: block; width: 80%; object-fit: cover"
@click="resultShowIndex--"
/> -->
</div>
<!-- top1 -->
<itemCenter
style="width: 75%"
:imgUrl="imageUrl('topCoupleFrame')"
:contentStyle="``"
></itemCenter>
<!-- 下一个季度 -->
<div
style="
width: 8vw;
align-self: stretch;
<!-- top1情侣头像 -->
<itemCenter
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' }"
:imgUrl="imageUrl('topCoupleFrame')"
:contentStyle="``"
@click="moveToCenter(index)"
>
<!-- 头像 -->
<div style="position: relative; width: 100%; height: 100%">
<div
style="
position: relative;
z-index: -1;
top: 26%;
left: 0;
width: 100%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
gap: 16%;
"
>
<!-- 情侣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;
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 style="width: 9vw; min-width: 0; flex-shrink: 0"></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
style="
border-radius: 12px;
@ -1388,6 +1407,26 @@ const seasonTop1List = ref([]) // 赛季榜Top1列表
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) => {
if (selectedCouple.value.account === couple.account) {
@ -1817,6 +1856,21 @@ onUnmounted(() => {
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 {
0% {
transform: rotate(0deg);
@ -1868,7 +1922,7 @@ textarea::placeholder {
@media screen and (min-width: 360px) {
* {
font-size: 14px;
font-size: 12px;
}
}