1

src/layout/content.vue

@@ -10,13 +10,13 @@
 </template>
 
 <script lang="ts" setup>
-import Header from './header.vue';
-import { useRoute } from 'vue-router';
+import Header from "./header.vue";
+import { useRoute } from "vue-router";
 const route = useRoute();
 </script>
 
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .custom-layout {
   height: 100%;
   .dj();
@@ -29,6 +29,7 @@ const route = useRoute();
     overflow: auto;
     box-sizing: border-box;
     width: 1597px;
+    max-width: 100vw;
     margin: 0 auto;
   }
 }

src/pages/Home/components/HomeSwiper/swiper.vue

@@ -4,12 +4,14 @@
       <div class="swiper-button-prev swiper-button-white prev-next">
         <img :src="imgs.prev" alt="" />
       </div>
+      <!-- 
+       -->
       <Swiper
+        class="swiper-no-swiping"
         :slidesPerView="4"
-        :preventClicksPropagation="true"
         :loop="true"
+        :preventClicksPropagation="true"
         :loopFillGroupWithBlank="true"
-        :loopedSlides="2"
         :modules="modules"
         :navigation="{
           nextEl: '.swiper-button-next',
@@ -21,9 +23,8 @@
           disableOnInteraction: true,
         }"
       >
-        <!-- onClick={goDetail.bind(this, item)} -->
         <SwiperSlide v-for="(item, index) in ScrollList.list" :key="index">
-          <div class="custom-silde-box">
+          <div class="custom-silde-box" @click="goDetail(item)">
             <img :src="item.img" class="swiper_image" />
           </div>
         </SwiperSlide>
@@ -36,41 +37,50 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-import './index.less';
-import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Pagination, Navigation, Autoplay } from 'swiper';
-import 'swiper/css';
-import 'swiper/css/pagination';
+import { defineComponent, onMounted, reactive, ref } from "vue";
+import "./index.less";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Pagination, Navigation, Autoplay } from "swiper";
+import "swiper/css";
+import "swiper/css/pagination";
 /**
  * spaceBetween 每个swiper-slide的间隔距离
  */
 const imgs = {
-  prev: new URL('../../../../assets/svg/home/swiper_prev.svg', import.meta.url)
+  prev: new URL("../../../../assets/svg/home/swiper_prev.svg", import.meta.url)
     .href,
-  next: new URL('../../../../assets/svg/home/swiper_next.svg', import.meta.url)
+  next: new URL("../../../../assets/svg/home/swiper_next.svg", import.meta.url)
     .href,
 };
 const modules = ref([Navigation, Autoplay]);
 const ScrollList = reactive({
   list: [
     {
-      img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/clothes.jpeg", import.meta.url).href,
+    },
+    {
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
+    },
+    {
+      img: new URL("../../../../assets/img/clothes.jpeg", import.meta.url).href,
+    },
+    {
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
     {
-      img: new URL('../../../../assets/img/mote.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
     {
-      img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
     {
-      img: new URL('../../../../assets/img/mote.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
     {
-      img: new URL('../../../../assets/img/clothes.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
     {
-      img: new URL('../../../../assets/img/mote.jpeg', import.meta.url).href,
+      img: new URL("../../../../assets/img/mote.jpeg", import.meta.url).href,
     },
   ],
 });

src/pages/Home/components/HomeSwiper/swiper_test.vue

+<template>
+  <swiper
+    :slides-per-view="4"
+    :space-between="50"
+    :modules="modules"
+    @swiper="onSwiper"
+    @slideChange="onSlideChange"
+    :loop="true"
+    :autoplay="{
+      delay: 2000,
+      stopOnLastSlide: false,
+      disableOnInteraction: true,
+    }"
+  >
+    <swiper-slide>
+      <div style="color: red">Slide 1</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div style="color: red">Slide 2</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div style="color: red">Slide 3</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div style="color: red">Slide 4</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div style="color: red">Slide 5</div>
+    </swiper-slide>
+    <swiper-slide>
+      <div style="color: red">Slide 6</div>
+    </swiper-slide>
+  </swiper>
+</template>
+<script>
+// Import Swiper Vue.js components
+import { defineComponent, onMounted, reactive, ref } from "vue";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Pagination, Navigation, Autoplay } from "swiper";
+// Import Swiper styles
+import "swiper/css";
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  setup() {
+    const modules = ref([Navigation, Autoplay]);
+    const onSwiper = (swiper) => {
+      console.log(swiper);
+    };
+    const onSlideChange = () => {
+      console.log("slide change");
+    };
+    return {
+      onSwiper,
+      onSlideChange,
+      modules,
+    };
+  },
+};
+</script>
\ No newline at end of file

src/pages/Home/index.tsx

 import { defineComponent } from 'vue';
 import HomeSwiper from './components/HomeSwiper/swiper.vue';
+import SwiperTest from './components/HomeSwiper/swiper_test.vue';
 import './index.less';
 export default defineComponent({
   setup() {

src/router/auth.ts

 import router from '@/router';
 import { getUserCookie } from '@/utils/api/userApi';
 router.beforeEach((to: any, from: any, next: any) => {
-  if (to.name == 'login') {
-    next();
-    return;
-  }
-  // 用户token
-  let token = getUserCookie();
-  if (!token) {
-    next('/login');
-    return;
-  }
+  // if (to.name == 'login') {
+  //   next();
+  //   return;
+  // }
+  // // 用户token
+  // let token = getUserCookie();
+  // if (!token) {
+  //   next('/login');
+  //   return;
+  // }
   next();
 });