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 | 4 | <div class="swiper-container"> |
| 5 | 5 | <div class="swiper-wrapper"> |
| 6 | 6 | <div class="swiper-slide swiper1"></div> |
| 7 | + <div class="swiper-slide swiper2">2</div> | |
| 7 | 8 | </div> |
| 8 | 9 | |
| 9 | 10 | </div> |
| ... | ... | @@ -245,14 +246,14 @@ export default { |
| 245 | 246 | mounted(){ |
| 246 | 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 | 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 | 12 | </template> |
| 4 | 13 | |
| 5 | 14 | <script> |
| 15 | +import commonProduct from '@/components/commonBanner' | |
| 6 | 16 | export default { |
| 7 | - name: 'index' | |
| 17 | + name: 'index', | |
| 18 | + components:{ | |
| 19 | + commonProduct | |
| 20 | + }, | |
| 21 | + | |
| 8 | 22 | } |
| 9 | 23 | </script> |
| 10 | 24 | |
| 11 | 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 | 49 | </style> | ... | ... |