From 1e0bb6b537d570fd1892f9c0d46358a0f9b3e746 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Fri, 10 Jan 2020 14:26:26 +0800
Subject: [PATCH] 经典案例 完成

---
 src/router/index.js                      |  6 +++++-
 src/views/case/components/selectTab0.vue | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/views/case/components/selectTab1.vue | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 src/views/case/components/selectTab2.vue | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
 src/views/case/index.vue                 | 74 ++++++--------------------------------------------------------------------
 src/views/caseDetail/index.vue           | 49 ++++++++++++++++++++++++++++++++++++++++++++++---
 src/views/news/index                     | 79 -------------------------------------------------------------------------------
 7 files changed, 280 insertions(+), 158 deletions(-)
 delete mode 100644 src/views/news/index

diff --git a/src/router/index.js b/src/router/index.js
index 8fa9944..96136fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -47,9 +47,13 @@ export default new Router({
       path: '/case',
       name: 'case',
       component: () => import('@/views/case')
+    },
+    {
+      path: '/caseDetail/:caseId',
+      name: 'caseDetail',
+      component: () => import('@/views/caseDetail')
     }
 
 
-
   ]
 })
diff --git a/src/views/case/components/selectTab0.vue b/src/views/case/components/selectTab0.vue
index 0afb0e2..52cfd13 100644
--- a/src/views/case/components/selectTab0.vue
+++ b/src/views/case/components/selectTab0.vue
@@ -1,13 +1,93 @@
 <template>
-    <div>1</div>
+  <div class="widthCommon" style="margin-bottom: 20px;">
+    <ul class="caseList">
+      <li v-for="item in 10" :key="item">
+        <img src="../../../assets/images/case/case.png" alt="">
+        <p class="caseName">项目名称：黄石智慧停车项目</p>
+        <p class="caseAddress">项目地址：  湖北· 黄石</p>
+        <ul class="mark-wrapper">
+          <li>
+            <span>车位：10000</span>
+          </li>
+          <li>
+            <span>规划、</span>
+            <span>建设、</span>
+            <span>运营</span>
+          </li>
+        </ul>
+
+        <div class="pointer toDetail" @click="toDetail">查看详情 》</div>
+      </li>
+    </ul>
+
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'selectTab0'
+  name: 'selectTab0',
+  methods:{
+    toDetail:function () {
+      this.$router.push({
+        name: 'caseDetail',
+        params: { caseId: 123 }
+      })
+      this.$router.push({
+        name: 'newsDetail',
+        params: { newsId: ID }
+      })
+    }
+  }
 }
 </script>
 
 <style scoped lang="scss">
