#

whycq

2023-01-25 236bcb2b593235e2c530f21a1cfadff98c0218a0

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

@@ -1,6 +1,12 @@
<template>
   <view class="list">
      <slot/>
   <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>

@@ -27,10 +33,51 @@
</script>

<style>
   .list {
      width: 100%;
      min-height: 50rpx;
      background-color: #fff;
      margin-top: 10rpx;
   .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>