谢宇宁andClaude Opus 4.8
c957b45bad
对接后端 hgmjapi.mfcg.me： - 接口解密 key 更新为 resKey360 - 登录 sysType 使用原生 getDevType（后端已放开 pc/android） - 修正榜单接口路径 /vid/rangking → /vid/ranking，方法改为 GET Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
301 lines
8.1 KiB
Vue
301 lines
8.1 KiB
Vue
<template>
|
|
<div class="welfare">
|
|
<div class="box1">
|
|
<div class="img-list">
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(0, 3)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(3, 6)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(6, 10)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(10, 13)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(13, 17)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(17, 20)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="item-list">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(20, 23)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="img-list-one">
|
|
<DecryptImg
|
|
v-for="(item, index) in state.smallSuure.slice(23, 24)"
|
|
class="cover"
|
|
@click="jumpAdv(item, true)"
|
|
:src="item.icon"
|
|
:key="item.icon + index"
|
|
/>
|
|
</div>
|
|
<div class="title">
|
|
<p>在線視頻</p>
|
|
<p>来自一站式你所熟悉的蛋黄派</p>
|
|
</div>
|
|
</div>
|
|
<div class="box2">
|
|
<div class="subTitle">
|
|
<p v-for="(item, index) in state.bgImage1" :key="index">{{ item }}</p>
|
|
</div>
|
|
<swiper
|
|
ref="gameSwiper"
|
|
slides-per-view="auto"
|
|
:observer="true"
|
|
:navigation="true"
|
|
:space-between="6"
|
|
:slidesOffsetBefore="0"
|
|
class="gameSwiper"
|
|
>
|
|
<swiper-slide v-for="i in state.verticalSlide" :key="i.id" class="gameSwiperItem" @click="jumpAdv(i, true)">
|
|
<DecryptImg :src="i.icon" class="gameSwiperImg" :key="i.id" />
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
<div class="box3">
|
|
<div class="subTitle">
|
|
<p v-for="(item, index) in state.bgImage2" :key="index">{{ item }}</p>
|
|
</div>
|
|
<swiper
|
|
ref="topGameSwiper"
|
|
slides-per-view="auto"
|
|
:observer="true"
|
|
:navigation="true"
|
|
:space-between="6"
|
|
:slidesOffsetBefore="-20"
|
|
class="topGameSwiper"
|
|
>
|
|
<swiper-slide
|
|
v-for="i in state.verticalTwoSlide"
|
|
:key="i.id"
|
|
class="topGameSwiperItem"
|
|
@click="jumpAdv(i, true)"
|
|
>
|
|
<DecryptImg :src="i.icon" class="topGameSwiperImg" :key="i.id" />
|
|
</swiper-slide>
|
|
</swiper>
|
|
<swiper
|
|
ref="topGameSwiper"
|
|
slides-per-view="auto"
|
|
:observer="true"
|
|
:navigation="true"
|
|
:space-between="6"
|
|
:slidesOffsetBefore="14"
|
|
class="topGameSwiper"
|
|
>
|
|
<swiper-slide
|
|
v-for="i in state.smallSqureSlide"
|
|
:key="i.id"
|
|
class="topGameSwiperItem"
|
|
@click="jumpAdv(i, true)"
|
|
>
|
|
<DecryptImg :src="i.icon" class="topGameSwiperImg" :key="i.id" />
|
|
</swiper-slide>
|
|
</swiper>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="ts"></script>
|
|
<script lang="ts" setup>
|
|
import { reactive, nextTick } from 'vue';
|
|
import { useGlobalStore } from '@/stores/global';
|
|
import { jumpAdv } from '@/utils/index';
|
|
import { Swiper, SwiperSlide } from 'swiper/vue';
|
|
import { Autoplay, Pagination, FreeMode } from 'swiper';
|
|
import request from '@/utils/request';
|
|
import 'swiper/swiper.min.css';
|
|
import AppApi from '@/service/app';
|
|
const globalStore = useGlobalStore();
|
|
const state = reactive({
|
|
smallSuure: <any>[],
|
|
verticalSlide: <any>[],
|
|
bgImage1: <any>[],
|
|
verticalTwoSlide: <any>[],
|
|
bgImage2: <any>[],
|
|
smallSqureSlide: <any>[],
|
|
isScroll: true,
|
|
});
|
|
|
|
const queryConfig = async () => {
|
|
try {
|
|
let res = await AppApi.queryWelfare();
|
|
const resdata = res.list || []
|
|
const data = resdata.find((item: any) => item.desc === '福利模块') || {};
|
|
const dataList = data.comboList || [];
|
|
state.smallSuure = dataList.find((item: any) => item.displayType === 'smallSuure').list;
|
|
state.verticalSlide = dataList.find((item: any) => item.displayType === 'verticalSlide').list;
|
|
// #换行
|
|
state.bgImage1 = dataList.find((item: any) => item.displayType === 'bgImage1').list[0]?.desc?.split('#') || [];
|
|
state.verticalTwoSlide = dataList.find((item: any) => item.displayType === 'verticalTwoSlide').list;
|
|
// #换行
|
|
state.bgImage2 = dataList.find((item: any) => item.displayType === 'bgImage2').list[0]?.desc?.split('#') || [];
|
|
state.smallSqureSlide = dataList.find((item: any) => item.displayType === 'smallSqureSlide').list;
|
|
} catch (error) {
|
|
console.log();
|
|
}
|
|
};
|
|
|
|
nextTick(() => {
|
|
queryConfig();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.welfare {
|
|
.box1 {
|
|
width: 100%;
|
|
height: 425px;
|
|
background: #fff;
|
|
.img-list {
|
|
display: flex;
|
|
// align-items: center;
|
|
justify-content: space-between;
|
|
.item-list:nth-child(2n) {
|
|
padding-top: 18px !important;
|
|
}
|
|
.cover {
|
|
width: 46px;
|
|
height: 46px;
|
|
margin-bottom: 8.4px;
|
|
}
|
|
}
|
|
|
|
.img-list-one {
|
|
width: 63.4px;
|
|
height: 63.4px;
|
|
margin: 0 auto 52.11px;
|
|
}
|
|
.title {
|
|
color: #000;
|
|
text-align: center;
|
|
font-family: Roboto;
|
|
font-size: 22px;
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
line-height: 30px; /* 77.921% */
|
|
}
|
|
}
|
|
.box2 {
|
|
height: 348px;
|
|
background: url('../../../assets/images/pc/game_bg.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
background-color: #000;
|
|
padding-top: 79px;
|
|
.subTitle {
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 18.333px; /* 83.333% */
|
|
margin-bottom: 57.45px;
|
|
p {
|
|
text-align: center;
|
|
margin-bottom: 11.55px;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.gameSwiper {
|
|
.gameSwiperItem {
|
|
width: 112px;
|
|
height: 138px;
|
|
.gameSwiperImg {
|
|
width: 112px;
|
|
height: 138px;
|
|
border-radius: 4.67px;
|
|
overflow: hidden;
|
|
:deep(img) {
|
|
border-radius: 4.67px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.box3 {
|
|
background-color: #fff;
|
|
padding-top: 59px;
|
|
box-sizing: border-box;
|
|
.subTitle {
|
|
color: #000;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 18.333px; /* 83.333% */
|
|
padding-bottom: 49px;
|
|
p {
|
|
text-align: center;
|
|
margin-bottom: 11.55px;
|
|
}
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.topGameSwiper {
|
|
margin-bottom: 17.4px;
|
|
.topGameSwiperItem {
|
|
width: 112px;
|
|
height: 138px;
|
|
.topGameSwiperImg {
|
|
width: 112px;
|
|
height: 138px;
|
|
border-radius: 4.67px;
|
|
overflow: hidden;
|
|
:deep(img) {
|
|
border-radius: 4.67px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.topGameSwiper:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 48.6px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|