<!--
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/views/monitoring/maliciousFile/SpreadThelogDetail.vue
 * @Date: 2022-09-03 17:11:59
 * @Description: 
 * @LastEditTime: 2023-08-31 15:45:40
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from "vue";
import CommonTabs from "../../../components/CommonTabs/CommonTabs.vue";
import { dateSwitchOptions } from "../../../settings";
import GraphEcharts from "./components/graphEcharts.vue";
import { ElScrollbar } from "element-plus";
import noData from "../../../assets/image/no-data.png";
import { getDetail } from "../../../api/monitoring/maliciousFile/SpreadThelog";
import img1 from "../../../assets/image/warn/warn12.png";
import img3 from "../../../assets/image/warn/warn10.png";
import img2 from "../../../assets/image/warn/warn11.png";
import { onMouseWheel, addEvent } from "../../../utils/utils";
import { children } from "dom7";
import { useRouter } from "vue-router";
const tabs = ref([
  {
    title: "静态信息",
    value: 1,
  },
  {
    title: "行为分析",
    value: 2,
  },
]);
const currentTabName = ref(1);
const dateRef = ref(0);
const dateOptions = ref([]);
const generalizeDetails = ref([
  {
    label: "病毒所属家族",
    value: "",
  },
  // {
  //   label:'代码类型',
  //   value:''
  // },
  {
    label: "采集时间",
    value: "",
  },
  // {
  //   label:'病毒类别',
  //   value:''
  // },
  {
    label: "病毒名称",
    value: "",
  },
  // {
  //   label:'病毒变种版本',
  //   value:''
  // },
]);
const generalize = ref({});
const staticDetails = ref({});
const behaviorDetails = ref([]);
const evolutionDetails = ref([]);
const stateStatic = ref(false);
const getData = async () => {
  let id = router.currentRoute.value.query.id;
  let res = await getDetail({ id: id });
  console.log(res);
  const { code, data } = res || {};
  if (code === 200 && data) {
    let gen = data.generalizeDetails || {};
    generalize.value = gen;
    generalizeDetails.value[0].value = gen.fileFamily;
    // generalizeDetails.value[1].value = gen.codeType;
    generalizeDetails.value[1].value = gen.collectionTime;
    // generalizeDetails.value[3].value = gen.virusType;
    generalizeDetails.value[2].value = gen.virusName;
    // generalizeDetails.value[5].value = gen.virusVarietyVersion;
    staticDetails.value = res.data.staticDetails || {};
    behaviorDetails.value = res.data.behaviorDetails;
    evolutionData.value = res.data.evolutionDetails || [];
    // 测试代码
    evolutionData.value.forEach((item) => {
      item.children = item.evolutionDetailsChildrenIpVOS || [];
      item.children?.forEach((child) => {
        child.lineLen = Math.random() * 150 + 100;
      });
    });
    // 判断是否只有两级且都无子集
    if (evolutionData.value.length === 2) {
      const hasChild = evolutionData.value.find((item) => {
        return item.children && item.children.length;
      });
      if (!hasChild) {
        stateStatic.value = true;
        handleNodeData(evolutionData.value[1], evolutionData.value[0], "enter");
      }
    }
  }
};
const router = useRouter();

const pageContentDetail = reactive({
  value: "传播日志详情",
});

// 传播链
const evolutionData = ref([]);

// 传播关系
const relationNode = ref({});

// 获取节点代码
const maskNode = ref(false); // 节点遮罩

/**
 * 获取选中节点关系
 * @param origin - 原始节点数据
 * @param target - 目标节点数据  stateStatic.value
 * @param state - enter/leave 滑进滑出
 */
