| <template> |
| <div class="container"> |
| <image v-if="ds.floorTitle" class="title" :src="ds.floorTitle"></image> |
| <div style="margin-left:4;margin-right:4"> |
| <banners direction="column" :ds="bannerItems" :width="NUMBER_742" :height="NUMBER_230" :space="NUMBER_4"></banners> |
| </div> |
| </div> |
| </template> |
| <style scoped> |
| .title { |
| width: 750; |
| height: 100; |
| } |
| |
| .container { |
| margin-bottom: 4; |
| background-color:#C0BABC; |
| } |
| </style> |
| <script> |
| module.exports = { |
| components: { |
| banners: require('./banners.vue') |
| }, |
| props: { |
| ds: { |
| default: function () { |
| return { |
| bannerItems: [] |
| } |
| } |
| } |
| }, |
| data: function () { |
| return { |
| NUMBER_742: 742, |
| NUMBER_230: 230, |
| NUMBER_4: 4 |
| } |
| }, |
| computed: { |
| bannerItems: function () { |
| return this.ds.bannerItems.slice(0,8); |
| } |
| }, |
| created: function () { |
| var bannerItems = this.ds.bannerItems |
| bannerItems.sort(function(){ |
| return Math.random()-0.5; |
| }); |
| for(var i=0;i<bannerItems.length;i++){ |
| var item = bannerItems[i]; |
| if(i%2===0){ |
| item.img = item.leftImg; |
| item.url = item.rightUrl; |
| }else{ |
| item.img = item.rightImg; |
| item.url = item.rightUrl; |
| } |
| } |
| } |
| } |
| </script> |