qjkankan_v1.1.1/packages/qjkankan-editor/src/components/Snapshot.vue

<template>
    <div class="com-player-snapshot">
        <transition
            appear
            name="custom-classes-transition"
            enter-active-class="animated fadeIn faster"
            leave-active-class="animated fadeOut faster"
        >
        <div class="flash" v-if="showFlash"></div>
        </transition>
        <div class="frame show">
            <div class="corner left-top"></div>
            <div class="corner right-top"></div>
            <div class="corner left-bottom"></div>
            <div class="corner right-bottom"></div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showFlash:false
        }
    },
    mounted(){
      this.$bus.on('toggleFlash',data=>{
          this.showFlash=data
      })
    }
};
</script>
<style lang="less" scoped>
.com-player-snapshot {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 240px);
    pointer-events: none;
    .flash {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(100% + 240px);
        background-color: rgba(255, 255, 255, 0.5);
    }
    .frame {
        position: absolute;
        z-index: 100;
        pointer-events: none;
        //opacity: 0;
        transition: opacity 0.3s, border 0.3s;
        &.show {
            width: calc(84% - 36px);
            height: calc(100% - 140px);
            border: 1px dotted rgba(255, 255, 255, 0.8);
            left: calc(8% + 18px);
            bottom: 86px;
        }
    }
    .corner {
        width: 40px;
        height: 40px;
        position: absolute;
        transition: opacity 0.3s;
        opacity: 0.8;
        &.left-top {
            border-top: 4px solid #fff;
            border-left: 4px solid #fff;
            left: -2px;
            top: -2px;
        }
        &.left-bottom {
            border-left: 4px solid #fff;
            border-bottom: 4px solid #fff;
            left: -2px;
            bottom: -2px;
        }
        &.right-top {
            border-top: 4px solid #fff;
            border-right: 4px solid #fff;
            right: -2px;
            top: -2px;
        }
        &.right-bottom {
            border-right: 4px solid #fff;
            border-bottom: 4px solid #fff;
            right: -2px;
            bottom: -2px;
        }
    }
}
[edit-mode="mobile"] {
    .com-player-snapshot {
        .frame {
            position: absolute;
            z-index: 100;
            pointer-events: none;
            transition: opacity 0.3s, border 0.3s;
            &.show {
                width: calc(84% - 36px);
                height: calc(100% - 240px);
                border: 1px dotted rgba(255, 255, 255, 0.8);
                left: calc(8% + 18px);
                top: 86px;
            }
        }
    }
}
</style>