面包导航

liuqimichale
1 parent 6bb29459
Showing 5 changed files with 86 additions and 5 deletions
src/assets/css/commonCss/reset.css
src/views/product/components/selectTab0.vue
src/views/product/components/selectTab1.vue
src/views/product/components/selectTab2.vue
src/views/product/index.vue
@@ -158,4 +158,7 @@ table {
 .bgCommon{
   background:rgba(238,238,238,1);
 }
+.pointer{
+  cursor: pointer;
+}
  
+<template>
+    <div>0</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>
@@ -3,21 +3,52 @@
       <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct>
       <div class="tab-wrapper">
         <ul class="tab-main widthCommon">
-          <li>智慧停车</li>
-          <li>公安交通</li>
-          <li>公共交通</li>
+          <li
+            v-for="(item, index) in tabData"
+            :key="item"
+            @click="changeTab(index)"
+            :class="{tabActive:currentIndex==index}"
+          >{{item}}</li>
         </ul>
       </div>
+
+      <div class="bread widthCommon">
+        您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 产品中心 -> 智慧停车
+      </div>
+
+      <keep-alive>
+        <component :is="tabView"></component>
+      </keep-alive>
+
     </div>
 </template>
  
 <script>
 import commonProduct from '@/components/commonBanner'
+import selectTab0 from './components/selectTab0'
+import selectTab1 from './components/selectTab1'
+import selectTab2 from './components/selectTab2'
 export default {
   name: 'index',
   components:{
-    commonProduct
+    commonProduct, selectTab0, selectTab1, selectTab2
+  },
+  data(){
+    return{
+      tabData:[
+        '智慧停车','公安交通','公共交通'
+      ],
+      currentIndex:0,
+      tabView:'selectTab0'
+    }
   },
+  methods:{
+    changeTab:function (index) {
+      console.log(index)
+      this.currentIndex = index
+      this.tabView = 'selectTab'+index
+    }
+  }
  
 }
 </script>
@@ -39,11 +70,19 @@ export default {
     float: left;
     margin-right: 50px;
     width: 125px;
-    background: #FFF;
+
     border-radius: 5px;
     color: #333;
     font-size: 16px;
     text-align: center;
     cursor: pointer;
   }
+  .tabActive{
+    background: #FFF;
+  }
+  .bread{
+    padding: 35px 0;
+    color: #333;
+    font-size: 14px;
+  }
 </style>