You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.3 KiB
90 lines
2.3 KiB
<template>
|
|
<div class="flex relative rounded-xl overflow-hidden border border-solid border-white bg-[rgba(245,245,245,0.60)] mx-10">
|
|
<div class="swiper-containers py-5 w-[1840px]">
|
|
<Swiper
|
|
v-if="chunkList.length"
|
|
rewind
|
|
observer
|
|
observe-parents
|
|
:slides-offset-before="24"
|
|
:slides-offset-after="24"
|
|
observe-slide-children
|
|
:modules="modules"
|
|
style="overflow: visible"
|
|
@swiper="swiperInit"
|
|
>
|
|
<SwiperSlide v-for="item of chunkList" :key="JSON.stringify(item)">
|
|
<div class="grid grid-cols-[repeat(4,436px)] grid-rows-[repeat(2,440px)] grid-flow-col gap-4">
|
|
<ScrollListItem v-for="customer of item" :key="customer.addTime" :customer="customer" />
|
|
</div>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</div>
|
|
<div
|
|
class="absolute right-6 bottom-5 w-[436px] h-[440px] px-[138px] pt-16 pb-[148px] bg-white rounded-xl shadow-[0px_4px_10px_0px_rgba(0,0,0,0.06)] flex-col justify-start items-center gap-4 inline-flex"
|
|
>
|
|
<img src="/static/qr.png" class="w-40 h-40" alt="" />
|
|
<div class="text-center text-[#333] text-lg font-normal leading-relaxed">欢迎微信扫码留言<br />期待您的宝贵意见</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { shallowRef, computed } from 'vue'
|
|
import { chunk } from 'lodash-es'
|
|
import ScrollListItem from '@/components/ScrollListItem/ScrollListItem.vue'
|
|
import SwiperCore, { Autoplay } from 'swiper'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
|
import 'swiper/css'
|
|
|
|
const modules = [Autoplay]
|
|
SwiperCore.use(modules)
|
|
|
|
type Props = {
|
|
mallCode: string
|
|
customerList: Customer[]
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
mallCode: '',
|
|
customerList: () => []
|
|
})
|
|
|
|
const chunkList = computed(() => chunk(props.customerList, 7))
|
|
|
|
const swiper = shallowRef()
|
|
|
|
function swiperInit(_swiper: any) {
|
|
swiper.value = _swiper
|
|
}
|
|
|
|
function scroll() {
|
|
swiper.value?.slideTo(0)
|
|
}
|
|
|
|
defineExpose({
|
|
scroll
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.tb {
|
|
writing-mode: tb;
|
|
}
|
|
.fadeInRight {
|
|
animation: fade-in-right 1s infinite;
|
|
}
|
|
|
|
@keyframes fade-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
</style>
|
|
|