Commit f7dec07deb5e7bd8ea5eb3ecf0d70e6a46f193f8
1 parent
0c75b35c
经典案例 列表
Showing
3 changed files
with
88 additions
and
8 deletions
src/assets/images/case/case.png
0 → 100644
1.03 MB
src/views/case/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="widthCommon" style="margin-bottom: 20px;"> | 2 | + <div class="widthCommon" > |
| 3 | <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner> | 3 | <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner> |
| 4 | <div class="tab-wrapper"> | 4 | <div class="tab-wrapper"> |
| 5 | <ul class="tab-main widthCommon"> | 5 | <ul class="tab-main widthCommon"> |
| @@ -11,6 +11,38 @@ | @@ -11,6 +11,38 @@ | ||
| 11 | >{{item}}</li> | 11 | >{{item}}</li> |
| 12 | </ul> | 12 | </ul> |
| 13 | </div> | 13 | </div> |
| 14 | + | ||
| 15 | + <div class="bread "> | ||
| 16 | + <div class=" widthCommon"> | ||
| 17 | + 您所在位置: <span class="pointer" @click="$router.push({name:'home'})">首页</span> -> 经典案例 -> {{name}} | ||
| 18 | + </div> | ||
| 19 | + </div> | ||
| 20 | + | ||
| 21 | + <div class="widthCommon" style="margin-bottom: 20px;"> | ||
| 22 | + <ul class="caseList"> | ||
| 23 | + <li v-for="item in 10" :key="item"> | ||
| 24 | + <img src="../../assets/images/case/case.png" alt=""> | ||
| 25 | + <p class="caseName">项目名称：黄石智慧停车项目</p> | ||
| 26 | + <p class="caseAddress">项目地址： 湖北· 黄石</p> | ||
| 27 | + <ul class="mark-wrapper"> | ||
| 28 | + <li> | ||
| 29 | + <span>车位：10000</span> | ||
| 30 | + </li> | ||
| 31 | + <li> | ||
| 32 | + <span>规划、</span> | ||
| 33 | + <span>建设、</span> | ||
| 34 | + <span>运营</span> | ||
| 35 | + </li> | ||
| 36 | + </ul> | ||
| 37 | + | ||
| 38 | + <div class="pointer toDetail">查看详情 》</div> | ||
| 39 | + </li> | ||
| 40 | + </ul> | ||
| 41 | + | ||
| 42 | + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange"> | ||
| 43 | + </v-page> | ||
| 44 | + </div> | ||
| 45 | + | ||
| 14 | </div> | 46 | </div> |
| 15 | </template> | 47 | </template> |
| 16 | 48 | ||
| @@ -27,11 +59,11 @@ export default { | @@ -27,11 +59,11 @@ export default { | ||
| 27 | data(){ | 59 | data(){ |
| 28 | return{ | 60 | return{ |
| 29 | tabData:[ | 61 | tabData:[ |
| 30 | - '公司要闻','行业动态','技术前沿', '团队活动' | 62 | + '智慧停车','公安交通','公共交通' |
| 31 | ], | 63 | ], |
| 32 | currentIndex:0, | 64 | currentIndex:0, |
| 33 | tabView:'selectTab0', | 65 | tabView:'selectTab0', |
| 34 | - name:'公司要闻' | 66 | + name:'智慧停车' |
| 35 | } | 67 | } |
| 36 | }, | 68 | }, |
| 37 | methods:{ | 69 | methods:{ |
| @@ -40,11 +72,59 @@ export default { | @@ -40,11 +72,59 @@ export default { | ||
| 40 | this.currentIndex = index | 72 | this.currentIndex = index |
| 41 | this.tabView = 'selectTab'+index | 73 | this.tabView = 'selectTab'+index |
| 42 | this.name = item | 74 | this.name = item |
| 43 | - } | 75 | + }, |
| 76 | + pagePhotoChange:function (pInfo) { | ||
| 77 | + console.log(pInfo) | ||
| 78 | + }, | ||
| 44 | } | 79 | } |
| 45 | } | 80 | } |
| 46 | </script> | 81 | </script> |
| 47 | 82 | ||
| 48 | <style scoped lang="scss"> | 83 | <style scoped lang="scss"> |
| 49 | - | 84 | +.caseList{ |
| 85 | + overflow: hidden; | ||
| 86 | +} | ||
| 87 | +.caseList>li{ | ||
| 88 | + width: 400px; | ||
| 89 | + height: 529px; | ||
| 90 | + float: left; | ||
| 91 | + margin-right:90px ; | ||
| 92 | + margin-bottom: 92px; | ||
| 93 | + background:rgba(228,228,228,1); | ||
| 94 | + img{ | ||
| 95 | + width: 400px; | ||
| 96 | + height: 354px; | ||
| 97 | + } | ||
| 98 | +} | ||
| 99 | +.caseList>li:nth-of-type(3n+0){ | ||
| 100 | + margin-right: 0; | ||
| 101 | +} | ||
| 102 | + .caseName,.caseAddress{ | ||
| 103 | + padding-left: 20px; | ||
| 104 | + font-size: 14px; | ||
| 105 | + color: #333; | ||
| 106 | + } | ||
| 107 | + .caseName{ | ||
| 108 | + padding-top: 20px; | ||
| 109 | + padding-bottom: 20px; | ||
| 110 | + } | ||
| 111 | + .mark-wrapper{ | ||
| 112 | + margin: 20px 0; | ||
| 113 | + padding-left: 20px; | ||
| 114 | + overflow: hidden; | ||
| 115 | + } | ||
| 116 | + .mark-wrapper li{ | ||
| 117 | + padding: 5px 10px; | ||
| 118 | + float: left; | ||
| 119 | + margin-right: 17px; | ||
| 120 | + background:rgba(54,114,248,.4); | ||
| 121 | + border-radius:4px; | ||
| 122 | + font-size: 14px; | ||
| 123 | + color: #333; | ||
| 124 | + } | ||
| 125 | + .toDetail{ | ||
| 126 | + text-align: center; | ||
| 127 | + font-size: 14px; | ||
| 128 | + color: #3366CC; | ||
| 129 | + } | ||
| 50 | </style> | 130 | </style> |
src/views/news/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct> | 3 | + <commonBanner mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonBanner> |
| 4 | <div class="tab-wrapper"> | 4 | <div class="tab-wrapper"> |
| 5 | <ul class="tab-main widthCommon"> | 5 | <ul class="tab-main widthCommon"> |
| 6 | <li | 6 | <li |
| @@ -26,7 +26,7 @@ | @@ -26,7 +26,7 @@ | ||
| 26 | </template> | 26 | </template> |
| 27 | 27 | ||
| 28 | <script> | 28 | <script> |
| 29 | -import commonProduct from '@/components/commonBanner' | 29 | +import commonBanner from '@/components/commonBanner' |
| 30 | import selectTab0 from './components/selectTab0' | 30 | import selectTab0 from './components/selectTab0' |
| 31 | import selectTab1 from './components/selectTab1' | 31 | import selectTab1 from './components/selectTab1' |
| 32 | import selectTab2 from './components/selectTab2' | 32 | import selectTab2 from './components/selectTab2' |
| @@ -34,7 +34,7 @@ import selectTab3 from './components/selectTab3' | @@ -34,7 +34,7 @@ import selectTab3 from './components/selectTab3' | ||
| 34 | export default { | 34 | export default { |
| 35 | name: 'index', | 35 | name: 'index', |
| 36 | components: { | 36 | components: { |
| 37 | - commonProduct, selectTab0, selectTab1, selectTab2, selectTab3 | 37 | + commonBanner, selectTab0, selectTab1, selectTab2, selectTab3 |
| 38 | }, | 38 | }, |
| 39 | data(){ | 39 | data(){ |
| 40 | return{ | 40 | return{ |