Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into dev

src/components/product/ProductBanner.vue

@@ -1,10 +1,20 @@
 <template>
-    <div class="detail-top">
-        <img src="@assets/png-bg-shangping.png" 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">
+    <div class="detail-top" :style="bgImgStyle">
+        <img src="@assets/png-bg-shangping.png" v-if="windowVertical" class="bg-img" />
+
+        <div class="detail-info" :style="{ paddingBottom: windowVertical ? '50px' : '0px' }">
+            <three-mode
+                :info="info.model3d"
+                :windowVertical="windowVertical"
+                v-if="!!info.model3d"
+                :pageType="pageType"
+            ></three-mode>
+            <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 +23,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 +38,7 @@
                         loop
                         ref="videoRef"
                         autoplay
+                        :style="{ width: imgWidth, height: imgWidth }"
                     >
                         您的浏览器不支持 video 标签。
                     </video>
@@ -35,8 +46,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">
@@ -55,16 +66,14 @@
                 </swiper-slide>
             </swiper>
 
-            <div class="share-content" v-if="pageType !== 'auction'">
-                <div class="setAvatar" v-if="pageType == 'asset' && onlyImg">
-                    <div class="setAvatar_con" @click="setAvatar">
-                        <img src="../../assets/icon-sheweitouxiang.png" alt="" />
-                        <span>设为头像</span>
-                    </div>
-                    <!-- <div class="setAvatar_con" @click="setNickname">
-                        <img src="../../assets/icon-sheweitouxiang.png" alt="" />
-                        <span>设为昵称</span>
-                    </div> -->
+            <div
+                class="share-content"
+                :style="{ marginTop: windowVertical ? '20px' : '10px' }"
+                v-if="pageType !== 'auction'"
+            >
+                <div class="setAvatar" @click="setAvatar" v-if="pageType == 'asset' && onlyImg">
+                    <img src="../../assets/icon-sheweitouxiang.png" alt="" />
+                    <span>设为头像</span>
                 </div>
 
                 <like-button v-if="pageType == 'product'" :isLike="info.liked" @click="likeProduct">
@@ -129,6 +138,10 @@ export default {
         assignment: {
             type: Boolean,
             default: false
+        },
+        windowVertical: {
+            type: Boolean,
+            default: true
         }
     },
     data() {
@@ -137,6 +150,7 @@ export default {
             playing: true
         };
     },
+    inject: ['appHeight', 'safeTop'],
     mixins: [product, asset],
     components: {
         Swiper,
@@ -168,6 +182,29 @@ export default {
                 }
             }
             return false;
+        },
+        bgImgStyle() {
+            if (!this.windowVertical) {
+                return {
+                    height: `calc(${this.appHeight} - ${this.safeTop})`,
+                    width: `calc(${this.appHeight} - ${this.safeTop} - 50px)`
+                };
+            }
+            return {};
+        },
+        imgWidth() {
+            if (this.windowVertical) {
+                return 'calc(100vw - 134px)';
+            } else {
+                return `calc(${this.appHeight} - ${this.safeTop} - 120px)`;
+            }
+        },
+        BannerWidth() {
+            if (this.windowVertical) {
+                return 'calc(100vw - 124px)';
+            } else {
+                return `calc(${this.appHeight} - ${this.safeTop} - 110px)`;
+            }
         }
     },
     mounted() {
@@ -225,11 +262,6 @@ export default {
             this.updateUser({ avatar: this.banners[0].url, useCollectionPic: true }).then(res => {
                 this.$toast.success('设置成功');
             });
-        },
-        setNickname() {
-            this.updateUser({ nickname: this.info.name }).then(res => {
-                this.$toast.success('设置成功');
-            });
         }
     }
 };
@@ -237,10 +269,9 @@ export default {
 
 <style lang="less" scoped>
 @radius: 30px;
-
 .detail-top {
     position: relative;
-
+    flex-shrink: 0;
     .detail-info {
         position: absolute;
         top: 50%;
@@ -251,27 +282,23 @@ export default {
         align-items: center;
         padding-bottom: 50px;
     }
-
     .bg-img {
         display: block;
         width: 100vw;
     }
-
     .mySwiper {
         border-radius: @radius;
         border: 2px solid #ffffff;
         padding: 5px;
         overflow: hidden;
         .detail-animate();
-        width: calc(100vw - 124px);
-
+        // width: calc(100vw - 124px);
         .swiper-slide {
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             overflow: hidden;
-
             /deep/ .van-image {
                 border: 2px solid #2f2f2f;
                 border-radius: @radius;
@@ -285,8 +312,6 @@ export default {
 .swiper-video {
     border: 2px solid #2f2f2f;
     border-radius: @radius;
-    width: calc(100vw - 134px);
-    height: calc(100vw - 134px);
     display: block;
     overflow: hidden;
 }
@@ -295,7 +320,6 @@ export default {
     display: flex;
     margin-top: 20px;
 }
-
 .share-icon {
     img {
         width: 18px;
@@ -303,7 +327,6 @@ export default {
         display: inline-block;
         vertical-align: middle;
     }
-
     span {
         font-size: @font1;
         color: #949699;
@@ -334,32 +357,22 @@ export default {
 
 .setAvatar {
     .flex();
-
-    .setAvatar_con {
-        .flex();
-
-        img {
-            width: 18px;
-            height: 18px;
-            display: block;
-        }
-
-        span {
-            font-size: 12px;
-            color: #949699;
-            line-height: 24px;
-            margin-left: 3px;
-        }
+    img {
+        width: 18px;
+        height: 18px;
+        display: block;
     }
 
-    // .setAvatar_con:first-of-type {
-    //     margin-right: 30px;
-    // }
+    span {
+        font-size: 12px;
+        color: #949699;
+        line-height: 24px;
+        margin-left: 3px;
+    }
 }
 
 .swiper-slide {
     position: relative;
-
     .video-icon {
         position: absolute;
         top: 10px;
@@ -368,7 +381,6 @@ export default {
         background-color: rgba(255, 255, 255, 0.1);
         padding: 2px 5px;
         border-radius: 4px;
-
         img {
             width: 20px;
             height: 20px;
@@ -384,7 +396,6 @@ export default {
         z-index: 999;
         background-color: rgba(255, 255, 255, 0.1);
         border-radius: 100px;
-
         .van-icon {
             color: #fff;
             font-size: 64px;

src/router/index.js

@@ -345,8 +345,8 @@ const routes = [
         component: () => import('../views/product/Detail.vue'),
         meta: {
             pageType: Page.Every,
-            tabColor: '#181818'
-            // menuPage: true
+            tabColor: '#181818',
+            menuPage: true
         }
     },
     {