screenFront/src/views/MicroExhibition/component/Border.vue

<template>
    <div class="newboder">
        <!-- <img class="borderpng" src="" alt=""> -->
        <div class="title">
            <text class="title-text">{{ title }}</text>
            <div class="hr"></div>
        </div>
        
        <div class="newboder-content">
            <slot></slot>
        </div>
    </div>
</template>
  
<script setup lang='ts'>
import { computed } from 'vue'
let prop = defineProps({
    title: {
        type: String,
        default: '裁剪设备'
    }
})

// let newTitle = computed(() => {
//     return prop.title.split('').join(' ')
// })

</script>
  
<style scoped>
.newboder {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: url(./../images/border.png) no-repeat;
    background-size: 100% 100%;
}

.borderpng {
    position: absolute;
    width: 100%;
    height: 100%;
}

.title {
    position: relative;
    width: 100%;
    height: 16%;
    text-align: left;
    font-family: "华文新魏", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: rgba(0, 255, 255, 0.996078431372549);
    display: flex;
    align-items: center;
    
}
.hr {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 4px;
    background: url(./../images/hr.png) no-repeat;
    background-position: 50%;
}

.title-text {
    margin-left: 16px;
    font-weight: bold;
}

.newboder-content {
    width: 100%;
    height: 84%;
    flex: 1;
}
</style>