<template>
    <!-- 面/色漆工作区跳转页面 -->
    <div class="page-pack">
        <div class="container">
            <!-- 显示区域 -->
            <div class="view-pack">
                <div class="complexion-paint-left-pack"></div>
                <div class="complexion-paint-middle-pack"></div>
                <div class="complexion-paint-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);
                    }
                    100% {
                        border-color: rgba(255,255,255,1);
                        box-shadow: 0px 0px 200px inset rgba(255,255,255,1);
                    }
                }
                .complexion-paint-left-pack {
                    width: 175px;
                    height: 291px;
                    position: absolute;
                    top: 498px;
                    right: 575px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
                .complexion-paint-middle-pack {
                    width: 265px;
                    height: 291px;
                    position: absolute;
                    top: 498px;
                    right: 224px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
                .complexion-paint-right-pack {
                    width: 108px;
                    height: 291px;
                    position: absolute;
                    top: 498px;
                    right: 29px;
                    animation: shine 1000ms ease-out infinite alternate;
                }
            }
        }
    }
</style>