89 lines
2.2 KiB
Vue
89 lines
2.2 KiB
Vue
|
<template>
|
||
|
|
<view class="swiperContainer">
|
||
|
|
<swiper class="swiper" circular next-margin="6px">
|
||
|
|
<swiper-item v-for="(item, index) in props.data" :key="{ index }">
|
||
|
|
<view class="swiperItem" @click="handleSwiperJump(item)">
|
||
|
|
<!-- <view class="isVip"></view> -->
|
||
|
|
<image class="swiperItemBg" :src="item.picture || BannerBg" />
|
||
|
|
<view class="swiperItemTitle">
|
||
|
|
<text class="swiperItemType">{{ item.tag }}</text>
|
||
|
|
{{ item.title }}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</swiper-item>
|
||
|
|
</swiper>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import BannerBg from "@/assets/images/banner.png";
|
||
|
|
const emit = defineEmits(["handleSwiperJump"]);
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
// 列表内容
|
||
|
|
data: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const handleSwiperJump = (item) => {
|
||
|
|
emit("handleSwiperJump", item);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.swiperContainer {
|
||
|
|
margin: 12rpx 0;
|
||
|
|
.swiper {
|
||
|
|
height: 376rpx;
|
||
|
|
.swiperItem {
|
||
|
|
height: 376rpx;
|
||
|
|
border-radius: 12rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
margin-right: 9rpx;
|
||
|
|
position: relative;
|
||
|
|
.isVip {
|
||
|
|
width: 58rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
background-image: url(@/assets/images/icon_vip.png);
|
||
|
|
background-size: cover;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
.swiperItemBg {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.swiperItemTitle {
|
||
|
|
width: 100%;
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20rpx 20rpx 36rpx 20rpx;
|
||
|
|
// font-size: 32rpx;
|
||
|
|
font-size: var(--h1-font-size);
|
||
|
|
// font-weight: 500;
|
||
|
|
line-height: 1.2;
|
||
|
|
letter-spacing: 0px;
|
||
|
|
color: #ffffff;
|
||
|
|
background-image: linear-gradient(0deg, #00000066 0%, #00000026 50%, #00000000 100%);
|
||
|
|
font-family: "SourceHanSansCN-Medium";
|
||
|
|
.swiperItemType {
|
||
|
|
display: inline-block;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 6rpx 16rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
background-color: #e7303f;
|
||
|
|
// font-size: 24rpx;
|
||
|
|
font-size: var(--h4-font-size);
|
||
|
|
font-family: "SourceHanSansCN-Regular";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|