新闻中心

liuqimichale
1 parent 76c4adef
Showing 8 changed files with 150 additions and 4 deletions
src/components/commonHeaderFooter/VHeader.vue
src/router/index.js
src/views/news/components/selectTab0.vue
src/views/news/components/selectTab1.vue
src/views/news/components/selectTab2.vue
src/views/news/components/selectTab3.vue
src/views/news/index.vue
src/views/product/index.vue
@@ -23,6 +23,7 @@ export default {
         {name:'首页',pathLink:'/home'},
         {name:'关于我们',pathLink:'/about'},
         {name:'产品中心',pathLink:'/product'},
+        {name:'新闻中心',pathLink:'/news'},
         {name:'联系我们',pathLink:'/contact'},
       ]
     }
@@ -32,6 +32,11 @@ export default new Router({
       path: '/product',
       name: 'product',
       component: () => import('@/views/product')
+    },
+    {
+      path: '/news',
+      name: 'news',
+      component: () => import('@/views/news')
     }
  
  
+<template>
+    <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab0'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab1'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div>2</div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab2'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab3'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div>
+      <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct>
+      <div class="tab-wrapper">
+        <ul class="tab-main widthCommon">
+          <li
+            v-for="(item, index) in tabData"
+            :key="item"
+            @click="changeTab(index,item)"
+            :class="{tabActive:currentIndex==index}"
+          >{{item}}</li>
+        </ul>
+      </div>
+      <div class="bread ">
+        <div class=" widthCommon">
+          您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 新闻中心 -> {{name}}
+        </div>
+      </div>
+      <div class="widthCommon">
+        <keep-alive>
+          <component :is="tabView"></component>
+        </keep-alive>
+      </div>
+
+    </div>
+</template>
+
+<script>
+import commonProduct from '@/components/commonBanner'
+import selectTab0 from './components/selectTab0'
+import selectTab1 from './components/selectTab1'
+import selectTab2 from './components/selectTab2'
+import selectTab3 from './components/selectTab3'
+export default {
+  name: 'index',
+  components: {
+    commonProduct, selectTab0, selectTab1, selectTab2, selectTab3
+  },
+  data(){
+    return{
+      tabData:[
+        '公司要闻','行业动态','技术前沿', '团队活动'
+      ],
+      currentIndex:0,
+      tabView:'selectTab0',
+      name:'公司要闻'
+    }
+  },
+  methods:{
+    changeTab:function (index,item) {
+      console.log(index)
+      this.currentIndex = index
+      this.tabView = 'selectTab'+index
+      this.name = item
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .tab-wrapper{
+    height:50px;
+    background:rgba(237,237,237,1);
+    /*line-height: 50px;*/
+    padding-top: 5px;
+  }
+  .tab-main{
+    padding-left: 100px;
+    height: 45px;
+    line-height: 45px;
+  }
+  .tab-main li{
+    float: left;
+    margin-right: 50px;
+    width: 125px;
+
+    border-radius: 5px;
+    color: #333;
+    font-size: 16px;
+    text-align: center;
+    cursor: pointer;
+  }
+  .tabActive{
+    background: #FFF;
+  }
+</style>
@@ -6,14 +6,14 @@
           <li
             v-for="(item, index) in tabData"
             :key="item"
-            @click="changeTab(index)"
+            @click="changeTab(index,item)"
             :class="{tabActive:currentIndex==index}"
           >{{item}}</li>
         </ul>
       </div>
       <div class="bread">
         <div class=" widthCommon">
-          您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 产品中心 -> 智慧停车
+          您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 产品中心 -> {{name}}
         </div>
       </div>
  
@@ -41,14 +41,16 @@ export default {
         '智慧停车','公安交通','公共交通'
       ],
       currentIndex:0,
-      tabView:'selectTab0'
+      tabView:'selectTab0',
+      name:'智慧停车'
     }
   },
   methods:{
-    changeTab:function (index) {
+    changeTab:function (index,item) {
       console.log(index)
       this.currentIndex = index
       this.tabView = 'selectTab'+index
+      this.name = item
     }
   }