diff --git a/src/components/module/module-one-1-1.vue b/src/components/module/module-one-1-1.vue
index 317ba30..fd4034e 100644
--- a/src/components/module/module-one-1-1.vue
+++ b/src/components/module/module-one-1-1.vue
@@ -1,22 +1,54 @@
 <template>
-    <div class="screen-module">
-            <border-box6 v-if="border==6"/>
-            <div class="screen-one-1-1">
-                <div class="module-title"><span>{{label||''}}</span></div>
-                <slot></slot> 
-            </div>
+    <div class="screen-module" :class="'border-' + border">
+        <border-box6 v-if="border == 6" />
+        <border-box1 v-if="border == 1" />
+        <div class="screen-one-1-1">
+            <div class="module-title"><span>{{ label || '' }}</span></div>
+            <slot></slot>
         </div>
+    </div>
 </template>
 
 <script>
 export default {
-    props:{
-        border:{
-            type:Number
+    props: {
+        border: {
+            type: Number
         },
-        label:{
-            type:String
+        label: {
+            type: String
         }
     }
 };
-</script>
\ No newline at end of file
+</script>
+<style lang="less" scoped>
+.screen-module {
+    &.border-6 {
+        position: relative;
+        /deep/ .dv-border-svg-container{
+            top:14px;
+        }
+
+        .screen-one-1-1 {
+            background: unset;
+            .module-title{
+                position: relative;
+                top:20px;
+            }
+        }
+    }
+    &.border-1 {
+        position: relative;    
+        background: rgba(5,12,25,0.6);
+        .screen-one-1-1 {
+            background: unset;
+            .module-title{
+                position: relative;
+                top: 20px;
+                left:20px;
+            }
+        }
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/components/BorderBox1.vue b/src/pages/components/BorderBox1.vue
index b8416c6..fd658f4 100644
--- a/src/pages/components/BorderBox1.vue
+++ b/src/pages/components/BorderBox1.vue
@@ -1,77 +1,76 @@
 <template>
     <div  class="dv-border-box-1">
-      <svg class="border" :width="width" :height="height">
-        <polygon
-          :fill="backgroundColor"
-          :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
-                                                                                38, ${
-                                                                                  height - 11
-                                                                                } 41, ${
-            height - 8
-          } 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
-                                                                                85, ${height - 6} ${
-            width - 85
-          }, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
-                                                                                ${width - 73}, ${
-            height - 8
-          } ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
-                                                                                ${width - 24}, ${
-            height - 11
-          } ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
-                                                                                ${width - 10}, ${
-            height - 27
-          } ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
-                                                                                ${width - 24}, 11 ${
-            width - 38
-          }, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
-                                                                                ${width - 81}, 10 ${
-            width - 85
-          }, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
+    <svg class="border" :width="width" :height="height">
+      <polygon
+        :fill="backgroundColor"
+        :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+                                                                              38, ${
+                                                                                height - 11
+                                                                              } 41, ${
+          height - 8
+        } 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+                                                                              85, ${height - 6} ${
+          width - 85
+        }, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+                                                                              ${width - 73}, ${
+          height - 8
+        } ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+                                                                              ${width - 24}, ${
+          height - 11
+        } ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+                                                                              ${width - 10}, ${
+          height - 27
+        } ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+                                                                              ${width - 24}, 11 ${
+          width - 38
+        }, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+                                                                              ${width - 81}, 10 ${
+          width - 85
+        }, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"
+      />
+    </svg>
+
+    <svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
+      <polygon
+        :fill="colorLeft"
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colorLeft};${colorRight};${colorLeft}`"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
         />
-      </svg>
-  
-      <svg v-for="item in border" :key="item" width="150px" height="150px" :class="`${item} border`">
-        <polygon
-          :fill="colorLeft"
-          points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
-        >
-          <animate
-            attributeName="fill"
-            :values="`${colorLeft};${colorRight};${colorLeft}`"
-            dur="0.5s"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-        </polygon>
-        <polygon
-          :fill="colorRight"
-          points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
-        >
-          <animate
-            attributeName="fill"
-            :values="`${colorRight};${colorLeft};${colorRight}`"
-            dur="0.5s"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-        </polygon>
-        <polygon
-          :fill="colorLeft"
-          points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
-        >
-          <animate
-            attributeName="fill"
-            :values="`${colorLeft};${colorRight};transparent`"
-            dur="1s"
-            begin="0s"
-            repeatCount="indefinite"
-          />
-        </polygon>
-      </svg>
-    </div>
+      </polygon>
+      <polygon
+        :fill="colorRight"
+        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colorRight};${colorLeft};${colorRight}`"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        :fill="colorLeft"
+        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colorLeft};${colorRight};transparent`"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+    </svg>
+  </div>
   </template>
   <script>
-import { watch } from 'vue';
 
   export default{
     props:{
@@ -86,21 +85,29 @@ import { watch } from 'vue';
         colorRight:{
             type:String,
             default:'#235fa7'
-        },
-        width:{
-            type:Number,
-            default:150
-        },
-        height:{
-            type:Number,
-            default:150
-        }
+        }       
     },
     data(){
         return {
-            border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
+          width:150,
+          height:150,
+          border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
         }
-    }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          console.log("--->",els)
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
+    },
+
     
     
   }
diff --git a/src/pages/components/BorderBox2.vue b/src/pages/components/BorderBox2.vue
new file mode 100644
index 0000000..675b74c
--- /dev/null
+++ b/src/pages/components/BorderBox2.vue
@@ -0,0 +1,106 @@
+<template>
+     <div class="dv-border-box-2">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+          7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
+        `"
+      />
+
+      <polyline
+        :stroke="color1"
+        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
+      />
+      <polyline
+        :stroke="color2"
+        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
+      />
+      <circle :fill="color1" cx="11" cy="11" r="1" />
+      <circle :fill="color1" :cx="width - 11" cy="11" r="1" />
+      <circle :fill="color1" :cx="width - 11" :cy="height - 11" r="1" />
+      <circle :fill="color1" cx="11" :cy="height - 11" r="1" />
+    </svg>
+  </div>
+  </template>
+  <script>
+  export default{
+    props:{
+        backgroundColor:{
+            type:String,
+            default:'#00000000'
+        },        
+        color1:{
+            type:String,
+            default:'#4fd2dd'
+        },
+        color2:{
+            type:String,
+            default:'#235fa7'
+        }       
+    },
+    data(){
+        return {
+          width:150,
+          height:150,
+          border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
+        }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          console.log("--->",els)
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
+    },
+
+    
+    
+  }
+</script>
+  
+  <style lang="less" scoped>
+  .dv-border-box-1 {
+    // position: relative;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  
+    .border {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  
+    .right-top {
+      right: 0;
+      transform: rotateY(180deg);
+    }
+  
+    .left-bottom {
+      bottom: 0;
+      transform: rotateX(180deg);
+    }
+  
+    .right-bottom {
+      right: 0;
+      bottom: 0;
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+  
+    .border-box-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/components/BorderBox3.vue b/src/pages/components/BorderBox3.vue
new file mode 100644
index 0000000..ad12be8
--- /dev/null
+++ b/src/pages/components/BorderBox3.vue
@@ -0,0 +1,129 @@
+<template>
+     <div class="dv-border-box-6">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+          9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+        `"
+      />
+
+      <circle :fill="colorRight" cx="5" cy="5" r="2" />
+      <circle :fill="colorRight" :cx="width - 5" cy="5" r="2" />
+      <circle :fill="colorRight" :cx="width - 5" :cy="height - 5" r="2" />
+      <circle :fill="colorRight" cx="5" :cy="height - 5" r="2" />
+      <polyline :stroke="colorLeft" :points="`10, 4 ${width - 10}, 4`" />
+      <polyline
+        :stroke="colorLeft"
+        :points="`10, ${height - 4} ${width - 10}, ${height - 4}`"
+      />
+      <polyline :stroke="colorLeft" :points="`5, 70 5, ${height - 70}`" />
+      <polyline
+        :stroke="colorLeft"
+        :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`"
+      />
+      <polyline :stroke="colorLeft" :points="`3, 10, 3, 50`" />
+      <polyline :stroke="colorLeft" :points="`7, 30 7, 80`" />
+      <polyline :stroke="colorLeft" :points="`${width - 3}, 10 ${width - 3}, 50`" />
+      <polyline :stroke="colorLeft" :points="`${width - 7}, 30 ${width - 7}, 80`" />
+      <polyline
+        :stroke="colorLeft"
+        :points="`3, ${height - 10} 3, ${height - 50}`"
+      />
+      <polyline
+        :stroke="colorLeft"
+        :points="`7, ${height - 30} 7, ${height - 80}`"
+      />
+      <polyline
+        :stroke="colorLeft"
+        :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`"
+      />
+      <polyline
+        :stroke="colorLeft"
+        :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`"
+      />
+    </svg>
+  </div>
+  </template>
+  <script>
+
+  export default{
+    props:{
+      backgroundColor:{
+            type:String,
+            default:'#00000000'
+        },        
+        colorLeft:{
+            type:String,
+            default:'#11eefd'
+        },
+        colorRight:{
+            type:String,
+            default:'#0078d2'
+        }       
+    },
+    data(){
+        return {
+          width:150,
+          height:150,
+          border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
+        }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          console.log("--->",els)
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
+    },
+
+    
+    
+  }
+</script>
+  
+  <style lang="less" scoped>
+  .dv-border-box-1 {
+    // position: relative;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  
+    .border {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  
+    .right-top {
+      right: 0;
+      transform: rotateY(180deg);
+    }
+  
+    .left-bottom {
+      bottom: 0;
+      transform: rotateX(180deg);
+    }
+  
+    .right-bottom {
+      right: 0;
+      bottom: 0;
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+  
+    .border-box-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/components/BorderBox4.vue b/src/pages/components/BorderBox4.vue
new file mode 100644
index 0000000..34c4645
--- /dev/null
+++ b/src/pages/components/BorderBox4.vue
@@ -0,0 +1,144 @@
+<template>
+     <div class="dv-border-box-8">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <path :id="path" :d="pathD()" fill="transparent" />
+        <radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stop-color="#fff" stop-opacity="1" />
+          <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </radialGradient>
+
+        <mask :id="mask">
+          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+            <animateMotion :dur="`${dur}s`" :path="pathD()" rotate="auto" repeatCount="indefinite" />
+          </circle>
+        </mask>
+      </defs>
+
+      <polygon
+        :fill="backgroundColor"
+        :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`"
+      />
+
+      <use :stroke="colorLeft" stroke-width="1" :xlink:href="`#${path}`" />
+
+      <use
+        :stroke="colorRight"
+        stroke-width="3"
+        :xlink:href="`#${path}`"
+        :mask="`url(#${mask})`"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          :from="`0, ${length}`"
+          :to="`${length}, 0`"
+          :dur="`${dur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+  </div>
+  </template>
+  <script>
+
+  export default{
+    props:{
+      backgroundColor:{
+            type:String,
+            default:'#00000000'
+        },        
+        colorLeft:{
+            type:String,
+            default:'#11eefd'
+        },
+        colorRight:{
+            type:String,
+            default:'#0078d2'
+        },
+        reverse:{
+          type:Boolean,
+          default:false
+        },
+        dur:{
+          type:Number,
+          default:3
+        }
+    },
+    data(){
+        return {
+          width:150,
+          height:150,
+          border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
+        }
+    },
+    methods:{
+      pathD(){
+        if (this.reverse) {
+        return `M 2.5, 2.5 L 2.5, ${this.height - 2.5} L ${this.width - 2.5}, ${
+          this.height - 2.5
+        } L ${this.width - 2.5}, 2.5 L 2.5, 2.5`
+      }
+
+      return `M2.5, 2.5 L${this.width - 2.5}, 2.5 L${this.width - 2.5}, ${this.height - 2.5} L2.5, ${
+        this.height - 2.5
+      } L2.5, 2.5`
+      }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          console.log("--->",els)
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
+    },
+
+    
+    
+  }
+</script>
+  
+  <style lang="less" scoped>
+  .dv-border-box-1 {
+    // position: relative;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  
+    .border {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  
+    .right-top {
+      right: 0;
+      transform: rotateY(180deg);
+    }
+  
+    .left-bottom {
+      bottom: 0;
+      transform: rotateX(180deg);
+    }
+  
+    .right-bottom {
+      right: 0;
+      bottom: 0;
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+  
+    .border-box-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/components/BorderBox5.vue b/src/pages/components/BorderBox5.vue
new file mode 100644
index 0000000..7def0f4
--- /dev/null
+++ b/src/pages/components/BorderBox5.vue
@@ -0,0 +1,223 @@
+<template>
+    <div  class="dv-border-box-9">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <animate
+            attributeName="x1"
+            values="0%;100%;0%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <animate
+            attributeName="x2"
+            values="100%;0%;100%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <stop offset="0%" :stop-color="colorLeft">
+            <animate
+              attributeName="stop-color"
+              :values="`${colorLeft};${colorRight};${colorLeft}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" :stop-color="colorRight">
+            <animate
+              attributeName="stop-color"
+              :values="`${colorRight};${colorLeft};${colorRight}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
+              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.52}, 3 ${width * 0.58}, 3
+              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
+              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${height * 0.55} 8, ${height * 0.7}
+              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${
+              height * 0.35
+            }`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${
+              height * 0.8
+            }
+              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${
+              height - 9
+            }
+            `"
+          />
+        </mask>
+      </defs>
+
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+          15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+          ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+          ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${
+          height * 0.1 - 6
+        }
+          ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${
+          height * 0.8 + 6
+        }
+          ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${
+          height - 6
+        }
+          11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+        `"
+      />
+
+      <rect
+        x="0"
+        y="0"
+        :width="width"
+        :height="height"
+        :fill="`url(#${gradientId})`"
+        :mask="`url(#${maskId})`"
+      />
+    </svg>
+  </div>
+  </template>
+  <script>
+
+  export default{
+    props:{
+      backgroundColor:{
+            type:String,
+            default:'#00000000'
+        },        
+        colorLeft:{
+            type:String,
+            default:'#11eefd'
+        },
+        colorRight:{
+            type:String,
+            default:'#0078d2'
+        }       
+    },
+    data(){
+        return {
+          width:150,
+          height:150,
+          border:['left-top', 'right-top', 'left-bottom', 'right-bottom']
+        }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          console.log("--->",els)
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
+    },
+
+    
+    
+  }
+</script>
+  
+  <style lang="less" scoped>
+  .dv-border-box-1 {
+    // position: relative;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  
+    .border {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  
+    .right-top {
+      right: 0;
+      transform: rotateY(180deg);
+    }
+  
+    .left-bottom {
+      bottom: 0;
+      transform: rotateX(180deg);
+    }
+  
+    .right-bottom {
+      right: 0;
+      bottom: 0;
+      transform: rotateX(180deg) rotateY(180deg);
+    }
+  
+    .border-box-content {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/pages/components/BorderBox6.vue b/src/pages/components/BorderBox6.vue
index f95a343..f2c0584 100644
--- a/src/pages/components/BorderBox6.vue
+++ b/src/pages/components/BorderBox6.vue
@@ -56,24 +56,26 @@ export default {
         colorRight:{
             type:String,
             default:'#2cf7fe'
-        },
-        width:{
-            type:Number,
-            default:150
-        },
-        height:{
-            type:Number,
-            default:150
-        }
+        },       
     },
     data() {
         return {
-            
+          width:150,
+          height:150
         };
     },
 
     mounted() {
-        
+      this.$nextTick(()=>{
+        let resizeObserver = new ResizeObserver(els=>{          
+          if(els.length>0){
+            let el=els[0];
+            this.width=el.contentRect?.width||150;
+            this.height=el.contentRect?.height||150;
+          }
+        });
+        resizeObserver.observe(this.$parent.$el);
+      });
     },
 
     methods: {
diff --git a/src/pages/init.js b/src/pages/init.js
index 31b9560..cb66cbd 100644
--- a/src/pages/init.js
+++ b/src/pages/init.js
@@ -7,12 +7,14 @@ import {tryToJson} from '../utils/tools'
 import H265Player from '../components/h265-player/index'
 import { Loading } from 'element-ui';
 import BorderBox6 from './components/BorderBox6.vue'
+import BorderBox1 from './components/BorderBox1.vue'
 import moduleOne11 from '../components/module/module-one-1-1.vue'
 Loading.install(Vue);
 H265Player.install(Vue);
 dayfilter(Vue);
 const vue=new Vue();
 Vue.component("border-box6",BorderBox6)
+Vue.component("border-box1",BorderBox1)
 Vue.component("module-one-1-1",moduleOne11)
 Vue.prototype.$api=Api;
 Vue.prototype.$bus=vue;
diff --git a/src/pages/projectEngin.vue b/src/pages/projectEngin.vue
index e4cf558..57a3b25 100644
--- a/src/pages/projectEngin.vue
+++ b/src/pages/projectEngin.vue
@@ -9,35 +9,35 @@
         <div class="screen-content">
             <el-row>
                 <el-col :span="8">
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="现场管理标准化">
 
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果2">
+                    <module-one-1-1 label="作业标准" >
                    
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="安全技术标准">
                         
                     </module-one-1-1>
                 </el-col>
                 <el-col :span="8">
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="审批进度" :border="1">
 
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="待审批" :border="1">
                         
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="集团期刊" :border="1">
                         
                     </module-one-1-1>
                 </el-col>
                 <el-col :span="8">
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="设备管理标准">
 
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="文明施工标准">
                         
                     </module-one-1-1>
-                    <module-one-1-1 label="项目成果">
+                    <module-one-1-1 label="环境保护标准">
                         
                     </module-one-1-1>
                 </el-col>