From 0c75b35cfc1cad34a3c51de61d6b3359dd7d9327 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Fri, 10 Jan 2020 10:42:49 +0800
Subject: [PATCH] 经典案例 目录建立

---
 src/assets/css/commonCss/reset.css       | 27 +++++++++++++++++++++++++++
 src/views/case/components/selectTab0.vue | 13 +++++++++++++
 src/views/case/components/selectTab1.vue | 13 +++++++++++++
 src/views/case/components/selectTab2.vue | 13 +++++++++++++
 src/views/case/index.vue                 | 41 +++++++++++++++++++++++++++++++++++++++--
 src/views/news/components/selectTab0.vue |  1 +
 src/views/news/index                     | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/news/index.vue                 | 52 ++++++++++++++++++++++++++++++----------------------
 8 files changed, 215 insertions(+), 24 deletions(-)
 create mode 100644 src/views/case/components/selectTab0.vue
 create mode 100644 src/views/case/components/selectTab1.vue
 create mode 100644 src/views/case/components/selectTab2.vue
 create mode 100644 src/views/news/index

diff --git a/src/assets/css/commonCss/reset.css b/src/assets/css/commonCss/reset.css
index 79a1870..cb0605f 100644
--- a/src/assets/css/commonCss/reset.css
+++ b/src/assets/css/commonCss/reset.css
@@ -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;
+}
+
diff --git a/src/views/case/components/selectTab0.vue b/src/views/case/components/selectTab0.vue
new file mode 100644
index 0000000..0afb0e2
--- /dev/null
+++ b/src/views/case/components/selectTab0.vue
@@ -0,0 +1,13 @@
+<template>
+    <div>1</div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab0'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/case/components/selectTab1.vue b/src/views/case/components/selectTab1.vue
new file mode 100644
index 0000000..7d2a335
--- /dev/null
+++ b/src/views/case/components/selectTab1.vue
@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab1'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/case/components/selectTab2.vue b/src/views/case/components/selectTab2.vue
new file mode 100644
index 0000000..02d2448
--- /dev/null
+++ b/src/views/case/components/selectTab2.vue
@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+  name: 'selectTab2'
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/case/index.vue b/src/views/case/index.vue
index 4212623..0518125 100644
--- a/src/views/case/index.vue
+++ b/src/views/case/index.vue
@@ -1,10 +1,47 @@
 <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>
 
diff --git a/src/views/news/components/selectTab0.vue b/src/views/news/components/selectTab0.vue
index 3f3dcd8..965c0ad 100644
--- a/src/views/news/components/selectTab0.vue
+++ b/src/views/news/components/selectTab0.vue
@@ -57,6 +57,7 @@
 <script>
 export default {
   name: 'selectTab0',
+
   methods:{
     pagePhotoChange:function (index,item) {
       console.log(index)
diff --git a/src/views/news/index b/src/views/news/index
new file mode 100644
index 0000000..703ca39
--- /dev/null
+++ b/src/views/news/index
@@ -0,0 +1,79 @@
+<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>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
index 703ca39..b7b6bdb 100644
--- a/src/views/news/index.vue
+++ b/src/views/news/index.vue
@@ -1,28 +1,28 @@
 <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>
--
libgit2 0.21.4