<!--Slider滑块组件-->

<template>
    <div>
        <div v-for="item in sliderJson"
             :style="{
                    position:'absolute',
                    left:item.Left+'px',
                    top:item.Top+'px',
                    width:item.Width + 'px',
                    height:item.Height + 'px',
                    zIndex:item.ZIndex,
                    display:item.IsVisibility ? 'block' : 'none',
                    backgroundImage:'url('+require(`../../../static/images/${item.BackIcon}`)+')',
                    backgroundRepeat:'no-repeat',
                }"
        >
            <div
                    :style="{
                           width:item.imgBgWidth + 'px',
                           height:item.imgBgHeight + 'px',
                        }"
            >
                <div
                        :style="{
                            width:item.imgSliderWidth + 'px',
                            height:item.imgSliderHeight + 'px',
                            backgroundImage:'url('+require(`../../../static/images/${item.SliderIcon}`)+')',
                            backgroundRepeat:'no-repeat',
                            marginLeft:'22px',
                        }"
                        @click="clickBtn(item)"
                >

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        computed: {
            ...mapState(['sliderJson']),
        }
    }
</script>

<style scoped>

</style>
