feat:时间轴滚动

src/components/elStep.vue

@@ -2,28 +2,37 @@
   <div class="steps el-steps el-steps--horizontal">
     <div
       class="el-step is-horizontal"
-      :class="{isFlex:item.index == stepList.length}"
+      :class="{ isFlex: item.index == stepList.length }"
-      style="flex-basis:50%;"
+      style="flex-basis: 50%"
       :style="{
-			'flexBasis':(item.index==stepList.length?0:50)+'%',
+        flexBasis: (item.index == stepList.length ? 0 : 50) + '%',
-			'maxWidth':(item.index==stepList.length?(1/stepList.length)*100:100)+'%'
+        maxWidth:
-			}"
+          (item.index == stepList.length ? (1 / stepList.length) * 100 : 100) +
-      v-for="(item,index) in stepList"
+          '%',
+      }"
+      v-for="(item, index) in stepList"
       :key="index"
     >
       <div class="el-step__head is-process">
         <div class="el-step__line">
-          <i class="el-step__line-inner" style="transition-delay:0ms;border-width:0;width:0%"></i>
+          <i
+            class="el-step__line-inner"
+            style="transition-delay: 0ms; border-width: 0; width: 0%"
+          ></i>
         </div>
       </div>
       <div class="textCla">
         <div
           class="el-step__icon is-text"
-          :class="{success:index<active,  before:index>active,  active:index==active}"
+          :class="{
-          @click="clickStep(index,stepFunction)"
+            success: index < active,
-          style="position: relative;"
+            before: index > active,
+            active: index == active,
+          }"
+          @click="clickStep(index, stepFunction)"
+          style="position: relative"
         >
-          <div class="pTitle">{{item.title}}</div>
+          <div class="pTitle">{{ item.title }}</div>
         </div>
       </div>
     </div>
@@ -33,16 +42,16 @@
 export default {
   methods: {
     //点击步骤条后回调
-    clickStep(index, callback) {
+    clickStep(index) {
-      console.log(index, callback, 8787);
+      // if (callback) callback(index);
-      if (callback) callback(index);
+      this.$emit("clickStep", index);
-    }
+    },
   },
   props: {
     active: { type: Number, default: 1 },
     stepFunction: { type: Function, default: () => {} },
-    stepList: { type: Array, default: () => [] }
+    stepList: { type: Array, default: () => [] },
-  }
+  },
 };
 </script>
 <style lang='less' scoped>

src/views/aboutUs.vue

@@ -3,7 +3,11 @@
     <el-backtop />
     <top :activeIndex="activeIndexs"></top>
     <div class="ban">
-      <el-image style="width: 100%" :src="require('@/assets/img/home/pressimg.png')" fit="fill"></el-image>
+      <el-image
+        style="width: 100%"
+        :src="require('@/assets/img/home/pressimg.png')"
+        fit="fill"
+      ></el-image>
     </div>
     <div class="solutabs">
       <el-menu
@@ -31,9 +35,9 @@
                 山东青鸟工业互联网有限公司为山东省第4家获批的国家工业互联网标识解析二级节点（综合型）、国家高新技术企业、山东省双软企业、科技型中小企业、创新型中小企业、山东省第一批网络安全重点企业、山东省大数据创新服务机构、济南市工业互联网产业链群链主企业，主要从事物联网领域的标识解析系统研发与服务，是一家致力于为客户提供可信数字基础设施的标识解析增值运营商，提供物联网、工业云、工业大数据等产品、解决方案及平台运营。公司运营中心位于济南中央商务区CBD。团队核心成员毕业于山东大学、吉林大学、中国人大、山东财经等知名高校，均在物联网、大数据、通信运营领域拥有
                 10 年以上工作经验。
               </div>
-              <div
+              <div style="padding-top: 20px">
-                style="padding-top: 20px"
+                作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。
-              >作为省物联网协会孵化的工业互联网标识解析二级节点，山东青鸟所建设工业互联网标识解析物联网行业省级节点公共服务平台、省物联网检测认证公共服务平台已纳入“山东省国民经济十四五规划和2035年远景目标”中的新型基础设施建设部分的重要内容。</div>
+              </div>
             </div>
           </div>
         </div>
@@ -51,31 +55,45 @@
               />
               <div class="time-line">
                 <div class>
-                  <ElStep :stepFunction="stepFunction" :active="active" :stepList="stepList"></ElStep>
+                  <ElStep
+                    @clickStep="stepFunction"
+                    :active="active"
+                    :stepList="stepList"
+                  ></ElStep>
                 </div>
               </div>
             </div>
