首页，链路分析提示框样式

src/views/index/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="index-wrap">
+    <video data-v-93f40d6c="" data-v-45e53fd3="" autoplay="autoplay" loop="loop" muted="muted" class="bg_video">
+      <source data-v-93f40d6c="" data-v-45e53fd3="" :src="homeBg" type="video/mp4">
+    </video>
     <div class="index">
       <!-- <div class="name_box">
         <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover">
@@ -175,6 +178,7 @@ import { mapGetters } from 'vuex'
 export default {
   data(){
     return {
+      homeBg:require("../../assets/home.mp4"),
       logo:require("../../assets/logo/app_logo.png"),
       // 弹出层标题
       title: '',
@@ -555,11 +559,14 @@ export default {
 
 <style lang="scss" scoped>
 .index-wrap{
-    min-width: 1250px;
+    // min-width: 1250px;
+    width:100%;
     height: 100%;
-    min-height: 600px;
+    // min-height: 600px;
+    min-height: 100vh;
     font-family: Arial,sans-serif;
     background: #fff;
+    position: relative;
     .index{
         position: relative;
         padding-bottom: 0;
@@ -575,7 +582,7 @@ export default {
       border-bottom: 0;
       height: 60px;
       line-height: 60px;
-      background: #fff;
+      // background: #fff;
       left: 0px;
       .header-right{
           position: absolute;
@@ -640,7 +647,9 @@ export default {
       // border-radius: 10px 0 0 10px;
       border-radius: 10px;
       border: 2px solid #c4c7ce;
-      background: #fff;
+      // background: #fff;
+      // background-color:transparent;
+      background-color:rgba(255,255,255,0.8);
       color: #222;
       overflow: hidden;
       box-sizing: content-box;
@@ -655,6 +664,16 @@ export default {
     }
   
 }
+
+.bg_video{
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
 .content-form ::v-deep .el-form.el-form--inline{
       text-align: center;
       margin-top:25px;
@@ -665,10 +684,14 @@ export default {
         height: 44px;
         line-height: 44px;
         border:none;
+        // background: transparent;
+         background-color:rgba(255,255,255,0.8);
   }
 .content-form ::v-deep .el-select .el-input.is-focus .el-input__inner {
     border-color:#c4c7ce;
     border:none;
+    // background: transparent;
+     background-color:rgba(255,255,255,0.8);
   }
   .block-container{
     width: 100%;
@@ -691,7 +714,9 @@ export default {
       .border-bottom{
             width: 150px;
             min-width: 120px;
-            background-color: rgb(255, 255, 255);
+            // background-color:transparent;
+             background-color:rgba(255,255,255,0.8);
+            // background-color: rgb(255, 255, 255);
             border: thin solid rgba(0,0,0,.12);
             border-bottom: 6px solid #1976d2;
             color: rgba(0,0,0,.87);

src/views/latency/components/TopoTree.vue

@@ -1507,6 +1507,11 @@ export default {
         // 自定义 tooltip 内容
         getContent: (e) => {
 
+          //  <div style='padding:10px;text-align:center'>
+          //     <img style='width:24px;height:24px;' src=${item.span_category =='apm'?this.apm:this.apis}/>
+          //  <div style='width:100%;height:100%;background:inherit;filter: blur(5px);'></div>
+          //   </div>
+
           const outDiv = document.createElement('div');
           const nodeName = e.item.getModel().name;
           const item  = e.item.getModel()
@@ -1520,29 +1525,30 @@ export default {
                   <span class='value' style='display: inline-block;vertical-align: middle;'>${detail[key]}</span>
                 </div>`;
             }
-            outDiv.innerHTML = `<div>
-            <div style='padding:10px;text-align:center'><img style='width:24px;height:24px;' src=${item.span_category =='apm'?this.apm:this.apis}/></div>
-            <div class='nodeDetail' style='height:20px;line-height:20px;'>
-              <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanID：</span>
-              <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_id}</span>
-            </div>
-            <div class='nodeDetail' style='height:20px;line-height:20px;'>
-              <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanName：</span>
-              <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_name}</span>
-            </div>
-            <div class='nodeDetail' style='height:20px;line-height:20px;'>
-              <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanCategory：</span>
-              <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_category}</span>
-            </div>
-            <div class='nodeDetail' style='height:20px;line-height:20px;'>
-              <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>Duration：</span>
-              <span class='value' style='display: inline-block;vertical-align: middle;'>${item.duration}</span>
-            </div>
-            <div class='nodeDetail' style='height:20px;line-height:20px;'>
-              <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>FlatDuration：</span>
-              <span class='value' style='display: inline-block;vertical-align: middle;'>${item.flat_duration}</span>
-            </div>
-            ${html}
+            outDiv.innerHTML = `<div style='margin:-9px;position:relative'>
+              <div style='padding:10px; z-index: -1;backdrop-filter: blur(10px);background-color: rgba(0, 0, 0, 0.8);background-image:url("${item.span_category =='apm'?this.apm:this.apis}");background-size:cover;background-repeat:no-repeat;background-position: center center;'>
+                <div class='nodeDetail' style='height:20px;line-height:20px;'>
+                  <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanID：</span>
+                  <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_id}</span>
+                </div>
+                <div class='nodeDetail' style='height:20px;line-height:20px;'>
+                  <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanName：</span>
+                  <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_name}</span>
+                </div>
+                <div class='nodeDetail' style='height:20px;line-height:20px;'>
+                  <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>SpanCategory：</span>
+                  <span class='value' style='display: inline-block;vertical-align: middle;'>${item.span_category}</span>
+                </div>
+                <div class='nodeDetail' style='height:20px;line-height:20px;'>
+                  <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>Duration：</span>
+                  <span class='value' style='display: inline-block;vertical-align: middle;'>${item.duration}</span>
+                </div>
+                <div class='nodeDetail' style='height:20px;line-height:20px;'>
+                  <span class='label' style='display: inline-block;vertical-align: middle;width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;'>FlatDuration：</span>
+                  <span class='value' style='display: inline-block;vertical-align: middle;'>${item.flat_duration}</span>
+                </div>
+                ${html}
+              </div>
             </div>
             `
             return outDiv;
@@ -1596,9 +1602,9 @@ export default {
       //   graph.render()
       //   // graph.fitCenter() // 移到图中心
       // }, 10)
-      setTimeout(() => {
-        graph.fitCenter() // 移到图中心
-      }, 10)
+      // setTimeout(() => {
+      //   graph.fitCenter() // 移到图中心
+      // }, 10)
       //添加点击事件
       graph.on("node:click", (evt) => {
         const itemData = evt.item._cfg.model;

src/views/latency/index.vue

@@ -1598,6 +1598,7 @@ ul {
 .el-tooltip__popper{ max-width:50%!important }
 [v-cloak]{
   display:none!important;
+  
 }
 
 </style>