beizhu

src/components/music.vue

       yttjmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
       yjsmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_close.png',
       audioPlayShow: true,
-      actid: this.$route.query.actid
     };
   },
   methods: {
     width: 0.24rem;
     height: 0.24rem;
     border-radius: 50%;
+    z-index: 10;
 
     .play {
       width: 100%;

src/views/vote/list.vue

 <template>
   <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
     <img class="BannerImage" :src="activity.Banner">
-    <div :class="isOK?searchs:searchb">
-      <input placeholder="输入编号或姓名" v-model="q">
-      <img class="IconSearch" :src="IconSearch" @click="search">
-      <!-- <i class="iconfont icon-sousuo3 IconSearch"></i> -->
+    <div :class="IsOk?onscroll1:onscroll2">
+      <div :class="isOK?searchs:searchb">
+        <input placeholder="输入编号或姓名" v-model="q">
+        <img class="IconSearch" :src="IconSearch" @click="search">
+        <!-- <i class="iconfont icon-sousuo3 IconSearch"></i> -->
+      </div>
     </div>
     <img class="informationimg" :src="activity.Desc">
     <span class="box"></span>
             <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
               <div class="LatestUpload">
                 <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
-                  <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
+                  <div
+                    :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+                    @click="gotovotingdetails(item.MemberId)"
+                  >
                     <img :src="item.Photo">
                   </div>
                   <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
           <van-tab title="TOP50">
             <div class="LatestUpload">
               <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
-                <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
+                <div
+                  :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2"
+                  @click="gotovotingdetails(item.MemberId)"
+                >
                   <img :src="item.Photo">
                 </div>
                 <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
   data() {
     return {
       // AudioPlay: ''
-      signupBtn:true,
-      signupBtnOne:"signupBtnOne",
-      signupBtnTwo:"signupBtnTwo",
-      VoteBtn1:'VoteBtn1',
-      VoteBtn2:'VoteBtn2',
-      ballot1:'ballot1',
-      ballot2:'ballot2',
+      signupBtn: true,
+      signupBtnOne: "signupBtnOne",
+      signupBtnTwo: "signupBtnTwo",
+      VoteBtn1: "VoteBtn1",
+      VoteBtn2: "VoteBtn2",
+      ballot1: "ballot1",
+      ballot2: "ballot2",
       coverImgUrl: true,
       isOK: true,
+      IsOk:true,
       searchs: "searchs",
       searchb: "searchb",
-      ActivePersonnelBox1:'ActivePersonnelBox1',
-      ActivePersonnelBox2:'ActivePersonnelBox2',
+      onscroll1:'onscroll1',
+      onscroll2:'onscroll2',
+      ActivePersonnelBox1: "ActivePersonnelBox1",
+      ActivePersonnelBox2: "ActivePersonnelBox2",
       BgImg,
       BgImage,
       IconSearch:
     console.log(this.actid);
     if (this.actid == 1) {
       this.coverImgUrl = true;
-      this.signupBtn =true;
+      this.signupBtn = true;
       this.isOK = true;
     } else if (this.actid == 2) {
       this.coverImgUrl = false;
-      this.signupBtn=false;
+      this.signupBtn = false;
       this.isOK = false;
     }
     this.getActivity({
     this.toplist();
   },
   methods: {
-    // handleScroll() {
-    //   // 页面滚动距顶部距离
-    //   var scrollTop =
-    //     window.pageYOffset ||
-    //     document.documentElement.scrollTop ||
-    //     document.body.scrollTop;
-    //   if (scrollTop >= 280) {
-    //     this.isOK = false;
-    //   } else {
-    //     this.isOK = true;
-    //   }
-    // },
+    handleScroll() {
+      // 页面滚动距顶部距离
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+      if (scrollTop >= 269) {
+        this.IsOk = false;
+      } else {
+        this.IsOk = true;
+      }
+    },
 
     ...mapactivityActions(["getList", "getTopList", "getActivity", "vote"]),
     newlist() {
     width: 100%;
     height: 3.4rem;
   }
-  .searchb {
+
+  .onscroll1 {
     width: 90%;
     height: 0.44rem;
-    background-color: rgba(118,89,81,1);
-    border-radius: 0.22rem;
-    border: 0.01rem solid rgba(255, 255, 255, 1);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     position: absolute;
     top: 2.8rem;
     left: calc(5%);
 
-    input {
-      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
-      background-color: rgba(255, 255, 255, 0);
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
-      width: 5rem;
-      text-indent: 0.1rem;
-    }
-    input::-webkit-input-placeholder {
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
+    .searchb {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(118, 89, 81, 1);
+      border-radius: 0.22rem;
+      border: 0.01rem solid rgba(255, 255, 255, 1);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      input {
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+        background-color: rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+        width: 5rem;
+        text-indent: 0.1rem;
+      }
+      input::-webkit-input-placeholder {
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+      }
+      .IconSearch {
+        width: 0.2rem;
+        height: 0.2rem;
+        margin-right: 0.1rem;
+      }
     }
-    .IconSearch {
-      width: 0.2rem;
-      height: 0.2rem;
-      margin-right: 0.1rem;
+  }
+
+ .onscroll2 {
+    width: 90%;
+    height: 0.44rem;
+    position: fixed;
+    top: 0.11rem;
+    left: calc(5%);
+
+    .searchb {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(118, 89, 81, 1);
+      border-radius: 0.22rem;
+      border: 0.01rem solid rgba(255, 255, 255, 1);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      input {
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+        background-color: rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+        width: 5rem;
+        text-indent: 0.1rem;
+      }
+      input::-webkit-input-placeholder {
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+      }
+      .IconSearch {
+        width: 0.2rem;
+        height: 0.2rem;
+        margin-right: 0.1rem;
+      }
     }
   }
-  .searchs {
+
+  .onscroll1 {
     width: 93%;
     height: 0.44rem;
-    background-color: rgba(201, 214, 224, 1);
-    border-radius: 0.06rem;
-    border: 0.01rem solid rgba(255, 255, 255, 1);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
     position: absolute;
     top: 2.8rem;
     left: calc(3.1%);
 
-    input {
-      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
-      background-color: rgba(255, 255, 255, 0);
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
-      width: 5rem;
-      text-indent: 0.1rem;
-    }
-    input::-webkit-input-placeholder {
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
-    }
+    .searchs {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(201, 214, 224, 1);
+      border-radius: 0.06rem;
+      border: 0.01rem solid rgba(255, 255, 255, 1);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      input {
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+        background-color: rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+        width: 5rem;
+        text-indent: 0.1rem;
+      }
+      input::-webkit-input-placeholder {
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+      }
 
-    .IconSearch {
-      width: 0.2rem;
-      height: 0.2rem;
-      margin-right: 0.1rem;
+      .IconSearch {
+        width: 0.2rem;
+        height: 0.2rem;
+        margin-right: 0.1rem;
+      }
     }
   }
 
-  #searchone{
-
-    .searchs {
+  .onscroll2 {
     width: 93%;
     height: 0.44rem;
-    background-color: rgba(201, 214, 224, 1);
-    border-radius: 6px;
-    border: 0.01rem solid rgba(255, 255, 255, 1);
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    position: absolute;
-    top: 2.8rem;
+    position: fixed;
+    top: 0.11rem;
     left: calc(3.1%);
 
-    input {
-      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
-      background-color: rgba(255, 255, 255, 0);
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
-      width: 5rem;
-      text-indent: 0.1rem;
-    }
-    input::-webkit-input-placeholder {
-      color: rgba(255, 255, 255, 1);
-      font-size: 0.16rem;
-      font-family: PingFangSC-Regular;
-      font-weight: 400;
-      line-height: 0.22rem;
-    }
+    .searchs {
+      width: 100%;
+      height: 100%;
+      background-color: rgba(201, 214, 224, 1);
+      border-radius: 0.06rem;
+      border: 0.01rem solid rgba(255, 255, 255, 1);
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      input {
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+        background-color: rgba(255, 255, 255, 0);
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+        width: 5rem;
+        text-indent: 0.1rem;
+      }
+      input::-webkit-input-placeholder {
+        color: rgba(255, 255, 255, 1);
+        font-size: 0.16rem;
+        font-family: PingFangSC-Regular;
+        font-weight: 400;
+        line-height: 0.22rem;
+      }
 
-    .IconSearch {
-      width: 0.2rem;
-      height: 0.2rem;
-      margin-right: 0.1rem;
+      .IconSearch {
+        width: 0.2rem;
+        height: 0.2rem;
+        margin-right: 0.1rem;
+      }
     }
   }
 
-  }
   .informationimg {
     width: 97%;
     height: 6.24rem;
               border-radius: 0.1rem;
             }
           }
- .ActivePersonnelBox2 {
+          .ActivePersonnelBox2 {
             width: 90%;
             height: 1.83rem;
             border-radius: 0.15rem;
             margin-bottom: 0.11rem;
-            border: 0.04rem solid rgba(126,100,86,1);
+            border: 0.04rem solid rgba(126, 100, 86, 1);
 
             img {
               width: 100%;
           .ballot2 {
             position: absolute;
             top: 0;
-            background: rgba(126,100,86,1);
+            background: rgba(126, 100, 86, 1);
             border-radius: 0 0 0.08rem 0.08rem;
             padding: 0.02rem 0.12rem;
             font-size: 0.14rem;
             line-height: 0.2rem;
             margin-bottom: 0.14rem;
           }
-          .VoteBtn2{
+          .VoteBtn2 {
             width: 56%;
             height: 0.23rem;
             border-radius: 0.25rem;
-            background-color: rgba(126,100,86,1);
+            background-color: rgba(126, 100, 86, 1);
             border: none;
             font-size: 0.14rem;
             font-family: PingFangSC-Medium;
       }
     }
   }
-  .signupBtnOne{
-     width: 91%;
+  .signupBtnOne {
+    width: 91%;
     height: 0.5rem;
     border-radius: 0.25rem;
     background: rgba(166, 184, 201, 1);
     bottom: 0.19rem;
     left: calc(4.25%);
   }
-  .signupBtnTwo{
-     width: 91%;
+  .signupBtnTwo {
+    width: 91%;
     height: 0.5rem;
     border-radius: 0.25rem;
-    background: rgba(173,145,129,1);
+    background: rgba(173, 145, 129, 1);
     border: none;
     font-size: 0.2rem;
     font-family: PingFangSC-Medium;
     bottom: 0.19rem;
     left: calc(4.25%);
   }
-  // .signupBtn {
-  //   width: 91%;
-  //   height: 0.5rem;
-  //   border-radius: 0.25rem;
-  //   background: rgba(166, 184, 201, 1);
-  //   border: none;
-  //   font-size: 0.2rem;
-  //   font-family: PingFangSC-Medium;
-  //   font-weight: bold;
-  //   color: rgba(255, 255, 255, 1);
-  //   line-height: 0.28rem;
-  //   position: fixed;
-  //   bottom: 0.19rem;
-  //   left: calc(4.25%);
-  // }
 }
 </style>