<template>
  <div class="introduction-wrap">
    <div class="introduction-wrap-left">
      <div class="introduction-wrap-left-box1">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">基本信息</div>
          <div class="header-right">
            <img src="./assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box1-main">
          <div class="box1-left">
            <img src="./assets/images/image1.png" alt="" />
          </div>
          <div class="box1-right">
            <div class="box1-right-item">
              <div class="item-left">提案人：</div>
              <div class="item-right">
                乔迪·C·阿灵顿​（共和党-得克萨斯州第19选区）
              </div>
            </div>

            <div class="box1-right-item">
              <div class="item-left">提出时间：</div>
              <div class="item-right">2025年5月20日</div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">相关领域：</div>
              <div class="item-right1">
                <div class="right1-item">跨境电商</div>
                <div class="right1-item">新能源产业</div>
                <div class="right1-item">半导体产业</div>
              </div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">法案类别：</div>
              <div class="item-right">公法（编号：Pub. L. No. 119-21）</div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">提案人：</div>
              <div class="item-right2">
                <div class="right2-item">H. Rept. 119-106, Book 1</div>
                <div class="right2-item">
                  H. Rept. 119-106, Book 2​（两份独立报告）
                </div>
              </div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">表决记录：</div>
              <div class="item-right3">全程共进行 ​47次唱名表决​</div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">最近状态：</div>
              <div class="item-right3">2025年7月4日​ 由总统签署生效​</div>
            </div>
            <div class="box1-right-item">
              <div class="item-left">立案流程：</div>
              <div class="item-right4">
                <!-- <el-steps
                  style="max-width: 500px"
                  :active="6"
                  finish-status="success"
                >
                  <el-step title="提出" />
                  <el-step title="众议院通过" />
                  <el-step title="参议院通过" />
                  <el-step title="分歧协调" />
                  <el-step title="提交总统" />
                  <el-step title="法案通过" />
                </el-steps> -->
                <div
                  class="step"
                  v-for="(item, index) in stepList"
                  :key="index"
                >
                  <div class="step-box" v-if="!item.active">
                    {{ item.title }}
                    <div class="right-arrow">
                      <img src="./assets/icons/arrow-right.png" alt="" />
                    </div>
                  </div>
                  <div class="step-box-active" v-else>
                    {{ item.title }}
                    <div class="right-arrow">
                      <img src="./assets/icons/arrow-right.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="introduction-wrap-left-box2">
        <div class="box-header">
          <div class="header-left"></div>
          <div class="title">法案进展</div>
          <div class="header-btn-box">
            <div class="btn" @click="handleClcikBox2Btn(1)">
              <el-badge :value="warningNum">
                <el-button type="primary" plain v-if="box2BtnActive === 1"
                  >最新进展</el-button
                >
                <el-button type="info" plain v-else>最新进展</el-button>
              </el-badge>
            </div>
            <div class="btn" @click="handleClcikBox2Btn(2)">
              <el-button type="primary" plain v-if="box2BtnActive === 2"
                >前期进展</el-button
              >
              <el-button type="info" plain v-else>前期进展</el-button>
            </div>
          </div>
          <div class="header-right">
            <img src="./assets/images/header-icon.png" alt="" />
          </div>
        </div>
        <div class="box2-main">
          <div class="box2-main-center">
            <STimeline v-if="box2BtnActive == 2" :dataList="timelineData" />
            <div class="box2-center-item-box" v-if="box2BtnActive == 1">
              <div
                class="box2-center-item"
                v-for="(item, index) in progressList"
                :key="index"
              >
                <div class="tip" :class="{ tipActive: item.fxdj }"></div>
                <div class="date">{{ item.sjsj }}</div>
                <div class="title">{{ item.sjnr }}</div>
                <div class="info">
                  <div
                    class="info-box danger-box4"
                    v-if="item.fxdj === '特别重大风险'"
                  >
                    {{ item.fxdj }}
                  </div>
                  <div
                    class="info-box danger-box3"
                    v-if="item.fxdj === '重大风险'"
                  >
                    {{ item.fxdj }}
                  </div>
                  <div
                    class="info-box danger-box2"
                    v-if="item.fxdj === '较大风险'"
                  >
                    {{ item.fxdj }}
                  </div>
                  <div
                    class="info-box danger-box1"
                    v-if="item.fxdj === '低风险'"
                  >
                    {{ item.fxdj }}
                  </div>
                </div>
                <div class="more">
                  <el-icon size="22" color="#777"><ArrowRightBold /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box2-footer">
          <div class="btn-more">
            <img src="../assets/images/btn-more.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="introduction-wrap-right">
      <div class="box-header">
        <div class="header-left"></div>
        <div class="title">提出人</div>
        <div class="header-right">
          <img src="./assets/images/header-icon.png" alt="" />
        </div>
      </div>
      <div class="introduction-wrap-right-main">
        <div class="right-main-box1">
          <div class="name-box">
            <el-select
              v-model="selectValue"
              placeholder="请选择"
              style="width: 180px; margin: 0 10px"
              @change="handleChangeFaId"
            >
              <el-option
                v-for="item in faList"
                :key="item.value"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
            <div class="person-box">
              <div
                class="person-item"
                :class="{ nameItemActive: box3BtnActive === item.name }"
                @click="handleClcikBox3Btn(item.name, index)"
                v-for="(item, index) in personList"
                :key="index"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="info-box">
            <div class="info-left">
              <img src="./assets/images/usr1.png" alt="" />
              <div class="usr-icon1">
                <img src="./assets/images/usr-icon1.png" alt="" />
              </div>
              <div class="usr-icon2">
                <img src="./assets/images/usr-icon2.png" alt="" />
              </div>
            </div>
            <div class="info-right">
              <div class="info-right-title">{{ curPerson.name }}</div>
              <div class="info-right-item">
                <div class="item-left">英文名:</div>
                <div class="item-right">{{ curPerson.ename }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">党派:</div>
                <div class="item-right">{{ curPerson.dp }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">选区:</div>
                <div class="item-right">{{ curPerson.xq }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">职位:</div>
                <div class="item-right">{{ curPerson.zw }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-main-box2">
          <!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
          <div
            class="tag-box"
            :class="{
              status0: tag.status === 0,
              status1: tag.status === 1,
              status2: tag.status === 2,
              status3: tag.status === 3,
            }"
            v-for="(tag, index) in tagList"
            :key="index"
          >
            {{ tag.title }}
          </div>
        </div>
        <div class="right-main-box3">
          <div class="right-main-box3-header">
            <div class="icon">
              <img
                src="./assets/images/right-main-box3-header-icon.png"
                alt=""
              />
            </div>
            <div class="title">人物动态</div>
          </div>
          <div class="right-main-box3-main">
            <el-timeline style="max-width: 500px">
              <el-timeline-item
                :timestamp="item.sjsj"
                placement="top"
                v-for="(item, index) in personEventList"
                :key="index"
              >
                <div class="timeline-content">
                  {{ item.sjnr }}
                </div>
              </el-timeline-item>
              <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
                <div class="timeline-content">
                  借OBBBA通过势头，在得州巩固军工、能源集团支持，为2026年连任铺路，同时协调党内资源争夺关键摇摆选区。
                </div>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <div class="timeline-content">
                  特朗普力挺阿灵顿，白宫声明强调法案“美丽且必要”，双方矛盾凸显共和党内
                  ​商业资本与传统能源势力裂痕。
                </div>
              </el-timeline-item> -->
            </el-timeline>
          </div>
          <div class="right-main-box3-footer">
            <div class="btn-more" @click="handleClickMore2">
              <img src="../assets/images/btn-more.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="isShowDialog" class="dialog-box" width="1280">
      <div class="dialog-inner-box">
        <div class="inner-left">
          <div class="info-box">
            <div class="info-top">
              <img src="./assets/images/usr1.png" alt="" />
              <div class="usr-icon1">
                <img src="./assets/images/usr-icon1.png" alt="" />
              </div>
              <div class="usr-icon2">
                <img src="./assets/images/usr-icon2.png" alt="" />
              </div>
            </div>
            <div class="info-footer">
              <div class="info-right-title">{{ curPerson.name }}</div>
              <div class="info-right-item">
                <div class="item-left">英文名:</div>
                <div class="item-right">{{ curPerson.ename }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">党派:</div>
                <div class="item-right">{{ curPerson.dp }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">选区:</div>
                <div class="item-right">{{ curPerson.xq }}</div>
              </div>
              <div class="info-right-item">
                <div class="item-left">职位:</div>
                <div class="item-right">{{ curPerson.zw }}</div>
              </div>
            </div>
          </div>

          <div class="tag-wrapper">
            <div
              class="tag-box"
              :class="{
                status0: tag.status === 0,
                status1: tag.status === 1,
                status2: tag.status === 2,
                status3: tag.status === 3,
              }"
              v-for="(tag, index) in tagList"
              :key="index"
            >
              {{ tag.title }}
            </div>
          </div>
          <div class="more">更多议员 ></div>
        </div>
        <div class="inner-right">
          <div class="btn-box">
            <div
              class="btn"
              :class="{ btnActive: dialogBoxBtnActive === 0 }"
              @click="handleClcikDialogBoxBtn(0)"
            >
              新闻动态
            </div>
            <div
              class="btn"
              :class="{ btnActive: dialogBoxBtnActive === 1 }"
              @click="handleClcikDialogBoxBtn(1)"
            >
              任务履历
            </div>
          </div>
          <div class="inner-right-main">
            <el-timeline style="max-width: 840px">
              <el-timeline-item
                :timestamp="item.sjsj"
                placement="top"
                v-for="(item, index) in personEventList"
                :key="index"
              >
                <div class="timeline-content1">
                  <div class="text">
                    {{ item.sjnr }}
                  </div>
                  <div class="pic">
                    <img src="./assets/imgs/img1.png" alt="" />
                  </div>
                </div>
              </el-timeline-item>
              <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
                <div class="timeline-content1">
                  <div class="text">
                    当地时间周五，美国众议院预算委员会投票否决了共和党提出的党派性税收与支出法案，强硬派保守党人的持续反对导致法案推进受阻。为安抚委员会内的极右翼成员，共和党领袖正考虑对法案进行重大修改，包括将医疗补助的工作要求实施时间从原定的2029年提前，并立即取消无证移民...
                  </div>
                  <div class="pic">
                    <img src="./assets/imgs/img2.png" alt="" />
                  </div>
                </div>
              </el-timeline-item>
              <el-timeline-item timestamp="2018/4/2" placement="top">
                <div class="timeline-content1">
                  <div class="text">
                    2025年2月中旬，众议院预算委员会通过《2025财年预算决议》，特朗普的减税议程迈出第一步。决议要求：延长2017年特朗普首个任期内出台的减税条款，计划在未来十年减税4.5万亿美元，强制性支出需合计削减2万亿美元，部分支出需控制增幅，未来十年共削减政府开支1.5万亿...
                  </div>
                  <div class="pic">
                    <img src="./assets/imgs/img3.png" alt="" />
                  </div>
                </div>
              </el-timeline-item> -->
            </el-timeline>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import WordCloudMap from "./WordCloudMap.vue";
import STimeline from "./STimeline.vue";
import {
  getBillInfo,
  getBillPerson,
  getBillEvent,
  getBillDyqk,
} from "@/api/bill";

const box2BtnActive = ref(1);
const handleClcikBox2Btn = (index) => {
  box2BtnActive.value = index;
};

const box3BtnActive = ref("");
const handleClcikBox3Btn = (name, index) => {
  box3BtnActive.value = name;
  curPerson.value = personList.value[index];
  personEventList.value = personList.value[index].eventList;
};

const dialogBoxBtnActive = ref(0);
const handleClcikDialogBoxBtn = (index) => {
  dialogBoxBtnActive.value = index;
};

const tagList = ref([
  {
    title: "共和党",
    status: 1,
  },
  {
    title: "委员会主席",
    status: 0,
  },
  {
    title: "财政保守",
    status: 2,
  },
  {
    title: "深红州",
    status: 3,
  },
  {
    title: "社会政策激进",
    status: 2,
  },
  {
    title: "预算委员会",
    status: 3,
  },
  {
    title: "委员会主席",
    status: 0,
  },
  {
    title: "深红州",
    status: 3,
  },
  {
    title: "议程主导权",
    status: 1,
  },
  {
    title: "财政保守",
    status: 2,
  },
  {
    title: "传统能源",
    status: 1,
  },
]);

const selectValue = ref("");

const faList = ref([
  // {
  //   value: "众议院初始框架",
  //   label: "众议院初始框架",
  // },
  // {
  //   value: "众议院初始框架1",
  //   label: "众议院初始框架1",
  // },
]);

const handleChangeFaId = (val) => {
  console.log("val", val);
  handleGetBillPerson(val);
};

const progressList = ref([
  {
    sjsj: "7月5日",
    sjnr: "特朗普于美国独立日签署法案，​公法编号Pub. L. No. 119-21。白宫举行庆典，B-2轰炸机飞越上空，象征“美国新时代”开启。",
    fxdj: "特别重大风险",
  },
  {
    sjsj: "7月4日",
    sjnr: "众议院最终表决218票赞成 vs 214票反对，修订版法案以4票优势通过，2名共和党议员倒戈，民主党全员反对。",
    fxdj: "重大风险",
  },
  {
    sjsj: "7月3日",
    sjnr: "民主党领袖杰弗里斯发表 ​8小时45分钟​ 演讲（众议院现代史最长），抗议法案“劫贫济富”，但仍未阻止表决。",
    fxdj: "较大风险",
  },
  {
    sjsj: "7月2日",
    sjnr: "众议院以 ​219:213​ 通过程序规则，为最终表决铺路。此前4名共和党议员反对程序规则，议长约翰逊紧急游说挽回1票。",
    fxdj: "低风险",
  },
  {
    sjsj: "7月1日",
    sjnr: "参议院最终表决投票51:50​，副总统万斯（JD Vance）投出关键票打破平局。3名共和党参议员倒戈（蒂利斯、保罗、柯林斯）。",
    fxdj: "",
  },
]);

const wordCloudData = [
  { name: "财政保守主义", value: 100 },
  { name: "移民与边境安全", value: 5 },
  { name: "削减市民福利", value: 77 },
  { name: "债务驱动型经济", value: 35 },
  { name: "传统能源", value: 96 },
  { name: "与马斯克公开冲突", value: 57 },
  { name: "共和党财政鹰派", value: 72 },
  { name: "财政问责法案", value: 18 },
  { name: "强硬边境政策", value: 34 },
  { name: "扩大军费", value: 16 },
  { name: "债务与赤字警告", value: 72 },
  { name: "批评美国债务膨胀", value: 58 },
];

const stepList = ref([
  {
    title: "提出",
    active: false,
  },
  {
    title: "众议院通过",
    active: false,
  },
  {
    title: "参议院通过",
    active: false,
  },
  {
    title: "分歧协调",
    active: false,
  },
  {
    title: "提交总统",
    active: false,
  },
  {
    title: "法案通过",
    active: true,
  },
]);

const timelineData = ref([]);

const isShowDialog = ref(false);

const handleClickMore2 = () => {
  isShowDialog.value = true;
};

// 获取基本信息
const handleGetBasicInfo = async () => {
  const params = {
    id: window.sessionStorage.getItem("billId"),
  };
  try {
    const res = await getBillInfo(params);
    console.log("基本信息", res);
  } catch (error) {
    console.error(error);
  }
};

const warningNum = ref(0);

// 法案进展 获取最新进展
const handleGetBillEvent = async () => {
  warningNum.value = 0;
  const params = {
    id: window.sessionStorage.getItem("billId"),
  };
  try {
    const res = await getBillEvent(params);
    console.log("最新进展", res);
    progressList.value = res.data;
    progressList.value.forEach((item) => {
      if (item.fxdj) {
        warningNum.value++;
      }
    });
  } catch (error) {
    console.error(error);
  }
};

// 法案进展 获取前期进展 --也是提出人左上角列表
const handleGetBillDyqk = async () => {
  const params = {
    id: window.sessionStorage.getItem("billId"),
  };
  try {
    const res = await getBillDyqk(params);
    console.log("前期进展", res);
    timelineData.value = res.data;
    faList.value = res.data.map((item) => {
      return {
        label: item.dyms,
        value: item.dyms,
        id: item.id,
      };
    });
    selectValue.value = faList.value[0];
    handleGetBillPerson(faList.value[0].id);
  } catch (error) {
    console.error(error);
  }
};

const personList = ref([]);
const curPerson = ref({});

// 人物动态
const personEventList = ref([]);

// 提出人 --动议id
const handleGetBillPerson = async (id) => {
  const params = {
    id: id,
  };
  try {
    const res = await getBillPerson(params);
    console.log("提出人", res);
    personList.value = res.data;
    box3BtnActive.value = res.data.length ? res.data[0].name : "";
    curPerson.value = res.data.length ? res.data[0] : {};
    personEventList.value = res.data.length ? res.data[0].eventList : [];
  } catch (error) {
    console.error(error);
  }
};

onMounted(() => {
  handleGetBasicInfo();
  handleGetBillEvent();
  handleGetBillDyqk();
});
</script>

<style lang="scss" scoped>
.introduction-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  .box-header {
    height: 56px;
    display: flex;
    position: relative;
    .header-left {
      margin-top: 20px;
      width: 8px;
      height: 16px;
      border-radius: 0 4px 4px 0;
      background: var(--color-main-active);
    }
    .title {
      margin-left: 14px;
      margin-top: 20px;
      height: 16px;
      line-height: 16px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 18px;
      font-weight: 700;
      line-height: 16px;
    }
    .header-btn-box {
      position: absolute;
      top: 14px;
      right: 52px;
      display: flex;
      .btn {
        margin-left: 20px;
      }
    }
    .header-right {
      position: absolute;
      top: 14px;
      right: 12px;
      width: 32px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .introduction-wrap-left {
    margin-top: 16px;
    .introduction-wrap-left-box1 {
      width: 1150px;
      height: 415px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
      .box1-main {
        display: flex;
        height: 394px;
        .box1-left {
          margin-left: 23px;
          width: 247px;
          height: 350px;
        }
        .box1-right {
          margin-left: 31px;
          margin-top: 5px;
          width: 623px;
          height: 350px;
          .box1-right-item {
            display: flex;
            margin-bottom: 24px;
            .item-left {
              width: 100px;
              height: 14px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 14px;
              text-align: left;
            }
            .item-right {
              height: 14px;
              color: var(--color-main-active);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 14px;
              letter-spacing: 0px;
              text-align: left;
            }
            .item-right1 {
              display: flex;
              .right1-item {
                margin-right: 10px;
                padding: 1px 8px;
                box-sizing: border-box;
                border: 1px solid rgba(186, 224, 255, 1);
                border-radius: 4px;
                background: rgba(230, 244, 255, 1);
                color: rgba(22, 119, 255, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
              }
            }
            .item-right2 {
              .right2-item {
                height: 14px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 14px;
                text-align: left;
                margin-bottom: 12px;
              }
            }
            .item-right3 {
              height: 14px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 14px;
              text-align: left;
            }
            .item-right4 {
              // width: 500px;
              margin-top: -2px;
              height: 26px;
              display: flex;
              padding-left: -10px;
              border: 2px solid #5f656c;
              border-right: none;
              .step {
                background: rgb(241, 241, 242);
                height: 24px;
                line-height: 24px;
                // width: 98px;
                font-size: 14px;
                text-align: center;
                position: relative;
                .step-box {
                  padding: 0 10px 0 20px;
                  color: #333;
                  position: relative;

                  .right-arrow {
                    position: absolute;
                    right: -21px;
                    top: -2px;
                    z-index: 99;
                    width: 30px;
                    height: 28px;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
                .step-box-active {
                  padding: 0 12px;
                  color: #fff;
                  background: #ce4f51;
                  position: relative;
                  z-index: 100;
                  &::after {
                    content: ""; /* 必须有内容才能使用伪元素 */
                    position: absolute; /* 绝对定位 */
                    top: 9px; /* 在父元素下方 */
                    right: -11px; /* 左对齐 */
                    width: 0; /* 设置宽度为0 */
                    height: 0; /* 设置高度为0 */
                    border-left: 20px solid transparent; /* 左边框设置为透明 */
                    border-right: 20px solid #ce4f51; /* 右边框设置为蓝色，形成三角形的一边 */
                    border-top: 20px solid transparent; /* 上边框设置为与父元素相同的颜色，形成三角形底部与父元素相连 */
                    transform: rotate(-45deg);
                    z-index: 99;
                  }
                  .right-arrow {
                    position: absolute;
                    right: -22px;
                    top: -4px;
                    z-index: 99;
                    width: 32px;
                    height: 32px;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }

                // .step-box {
                //   z-index: 99;
                //   width: 96px;
                //   background: url("./assets/images/step-box.png") 100% 100%;
                //   color: #333;
                // }
                // .step-box-active {
                //   width: 90px;
                //   background: url("./assets/images/step-box-active.png") 100%
                //     100%;
                //   color: #fff;
                // }
              }
            }
          }
        }
      }
    }
    .introduction-wrap-left-box2 {
      margin-top: 15px;
      width: 1150px;
      height: 415px;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
      .box2-main {
        margin-top: 10px;
        .box2-main-center {
          margin-left: 23px;
          border-top: 1px solid rgba(243, 243, 244, 1);
          // width: 100%;
          height: 300px;
          // background: orange;
          .box2-center-item {
            display: flex;
            height: 53px;
            box-sizing: border-box;
            border-bottom: 1px solid rgba(243, 243, 244, 1);
            .tip {
              margin: 20px;
              width: 8px;
              height: 8px;
              border-radius: 8px;
            }
            .tipActive {
              background: rgba(255, 77, 79, 1);
            }
            .date {
              width: 100px;
              margin-top: 13px;
              height: 22px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 600;
              line-height: 22px;
            }
            .title {
              width: 770px;
              margin-left: 10px;
              margin-top: 13px;
              height: 22px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 22px;
            }
            .info {
              width: 120px;
              display: flex;
              justify-content: flex-end;
              .info-box {
                margin-top: 13px;
                height: 24px;
                line-height: 24px;
                box-sizing: border-box;
                border-radius: 4px;
                text-align: center;
              }
              .danger-box4 {
                width: 100px;
                background: rgba(255, 241, 240, 1);
                border: 1px solid rgba(255, 204, 199, 1);
                color: rgba(255, 77, 79, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
              }
              .danger-box3 {
                width: 72px;
                color: rgba(255, 172, 77, 1);
                box-sizing: border-box;
                border: 1px solid rgba(255, 225, 199, 1);
                border-radius: 4px;

                background: rgba(255, 245, 240, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
              }
              .danger-box2 {
                width: 72px;
                color: rgba(250, 173, 20, 1);
                box-sizing: border-box;
                border: 1px solid rgba(255, 241, 184, 1);
                border-radius: 4px;

                background: rgba(255, 251, 230, 1);

                font-family: Microsoft YaHei;
                font-size: 14px;
              }
              .danger-box1 {
                width: 58px;
                color: rgba(82, 196, 26, 1);
                box-sizing: border-box;
                border: 1px solid rgba(217, 247, 190, 1);
                border-radius: 4px;

                background: rgba(246, 255, 237, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
              }
            }
            .more {
              margin-top: 13px;
              margin-left: 40px;
              cursor: pointer;
            }
          }
        }
      }
      .box2-footer {
        margin-top: 7px;
        display: flex;
        justify-content: center;
        .btn-more {
          width: 108px;
          height: 32px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .introduction-wrap-right {
    margin-top: 16px;
    margin-left: 16px;
    margin-right: 18px;
    width: 576px;
    height: 845px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
    .introduction-wrap-right-main {
      .right-main-box1 {
        height: 218px;
        // border-bottom: 1px solid rgb(243, 243, 244);
        .name-box {
          display: flex;
          justify-content: flex-start;
          .person-box {
            width: 360px;
            overflow-x: auto;
            display: flex;
            justify-content: flex-start;
            .person-item {
              height: 28px;
              box-sizing: border-box;
              border: 1px solid var(--btn-plain-border-color);
              border-radius: 4px;
              background: var(--btn-plain-bg-color);
              color: var(--btn-plain-text-color);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              display: flex;
              flex-direction: row;
              justify-content: center;
              align-items: center;
              margin-right: 8px;
              padding: 1px 8px;
              cursor: pointer;
            }
            .nameItemActive {
              border: 1px solid var(--btn-active-border-color);
              background: var(--btn-active-bg-color);
              color: var(--btn-active-text-color);
            }
          }
        }
        .info-box {
          margin-left: 29px;
          margin-top: 25px;
          display: flex;
          .info-left {
            position: relative;
            .usr-icon1 {
              position: absolute;
              bottom: 24px;
              left: 20px;
              width: 32px;
              height: 32px;
              border-radius: 16px;
              background: rgba(255, 255, 255, 0.9);
              box-sizing: border-box;
              padding: 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .usr-icon2 {
              position: absolute;
              bottom: 24px;
              right: 20px;
              width: 32px;
              height: 32px;
              border-radius: 16px;
              background: rgba(255, 255, 255, 0.9);
              box-sizing: border-box;
              padding: 4px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .info-right {
            margin-left: 22px;

            .info-right-title {
              height: 22px;
              color: var(--color-main-active);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 600;
              line-height: 22px;
            }
            .info-right-item {
              margin-top: 8px;
              display: flex;
              color: rgba(95, 101, 108, 1);
              .item-left {
                height: 22px;
                width: 60px;
              }
              .item-right {
                height: 22px;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .right-main-box2 {
        width: 576px;
        height: 150px;
        box-sizing: border-box;
        padding: 10px 26px;
        // border-bottom: 1px solid rgb(243, 243, 244);
        // display: flex;
        // flex-wrap: wrap;
        // align-items: center;
        .tag-box {
          height: 22px;
          padding: 1px 8px;
          border-radius: 4px;
          box-sizing: border-box;
          margin-right: 8px;
          margin-bottom: 9px;
          font-size: 14px;
          display: inline-block;
        }
        .status0 {
          border: 1px solid rgba(217, 247, 190, 1);
          color: rgba(82, 196, 26, 1);
          background: rgba(246, 255, 237, 1);
        }
        .status1 {
          border: 1px solid rgba(186, 224, 255, 1);
          color: rgba(22, 119, 255, 1);
          background: rgba(230, 244, 255, 1);
        }
        .status2 {
          border: 1px solid rgba(255, 241, 184, 1);
          color: rgba(250, 173, 20, 1);
          background: rgba(255, 251, 230, 1);
        }
        .status3 {
          border: 1px solid rgba(255, 204, 199, 1);
          color: rgba(255, 77, 79, 1);
          background: rgba(255, 241, 240, 1);
        }
      }
      .right-main-box3 {
        .right-main-box3-header {
          margin-left: 22px;
          margin-top: 24px;
          display: flex;
          .icon {
          }
          .title {
            margin-left: 12px;
            height: 22px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 600;
            line-height: 22px;
          }
        }
        .right-main-box3-main {
          margin-top: 18px;
          height: 299px;
          overflow-y: auto;
        }
        .right-main-box3-footer {
          margin-top: 7px;
          display: flex;
          justify-content: center;
          .btn-more {
            width: 108px;
            height: 32px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

.dialog-box {
  .dialog-inner-box {
    display: flex;
    .inner-left {
      width: 360px;
      height: 960px;
      box-sizing: border-box;
      border-right: 1px solid rgba(241, 243, 246, 1);
      background: rgba(246, 251, 255, 1);
      margin-top: -16px;
      position: relative;
      .info-box {
        .info-top {
          position: relative;
          width: 200px;
          height: 200px;
          margin-left: 81px;
          margin-top: 38px;
          img {
            width: 100%;
            height: 100%;
          }
          .usr-icon1 {
            position: absolute;
            bottom: -15px;
            left: 55px;
            width: 48px;
            height: 48px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.9);
            box-sizing: border-box;
            padding: 4px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .usr-icon2 {
            position: absolute;
            bottom: -15px;
            right: 55px;
            width: 48px;
            height: 48px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.9);
            box-sizing: border-box;
            padding: 4px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .info-footer {
          width: 100%;
          margin-top: 30px;

          .info-right-title {
            height: 22px;
            color: var(--color-main-active);
            font-family: Microsoft YaHei;
            font-size: 20px;
            font-weight: 700;
            line-height: 22px;
            text-align: center;
            margin-bottom: 50px;
          }
          .info-right-item {
            margin-top: 8px;
            margin-left: 38px;
            display: flex;
            color: rgba(59, 65, 75, 1);
            font-size: 16px;
            font-weight: 400;
            .item-left {
              height: 24px;
              width: 60px;
            }
            .item-right {
              height: 24px;
              margin-left: 10px;
            }
          }
        }
      }
      .tag-wrapper {
        width: 287px;
        height: 150px;
        box-sizing: border-box;
        margin-top: 30px;
        margin-left: 38px;
        // border-bottom: 1px solid rgb(243, 243, 244);
        // display: flex;
        // flex-wrap: wrap;
        // align-items: center;
        .tag-box {
          height: 22px;
          padding: 1px 8px;
          border-radius: 4px;
          box-sizing: border-box;
          margin-right: 8px;
          margin-bottom: 9px;
          font-size: 14px;
          display: inline-block;
        }
        .status0 {
          border: 1px solid rgba(217, 247, 190, 1);
          color: rgba(82, 196, 26, 1);
          background: rgba(246, 255, 237, 1);
        }
        .status1 {
          border: 1px solid rgba(186, 224, 255, 1);
          color: rgba(22, 119, 255, 1);
          background: rgba(230, 244, 255, 1);
        }
        .status2 {
          border: 1px solid rgba(255, 241, 184, 1);
          color: rgba(250, 173, 20, 1);
          background: rgba(255, 251, 230, 1);
        }
        .status3 {
          border: 1px solid rgba(255, 204, 199, 1);
          color: rgba(255, 77, 79, 1);
          background: rgba(255, 241, 240, 1);
        }
      }
      .more {
        position: absolute;
        left: 140px;
        bottom: 32px;
        width: 81px;
        height: 16px;
        color: var(--color-main-active);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
      }
    }
    .inner-right {
      height: 960px;
      .btn-box {
        display: flex;
        height: 80px;
        margin-left: 35px;
        .btn {
          width: 80px;
          text-align: center;
          height: 28px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          padding: 1px 8px;
          box-sizing: border-box;
          border-radius: 4px;
          border: 1px solid var(--btn-plain-border-color);
          background: var(--btn-plain-bg-color);
          color: var(--btn-plain-text-color);
          margin: 20px 8px;
          cursor: pointer;
        }
        .btnActive {
          border: 1px solid var(--btn-active-border-color);
          background: var(--btn-active-bg-color);
          color: var(--btn-active-text-color);
        }
      }
    }
  }
}

:deep(.el-dialog) {
  margin-top: 60px;
  height: 960px;
  padding: 0;
}

:deep(.el-steps--simple) {
  padding: 6px 10px;
}
:deep(.el-timeline-item) {
  padding-bottom: 5px !important;
}
:deep(.el-timeline-item__timestamp) {
  color: var(--color-main-active) !important;
  font-family: Microsoft YaHei !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
.timeline-content {
  color: rgba(132, 136, 142, 1);
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}
.timeline-content1 {
  color: rgba(132, 136, 142, 1);
  font-family: Microsoft YaHei;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 30px;
  display: flex;
  .text {
    flex: 1;
  }
  .pic {
    width: 98px;
    height: 72px;
    border-radius: 4px;
    margin-left: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>