优化同城页面

src/components/Video.vue

@@ -1,5 +1,5 @@
 <!--<template>-->
-<!--  <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" ref="video" muted :autoplay="!disabled" loop>-->
+<!--  <video style="height: 100vh;width: 100vw;" :src="video.videoUrl" :poster="video.poster" refs="video" muted :autoplay="!disabled" loop>-->
 <!--    <p> 您的浏览器不支持 video 标签。</p>-->
 <!--  </video>-->
 <!--</template>-->

src/pages/home/Attention.vue

@@ -9,6 +9,7 @@
          @touchstart="start"
          @touchmove="move"
          @touchend="end"
+         @scroll="scroll"
     >
       <div ref="wrapper" class="wrapper"
       >
@@ -173,7 +174,7 @@
             </div>
           </div>
         </div>
-        <Loading :isFullScreen="false"></Loading>
+        <Loading v-if="loading" :isFullScreen="false"></Loading>
       </div>
     </div>
     <Footer v-bind:init-tab="2" style="position: fixed;"/>
@@ -206,8 +207,12 @@ export default {
       },
       isTop: false,
       isFixed: true,
+      isMove: false,
+      loading: false,
+      isRefresh: false,
       startLocationY: 0,
-      ref: {
+      topStartLocationY: 0,
+      refs: {
         scroller: null,
         wrapper: null,
         header1: null,
@@ -271,71 +276,112 @@ export default {
       }
       this.items.push(temp)
     }
-    this.items = this.items.concat(this.items)
     // this.$console(this.items)
 
     setTimeout(() => {
-      this.ref.scroller = this.$refs["scroller"]
+      this.refs.scroller = this.$refs["scroller"]
-      this.ref.wrapper = this.$refs["wrapper"]
+      this.refs.wrapper = this.$refs["wrapper"]
-      this.ref.header1 = this.$refs["header1"]
+      this.refs.header1 = this.$refs["header1"]
     })
   },
   methods: {
     start(e) {
-      this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `none`
+      this.refs.header1.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `none`
-      this.startLocationY = e.touches[0].pageY
+      this.topStartLocationY = this.startLocationY = e.touches[0].pageY
     },
     move(e) {
-      this.isTop = this.ref.scroller.scrollTop === 0
+      let scrollTop = this.refs.scroller.scrollTop
+      this.isTop = scrollTop === 0
       // console.log('scrollTop', scroller.scrollTop)
       let touchMoveDistance = e.touches[0].pageY - this.startLocationY
       // console.log('touchMoveDistance', touchMoveDistance)
       // let transformY = this.$getTransform(header)
 
-
       let headerHeight = 80
       let header1Height = 50
       if (touchMoveDistance > 0) {
         if (!this.isFixed) {
           if (Math.abs(touchMoveDistance) < header1Height) {
-            this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance - header1Height}px,0)`
+            this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance - header1Height}px,0)`
           } else {
-            this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
+            this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
           }
         }
-        if (this.isTop) {
+        if (this.isTop && (!this.isRefresh)) {
-          this.ref.wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
+          let wrapperTouchMoveDistance = e.touches[0].pageY - this.topStartLocationY
+          this.refs.wrapper.style.transform = `translate3d(0,${wrapperTouchMoveDistance > headerHeight ? headerHeight : wrapperTouchMoveDistance}px,0)`
         } else {
-          // this.startLocationY = e.touches[0].pageY
+          this.topStartLocationY = e.touches[0].pageY
         }
       } else {
         if (this.isFixed) {
           if (Math.abs(touchMoveDistance) < header1Height) {
-            this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
+            this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
           } else {
-            this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
+            this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
           }
         }
+        let wrapperHeight = this.refs.wrapper.offsetHeight
+        if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
+          this.loadMore()
+          this.refs.scroller.scrollTop = wrapperHeight
+        }
+        // let s = wrapperHeight - scrollTop
+        // console.log(s)
       }
       // console.log('isTop', this.isTop)
     },
