init

components/report/timeLine.vue

@@ -0,0 +1,231 @@
+<template>
+  <view class="time-line">
+    <view class="line-item" v-for="(item, index) in dataList" :key="index" @click="goDetailFromTimeLine(item, index)">
+      <view class="time">{{ item.date }}</view>
+      <view class="content" v-if="item.Content.length">
+        <text class="content-reg" v-if="item.IsRed"></text>
+        <rich-text :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }" :data-index="index" :class="['rich-text', item.isExpand && 'expand']" :nodes="item.Content"> </rich-text>
+        <view class="expan-btn" :class="{ pos: !item.isExpand }" @click.stop="handleExpand(item, index)" v-if="item.isShowBtn">{{ item.isExpand ? "收起" : "展开" }}</view>
+      </view>
+      <view class="title" v-else>
+        <text class="content-reg" v-if="item.IsRed"></text>
+        {{ item.Title }}</view
+      >
+    </view>
+    <view v-show="loadTimeLine" class="loadTimeLine"></view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "",
+  components: {},
+  props: {
+    dataList: {
+      type: Array,
+      default: [],
+    },
+  },
+  data() {
+    return {
+      richTextHeight: 10000,
+      loadTimeLine: false, //时间线的遮罩
+    };
+  },
+  computed: {},
+  watch: {},
+  created() {},
+  mounted() {},
+  methods: {
+    async goDetailFromTimeLine(item, index) {
+      if (item.Content.length !== 0) return;
+      await this.$store.dispatch("checkHandle");
+      if (!this.$store.state.isAuth && !this.$store.state.isBind) {
+        // 已授权已绑定
+        if (item.SubCategoryName === "路演精华") {
+          //跳转路演精华
+          uni.navigateTo({
+            url: "/reportPages/roadEssence/roadEssence?id=" + item.Id,
+          });
+        } else {
+          this.$emit("setRouter");
+          uni.navigateTo({
+            url: "/pageMy/reportDetail/reportDetail?id=" + item.Id,
+          });
+        }
+      }
+    }, //展开收起晨会内容
+    // 去往文章详情的
+    handleExpand(item, index) {
+      this.getRecordTracking("展开收起", { Id: item.Id });
+      item.isExpand = !item.isExpand;
+      this.$parent.timeLine.splice(index, 1, item);
+    },
+    getConentsHeight() {
+      const query = wx.createSelectorQuery().in(this);
+      query.selectAll(".rich-text").boundingClientRect();
+      query.exec((res) => {
+        //根据timeLine的第一项确定当前手机三行文字的高度
+        const standardHeight = res[0][0].height;
+        this.richTextHeight = standardHeight;
+        res[0].forEach((item) => {
+          let temp = this.$parent.timeLine[item.dataset.index];
+          //超过这个高度的,需要显示展开/收起按钮
+          if (item.height > standardHeight) {
+            temp.isExpand = false;
+            temp.isShowBtn = true;
+          } else {
+            temp.isExpand = true;
+            temp.isShowBtn = false;
+          }
+        });
+        //然后把timeLine的第一项扔掉
+        this.$parent.timeLine.shift();
+        this.loadTimeLine = false;
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.time-line {
+  padding: 30rpx 40rpx 20rpx 40rpx;
+  min-height: calc(100vh - 190rpx);
+  background-color: #ffffff;
+  position: relative;
+  .loadTimeLine {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+    background-color: #fff;
+    z-index: 6;
+  }
+  .line-item {
+    position: relative;
+    padding: 0 0 50rpx 40rpx;
+    /* border-left:1rpx solid #DAE9FD; */
+    &:last-child {
+      padding-bottom: 0;
+      &::after {
+        height: calc(100% - 25rpx);
+      }
+    }
+    &:first-child {
+      .time {
+        &::after {
+          background-color: #3385ff;
+        }
+      }
+    }
+    &::before,
+    &::after {
+      position: absolute;
+      content: "";
+    }
+    &::before {
+      width: 24rpx;
+      height: 24rpx;
+      background-color: #dae9fd;
+      z-index: 1;
+      left: 0;
+      top: 27rpx;
+      transform: translate(-50%, -50%);
+      border-radius: 50%;
+    }
+    &::after {
+      top: 17rpx;
+      left: 0;
+      width: 1rpx;
+      height: calc(100%);
+      background-color: #dae9fd;
+      z-index: 2;
+    }
+    .time {
+      width: 245rpx;
+      height: 55rpx;
+      text-align: center;
+      line-height: 45rpx;
+      padding: 5rpx 20rpx;
+      background-color: #f5f9ff;
+      border-radius: 64rpx;
+      color: #5181c9;
+      font-size: 32rpx;
+      margin-bottom: 20rpx;
+      position: relative;
+      &::before,
+      &::after {
+        position: absolute;
+        content: "";
+        left: -36rpx;
+        top: 27rpx;
+        width: 24rpx;
+        height: 1rpx;
+        background-color: #dae9fd;
+        z-index: 1;
+      }
+      &::after {
+        left: -40rpx;
+        top: 27rpx;
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        background-color: #9dc5ff;
+        z-index: 3;
+      }
+    }
+    .content {
+      color: #666666;
+      position: relative;
+      .rich-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: justify;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        position: relative;
+        &.expand {
+          -webkit-line-clamp: 999;
+          height: auto;
+        }
+      }
+      .expan-btn {
+        color: #2c83ff;
+        text-align: right;
+        &.pos {
+          padding: 0 0 0 40rpx;
+          background-color: rgba(255, 255, 255, 0.882);
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+      .content-reg {
+        position: absolute;
+        top: 10rpx;
+        left: -20rpx;
+        width: 14rpx;
+        height: 14rpx;
+        background-color: #ff0000;
+        border-radius: 50%;
+      }
+    }
+    .title {
+      position: relative;
+      color: #3385ff;
+      .content-reg {
+        position: absolute;
+        top: 10rpx;
+        left: -20rpx;
+        width: 14rpx;
+        height: 14rpx;
+        background-color: #ff0000;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>

pages/reportForm/components/strategy.vue

@@ -94,7 +94,7 @@ export default {
           this.getCollectList();
         }
       },
-      // immediate:true
+      immediate:true
     },
     pageNumFather: {
       handler() {
@@ -107,9 +107,6 @@ export default {
     },
   },
   mounted() {
-    if (this.tabAct_idTwo) {
-      this.getCollectList();
-    }
   },
   methods: {
     /* 获取列表 */

pages/reportForm/reportForm.vue

@@ -29,16 +29,23 @@
         </block>
       </view>
       <view class="row"> </view>
-      <!-- 子组件 -->
-      <strategy
-        :strategyIndexTwo="strategyIndexTwo"
-        :pageNumFather="pageNumFather"
-        :matchTypeName="matchTypeName"
-        :tabAct_idTwo="tabAct_idTwo"
-        :isNum="isNum"
-        :isSwitchover="isSwitchover"
-        @hideIsred="hideIsred"
-      />
+      <block v-if="tabAct_idTwo !== 99999">
+        <!-- 子组件 -->
+        <strategy
+          :strategyIndexTwo="strategyIndexTwo"
+          :pageNumFather="pageNumFather"
+          :matchTypeName="matchTypeName"
+          :tabAct_idTwo="tabAct_idTwo"
+          :isNum="isNum"
+          :isSwitchover="isSwitchover"
+          @hideIsred="hideIsred"
+        />
+      </block>
+      <!-- 时间线 -->
+      <block v-if="tabAct_idTwo === 99999">
+        <time-line ref="timeChild" :dataList="timeLine" @setRouter="setRouter" />
+        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" v-if="totalPage > 1" />
+      </block>
     </view>
     <!-- </view> -->
     <view class="industrial_eport_one" v-else>
@@ -157,6 +164,7 @@ import freeCharge from "@/components/freeCharge";
 import videoModule from "@/components/videoModule/index";
 import modalDialog from "@/components/modalDialog.vue";
 import SearchBar from "@/components/search-bar/searchBar.vue";
+import TimeLine from "@/components/report/timeLine.vue";
 
 import { Reports } from "@/config/api.js";
 let app = getApp();
@@ -167,6 +175,7 @@ export default {
     videoModule,
     modalDialog,
     SearchBar,
+    TimeLine,
   },
   data() {
     return {
@@ -212,6 +221,13 @@ export default {
       jurisdictionList: {},
       hasPermission: "", //权限
       labelListData: [],
+      timeLine: [], //时间线数据
+      mockTimeLine: [
+        {
+          date: "不重要",
+          Content: "<p>hello,world</p><p>hello,world</p><p>hello,world</p>",
+        }, //第一项是为了获取当前手机下,三行是多少相对高度
+      ],
     };
   },
   onLoad(option) {
@@ -225,6 +241,12 @@ export default {
       },
       immediate: true,
     },
+    tabAct_idTwo: {
+      handler(newVal) {
+          newVal == 99999 && this.getTimeLineList();
+      },
+      immediate: true,
+    },
   },
   methods: {
     //获取一级事件
@@ -247,6 +269,12 @@ export default {
       Reports.getstrategyAll({
         ChartPermissionId: this.tabAct_id,
       }).then((res) => {
+        res.Data.List.unshift({
+          CategoryId: 99999,
+          IsRed: false,
+          MatchTypeName: "时间线",
+          SubCategoryName: "时间线",
+        });
         this.tabBarsTow = res.Data.List;
         if (!this.tabAct_idTwo) {
           this.tabAct_idTwo = res.Data.List[0].CategoryId;
@@ -268,7 +296,7 @@ export default {
           ChartPermissionId: Number(this.tabAct_id),
         });
         this.getHomeStockName();
-        this.pageNum = 1;
+        this.page_no = 1;
         uni.pageScrollTo({
           scrollTop: 0,
           duration: 0,
@@ -284,7 +312,7 @@ export default {
       this.strategyIndexTwo = index;
       if (this.tabAct_idTwo !== item.CategoryId) {
         this.tabAct_idTwo = item.CategoryId;
-        this.pageNum = 1;
+        this.page_no = 1;
         uni.pageScrollTo({
           scrollTop: 0,
           duration: 0,
@@ -392,6 +420,52 @@ export default {
     hideIsred(is) {
       this.tabBarsTow[this.strategyIndexTwo].IsRed = is;
     },
+    // h获取时间线
+    getTimeLineList() {
+      Reports.getArticleList({
+        PageSize: this.pageSize,
+        CurrentIndex: this.page_no,
+        CategoryId: 99999,
+        IndustrialManagementId: 63,
+      }).then((res) => {
+        if (res.Ret === 200) {
+          this.$refs.timeChild.loadTimeLine = true;
+          this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
+          this.totalPage = res.Data.Paging.Pages;
+          let list = res.Data.List || [];
+          list = list.map((item) => {
+            let temp = item;
+            temp.date = item.PublishTime.split(" ")[0];
+            if (item.Content.length) {
+              temp.isExpand = true;
+              temp.isShowBtn = true;
+            }
+            return temp;
+          });
+          if (this.page_no === 1) {
+            this.timeLine = list;
+            this.haveData = this.timeLine.length ? true : false;
+            if (this.refresh) {
+              uni.stopPullDownRefresh();
+              this.refresh = false;
+            }
+          } else {
+            this.timeLine = this.timeLine.concat(list);
+          }
+        }
+        this.timeLine.unshift(this.mockTimeLine[0]);
+        //在获取高度前把所有的晨会展开,收起的话无法获取正确高度
+        this.timeLine.forEach((item) => {
+          if (item.Content.length) {
+            item.isExpand = true;
+            item.isShowBtn = true;
+          }
+        });
+        setTimeout(() => {
+          this.$refs.timeChild.getConentsHeight();
+        }, 0);
+      });
+    },
     /* 搜索 */
     async goSearch() {
       await this.$store.dispatch("checkHandle", "/pages-search/indedxSearch/indedxSearch?id=报告" + "&source=深度研究页面");
@@ -495,19 +569,19 @@ export default {
   },
   /* 触底 */
   onReachBottom: Throttle(function () {
-    if (this.strategyIndex == 4) {
+    if (this.strategyIndex == 4 && this.tabAct_idTwo != 99999) {
       this.isNum++;
       return;
     }
     if (this.status === "nomore") return;
     this.status = "loading";
     this.page_no++;
-    this.getIndustryList();
+    this.tabAct_idTwo != 99999 ? this.getIndustryList() : this.getTimeLineList();
   }),
   /* 下拉刷新 */
   onPullDownRefresh: Throttle(function () {
     if (this.strategyIndex == 4) {
-      this.pageNumFather = 1;
+      this.tabAct_idTwo != 99999 ? (this.pageNumFather = 1) : this.getTimeLineList();
     } else {
       this.industryList = [];
       this.pageNumFather = null;

reportPages/IndustryReport/IndustryReport.vue

@@ -1,41 +1,27 @@
 <template>
   <view class="container industry-content" id="industry-content">
-    <view v-if="haveData">
-      <is-track-follow
-        class="is-track-follow"
-        style="z-index: 100"
-        :isShowFollowButton.sync="dataFollow.IsShowFollowButton"
-        source="resources"
-        :sourceId="industrialManagementId"
-        :isFollowData.sync="dataFollow.IsFollowButton"
-      />
-      <view class="content-top">
-        <view class="top-bg" :style="{ top: dataFollow.IsShowFollowButton ? '60rpx' : 0 }">
-          <!-- 详情封面图 -->
-          <image :src="industryVideo.DetailImgUrl" class="industry-video-poster" v-show="industryVideo.Id && industryVideo.DetailImgUrl && !havePlayed" @click="handelVideoPlay"></image>
-          <!-- 视频 -->
-          <video :src="industryVideo.ResourceUrl" class="industry-video" id="industry-video" v-show="industryVideo.ResourceUrl && (havePlayed || !industryVideo.DetailImgUrl)" controls></video>
-          <view class="top-bg-title" :style="{ height: industryVideo.Id ? '70rpx' : '99rpx', 'background-color': industryVideo.Id ? 'white' : '#d1ebff' }">产业赛道布局于{{ layoutTime }}</view>
-        </view>
-        <!-- industryVideo.ResourceUrl -- 视频url -->
-        <view class="top-box" :style="{ top: industryVideo.Id ? '418rpx' : dataFollow.IsShowFollowButton ? '159rpx' : '99rpx' }">
-          <view class="top-tab-cont">
-            <view class="tab-cont">
-              <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-into-view="'_' + tabIndex">
-                <block v-for="(item, index) in tabBars" :key="item.CategoryId">
-                  <view :id="'_' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.CategoryId }" @click.stop="toggleTab(item, index)">
-                    {{ item.MatchTypeName }}
-                    <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/border_act.png" mode="" class="border_act" v-if="tabAct_id == item.CategoryId"></image>
-                    <text class="reg-hint" v-if="item.IsRed"></text>
-                  </view>
-                </block>
-              </scroll-view>
+    <block v-if="haveData">
+      <view class="is-track-follow" v-if="dataFollow.IsShowFollowButton">
+        <is-track-follow :isShowFollowButton="dataFollow.IsShowFollowButton" source="resources" :sourceId="industrialManagementId" :isFollowData.sync="dataFollow.IsFollowButton" />
+      </view>
+      <view class="top-video-content">
+        <!-- 详情封面图 -->
+        <image :src="industryVideo.DetailImgUrl" class="industry-video-poster" v-show="industryVideo.Id && industryVideo.DetailImgUrl && !havePlayed" @click="handelVideoPlay"></image>
+        <!-- 视频 -->
+        <video :src="industryVideo.ResourceUrl" class="industry-video" id="industry-video" v-show="industryVideo.ResourceUrl && (havePlayed || !industryVideo.DetailImgUrl)" controls></video>
+      </view>
+      <view class="title-tabs-content" :style="{ top: dataFollow.IsShowFollowButton ? '60rpx' : 0 }">
+        <view class="top-bg-title">产业赛道布局于{{ layoutTime }}</view>
+        <view class="tab-content">
+          <block v-for="(item, index) in tabBars" :key="item.CategoryId">
+            <view :id="'__' + index" class="scroll-tab-item" :class="{ active: tabAct_id == item.CategoryId }" @click.stop="toggleTab(item, index)">
+              {{ item.MatchTypeName }}
+              <text class="reg-text" v-if="item.IsRed"></text>
             </view>
-            <view class="lucency" v-if="tabBars.length > 6"></view>
-          </view>
+          </block>
         </view>
       </view>
-      <view class="collect-ul" :style="{ 'padding-top': industryVideo.ResourceUrl || industryVideo.Id ? '540rpx' : dataFollow.IsShowFollowButton ? '270rpx' : '210rpx' }">
+      <view class="collect-ul">
         <!-- 其他tab -->
         <block v-if="tabAct_id !== 99999">
           <view class="collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item, index)">
@@ -48,30 +34,14 @@
             </view>
             <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
           </view>
-          <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1 && tabAct_id !== 99999" />
         </block>
         <!-- 时间线 -->
         <block v-if="tabAct_id === 99999">
-          <view class="time-line">
-            <view class="line-item" v-for="(item, index) in timeLine" :key="index" @click="goDetailFromTimeLine(item, index)">
-              <view class="time">{{ item.date }}</view>
-              <view class="content" v-if="item.Content.length">
-                <text class="content-reg" v-if="item.IsRed"></text>
-                <rich-text class="rich-text" :style="{ height: item.isExpand ? 'auto' : richTextHeight + 'px' }" :data-index="index" :class="{ expand: item.isExpand }" :nodes="item.Content">
-                </rich-text>
-                <view class="expan-btn" :class="{ pos: !item.isExpand }" @click="handleExpand(item, index)" v-if="item.isShowBtn">{{ item.isExpand ? "收起" : "展开" }}</view>
-              </view>
-              <view class="title" v-else>
-                <text class="content-reg" v-if="item.IsRed"></text>
-                {{ item.Title }}</view
-              >
-            </view>
-            <view v-show="loadTimeLine" class="loadTimeLine"></view>
-            <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1 && tabAct_id === 99999" />
-          </view>
+          <time-line ref="timeChild" :dataList="timeLine" @setRouter="setRouter" />
         </block>
+        <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
       </view>
-    </view>
+    </block>
     <view class="nodata" v-else>
       <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
       <text>暂时没有报告的内容</text>
@@ -83,13 +53,11 @@
 </template>
 
 <script>
-import { Mine, Home } from "@/config/api.js";
-import { Reports } from "@/config/api.js";
-import { Throttle } from "@/config/util.js";
+import { Mine, Home, Reports } from "@/config/api.js";
 import freeCharge from "@/components/freeCharge";
 import modalDialog from "@/components/modalDialog.vue";
 import IsTrackFollow from "@/components/isTrackFollow.vue";
-let app = getApp({ allowDefault: true });
+import TimeLine from "@/components/report/timeLine.vue";
 export default {
   data() {
     return {
@@ -128,8 +96,6 @@ export default {
           Content: "<p>hello,world</p><p>hello,world</p><p>hello,world</p>",
         }, //第一项是为了获取当前手机下,三行是多少相对高度
       ],
-      loadTimeLine: false, //时间线的遮罩
-      richTextHeight: 1000, //晨会富文本最大高度
       dataFollow: {},
       isSendWx: "",
     };
@@ -147,6 +113,7 @@ export default {
     freeCharge,
     modalDialog,
     IsTrackFollow,
+    TimeLine,
   },
   watch: {
     //监听tabs的变化
@@ -210,7 +177,7 @@ export default {
           IndustrialManagementId: this.industrialManagementId,
         }).then((res) => {
           if (res.Ret === 200) {
-            this.loadTimeLine = true;
+            this.$refs.timeChild.loadTimeLine = true;
             this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
             this.totalPage = res.Data.Paging.Pages;
             let list = res.Data.List || [];
@@ -243,7 +210,7 @@ export default {
             }
           });
           setTimeout(() => {
-            this.getConentsHeight();
+            this.$refs.timeChild.getConentsHeight();
           }, 0);
         });
         return;
@@ -337,30 +304,6 @@ export default {
       item.isExpand = !item.isExpand;
       this.timeLine.splice(index, 1, item);
     },
-    //获取所有晨会内容的高度并决定是否显示展开收起按钮
-    getConentsHeight() {
-      const query = wx.createSelectorQuery();
-      query.selectAll(".rich-text").boundingClientRect();
-      query.exec((res) => {
-        //根据timeLine的第一项确定当前手机三行文字的高度
-        const standardHeight = res[0][0].height;
-        this.richTextHeight = standardHeight;
-        res[0].forEach((item) => {
-          let temp = this.timeLine[item.dataset.index];
-          //超过这个高度的,需要显示展开/收起按钮
-          if (item.height > standardHeight) {
-            temp.isExpand = false;
-            temp.isShowBtn = true;
-          } else {
-            temp.isExpand = true;
-            temp.isShowBtn = false;
-          }
-        });
-        //然后把timeLine的第一项扔掉
-        this.timeLine.shift();
-        this.loadTimeLine = false;
-      });
-    },
     async goDetailFromTimeLine(item, index) {
       if (item.Content.length !== 0) return;
       await this.$store.dispatch("checkHandle");
@@ -392,31 +335,29 @@ export default {
     },
   },
   /* 触底 */
-  onReachBottom: Throttle(function () {
+  onReachBottom() {
     if (this.status === "nomore") return;
     this.status = "loading";
     this.page_no++;
     if (this.tabAct_id) {
       this.getCollectList();
     }
-  }),
+  },
   /* 下拉刷新 */
-  onPullDownRefresh: Throttle(function () {
+  onPullDownRefresh() {
     if (this.tabAct_id) {
       this.page_no = 1;
       this.refresh = true;
       this.getCollectList();
     }
-  }),
+  },
   /**
    * 用户点击分享
    */
-  onShareAppMessage: function (res) {
+  onShareAppMessage() {
     return {
       title: this.isHorzMobile ? "好友向您推荐此内容，上传名片享查研观向免费月卡！" : this.titleReport,
       path: "/reportPages/IndustryReport/IndustryReport?id=" + this.industrialManagementId + "&tab=" + this.tabAct_id + "&tabs=" + this.pcTabActive,
-      success: (res) => {},
-      fail: (err) => {},
     };
   },
 };
@@ -425,13 +366,8 @@ export default {
 <style lang="scss">
 .industry-content {
   background-color: #f7f7f7;
-  // height: 100vh;
-  .top-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
+  .top-video-content {
     width: 100%;
-    z-index: 90;
     background-color: white;
     text-align: center;
     .industry-video-poster {
@@ -443,15 +379,7 @@ export default {
       height: 340rpx;
       width: 728rpx;
     }
-    .top-bg-title {
-      height: 99rpx;
-      color: #2c83ff;
-      background-color: #d1ebff;
-      font-size: 28rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+
     .test {
       position: relative;
       span {
@@ -462,77 +390,58 @@ export default {
       }
     }
   }
-  .follow-top {
+  .title-tabs-content {
+    position: sticky;
     top: 60rpx;
-  }
-  .top-box {
-    position: fixed;
-    width: 100%;
-    top: 99rpx;
     left: 0;
-    z-index: 90;
-  }
-
-  .top-tab-cont {
-    .lucency {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 32px;
-      height: 30px;
-      opacity: 0.9;
-      background-color: #fff;
+    z-index: 99;
+    margin-bottom: 20rpx;
+    .top-bg-title {
+      height: 60rpx;
+      color: #3385ff;
+      background-color: #edf4ff;
+      font-size: 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
-    .tab-cont {
-      padding: retu;
-      padding: 30rpx 26rpx 0;
+    .tab-content {
+      width: 100%;
       background-color: #fff;
-      font-size: 32rpx;
-      box-shadow: 0 3rpx 6rpx rgba(187, 216, 255, 0.2);
-
-      .scroll-tab {
-        width: 100%;
-        white-space: nowrap;
-      }
+      display: flex;
+      flex-wrap: wrap;
+      padding: 30rpx 20rpx 0;
       .scroll-tab-item {
-        // flex-grow: 1;
-        text-align: center;
-        display: inline-block;
-        padding: 0rpx 8rpx 30rpx 8rpx;
-        margin-right: 60rpx;
-        border-bottom: 8rpx solid transparent;
         position: relative;
-        &:last-child {
-          margin-right: 0;
-        }
-        &.active {
-          border-bottom: none;
-          color: #2c83ff;
-          font-weight: 700;
-        }
-        .border_act {
-          width: 100%;
-          height: 8rpx;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-        }
-        .reg-hint {
+        display: inline-block;
+        height: 54rpx;
+        line-height: 54rpx;
+        padding: 0 23rpx;
+        background: #f7f7f7;
+        border-radius: 27px;
+        color: #999999;
+        margin: 0rpx 20rpx 20rpx 0;
+
+        .reg-text {
           position: absolute;
-          top: 0rpx;
-          right: -10rpx;
+          top: -6rpx;
+          right: -8rpx;
           width: 14rpx;
           height: 14rpx;
           background-color: #ff0000;
           border-radius: 50%;
         }
       }
+
+      .active {
+        color: #ffffff !important;
+        background-color: #2c83ff !important;
+      }
     }
   }
+
   .collect-ul {
-    // margin-top: 30rpx;s
-    padding-top: 210rpx;
-    // padding-top: 4rpx;
+    padding-bottom: 50rpx;
     .collect-ltem {
       display: flex;
       padding: 30rpx 34rpx;
@@ -564,152 +473,14 @@ export default {
         color: #999;
       }
     }
-    .time-line {
-      padding: 30rpx 40rpx 50rpx 40rpx;
-      min-height: calc(100vh - 190rpx);
-      background-color: #ffffff;
-      position: relative;
-      .loadTimeLine {
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        position: absolute;
-        background-color: #fff;
-        z-index: 6;
-      }
-      .line-item {
-        position: relative;
-        padding: 0 0 50rpx 40rpx;
-        /* border-left:1rpx solid #DAE9FD; */
-        &:last-child {
-          padding-bottom: 0;
-          &::after {
-            height: calc(100% - 25rpx);
-          }
-        }
-        &:first-child {
-          .time {
-            &::after {
-              background-color: #3385ff;
-            }
-          }
-        }
-        &::before,
-        &::after {
-          position: absolute;
-          content: "";
-        }
-        &::before {
-          width: 24rpx;
-          height: 24rpx;
-          background-color: #dae9fd;
-          z-index: 1;
-          left: 0;
-          top: 27rpx;
-          transform: translate(-50%, -50%);
-          border-radius: 50%;
-        }
-        &::after {
-          top: 17rpx;
-          left: 0;
-          width: 1rpx;
-          height: calc(100%);
-          background-color: #dae9fd;
-          z-index: 2;
-        }
-        .time {
-          width: 245rpx;
-          height: 55rpx;
-          text-align: center;
-          line-height: 45rpx;
-          padding: 5rpx 20rpx;
-          background-color: #f5f9ff;
-          border-radius: 64rpx;
-          color: #5181c9;
-          font-size: 32rpx;
-          margin-bottom: 20rpx;
-          position: relative;
-          &::before,
-          &::after {
-            position: absolute;
-            content: "";
-            left: -36rpx;
-            top: 27rpx;
-            width: 24rpx;
-            height: 1rpx;
-            background-color: #dae9fd;
-            z-index: 1;
-          }
-          &::after {
-            left: -40rpx;
-            top: 27rpx;
-            width: 12rpx;
-            height: 12rpx;
-            border-radius: 50%;
-            transform: translate(-50%, -50%);
-            background-color: #9dc5ff;
-            z-index: 3;
-          }
-        }
-        .content {
-          color: #666666;
-          position: relative;
-          .rich-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            text-align: justify;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-            position: relative;
-            &.expand {
-              -webkit-line-clamp: 999;
-              height: auto;
-            }
-          }
-          .expan-btn {
-            color: #2c83ff;
-            text-align: right;
-            &.pos {
-              padding: 0 0 0 40rpx;
-              background-color: rgba(255, 255, 255, 0.882);
-              position: absolute;
-              right: 0;
-              bottom: 0;
-            }
-          }
-          .content-reg {
-            position: absolute;
-            top: 10rpx;
-            left: -20rpx;
-            width: 14rpx;
-            height: 14rpx;
-            background-color: #ff0000;
-            border-radius: 50%;
-          }
-        }
-        .title {
-          position: relative;
-          color: #3385ff;
-          .content-reg {
-            position: absolute;
-            top: 10rpx;
-            left: -20rpx;
-            width: 14rpx;
-            height: 14rpx;
-            background-color: #ff0000;
-            border-radius: 50%;
-          }
-        }
-      }
-    }
   }
   .is-track-follow {
-    position: fixed;
+    height: 60rpx;
+    position: sticky;
     width: 100%;
-    top: 0;
+    top: 0rpx;
     left: 0;
+    z-index: 99;
   }
 }
 #industry-content {