archives/src/views/home/components/border.vue

<template>
    <div class="hc-datav-border-box">
        <svg ref="mainRef" class="hc-datav-svg">
            <polygon fill="transparent" :points="`10, 22 ${mainWidth - 30}, 22 ${mainWidth - 30}, 64 ${mainHeight - 25}, ${mainHeight - 25} 10, 126`" />
            <polyline :points="`8, 5 ${mainWidth - 5}, 5 ${mainWidth - 5}, ${mainHeight - 100} ${mainWidth - 100}, ${mainHeight - 4} 8, ${mainHeight - 4} 8, 5`" class="hc-datav-line-1" stroke="#83bff6" />
            <polyline :points="`3, 5 ${mainWidth - 18}, 5 ${mainWidth - 18}, ${mainHeight - 74} ${mainWidth - 84}, ${mainHeight - 4} 3, ${mainHeight - 4} 3, 5`" class="hc-datav-line-2" stroke="#00CED1" />
            <polyline :points="`50, 13 ${mainWidth - 30}, 13`" class="hc-datav-line-3" stroke="#00CED1" />
            <polyline :points="`15, 20 ${mainWidth - 30}, 20`" class="hc-datav-line-4" stroke="#00CED1" />
            <polyline :points="`15, ${mainHeight - 20} ${mainWidth - 108}, ${mainHeight - 20}`" class="hc-datav-line-5" stroke="#00CED1" />
            <polyline :points="`15, ${mainHeight - 13} ${mainWidth - 108}, ${mainHeight - 13}`" class="hc-datav-line-6" stroke="#00CED1" />
        </svg>
        <div class="border-box-content" :style="{ width: `${mainWidth - 108}px` }">
            <slot />
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'

//渲染完成
onMounted(() => {
    windowResize()
    setTimeout(() => {
        onWindowResize()
    }, 500)
})

//监听浏览器窗口变化
const windowResize = () => {
    window.addEventListener('resize', resizeEvent)
}
const resizeEvent = () => {
    window.requestAnimationFrame(() => {
        onWindowResize()
    })
}

//设置尺寸
const mainRef = ref(null)
const mainWidth = ref(0)
const mainHeight = ref(0)
const onWindowResize = () => {
    const el = mainRef.value
    mainWidth.value = el.clientWidth
    mainHeight.value = el.clientHeight
}
</script>

<style scoped lang="scss">
.hc-datav-border-box {
    position: relative;
    width: 100%;
    height: 100%;
    .hc-datav-svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        polyline {
            fill: none;
        }
        .hc-datav-line-1, .hc-datav-line-2 {
            stroke-width: 1;
        }
        .hc-datav-line-3, .hc-datav-line-6 {
            stroke-width: 5;
        }
        .hc-datav-line-4, .hc-datav-line-5 {
            stroke-width: 2;
        }
    }
    .border-box-content {
        position: relative;
        width: 100%;
        height: 100%;
        padding-top: 28px;
        padding-bottom: 28px;
        padding-left: 15px;
    }
}
</style>