经典案例目录建立

liuqimichale
1 parent 9a543af7
Showing 8 changed files with 215 additions and 24 deletions
src/assets/css/commonCss/reset.css
src/views/case/components/selectTab0.vue
src/views/case/components/selectTab1.vue
src/views/case/components/selectTab2.vue
src/views/case/index.vue
src/views/news/components/selectTab0.vue
src/views/news/index
src/views/news/index.vue
@@ -182,3 +182,30 @@ table {
   background:rgba(238,238,238,1);
 }
  
+/*tab切换*/
+.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;
+}
+
+<template>
+    <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab0'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab1'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab2'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
 <template>
-    <div>经典案例</div>
+    <div class="widthCommon" style="margin-bottom: 20px;">
+      <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner>
+      <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>
 </template>
  
 <script>
+import commonBanner from '@/components/commonBanner'
+import selectTab0 from './components/selectTab0'
+import selectTab1 from './components/selectTab1'
+import selectTab2 from './components/selectTab2'
 export default {
-  name: 'index'
+  name: 'index',
+  components:{
+    commonBanner, selectTab0, selectTab1, selectTab2
+  },
+  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>
  
+<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:'公司要闻'
+    }
+  },
+
+}
+</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>
 <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>
+    <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>
@@ -46,6 +46,14 @@ export default {
       name:'公司要闻'
     }
   },
+  methods:{
+    changeTab:function (index,item) {
+      console.log(index)
+      this.currentIndex = index
+      this.tabView = 'selectTab'+index
+      this.name = item
+    }
+  }
  
 }
 </script>