构建版本修改

components/layout/AiDvWrapper/rightTopBorder.vue

@@ -0,0 +1,62 @@
+<template>
+  <section class="rightTopBorder">
+    <div class="corner" v-for="item in border" :key="item" :class="item"/>
+    <slot/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "rightTopBorder",
+  data() {
+    return {
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.rightTopBorder {
+  position: relative;
+  height: 32px;
+  min-width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 4px 2px #1745DE inset;
+  background: rgba(#000972, .3) no-repeat center;
+
+  .corner {
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    display: block;
+    background-image: url("./assets/corner.svg");
+    background-repeat: no-repeat;
+
+    &.left-top {
+      left: -6px;
+      top: -6px;
+      transform: rotateY(180deg);
+    }
+
+    &.right-top {
+      right: -6px;
+      top: -6px;
+    }
+
+    &.left-bottom {
+      left: -6px;
+      bottom: -6px;
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+
+    &.right-bottom {
+      right: -6px;
+      bottom: -6px;
+      transform: rotateX(180deg);
+    }
+  }
+}
+</style>