修改部分bug,scd可视化弹窗的弹窗展示

src/pages/netStructPicture/components/basicInfo.vue

@@ -56,12 +56,13 @@
               <span
                 v-for="(item, index) in mainTitle[1].list"
                 :key="index"
-                class="circel"
-                :class="{ 'circel active-circel': index == activeCircel }"
-                @click="clickCircel(item, index, 'moLeft')"
-                ><span v-if="item.address_json != ''">{{
-                  index + 1
-                }}</span></span
+                @click="clickCircel1(item, index, 'moLeft')"
+                ><span
+                  class="circel"
+                  :class="{ 'circel active-circel': index == activeCircel1 }"
+                  v-if="item.address_json != ''"
+                  >{{ index + 1 }}</span
+                ></span
               >
             </div>
           </div>
@@ -166,12 +167,13 @@
               <span
                 v-for="(item, index) in mainTitle[2].list"
                 :key="index"
-                class="circel"
-                :class="{ 'circel active-circel': index == activeCircel }"
-                @click="clickCircel(item, index, 'moRight')"
-                ><span v-if="item.address_json != ''">{{
-                  index + 1
-                }}</span></span
+                @click="clickCircel2(item, index, 'moRight')"
+                ><span
+                  class="circel"
+                  :class="{ 'circel active-circel': index == activeCircel2 }"
+                  v-if="item.address_json != ''"
+                  >{{ index + 1 }}</span
+                ></span
               >
             </div>
           </div>
@@ -228,10 +230,13 @@
             <span
               v-for="(item, index) in mainTitle[0].list"
               :key="index"
-              class="circel"
-              :class="{ 'circel active-circel': index == activeCircel }"
-              @click="clickCircel(item, index, 'moBottom')"
-              ><span v-if="item.address_json != ''">{{ index + 1 }}</span></span
+              @click="clickCircel3(item, index, 'moBottom')"
+              ><span
+                class="circel"
+                :class="{ 'circel active-circel': index == activeCircel3 }"
+                v-if="item.address_json != ''"
+                >{{ index + 1 }}</span
+              ></span
             >
           </div>
         </div>
@@ -346,7 +351,9 @@ const mainTitle = ref(null); //每个方框的标题
 const moBottom = ref(null); //底部方框所展示的MAC-Address等desc
 const moLeft = ref(null); //左侧方框所展示的MAC-Address等desc
 const moRight = ref(null); //右侧方框所展示的MAC-Address等desc
-const activeCircel = ref(0); //点击数字圆圈的样式
+const activeCircel1 = ref(0); //点击数字圆圈的样式
+const activeCircel2 = ref(0); //点击数字圆圈的样式
+const activeCircel3 = ref(0); //点击数字圆圈的样式
 const isOpennav = ref(false); //头部点击弹窗显示
 const clickNavTitle = ref(null); //头部点击弹窗数据
 const clickNavData = ref(null); //头部点击弹窗数据
@@ -539,8 +546,27 @@ const getLine = () => {
   hiddenLine2();
 };
 //点击数字
