优化优势等

components/common/common-area-select.vue

@@ -79,7 +79,7 @@ export default {
   img {
     // padding-top: 10px;
     position: relative;
-    left: 3px;
+    left: 0;
     top: 1px;
     width: 12px;
     height: 12px;

components/common/common-tabs copy.vue

+<!-- Tabs组件 -->
+<template>
+  <div class="common-tabs-wrapper" :class="{'fixed': needFixed}">
+    <div class="sub-wrapper" :class="{'fixed': needFixed}">
+      <ul class="common-tabs" id="tabsWrapperId">
+        <li :id="'tabsItem' + index"
+          v-show="(item === '总体概况'
+            || item === '人群分析' 
+            || item === '课程分析' && projectInfo.existCourse === 1)
+            || (item === '考试分析' && projectInfo.existExam === 1)
+            || (item === '学习效果分析' && projectInfo.existEffect === 1)"
+          v-for="(item, index) in tapList"
+          :class="{'active': index === cIndex}"
+          :key="index"
+          @click="clickTab(index)"
+        >{{item}}</li>
+      </ul>
+      <span class="over"></span>
+      <span class="border"></span>
+      </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      cIndex: 0,
+      tapList: [
+        "总体概况",
+        "人群分析",
+        "课程分析",
+        "考试分析",
+        "学习效果分析"
+      ]
+    };
+  },
+  props: {
+    projectInfo: {
+      type: Object
+    },
+    needFixed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {},
+  methods: {
+    clickTab(index) {
+      this.cIndex = index;
+      this.$emit("tabClicked", index);
+      let tabsItemId = 'tabsItem' + index;
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.common-tabs-wrapper {
+  .sub-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    font-size: 13px;    
+    width: 100%;
+    white-space: nowrap;
+    &.fixed {
+      position: fixed;
+      top: 70px;
+      width: 100%;
+      z-index: 1000000000;
+      background: #fff;
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+  }
+  display: flex;
+  position: relative;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000000000;
+  font-size: 13px;
+  .common-tabs {
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding: 9px 0;
+    font-size: 13px;
+    // padding: 5px 0;
+    li {
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      font-size: 13px;
+      font-weight: 700;
+      margin: 0 6px;
+      color: #979899;
+      background: #f0f1f2;
+      padding: 0 12px;
+      border-radius: 30px;
+      &:first-child {
+        margin-left: 15px;
+      }      
+      &:last-child {
+        margin-right: 15px;
+      }
+      &.active {
+        color: #449284;
+        background: #e3efed;
+      }
+    }
+    margin-top: 0;
+  }
+  .over {
+    display: block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    width: 100%;
+    height: 9px;
+    z-index: 10000000;
+    background: #fff;
+  }
+  .border {
+    display: block;
+    width: 100%;
+    height: 1px;
+    bottom: 0px;
+    left: 0;
+    border-bottom: 1px solid #f0f1f2;
+    position: absolute;
+    z-index: 10000000;
+  }
+}
+</style>

components/common/common-tabs.vue

@@ -21,6 +21,7 @@
   </div>
 </template>
 <script>
+let scrollDom = [], maxScrollWidth = 375;
 export default {
   data() {
     return {
@@ -43,12 +44,37 @@ export default {
       default: false
     }
   },
-  mounted() {},
+
+  mounted() {
+  },
   methods: {
     clickTab(index) {
       this.cIndex = index;
       this.$emit("tabClicked", index);
+      // this.scrollTabs(index);
+    },
+    scrollTabs(index) {
       let tabsItemId = 'tabsItem' + index;
+      let needScrollWidth = 0;
+      scrollDom = [];
+      for(let i = 0; i < 5; i ++) {
+        cDomRect = document.getElementById('tabsItem' + i).getBoundingClientRect();
+        console.log(cDomRect);
+        scrollDom.push({left: cDomRect.left, right: cDomRect.right})
+      }
+      let cDomRect = scrollDom[index];
+      if(index == 0) {
+        needScrollWidth = 15 - cDomRect.left;
+      }
+      debugger
+      this.scrollWidth(needScrollWidth);
+
+      console.log(cDomRect);
+    },
+    scrollWidth(allWidth, width) {
+      for(let i = 0; i < 5; i ++) {
+        document.getElementById("tabsItem" + i).style.transform = 'translateX(' + allWidth + 'px)';        
+      }
     }
   }
 };