sis_zhfx/src/components/coms/panel/panel3.vue

<template>
  <div class="com-panel-3">
    <span class="dot top-left"></span>
    <span class="dot bottom-left"></span>
    <span class="dot top-rignt"></span>
    <span class="dot bottom-right"></span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "com-panel-3",
  componentName: "com-panel-3",
};
</script>
<style lang="less" scoped>
.com-panel-3 {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.741vh;
  display: inline-block;
  border: 0.093vh solid #536268;

  .dot {
    position: absolute;
    width: 0.370vh;
    height: 0.370vh;
    background: #fff;

    &.top-left {
      top: 0.556vh;
      left: 0.556vh;
    }

    &.bottom-left {
      bottom: 0.556vh;
      left: 0.556vh;
    }

    &.top-rignt {
      top: 0.556vh;
      right: 0.556vh;
    }

    &.bottom-right {
      bottom: 0.556vh;
      right: 0.556vh;
    }
  }
}
</style>