61 lines
1.4 KiB
Vue
61 lines
1.4 KiB
Vue
<template>
|
|
<div class="fiveGridAdv">
|
|
<div class="fiveGrid" @touchstart.stop @touchmove.stop @touchend.stop v-if="state.advList.length > 0">
|
|
<div class="rectAdvBox" @click="handleJumpAdv(item)" v-for="item in state.advList" :key="item.id">
|
|
<lazyImg class="rectAdvIcon" :src="item.cover" />
|
|
<div class="rectName">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive } from 'vue';
|
|
import { jumpAdv } from '@/utils/index';
|
|
import { getAdItem } from '@/utils/getConfig';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
advType: number;
|
|
}>(),
|
|
{
|
|
advType: 2,
|
|
},
|
|
);
|
|
const state = reactive({
|
|
advList: <any>(getAdItem(props.advType) || []), // 广告数据
|
|
});
|
|
const handleJumpAdv = (item: Types.App.AdsInfoListItem) => {
|
|
jumpAdv(item, 'ads');
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.fiveGridAdv {
|
|
.fiveGrid {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
margin: 0 0 18px;
|
|
padding-left: 10px;
|
|
.rectAdvBox {
|
|
width: 60px;
|
|
margin-right: 6px;
|
|
.rectAdvIcon {
|
|
height: 60px;
|
|
width: 60px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.rectName {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.rectAdvBox:last-child {
|
|
margin-right: 9px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|