#

whycq

2022-11-16 7a958524ae462a5f28724cbb72b2338b6797385a

 Monitor-APP/components/y-box/y-box.vue

@@ -1,5 +1,9 @@
<template>
   <view class="list">
      <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>
      <slot/>
   </view>
</template>
@@ -28,9 +32,39 @@

<style>
   .list {
      width: 100%;
      min-height: 50rpx;
      background-color: #fff;
      margin-top: 10rpx;
      width: calc(100% - 0.2vh);
      height: calc(100% - 0.2vh);
      position: relative;
      border: 0.1vh solid rgba(20, 80, 136, 1);
   }
   .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>