Skip to content

A
ai_web_page_prod
Commit 1d9ace49 by haojie[
Options

1

parent f90a9007
Showing with 107 additions and 31 deletions
src/layout/content.vue
...@@ -10,13 +10,13 @@ ...@@ -10,13 +10,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Header from './header.vue'; import Header from "./header.vue";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
.custom-layout { .custom-layout {
height: 100%; height: 100%;
.dj(); .dj();
...@@ -29,6 +29,7 @@ const route = useRoute(); ...@@ -29,6 +29,7 @@ const route = useRoute();
overflow: auto; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
width: 1597px; width: 1597px;
max-width: 100vw;
margin: 0 auto; margin: 0 auto;
} }
} }
......
src/pages/Home/components/HomeSwiper/swiper.vue
...@@ -4,12 +4,14 @@ ...@@ -4,12 +4,14 @@
<div class="swiper-button-prev swiper-button-white prev-next"> <div class="swiper-button-prev swiper-button-white prev-next">
<img :src="imgs.prev" alt="" /> <img :src="imgs.prev" alt="" />
</div> </div>
<!--
-->
<Swiper <Swiper
class="swiper-no-swiping"
:slidesPerView="4" :slidesPerView="4"
:preventClicksPropagation="true"
:loop="true" :loop="true"
:preventClicksPropagation="true"
:loopFillGroupWithBlank="true" :loopFillGroupWithBlank="true"
:loopedSlides="2"
:modules="modules" :modules="modules"
:navigation="{ :navigation="{
nextEl: '.swiper-button-next', nextEl: '.swiper-button-next',
...@@ -21,9 +23,8 @@ ...@@ -21,9 +23,8 @@
disableOnInteraction: true, disableOnInteraction: true,
}" }"
> >
<!-- onClick={goDetail.bind(this, item)} -->
<SwiperSlide v-for="(item, index) in ScrollList.list" :key="index"> <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" /> <img :src="item.img" class="swiper_image" />
</div> </div>
</SwiperSlide> </SwiperSlide>
...@@ -36,41 +37,50 @@ ...@@ -36,41 +37,50 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { defineComponent, onMounted, reactive, ref } from 'vue'; import { defineComponent, onMounted, reactive, ref } from "vue";
import './index.less'; import "./index.less";
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from 'swiper'; import { Pagination, Navigation, Autoplay } from "swiper";
import 'swiper/css'; import "swiper/css";
import 'swiper/css/pagination'; import "swiper/css/pagination";
/** /**
* spaceBetween 每个swiper-slide的间隔距离 * spaceBetween 每个swiper-slide的间隔距离
*/ */
const imgs = { 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, .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, .href,
}; };
const modules = ref([Navigation, Autoplay]); const modules = ref([Navigation, Autoplay]);
const ScrollList = reactive({ const ScrollList = reactive({
list: [ 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 0 → 100644
<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 { defineComponent } from 'vue';
import HomeSwiper from './components/HomeSwiper/swiper.vue'; import HomeSwiper from './components/HomeSwiper/swiper.vue';
import SwiperTest from './components/HomeSwiper/swiper_test.vue';
import './index.less'; import './index.less';
export default defineComponent({ export default defineComponent({
setup() { setup() {
......
src/router/auth.ts
import router from '@/router'; import router from '@/router';
import { getUserCookie } from '@/utils/api/userApi'; import { getUserCookie } from '@/utils/api/userApi';
router.beforeEach((to: any, from: any, next: any) => { router.beforeEach((to: any, from: any, next: any) => {
if (to.name == 'login') { // if (to.name == 'login') {
next(); // next();
return; // return;
} // }
// 用户token // // 用户token
let token = getUserCookie(); // let token = getUserCookie();
if (!token) { // if (!token) {
next('/login'); // next('/login');
return; // return;
} // }
next(); next();
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment