diff --git a/src/pages/boxes/detail.vue b/src/pages/boxes/detail.vue
index fa80b22..071d15b 100644
--- a/src/pages/boxes/detail.vue
+++ b/src/pages/boxes/detail.vue
@@ -6,8 +6,6 @@ import { isEmpty } from "radash"
 import { router } from "@@/index"
 import { boxesApi } from "@@/api"
 
-import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
-import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
 import { filePath } from "@/sheep/utils/file"
 
 const state = reactive<any>({
@@ -38,12 +36,20 @@ const doSubmit = () => {
 
 <template>
 	<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
-		<z-swiper>
-			<z-swiper-item v-for="(v, i) in state.detail.imagesArray" :key="i">
-				<image class="w-100vw" :src="filePath(v)" mode="widthFix" />
-			</z-swiper-item>
-		</z-swiper>
-		<view class="p-x-15rpx">
+		<swiper
+			class="w-100vw h-30vh"
+			circular
+			:indicator-dots="true"
+			indicator-active-color="#0779FD"
+			indicator-color="#ffffff"
+			:autoplay="true"
+		>
+			<swiper-item v-for="(v, i) in state.detail?.imagesArray" :key="i">
+				<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
+			</swiper-item>
+		</swiper>
+
+		<view class="p-15rpx">
 			<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
 				<view class="flex-row items-center justify-between">
 					<view class="flex-row items-center">
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index f1df8c2..1e813b1 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -8,9 +8,6 @@ import { merchantApi, foodApi, payApi } from "@@/api"
 
 import { filePath } from "@@/utils/file"
 
-import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
-import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
-
 import ProductRow from "./components/product-row.vue"
 import ProductCar from "./components/product-car.vue"
 import ProductTotal from "./components/product-total.vue"
@@ -218,13 +215,19 @@ const doFood = () => {
 <template>
 	<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
 		<tm-sticky>
-			<!-- start 轮播 start -->
-			<z-swiper>
-				<z-swiper-item v-for="(v, i) in state.detail.swiperPic?.split(',')" :key="i">
-					<image class="w-100vw h-400rpx" :src="filePath(v)" mode="aspectFill" />
-				</z-swiper-item>
-			</z-swiper>
-			<!-- end 轮播 end -->
+			<swiper
+				class="w-100vw h-30vh"
+				circular
+				:indicator-dots="true"
+				indicator-active-color="#0779FD"
+				indicator-color="#ffffff"
+				:autoplay="true"
+			>
+				<swiper-item v-for="(v, i) in state.detail?.swiperPic?.split(',')" :key="i">
+					<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
+				</swiper-item>
+			</swiper>
+
 			<tm-sticky-header>
 				<view class="m-x-30rpx">
 					<!-- start 简介 start -->
diff --git a/src/pages/merchant/product-detail.vue b/src/pages/merchant/product-detail.vue
index 83b3844..5df0695 100644
--- a/src/pages/merchant/product-detail.vue
+++ b/src/pages/merchant/product-detail.vue
@@ -2,11 +2,8 @@
 import { reactive } from "vue"
 import { onLoad, onShow } from "@dcloudio/uni-app"
 import { isEmpty } from "radash"
-import { hooks } from "@@/index"
 import { productApi } from "@@/api"
 import { filePath } from "@@/utils/file"
-import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
-import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
 
 const state = reactive<any>({
 	detailId: null,
diff --git a/src/pages/shop/detail.vue b/src/pages/shop/detail.vue
index ea68a35..43ead01 100644
--- a/src/pages/shop/detail.vue
+++ b/src/pages/shop/detail.vue
@@ -1,13 +1,18 @@
 <template>
 	<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
 		<tm-sticky>
-			<!-- start 轮播 start -->
-			<z-swiper>
-				<z-swiper-item v-for="(v, i) in state.detail.swiperPic?.split(',')" :key="i">
-					<image class="w-100vw h-400rpx" :src="filePath(v)" mode="aspectFill" />
-				</z-swiper-item>
-			</z-swiper>
-			<!-- end 轮播 end -->
+			<swiper
+				class="w-100vw h-30vh"
+				circular
+				:indicator-dots="true"
+				indicator-active-color="#0779FD"
+				indicator-color="#ffffff"
+				:autoplay="true"
+			>
+				<swiper-item v-for="(v, i) in state.detail?.swiperPic?.split(',')" :key="i">
+					<image class="w-full h-full" :src="filePath(v)" mode="aspectFill" />
+				</swiper-item>
+			</swiper>
 
 			<tm-sticky-header>
 				<view class="m-x-30rpx">
@@ -164,8 +169,6 @@ import { isEmpty } from "radash"
 import { router } from "@@/index"
 import { foodApi, merchantApi, payApi, shopApi } from "@@/api"
 import { filePath } from "@@/utils/file"
-import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
-import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
 import ProductRow from "./components/product-row.vue"
 import ProductCar from "./components/product-car.vue"
 import ProductTotal from "./components/product-total.vue"
diff --git a/src/pages/shop/product-detail.vue b/src/pages/shop/product-detail.vue
index a5e4c06..f779bcc 100644
--- a/src/pages/shop/product-detail.vue
+++ b/src/pages/shop/product-detail.vue
@@ -1,71 +1,76 @@
 <script setup lang="ts">
-import { reactive } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import { isEmpty } from "radash";
-import { shopApi } from "@@/api";
-import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue";
-import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue";
-import { filePath } from "@/sheep/utils/file";
+import { reactive } from "vue"
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import { isEmpty } from "radash"
+import { shopApi } from "@@/api"
+import { filePath } from "@/sheep/utils/file"
 
 const state = reactive<any>({
-  detailId: null,
-  detail: null,
-});
+	detailId: null,
+	detail: null,
+})
 
 onLoad((options: any) => {
-  if (!isEmpty(options.id)) {
-    state.detailId = options.id;
-  }
-});
+	if (!isEmpty(options.id)) {
+		state.detailId = options.id
+	}
+})
 onShow(() => {
-  getDetail();
-});
+	getDetail()
+})
 
 const getDetail = async () => {
-  const { data } = await shopApi.getSupermarketSpuDetail({ id: state.detailId });
-  state.detail = data;
-};
+	const { data } = await shopApi.getSupermarketSpuDetail({ id: state.detailId })
+	state.detail = data
+}
 </script>
 
 <template>