-
+  .caseList{
+    overflow: hidden;
+  }
+  .caseList>li{
+    width: 400px;
+    height: 529px;
+    float: left;
+    margin-right:90px ;
+    margin-bottom: 92px;
+    background:rgba(228,228,228,1);
+    img{
+      width: 400px;
+      height: 354px;
+    }
+  }
+  .caseList>li:nth-of-type(3n+0){
+    margin-right: 0;
+  }
+  .caseName,.caseAddress{
+    padding-left: 20px;
+    font-size: 14px;
+    color: #333;
+  }
+  .caseName{
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  .mark-wrapper{
+    margin: 20px 0;
+    padding-left: 20px;
+    overflow: hidden;
+  }
+  .mark-wrapper li{
+    padding: 5px 10px;
+    float: left;
+    margin-right: 17px;
+    background:rgba(54,114,248,.4);
+    border-radius:4px;
+    font-size: 14px;
+    color: #333;
+  }
+  .toDetail{
+    text-align: center;
+    font-size: 14px;
+    color: #3366CC;
+  }
 </style>
diff --git a/src/views/case/components/selectTab1.vue b/src/views/case/components/selectTab1.vue
index 7d2a335..78a19bd 100644
--- a/src/views/case/components/selectTab1.vue
+++ b/src/views/case/components/selectTab1.vue
@@ -1,5 +1,28 @@
 <template>
-    <div></div>
+  <div class="widthCommon" style="margin-bottom: 20px;">
+    <ul class="caseList">
+      <li v-for="item in 10" :key="item">
+        <img src="../../../assets/images/case/case.png" alt="">
+        <p class="caseName">项目名称：黄石智慧停车项目</p>
+        <p class="caseAddress">项目地址：  湖北· 黄石</p>
+        <ul class="mark-wrapper">
+          <li>
+            <span>车位：10000</span>
+          </li>
+          <li>
+            <span>规划、</span>
+            <span>建设、</span>
+            <span>运营</span>
+          </li>
+        </ul>
+
+        <div class="pointer toDetail">查看详情 》</div>
+      </li>
+    </ul>
+
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+  </div>
 </template>
 
 <script>
@@ -9,5 +32,50 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+  .caseList{
+    overflow: hidden;
+  }
+  .caseList>li{
+    width: 400px;
+    height: 529px;
+    float: left;
+    margin-right:90px ;
+    margin-bottom: 92px;
+    background:rgba(228,228,228,1);
+    img{
+      width: 400px;
+      height: 354px;
+    }
+  }
+  .caseList>li:nth-of-type(3n+0){
+    margin-right: 0;
+  }
+  .caseName,.caseAddress{
+    padding-left: 20px;
+    font-size: 14px;
+    color: #333;
+  }
+  .caseName{
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  .mark-wrapper{
+    margin: 20px 0;
+    padding-left: 20px;
+    overflow: hidden;
+  }
+  .mark-wrapper li{
+    padding: 5px 10px;
+    float: left;
+    margin-right: 17px;
+    background:rgba(54,114,248,.4);
+    border-radius:4px;
+    font-size: 14px;
+    color: #333;
+  }
+  .toDetail{
+    text-align: center;
+    font-size: 14px;
+    color: #3366CC;
+  }
 </style>
diff --git a/src/views/case/components/selectTab2.vue b/src/views/case/components/selectTab2.vue
index 02d2448..afa786c 100644
--- a/src/views/case/components/selectTab2.vue
+++ b/src/views/case/components/selectTab2.vue
@@ -1,5 +1,28 @@
 <template>
-    <div></div>
+  <div class="widthCommon" style="margin-bottom: 20px;">
+    <ul class="caseList">
+      <li v-for="item in 10" :key="item">
+        <img src="../../../assets/images/case/case.png" alt="">
+        <p class="caseName">项目名称：黄石智慧停车项目</p>
+        <p class="caseAddress">项目地址：  湖北· 黄石</p>
+        <ul class="mark-wrapper">
+          <li>
+            <span>车位：10000</span>
+          </li>
+          <li>
+            <span>规划、</span>
+            <span>建设、</span>
+            <span>运营</span>
+          </li>
+        </ul>
+
+        <div class="pointer toDetail">查看详情 》</div>
+      </li>
+    </ul>
+
+    <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
+    </v-page>
+  </div>
 </template>
 
 <script>
@@ -9,5 +32,50 @@ export default {
 </script>
 
 <style scoped lang="scss">
-
+  .caseList{
+    overflow: hidden;
+  }
+  .caseList>li{
+    width: 400px;
+    height: 529px;
+    float: left;
+    margin-right:90px ;
+    margin-bottom: 92px;
+    background:rgba(228,228,228,1);
+    img{
+      width: 400px;
+      height: 354px;
+    }
+  }
+  .caseList>li:nth-of-type(3n+0){
+    margin-right: 0;
+  }
+  .caseName,.caseAddress{
+    padding-left: 20px;
+    font-size: 14px;
+    color: #333;
+  }
+  .caseName{
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+  .mark-wrapper{
+    margin: 20px 0;
+    padding-left: 20px;
+    overflow: hidden;
+  }
+  .mark-wrapper li{
+    padding: 5px 10px;
+    float: left;
+    margin-right: 17px;
+    background:rgba(54,114,248,.4);
+    border-radius:4px;
+    font-size: 14px;
+    color: #333;
+  }
+  .toDetail{
+    text-align: center;
+    font-size: 14px;
+    color: #3366CC;
+  }
 </style>
diff --git a/src/views/case/index.vue b/src/views/case/index.vue
index 13bb719..134d000 100644
--- a/src/views/case/index.vue
+++ b/src/views/case/index.vue
@@ -18,30 +18,13 @@
         </div>
       </div>
 
-      <div class="widthCommon" style="margin-bottom: 20px;">
-        <ul class="caseList">
-          <li v-for="item in 10" :key="item">
-            <img src="../../assets/images/case/case.png" alt="">
-            <p class="caseName">项目名称：黄石智慧停车项目</p>
-            <p class="caseAddress">项目地址：  湖北· 黄石</p>
-            <ul class="mark-wrapper">
-              <li>
-                <span>车位：10000</span>
-              </li>
-              <li>
-                <span>规划、</span>
-                <span>建设、</span>
-                <span>运营</span>
-              </li>
-            </ul>
+      <div class="widthCommon">
+        <keep-alive>
+          <component :is="tabView"></component>
+        </keep-alive>
+      </div>
 
-            <div class="pointer toDetail">查看详情 》</div>
-          </li>
-        </ul>
 
-        <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange">
-        </v-page>
-      </div>
 
     </div>
 </template>
@@ -81,50 +64,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.caseList{
-  overflow: hidden;
-}
-.caseList>li{
-  width: 400px;
-  height: 529px;
-  float: left;
-  margin-right:90px ;
-  margin-bottom: 92px;
-  background:rgba(228,228,228,1);
-  img{
-    width: 400px;
-    height: 354px;
-  }
-}
-.caseList>li:nth-of-type(3n+0){
-  margin-right: 0;
-}
-  .caseName,.caseAddress{
-    padding-left: 20px;
-    font-size: 14px;
-    color: #333;
-  }
-  .caseName{
-    padding-top: 20px;
-    padding-bottom: 20px;
-  }
-  .mark-wrapper{
-    margin: 20px 0;
-    padding-left: 20px;
-    overflow: hidden;
-  }
-  .mark-wrapper li{
-    padding: 5px 10px;
-    float: left;
-    margin-right: 17px;
-    background:rgba(54,114,248,.4);
-    border-radius:4px;
-    font-size: 14px;
-    color: #333;
-  }
-  .toDetail{
-    text-align: center;
-    font-size: 14px;
-    color: #3366CC;
-  }
+
 </style>
diff --git a/src/views/caseDetail/index.vue b/src/views/caseDetail/index.vue
index 5265ad1..673e162 100644
--- a/src/views/caseDetail/index.vue
+++ b/src/views/caseDetail/index.vue
@@ -1,13 +1,56 @@
 <template>
-    <div>详情</div>
+  <div class="widthCommon">
+    <p style="border-bottom:1px solid rgba(224,224,224,1);padding-bottom: 20px ">
+      无锡市优良政协委员、中兴智能交通股份有限公司总裁刘海峰接受了媒体采访，对中国城市停车现状、如何解决停车难等问题进行了解读。
+
+      中国城市面临停车难、停车乱问题，中兴智能交通是如何解决的？
+
+      随着中国经济的发展，汽车已经进入寻常百姓家，根据公安部发布数据显示2018年中国汽车保有量达到2.4亿辆，同时每年以10%的速度在增长。与此同时，由于土地资源的稀缺，泊位供给量的增长速度远低于机动车保有量的增长速度，泊位供需失衡、泊位使用效率低、缺少有效共享机制、车场信息孤岛等问题带来的停车难、停车乱、管理难的现象越来越突出。
+
+      中兴智能交通股份有限公司是致力于智能交通领域的专业公司，从事智能交通将近20年，用7年时间潜心研究破解城市停车难、停车乱及交通拥堵等问题。城市的大部分停车问题是由于缺乏对停车资源的整合和利用效率低造成的，如何盘活、整合现有停车资源，使有限的资停车源得到充分利用，对提升城市综合治理水平、缓解城市停车供需矛盾有很大的帮助。
+
+      针对城市级“停车综合治理”难题，我们探索出一条可行之路，在对整个城市停车资源充分调研、合理规划的基础上，整合现有停车资源、调度，盘活停车存量、投入增量，实行建管结合、综合治理。停车资源盘活后，停车效能可提高20%~30%。
+
+      作为智能交通行业的专业公司，除智慧停车业务外，相关业务有哪些？
+
+      中兴智能交通是中国批从事智能交通产业的高新技术企业， 公司的主营业务面向城市交通和公共交通信息服务领域，为城市公安交通、公共交通、智慧停车提供交通规划、方案设计、系统建设、运营和服务，为客户提供个性化的智能交通解决方案和技术服务。在城市智能交通领域，我们自主研发了城市公安交通集成指挥平台，是为交通管理业务而开发的综合化、智能化的管理应用服务的平台，该平台已在100多个城市中应用。
+
+      另一款中兴智能交通自主研发的智能公交调度平台，是运用车辆定位技术、地理信息系统技术等先进技术科学集成，形成集智能化调度、公交电子收费、信息服务、网络通信于一体的公共交通管理系统平台，该平台已在重庆、江苏盐城得到运用。基于以上两平台的运用，我们正在同步研发智慧交通大数据平台，实现“一次存储，多次利用”、“一点存储，全面共享”，为管理者提高办事效率和管理水平、加强对信息化社会的管理，为百姓出行提供便捷。
+
+
+    </p>
+
+    <p class="toLink">
+      <span class="textBlue">上一篇:</span>
+      ：新闻资讯丨2019年江苏省大数据优良应用解决方案名单公布，中兴智能交通榜上有名！
+    </p>
+
+    <p class="toLink">
+      <span class="textBlue">下一篇:</span>
+      ：新闻资讯丨2019年江苏省大数据优良应用解决方案名单公布，中兴智能交通榜上有名！
+    </p>
+
+
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'index'
+  name: 'index',
+  mounted(){
+    console.log(this.$route.params.newsId)
+  },
+
 }
 </script>
 
 <style scoped lang="scss">
-
+  .toLink{
+    margin-top: 20px;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .textBlue{
+    color: #3366CC;
+  }
 </style>
diff --git a/src/views/news/index b/src/views/news/index
deleted file mode 100644
index 703ca39..0000000
--- a/src/views/news/index
+++ /dev/null
@@ -1,79 +0,0 @@
-<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>
--
libgit2 0.21.4