<template>
  <div class="process-overview-wrap">
    <div class="box-header">
      <div class="header-left"></div>
      <div class="title">流程概要</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
    </div>
    <div class="main">
      <div class="left">
        <div class="top">
          <div class="top-line" :style="{ width: 4 * 280 + 30 + 'px' }">
            <div class="top-line1"></div>
          </div>
          <div class="start">
            <div class="icon">
              <img src="./assets/images/logo1.png" alt="" />
            </div>
            <div class="name">{{ "参议院" }}</div>
          </div>
          <div class="content-box">
            <div class="item-box">
              <div class="item-box-dot">
                <img src="./assets/images/top-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "参议院修订框架" }} <span>(S.Con.Res.7)</span>
                </div>
                <div class="item-header-icon" @click="handleClickDetail(true)">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "债务上限提高至5万亿美元" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "削减支出降至400亿美元" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "新增2017年减税措施永久化" }}</div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "米奇·麦康奈尔" }}</div>
                </div>
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "迈克·约翰逊" }}</div>
                </div>
              </div>
              <div class="item-time">
                {{ "2025年4月" }}
              </div>
            </div>
            <div class="item-box">
              <div class="item-box-dot">
                <img src="./assets/images/top-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "参议院程序性投票" }} <span>(S.Con.Res.7)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-info">
                {{ "51赞成：49反对" }}
              </div>
              <div class="item-time">
                {{ "2025年6月28日" }}
              </div>
            </div>
            <div class="item-box">
              <div class="item-box-dot">
                <img src="./assets/images/top-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "众议院最终投票" }} <span>(S.Con.Res.7)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-info">
                {{ "51赞成：50反对" }}
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "儿童税收抵免至2200美元（永久）" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "阿拉斯加医保豁免" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "FEOC限制放宽供应链占比要求" }}</div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "詹姆斯·戴维·万斯" }}</div>
                </div>
              </div>
              <div class="item-time">
                {{ "2025年7月1日" }}
              </div>
            </div>
          </div>
        </div>

        <div class="bottom">
          <div class="bottom-line" :style="{ width: 4 * 280 + 30 + 'px' }">
            <div class="bottom-line1"></div>
          </div>
          <div class="start">
            <div class="name">{{ "众议院" }}</div>

            <div class="icon">
              <img src="./assets/images/logo2.png" alt="" />
            </div>
          </div>
          <div class="content-box">
            <div class="item-box">
              <div class="item-time">
                {{ "2025年2月" }}
              </div>
              <div class="item-box-dot">
                <img src="./assets/images/bottom-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "众议院初始框架" }} <span>(S.Con.Res.7)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "债务上限提高4万亿美元" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "削减支出200亿美元" }}</div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "迈克·约翰逊" }}</div>
                </div>
              </div>
            </div>
            <div class="item-box">
              <div class="item-time">
                {{ "2025年5月22日" }}
              </div>
              <div class="item-box-dot">
                <img src="./assets/images/bottom-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "众议院首次通过" }} <span>(H.R.1)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-info">
                {{ "215赞成：214反对" }}
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "减税延至2029年（非永久）" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">
                    {{ "严格限制外国敏感实体（FEOC）参与补贴" }}
                  </div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "儿童税收抵免临时提至2500美元" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "储能税收抵免2028年硬性截止" }}</div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "迈克·约翰逊" }}</div>
                </div>
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "贾森·史密斯" }}</div>
                </div>
              </div>
            </div>
            <div class="item-box">
              <div class="item-time">
                {{ "2025年7月2日" }}
              </div>
              <div class="item-box-dot">
                <img src="./assets/images/bottom-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "众议院二次审议" }} <span>(H.R.1)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-info">
                {{ "219赞成：213反对" }}
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">{{ "儿童税收抵免临时提至2500美元" }}</div>
                </div>
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">
                    {{ "严格限制外国敏感实体（FEOC）参与补贴" }}
                  </div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "詹姆斯·布莱尔" }}</div>
                </div>
              </div>
            </div>
            <div class="item-box">
              <div class="item-time">
                {{ "2025年7月2日" }}
              </div>
              <div class="item-box-dot">
                <img src="./assets/images/bottom-line-dot.png" alt="" />
              </div>
              <div class="item-header">
                <div class="item-title">
                  {{ "众议院最终表决" }} <span>(S.Con.Res.7)</span>
                </div>
                <div class="item-header-icon">
                  <img src="./assets/images/item-header-icon.png" alt="" />
                </div>
              </div>
              <div class="item-info">
                {{ "218赞成：214反对" }}
              </div>
              <div class="item-main">
                <div class="item-main-item">
                  <div class="icon"></div>
                  <div class="text">
                    {{ "2027年起对进口小额包裹征收30%关税或25美元/件" }}
                  </div>
                </div>
              </div>
              <div class="item-footer">
                <div class="item-footer-box">
                  <div class="icon">
                    <div class="inner-icon">
                      <img src="./assets/images/user-inner-icon.png" alt="" />
                    </div>
                    <img src="./assets/images/user-icon.png" alt="" />
                  </div>
                  <div class="text">{{ "詹姆斯·布莱尔" }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right" :style="{ left: 4 * 280 + 222 + 'px' }">
          <div class="right-line"></div>
          <div class="right-info">
            {{ "2025年7月4日总统签署生效" }}
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-left">
        <img src="./assets/icons/right-icon1.png" alt="" />
      </div>
      <div class="footer-center">
        立法过程始于2025年2月共和党启动预算框架谈判，5月22日众议院以215:214的1票优势通过初始版本；随后参议院历经16小时全文朗读和马拉松式辩论，于7月1日以51:50的票数通过修订版（副总统万斯投关键票）；因参议院版本大改（如永久化减税、提高债限至5万亿美元），法案重返众议院审议，经程序性投票（219:213）和最终表决（218:214），于7月3日深夜通过；特朗普在7月4日独立日签署生效，全程凸显两党对立、党内分歧及程序博弈。
      </div>
      <div class="footer-right">
        <img src="./assets/icons/arrow-right.png" alt="" />
      </div>
    </div>
    <div class="dialog-wrapper" v-if="isShowDetailDialog">
      <div class="dialog-box1">
        <div class="icon">
          <img src="./assets/images/logo2.png" alt="" />
        </div>
        <div class="title">
          2025年5月22日众议院首次通过<span>（H.R.1）</span>
        </div>
        <div class="close" @click="handleClickDetail(false)">
          <img src="./assets/images/close.png" alt="" />
        </div>
      </div>
      <div class="dialog-box2"></div>
      <div class="dialog-box3">
        <div class="box3-left">
          <img src="./assets/icons/right-icon1.png" alt="" />
        </div>
        <div class="box3-center">
          {{ "法案在众议院惊险通过，凸显两党分歧严重。" }}
        </div>
        <div class="box3-right">
          <img src="./assets/icons/arrow-right.png" alt="" />
        </div>
      </div>
      <div class="dialog-box4">
        <div class="box4-left">
          <div class="icon">
            <img src="./assets/images/dialog-box4-icon.png" alt="" />
          </div>
          <div class="text">{{ "变更条款" }}</div>
        </div>
        <div class="box4-right" @click="handleSwitchCompareDialog(true)">
          {{ "条款对比 >" }}
        </div>
      </div>
      <div class="dialog-box5">
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">{{ "减税延至2029年（非永久）" }}</div>
        </div>
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">{{ "严格限制外国敏感实体（FEOC）参与补贴" }}</div>
        </div>
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">{{ "儿童税收抵免 ​2028年前提至2500美元​" }}</div>
        </div>
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">{{ "小费/加班费免税 ​无上限" }}</div>
        </div>
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">
            {{ "储能项目须 ​2028年底前投入使用​ 才享税收抵免" }}
          </div>
        </div>
        <div class="box5-item">
          <div class="icon"></div>
          <div class="text">{{ "取消电动汽车补贴（2025年底生效）" }}</div>
        </div>
      </div>
      <div class="dialog-box6">
        <div class="icon">
          <img src="./assets/images/dialog-box6-icon.png" alt="" />
        </div>
        <div class="text">{{ "支持意见领袖" }}</div>
      </div>
      <div class="dialog-box7">
        <div class="box7-item">
          <div class="icon">
            <img src="./assets/images/dialog-box7-icon1.png" alt="" />
            <div class="inner-icon">
              <img src="./assets/images/user-inner-icon.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="name">{{ "迈克·约翰逊" }}</div>
            <div class="content">
              {{
                "协调党内分歧：修改条款争取支持（如调整SALT扣除上限），推动程序性投票"
              }}
            </div>
          </div>
        </div>
        <div class="box7-item">
          <div class="icon">
            <img src="./assets/images/dialog-box7-icon2.png" alt="" />
            <div class="inner-icon">
              <img src="./assets/images/user-inner-icon.png" alt="" />
            </div>
          </div>
          <div class="right">
            <div class="name">{{ "詹姆斯·戴维·万斯" }}</div>
            <div class="content">
              {{ "框架谈判主导：与约翰逊合作确立调和程序方向" }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-wrapper1" v-if="isShowCompareDialog">
      <div class="dialog-header">
        <div class="header-left">
          <div class="icon">
            <img src="./assets/images/dialog-box4-icon.png" alt="" />
          </div>
          <div class="title">{{ "法案版本对比" }}</div>
        </div>
        <div class="header-right" @click="handleSwitchCompareDialog(false)">
          <img src="./assets/images/close.png" alt="" />
        </div>
      </div>
      <div class="dialog-info">
        <div class="info-box1">
          <span>原版本：</span>
          <el-select
            v-model="preVersion"
            placeholder="请选择原版本"
            style="width: 300px"
          >
            <el-option
              v-for="item in preVersionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="info-box2">
          <span>现版本：</span>
          <el-select
            v-model="curVersion"
            placeholder="请选择现版本"
            style="width: 300px"
          >
            <el-option
              v-for="item in curVersionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="info-box3">
          <div
            class="icon1"
            v-if="!isOnlyShowChinesePolicy"
            @click="handleSwitchPolicy(true)"
          ></div>
          <div class="icon2" v-else @click="handleSwitchPolicy(false)">
            <img src="./assets/images/info-box3-selected.png" alt="" />
          </div>
          <div class="text">{{ "只看涉华条款" }}</div>
        </div>
        <div class="info-box4">
          <el-input
            v-model="input"
            style="width: 160px"
            placeholder="搜索条款"
          />
          <div class="icon">
            <img src="./assets/images/search.png" alt="" />
          </div>
        </div>
      </div>
      <div class="dialog-main">
        <div class="dialog-main-header">
          <div class="dialog-main-header-left">
            {{ " H.R.1（众议院）" }}
          </div>
          <div class="dialog-main-header-right">
            {{ "H.R.1（参议院）" }}
          </div>
        </div>
        <div class="dialog-main-item">
          <div class="dialog-main-left">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(a)." }}</div>
              <div class="title-right">
                {{
                  "废止1930年《关税法》第321(a)(2)(C) 条规定的最低免税门槛。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Repeal the de minimis threshold under section 321(a)(2)(C) of the
              Tariff Act of 1930.
            </div>
          </div>
          <div class="dialog-main-right">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(b)." }}</div>
              <div class="title-right">
                {{
                  "自2027年1月1日起，对依据《1930年关税法》第321(a)(2)(C)条申报入境的货物，征收30%从价税或每件25美元关税（以较高者为准）。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Effective January 1, 2027, impose a duty of 30% ad valorem or $25
              per package (whichever is higher) on articles entered under
              section 321(a)(2)(C) of the Tariff Act of 1930.
            </div>
          </div>
        </div>
        <div class="dialog-main-item">
          <div class="dialog-main-left">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(a)." }}</div>
              <div class="title-right">
                {{
                  "废止1930年《关税法》第321(a)(2)(C) 条规定的最低免税门槛。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Repeal the de minimis threshold under section 321(a)(2)(C) of the
              Tariff Act of 1930.
            </div>
          </div>
          <div class="dialog-main-right">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(b)." }}</div>
              <div class="title-right">
                {{
                  "自2027年1月1日起，对依据《1930年关税法》第321(a)(2)(C)条申报入境的货物，征收30%从价税或每件25美元关税（以较高者为准）。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Effective January 1, 2027, impose a duty of 30% ad valorem or $25
              per package (whichever is higher) on articles entered under
              section 321(a)(2)(C) of the Tariff Act of 1930.
            </div>
          </div>
        </div>
        <div class="dialog-main-item">
          <div class="dialog-main-left">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(a)." }}</div>
              <div class="title-right">
                {{
                  "废止1930年《关税法》第321(a)(2)(C) 条规定的最低免税门槛。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Repeal the de minimis threshold under section 321(a)(2)(C) of the
              Tariff Act of 1930.
            </div>
          </div>
          <div class="dialog-main-right">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(b)." }}</div>
              <div class="title-right">
                {{
                  "自2027年1月1日起，对依据《1930年关税法》第321(a)(2)(C)条申报入境的货物，征收30%从价税或每件25美元关税（以较高者为准）。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Effective January 1, 2027, impose a duty of 30% ad valorem or $25
              per package (whichever is higher) on articles entered under
              section 321(a)(2)(C) of the Tariff Act of 1930.
            </div>
          </div>
        </div>
        <div class="dialog-main-item">
          <div class="dialog-main-left">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(a)." }}</div>
              <div class="title-right">
                {{
                  "废止1930年《关税法》第321(a)(2)(C) 条规定的最低免税门槛。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Repeal the de minimis threshold under section 321(a)(2)(C) of the
              Tariff Act of 1930.
            </div>
          </div>
          <div class="dialog-main-right">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(b)." }}</div>
              <div class="title-right">
                {{
                  "自2027年1月1日起，对依据《1930年关税法》第321(a)(2)(C)条申报入境的货物，征收30%从价税或每件25美元关税（以较高者为准）。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Effective January 1, 2027, impose a duty of 30% ad valorem or $25
              per package (whichever is higher) on articles entered under
              section 321(a)(2)(C) of the Tariff Act of 1930.
            </div>
          </div>
        </div>
        <div class="dialog-main-item">
          <div class="dialog-main-left">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(a)." }}</div>
              <div class="title-right">
                {{
                  "废止1930年《关税法》第321(a)(2)(C) 条规定的最低免税门槛。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Repeal the de minimis threshold under section 321(a)(2)(C) of the
              Tariff Act of 1930.
            </div>
          </div>
          <div class="dialog-main-right">
            <div class="dialog-main-item-title">
              <div class="title-left">{{ "§1102(b)." }}</div>
              <div class="title-right">
                {{
                  "自2027年1月1日起，对依据《1930年关税法》第321(a)(2)(C)条申报入境的货物，征收30%从价税或每件25美元关税（以较高者为准）。"
                }}
              </div>
            </div>
            <div class="dialog-main-item-content">
              Effective January 1, 2027, impose a duty of 30% ad valorem or $25
              per package (whichever is higher) on articles entered under
              section 321(a)(2)(C) of the Tariff Act of 1930.
            </div>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const isShowCompareDialog = ref(false)
const handleSwitchCompareDialog = (isShow) => {
  isShowCompareDialog.value = isShow
}


const isOnlyShowChinesePolicy = ref(false);

const handleSwitchPolicy = (isShow) => {
  isOnlyShowChinesePolicy.value = isShow;
};

const preVersion = ref("委员会初始版本（2025年5月20日）");

const preVersionList = ref([
  {
    label: "委员会初始版本（2025年5月20日）",
    value: "委员会初始版本（2025年5月20日）",
  },
]);

const curVersion = ref("公法（2025年7月4日）");
const curVersionList = ref([
  {
    label: "公法（2025年7月4日）",
    value: "公法（2025年7月4日）",
  },
]);

const isShowDetailDialog = ref(false);

const handleClickDetail = (isShow) => {
  isShowDetailDialog.value = isShow;
};
</script>

<style lang="scss" scoped>
.process-overview-wrap {
  width: 1744px;
  height: 848px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  margin-top: 16px;
  position: relative;
  .box-header {
    width: 100%;
    height: 56px;
    display: flex;
    position: relative;
    .header-left {
      margin-top: 18px;
      width: 8px;
      height: 20px;
      border-radius: 0 4px 4px 0;
      background: var(--color-main-active);
    }
    .title {
      margin-left: 14px;
      margin-top: 14px;
      height: 26px;
      line-height: 26px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: 700;
    }
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 4px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
  }
  .main {
    margin-left: 59px;
    height: 680px;
    padding: 3px 10px;
    .left {
      height: 680px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .top {
        height: 260px;
        display: flex;
        position: relative;
        .top-line {
          position: absolute;
          left: 110px;
          top: 242px;
          height: 8px;
          width: 1100px;
          background: url("./assets/images/top-line-icon.png");
          .top-line1 {
            position: absolute;
            right: -120px;
            top: 0;
            height: 8px;
            width: 120px;
            background: url("./assets/images/top-line-icon.png");
            transform: rotate(45deg);
            transform-origin: top left;
          }
        }
        .start {
          width: 120px;
          height: 260px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          align-items: center;
          .icon {
            width: 120px;
            height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            margin-top: 30px;
            width: 100px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8;
            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: 16px;
            font-weight: 700;
            line-height: 20px;
          }
        }
        .content-box {
          display: flex;
          margin-left: 134px;
          margin-bottom: 19px;
          .item-box {
            padding: 2px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            .item-time {
              position: absolute;
              bottom: -50px;
              left: 30px;
              height: 30px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
            }
            .item-box-dot {
              position: absolute;
              z-index: 9999;
              left: 10px;
              bottom: -7px;
              width: 12px;
              height: 12px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .item-header {
              display: flex;
              height: 30px;
              border-left: 1px solid rgb(20, 89, 187);
              padding: 0 10px;
              .item-title {
                height: 30px;
                line-height: 30px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 30px;
                span {
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 22px;
                }
              }
              .item-header-icon {
                margin-top: 7px;
                margin-left: 5px;
                width: 16px;
                height: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .item-info {
              height: 30px;
              border-left: 1px solid rgb(20, 89, 187);
              padding: 0 10px;
              color: rgba(132, 136, 142, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            }
            .item-main {
              border-left: 1px solid rgb(20, 89, 187);
              padding: 5px 10px;
              .item-main-item {
                display: flex;
                height: 30px;
                .icon {
                  margin: 12px;
                  width: 6px;
                  height: 6px;
                  border-radius: 3px;
                  background: #84888e;
                }
                .text {
                  height: 30px;
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 30px;
                }
              }
            }
            .item-footer {
              border-left: 1px solid rgb(20, 89, 187);
              display: flex;
              padding: 8px 15px;
              justify-content: space-between;
              .item-footer-box {
                display: flex;
                margin-left: 12px;
                .icon {
                  position: relative;
                  width: 24px;
                  height: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                  .inner-icon {
                    position: absolute;
                    right: -5px;
                    top: 0;
                    width: 12px;
                    height: 12px;
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.8);
                    display: flex;
                    box-sizing: border-box;
                    padding: 1px;
                    img {
                      width: 10px;
                      height: 10px;
                    }
                  }
                }
                .text {
                  margin-left: 9px;
                  height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
            }
          }
        }
      }

      .bottom {
        margin-top: 150px;
        // height: 300px;
        display: flex;
        position: relative;

        .bottom-line {
          position: absolute;
          left: 110px;
          top: 11px;
          height: 8px;
          width: 1100px;
          background: url("./assets/images/bottom-line-icon.png");
          .bottom-line1 {
            position: absolute;
            right: -120px;
            top: 0;
            height: 8px;
            width: 120px;
            background: url("./assets/images/bottom-line-icon.png");
            transform: rotate(-45deg);
            transform-origin: top left;
          }
        }
        .start {
          width: 120px;
          // height: 260px;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          .icon {
            margin-top: 30px;
            width: 120px;
            height: 120px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            width: 100px;
            height: 30px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 8;
            padding: 1px 8px;
            box-sizing: border-box;
            border-radius: 4px;
            background: rgba(230, 244, 255, 1);
            color: rgba(22, 119, 255, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 20px;
          }
        }
        .content-box {
          display: flex;
          margin-left: 30px;
          .item-box {
            padding: 20px 15px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            position: relative;
            .item-time {
              position: absolute;
              top: -30px;
              left: 30px;
              height: 30px;
              color: rgba(255, 172, 77, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 30px;
            }
            .item-box-dot {
              position: absolute;
              z-index: 9999;
              left: 10px;
              top: 7px;
              width: 12px;
              height: 12px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .item-header {
              display: flex;
              height: 30px;
              border-left: 1px solid rgba(255, 172, 77, 1);
              padding: 5px 10px;
              .item-title {
                height: 30px;
                line-height: 30px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 30px;
                span {
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 22px;
                }
              }
              .item-header-icon {
                margin-top: 7px;
                margin-left: 5px;
                width: 16px;
                height: 16px;
                cursor: pointer;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .item-info {
              height: 30px;
              border-left: 1px solid rgba(255, 172, 77, 1);
              padding: 0 10px;
              color: rgba(132, 136, 142, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            }
            .item-main {
              border-left: 1px solid rgba(255, 172, 77, 1);
              padding: 5px 10px;
              .item-main-item {
                display: flex;
                // height: 30px;
                width: 269px;
                .icon {
                  margin: 12px;
                  width: 6px;
                  height: 6px;
                  border-radius: 3px;
                  background: #84888e;
                }
                .text {
                  width: 240px;
                  // height: 30px;
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 30px;
                }
              }
            }
            .item-footer {
              border-left: 1px solid rgba(255, 172, 77, 1);
              display: flex;
              padding: 8px 15px;
              justify-content: space-between;
              .item-footer-box {
                display: flex;
                margin-left: 12px;
                .icon {
                  position: relative;
                  width: 24px;
                  height: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                  .inner-icon {
                    position: absolute;
                    right: -5px;
                    top: 0;
                    width: 12px;
                    height: 12px;
                    border-radius: 6px;
                    background: rgba(255, 255, 255, 0.8);
                    display: flex;
                    box-sizing: border-box;
                    padding: 1px;
                    img {
                      width: 10px;
                      height: 10px;
                    }
                  }
                }
                .text {
                  margin-left: 9px;
                  height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
            }
          }
        }
      }

      .right {
        position: absolute;
        left: 1295px;
        top: calc(50% - 50px);
        display: flex;
        align-items: center;
        .right-line {
          width: 140px;
          height: 8px;
          background: url("./assets/images/right-line-icon.png");
        }
        .right-info {
          height: 60px;
          width: 159px;
          box-sizing: border-box;
          border: 1px solid rgba(95, 101, 108, 1);
          border-radius: 4px;
          background: rgba(255, 255, 255, 1);
          color: rgba(59, 65, 75, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 22px;
          text-align: center;
          box-sizing: border-box;
          padding: 8px 20px;
        }
      }
    }
  }
  .footer {
    width: 1710px;
    height: 76px;
    display: flex;
    border: 1px solid rgba(231, 241, 255, 1);
    border-radius: 4px;
    background: rgba(246, 251, 255, 1);
    margin-left: 13px;
    .footer-left {
      margin-top: 28px;
      margin-left: 12px;
      width: 19px;
      height: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .footer-center {
      margin-left: 13px;
      margin-top: 8px;
      width: 1617px;
      height: 60px;
      color: var(--color-main-active);
      font-family: Microsoft YaHei;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
    }
    .footer-right {
      margin-left: 13px;
      margin-top: 28px;
      width: 24px;
      height: 24px;
      background: rgba(231, 241, 255, 1);
      border-radius: 12px;
      background: #e7f1ff;
      box-sizing: border-box;
      padding: 3px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .dialog-wrapper {
    position: absolute;
    top: 56px;
    right: 17px;
    width: 480px;
    height: 692px;
    box-sizing: border-box;
    border: 1px solid rgba(230, 231, 232, 1);
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    .dialog-box1 {
      display: flex;
      height: 65px;
      position: relative;
      .icon {
        width: 48px;
        height: 48px;
        margin-left: 18px;
        margin-top: 17px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .title {
        color: rgba(59, 65, 75, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
        margin-top: 19px;
        margin-left: 16px;
        // width: 118px;
        width: 158px;
        span {
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
        }
      }
      .close {
        position: absolute;
        top: 14px;
        right: 15px;
        width: 16px;
        height: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .dialog-box2 {
      height: 59px;
      border-bottom: 1px solid rgba(240, 242, 244, 1);
    }
    .dialog-box3 {
      width: 438px;
      height: 46px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1px solid rgba(231, 241, 255, 1);
      border-radius: 4px;
      background: rgba(246, 251, 255, 1);
      margin-left: 23px;
      margin-top: 15px;
      .box3-left {
        width: 19px;
        height: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .box3-center {
        width: 345px;
        margin-left: 25px;
        color: var(--color-main-active);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        line-height: 46px;
      }
      .box3-right {
        width: 24px;
        height: 24px;
        background: rgba(231, 241, 255, 1);
        border-radius: 12px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .dialog-box4 {
      width: 438px;
      margin-left: 23px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      height: 30px;
      .box4-left {
        display: flex;
        .icon {
          margin-top: 6px;
          width: 18px;
          height: 18px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          width: 64px;
          height: 30px;
          margin-left: 6px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 16px;
          font-weight: 700;
          line-height: 30px;
        }
      }
      .box4-right {
        height: 30px;
        line-height: 30px;
        color: rgba(20, 89, 187, 1);
        font-family: Microsoft YaHei;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
      }
    }
    .dialog-box5 {
      margin-top: 3px;
      margin-left: 23px;
      width: 438px;
      .box5-item {
        height: 30px;
        color: rgba(132, 136, 142, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        line-height: 30px;
        display: flex;
        .icon {
          margin-left: 15px;
          width: 6px;
          height: 6px;
          margin-top: 12px;
          border-radius: 3px;
          background: #84888e;
        }
        .text {
          margin-left: 10px;
        }
      }
    }
    .dialog-box6 {
      margin-top: 30px;
      margin-left: 20px;
      display: flex;
      height: 30px;
      .icon {
        margin-top: 6px;
        width: 18px;
        height: 18px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        color: rgba(95, 101, 108, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 30px;
        margin-left: 6px;
      }
    }
    .dialog-box7 {
      margin-left: 21px;
      margin-top: 3px;
      height: 190px;
      width: 440px;
      overflow: hidden;
      .box7-item {
        display: flex;
        .icon {
          width: 42px;
          height: 42px;
          position: relative;
          img {
            width: 42px;
            height: 42px;
          }
          .inner-icon {
            position: absolute;
            top: 0;
            right: -8px;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            padding: 2px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.8);
            img {
              width: 20px;
              height: 20px;
            }
          }
        }
        .right {
          margin-left: 30px;
          .name {
            height: 30px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
          }
          .content {
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
          }
        }
      }
    }
  }
  .dialog-wrapper1 {
    position: absolute;
    z-index: 9999;
    top: -120px;
    width: 1600px;
    height: 1000px;
    box-sizing: border-box;
    border: 1px solid rgba(230, 231, 232, 1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    .dialog-header {
      height: 48px;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(240, 242, 244, 1);
      display: flex;
      justify-content: space-between;
      .header-left {
        display: flex;
        .icon {
          width: 20px;
          height: 20px;
          margin-left: 14px;
          margin-top: 14px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          margin-left: 11px;
          margin-top: 16px;
          height: 14px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }
      .header-right {
        width: 16px;
        height: 16px;
        margin-top: 16px;
        margin-right: 16px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .dialog-info {
      display: flex;
      width: 1552px;
      height: 64px;
      margin: 12px auto;
      .info-box1 {
        span {
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }
      .info-box2 {
        margin-left: 24px;
        span {
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }
      .info-box3 {
        display: flex;
        .icon1 {
          margin-left: 25px;
          margin-top: 8px;
          width: 14px;
          height: 14px;
          border-radius: 4px;
          border: 1px solid #333;
        }
        .icon2 {
          margin-left: 25px;
          margin-top: 8px;
          width: 18px;
          height: 18px;
          border-radius: 4px;
          img {
            width: 18px;
            height: 18px;
          }
        }
        .text {
          margin-left: 9px;
          margin-top: 9px;
          color: rgba(95, 101, 108, 1);
          font-family: Microsoft YaHei;
          font-size: 14px;
          font-weight: 400;
          line-height: 14px;
        }
      }
      .info-box4 {
        margin-left: 500px;
        margin-top: 5px;
        position: relative;
        .icon {
          position: absolute;
          right: 5px;
          top: 5px;
          width: 16px;
          height: 16px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .dialog-main {
      height: 750px;
      width: 1505px;
      margin: 0 auto;
      border-bottom: 1px solid #e9e9e9;
      .dialog-main-header {
        width: 1505px;
        height: 54px;
        display: flex;
        background: rgba(59, 65, 75, 1);
        color: #fff;
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 700;
        line-height: 54px;
        .dialog-main-header-left {
          flex: 1;
          padding-left: 16px;
        }
        .dialog-main-header-right {
          flex: 1;
        }
      }
      .dialog-main-item {
        width: 1505px;
        display: flex;
        padding: 16px;
        height: 139px;
        box-sizing: border-box;
        .dialog-main-left {
          flex: 1;
          .dialog-main-item-title {
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            display: flex;
            .title-left {
              width: 96px;
            }

            .title-right {
              flex: 1;
            }
          }
          .dialog-main-item-content {
            margin-left: 96px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
          }
        }
        .dialog-main-right {
          flex: 1;
          .dialog-main-item-title {
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
            display: flex;
            .title-left {
              width: 96px;
            }

            .title-right {
              flex: 1;
            }
          }
          .dialog-main-item-content {
            margin-left: 96px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
          }
        }
      }
      .dialog-main-item:nth-child(2n-1) {
        border-radius: 4px;
        background: rgba(248, 249, 250, 1);
      }
    }
    .dialog-footer {
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