-    end() {
+    end(e) {
+      this.refs.header1.style.transition = this.refs.scroller.style.transition = this.refs.wrapper.style.transition = `all .3s`
       let header1Height = 50
-      this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `all .3s`
+      let headerHeight = 80
-      this.ref.wrapper.style.transform = `translate3d(0,0,0)`
+      let touchMoveDistance = e.changedTouches[0].pageY - this.startLocationY
-      let transformY = this.$getTransform(this.ref.header1)
+      if (this.isTop && Math.abs(touchMoveDistance) > headerHeight / 2) {
+        this.refs.wrapper.style.transform = `translate3d(0,${headerHeight}px,0)`
+        this.refresh(() => {
+          console.log('refresh-done')
+          this.refs.wrapper.style.transform = `translate3d(0,0,0)`
+        })
+      } else {
+        this.refs.wrapper.style.transform = `translate3d(0,${0}px,0)`
+      }
+      let transformY = this.$getTransform(this.refs.header1)
       if (Math.abs(transformY) > header1Height / 2) {
         this.isFixed = false
-        this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
+        this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
       } else {
         this.isFixed = true
-        this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
+        this.refs.header1.style.transform = this.refs.scroller.style.transform = `translate3d(0,${0}px,0)`
       }
     },
     scroll(e) {
       if (this.isTop) {
         e.preventDefault();
+      } else {
+        let scrollTop = this.refs.scroller.scrollTop
+        let wrapperHeight = this.refs.wrapper.offsetHeight
+        if (scrollTop + this.bodyHeight + 50 > wrapperHeight) {
+          this.loadMore()
+          this.refs.scroller.scrollTop = wrapperHeight
+        }
       }
+    },
+    async loadMore() {
+      console.log('loadMore-start')
+      if (this.loading) return
+      this.loading = true
+      await this.$sleep(1500)
+      this.items = this.items.concat(this.items)
+      this.loading = false
+    },
+    async refresh(done) {
+      console.log('refresh-start')
+      if (this.isRefresh) return
+      this.isRefresh = true
+      await this.$sleep(1500)
+      this.isRefresh = false
+      // this.items = []
+      done()
     }
   }
 }