-  <crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
-    <!-- <z-swiper> -->
-    <!-- <z-swiper-item v-for="(v, i) in state.detail.sliderPicUrls" :key="i"> -->
-    <image class="w-100vw" :src="filePath(state.detail.picUrl)" mode="widthFix" />
-    <!-- </z-swiper-item> -->
-    <!-- </z-swiper> -->
+	<crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
+		<swiper
+			class="w-100vw h-30vh"
+			circular
+			:indicator-dots="true"
+			indicator-active-color="#0779FD"
+			indicator-color="#ffffff"
+			:autoplay="true"
+		>
+			<swiper-item v-for="(v, i) in state.detail?.sliderPicUrls?.split(',')" :key="i">
+				<image class="w-full h-full" :src="filePath(state.detail.picUrl)" mode="aspectFill" />
+			</swiper-item>
+		</swiper>
 
-    <view class="p-x-15rpx">
-      <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
-        <view class="flex-row items-center justify-between">
-          <!-- <view class="flex-row items-center"> -->
-          <!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
-          <!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
-          <!-- </view> -->
-          <view class="second-text-26">已售{{ state.detail.salesCount }}</view>
-        </view>
-        <view class="flex-col m-t-15rpx">
-          <view class="sub-text-32">{{ state.detail.productName }}</view>
-          <view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
-        </view>
-      </view>
-      <view class="h-15rpx" />
-      <view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
-        <view class="prefix_title">评价</view>
-      </view>
-      <view class="h-15rpx" />
-      <view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
-        <view class="prefix_title">详情</view>
-        <view class="m-t-15rpx" v-html="state.detail.description"></view>
-      </view>
-    </view>
-  </crud-layout>
+		<view class="p-x-15rpx">
+			<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+				<view class="flex-row items-center justify-between">
+					<!-- <view class="flex-row items-center"> -->
+					<!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
+					<!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
+					<!-- </view> -->
+					<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
+				</view>
+				<view class="flex-col m-t-15rpx">
+					<view class="sub-text-32">{{ state.detail.productName }}</view>
+					<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
+				</view>
+			</view>
+			<view class="h-15rpx" />
+			<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
+				<view class="prefix_title">评价</view>
+			</view>
+			<view class="h-15rpx" />
+			<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
+				<view class="prefix_title">详情</view>
+				<view class="m-t-15rpx" v-html="state.detail.description"></view>
+			</view>
+		</view>
+	</crud-layout>
 </template>
 
 <style lang="scss" scoped>
 :deep() {
-  .layout_main > scroll-view {
-    padding: 0 !important;
-  }
+	.layout_main > scroll-view {
+		padding: 0 !important;
+	}
 }
 </style>