<template>
    <div class="dian">
        <div class="list">
            <span :style="{background: color}" v-for="(item,index) in list" :key="index"></span>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            color: {
                type: String,
                default(){
                    return '#AE342F'
                }
            }
        },
        data(){
            return {
                list: new Array(50),
            }
        },
    }
</script>

<style lang="less" scoped>
    .dian{
        position: relative;
        width: 100%;

        .list{
            position: absolute;
            top: 0;
            left: calc(50% - 400px);
            height: 10px;
            white-space: nowrap;
            text-align: center;
            overflow: hidden;

            span{
                display: inline-block;
                vertical-align: top;
                width: 8px;
                height: 8px;
                margin: 1px 4px;
                border-radius: 100%;
            }
        }
    }
</style>
