边框组件加功能

ruoyi-ui/src/views/JiHeExpressway/components/CameraShower/index.vue

@@ -176,7 +176,9 @@ $colorLabel: #3DE8FF;
   .flex1{
     flex: 1; height:0;
   }
-  .videoPlayer { height: 246px; }
+  .videoPlayer { height: 246px;
+    .video-stream{ width: 100%; height: 100%;}
+  }
   .operation{
     display: flex; flex-direction: row; height: 36px; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom:1px solid #3DE8FF; position: relative;
     .selectCam{ display: flex; flex-direction: row;

ruoyi-ui/src/views/JiHeExpressway/components/Decorations/BackgroundClip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='BackgroundClip' :style="{ '--clip-path': clipPath, '--border-path': borderPath,'--border-color': borderColor, '--bg-color': bgColor }">
+  <div class='BackgroundClip' :style="{ '--clip-path': clipPath, '--border-path': borderPath, '--border-color': borderColor, '--bg-color': bgColor }" :class="borderPath?'hasBorder':'noBoarder'">
     <slot />
   </div>
 </template>
@@ -29,20 +29,39 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-.BackgroundClip {
-  clip-path: var(--border-path);
+.hasBorder {
+  clip-path: var(--clip-path);
   position: relative;
-  background: var(--border-color);
+  background: var(--bg-color);
   color: #fff;
 
   &::before {
     content: "";
     position: absolute;
-    clip-path: var(--clip-path);
+    clip-path: var(--border-path);
     left: 0;
     top:0;
     width: 100%;
     height: 100%;
+    background: var(--border-color);
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+
+
+
+.noBoarder {
+  clip-path: var(--clip-path);
+  position: relative;
+  background: var(--border-color);
+  color: #fff;
+
+  &::before {
+    content: "";
+    position: absolute;
+    clip-path: var(--clip-path);
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);

ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-1.vue

@@ -1,5 +1,7 @@
 <template>
-  <BackgroundClip class='BG-01' :clipPath="getClipPath" :borderPath="getBorderPath" bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)"
+  <!-- :borderPath="getBorderPath"  -->
+  <BackgroundClip class='BG-01' :clipPath="getClipPath"
+    bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)"
     borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))">
     <slot />
   </BackgroundClip>
@@ -24,7 +26,8 @@ export default {
       return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})`
     },
     getBorderPath() {
-      return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})`
+      // return `polygon(${this.width} 0%, calc(100% - ${this.width}) 0%, 100% ${this.width}, 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0% calc(100% - ${this.width}), 0% ${this.width})`
+      return `polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 74% 69%, 19% 83%, 15% 100%, 100% 100%, 100% 0%)`
     }
   }
 }

ruoyi-ui/src/views/JiHeExpressway/components/Decorations/bg-2.vue

@@ -1,6 +1,7 @@
 <template>
   <div class='BG-02' :style="{ '--width': width, '--lang-width': langWidth }">
-    <BackgroundClip ref="BackgroundClipRef" class="bg" :clipPath="getClipPath" :borderPath="getBorderPath"
+    <!-- :borderPath="getBorderPath" -->
+    <BackgroundClip ref="BackgroundClipRef" class="bg" :clipPath="getClipPath" 
       bgColor="linear-gradient(180deg, #152E3C 0%, #163A45 100%)"
       borderColor="linear-gradient(180deg, rgba(40, 144, 167, 1), rgba(40, 144, 167, 0.38), rgba(40, 144, 167, 1))">
       <slot />
@@ -40,7 +41,8 @@ export default {
       return `polygon(calc(100% - ${this.langWidth} - ${this.width} * 2) 0, calc(100% - ${this.langWidth}) calc(${this.width} * 1.5), calc(100% - ${this.width} * 1.4) calc(${this.width} * 1.5), 100% calc(${this.width} * 3), 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0 calc(100% - ${this.width}), 0 ${this.width}, ${this.width} 0)`
     },
     getBorderPath() {
-      return `polygon(calc(100% - ${this.langWidth} - ${this.width} * 2) 0, calc(100% - ${this.langWidth}) calc(${this.width} * 1.5), calc(100% - ${this.width} * 1.4) calc(${this.width} * 1.5), 100% calc(${this.width} * 3), 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0 calc(100% - ${this.width}), 0 ${this.width}, ${this.width} 0)`
+      // return `polygon(calc(100% - ${this.langWidth} - ${this.width} * 2) 0, calc(100% - ${this.langWidth}) calc(${this.width} * 1.5), calc(100% - ${this.width} * 1.4) calc(${this.width} * 1.5), 100% calc(${this.width} * 3), 100% calc(100% - ${this.width}), calc(100% - ${this.width}) 100%, ${this.width} 100%, 0 calc(100% - ${this.width}), 0 ${this.width}, ${this.width} 0)`
+      return `polygon(20% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 74% 69%, 19% 83%, 15% 100%, 100% 100%, 100% 0%)`
     }
   },
   methods: {

ruoyi-ui/src/views/JiHeExpressway/components/empty.vue

@@ -26,7 +26,7 @@ export default {
 
 <style lang='scss' scoped>
 .empty {
-  padding-top:160px;
+  // padding-top:160px;
   color: #8A9EAA;
   display: flex;
   justify-content: center;

ruoyi-ui/src/views/JiHeExpressway/pages/service/board/index.vue

@@ -76,7 +76,7 @@
               </div>
             </div>
           </vuescroll>
-          <Empty v-else title="请从设备回读或从模板添加信息..."></Empty>
+          <Empty v-else text="请从设备回读或从模板添加信息..." style="padding-top: 100px;"></Empty>
         </div>
       </div>
       <!-- ++++++++++右边部分：信息模板++++++++++ -->