const handleNodeData = (origin, target, state, step?) => {
  maskNode.value = state === "enter" ? true : false;
  origin.originHover = state === "enter" ? true : false;
  target.targetHover = state === "enter" ? true : false;
  origin.checked = state === "enter" ? true : false;
  relationNode.value.show = stateStatic.value
    ? true
    : state === "enter"
      ? true
      : false;
  relationNode.value.originIp = origin.srcIp || "-";
  relationNode.value.originOperator = origin.operator || "-";
  relationNode.value.originEnterprise = origin.enterprise || "-";
  relationNode.value.targetIp =
    step === 2 ? target.destIp : target.srcIp || "-";
  relationNode.value.targetOperator =
    step === 2 ? target.destOperator : target.operator || "-";
  relationNode.value.targetEnterprise =
    step === 2 ? target.destEnterprise : target.enterprise || "-";
  relationNode.value.targetCollectionTime = target.collectionTime || "-";
  //子节点滑入滑出
  if (step === 2) {
    if (state === "enter") {
      origin.maskLine = true;
      origin.children?.forEach((item) => {
        // item.checked = true;
        item.maskLine = true;
      });
      // origin.children[i].checked = false;
      target.maskLine = false;
    } else {
      origin.maskLine = false;
      origin.children?.forEach((item) => {
        // item.checked = false;
        item.maskLine = false;
      });
    }
  } else {
    //父节点滑入滑出
    origin.children?.forEach((child) => {
      child.maskLine = state === "enter" ? true : false;
    });
    target.children?.forEach((child) => {
      child.maskLine = state === "enter" ? true : false;
    });
    target.checked = state === "enter" ? true : false;
    target.maskLine = state === "enter" ? true : false;
  }
};
const handleImgHover = (data, hover?) => {
  nextTick(() => {
    data.targetHover = hover;
  });
};
const scale = ref(1);
onMounted(() => {
  getData();
  var box = document.getElementById("ya-curtain");
  console.log();
  scale.value = (box?.clientWidth as number) / 1267;
  addEvent(box, "mousewheel", onMouseWheel);
  addEvent(box, "DOMMouseScroll", onMouseWheel);
});
</script>

