【我的作品】根据需求细化“返回顶部”按钮

public/static/lib/iconfontQJ1.1.0/demo_index.html

@@ -55,6 +55,12 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe6f3;</span>
+                <div class="name">top</div>
+                <div class="code-name">&amp;#xe6f3;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe6ef;</span>
                 <div class="name">editor_play</div>
                 <div class="code-name">&amp;#xe6ef;</div>
@@ -744,9 +750,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1641873333598') format('woff2'),
-       url('iconfont.woff?t=1641873333598') format('woff'),
-       url('iconfont.ttf?t=1641873333598') format('truetype');
+  src: url('iconfont.woff2?t=1642757115929') format('woff2'),
+       url('iconfont.woff?t=1642757115929') format('woff'),
+       url('iconfont.ttf?t=1642757115929') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -773,6 +779,15 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-top"></span>
+            <div class="name">
+              top
+            </div>
+            <div class="code-name">.icon-top
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-editor_play"></span>
             <div class="name">
               editor_play
@@ -1809,6 +1824,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-top"></use>
+                </svg>
+                <div class="name">top</div>
+                <div class="code-name">#icon-top</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-editor_play"></use>
                 </svg>
                 <div class="name">editor_play</div>

public/static/lib/iconfontQJ1.1.0/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2947721 */
-  src: url('iconfont.woff2?t=1641873333598') format('woff2'),
-       url('iconfont.woff?t=1641873333598') format('woff'),
-       url('iconfont.ttf?t=1641873333598') format('truetype');
+  src: url('iconfont.woff2?t=1642757115929') format('woff2'),
+       url('iconfont.woff?t=1642757115929') format('woff'),
+       url('iconfont.ttf?t=1642757115929') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-top:before {
+  content: "\e6f3";
+}
+
 .icon-editor_play:before {
   content: "\e6ef";
 }

public/static/lib/iconfontQJ1.1.0/iconfont.json

@@ -6,6 +6,13 @@
   "description": "全景看看1.1.0",
   "glyphs": [
     {
+      "icon_id": "27373469",
+      "name": "top",
+      "font_class": "top",
+      "unicode": "e6f3",
+      "unicode_decimal": 59123
+    },
+    {
       "icon_id": "25824857",
       "name": "editor_play",
       "font_class": "editor_play",

src/views/material/works/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="works con">
-    <div class="back-top" @click="onClickBackTop" v-show="isShowBackTopBtn" >回到顶部</div>
+    <div class="back-top" @click="onClickBackTop" v-show="isShowBackTopBtn">
+      <i class="iconfont icon-top"></i>
+    </div>
     <div class="tab">
       <span>我的作品 {{workTotalNum !== undefined ? `(${workTotalNum})`:''}}</span>
       <div class="tab-r">
@@ -215,7 +217,7 @@ export default {
           searchKey: this.searchKey,
         },
         (data) => {
-          this.list = this.list.concat(data.data.list)
+            this.list = this.list.concat(data.data.list)
           if (this.list.length === data.data.total) {
             this.hasMoreData = false
           }
@@ -257,7 +259,7 @@ export default {
       requestAnimationFrame(fn)
     },
     onWorkListScroll(e) {
-      if (e.target.scrollTop >= 200) {
+      if (e.target.scrollTop >= 600) {
         this.isShowBackTopBtn = true
       } else {
         this.isShowBackTopBtn = false
@@ -268,26 +270,30 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@color:#1983F6;
-
 .works{
   width: 100%;
   flex-direction: column;
+  position: relative;
   .back-top {
-    position: fixed;
-    right: 0;
-    bottom: 50px;
-    width: 50px;
-    height: 50px;
-    background-color: #3355ee;
+    position: absolute;
+    right: -80px;
+    bottom: 30px;
+    width: 60px;
+    height: 60px;
+    border-radius: 8px;
+    background-color: #fff;
     z-index: 1;
-    border-radius: 50%;
-    text-align: center;
-    color: white;
-    font-size: 10px;
-    line-height: 50px;
+    color: #C8C9CC;
+    &:hover {
+      color: #323233;
+    }
     cursor: pointer;
-
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: 20px;
+    }
   }
   .tab{
     flex: 0 0 auto;