-const clickCircel = (item, index, type) => {
-  activeCircel.value = index;
+const clickCircel1 = (item, index, type) => {
+  commonClickCircel(item, index, type,1);
+};
+const clickCircel2 = (item, index, type) => {
+  commonClickCircel(item, index, type,2);
+};
+const clickCircel3 = (item, index, type) => {
+  commonClickCircel(item, index, type,3);
+};
+const commonClickCircel = (item, index, type,num) => {
+  switch(num){
+    case 1:
+    activeCircel1.value = index;
+    break;
+    case 2:
+    activeCircel2.value = index;
+    break;
+    case 3:
+    activeCircel3.value = index;
+    break;
+  }
   let data = JSON.stringify(item.address_json);
   let newData = data
     .replace("MAC-Address", "address")
@@ -597,7 +623,9 @@ watch(
       if (leaderLines.value.length > 0) {
         leaderLines.value = [];
       }
-      activeCircel.value = 0;
+      activeCircel1.value = 0;
+      activeCircel2.value = 0;
+      activeCircel3.value = 0;
       isOpenMain.value = false;
       isOpennav.value = false;
       getNav();
@@ -764,6 +792,7 @@ const cancelClickMain = () => {
 }
 .circel {
   color: #7c58a8;
+  display: inline-block;
   width: 20px;
   height: 20px;
   margin-bottom: 5px;

src/pages/netStructPicture/components/dialogIndex.vue

@@ -75,7 +75,7 @@
             'relatio': inoutName.__name == 'relationShip',
           }"
         >
-          <!-- @result前的参数是装置关联关系的, -->
+          <!-- isPhoto是输入输出控制块的, -->
           <component
             :is="activeNavName"
             :checkData="checkData"
@@ -83,8 +83,6 @@
             :iedRelation="iedRelation"
             @result="result"
             :isPhoto="isPhoto"
-            :tabName="tabName"
-            ref="getChild"
           ></component>
         </div>
       </div>
@@ -194,13 +192,11 @@ const cancelClick = () => {
 const activeNav = ref(0);
 const activeNavName = shallowRef(relationShip);
 const inoutName = ref("");
-const tabName = ref("relationShip");
 const clickNav = (navIndex, name) => {
   //点击导航栏事件
   inoutName.value = name;
   console.log("name", name);
   activeNavName.value = name;
-  tabName.value = name;
   activeNav.value = navIndex;
 };
 const activeLeft = ref(null);
@@ -221,13 +217,6 @@ const clickInoutNav = (item, index) => {
   isPhoto.value = item.code;
   inoutItemNavIndex.value = index;
 };
-const getChild = ref(null);
-watch(
-  () => tabName.value,
-  (newValue) => {
-    getChild.value.removeLine;
-  }
-);
 </script>
   <style scoped lang="scss">
 @mixin mid-center {

src/pages/netStructPicture/components/inoutControl.vue

@@ -718,9 +718,9 @@ watch(
   () => props.checkData,
   (newValue) => {
     if (newValue) {
-      if (leaderLines2.value.length > 0) {
+      // if (leaderLines2.value.length > 0) {
         leaderLines2.value = [];
-      }
+      // }
       //清除数字圆圈
       let child = document.querySelectorAll(".circel-name");
       if (child) {
@@ -733,8 +733,8 @@ watch(
       listData2.value = newValue;
       if (tabValue.value == "photo") {
         getIedChild();
-        clickResetLine2();
         getNetworkInfo();
+        clickResetLine2();
       }
       emit("result", newValue);
     }

src/pages/netStructPicture/components/netWork.vue

@@ -109,7 +109,8 @@ const listCat = ref([]); //长横线的类型名称
 const ipNetaddrData = ref([]); //ip数据
 const loadDating = ref(false);
 const openBig = ref(false);
-const scdIdValue = 644000175;
+const scdIdValue = 644000176;
+// const scdIdValue = route.query.id;
 //线条背景颜色
 const backColorList = ref([
   {

src/pages/netStructPicture/components/relationShip.vue

@@ -64,11 +64,7 @@ const props = defineProps({
   iedRelation: {
     type: Object,
     default: () => {},
-  },
-  tabName: {
-    type: String,
-    default: "",
-  },
+  }
 });
 const middleElement = ref(null);
 const rightElement = ref(null);

src/pages/netStructPicture/components/scdDialogIndex.vue

@@ -1,44 +1,49 @@
 <!-- 整个弹窗 -->
 <template>
-  <el-dialog
-    @close="cancelClick"
-    v-model="isOpen"
-    width="70vw"
-    append-to-body
-    draggable
-  >
-    <template #header>
-      <div class="my-header">
-        <div class="title">{{ props.checkLabel }}</div>
-      </div>
-    </template>
-    <el-scrollbar height="470px">
-      <div class="container">
-        <div
-          class="cont-item"
-          v-for="(item, index) in props.dialogData"
-          :key="index"
-        >
-          <img :src="devicePng" alt="" />
-          <div class="name">{{ item.ied_name }}</div>
-          <div class="desc">{{ item.desc }}</div>
+  <div>
+    <el-dialog
+      @close="cancelClick"
+      v-model="isOpen"
+      width="70vw"
+      append-to-body
+      draggable
+    >
+      <template #header>
+        <div class="my-header">
+          <div class="title">{{ props.checkLabel }}</div>
         </div>
-      </div>
-    </el-scrollbar>
-  </el-dialog>
+      </template>
+      <el-scrollbar height="470px">
+        <div class="container">
+          <div
+            class="cont-item"
+            v-for="(item, index) in props.dialogData"
+            :key="index"
+            @click="clickIed(item)"
+          >
+            <img :src="devicePng" alt="" />
+            <div class="name">{{ item.ied_name }}</div>
+            <div class="desc">{{ item.desc }}</div>
+          </div>
+        </div>
+      </el-scrollbar>
+    </el-dialog>
+    <dialog-index
+      :openBig="openBig"
+      @done="done"
+      :checkDialogData="checkDialogData"
+      :iedRelationData="iedRelationData"
+    ></dialog-index>
+  </div>
 </template>
 <script setup>
-import {
-  getCurrentInstance,
-  onMounted,
-  reactive,
-  watch,
-  ref,
-  toRefs,
-  nextTick,
-} from "vue";
+import { watch, ref, inject, onMounted } from "vue";
 import { defineEmits } from "vue";
+import { scdIedRelation } from "@/api/iedNetwork";
 import devicePng from "@/assets/image/instruct/device.png";
+import dialogIndex from "./dialogIndex.vue";
+const scdIdValue = inject("scdId");
+const openBig = ref(false);
 const props = defineProps({
   open: {
     type: Boolean,
@@ -60,12 +65,36 @@ watch(
     isOpen.value = newValue;
   }
 );
+//弹窗=============
 const emit = defineEmits(["done", "update:visible"]);
 const cancelClick = () => {
   isOpen.value = false;
   emit("done", false);
 };
+const iedRelationData = ref([]);
+const checkDialogData = ref(null);
+const iedRelation = async () => {
+  console.log('scdIdValue', scdIdValue)
+  const iedRes = await scdIedRelation({ scd_id: scdIdValue });
+  console.log('iedRes111', iedRes)
+  iedRelationData.value = iedRes.data;
+};
+onMounted(()=>{
+  iedRelation();
+})
 
+const clickIed = (value) => {
+  openBig.value = true;
+  Object.values(iedRelationData.value).find((item) => {
+    if (item.ied_name == value.ied_name) {
+      checkDialogData.value = item;
+    }
+  });
+};
+const done = (emits) => {
+  openBig.value = emits;
+  checkDialogData.value = null;
+};
 // emit('done', data.id);
 // emit('update:visible', value);
 </script>

src/pages/netStructPicture/components/scdVisual.vue

@@ -148,6 +148,7 @@ import {
   ref,
   toRefs,
   nextTick,
+  provide
 } from "vue";
 import scdIed from "@/assets/image/instruct/scdIed.png";
 import {
@@ -158,8 +159,11 @@ import {
 } from "@/api/iedNetwork";
 import { useDataStore } from "@/store/modules/golbal-data";
 import scdDialogIndex from "./scdDialogIndex";
+import { useRoute } from "vue-router";
 const userStoreCode = useDataStore();
-const scdIdValue = 644000175;
+const route = useRoute();
+const scdIdValue = 644000176;
+// const scdIdValue = route.query.id;
 const data = reactive({
   queryParams: {
     scd_id: scdIdValue,
@@ -297,6 +301,8 @@ const changeLevel = async (value, mainValue) => {
     });
   }
 };
+//弹窗=============
+provide('scdId',scdIdValue)
 onMounted(async () => {
   iedNameData();
   allLevel.value = await userStoreCode.GlobalCodes();

src/pages/netStructPicture/components/virtualRelation.vue

@@ -128,11 +128,7 @@ const props = defineProps({
   iedRelation: {
     type: Object,
     default: () => {},
-  },
-  tabName: {
-    type: String,
-    default: "",
-  },
+  }
 });
 const svInfo = ref(null);
 const scdIdValue = inject("scdId");
@@ -346,6 +342,7 @@ const setLine = () => {
   }
   setTimeout(() => {
     setLeaderline();
+    newPositionLine();
   }, 500);
 };
 
@@ -364,10 +361,7 @@ onMounted(() => {
   }
   //不加条件切换下方tab时会出现bug
   nextTick(() => {
-    setLine();
-    nextTick(() => {
-      newPositionLine();
-    });
+    setLine()
   });
 });
 watch(

src/pages/netStructPicture/index.vue

@@ -1,58 +1,105 @@
 <template>
   <div>
-    <el-tabs v-model="activeName" class="demo-tabs">
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
       <div class="nav">
-        <div v-for="(item, index) in navtopData" :key="index" :class="{ 'nav-item-active': activeNav == index }"
-          @click="clickNav(index)" class="nav-item" style="font-size: 12px;">
+        <div
+          v-for="(item, index) in navtopData"
+          :key="index"
+          :class="{ 'nav-item-active': activeNav == index }"
+          @click="clickNav(item, index)"
+          class="nav-item"
+          style="font-size: 12px"
+        >
           {{ item.name }}
         </div>
       </div>
       <div class="mostHead" v-if="activeName == 'first' && activeNav == 0">
-        <h2 style="display: inline-block;margin-right: 2px;font-size: 20px;">CID文件一次性检测</h2>
-        <el-button type="primary" plain @click="portExcel">结果导出Excel</el-button>
+        <h2 style="display: inline-block; margin-right: 2px; font-size: 20px">
+          CID文件一次性检测
+        </h2>
+        <el-button type="primary" plain @click="portExcel"
+          >结果导出Excel</el-button
+        >
         <span class="closeX" @click="closeX">×</span>
       </div>
       <el-tab-pane label="网络结构图" name="first">
         <net-work v-if="activeName == 'first' && activeNav == null"></net-work>
         <div class="disappear" v-if="activeName == 'first' && activeNav == 0">
           <!-- 左侧树形数据 -->
-          <div style="width: 15%;">
+          <div style="width: 15%">
             <CidTree :nowScdId="nowScdId" @treeBack="treeBack"></CidTree>
           </div>
           <!-- 右侧展示图 -->
-          <div style="width: 85%; height: calc(100vh - 280px);position: relative;">
+          <div
+            style="width: 85%; height: calc(100vh - 280px); position: relative"
+          >
             <div class="abBox">
               <div>
-                <span style="border-right: 1px solid black;padding-right: 300px;font-size: 12px;">
+                <span
+                  style="
+                    border-right: 1px solid black;
+                    padding-right: 300px;
+                    font-size: 12px;
+                  "
+                >
                   基准文件:{{ arrName }}
                 </span>
               </div>
               <div>
-                <span style="font-size: 12px;">
-                  对比文件:{{ upName }}
-                </span>
+                <span style="font-size: 12px"> 对比文件:{{ upName }} </span>
               </div>
               <div class="uploadBox">
-                <el-upload ref="upload" class="upload-demo" :http-request="nowUpload" :limit="2"
-                  element-loading-text="上传中..." element-loading-background="rgba(255, 255, 255, 0.8)"
-                  :on-remove="handleRemove" :on-change="fileSuccess" :show-file-list="false">
+                <el-upload
+                  ref="upload"
+                  class="upload-demo"
+                  :http-request="nowUpload"
+                  :limit="2"
+                  element-loading-text="上传中..."
+                  element-loading-background="rgba(255, 255, 255, 0.8)"
+                  :on-remove="handleRemove"
+                  :on-change="fileSuccess"
+                  :show-file-list="false"
+                >
                   <template #trigger>
-                    <el-button style="border-bottom: 1px solid #7BBAFD;" type="text" plain>上传CID</el-button>
+                    <el-button
+                      style="border-bottom: 1px solid #7bbafd"
+                      type="text"
+                      plain
+                      >上传CID</el-button
+                    >
                   </template>
                 </el-upload>
               </div>
             </div>
-            <Gsix :activeName="activeName" :activeNav="activeNav" :backName="backName" :mustVal="mustVal"
-              :arrName="arrName" :upName="upName"></Gsix>
+            <Gsix
+              :activeName="activeName"
+              :activeNav="activeNav"
+              :backName="backName"
+              :mustVal="mustVal"
+              :arrName="arrName"
+              :upName="upName"
+            ></Gsix>
           </div>
         </div>
         <div class="scdCheck" v-if="activeName == 'first' && activeNav == 1">
           <div class="mostHead" v-if="activeName == 'first' && activeNav == 1">
-            <h2 style="display: inline-block;margin-right: 2px;font-size: 20px;">SCD文件一次性检测</h2>
+            <h2
+              style="display: inline-block; margin-right: 2px; font-size: 20px"
+            >
+              SCD文件一次性检测
+            </h2>
             <span class="closeX" @click="closeX">×</span>
           </div>
           <!-- 内容 -->
-          <div style="width: 100%;display: flex;justify-content: space-around;align-items: center;margin-top: 5px;">
+          <div
+            style="
+              width: 100%;
+              display: flex;
+              justify-content: space-around;
+              align-items: center;
+              margin-top: 5px;
+            "
+          >
             <div class="treeBtn">
               <scdTree @scdTreeBack="scdTreeBack"></scdTree>
             </div>
@@ -61,11 +108,26 @@
             </div>
           </div>
         </div>
-        <CrcCheck v-if="activeName == 'first' && activeNav == 3" :nowScdId="nowScdId"></CrcCheck>
-        <SlcCheck v-if="activeName == 'first' && activeNav == 2" :nowScdId="nowScdId"></SlcCheck>
+        <CrcCheck
+          v-if="activeName == 'first' && activeNav == 3"
+          :nowScdId="nowScdId"
+        ></CrcCheck>
+        <SlcCheck
+          v-if="activeName == 'first' && activeNav == 2"
+          :nowScdId="nowScdId"
+        ></SlcCheck>
+        <!-- 虚端子关系图 -->
+        <div v-if="clickNavCode == 'virtual'">
+          <!-- <virtual-relation 
+            :checkData="checkData"
+            :isOpen="isOpen"
+            :iedRelation="iedRelation"
+            @result="result">
+          </virtual-relation> -->
+        </div>
       </el-tab-pane>
       <el-tab-pane label="SCD可视化" name="second">
-        <scd-visual></scd-visual>
+        <scd-visual v-if="!clickNavCode"></scd-visual>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -79,103 +141,125 @@ import scdVisual from "./components/scdVisual";
 import CidTree from "./components/CidTree.vue";
 import Gsix from "./components/Gsix.vue";
 import scdTree from "./components/scdTree.vue";
-import scdMap from "./components/scdMap.vue"
-import CrcCheck from "./newTitle/CrcCheck"
+import scdMap from "./components/scdMap.vue";
+import CrcCheck from "./newTitle/CrcCheck";
 import SlcCheck from "./newTitle/SlcCheck.vue";
-import { useRoute } from 'vue-router';
+import { useRoute } from "vue-router";
 import cid from "@/api/cid/cid";
 import { ElMessage } from "element-plus";
 import systemRow from "@/api/systemRow";
 import scdCheck from "@/api/scdCheck/scdCheck";
-let route = useRoute()
-const activeName = ref("first");//默认展示网络结构图
+import virtualRelation from "./components/virtualRelation.vue";//虚端
+let route = useRoute();
+const activeName = ref("first"); //默认展示网络结构图
 const navtopData = ref([
-  { name: "CID一致性校核" },
-  { name: "SCD文件一致性校核" },
-  { name: "SCL文件校核" },
-  { name: "CRC校核" },
-  { name: "虚端子关系图" },
+  { name: "CID一致性校核", code: "CID" },
+  { name: "SCD文件一致性校核", code: "SCD" },
+  { name: "SCL文件校核", code: "SCL" },
+  { name: "CRC校核", code: "CRC" },
+  { name: "虚端子关系图", code: "virtual" },
 ]);
 const activeNav = ref(null);
-const backName = ref('')//树组件返回名称
-let mustVal = ref(false)
-let upName = ref('')//上传的文件名称
-let arrName = ref('')//基准的文件名称
-let upFile = ref({})//上传文件流
-let backId = ref('')//返回id
-let nowScdId = ref('')//路由传参的scdid
-let antherBack = ref([])
-watch(() => antherBack.value, (newVal) => {
-  antherBack.value = newVal
-}, {
-  deep: true
-})
+const backName = ref(""); //树组件返回名称
+let mustVal = ref(false);
+let upName = ref(""); //上传的文件名称
+let arrName = ref(""); //基准的文件名称
+let upFile = ref({}); //上传文件流
+let backId = ref(""); //返回id
+let nowScdId = ref(""); //路由传参的scdid
+let antherBack = ref([]);
+watch(
+  () => antherBack.value,
+  (newVal) => {
+    antherBack.value = newVal;
+  },
+  {
+    deep: true,
+  }
+);
 const reload = () => {
-  nowScdId.value = route.query.id
-}
-const clickNav = (navIndex) => {  //点击导航栏事件
+  nowScdId.value = route.query.id;
+};
+//虚端子关系====
+const isOpen = ref(false);
+//虚端子关系====
+const clickNavCode = ref(""); //点击导航栏的头部
+const clickNav = (item, navIndex) => {
+  //点击导航栏事件
+  clickNavCode.value = item.code;
   activeNav.value = navIndex;
-}
+  switch(item.code){
+    case 'virtual':
+    isOpen.value = true;
+    break;
+  }
+};
 const handleClick = (val) => {
-  if (val.props.name == 'first') {
-    activeNav.value = null
-    activeName.value = val.props.name
+  if (val.props.name == "first") {
+    activeNav.value = null;
+    activeName.value = val.props.name;
   }
-}
+  clickNavCode.value = ""
+};
 const treeBack = (data, ids) => {
-  backName.value = data
-  arrName.value = data
-  backId.value = ids
-  console.log(ids, 'ids');
-}
+  backName.value = data;
+  arrName.value = data;
+  backId.value = ids;
+  console.log(ids, "ids");
+};
 const closeX = () => {
-  activeName.value = 'first'
-  activeNav.value = null
-}
+  activeName.value = "first";
+  activeNav.value = null;
+};
 const nowUpload = (file, e) => {
-  upFile.value = file.file
-  upName.value = file.file.name
-  cid.fileUpload({ station_id: 861, file: upFile.value, data_type: "cid" }).then(res => {
-    if (res.code == 0) {
-      let idp = `${file.file.uid},${backId.value}`
-      ElMessage({
-        type: 'success',
-        message: "上传成功!"
-      })
-      scdCheck.scdStart({ type: 'cid', station_id: 861, ids: idp }).then(res => {
-        console.log(res, 'show');
-      })
-    }
-  })
-
+  upFile.value = file.file;
+  upName.value = file.file.name;
+  cid
+    .fileUpload({ station_id: 861, file: upFile.value, data_type: "cid" })
+    .then((res) => {
+      if (res.code == 0) {
+        let idp = `${file.file.uid},${backId.value}`;
+        ElMessage({
+          type: "success",
+          message: "上传成功!",
+        });
+        scdCheck
+          .scdStart({ type: "cid", station_id: 861, ids: idp })
+          .then((res) => {
+            console.log(res, "show");
+          });
+      }
+    });
 };
 
 const handleRemove = (file, e) => {
-  console.log(file, e, '删除');
-}
+  console.log(file, e, "删除");
+};
 const fileSuccess = (file, e) => {
-  mustVal.value = true
-}
+  mustVal.value = true;
+};
 function scdTreeBack(data) {
-  antherBack.value = data
+  antherBack.value = data;
 }
 const portExcel = () => {
-  systemRow.portExcel({
-    code: "scd-comp-result"
-  }).then(res => {
-    if (res.data) {
-      return
-    } else {
-      ElMessage({
-        message: res.msg,
-        type: "info"
-      })
-    }
-  })
-}
+  systemRow
+    .portExcel({
+      code: "scd-comp-result",
+    })
+    .then((res) => {
+      if (res.data) {
+        return;
+      } else {
+        ElMessage({
+          message: res.msg,
+          type: "info",
+        });
+      }
+    });
+};
 onMounted(() => {
-  reload()
-})
+  reload();
+});
 </script>
 
 <style scoped lang="scss">
@@ -224,7 +308,8 @@ $height: 40px;
   }
 
   .nav-item-active {
-    background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat center;
+    background: #fff url("~@/assets/image/instruct/navtop_active.png") no-repeat
+      center;
     background-size: 144px $height;
     color: #fff;
   }
@@ -245,7 +330,7 @@ $height: 40px;
 .mostHead {
   width: 97%;
   height: auto;
-  border-bottom: 1px solid #A3ADE0;
+  border-bottom: 1px solid #a3ade0;
   margin: 0px auto;
   position: relative;
 }
@@ -303,6 +388,6 @@ $height: 40px;
   width: 65%;
   height: calc(100vh - 205px);
   // border: 1px solid teal;
-  background-color: #F6F8FA;
+  background-color: #f6f8fa;
 }
 </style>