<template>
  <ElScrollbar>
    <div class="common-page-container ya-bg-colors">
      <YaContentDetail class="page-detail-title" :obj="pageContentDetail" />
      <ElRow class="custom-row" justify="space-between">
        <ElCol :md="14" :lg="16" :xl="18">
          <div class="detail-right ya-fill-color" id="ya-curtain">
            <!-- 关系图 -->
            <div class="ya-box" v-drag id="ya-graph" :style="'width: ' +
              200 * evolutionData.length +
              'px;transform: scale(' +
              scale || 1 + ');'
              ">
              <div class="ya-box-item" :class="{ checked: item.checked, maskNode: maskNode }"
                v-for="(item, i) in evolutionData" :key="i">
                <div class="ya-title" :class="{ first: i === 0 }">
                  {{ item.srcIp }}
                </div>
                <template v-if="i !== 0">
                  <img :class="{
                    notchoose: item.targetHover,
                    nodeStaticHide: stateStatic,
                  }" class="icon_state icon_origin" src="../../../assets/image/warn/icon_origin.png" draggable="false"
                    alt="" />
                  <img :class="{
                    choose: stateStatic || item.originHover,
                    nodeStatic: stateStatic,
                  }" class="icon_state icon_origin_o" src="../../../assets/image/warn/icon_origin_o.png"
                    draggable="false" alt="" />
                  <img :class="{
                    choose: !stateStatic && item.targetHover,
                    notchoose: item.originHover,
                    nodeStaticHide: stateStatic,
                  }" class="icon_state icon_origin_hover" src="../../../assets/image/warn/icon_origin_hover.png"
                    draggable="false" alt="" />
                </template>
                <template v-if="i == 0">
                  <!-- <span
                    style="width: 200px; z-index: 2"
                    @mouseenter="handleImgHover(item, true)"
                    @mouseleave="handleImgHover(item)"
                  > -->
                  <img class="icon_state icon_target" src="../../../assets/image/warn/icon_target.png" :class="{
                    notchoose: item.targetHover,
                    nodeStaticHide: stateStatic,
                  }" draggable="false" alt="" />
                  <img class="icon_state icon_target_hover" :class="{
                    choose: item.targetHover,
                    nodeStatic: stateStatic,
                  }" src="../../../assets/image/warn/icon_target_hover.png" draggable="false" alt="" />
                  <!-- </span> -->
                </template>
                <div class="ya_line" v-if="i !== 0" :class="{ maskNode: item.maskLine }">
                  <div class="line"></div>
                </div>
                <!-- 移入移出效果.ya_line -->
                <div class="ya_line transparent" @mouseenter="
                  handleNodeData(item, evolutionData[i - 1], 'enter')
                  " @mouseleave="
    handleNodeData(item, evolutionData[i - 1], 'leave')
    " v-if="i !== 0"></div>
                <!-- 子节点 -->
                <div class="ya_child">
                  <div class="ya_child_item" :style="'transform: rotate(' + 18 * (j + 1) + 'deg)'"
                    :class="{ maskNode: child.maskLine }" v-for="(child, j) in item.children" :key="j">
                    <div class="ya_child_line" :style="'width: ' + child.lineLen + 'px'"></div>
                    <div class="ya_child_dot"></div>
                    <div class="ya_child_text" :style="'transform: rotate(' +
                      (i % 2 === 0 ? '+' : '-') +
                      (i % 2 === 0 ? 180 - 18 * (j + 1) : 18 * (j + 1)) +
                      'deg)'
                      ">
                      {{ child.destIp }}
                    </div>
                  </div>
                </div>
                <!-- 虚拟子节点 -->
                <div class="ya_child transparent">
                  <div class="ya_child_item" :style="'transform: rotate(' + 18 * (j + 1) + 'deg)'"
                    v-for="(child, j) in item.children" @mouseenter="handleNodeData(item, child, 'enter', 2)"
                    @mouseleave="handleNodeData(item, child, 'leave', 2)" :key="j">
                    <div class="ya_child_line" :style="'width: ' + child.lineLen + 'px'"></div>
                    <div class="ya_child_dot"></div>
                    <div class="ya_child_text" :style="'transform: rotate(' +
                      (i % 2 === 0 ? '+' : '-') +
                      (i % 2 === 0 ? 180 - 18 * (j + 1) : 18 * (j + 1)) +
                      'deg)'
                      ">
                      {{ child.destIp }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 左上角数据框 -->
            <div class="ya-boxInfo">
              <div class="ya-boxInfo-title">
                <span>恶意代码传播图</span>默认追溯四级传播源IP
              </div>
              <div v-if="relationNode.show" class="ya-boxInfo-cot">
                <div class="ya-boxInfo_item">
                  <span>源IP</span>
                  <span class="ya_text">{{ relationNode.originIp }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>源IP运营商</span>
                  <span class="ya_text">{{ relationNode.originOperator }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>源IP单位</span>
                  <span class="ya_text" :title="relationNode.originEnterprise">{{ relationNode.originEnterprise }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>目的IP</span>
                  <span class="ya_text">{{ relationNode.targetIp }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>目的IP运营商</span>
                  <span class="ya_text">{{ relationNode.targetOperator }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>目的IP单位</span>
                  <span class="ya_text" :title="relationNode.targetEnterprise">{{ relationNode.targetEnterprise }}</span>
                </div>
                <div class="ya-boxInfo_item">
                  <span>传播时间</span>
                  <span class="ya_text">{{
                    relationNode.targetCollectionTime
                  }}</span>
                </div>
              </div>
            </div>
            <!-- 左下角图例 -->
            <div class="detail-right-content">
              <div class="detail-right-flex">
                <div>
                  <img src="../../../assets/image/warn/icon_target_small.png" alt="" class="icon_legend" />
                </div>
                <div>目的IP</div>
              </div>
              <div class="detail-right-flex">
                <div>
                  <img src="../../../assets/image/warn/icon_origin_small.png" alt="" class="icon_legend" />
                </div>
                <div>主要传播源IP</div>
              </div>
              <div class="detail-right-flex">
                <div>
                  <i style="background-color: #00fcff; border-radius: 50%" class="icon_legend"></i>
                </div>
                <div>其他传播目的IP</div>
              </div>
            </div>
            <!-- <GraphEcharts :LIST="evolutionDetails" v-if="evolutionDetails.length > 0" :LINKS="links"/>
            
            <ya-empty v-if="evolutionDetails.length == 0"></ya-empty> -->
          </div>
        </ElCol>
        <ElCol :md="10" :lg="8" :xl="6">
          <div class="relation-schema-box">
            <div class="family">
              <div class="flex family-title ya-primary-text">
                <div class="img1">
                  <img src="../../../assets/image/warn/warn8.png" />
                </div>
                <div>{{ generalize.fileMd5 || "-" }}</div>
              </div>
              <div class="flex family-content" v-for="item in generalizeDetails">
                <div class="family-content-title ya-regular-text">
                  {{ item.label }}
                </div>
                <div class="family-item ya-regular-text">
                  {{ item.value || "-" }}
                </div>
              </div>
              <div class="flex family-content">
                <div class="family-content-title ya-regular-text">
                  病毒风险等级
                </div>
                <div class="family-item flex">
                  <div class="family-item-icon-title" :class="[
                    generalize.virusRiskGrade == '高危'
                      ? 'family-item-icon-title-tall'
                      : generalize.virusRiskGrade == '无风险'
                        ? 'ya-regular-text'
                        : '',
                  ]">
                    {{ generalize.virusRiskGrade || "-" }}
                  </div>
                </div>
              </div>
              <!-- <div class="flex family-content">
                <div class="family-content-title ya-regular-text">病毒能力</div>
                <div class="family-item flex ya-regular-text">
                  <div>
                    <i class="iconfont icon-bingdunengli"></i>
                  </div>
                  <div class="family-item-icon-title">{{generalize.virusAbility}}</div>
                </div>
              </div> -->
            </div>
            <div>
              <CommonTabs :tabs="tabs" v-model:tabValue="currentTabName" v-model:roundValue="dateRef"
                :roundOptions="dateOptions" />
              <div class="static" v-if="currentTabName == 1">
                <div class="static-info">
                  <div class="img2">
                    <img src="../../../assets/image/warn/warn9.png" />
                  </div>
                  <div>
                    <div class="static-title ya-primary-text">
                      {{ staticDetails.fileName }}
                    </div>
                    <div class="static-tip">
                      文件类型：{{ staticDetails.fileType || "-" }}
                    </div>
                  </div>
                </div>
                <div>
                  <div class="static-flex family-content">
                    <div class="family-content-title1 ya-regular-text">
                      文件MD5
                    </div>
                    <div class="family-item ya-regular-text">
                      {{ staticDetails.fileMd5 || "-" }}
                    </div>
                  </div>
                  <div class="static-flex family-content">
                    <div class="family-content-title1 ya-regular-text">
                      文件大小
                    </div>
                    <div class="family-item ya-regular-text">
                      {{ staticDetails.fileSize || "-" }}
                    </div>
                  </div>
                  <!-- <div class="static-flex family-content">
                    <div class="family-content-title ya-regular-text">文件来源</div>
                    <div class="family-item">{{staticDetails.fileSource}}</div>
                  </div> -->
                </div>
              </div>
              <div class="behavior" v-if="currentTabName == 2">
                <ElScrollbar>
                  <div class="behavior-content" v-if="behaviorDetails.length > 0">
                    <div class="behavior-flex" v-for="item in behaviorDetails">
                      <div class="behavior-icon">
                        <!-- <i class="iconfont icon-hangweifenxi"></i> -->
                        <svg t="1668672830794" class="icon icon-hangweifenxi" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="3574" width="25" height="25">
                          <path
                            d="M844.928 190.208l104.32 59.605333a21.333333 21.333333 0 0 1 10.752 18.517334v151.68a21.333333 21.333333 0 0 1-10.752 18.517333l-171.221333 97.877333a21.333333 21.333333 0 0 1-31.914667-18.474666l-0.426667-122.538667a21.333333 21.333333 0 0 0-10.666666-18.474667L645.546667 325.802667a21.333333 21.333333 0 0 1 0.298666-37.205334l178.133334-98.517333a21.333333 21.333333 0 0 1 20.906666 0.128z m-138.154667-41.813333L530.773333 248.192a21.333333 21.333333 0 0 1-21.12-0.042667L326.144 143.232a21.333333 21.333333 0 0 1 0-37.034667L501.461333 6.058667a21.333333 21.333333 0 0 1 21.162667 0l184.192 105.301333a21.333333 21.333333 0 0 1-0.042667 37.077333zM250.026667 874.410667L74.752 774.186667A21.333333 21.333333 0 0 1 64 755.626667v-184.874667a21.333333 21.333333 0 0 1 31.872-18.56L271.36 651.946667a21.333333 21.333333 0 0 1 10.837333 18.602666l-0.256 185.344a21.333333 21.333333 0 0 1-31.914666 18.517334z m122.368 69.888l-0.085334-198.4a21.333333 21.333333 0 0 1 31.872-18.602667l99.285334 56.405333a21.333333 21.333333 0 0 0 21.12-0.042666l98.048-56.064a21.333333 21.333333 0 0 1 31.957333 18.602666l-0.853333 184.618667a21.333333 21.333333 0 0 1-10.794667 18.432l-120.405333 68.736a21.333333 21.333333 0 0 1-21.162667 0l-128.853333-73.642667h-0.085334v-0.042666zM430.208 305.066667L293.333333 382.72a21.333333 21.333333 0 0 0-10.794666 18.517333l-0.128 115.2a21.333333 21.333333 0 0 1-32 18.432l-175.786667-101.461333A21.333333 21.333333 0 0 1 64 414.933333V268.373333a21.333333 21.333333 0 0 1 10.752-18.517333l118.741333-67.84a21.333333 21.333333 0 0 1 21.162667 0l215.466667 123.093333h0.085333z m91.392 52.266666l123.690667 70.656a21.333333 21.333333 0 0 1 10.752 18.602667l-0.725334 147.541333a21.333333 21.333333 0 0 1-10.752 18.432l-119.893333 68.565334a21.333333 21.333333 0 0 1-21.248-0.085334l-120.533333-69.632a21.333333 21.333333 0 0 1-10.666667-18.432l-0.085333-140.373333a21.333333 21.333333 0 0 1 11.008-18.688l138.496-76.586667zM960 534.826667v220.842666a21.333333 21.333333 0 0 1-10.752 18.517334l-170.282667 97.28a21.333333 21.333333 0 0 1-31.957333-18.474667l-0.512-183.808a21.333333 21.333333 0 0 1 10.752-18.56l202.752-115.797333z"
                            p-id="3575" fill="#1296db"></path>
                        </svg>
                      </div>
                      <div>
                        <div class="behavior-title ya-regular-text">
                          {{ item.behaviorName }}
                        </div>
                        <div class="ya-regular-text">
                          {{ item.behaviorContent }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <ya-empty v-else></ya-empty>
                </ElScrollbar>
              </div>
            </div>
          </div>
        </ElCol>
      </ElRow>
    </div>
  </ElScrollbar>
</template>

<style lang="scss" scoped>
.ya-box {
  position: absolute;
  height: 600px;
  width: 870px;

  // left: 50%;
  // top: 50%;
  // transform: translate(-50%, -50%);
  .maskNode {
    opacity: 0.3;
  }

  .checked {
    opacity: 1;
  }

  .ya-box-item {
    display: flex;
    position: absolute;
    width: 200px;
    height: 200px;
    z-index: 1;

    .ya-title {
      position: absolute;
      left: 50%;
      top: 18px;
      transform: translateX(-50%);
      background: rgba(10, 253, 244, 0.35);
      border: 1px solid #0afdf4;
      color: #fff;
      padding: 0 4px;

      &.first {
        top: 6px !important;
      }
    }

    .icon_state {
      position: absolute;
    }

    .icon_origin,
    .icon_origin_o,
    .icon_origin_hover {
      width: 200px;
      top: 0;
    }

    .icon_target_hover,
    .icon_origin_hover,
    .icon_origin_o {
      display: none;
    }

    // .icon_origin_o,
    // .icon_origin_hover {
    //   // display: none;
    // }
    .icon_target,
    .icon_target_hover {
      width: 250px;
      top: -8px;
      left: -25px;
    }

    &:hover {

      .icon_target,
      .icon_origin {
        display: none;
      }

      .icon_target_hover,
      .icon_origin_hover {
        display: block;
      }
    }

    .notchoose {
      display: none !important;
    }

    .choose {
      display: block !important;
    }

    .nodeStaticHide {
      display: none !important;
    }

    .nodeStatic {
      display: block !important;
    }

    .ya_line {
      height: 14px;
      width: 220px;
      z-index: -1;
      position: absolute;
      overflow: hidden;
      background: rgba(70, 124, 244, 0.2);
      box-shadow: 0px 0px 11px 0px rgb(0 246 255 / 38%);

      .line {
        position: absolute;
        background-image: url("./line.png");
        animation: f1 3s linear 0s infinite;
        width: 100%;
        height: 4px;
        top: 50%;
        transform: translateY(-50%);
      }

      @keyframes f1 {
        0% {
          background-position: 100%;
        }

        50% {
          background-position: 50%;
        }

        100% {
          background-position: 0px;
        }
      }

      &.transparent {
        z-index: 2;
        background-color: transparent;
        cursor: pointer;
      }
    }

    &:nth-child(1) {
      color: red;
      bottom: 100px;
    }

    &:nth-child(2) {
      color: red;
      top: 100px;
      left: 200px;

      .ya_line {
        transform: rotate(-56deg) translate(-225px, 27px);
      }
    }

    &:nth-child(3) {
      color: red;
      bottom: 100px;
      left: 400px;

      .ya_line {
        transform: rotate(55deg) translate(-63px, 95px);
      }
    }

    &:nth-child(4) {
      color: red;
      top: 100px;
      left: 600px;

      .ya_line {
        transform: rotate(-54deg) translate(-229px, 27px);
        width: 225px;
      }
    }

    &:nth-child(5) {
      color: red;
      bottom: 100px;
      left: 800px;

      .ya_line {
        transform: rotate(55deg) translate(-63px, 95px);
      }
    }

    &:nth-child(2n-1) {
      .ya-title {
        top: 44px;
      }

      .icon_origin,
      .icon_origin_o,
      .icon_origin_hover {
        top: 26px;
      }

      .ya_child {
        transform: rotate(180deg) translateX(14px);
      }
    }

    .ya_child {
      position: absolute;
      z-index: -1;
      width: 20px;
      height: 20px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .ya_child_item {
        position: absolute;
        z-index: 0;
        right: 10px;
        bottom: 10px;
        transform-origin: right;

        .ya_child_line {
          width: 100px;
          cursor: pointer;
          height: 4px;
          background-color: #596c89;
          background-image: url("./line_yellow.png");
          background-repeat: repeat-y;
          animation: f2 2s linear 0s infinite;

          &.transparent {
            z-index: 1111;
            background: red;
            cursor: pointer;
            position: absolute;
            top: 0px;
          }

          @keyframes f2 {
            0% {
              background-position: 100%;
            }

            50% {
              background-position: 50%;
            }

            100% {
              background-position: -30px;
            }
          }
        }

        .ya_child_dot {
          width: 16px;
          height: 16px;
          background-color: #00fcff;
          position: absolute;
          top: -6px;
          left: -4px;
          border-radius: 50%;
        }

        .ya_child_text {
          position: absolute;
          cursor: default;
          top: 0px;
          left: -70px;
          color: rgba(255, 255, 255, 0.6);
        }

        &:nth-child(1) {
          .ya_child_text {
            top: -24px;
          }
        }

        &:nth-child(2) {
          .ya_child_text {
            // transform: rotate(-36deg);
            top: -20px;
          }
        }

        &:nth-child(3) {

          // transform: rotate(54deg);
          .ya_child_text {
            // transform: rotate(-54deg);
            top: -17px;
          }
        }

        &:nth-child(4) {

          // transform: rotate(72deg);
          .ya_child_text {
            // transform: rotate(-72deg);
            top: -20px;
          }
        }

        &:nth-child(5) {
          .ya_child_text {}
        }

        &:nth-child(6) {
          .ya_child_text {}
        }

        &:nth-child(7) {

          // transform: rotate(126deg);
          .ya_child_text {
            // transform: rotate(-126deg);
          }
        }

        &:nth-child(8) {

          // transform: rotate(144deg);
          .ya_child_text {
            // transform: rotate(-144deg);
          }
        }

        &:nth-child(9) {
          .ya_child_text {
            top: 6px;
          }
        }

        &:nth-child(10) {
          .ya_child_text {
            top: 12px;
          }
        }
      }

      &.transparent {
        z-index: 1;

        &::before {
          display: inline-block;
          content: "";
          width: 100px;
          height: 100px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
        }

        .ya_child_item {
          .ya_child_line {
            background: transparent;
          }

          .ya_child_dot,
          .ya_child_text {
            opacity: 0;
          }
        }
      }
    }
  }
}

.ya-boxInfo {
  line-height: 1;
  position: absolute;
  top: 25px;
  left: 25px;

  .ya-boxInfo-title {
    padding-bottom: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;

    span {
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      padding-right: 7px;
    }
  }

  .ya-boxInfo-cot {
    background-color: #fff;
    padding: 16px;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
    width: 254px;
    box-sizing: border-box;

    @keyframes showbox {
      0% {
        background-position: 100%;
      }

      50% {
        background-position: 50%;
      }

      100% {
        background-position: -30px;
      }
    }

    .ya-boxInfo_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 8px;
      cursor: default;

      &:nth-last-child(1) {
        padding: 0;
      }

      .ya_text {
        color: rgba(0, 0, 0, 0.4);
        color: rgba(0, 0, 0, 0.4);
        max-width: 153px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 15px;
      }
    }
  }
}

// .page-detail-title {
//   margin-bottom: 16px;
// }
.common-page-container {
  width: 100%;
  // background: #FFFFFF;
  border-radius: 4px;
  padding: 8px;
  box-sizing: border-box;
}

.detail-right {
  background: #f4f5f7;
  height: calc(100vh - 170px);
  margin-right: 23px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

  .detail-right-content {
    position: absolute;
    left: 20px;
    bottom: 20px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.4);
    padding: 11px;

    .icon_legend {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      display: inline-block;
    }

    .detail-right-flex {
      display: flex;
      padding-bottom: 7px;

      &:nth-last-child(1) {
        padding: 0;
      }
    }

    .icon-jiedian {
      color: #0095ff;
    }
  }
}

.relation-schema-box {
  height: 100%;
}

.flex {
  display: flex;
  align-items: center;
}

.family {
  .family-title {
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    margin-bottom: 16px;

    .img1 {
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 50%;
      background: linear-gradient(180deg, #f9b902 0%, #f18301 100%);
      margin-right: 8px;
    }
  }
}

.family-content-title1 {
  width: 84px;
}

.family-content {
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  font-size: 14px;
  margin-bottom: 12px;

  .family-content-title {
    width: 84px;
  }

  .family-item {
    flex: 1;
    color: rgba(3, 3, 3, 0.65);
    margin-left: 16px;
    font-weight: 400;
    font-size: 14px;
    word-break: break-all;

    .family-item-icon {
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 8px solid rgba(217, 8, 8, 1);
    }

    .family-item-icon-tall {
      border-bottom: 8px solid rgba(241, 131, 1, 1);
    }

    .family-item-icon-title {
      color: rgba(241, 131, 1, 1);
    }

    .family-item-icon-title-tall {
      color: rgba(217, 8, 8, 1);
    }

    .icon-bingdunengli {
      font-size: 12px;
      color: rgba(241, 131, 1, 1);
      position: relative;
      left: -1px;
    }
  }
}

.static {
  border-radius: 4px;
  background: linear-gradient(90deg,
      rgba(0, 149, 255, 0) 0%,
      rgba(0, 149, 255, 0.05) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 13px 16px 16px 11px;

  .img2 {
    width: 56px;
    height: 64px;
    margin-right: 10px;
  }

  .static-info {
    display: flex;

    .static-title {
      font-size: 16px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.65);
      margin-top: 3px;
    }

    .static-tip {
      padding: 0 5px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 4px;
      font-weight: 400;
      color: #0095ff;
      font-size: 12px;
      border: 1px solid #0095ff;
      margin-top: 6px;
    }
  }

  .static-flex {
    display: flex;
  }

  .family-content .family-content-title {
    width: 60px;
  }

  .family-content .family-item {
    margin-left: 8px;
  }
}

.behavior {
  margin-top: 24px;

  .behavior-content {
    height: calc(100vh - 535px);
  }

  .behavior-flex {
    display: flex;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
    margin-bottom: 24px;

    .icon-hangweifenxi {
      position: relative;
      top: 7px;
    }

    .behavior-icon {
      width: 40px;
      height: 40px;
      line-height: 40px;
      border-radius: 4px;
      background: rgba(0, 149, 255, 0.16);
      text-align: center;
      margin-right: 8px;
    }

    .behavior-title {
      color: rgba(0, 0, 0, 0.65);
    }
  }
}

.no-data {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.21);

  img {
    width: 100%;
  }
}
</style>
