详情

src/components/product/ProductBanner.vue

@@ -1,10 +1,15 @@
 <template>
     <div class="detail-top">
-        <img src="@assets/png-bg-shangping.png" class="bg-img" />
+        <img src="@assets/png-bg-shangping.png" :style="bgImgStyle" class="bg-img" />
 
         <div class="detail-info">
             <three-mode :info="info.model3d" v-if="!!info.model3d" :pageType="pageType"></three-mode>
-            <swiper @swiper="setSwiperRef" class="mySwiper" v-else-if="banners.length > 0">
+            <swiper
+                @swiper="setSwiperRef"
+                :style="{ width: BannerWidth, height: BannerWidth }"
+                class="mySwiper"
+                v-else-if="banners.length > 0"
+            >
                 <swiper-slide v-for="(item, index) in banners" :key="index">
                     <!-- <img :src="item" /> -->
 
@@ -13,8 +18,8 @@
                     </div> -->
                     <van-image
                         v-if="opened === false"
-                        width="calc(100vw - 134px)"
-                        height="calc(100vw - 134px)"
+                        :width="imgWidth"
+                        :height="imgWidth"
                         :src="require('../../assets/manghe.png')"
                         fit="contain"
                     />
@@ -28,6 +33,7 @@
                         loop
                         ref="videoRef"
                         autoplay
+                        :style="{ width: imgWidth, height: imgWidth }"
                     >
                         您的浏览器不支持 video 标签。
                     </video>
@@ -35,8 +41,8 @@
                         v-else
                         @click="preview(index, changeImgs(banners))"
                         :src="getImg(item.url, '', 1200)"
-                        width="calc(100vw - 134px)"
-                        height="calc(100vw - 134px)"
+                        :width="imgWidth"
+                        :height="imgWidth"
                         :fit="info.type === 'PICTURE' ? 'cover' : 'contain'"
                     />
                     <!-- <div class="video-icon" v-if="isVideo(item)" @click="changeMuted">
@@ -123,6 +129,10 @@ export default {
         assignment: {
             type: Boolean,
             default: false
+        },
+        windowVertical: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -131,6 +141,7 @@ export default {
             playing: true
         };
     },
+    inject: ['appHeight', 'safeTop'],
     mixins: [product, asset],
     components: {
         Swiper,
@@ -162,6 +173,31 @@ export default {
                 }
             }
             return false;
+        },
+        bgImgStyle() {
+            if (this.windowVertical) {
+                return {
+                    width: '100vw'
+                };
+            } else {
+                return {
+                    height: `calc(${this.appHeight} - ${this.safeTop} - 46px)`
+                };
+            }
+        },
+        imgWidth() {
+            if (this.windowVertical) {
+                return 'calc(100vw - 134px)';
+            } else {
+                return `calc(${this.appHeight} - ${this.safeTop} - 230px)`;
+            }
+        },
+        BannerWidth() {
+            if (this.windowVertical) {
+                return 'calc(100vw - 124px)';
+            } else {
+                return `calc(${this.appHeight} - ${this.safeTop} - 220px)`;
+            }
         }
     },
     mounted() {
@@ -228,6 +264,7 @@ export default {
 @radius: 30px;
 .detail-top {
     position: relative;
+    flex-shrink: 0;
     .detail-info {
         position: absolute;
         top: 50%;
@@ -240,7 +277,6 @@ export default {
     }
     .bg-img {
         display: block;
-        width: 100vw;
     }
     .mySwiper {
         border-radius: @radius;
@@ -248,7 +284,7 @@ export default {
         padding: 5px;
         overflow: hidden;
         .detail-animate();
-        width: calc(100vw - 124px);
+        // width: calc(100vw - 124px);
         .swiper-slide {
             display: flex;
             align-items: center;
@@ -268,8 +304,6 @@ export default {
 .swiper-video {
     border: 2px solid #2f2f2f;
     border-radius: @radius;
-    width: calc(100vw - 134px);
-    height: calc(100vw - 134px);
     display: block;
     overflow: hidden;
 }