EOC-UI/src/views/left/comp/dispose/CaseHandling.vue

<template>
  <!-- 个案处置 -->
  <div class="risk_profile_container">
    <!-- 1.==================== -->
    <HeaderBoxContent :typeList="typeList" :headerObj="headerObj"></HeaderBoxContent>

    <!-- 2.============================== -->
    <div class="risk_profile_info">
      <div class="risk_profile_info_top">
        <div v-for="item in infoList" :key="item.lable" class="risk_profile_info_top_item">
          <div class="risk_profile_info_top_name">
            <div class="risk_profile_info_top_name_lable">
              <img :src="getImgSrc(item.icon)" alt="" />
              <span>{{ item.lable }}</span>
            </div>
            <div class="risk_profile_info_top_name_value">{{ item.value }}</div>
          </div>
          <div class="line" v-if="item.icon !== '4'"></div>
        </div>
      </div>
      <div class="risk_profile_info_bottom">
        <div class="risk_profile_info_bottom_name">
          <img src="@/assets/img/risk_info_icon-5.png" alt="" />
          <span class="text">处置单位</span>
        </div>
        <div class="risk_profile_info_bottom-content">
          <div class="text">
            牵头单位
            <span class="text1">上海市疾控中心</span>
          </div>
          <div class="text">
            配合单位
            <span class="text1">长宁区疾控中心、静安区疾控中心</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 3.风险概括====================== -->
    <div class="risk_summary">
      <TowLevelTitle :title="'风险概括'"></TowLevelTitle>
      <div class="risk_summary_content">
        <div class="risk_bg risk_bg_color">
          <div class="risk_bg_info">
            <div class="risk_bg_info_item">
              <img src="@/assets/img/risk_info_icon-6.png" alt="" />
              <span>病种/信息</span>
              <div>不明原因肺炎</div>
            </div>
            <div class="risk_bg_info_item">
              <img src="@/assets/img/risk_info_icon-7.png" alt="" />
              <span>发生地区</span>
              <div>长宁区</div>
            </div>
          </div>
          <div class="risk_bg_info">
            <div class="risk_bg_info_item">
              <img src="@/assets/img/risk_info_icon-8.png" alt="" />
              <span>街道</span>
              <div>华阳路街道</div>
            </div>
            <div class="risk_bg_info_item">
              <img src="@/assets/img/risk_info_icon-9.png" alt="" />
              <span>地址</span>
              <div>武夷路528号</div>
            </div>
          </div>
        </div>
        <div class="risk_bg2 risk_bg_color">
          <div v-for="item in infoList2" :key="item.lable" class="risk_bg2_item">
            <div class="risk_bg2_name">
              <div class="risk_bg2_label">
                <img :src="getImgSrc(item.icon)" alt="" />
                <span>{{ item.lable }}</span>
              </div>
              <div class="risk_bg2_name_value">{{ item.value }}</div>
            </div>

            <div class="line" v-if="item.icon !== '12'"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 4.个案基本情况 -->
    <div class="basic_information">
      <div class="basic_information_header">
        <TowLevelTitle :title="'个案基本情况'" :buttons="timeButtons"></TowLevelTitle>
        <div class="basic_information_code">
          个案编号
          <span>05-2024-1210-01-不明原因肺炎-01</span>
        </div>
      </div>
      <div class="basic_information_info">
        <div calss="basic_information_info_name">
          <div>
            <span>姓名</span>
            <div>张嘉佳</div>
          </div>
          <div>
            <span>性别</span>
            <div>男</div>
          </div>
          <div>
            <span>年龄</span>
            <div>16</div>
          </div>
          <div>
            <span>国籍</span>
            <div>中国</div>
          </div>
          <div>
            <span>职业</span>
            <div>学生</div>
          </div>
        </div>
        <div calss="basic_information_info_unit">
          <div>
            <span>现住地</span>
            <div>华阳街道</div>
          </div>
          <div>
            <span>单位</span>
            <div>上海开元学校</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发病就诊 -->
    <div class="y_box">
      <div class="fbjz_box">
        <div class="fbjz_box_header">
          <TowLevelTitle :title="'发病就诊'"></TowLevelTitle>
          <div class="fbjz_box_code">
            发病日期
            <span>2024-10-08</span>
          </div>
        </div>
        <div class="risk_bg_color fbjz_box_body">
          <div v-for="item in fbjzData" class="fbjz_item">
            <img :src="getFbjzImgSrc(item.icon)" alt="" />
            <div>
              <span>{{ item.lable }}</span>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="hz_box">
        <TowLevelTitle :title="'会诊'"></TowLevelTitle>
        <div class="risk_bg_color hz_box_body">
          <div v-for="item in hzData" class="hz_item">
            <img :src="getHzImgSrc(item.icon)" alt="" />
            <div>
              <span>{{ item.lable }}</span>
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 5.核心流调 -->
    <div class="core_flow_adjustment">
      <div class="core_flow_adjustment_header">
        <TowLevelTitle :title="'核心流调'"></TowLevelTitle>
        <div class="core_flow_adjustment_tag">
          <div class="tag investigated">
            已流调：
            <span>2</span>
          </div>
          <!-- <div class="tag pending">
            待流调：
            <span>2</span>
          </div> -->
          <div class="tag suspicious">
            可疑感染来源：
            <span>2</span>
          </div>
          <div class="tag local">
            本地感染：
            <span>2</span>
          </div>
        </div>
      </div>
      <div class="risk_bg_color core_flow_adjustment_body">
        <div v-for="(item, index) in flowData" :key="item.lable" class="risk_profile_info_top_item">
          <div class="risk_profile_info_top_name">
            <div class="risk_profile_info_top_name_lable">
              <span>{{ item.lable }}</span>
            </div>
            <div class="risk_profile_info_top_name_list">
              <div class="risk_profile_info_top_name_value" v-for="v in item.list">{{ v.value }}</div>
            </div>
          </div>
          <div class="line" v-if="index !== 2"></div>
        </div>
      </div>
    </div>

    <!-- 6.风险人员 风险场所 -->
    <div class="risk_box">
      <div class="risk_personnel">
        <fxryTowLevelTitle
          :title="'风险人员'"
          class="risk_personnel_bg"
          :openDialog="true"
          :buttons="riskPersonnelButtons"
          @twoBtnClick="fxryTwoBtnClick"
          @openDialog="openDialogHandle"
        ></fxryTowLevelTitle>

        <div class="risk_bg_color risk_personnel_body">
          <div v-for="(item, index) in riskPersonnelData" :key="item.lable" class="risk_personnel_item">
            <div class="risk_profile_info_top_name">
              <span>{{ item.lable }}</span>
              <div>{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="risk_location">
        <div class="risk_personnel_header">
          <TowLevelTitle :title="'风险场所'" :openDialog="true" @openDialog="openLocationDialogHandle"></TowLevelTitle>
          <div class="risk_personnel_tag">
            <span>4</span>
          </div>
        </div>
        <div class="risk_bg_color risk_location_body">
          <div>
            <span>上海市开元学校</span>
            <div>长宁区</div>
          </div>
          <!-- <div v-for="(item, index) in riskLocationData" :key="item.lable" class="risk_location_item">
            <div class="risk_location_name">
              <span>{{ item.lable }}</span>
              <div>{{ item.value }}</div>
            </div>
            <div class="risk_location_line" v-if="index !== 1"></div>
          </div> -->
        </div>
      </div>

      <div class="activity_trajectory">
        <div class="activity_trajectory_header">
          <TowLevelTitle :title="'活动轨迹'" :openDialog="true" @openDialog="openActivityDialogHandle"></TowLevelTitle>

          <div class="activity_trajectory_tag">
            <span>13</span>
          </div>
        </div>
        <div class="risk_bg_color activity_trajectory_body">
          <div>
            <span>2024-10-01 12:00</span>
            <div>长宁区武夷路528号</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 7.检测情况 -->
    <div class="test_situation">
      <TowLevelTitle :title="'检测情况'" :buttons="testBottons" :openDialog="true" @openDialog="openTestResDialogHandle"></TowLevelTitle>
      <div class="risk_bg_color test_situation_body">
        <div v-for="(item, index) in testData" :key="item.lable" class="test_situation_item">
          <div class="test_situation_name">
            <span>{{ item.lable }}</span>
            <div>{{ item.value }}</div>
          </div>
          <div class="test_situation_line" v-if="index !== 4"></div>
        </div>
      </div>
    </div>

    <!-- 风险人员 弹窗 -->
    <RiskPersonnelDialog v-if="dialogStore.riskPersonnelDialogOpen"></RiskPersonnelDialog>

    <!-- 风险场所 弹窗 -->
    <RiskLocationDialog v-if="dialogStore.riskLocationDialogOpen"></RiskLocationDialog>

    <!-- 活动轨迹 弹窗 -->
    <ActivityTrajectoryDialog v-if="dialogStore.riskActivityDialogOpen"></ActivityTrajectoryDialog>

    <!-- 检测结果 弹窗 -->
    <DetectionResultDialog v-if="dialogStore.riskTestResDialogOpen"></DetectionResultDialog>
  </div>
</template>
<script setup>
import RiskPersonnelDialog from './dialog/RiskPersonnelDialog'
import RiskLocationDialog from './dialog/RiskLocationDialog'
import ActivityTrajectoryDialog from './dialog/ActivityTrajectoryDialog'
import DetectionResultDialog from './dialog/DetectionResultDialog'
import HeaderBoxContent from './common/HeaderBoxContent'
import * as echarts from 'echarts'
import { ref, watch, computed, reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import TowLevelTitle from '@/components/TowLevelTitle/index.vue'
import fxryTowLevelTitle from '@/components/TowLevelTitle/fxryTowLevelTitle'

import { useDialogStore } from '@/store/dialog'
let dialogStore = useDialogStore()

import { useRightPanelStore } from "@/store/rightPanel";
const rightPanelStore = useRightPanelStore();

console.log(dialogStore, 'dialogStore')

const headerObj = ref({
  tabTitle: '个案处置',
  level: 'B',
  title: '05-2024-1210-01-不明原因肺炎',
  typeList: ['风险个案', '突发公共卫生事件(II级)']
})
const typeList = ref(['风险个案', '突发公共卫生事件(II级)'])

const infoList = ref([
  { lable: '报告时间', value: '2024-10-01 12:12', icon: '1' },
  { lable: '报告单位', value: '长宁区疾控中心', icon: '2' },
  { lable: '信息来源', value: '上海市瑞金医院', icon: '3' },
  { lable: '状态', value: '处置中', icon: '4' }
])

function getImgSrc(picName) {
  return new URL(`../../../../assets/img/risk_info_icon-${picName}.png`, import.meta.url).href
}

const infoList2 = ref([
  { lable: '病例数', value: 3, icon: '10' },
  { lable: '重症数', value: 0, icon: '11' },
  { lable: '死亡数', value: 0, icon: '12' }
])

const timeButtons = ref([{ id: 1, name: '流调报告', active: false }])

//4.发病就诊
const fbjzData = ref([
  { lable: '当前就诊医院', name: '上海市瑞金医院', icon: 'fbjz_1' },
  { lable: '主要临床症状', name: '发热;咳嗽', icon: 'fbjz_2' },
  { lable: '医院检测结果', name: '新冠阴性;甲流阴性', icon: 'fbjz_3' },
  { lable: '当前临床诊断', name: '社区获得性肺炎', icon: 'fbjz_4' }
])

const hzData = ref([
  { lable: '院内会诊', name: '不明原因肺炎', icon: 'hz_1' },
  { lable: '区级会诊', name: '待会诊', icon: 'hz_2' },
  { lable: '市级会诊', name: '待会诊', icon: 'hz_3' }
])

function getFbjzImgSrc(picName) {
  return new URL(`../../../../assets/img/${picName}.png`, import.meta.url).href
}

function getHzImgSrc(picName) {
  return new URL(`../../../../assets/img/${picName}.png`, import.meta.url).href
}

// 5.核心流调
const flowData = ref([
  { lable: '外出外来史', list: [{ value: '(2024-07-12接触病例张三)' }] },
  { lable: '疑似病例接触史', value: 0, list: [{ value: '(2024-07-12从美国回来)' }] },
  { lable: '可疑动物接触史', value: 0, list: [{ value: '(2024-07-12接触家禽)' }] }
])

// 风险人员
const riskPersonnelButtons = ref([
  { id: 1, name: '密接', active: false },
  { id: 2, name: '共同暴露者', active: false },
  { id: 3, name: '其他', active: false }
])
const open = ref(false)

function fxryTwoBtnClick(item) {
  console.log(item, 'item')
}

function openDialogHandle () {
  rightPanelStore.handleCloseAllVisible()
  dialogStore.closeAllDialog()
  dialogStore.setRiskPersonnelDialogOpen(true)
}

function openLocationDialogHandle() {
  dialogStore.closeAllDialog()
  dialogStore.setRiskLocationDialogOpen(true)
}

function openActivityDialogHandle () {
  rightPanelStore.handleCloseAllVisible()
  dialogStore.closeAllDialog()
  dialogStore.setRiskActivityDialogOpen(true)
}

function openTestResDialogHandle () {
  rightPanelStore.handleCloseAllVisible()
  dialogStore.closeAllDialog()
  dialogStore.setRiskTestResDialogOpen(true)
}

const riskPersonnelData = ref([
  { lable: '判定数', value: 10 },
  { lable: '管理中', value: 5 },
  { lable: '待管理', value: 4 },
  { lable: '已解除', value: 1 }
])

const riskLocationData = ref([
  { lable: '场所数', value: 2 },
  { lable: '已完成消杀', value: 2 }
])

// 检测情况
const testBottons = ref([
  { id: 1, name: '全部', active: true },
  { id: 2, name: '病例', active: false },
  { id: 2, name: '密接', active: false },
  { id: 2, name: '共同暴露者', active: false },
  { id: 2, name: '其他风险人员', active: false },
  { id: 2, name: '其他', active: false }
])

const testData = ref([
  { lable: '采样数', value: 7 },
  { lable: '检测数', value: 7 },
  { lable: '阳性数', value: 2 },
  { lable: '阴性数', value: 5 },
  { lable: '检测中', value: 0 }
])

// 在组件挂载后初始化 ECharts
onMounted(() => {})
</script>
<style lang="scss" scoped>
* {
  box-sizing: border-box;
}

.risk_profile_container {
  position: absolute;
  top: 42px;
  left: 0px;
  width: 700px;
  height: 892px;
  padding: 10px 12px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #244d86 2%, #0a121e 100%);
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.5);
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(0, 150, 255, 1), rgba(7, 108, 208, 1)) 1 1;

  .risk_profile_header {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .risk_profile_title {
      display: flex;
      align-items: center;
      gap: 20px;

      > img {
        width: 40px;
        height: 37px;
      }

      .risk_profile_name {
        // width: 352px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 24px;
        color: #e2ffff;
        line-height: 24px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;

        /* 金属光泽渐变效果 */
        background: linear-gradient(to top, #49ffff 4%, #ffffff 100%);
        -webkit-background-clip: text;
        /* 文字应用渐变 */
        background-clip: text;

        /* 使文字透明，背景渐变会应用到文字 */
        color: transparent;

        /* 光泽效果：文本阴影 */
        text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);

        /* 给文字加一些柔和的过渡效果 */
        transition: all 0.3s ease;
        font-style: italic;
        transform: skewX(-5deg);
      }

      .risk_profile_type_box {
        display: flex;
        flex-direction: column;
        gap: 6px;

        .risk_profile_type {
          height: 24px;
          width: 158px;
          background: url(待核实.png) no-repeat;
          background-size: 100% 100%;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 14px;
          color: #ffd15c;
          line-height: 24px;
          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }

    .risk_profile_change_btn {
      width: 64px;
      height: 50px;
      background: url(../../../../assets/img/changeRisk.png) no-repeat;
      background-size: 100% 100%;
    }
  }

  .risk_profile_info {
    width: 100%;
    display: flex;
    flex-direction: column;

    .risk_profile_info_top {
      width: 100%;
      height: 40px;
      display: flex;

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

        .risk_profile_info_top_name {
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
          text-align: left;
          font-style: normal;
          text-transform: none;

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

            > img {
              width: 18px;
              height: 18px;
              margin-right: 4px;
            }
          }

          .risk_profile_info_top_name_value {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: #04fafe;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-style: normal;
            text-transform: none;
          }
        }

        .line {
          height: 24px;
          width: 2px;
          background: #88eaff;
          background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
          margin: 0 16px;
        }
      }
    }

    .risk_profile_info_bottom {
      margin: 8px 0;

      .risk_profile_info_bottom_name {
        display: flex;
        align-items: center;
        margin-bottom: 3px;

        > img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
      }

      .risk_profile_info_bottom-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .risk_summary {
    width: 100%;
    height: 100px;
    margin-bottom: 12px;

    .risk_summary_content {
      display: flex;
      // flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      height: 64px;
      margin-top: 6px;

      .risk_bg {
        padding: 8px;
        box-sizing: border-box;
        width: 360px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .risk_bg_info {
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 16px;
          color: #ffffff;
          font-style: normal;
          text-transform: none;

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

            > img {
              width: 18px;
              height: 18px;
            }

            > span {
              // margin: 0 4px 0 8px;
              margin: 0 4px;
              box-sizing: border-box;
              font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
              font-weight: normal;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.7);
              text-align: left;
              font-style: normal;
              text-transform: none;
            }
          }
        }
      }

      .risk_bg_color {
        background: rgba(0, 170, 255, 0.08);
        border-radius: 0px 0px 0px 0px;
      }

      .risk_bg2 {
        padding: 8px;
        box-sizing: border-box;
        // width: 263px;
        flex: 1;
        height: 64px;
        display: flex;
        align-items: center;

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

          .risk_bg2_name {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            text-align: left;
            font-style: normal;
            text-transform: none;

            > img {
              width: 18px;
              height: 18px;
            }

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

          .risk_bg2_name_value {
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            color: #04fafe;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-style: normal;
            text-transform: none;
          }
        }
      }
    }
  }

  .core_flow_adjustment {
    box-sizing: border-box;
    margin-top: 12px;
    .core_flow_adjustment_header {
      position: relative;

      .core_flow_adjustment_tag {
        display: flex;
        align-items: center;
        position: absolute;
        right: 0px;
        top: 0px;
        // color: #fff;
      }
    }

    .core_flow_adjustment_body {
      // width: 645px;
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      margin-top: 6px;

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

        .risk_profile_info_top_name {
          padding-top: 8px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 13px;
          color: #697c91;
          text-align: center;
          font-style: normal;
          text-transform: none;

          .risk_profile_info_top_name_lable {
            width: 203px;
            height: 18px;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 16px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            background: linear-gradient(to top, #43bcdb 0%, #ffffff 100%);

            /* 金属光泽渐变效果 */
            // background: linear-gradient(to top, #49ffff 4%, #e2ffff 100%);
            -webkit-background-clip: text;
            /* 文字应用渐变 */
            background-clip: text;

            /* 使文字透明，背景渐变会应用到文字 */
            // color: transparent;

            /* 光泽效果：文本阴影 */
            // text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.4);

            /* 给文字加一些柔和的过渡效果 */
            transition: all 0.3s ease;
          }

          .risk_profile_info_top_name_list {
            height: 36px;
            width: 100%;

            .risk_profile_info_top_name_value {
              margin: 5px 0px;
            }
          }
        }
      }
    }
  }

  .risk_box {
    display: flex;
    justify-content: space-between;
    // gap: 12px;
    width: 100%;
    height: 100px;
    // margin: 10px 0;
    margin-top: 10px;
    margin-bottom: 10px;

    .risk_personnel {
      width: 315px;
      height: 100%;

      .risk_personnel_body {
        width: 315px;
        height: 63px;
        display: flex;
        align-items: center;
        margin: 6px auto 0px;

        .risk_personnel_item {
          display: flex;
          align-items: center;
          margin: 0 auto;

          .risk_profile_info_top_name {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
            font-weight: normal;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 16px;
            font-style: normal;
            text-transform: none;

            > div {
              font-family: Roboto;
              font-weight: bold;
              font-size: 20px;
              color: #04fafe;
            }
          }

          .risk_personnel_line {
            height: 24px;
            width: 2px;
            background: #88eaff;
            background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
            // margin:0 10px;
            margin-left: 18px;
          }
        }
      }
    }

    .risk_location {
      width: 162px;
      height: 100%;
      .risk_personnel_header {
        position: relative;
        position: relative;
        .risk_personnel_tag {
          position: absolute;
          top: 3px;
          left: 96px;
          color: #04fafe;
        }
      }
      .risk_location_body {
        width: 162px;
        height: 63px;
        margin: 6px auto 0px;

        display: flex;
        align-items: center;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .activity_trajectory {
      width: 162px;
      // // height: 100%;
      //  height: 100px;
      .activity_trajectory_header {
        position: relative;
        .activity_trajectory_tag {
          position: absolute;
          top: 3px;
          left: 96px;
          color: #04fafe;
        }
      }
      .activity_trajectory_body {
        width: 100%;
        height: 63px;
        margin: 6px auto 0px;

        display: flex;
        align-items: center;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .test_situation {
    width: 100%;
    height: 100px;

    .test_situation_body {
      height: 63px;
      display: flex;
      align-items: center;
      margin: 6px auto 0px;

      .test_situation_item {
        display: flex;
        align-items: center;
        margin: 0 auto;

        .test_situation_name {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
          font-weight: normal;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.8);
          line-height: 16px;
          text-align: left;
          font-style: normal;
          text-transform: none;

          > div {
            font-family: Roboto;
            font-weight: bold;
            font-size: 20px;
            color: #04fafe;
          }
        }

        .test_situation_line {
          height: 24px;
          width: 2px;
          background: #88eaff;
          background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
          margin-left: 43px;
        }
      }
    }
  }
}

.risk_profile_container::after {
  position: absolute;
  content: '';
  left: 0%;
  right: 0%;
  bottom: 0;
  height: 3px;
  background-image: url('@/assets/img/image-bottom.png');
  background-size: 100% 50%;
}
.tag {
  font-size: 16px;
  padding: 0px 12px;
  box-sizing: border-box;
  // border-radius: 6px;
  font-weight: bold;
  width: fit-content;
  height: 24px;
  line-height: 24px;
  text-align: center;
  // p
}

/* 已流调 */
.investigated {
  color: #50e0ff;
  background: linear-gradient(270deg, rgba(62, 174, 255, 0.1) 0%, rgba(27, 129, 203, 0.3) 51%, rgba(27, 129, 203, 0.1) 100%);
}

/* 待流调 */
.pending {
  color: #ff9950;
  background: linear-gradient(270deg, rgba(255, 153, 80, 0.1) 0%, rgba(255, 153, 80, 0.3) 51%, rgba(255, 153, 80, 0.1) 100%);
}

/* 可疑感染来源 */
.suspicious {
  color: #ffd43c;
  background: linear-gradient(270deg, rgba(62, 174, 255, 0.1) 0%, rgba(255, 218, 123, 0.3) 51%, rgba(255, 218, 123, 0.1) 100%);
}

/* 本地感染 */
.local {
  color: #ffffff;
}

.text {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  text-align: left;
  text-transform: none;
}

.text1 {
  font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
  font-weight: normal;
  font-size: 16px;
  color: #04fafe;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  font-style: normal;
  text-transform: none;
}

.risk_bg_color {
  background: rgba(0, 170, 255, 0.08);
  border-radius: 0px 0px 0px 0px;
}

.line {
  height: 24px;
  width: 2px;
  background: #88eaff;
  background: linear-gradient(0deg, rgba(34, 73, 127, 0) 0%, rgba(136, 234, 255, 0.6) 50%, rgba(34, 73, 127, 0) 100%);
  margin: 0 10px;
}

.basic_information {
  height: 102px;
  width: 100%;
  margin-bottom: 12px;

  .basic_information_header {
    width: 100%;
    height: 24px;
    position: relative;
    margin-bottom: 10px;

    .basic_information_code {
      position: absolute;
      top: 3px;
      right: 80px;
      font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
      font-weight: normal;
      font-size: 16px;
      color: #ffffff;
      text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      text-align: left;
      font-style: normal;
      text-transform: none;

      > span {
        font-size: 16px;
        color: #04fafe;
      }
    }
  }
  .basic_information_info {
    width: 100%;
    height: 66px;
    background: rgba(0, 170, 255, 0.08);
    border-radius: 0px 0px 0px 0px;
    padding: 11px 0 11px 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > div {
      display: flex;
      align-items: center;
      gap: 60px;
      > div {
        display: flex;
        align-items: center;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        line-height: 18px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
        > span {
          margin-right: 16px;
          font-size: 16px;
          color: #b3becb;
        }
      }
    }
    // display: flex;
    //   align-items: center;
  }
}

.y_box {
  width: 100%;
  height: 155px;
  display: flex;
  gap: 10px;
  .fbjz_box {
    width: 400px;
    height: 100%;
    .fbjz_box_header {
      position: relative;
      .fbjz_box_code {
        position: absolute;
        top: 3px;
        right: 0px;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #919cab;
        line-height: 18px;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
        > span {
          font-size: 16px;
          color: #ffffff;
        }
      }
    }

    .fbjz_box_body {
      display: flex;
      flex-wrap: wrap;
      width: 399px;
      height: 120px;
      padding: 7px 8px;
      box-sizing: border-box;
      margin-top: 6px;
      .fbjz_item {
        width: 50%;
        display: flex;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
        > img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }
        > div {
          > span {
            color: #6c8097;
          }
          > div {
            margin-top: 4px;
          }
        }
      }

      .fbjz_item:nth-child(1) {
        border-right: 1px dashed #888888;
        margin-bottom: 8px;
      }
      .fbjz_item:nth-child(2) {
        padding-left: 17px;
        box-sizing: border-box;
        margin-bottom: 8px;
      }
      .fbjz_item:nth-child(3) {
        border-right: 1px dashed #888888;
      }
      .fbjz_item:nth-child(4) {
        padding-left: 17px;
        box-sizing: border-box;
      }
    }
  }

  .hz_box {
    flex: 1;
    height: 120px;
    // height: 100%;

    .hz_box_body {
      margin-top: 6px;
      padding: 8px 8px;
      box-sizing: border-box;
      width: 100%;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .hz_item {
        flex: 1;
        display: flex;
        align-items: center;
        font-family: Alibaba PuHuiTi 3, Alibaba PuHuiTi 30;
        font-weight: normal;
        font-size: 16px;
        color: #ffffff;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-style: normal;
        text-transform: none;

        > img {
          width: 18px;
          height: 18px;
          margin-right: 4px;
        }

        > div {
          height: 100%;
          display: flex;
          align-items: center;

          > span {
            color: #6c8097;
            margin-right: 12px;
          }
        }
      }

      .hz_item:nth-child(1) {
        border-bottom: 1px dashed #888888;
      }
      .hz_item:nth-child(2) {
        border-bottom: 1px dashed #888888;
      }
    }
  }
}
</style>