C端精品典藏：”回到顶部“按钮优化

web/src/components/BackTop.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="back-top" @click="onClickBackTop" v-show="isShowBackTopBtn">
+  <div class="back-top-wrapper" @click="onClickBackTop" v-show="isShowBackTopBtn">
     <slot>
       <div class="back-top__default">回到顶部</div>
     </slot>
@@ -74,15 +74,12 @@ export default({
       // requestAnimationFrame(fn)
     },
     onTargetScroll: debounce(function(e) {
-      if (this.isBackingTop) {
-        return
-      }
-      if (e.target.scrollTop >= this.triggerDistance) {
+     if (e.target.scrollTop >= this.triggerDistance) {
         this.isShowBackTopBtn = true
       } else {
         this.isShowBackTopBtn = false
       }
-    }),
+    }, 100),
   },
   mounted() {
     this.target = document.getElementById(this.targetId)

web/src/components/lrLayout/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="lr_layout">
-    <BackTop class="back-top" :targetId="'collection-list'"></BackTop>
+    <BackTop class="back-top" :targetId="'collection-list'">
+      <img :src="require('@/assets/images/返回顶部.png')" />
+    </BackTop>
     <div class="lcon">
       <slot name="lcon"></slot>
     </div>
@@ -48,21 +50,13 @@ export default {
   }
 }
 
-  .back-top {
-    position: absolute;
-    right: -130px;
-    bottom: 130px;
-    width: 60px;
-    height: 60px;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #C8C9CC;
-    &:hover {
-      color: #323233;
-    }
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.back-top {
+  position: absolute;
+  right: -230px;
+  bottom: 166px;
+  width: 60px;
+  height: 60px;
+  border-radius: 30px;
+  cursor: pointer;
+}
 </style>