feat: trends页面完成v1.1

components/common/block/catalogs.vue

@@ -10,6 +10,7 @@ import { ConstKeys } from '~/enums/const-enums'
 const modules = [Navigation, Pagination]
 const categoryList = ref<any>([])
 const swiperVertical = ref<any>(null)
+const router = useRouter()
 
 const solution = ref('category')
 const list = ref([
@@ -40,28 +41,12 @@ function onClickRight() {
   // swiperVertical.value.slideTo(4)
   swiperVertical.value.slideNext()
 }
-function setTranslate(swiper: any, _translate: any) {
-  // 设置第一个位置的背景色为#D7C4FF
-  if (swiper) {
-    swiper.slides.forEach((_slide: any, _i: number) => {
-      const slider = swiper.slides[_i]
-      if (_i === 1)
-        slider.style.backgroundColor = '#D7C4FF'
-
-      else
-        slider.style.backgroundColor = ''
-    })
-  }
+function onViewAll() {
+  if (solution.value === 'category')
+    router.push({ path: '/categories' })
+  else
+    router.push({ path: '/trends' })
 }
-// function setTransition(swiper: any, _transition: any) {
-//   if (!swiper)
-//     return
-//   for (let i = 0; i < swiper.slides.length; i++) {
-//     const slider = swiper.slides[i]
-//     // console.log('slide------222', slider)
-//     slider.style.transition = `${_transition}ms`
-//   }
-// }
 </script>
 
 <template>
@@ -89,7 +74,7 @@ function setTranslate(swiper: any, _translate: any) {
         </div>
       </div>
       <div class="w-1200-auto pos-relative">
-        <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer">
+        <div class="flex items-center justify-end text-#fff text-14px fw-bold mb-20px cursor-pointer" @click="onViewAll()">
           View All
           <svgo-arrow-line-r class="w-16px h-16px ml-10px" />
         </div>
@@ -115,7 +100,6 @@ function setTranslate(swiper: any, _translate: any) {
             srcset=""
           >
         </div>
-        <!-- @set-transition="setTransition" -->
         <Swiper
           v-if="categoryList.length"
           :slides-per-view="3"
@@ -157,4 +141,10 @@ function setTranslate(swiper: any, _translate: any) {
   background-size: 100% auto;
   padding-bottom: 8px;
 }
+.swiper-slide{
+  &.swiper-slide-prev{
+    background-color: #D7C4FF;
+    transition: all 0.3s ease-in-out;
+  }
+}
 </style>