@@ -363,7 +409,6 @@ export default {
     height: calc(100vh - 5rem);
     position: relative;
     overflow: scroll;
-    background: black;
 
     > .wrapper {
       position: absolute;
@@ -373,6 +418,9 @@ export default {
       z-index: 2;
 
       > .header {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
         height: 8rem;
       }
     }
@@ -524,18 +572,36 @@ export default {
     justify-content: space-between;
     flex-direction: row;
     overflow: auto;
-    background: black;
+    //background: black;
     box-sizing: border-box;
-    padding: 0 3px;
 
     > .left, > .right {
-      width: calc(50% - 1.5px);
+      width: calc(50%);
+    }
+
+    > .left {
+      .item {
+        padding: 0 2px 3px 3px;
+        &:nth-last-child(1) {
+          padding-bottom: 0;
+        }
+      }
+    }
+
+    > .right {
+      .item {
+        padding: 0 3px 3px 2px;
+
+        &:nth-last-child(1) {
+          padding-bottom: 0;
+        }
+      }
     }
 
     .item {
+      background: black;
       width: 100%;
       box-sizing: border-box;
-      margin-bottom: 3px;
 
       .wrapper {
         position: relative;

src/pages/home/Attention2.vue

@@ -1,665 +0,0 @@
-<template>
-  <div id="attention">
-    <header ref="header1">
-      <span @click="$nav('/country-choose')">双流</span>
-      <div class="arrow"></div>
-    </header>
-    <div class="scroller"
-         ref="scroller"
-         @touchstart="start"
-         @touchmove="move"
-         @touchend="end"
-    >
-      <div ref="wrapper" class="wrapper"
-      >
-        <div class="header" ref="header">
-          <Loading :isFullScreen="false"></Loading>
-        </div>
-        <div class="ad" v-if="false">
-          <div class="title">超值卖场 次日达</div>
-          <div class="good-ctn">
-            <div class="left">
-              <div class="left-title">
-                <span>限量秒杀</span>
-                <div>低至0.99元</div>
-              </div>
-              <div class="goods">
-                <div class="good">
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                  <div class="name">每日坚果5包</div>
-                  <div class="price">￥0.99</div>
-                </div>
-                <div class="good">
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                  <div class="name">每日坚果5包</div>
-                  <div class="price">￥0.99</div>
-                </div>
-              </div>
-            </div>
-            <div class="right">
-              <div class="goods">
-                <div class="good">
-                  <div class="notice">
-                    <div class="ad-name">低价疯抢</div>
-                    <div class="ad-desc">统一方便面</div>
-                  </div>
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                </div>
-                <div class="good">
-                  <div class="notice">
-                    <div class="ad-name">低价疯抢</div>
-                    <div class="ad-desc">统一方便面</div>
-                  </div>
-                  <img class="good-img" src="../../assets/img/poster/1.jpg"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div ref="content" class="content">
-          <div class="left">
-            <div class="item" v-for="item in left">
-              <template v-if="item.type === 0">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                </div>
-                <div class="location" v-if="item.address">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.address.name }}</div>
-                  </div>
-                  <div class="bottom">
-                    <div class="type">{{ item.address.type }}</div>
-                    <div class="line"></div>
-                    <div class="other">{{ item.address.number }}人想去</div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 1">
-                <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                  <img class="poster" :src="item.src"/>
-                </div>
-              </template>
-              <template v-if="item.type === 2">
-                <div class="ranking-list">
-                  <div class="desc">
-                    <div class="top">
-                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                      <div class="name">{{ item.desc }}</div>
-                    </div>
-                    <div class="bottom">
-                      基于6亿抖音用户真实数据...
-                    </div>
-                  </div>
-                  <div class="ads">
-                    <div class="ad" v-for="(ad,index) in item.ads">
-                      <div class="left">
-                        <img class="ad-logo" :src="ad.src"/>
-                      </div>
-                      <div class="right">
-                        <div class="rank">TOP{{ index + 1 }}</div>
-                        <div class="name">{{ ad.name }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 3">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                  <div class="live">直播中</div>
-                </div>
-              </template>
-            </div>
-
-          </div>
-          <div class="right">
-            <div class="item" v-for="item in right">
-              <template v-if="item.type === 0">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                </div>
-                <div class="location" v-if="item.address">
-                  <div class="top">
-                    <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                    <div class="name">{{ item.address.name }}</div>
-                  </div>
-                  <div class="bottom">
-                    <div class="type">{{ item.address.type }}</div>
-                    <div class="line"></div>
-                    <div class="other">{{ item.address.number }}人想去</div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 1">
-                <div class="wrapper" style="height: 49vw;overflow:hidden;">
-                  <img class="poster" :src="item.src"/>
-                </div>
-              </template>
-              <template v-if="item.type === 2">
-                <div class="ranking-list">
-                  <div class="desc">
-                    <div class="top">
-                      <img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
-                      <div class="name">{{ item.desc }}</div>
-                    </div>
-                    <div class="bottom">
-                      基于6亿抖音用户真实数据...
-                    </div>
-                  </div>
-                  <div class="ads">
-                    <div class="ad" v-for="(ad,index) in item.ads">
-                      <div class="left">
-                        <img class="ad-logo" :src="ad.src"/>
-                      </div>
-                      <div class="right">
-                        <div class="rank">TOP{{ index + 1 }}</div>
-                        <div class="name">{{ ad.name }}</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </template>
-              <template v-if="item.type === 3">
-                <div class="wrapper">
-                  <img class="poster" :src="item.src"/>
-                  <img :src="item.author" alt="" class="author">
-                  <div class="live">直播中</div>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-        <Loading :isFullScreen="false"></Loading>
-      </div>
-    </div>
-    <Footer v-bind:init-tab="2" style="position: fixed;"/>
-  </div>
-</template>
-
-<script>
-
-//TODO 还差个点击，返回后，定位到当前item最高点
-import Footer from '../../components/Footer.vue';
-import Loading from "../../components/Loading";
-
-export default {
-  name: "Attention",
-  components: {
-    Footer,
-    Loading
-  },
-  data() {
-    return {
-      items: [],
-      height: 0,
-      width: 0,
-      footerHeight: 0,
-      itemType: {
-        VIDEO: 0,
-        AD: 1,
-        RANKING_LIST: 2,
-        LIVE: 3,
-      },
-      isTop: false,
-      isFixed: true,
-      startLocationY: 0
-    }
-  },
-  created() {
-    this.height = document.body.clientHeight;
-    this.width = document.body.clientWidth;
-  },
-  computed: {
-    left() {
-      return this.items.filter((v, i) => {
-        return i % 2 === 0
-      })
-    },
-    right() {
-      return this.items.filter((v, i) => {
-        return i % 2 !== 0
-
-      })
-    },
-    bodyHeight() {
-      return this.$store.state.bodyHeight
-    },
-    bodyWidth() {
-      return this.$store.state.bodyWidth
-    },
-  },
-  mounted() {
-    for (let i = 1; i < 12; i++) {
-      let temp = {
-        src: require(`../../assets/img/poster/${i}.jpg`),
-        author: require(`../../assets/img/avatar.png`),
-      }
-      temp.type = i - 1 > 3 ? 3 : i - 1
-      if (temp.type === 2) {
-        temp.desc = '成都市好友聚会美食榜'
-        temp.ads = [
-          {
-            src: require(`../../assets/img/poster/${i}.jpg`),
-            name: '烧江南烧肉'
-          },
-          {
-            src: require(`../../assets/img/poster/${i}.jpg`),
-            name: '欧叶无国界料理餐厅'
-          },
-          {
-            src: require(`../../assets/img/poster/${i}.jpg`),
-            name: '陆派玛歌庄园'
-          }
-        ]
-      }
-
-      if (i % 2 === 0) {
-        temp.address = {
-          name: '大源中央公园',
-          type: '综合商场',
-          number: 150
-        }
-      }
-      this.items.push(temp)
-    }
-    this.items = this.items.concat(this.items)
-    // this.$console(this.items)
-
-  },
-  methods: {
-    start(e) {
-      let scroller = this.$refs["scroller"]
-      let wrapper = this.$refs["wrapper"]
-      let header1 = this.$refs["header1"]
-      header1.style.transition = scroller.style.transition = wrapper.style.transition = `none`
-      this.startLocationY = e.touches[0].pageY
-    },
-    move(e) {
-      let scroller = this.$refs["scroller"]
-      let wrapper = this.$refs["wrapper"]
-      let header1 = this.$refs["header1"]
-      this.isTop = scroller.scrollTop === 0
-      // console.log('scrollTop', scroller.scrollTop)
-      let touchMoveDistance = e.touches[0].pageY - this.startLocationY
-      console.log('touchMoveDistance', touchMoveDistance)
-      // let transformY = this.$getTransform(header)
-
-      let headerHeight = 80
-      let header1Height = 50
-      if (touchMoveDistance > 0) {
-        if (this.isTop) {
-          // wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
-        } else {
-          if (!this.isFixed){
-            if (Math.abs(touchMoveDistance) < header1Height) {
-              scroller.style.marginTop = touchMoveDistance + 'px'
-              header1.style.top = touchMoveDistance - header1Height + 'px'
-            } else {
-              scroller.style.marginTop = header1Height + 'px'
-              header1.style.top = '0px'
-            }
-          }
-          // this.startLocationY = e.touches[0].pageY
-        }
-      } else {
-        if (this.isFixed){
-          if (Math.abs(touchMoveDistance) < header1Height) {
-            scroller.style.marginTop = header1Height + touchMoveDistance + 'px'
-            header1.style.top = touchMoveDistance + 'px'
-          } else {
-            scroller.style.marginTop = '0px'
-            header1.style.top = -header1Height + 'px'
-          }
-        }
-      }
-      // console.log('isTop', this.isTop)
-    },
-    end() {
-      let header1Height = 50
-
-      let scroller = this.$refs["scroller"]
-      let wrapper = this.$refs["wrapper"]
-      let header1 = this.$refs["header1"]
-      header1.style.transition = scroller.style.transition = wrapper.style.transition = `all .3s`
-      wrapper.style.transform = `translate3d(0,0,0)`
-      let top = this.$getCss(header1, 'top')
-      if (Math.abs(top) > header1Height / 2) {
-        this.isFixed = false
-        scroller.style.marginTop = '0px'
-        header1.style.top = header1Height + 'px'
-      } else {
-        this.isFixed = true
-        scroller.style.marginTop = header1Height + 'px'
-        header1.style.top = '0px'
-      }
-    },
-    scroll(e) {
-      if (this.isTop) {
-        e.preventDefault();
-      }
-    }
-  }
-}
-</script>
-
-<style scoped lang="less">
-@import "../../assets/scss/index";
-
-#attention {
-  /*background: rgb(22，24，34);*/
-  /*background: #161822;*/
-  //抖音原色，感觉很暗
-  @douyin-bg: #2e3244;
-  background: @douyin-bg;
-  color: #b8b9c1;
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  //overflow: auto;
-
-  .scroller {
-    height: calc(100vh - 5rem);
-    margin-top: 5rem;
-    position: relative;
-    overflow: scroll;
-    background: black;
-
-    > .wrapper {
-      position: absolute;
-      top: -8rem;
-      left: 0;
-      width: 100%;
-      z-index: 2;
-
-      > .header {
-        height: 8rem;
-      }
-    }
-  }
-
-  header {
-    position: absolute;
-    background: @douyin-bg;
-    top: 0;
-    left: 0;
-    width: 100%;
-    font-size: 1.5rem;
-    height: 5rem;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    @arrow-width: 5px;
-
-    .arrow {
-      position: relative;
-      top: 3px;
-      left: 5px;
-      width: 0;
-      height: 0;
-      border-top: @arrow-width solid white;
-      border-right: @arrow-width solid transparent;
-      border-bottom: @arrow-width solid transparent;
-      border-left: @arrow-width solid transparent;
-    }
-  }
-
-  > .ad {
-    padding: 10px;
-    color: white;
-
-    .title {
-      margin-bottom: 15px;
-      font-size: 1.8rem;
-      font-weight: bold;
-    }
-
-    .good-ctn {
-      display: flex;
-      justify-content: space-between;
-
-      .left, .right {
-        width: calc(50% - 3px);
-      }
-
-
-      .left {
-        padding: 10px;
-        box-sizing: border-box;
-        border-radius: 5px;
-        background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
-
-
-        .left-title {
-          font-weight: bold;
-          font-size: 1.7rem;
-          display: flex;
-          align-items: center;
-          margin-bottom: 10px;
-
-          div {
-            background: linear-gradient(to top right, #e37c7c, #bd5959);
-            padding: 0 4px 2px 4px;
-            border-radius: 3px;
-            font-size: 1rem;
-            font-weight: lighter;
-            margin-left: 5px;
-          }
-        }
-
-        .goods {
-          display: flex;
-          justify-content: space-between;
-
-          .good {
-            width: calc(50% - 5px);
-
-            .good-img {
-              width: 100%;
-              height: 50px;
-              border-radius: 5px;
-            }
-
-            .name {
-              margin-top: 5px;
-            }
-
-            .price {
-              font-size: 1rem;
-            }
-          }
-        }
-      }
-
-      .right {
-        .goods {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-
-          .good {
-            height: calc(50% - 3px);
-            border-radius: 5px;
-            box-sizing: border-box;
-            padding: 10px;
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-            background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
-
-            &:nth-child(2) {
-              background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
-            }
-
-            .notice {
-              display: flex;
-              justify-content: center;
-              flex-direction: column;
-
-              .ad-name {
-                font-weight: bold;
-              }
-
-              .ad-desc {
-                font-size: 1rem;
-                color: darkgray;
-              }
-            }
-
-            .good-img {
-              width: 50px;
-              height: 50px;
-              border-radius: 5px;
-            }
-
-
-          }
-        }
-      }
-    }
-  }
-
-  .content {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row;
-    overflow: auto;
-    background: black;
-    box-sizing: border-box;
-    padding: 0 3px;
-
-    > .left, > .right {
-      width: calc(50% - 1.5px);
-    }
-
-    .item {
-      width: 100%;
-      box-sizing: border-box;
-      margin-bottom: 3px;
-
-      .wrapper {
-        position: relative;
-
-        .poster {
-          width: 100%;
-          max-height: 50vh;
-          display: block;
-        }
-
-        .author {
-          position: absolute;
-          border-radius: 50%;
-          height: 3rem;
-          bottom: 1rem;
-          left: 1rem;
-        }
-
-        .live {
-          position: absolute;
-          padding: .2rem .5rem;
-          border-radius: .2rem;
-          top: 1rem;
-          left: 1rem;
-          color: white;
-          background: @primary-btn-color;
-        }
-      }
-
-      .location {
-        padding: 8px 10px 10px 10px;
-        background: @douyin-bg;
-
-        .top, .bottom {
-          font-size: 1.4rem;
-          display: flex;
-          align-items: center;
-
-          .logo {
-            height: 12px;
-            width: 12px;
-            margin-right: 8px;
-          }
-
-          .name {
-            color: white;
-          }
-
-          .line {
-            margin: 0 4px;
-            width: 1px;
-            height: .8rem;
-            background: gray;
-          }
-        }
-
-        .bottom {
-          margin-top: 2px;
-          font-size: 1rem;
-        }
-      }
-
-      .ranking-list {
-        padding: 2rem 1rem;
-        background: @douyin-bg;
-
-        .desc {
-          .top {
-            margin-bottom: .2rem;
-            display: flex;
-            align-items: center;
-            font-size: 1.4rem;
-
-            .logo {
-              margin-right: .5rem;
-              height: 1.4rem;
-            }
-
-            .name {
-              //background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
-            }
-          }
-        }
-
-        .ads {
-          font-size: 1.2rem;
-
-          .ad {
-            background: @second-btn-color;
-            display: flex;
-            margin-top: 1rem;
-
-            .left {
-              margin-right: 1rem;
-
-              .ad-logo {
-                height: 4rem;
-                width: 4rem;
-              }
-            }
-
-            .right {
-              display: flex;
-              flex-direction: column;
-              justify-content: center;
-
-              .rank {
-                color: @second-text-color;
-                margin-bottom: .2rem;
-              }
-            }
-          }
-        }
-
-      }
-    }
-  }
-}
-
-</style>

src/router/index.js

@@ -42,7 +42,6 @@ import PasswordLogin from "../pages/login/PasswordLogin";
 import VerificationCode from "../pages/login/VerificationCode";
 import RetrievePassword from "../pages/login/RetrievePassword";
 import Help from "../pages/login/Help";
-import Attention2 from "../pages/home/Attention2";
 
 const routes = [
   // {path: '', component: Music},
@@ -50,7 +49,6 @@ const routes = [
   {path: '/', component: Index2},
   {path: '/home', component: Index},
   {path: '/attention', component: Attention},
-  // {path: '/attention', component: Attention2},
   {path: '/publish', component: Publish},
   {path: '/test', component: Test},
   {path: '/message', component: Message},