-            <div class="allscroll modelWidth" ref="scroll">
+            <div class="allscroll">
-              <div class="scroll modelWidth flex">
+              <div class="scroll">
-                <div class="scollview" v-for="(item,index) in 7" :key="index
+                <el-carousel
-                ">
+                  type="card"
-                  <div class="year">2021</div>
+                  indicator-position="none"
-                  <div class="scrollcontent">
+                  :autoplay="false"
-                    <div class="months">2月</div>
+                  :initial-index="scrollIndex"
-                    <div class="right">山东青鸟通过2022年工业互联网试点</div>
+                  @change="handleScroll"
-                  </div>
+                  ref="scroll"
-                </div>
+                >
+                  <el-carousel-item
+                    v-for="(item, index) in history"
+                    :key="index"
+                  >
+                    <div class="scollview">
+                      <div class="year">{{ item.name }}</div>
+                      <div
+                        class="scrollcontent"
+                        v-for="(items, indexs) in item.arr"
+                        :key="indexs"
+                      >
+                        <div class="months">{{ items.month }}</div>
+                        <div class="right">
+                          {{ items.content }}
+                        </div>
+                      </div>
+                    </div>
+                  </el-carousel-item>
+                </el-carousel>
               </div>
             </div>
-            <div class="person-wrap" ref="personWrap">
-              <ul class="person-list" ref="personTab">
-                <li class="person-item">1</li>
-                <li class="person-item">2</li>
-                <li class="person-item">3</li>
-                <li class="person-item">4</li>
-                <li class="person-item">5</li>
-              </ul>
-            </div>
           </div>
         </div>
       </div>
@@ -246,7 +264,9 @@
             <div class="floor5 modelWidth">
               <headline heading="联系方式" footing="Contact information" />
               <div class="floor5-title">济南总部</div>
-              <div class="inform">山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室</div>
+              <div class="inform">
+                山东省济南市历下区千佛山路1号建邦创意星空广场A座10楼A1002室
+              </div>
               <div class="inform">总部电话：0531-58252556</div>
               <div class="inform">工业互联网业务：15066150005 王老师</div>
               <div class="inform">物联网业务：15169050007 王老师</div>
@@ -265,14 +285,13 @@ import top from "@/components/header.vue";
 import bottom from "@/components/footer.vue";
 import headline from "@/components/headline.vue";
 import ElStep from "@/components/elStep.vue";
-import BScroll from "better-scroll";
 export default {
   name: "HomeView",
   components: {
     top,
     bottom,
     headline,
-    ElStep
+    ElStep,
   },
   data() {
     return {
@@ -285,34 +304,92 @@ export default {
         { index: 1, title: "2020" },
         { index: 2, title: "2021" },
         { index: 3, title: "2022" },
-        { index: 4, title: "现在" }
+        { index: 4, title: "现在" },
       ],
       bscorll: null,
-      scroll: null
+      scroll: null,
+      history: [
+        {
+          name: "2020",
+          arr: [
+            {
+              month: "1月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "2月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "3月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+          ],
+        },
+        {
+          name: "2021",
+          arr: [
+            {
+              month: "1月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "2月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+          ],
+        },
+        {
+          name: "2022",
+          arr: [
+            {
+              month: "1月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "2月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "3月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "4月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+          ],
+        },
+        {
+          name: "2023",
+          arr: [
+            {
+              month: "1月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "2月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "3月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+            {
+              month: "4月",
+              content: "山东青鸟通过2022年工业互联网试点",
+            },
+          ],
+        },
+      ],
+
+      scrollIndex: null,
     };
   },
-  // mounted() {
+  created() {
-  //   this.$nextTick(() => {
+    this.scrollIndex = this.history.length - 1;
-  //     this.scroll = new Bscroll(this.$refs.scroll, {});
+    this.active = this.history.length - 1;
-  //   });
+  },
-  // },
-  // created() {
-  //   var that = this;
-  //   var inner = document.getElementsByClassName("floor");
-  //   // 注册滚动监听事件
-  //   window.onscroll = function() {
-  //     // 获取滚动条距离页面底部的距离
-  //     var tops = document.documentElement.scrollTop || document.body.scrollTop;
-  //     // console.log(tops)
-  //     //判断滚动的位置，从而改变楼层选项的样式
-  //     for (var i = 0; i < inner.length; i++) {
-  //       if (inner[i].offsetTop <= tops + 200 && tops <= inner[i].offsetTop) {
-  //         that.num = i;
-  //       }
-  //     }
-  //   };
-  // },
-
   methods: {
     // 楼层跳转的方法index
     handleSelect(index) {
@@ -321,7 +398,7 @@ export default {
       var inner = document.getElementsByClassName("floor");
       window.scrollTo({
         top: inner[index].offsetTop - 50,
-        behavior: "smooth"
+        behavior: "smooth",
       });
     },
 
@@ -337,12 +414,15 @@ export default {
     },
     stepFunction(index) {
       this.active = index;
-      this.goStep(this.active);
+      this.scrollIndex = index;
+      this.$refs.scroll.activeIndex = index;
     },
-    goStep(index) {
+    //时间轴
-      console.log(index, 78787);
+    handleScroll(e) {
-    }
+      this.active = e;
-  }
+      this.scrollIndex = e;
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -381,13 +461,15 @@ export default {
       }
       //时间线
       .scroll {
-        height: 200px;
+        // width: 1200px;
-        width: 1200px;
         padding-top: 15px;
+        position: relative;
         .scollview {
-          width: 25%;
+          display: inline-block;
-          padding: 0 6px;
+          position: absolute;
-
+          top: 0;
+          left: 50%;
+          transform: translateX(-50%);
           .year {
             font-size: 24px;
             font-family: PingFang SC;