| <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> |