86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
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>
|
|
|