首页滚动

src/components/home/Banner.vue

 <template>
-  <div class="home-banner">
+  <div class="home-banner relative">
     <template v-if="!scrollHide">
       <div class="mt-6 w-full flex justify-center" :class="{ 'mb-8': !showBtn, 'opacity-0': scrollHide }">
         <img class="w-60" src="@/assets/home/banner-img.png" alt="">
       </div>
-      <div v-if="showBtn" class="w-full flex flex-col items-center justify-center" :class="{ 'opacity-0': scrollHide }" :style="{ 'height': showBtn ? 'auto' : '' }">
+      <div v-if="showBtn" class="w-full mb-12 flex flex-col items-center justify-center" :class="{ 'opacity-0': scrollHide }" :style="{ 'height': showBtn ? 'auto' : '' }">
         <button
           v-if="canAttend"
           class="apply-btn text-center text-xs font-medium rounded mt-2 mb-4"
@@ -13,12 +13,12 @@
         <p v-if="voteType === 1" class="text-center text-sm mb-3">距离本轮投票开始还有约</p>
         <p v-if="voteType === 2" class="text-center text-sm mb-3">距离本轮投票结束还剩约</p>
         <p v-if="voteType === 3" class="text-center text-sm mb-3">本轮投票已结束</p>
-        <div class="px-8">
+        <div class="px-10">
           <Timebox times="1633304684145" />
         </div>
       </div>
     </template>
-    <div v-if="showBtn" class="mt-3 w-full px-6" :class="[ scrollHide ? 'mt-16' : '' ]">
+    <div v-if="showBtn" class="mt-3 w-full px-6 absolute bottom-0" :class="[ scrollHide ? 'mt-16' : '' ]">
       <Input class="xs-input" placeholder="请输入社区名称/ID" @pressEnter="search">
         <div slot="addonAfter" @click="search">
           <app-icon customize size="20px" type='icon-sousuo'></app-icon>

src/components/home/RankList.vue

@@ -4,15 +4,12 @@
       <div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
         <p class="text-center text-lg leading-10">排行榜</p>
       </div>
-      <div class="lines border-2 border-app-blue-3 border-solid rounded-lg" ref="lines" @scroll="scrollEvent">
-        <div class="rank-lines px-3 flex flex-col items-center" style="background: rgb(25, 2, 92)">
+      <div class="lines border-2 border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines" @scroll="scrollEvent">
+        <div class="rank-lines h-full pt-10 px-3 flex flex-col items-center">
           <template v-if="ranklist.length > 0" class="">
-            <div class=" pt-10">
-              <router-link class="block text-white" v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}">
-                <Cardtwo class="mb-2.5" />
-              </router-link>
-            </div>
-            
+            <router-link class="block text-white" v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}">
+              <Cardtwo class="mb-2.5" />
+            </router-link>
           </template>
           <div v-else class="w-full h-full flex flex-col items-center justify-center">
             <img class="w-28 h-28" src="@/assets/home/empty.png" alt="empty">

src/views/home/index.vue

@@ -44,22 +44,7 @@ export default Vue.extend({
         },
         {
           id: 6
-        },
-        {
-          id: 7
-        },
-        {
-          id: 8
-        },
-        {
-          id: 9
-        },
-        {
-          id: 11
-        },
-        {
-          id: 12
-        },
+        }
       ]
     };
   },