1 line
4.2 KiB
Plaintext
1 line
4.2 KiB
Plaintext
|
{"version":3,"file":"quickServiceCarousel.js","sources":["../../../../../../src/pages/index/components/quickServiceCarousel.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9wYWdlcy9pbmRleC9jb21wb25lbnRzL3F1aWNrU2VydmljZUNhcm91c2VsLnZ1ZQ"],"sourcesContent":["<template>\n <view class=\"carousel-container\">\n <swiper class=\"carousel\" autoplay=\"true\" interval=\"3000\" @change=\"onSwiperChange\">\n <swiper-item>\n <view class=\"quick-services\">\n <view class=\"quick-service-card\">\n <image :src=\"imgUrl('@/static/home/book.png')\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物宝典</text>\n </view>\n <view class=\"quick-service-card\">\n <image :src=\"imgUrl('@/static/home/pb.png')\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物陪伴</text>\n </view>\n <view class=\"quick-service-card\" @click=\"toPath('/mall/index/index')\">\n <image :src=\"imgUrl('@/static/home/yl.png')\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">定制商城</text>\n </view>\n <view class=\"quick-service-card\">\n <image :src=\"imgUrl('@/static/home/mr.png')\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物美容</text>\n </view>\n </view>\n </swiper-item>\n <!-- <swiper-item>\n <view class=\"quick-services\">\n <view class=\"quick-service-card\">\n <image src=\"@/static/home/book.png\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物宝典2</text>\n </view>\n <view class=\"quick-service-card\">\n <image src=\"@/static/home/陪伴.png\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物陪伴2</text>\n </view>\n <view class=\"quick-service-card\">\n <image src=\"@/static/home/医疗.png\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物医疗2</text>\n </view>\n <view class=\"quick-service-card\">\n <image src=\"@/static/home/美容.png\" class=\"quick-service-image\" />\n <text class=\"quick-service-text\">宠物美容2</text>\n </view>\n </view>\n </swiper-item> -->\n </swiper>\n <view class=\"custom-indicators\">\n <view\n v-for=\"(item, index) in 2\"\n :key=\"index\"\n :class=\"['indicator', { active: currentIndex === index }]\"\n ></view>\n </view>\n </view>\n</template>\n\n<script lang=\"js\" setup>\nimport { ref } from 'vue'\nimport { imgUrl, toPath } from '@/utils/commUtils'\n\nconst currentIndex = ref(0)\n\nconst onSwiperChange = (event) => {\n currentIndex.value = event.detail.current\n}\n</script>\n\n<style scoped>\n.carousel-container {\n position: relative;\n width: 100%;\n height: 12vh;\n margin-top: 20px;\n background-color: #ffffff;\n border-radius: 10px;\n}\n\n.carousel {\n width: 100%;\n}\n\n.quick-services {\n display: flex;\n justify-content: space-around;\n padding: 10px;\n}\n\n.quick-service-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 25%;\n padding: 10px;\n}\n\n.quick-service-image {\n width: 40px;\n height: 40px;\n}\n\n.quick-service-text {\n margin-top: 5px;\n font-size: 14px;\n text-align: center;\n}\n\n.custom-indicators {\n position: absolute;\n bottom: 5%;\n left: 50%;\n display: flex;\n justify-content: center;\n transform: translate(-50%);\n}\n\n.indicator {\n width: 10px;\n height: 5px;\n margin: 0 1px;\n background-color: #cccccc;\n border-radius: 5px;\n transition: width 0.3s;\n}\n\n.indicator.active {\n width: 18px;\n background-color: #ffc107;\n}\n</style>\n","import Component from 'D:/App/Work/addr/acdr-ui/src/pages/index/components/quickServiceCarousel.vue'\nwx.createComponent(Comp
|