<!-- 滚动窗口 -->
<template>
    <div class="scroll-window">
        <img v-if="direction" class="top top-right" src="../../assets/img/line-right-top.png" />
        <img v-else class="top top-left" src="../../assets/img/line-left-top.png" />
        <div class="main">
          <slot />
        </div>
        <!-- 右下 -->
        <img v-if="!direction && !isTop" class="icon icon-bottom bottom-right" src="../../assets/img/win-right-bottom.png" />
        <!-- 右上 -->
        <img v-if="!direction && isTop" class="icon icon-top bottom-right" src="../../assets/img/win-right-top.png" />
        <!-- 左下 -->
        <img v-if="direction && !isTop" class="icon icon-bottom bottom-left" src="../../assets/img/win-left-bottom.png" />
        <!-- 左上 -->
        <img v-if="direction && isTop" class="icon icon-top bottom-left" src="../../assets/img/win-left-top.png" />
    </div>
</template>

<script>
    export default {
        // 方向，0为左边，1为右边
        props: ['direction', 'isTop'],
    }
</script>

<style lang="scss" scoped>
    .scroll-window{
        width: 100%;
        height: 100%;
        position: relative;
        
        .top{
            width: 8.5rem;
            height: auto;
            position: absolute;
            top: -0.25rem;
        }
        .top-left {
            left: 0;
        }
        .top-right {
            right: 0;
        }
        
        .icon {
            width: 5.75rem;
            height: auto;
            position: absolute;
        }
        .icon-top{
          top: -0.6rem;
        }
        .icon-bottom{
            bottom: -0.75rem;
        }
        .bottom-left {
            left: -0.625rem;
        }
        .bottom-right {
            right: -0.625rem;
        }
        
        .main{
            height: 100%;
            // background-color: rgba(10,23,55,0.80);
            border: 1px solid rgba(9,77,148,0.50);
            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
            padding: 0.5rem 0;
            box-sizing: border-box;
        }
        
    }
</style>
