<template>
    <div class="page-pack">
        <div class="container">
            <!-- 显示区域 -->
            <div class="view-pack">
                <div class="finished-left-pack"></div>
                <div class="finished-middle-pack"></div>
                <div class="finished-right-pack"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        width: 100%;
        height: 100%;
        .container {
            width: 1556px;
            height: 1037px;
            background: url("../../../assets/images/LedCarouselAvi/led_avi_jump_bg.png");
            overflow: hidden;
            // 显示区域
            .view-pack {
                height: 896px;
                width: 1298px;
                margin-top: 106px;
                margin-left: 130px;
                position: relative;
                // 边缘闪光特效
                @keyframes shine {
                    0% {
                        border-color: rgba(255,255,255,0);
                        box-shadow: 0px 0px 0px inset rgba(255,255,255,0);
                        transform: scale(1);
                    }
                    100% {
                        border-color: rgba(255,255,255,1);
                        box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
                        transform: scale(1.05);
                    }
                }
                .finished-left-pack {
                    width: 177px;
                    height: 45px;
                    position: absolute;
                    bottom: 61px;
                    left: 546px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
                .finished-middle-pack {
                    width: 263px;
                    height: 45px;
                    position: absolute;
                    bottom: 61px;
                    left: 810px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
                .finished-right-pack {
                    width: 110px;
                    height: 45px;
                    position: absolute;
                    bottom: 61px;
                    left: 1160px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
            }
        }
    }
</style>