关于我们页面建立

liuqimichale
1 parent 8c48fe84
Showing 1 changed file with 40 additions and 12 deletions
src/views/about/index.vue
@@ -8,7 +8,8 @@
           :key="item"
           @click="changeTab(index,item)"
           :class="{tabActive:currentIndex==index}"
-        >{{item}}</li>
+        >{{item}}
+        </li>
       </ul>
     </div>
     <div class="bread">
@@ -18,29 +19,57 @@
     </div>
  
  
-
+    <div class="widthCommon anchor" style="height: 200px;">1</div>
+    <div class="widthCommon anchor" style="height: 400px;">2</div>
+    <div class="bgCommon">
+      <div class="widthCommon anchor" style="height: 400px;">3</div>
+    </div>
+    <div class="widthCommon anchor" style="height: 300px;">4</div>
+    <div class="widthCommon anchor" style="height: 300px;">5</div>
  
   </div>
 </template>
  
 <script>
 import commonBanner from '@/components/commonBanner'
+
 export default {
   name: 'index',
-  components:{
+  components: {
     commonBanner
   },
-  data(){
-    return{
-      tabData:[
-        '智慧停车','公安交通','公共交通'
+  data() {
+    return {
+      tabData: [
+        '公司简介', '发展历程', '企业文化', '资质认证', '荣誉证书'
       ],
-      currentIndex:0,
-      tabView:'selectTab0',
-      name:'智慧停车'
+      currentIndex: 0,
+      tabView: 'selectTab0',
+      name: '',
+      scroll: ''
     }
   },
-  methods:{
+  mounted() {
+    this.name = this.tabData[0]
+  },
+  methods: {
+    dataScroll: function () {
+      this.scroll =  document.documentElement.scrollTop || document.body.scrollTop
+    },
+    changeTab: function (index, item) {
+      console.log(index)
+      this.currentIndex = index
+      this.tabView = 'selectTab' + index
+      this.name = item
+
+      // 对应锚点
+      let jump = document.getElementsByClassName('anchor')
+      let total = jump[index].offsetTop
+      document.documentElement.scrollTop = total //firefox
+      document.body.scrollTop = total //chrome
+      window.pageYOffset = total
+
+    },
  
   }
  
@@ -50,5 +79,4 @@ export default {
 <style scoped lang="scss">
  
  
-
 </style>