<template>
|
<view class="box">
|
<view class="box-border box-border1"></view>
|
<view class="box-border box-border2"></view>
|
<view class="box-border box-border3"></view>
|
<view class="box-border box-border4"></view>
|
<view class="box-main">
|
<slot/>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
title: {
|
type: [String,Number],
|
default: '标题'
|
},
|
},
|
computed: {
|
titleText() {
|
return this.title
|
},
|
},
|
data() {
|
return {
|
|
};
|
}
|
|
}
|
</script>
|
|
<style>
|
.box {
|
width: calc(100% - 0.2vh);
|
height: calc(100% - 0.2vh);
|
position: relative;
|
border: 0.1vh solid rgba(20, 80, 136, 1);
|
display: flex;
|
justify-content: center;
|
}
|
.box-main {
|
width: 96%;
|
height: 100%;
|
/* background-color: #31c4c4; */
|
display: flex;
|
flex-direction: column;
|
justify-content: flex-start;
|
align-items: flex-start;
|
}
|
.box-border {
|
position: absolute;
|
/* background-color: #4CD964; */
|
width: 1.5vh;
|
height: 1.5vh;
|
}
|
.box-border1 {
|
top: 0;
|
left: 0;
|
border-left: 0.1vh solid #31c4c4;
|
border-top: 0.1vh solid #31c4c4;
|
}
|
.box-border2 {
|
top: 0;
|
right: 0;
|
border-right: 0.1vh solid #31c4c4;
|
border-top: 0.1vh solid #31c4c4;
|
}
|
.box-border3 {
|
bottom: 0;
|
left: 0;
|
border-bottom: 0.1vh solid #31c4c4;
|
border-left: 0.1vh solid #31c4c4;
|
}
|
.box-border4 {
|
bottom: 0;
|
right: 0;
|
border-right: 0.1vh solid #31c4c4;
|
border-bottom: 0.1vh solid #31c4c4;
|
}
|
</style>
|
