经典案例列表

liuqimichale
1 parent 0c75b35c
Showing 3 changed files with 88 additions and 8 deletions
src/assets/images/case/case.png
src/views/case/index.vue
src/views/news/index.vue
 <template>
-    <div class="widthCommon" style="margin-bottom: 20px;">
+    <div class="widthCommon" >
       <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner>
       <div class="tab-wrapper">
         <ul class="tab-main widthCommon">
@@ -11,6 +11,38 @@
           >{{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" 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>
+
     </div>
 </template>
  
@@ -27,11 +59,11 @@ export default {
   data(){
     return{
       tabData:[
-        '公司要闻','行业动态','技术前沿', '团队活动'
+        '智慧停车','公安交通','公共交通'
       ],
       currentIndex:0,
       tabView:'selectTab0',
-      name:'公司要闻'
+      name:'智慧停车'
     }
   },
   methods:{
@@ -40,11 +72,59 @@ export default {
       this.currentIndex = index
       this.tabView = 'selectTab'+index
       this.name = item
-    }
+    },
+    pagePhotoChange:function (pInfo) {
+      console.log(pInfo)
+    },
   }
 }
 </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>
 <template>
   <div>
-    <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct>
+    <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner>
     <div class="tab-wrapper">
       <ul class="tab-main widthCommon">
         <li
@@ -26,7 +26,7 @@
 </template>
  
 <script>
-import commonProduct from '@/components/commonBanner'
+import commonBanner from '@/components/commonBanner'
 import selectTab0 from './components/selectTab0'
 import selectTab1 from './components/selectTab1'
 import selectTab2 from './components/selectTab2'
@@ -34,7 +34,7 @@ import selectTab3 from &#39;./components/selectTab3&#39;
 export default {
   name: 'index',
   components: {
-    commonProduct, selectTab0, selectTab1, selectTab2, selectTab3
+    commonBanner, selectTab0, selectTab1, selectTab2, selectTab3
   },
   data(){
     return{