|
|
@@ -0,0 +1,189 @@
|
|
|
+<template>
|
|
|
+ <swiper :slides-per-view="grid" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
+ <swiper-slide v-for="child of data" :key="child.id" @click="handleToDoc(child as any as ArticleDetailType)">
|
|
|
+ <div class="cover w-full h-[400px] overflow-hidden b-rd-xl"
|
|
|
+ :style="{ backgroundImage: `url(${child.cover})` }"></div>
|
|
|
+ <div
|
|
|
+ class="w-full h-full flex flex-col absolute top-0 left-0 -mx-auto justify-end overflow-hidden shadow-blueGray">
|
|
|
+ <div
|
|
|
+ class="w-full h-[50px] title text-black font-size-[20px] flex justify-center items-center bg-white bg-op-50">
|
|
|
+ {{ child.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </swiper-slide>
|
|
|
+ <div class=" flex flex-row items-center justify-center m-t-[30px] ">
|
|
|
+ <div class="swiper-button-prev">
|
|
|
+ <!-- <button @click="handlePrev">Prev</button> -->
|
|
|
+ <n-icon :class="{ disable: activeIndex === 0 }" class="icon" size="32" @click="handlePrev"
|
|
|
+ color="#0661C9">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ viewBox="0 0 32 32">
|
|
|
+ <defs></defs>
|
|
|
+ <path
|
|
|
+ d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm8 15H11.85l5.58 5.573L16 24l-8-8l8-8l1.43 1.393L11.85 15H24z">
|
|
|
+ </path>
|
|
|
+ </svg>
|
|
|
+
|
|
|
+ </n-icon>
|
|
|
+ </div>
|
|
|
+ <div class="swiper-button-next">
|
|
|
+ <n-icon :class="{ disable: activeIndex === (data.length - grid) }" class="icon" size="32"
|
|
|
+ @click="handleNext" color="#0661C9">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
+ viewBox="0 0 32 32">
|
|
|
+ <defs></defs>
|
|
|
+ <path
|
|
|
+ d="M2 16A14 14 0 1 0 16 2A14 14 0 0 0 2 16zm6-1h12.15l-5.58-5.607L16 8l8 8l-8 8l-1.43-1.427L20.15 17H8z">
|
|
|
+ </path>
|
|
|
+ </svg>
|
|
|
+ </n-icon>
|
|
|
+ <!-- <button @click="handleNext">next</button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { NH1, NH5, NIcon, NGrid, NGi } from 'naive-ui'
|
|
|
+import { getMenuList, type ArticleDetailType } from '@/api'
|
|
|
+import type { MenuItem } from '@/api'
|
|
|
+import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
|
+import 'swiper/css'
|
|
|
+import router from '@/plugins/router.ts'
|
|
|
+const { t } = useI18n()
|
|
|
+
|
|
|
+defineProps({
|
|
|
+ data: [],
|
|
|
+ grid: {
|
|
|
+ type: Number,
|
|
|
+ default: 3
|
|
|
+ }
|
|
|
+})
|
|
|
+const swiperInstance = ref();
|
|
|
+const activeIndex = ref(0)
|
|
|
+
|
|
|
+const onSwiper = (swiper: unknown) => {
|
|
|
+ if (!swiperInstance.value) {
|
|
|
+ console.log(swiper)
|
|
|
+ swiperInstance.value = swiper
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+const handleToDoc = (child: ArticleDetailType) => {
|
|
|
+ const { articleId, categoryId } = child
|
|
|
+ console.log("handleToDoc", child)
|
|
|
+ if (articleId) {
|
|
|
+ router.push({ path: `/showdoc/${articleId}` })
|
|
|
+ } else {
|
|
|
+ router.push({ path: `/showcate/${categoryId}` })
|
|
|
+ }
|
|
|
+}
|
|
|
+const handleToMore = (item: ArticleDetailType) => {
|
|
|
+ if (item && item.children && item.children.length > 0) {
|
|
|
+ const cateId = item.children[0].categoryId;
|
|
|
+ console.log('cateId', cateId)
|
|
|
+ router.push({ path: `/showcate/${cateId}` })
|
|
|
+ }
|
|
|
+}
|
|
|
+const onSlideChange = (swiper) => {
|
|
|
+ console.log('slide change', swiper);
|
|
|
+ activeIndex.value = swiper.activeIndex
|
|
|
+};
|
|
|
+const handlePrev = () => {
|
|
|
+ console.log('handlePrev')
|
|
|
+ swiperInstance.value.slidePrev()
|
|
|
+}
|
|
|
+const handleNext = () => {
|
|
|
+ console.log('handleNext')
|
|
|
+ swiperInstance.value.slideNext()
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.trans-white-50 {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ color: #0661C9;
|
|
|
+ margin: 0 5px;
|
|
|
+
|
|
|
+ &.disable {
|
|
|
+ opacity: 0.5;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.cover {
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center top;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.show-item {
|
|
|
+ cursor: pointer;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center bottom;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ &.style-0 {
|
|
|
+ width: 614px;
|
|
|
+ height: 346px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.style-2 {
|
|
|
+ width: 610px;
|
|
|
+ height: 104px;
|
|
|
+ background: #f5f9ff;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.style-3 {
|
|
|
+ width: 411px;
|
|
|
+ height: 240px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 10px 0px rgba(6, 97, 201, 0.2);
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.style-4 {
|
|
|
+ width: 482px;
|
|
|
+ min-height: 200px;
|
|
|
+ background: #F5F9FF;
|
|
|
+ border-radius: 10px 10px 10px 10px;
|
|
|
+ padding: 30px 64px;
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+
|
|
|
+ .otherList {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ padding: 5px 0;
|
|
|
+ text-decoration: none;
|
|
|
+ list-style: none;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.more {
|
|
|
+ color: #0661C9;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #107bf5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
gemercheung