| <template> |
| <div v-if="!ds.isHide"> |
| <image v-if="ds.floorTitle" class="title" :src="ds.floorTitle"></image> |
| <slider class="slider" show-indicators="true" auto-play="true" interval="3000"> |
| <div class="pannel" v-for="(item,i) in ds.bannerItems" :key="i" > |
| <div> |
| <banner style="margin-bottom:4" :width="NUMBER_251" :height="NUMBER_292" :src="item.img1" :href="item.url1"></banner> |
| <banner :width="NUMBER_251" :height="NUMBER_292" :src="item.img2" :href="item.url2"></banner> |
| </div> |
| <div class="middle-col"> |
| <banner :width="NUMBER_240" :height="NUMBER_588" :src="item.img3" :href="item.url3"></banner> |
| </div> |
| <div> |
| <banner style="margin-bottom:4" :width="NUMBER_251" :height="NUMBER_292" :src="item.img4" :href="item.url4"></banner> |
| <banner :width="NUMBER_251" :height="NUMBER_292" :src="item.img5" :href="item.url5"></banner> |
| </div> |
| </div> |
| <indicator |
| style="position:absolute;width:714;height:200;left:10;bottom:-80;itemSize:20;itemColor:#999999;itemSelectedColor:#000000;"></indicator> |
| </slider> |
| </div> |
| </template> |
| |
| <style scoped> |
| .title { |
| width: 750; |
| height: 100; |
| } |
| |
| .slider { |
| height: 652; |
| } |
| |
| .pannel { |
| width: 750; |
| height: 592; |
| flex-direction: row; |
| } |
| |
| .middle-col { |
| margin-left:4; |
| margin-right:4; |
| width: 240; |
| height: 588; |
| } |
| </style> |
| |
| <script> |
| module.exports = { |
| components: { |
| banner: require('./banner.vue') |
| }, |
| props: { |
| ds: { |
| default: function () { |
| return {} |
| } |
| } |
| }, |
| data: function () { |
| return { |
| NUMBER_251: 251, |
| NUMBER_240: 240, |
| NUMBER_292: 292, |
| NUMBER_588: 588 |
| } |
| } |
| } |
| </script> |