<template>
  	<section class="activity-box">
        <div class="activity-count">共4个活动</div>
        <div class="activity-list">
            <div class="activity-item" v-for="(item,index) in list" :key="index">
                <img src="../../images/Shape@2x.png" class="img"/>
                <div class="time">活动时间：9月3日-9月9日</div>
            </div>
        </div>
        <BackTop></BackTop>
    </section>
</template>

<script>
import BackTop from '../../components/common/backTop';
export default {
    data(){
        return {
            tittle:'活动掠影',
            list:[{},{},{},{}]
        }
    },
    components:{
       BackTop
    },
	mounted(){
       document.tittle = this.tittle;
    },

    methods:{
       
    },
}

</script>

<style lang="scss" scoped>
    @import '../../style/mixin';
    .activity-box{
        padding: px2rem(15px);
        background: #fff;
    }
    .activity-count{
        color: #999;
        font-size: px2rem(15px);
    }
    .activity-item{
        position: relative;
        width: px2rem(345px);
        height: px2rem(170px);
        margin-top:px2rem(15px);
        box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
        .img{
            width: 100%;
            height: 100%;
        }
        .time{
            position: absolute;
            color:#fff;
            height: px2rem(25px);
            line-height: px2rem(25px);
            background: RGBA(0, 0, 0, 0.1);
            border-radius: 0 0 px2rem(5px) px2rem(5px);
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: 10;
            font-size: px2rem(14px);
            padding-left: px2rem(5px);
        }
    }

</style>
