<template>

  <div class="container" @click="handcontainerclick">

    <div class="wrapper">

      <swiper :options = "swiperOptions">

        <swiper-slide v-for="(item, index) of imgs" :key="index">

          <img class="gallar-img" :src="item" />

        </swiper-slide>

        <div class="swiper-pagination" slot="pagination"></div>

      </swiper>

    </div>

  </div>

</template>

<script>

export default {

  name: "commonGallary",

  props:{

      imgs:{

          type:Array,

          default (){

              return[]

          }

      }

  },

  methods:{

    handcontainerclick(){

      this.$emit('close')

    }

  },

  data() {

      return {

          swiperOptions:{

              pagination:".swiper-pagination",

              paginationType:"fraction",

              observeParents:true,

              observe:true

          }

      }

  },

};

</script>

<style lang="stylus" scoped>

.container>>>.swiper-container

    overflow inherit

.container

    position fixed

    z-index 99

    display flex

    flex-direction column

    justify-content center

    top 0

    left 0

    bottom 0

    right 0

    background #fff

    .wrapper

        width 100%

        height 0

        padding-bottom 100%

        .gallar-img

            width 100%

        .swiper-pagination

            color #fff

            bottom -3rem

</style>

<template>

    <div>

        <div class="banner" @click="handbannerclick">

            <img class="banner-img" 

            src="http://img1.qunarzz.com/sight/p0/2009/27/27c0cfa011a2eb3ba3.water.jpg_600x330_ac7005ac.jpg">

            <div class="banner-info">

                <div class="banner-number">

                    <span class="iconfont arrow-icon banner-icon">

                        &#xe764;

                    </span>

                    123

                </div>

                <div class="banner-tittle">长龙野生动物世界（AAAAA景区）</div>

            </div>

        </div>

        <common-gallary :imgs = "imgs" 

        v-show = "showGallary"

        @close = "handcontainerclose"></common-gallary>

    </div>

</template>

<script>

import commonGallary from "common/gallary/Gallary"

    export default {

        name:"detailBanner",

        data() {

            return {

                showGallary: false,

                imgs:['http://img1.qunarzz.com/sight/p0/1412/76/9cc3fb9a8948dd37453042baf2a03788.water.jpg_r_800x800_b02c8bdf.jpg'

                    ,'http://img1.qunarzz.com/sight/p0/1412/79/5a16eac67d677bd3971bd7873655d5e2.water.jpg_r_800x800_889765d1.jpg']

            }

        },

        methods:{

            handbannerclick (){

                this.showGallary=true

            },

            handcontainerclose(){

                this.showGallary = false

            }

        },

        components:{

            commonGallary

        }

    }

</script>

<style lang="stylus" scoped>

.banner

    position relative

    overflow hidden

    height 0

    padding-bottom 55%

    .banner-img

        width 100%

    .banner-info

        position absolute

        left 0

        bottom 0

        right 0

        line-height .5rem

        color #fff

        // 黑色渐变效果

        background-image linear-gradient(top , rgba(0, 0, 0, 0), rgba(0,0 ,0,0.9))

        .banner-number

            padding 0 .4rem

            width 12%

            margin-left .4rem

            height .4rem

            line-height .4rem

            border-radius .2rem

            background rgba(0,0,0,.8)

            font-size .24rem

            .banner-icon

                font-size .24rem

        .banner-tittle

            flex 1

            font-size .35rem

            padding 0 .4rem

</style>