样式有变化

src/components/activityCard.vue

@@ -1,11 +1,11 @@
 <template>
-  <view class="activity-card-main u-flex u-col-bottom"
+  <view class="activity-card-main u-flex u-col-top"
         @click.stop="clickCard">
     <image class="card-image"
            lazy-load
            :src="value.imgs | imgFilter(2)"
            mode="aspectFill"></image>
-    <view class="u-flex-1 u-m-l-16 u-p-t-8">
+    <view class="u-flex-1 u-m-l-16 u-p-t-4">
       <view class="card-title u-font-28 bold u-line-1">{{value.title}}</view>
       <view class="card-desc u-flex u-content-color u-m-t-4 u-m-b-12">
         <view>平台：{{value.plat_type | platFilter}}</view>

src/pages/index.vue

@@ -28,23 +28,21 @@
         <activity-flow></activity-flow>
       </view>
     </view>
-    <view class="index-body u-m-t-56">
+    <view class="nav-title u-font-32 bold line-44 u-text-center"
+          :style="{
+            height: `${navTitleStyle.height}rpx`,
+            opacity: navTitleStyle.opacity
+      }">
+      首页
+    </view>
+    <view class="index-body">
       <u-sticky :enable="enable"
-                offset-top="0"
+                :offset-top="navTitleStyle.height"
                 h5-nav-height="0"
                 @fixed="stickyFixed"
                 @unfixed="unStickyFixed">
         <!-- 只能有一个根元素 -->
         <view class="sticky">
-          <view class="nav-title u-font-32 bold line-44 u-text-center"
-                :style="{
-              paddingTop: `${navTitleStyle.paddingTop}rpx`,
-              lineHeight: `${navTitleStyle.lineHeight}rpx`,
-              fontSize: `${navTitleStyle.fontSize}rpx`,
-              opacity: navTitleStyle.opacity
-            }">
-            首页
-          </view>
           <view class="index-tabs u-flex u-col-bottom u-row-between">
             <u-tabs :is-scroll="false"
                     :list="tabList"
@@ -71,8 +69,7 @@
         </view>
       </u-sticky>
       <block v-if="isLocation">
-        <view class="activity-list"
-              :style="{paddingTop: `${activityListPT}rpx`}">
+        <view class="activity-list">
           <block v-if="activityList.length !== 0">
             <view class="activity-card u-border-bottom"
                   v-for="(item, index) in activityList"
@@ -117,8 +114,7 @@ export default {
       isSticky: false,
       firstHeight: 568,
       navTitleStyle: {
-        paddingTop: 0,
-        paddingBottom: 0,
+        height: 0,
         lineHeight: 0,
         fontSize: 0,
         opacity: 0
@@ -231,8 +227,7 @@ export default {
       this.isSticky = true
       this.firstHeight = 0
       this.navTitleStyle = {
-        paddingTop: this.navHeight,
-        paddingBottom: 30,
+        height: this.navHeight + 44,
         lineHeight: 44,
         fontSize: 32,
         opacity: 1
@@ -243,8 +238,7 @@ export default {
       this.isSticky = false
       this.firstHeight = 568
       this.navTitleStyle = {
-        paddingTop: 0,
-        paddingBottom: 0,
+        height: 0,
         lineHeight: 0,
         fontSize: 0,
         opacity: 0
@@ -303,11 +297,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.nav-title {
+  box-sizing: border-box;
+  z-index: 200;
+  position: sticky;
+  top: 0;
+  display: table-cell;
+  vertical-align: bottom;
+  width: 100vw;
+  background-color: #fff;
+  transition: opacity .1s;
+}
 .index-main {
   .first {
     height: 540px;
     opacity: 1;
-    transition: all 1s;
+    transition: height .4s;
   }
   .hidden-first {
     height: 0;
@@ -317,12 +322,12 @@ export default {
     height: 314px;
     background: url('~@/static/common/bg_sy.png') no-repeat center top;
     background-size: cover;
-    transition: height 2s;
+    transition: height .1s;
     .index-banner {
       position: relative;
       margin: 0 auto;
       width: 694px;
-      transition: width 2s;
+      transition: width .1s;
       .index-logo {
         margin-bottom: 40px;
         padding-top: 6px;
@@ -347,16 +352,12 @@ export default {
     background-color: #fff;
     .sticky {
       background-color: #fff;
-      .nav-title {
-        box-sizing: border-box;
-        padding-bottom: 0;
-        transition: padding 1s;
-      }
     }
     .no-location,
     .activity-list {
+      box-sizing: border-box;
       padding: 0 28px;
-      min-height: 100vh;
+      min-height: 101vh;
       background-color: #fff;
       .activity-card {
         padding: 32px 0;