'大事记'

pages/about/brand.vue

@@ -98,6 +98,19 @@
           </div>
         </div>
       </div>
+      <div class="d-event-content" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
+        <div class="mod-con">
+          <div class="event-main">
+            <div class="event-main-box" v-for="(item, index) in eventData" :key="index">
+              <div class="event-title">{{ item.id }}</div>
+              <div class="li clearfix" v-for="(ele, index) in item.eventList" :key="index">
+                <div class="left">{{ ele.month }}</div>
+                <div class="right">{{ ele.thing }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
 
     <!-- 大事记 -->
@@ -968,6 +981,7 @@ export default {
   mounted() {},
   data() {
     return {
+      isMoving: false,
       companyImg: require('@/assets/images/brand/company.png'),
       companyLeft: require('@/assets/images/brand/companyImg.png'),
       companyRight: require('@/assets/images/brand/profileImg.png'),
@@ -997,6 +1011,21 @@ export default {
     },
     handleFieldEnter(item, index) {
       this.currentFieldIndex = index;
+    },
+    handleMouseDown(e) {
+      e.preventDefault();
+      this.isMoving = true;
+      const starX = e.clientX;
+      this.starX = starX;
+      console.log('starX', starX);
+    },
+    handleMouseMove(e) {
+      if(this.isMoving) {
+        console.log('moving', e.clientX);
+      }
+    },
+    handleMouseUp(e) {
+      this.isMoving = false;
     }
   },
 };
@@ -1336,6 +1365,57 @@ export default {
         }
       }
     }
+    .d-event-content {
+      height: 413px;
+      overflow: hidden;
+      .mod-con {
+        width: 1200px;
+        position: relative;
+        margin: 0 auto;
+      }
+      .event-main {
+        width: 10000px;
+        top: 0;
+        z-index: 1;
+        position: absolute;
+        // left: 0;
+      }
+      .event-main-box {
+        width: 384px;
+        float: left;
+        margin-right: 25px;
+        font-size: 13px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #5F6464;
+        line-height: 24px;
+        .li {
+          line-height: 25px;
+          margin-bottom: 18px;
+          font-size: 14px;
+        }
+        .event-title {
+          font-size: 24px;
+          padding-top: 40px;
+          line-height: 36px;
+          font-family: 'TencentSansw7';
+          padding-bottom: 8px;
+          border-bottom: 1px solid #D8D9DC;
+          margin-bottom: 18px;
+          color: #2A2E2E;
+        }
+        .left {
+          float: left;
+          width: 42px;
+          padding-right: 10px;
+          text-align: right;
+        }
+        .right {
+          width: 320px;
+          float: left;
+        }
+      }
+    }
   }
   .event {
     position: relative;