详情

src/components/product/ProductBanner.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="detail-top">
-        <img src="@assets/png-bg-shangping.png" :style="bgImgStyle" class="bg-img" />
+    <div class="detail-top" :style="bgImgStyle">
+        <img src="@assets/png-bg-shangping.png" v-if="windowVertical" class="bg-img" />
 
-        <div class="detail-info">
+        <div class="detail-info" :style="{ paddingBottom: windowVertical ? '50px' : '0px' }">
             <three-mode
                 :info="info.model3d"
                 :windowVertical="windowVertical"
@@ -66,7 +66,11 @@
                 </swiper-slide>
             </swiper>
 
-            <div class="share-content" v-if="pageType !== 'auction'">
+            <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>
@@ -180,28 +184,26 @@ export default {
             return false;
         },
         bgImgStyle() {
-            if (this.windowVertical) {
-                return {
-                    width: '100vw'
-                };
-            } else {
+            if (!this.windowVertical) {
                 return {
-                    height: `calc(${this.appHeight} - ${this.safeTop})`
+                    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} - 184px)`;
+                return `calc(${this.appHeight} - ${this.safeTop} - 120px)`;
             }
         },
         BannerWidth() {
             if (this.windowVertical) {
                 return 'calc(100vw - 124px)';
             } else {
-                return `calc(${this.appHeight} - ${this.safeTop} - 174px)`;
+                return `calc(${this.appHeight} - ${this.safeTop} - 110px)`;
             }
         }
     },
@@ -282,6 +284,7 @@ export default {
     }
     .bg-img {
         display: block;
+        width: 100vw;
     }
     .mySwiper {
         border-radius: @radius;

src/views/product/Detail.vue

@@ -667,6 +667,10 @@
                 </template>
             </div>
         </div>
+
+        <div class="back-content" @click="goBack">
+            <img src="@assets/icon_fanhui2.png" alt="" />
+        </div>
         <!-- <driver /> -->
 
         <!-- <driver /> -->
@@ -698,6 +702,7 @@ import { watch, ref, computed } from 'vue';
 SwiperCore.use([Pagination]);
 
 let inWeixin = /micromessenger/i.test(navigator.userAgent);
+let fromRoute = null;
 
 export default {
     components: {
@@ -1117,9 +1122,17 @@ export default {
             this.getInit().then(() => {
                 this.isLoading = false;
             });
+        },
+        goBack() {
+            if (!fromRoute || !fromRoute.name) {
+                this.$router.replace('/home');
+            } else {
+                this.$router.back();
+            }
         }
     },
     beforeRouteEnter(to, from, next) {
+        fromRoute = from;
         if (from.path === '/creatorDetail') {
             next(vm => {
                 vm.createrId = from.query.id;
@@ -2310,4 +2323,23 @@ export default {
         padding-right: 16px;
     }
 }
+
+.back-content {
+    width: 34px;
+    height: 34px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(1px);
+    .flex();
+    justify-content: center;
+    border-radius: 100px;
+    box-sizing: border-box;
+    img {
+        width: 18px;
+        height: 18px;
+    }
+    position: fixed;
+    left: 16px;
+    top: calc(var(--safe-top) + 16px);
+    z-index: 20;
+}
 </style>