diff --git a/pkg_product/views/experienceProjectDetail.vue b/pkg_product/views/experienceProjectDetail.vue
index f5970f3..54c8f8f 100644
--- a/pkg_product/views/experienceProjectDetail.vue
+++ b/pkg_product/views/experienceProjectDetail.vue
@@ -10,8 +10,16 @@
     />
     <scroll-view scroll-y class="page-scroll">
       <view class="hero-wrap">
+        <swiper v-if="bannerList.length > 0 || project.video" class="hero-img" circular autoplay @change="handleSwiperChange">
+          <swiper-item v-if="project.video">
+            <video :src="project.video" id="hero-video" class="hero-img" :autoplay="currentSwiperIndex === 0" loop muted object-fit="cover" :show-play-btn="false" :controls="false" :enable-progress-gesture="false"></video>
+          </swiper-item>
+          <swiper-item v-for="(item, index) in bannerList" :key="index">
+            <image :src="item" class="hero-img" mode="aspectFill" />
+          </swiper-item>
+        </swiper>
         <image
-          v-if="project.cover"
+          v-else-if="project.cover"
           :src="project.cover"
           class="hero-img"
           mode="aspectFill"
@@ -156,6 +164,8 @@ export default {
         longitude: '',
         phone: '',
         wechat: '',
+        video: '',
+        banner: '',
         experienceTitle: '',
         experienceSubTitle: '',
         detailText: '',
@@ -167,7 +177,15 @@ export default {
       totalPrice: 0,
       validFrom: '',
       validTo: '',
-      usageNotice: ''
+      usageNotice: '',
+      currentSwiperIndex: 0,
+      videoContext: null
+    }
+  },
+  computed: {
+    bannerList() {
+      if (!this.project.banner) return []
+      return this.project.banner.split(',').filter(item => item)
     }
   },
   onLoad(query) {
@@ -177,6 +195,8 @@ export default {
     this.project.id = id
     this.project.name = decode(query.name)
     this.project.cover = decode(query.cover)
+    this.project.video = decode(query.video)
+    this.project.banner = decode(query.banner)
     this.project.intro = decode(query.intro)
     this.project.serviceTime = query.serviceTime || ''
     this.project.serviceEndTime = query.serviceEndTime || ''
@@ -204,7 +224,20 @@ export default {
     }
     this.fetchProjectDetail()
   },
+  onReady() {
+    this.videoContext = uni.createVideoContext('hero-video', this)
+  },
   methods: {
+    handleSwiperChange(e) {
+      this.currentSwiperIndex = e.detail.current
+      if (this.project.video && this.videoContext) {
+        if (this.currentSwiperIndex === 0) {
+          this.videoContext.play()
+        } else {
+          this.videoContext.pause()
+        }
+      }
+    },
     fetchProjectDetail() {
       if (!this.experienceMerchantId) {
         return
@@ -218,6 +251,8 @@ export default {
           const data = res.data || {}
           this.project.name = data.name || this.project.name
           this.project.cover = data.cover || this.project.cover
+          this.project.video = data.video || this.project.video
+          this.project.banner = data.banner || this.project.banner
           this.project.intro = data.intro || this.project.intro
           this.project.serviceTime = data.serviceTime || this.project.serviceTime
           this.project.serviceEndTime = data.serviceEndTime || this.project.serviceEndTime