Commit 6bb2945962fb08524beb11e041881da78cd4d8e4
1 parent
cadfb1c2
产品中心banner
Showing
4 changed files
with
88 additions
and
10 deletions
src/assets/images/commonBanner.png
0 → 100644
2.11 MB
src/components/commonBanner.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + | ||
| 3 | + <div class="banner"> | ||
| 4 | + <p>{{mainTitle}}</p> | ||
| 5 | + <p>{{subTitle}}</p> | ||
| 6 | + </div> | ||
| 7 | + | ||
| 8 | +</template> | ||
| 9 | + | ||
| 10 | +<script> | ||
| 11 | +export default { | ||
| 12 | + name: 'commonBanner', | ||
| 13 | + props:[ | ||
| 14 | + 'mainTitle', 'subTitle' | ||
| 15 | + ] | ||
| 16 | +} | ||
| 17 | +</script> | ||
| 18 | + | ||
| 19 | +<style scoped lang="scss"> | ||
| 20 | + .banner { | ||
| 21 | + background: url("../assets/images/commonBanner.png") no-repeat; | ||
| 22 | + background-size: 100% 100%; | ||
| 23 | + height: 327px; | ||
| 24 | + text-align: center; | ||
| 25 | + } | ||
| 26 | + | ||
| 27 | + .banner p:nth-of-type(1) { | ||
| 28 | + padding: 100px 0 50px; | ||
| 29 | + font-size: 40px; | ||
| 30 | + font-family: Microsoft YaHei; | ||
| 31 | + font-weight: 400; | ||
| 32 | + color: rgba(255, 255, 255, 1); | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + .banner p:nth-of-type(2) { | ||
| 36 | + font-size: 30px; | ||
| 37 | + font-family: Microsoft YaHei; | ||
| 38 | + font-weight: 400; | ||
| 39 | + color: rgba(255, 255, 255, 1); | ||
| 40 | + } | ||
| 41 | +</style> |
src/views/home/index.vue
| @@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
| 4 | <div class="swiper-container"> | 4 | <div class="swiper-container"> |
| 5 | <div class="swiper-wrapper"> | 5 | <div class="swiper-wrapper"> |
| 6 | <div class="swiper-slide swiper1"></div> | 6 | <div class="swiper-slide swiper1"></div> |
| 7 | + <div class="swiper-slide swiper2">2</div> | ||
| 7 | </div> | 8 | </div> |
| 8 | 9 | ||
| 9 | </div> | 10 | </div> |
| @@ -245,14 +246,14 @@ export default { | @@ -245,14 +246,14 @@ export default { | ||
| 245 | mounted(){ | 246 | mounted(){ |
| 246 | new Swiper ('.swiper-container', { | 247 | new Swiper ('.swiper-container', { |
| 247 | 248 | ||
| 248 | - // //自动轮播 | ||
| 249 | - // autoplay: { | ||
| 250 | - // delay: 5000, | ||
| 251 | - // //当用户滑动图片后继续自动轮播 | ||
| 252 | - // disableOnInteraction: false, | ||
| 253 | - // }, | ||
| 254 | - // //开启循环模式 | ||
| 255 | - // loop: true | 249 | + //自动轮播 |
| 250 | + autoplay: { | ||
| 251 | + delay: 5000, | ||
| 252 | + //当用户滑动图片后继续自动轮播 | ||
| 253 | + disableOnInteraction: false, | ||
| 254 | + }, | ||
| 255 | + //开启循环模式 | ||
| 256 | + loop: true | ||
| 256 | }) | 257 | }) |
| 257 | } | 258 | } |
| 258 | 259 |
src/views/product/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div>产品中心</div> | 2 | + <div> |
| 3 | + <commonProduct mainTitle="中兴智能交通" subTitle="构建绿色交通 享受安全便利出行"></commonProduct> | ||
| 4 | + <div class="tab-wrapper"> | ||
| 5 | + <ul class="tab-main widthCommon"> | ||
| 6 | + <li>智慧停车</li> | ||
| 7 | + <li>公安交通</li> | ||
| 8 | + <li>公共交通</li> | ||
| 9 | + </ul> | ||
| 10 | + </div> | ||
| 11 | + </div> | ||
| 3 | </template> | 12 | </template> |
| 4 | 13 | ||
| 5 | <script> | 14 | <script> |
| 15 | +import commonProduct from '@/components/commonBanner' | ||
| 6 | export default { | 16 | export default { |
| 7 | - name: 'index' | 17 | + name: 'index', |
| 18 | + components:{ | ||
| 19 | + commonProduct | ||
| 20 | + }, | ||
| 21 | + | ||
| 8 | } | 22 | } |
| 9 | </script> | 23 | </script> |
| 10 | 24 | ||
| 11 | <style scoped lang="scss"> | 25 | <style scoped lang="scss"> |
| 12 | 26 | ||
| 27 | + .tab-wrapper{ | ||
| 28 | + height:50px; | ||
| 29 | + background:rgba(237,237,237,1); | ||
| 30 | + /*line-height: 50px;*/ | ||
| 31 | + padding-top: 5px; | ||
| 32 | + } | ||
| 33 | + .tab-main{ | ||
| 34 | + padding-left: 100px; | ||
| 35 | + height: 45px; | ||
| 36 | + line-height: 45px; | ||
| 37 | + } | ||
| 38 | + .tab-main li{ | ||
| 39 | + float: left; | ||
| 40 | + margin-right: 50px; | ||
| 41 | + width: 125px; | ||
| 42 | + background: #FFF; | ||
| 43 | + border-radius: 5px; | ||
| 44 | + color: #333; | ||
| 45 | + font-size: 16px; | ||
| 46 | + text-align: center; | ||
| 47 | + cursor: pointer; | ||
| 48 | + } | ||
| 13 | </style> | 49 | </style> |