<template>
	<div class="sanctions-overview">
		<div class="main">
			<div class="left">
				<div class="left-top">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">基本信息</div>
						<div class="btn">
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
          <div class="left-top-title">
            <div class="info-row">
              <div class="label">发布机构：</div>
              <div class="value link">
                <img :src="title" alt="" class="icon">
                <span>商务部工业与安全局 ></span>
              </div>
            </div>
            <div class="info-row">
              <div class="label">发布时间：</div>
              <div class="value">2025年9月16日</div>
            </div>
            <div class="info-row">
              <div class="label">生效时间：</div>
              <div class="value">2025年9月12日</div>
            </div>
            <div class="info-row">
              <div class="label">发布文件：</div>
              <div class="value">2025-17893 (90 FR 44496)</div>
            </div>
            <div class="info-row">
              <div class="label">案卷号：</div>
              <div class="value">No. 250912-0152</div>
            </div>
            <div class="info-row">
              <div class="label">发布人：</div>
              <div class="value link">
                <img :src="defaultTitle" alt="" class="icon avatar">
                <span>朱莉哑·A·赫尔松斯基 (战略贸易副助理部长) ></span>
              </div>
            </div>
            <div class="info-row">
              <div class="label">制裁领域：</div>
              <div class="value tags">
                <span class="tag">量子科技</span>
                <span class="tag">人工智能</span>
                <span class="tag">集成电路</span>
              </div>
            </div>
          </div>
          <div class="left-top-content">
            <div class="content-title">制裁实体分布：</div>
            <div class="distribution-list">
              <div 
                class="list-item" 
                v-for="(item, index) in entityDistribution" 
                :key="index"
              >
                <img :src="flag" alt="" class="flag">
                <div class="country-name">{{ item.name }}</div>
                <div class="progress-bar-container">
                  <div 
                    class="progress-bar" 
                    :style="{ 
                      width: item.width, 
                      background: item.gradient 
                    }"
                  ></div>
                </div>
                <div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
              </div>
            </div>
          </div>
				</div>
				<div class="left-bottom">
					<div class="title-com">
						<div class="box"></div>
						<div class="text">制裁背景</div>
						<div class="btn">
							<img src="../../assets/下载按钮.png" alt="" />
							<img src="../../assets/收藏按钮.png" alt="" />
						</div>
					</div>
          <div class="left-bottom-content">
            <div class="timeline-list">
              <div 
                class="timeline-item" 
                v-for="(item, index) in timelineData" 
                :key="index"
              >
                <div class="date-row">
                  <div class="dot"></div>
                  <div class="date">{{ item.date }}</div>
                </div>
                <div class="content">{{ item.content }}</div>
              </div>
            </div>
            <div class="view-more">
              查看更多 <el-icon class="icon-more"><DArrowRight /></el-icon>
            </div>
          </div>
				</div>
			</div>
			<div class="right">
				<div class="title-com">
					<div class="box"></div>
					<div class="text">制裁清单</div>
					<div class="btn">
						<img src="../../assets/下载按钮.png" alt="" /> 
						<img src="../../assets/收藏按钮.png" alt="" />
					</div>
				</div>
        <div class="right-title">
          <div class="filter-row">
            <div class="filter-left">
              <el-select v-model="filterEntity" placeholder="受制裁实体" style="width: 184px">
                <el-option label="受制裁实体" value="1" />
              </el-select>
            </div>
            <div class="filter-right">
              <el-checkbox v-model="onlyChina" label="只看中国实体" />
              <el-select v-model="filterField" placeholder="全部领域" style="width: 150px; margin: 0 12px 0 16px">
                <el-option label="全部领域" value="1" />
              </el-select>
              <el-input
                v-model="searchKeyword"
                placeholder="搜索实体"
                style="width: 150px"
                :suffix-icon="Search"
              />
            </div>
          </div>
          <div class="stats-row">
            <div class="tabs">
              <div class="tab-btn" :class="{ active: activeTab === 'add' }" @click="activeTab = 'add'">新增实体</div>
              <div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div>
            </div>
            <div class="stats-info">
              <div class="stat-item">
                <span class="dot red"></span>
                <span class="text">新增 <span class="num red">24</span> 家 (50%规则涉及<span class="num red">51</span>家)</span>
              </div>
              <div class="stat-item">
                <span class="dot green"></span>
                <span class="text">移除 <span class="num green">4</span> 家 (50%规则涉及<span class="num green">6</span>家)</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right-content">
          <div class="sanction-group-list">
            <div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
              <el-table 
                :data="group.entities" 
                style="width: 100%"
              >
                <el-table-column label="实体名称" min-width="280">
                  <template #default="scope">
                    <div class="name-cell">
                      <div class="dot"></div>
                      <img :src="defaultTitle" class="company-icon" />
                      <span class="company-name">{{ scope.row.name }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="涉及领域" width="120" align="center">
                  <template #default="scope">
                    <span class="tag" :style="getTagStyle(scope.row.field)">{{ scope.row.field }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="location" label="上市地点" width="100" align="center" />
                <el-table-column prop="date" label="制裁时间" width="120" align="center" />
                <el-table-column prop="revenue" label="营收(亿元)" width="120" align="center" />
                <el-table-column label="50%规则子企业" width="180" align="center">
                  <template #default="scope">
                    <span v-if="scope.row.subsidiaryCount" class="subsidiary-link">
                      {{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
                    </span>
                    <span v-else>--</span>
                  </template>
                </el-table-column>
              </el-table>
              <div class="reason-box">
                {{ group.reason }}
              </div>
            </div>
          </div>
        </div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import { DArrowRight, Search } from "@element-plus/icons-vue";
import title from "../../assets/title.png"
import defaultTitle from "../../assets/default-icon1.png"
import flag from "../../assets/default-icon2.png"

const filterEntity = ref('')
const onlyChina = ref(true)
const filterField = ref('')
const searchKeyword = ref('')
const activeTab = ref('add')

const tagColors = [
  { bg: 'rgb(242, 235, 255)', border: 'rgb(211, 190, 255)', text: 'rgb(114, 46, 209)' }, // Purple
  { bg: 'rgb(225, 250, 248)', border: 'rgb(178, 242, 238)', text: 'rgb(16, 178, 166)' }, // Cyan
  { bg: 'rgb(231, 243, 255)', border: 'rgb(186, 224, 255)', text: 'rgb(5, 95, 194)' },   // Blue
  { bg: 'rgb(255, 247, 230)', border: 'rgb(255, 213, 145)', text: 'rgb(250, 140, 22)' }, // Orange
  { bg: 'rgb(255, 241, 240)', border: 'rgb(255, 204, 199)', text: 'rgb(245, 34, 45)' },  // Red
  { bg: 'rgb(246, 255, 237)', border: 'rgb(183, 235, 143)', text: 'rgb(82, 196, 26)' },  // Green
];

const getTagStyle = (tagName) => {
  if (!tagName) return {};
  let hash = 0;
  for (let i = 0; i < tagName.length; i++) {
    hash = tagName.charCodeAt(i) + ((hash << 5) - hash);
  }
  const index = Math.abs(hash) % tagColors.length;
  const color = tagColors[index];
  return {
    backgroundColor: color.bg,
    borderColor: color.border,
    color: color.text
  };
}

const sanctionList = ref([
  {
    reason: "该实体因获取和试图获取美国原产物品以支持中国军事和国防相关空间领域活动以及中国量子技术能力而被列入；鉴于量子技术的军事应用，这些行动对美国国家安全造成严重影响。",
    entities: [
      {
        name: "中国科学院国家授时中心",
        field: "量子科技",
        fieldClass: "purple",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      }
    ]
  },
  {
    reason: "这些实体被列入清单是因为其获取和试图获取美国原产物品以支持中国军事现代化，参与中国先进计算和集成电路制造及分销领域，以及直接供应中国军事、政府和安全机构。上海复旦微电子股份有限公司和中芯国际集成电路制造有限公司将获得脚注 4 的指定。这些实体参与高性能计算（HPC）芯片的生产，包括人工智能和其他双重用途应用。此外，上海复旦微电子股份有限公司已向俄罗斯军事最终用户提供技术。",
    entities: [
      {
        name: "北京复旦微电子技术有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
      {
        name: "上海复旦微电子股份有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "北京复旦微电子技术有...等",
        subsidiaryCount: 4
      },
       {
        name: "深圳复旦微电子有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
       {
        name: "上海复控华龙微系统技术有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
       {
        name: "上海富伟迅捷数字技术有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
       {
        name: "中芯国际集成电路制造有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "上海",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "中芯协成投资（背景）...等",
        subsidiaryCount: 5
      },
       {
        name: "上海复旦微电子（香港）有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      }
    ]
  },
  {
    reason: "这些实体因参与支持受制裁实体（包括伊朗军方）的两用物品转售而被添加。",
    entities: [
      {
        name: "华科供应链（香港）有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "香港",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 2
      },
      {
        name: "华科物流（香港）有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
      {
        name: "深圳新利康供应链管理有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      }
    ]
  },
  {
    reason: "该实体被添加是因为其与支持中国高空气球计划的公司有关联。",
    entities: [
      {
        name: "中国科学院空天信息研究院",
        field: "航空航天",
        fieldClass: "blue",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      }
    ]
  },
  {
    reason: "此次列入的原因是这两家公司采购了原产于美国的物项，并将其转售给实体清单上的实体。具体而言，这两家公司在未获得美国商务部工业安全局（BIS）的必要许可或授权的情况下，为实体清单上的两家实体——中芯国际北方集成电路制造（北京）有限公司和中芯国际（北京）股份有限公司——采购了原产于美国的半导体制造设备。",
    entities: [
      {
        name: "GMC 半导体技术（无锡）有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "GMC集成电路技术有...等",
        subsidiaryCount: 1
      },
      {
        name: "济村半导体技术（上海）有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      }
    ]
  },
  {
    reason: "这些实体构成不可接受的风险，可能将原产于美国的物项用于或转移给中国人民解放军军事医学科学院。",
    entities: [
      {
        name: "北京天一辉远生物技术有限公司",
        field: "生物科技",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "北京天一辉远制药生产...等",
        subsidiaryCount: 1
      },
      {
        name: "北京擎科生物技术有限公司",
        field: "生物科技",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryCount: 0
      },
      {
        name: "上海生工生物工程股份有限公司",
        field: "生物科技",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 3
      }
    ]
  },
  {
    reason: "它们为中国军工联合体的关键客户（包括美国商务部工业安全局（BIS）实体清单上的客户）开发计算机辅助工程软件。",
    entities: [
      {
        name: "上海索辰信息技术有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      },
      {
        name: "香港德迈克斯有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      }
    ]
  },
  {
    reason: "因为它们存在规避出口管制和将产品转移至被列入实体清单实体的风险。",
    entities: [
      {
        name: "长沙网发电子科技有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      },
      {
        name: "常州网发微电子有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      },
      {
        name: "成都网发微电子有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "深圳",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      },
      {
        name: "深圳网发微电子有限公司",
        field: "集成电路",
        fieldClass: "cyan",
        location: "--",
        date: "2025年9月",
        revenue: "325",
        subsidiaryText: "讯飞智元信息科技有限公司...等",
        subsidiaryCount: 15
      }
    ]
  }
])

const timelineData = ref([
  {
    date: "2025-07-31",
    content: "美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
  },
  {
    date: "2025-07-30",
    content: "美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
  },
  {
    date: "2025-07-30",
    content: "美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
  }
])

const entityDistribution = ref([
  { 
    name: "中国", 
    count: 24, 
    width: "100%", 
    gradient: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)" 
  },
  { 
    name: "沙特阿拉伯", 
    count: 2, 
    width: "60%", 
    gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)" 
  },
  { 
    name: "俄罗斯", 
    count: 2, 
    width: "60%", 
    gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)" 
  },
  { 
    name: "中国香港", 
    count: 1, 
    width: "50%", 
    gradient: "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)" 
  }
])
</script>

<style scoped lang="scss">
* {
	margin: 0;
	padding: 0;
}
.sanctions-overview {
	width: 1601px;
	margin: 0 auto;
	padding-top: 16px;
  padding-bottom: 50px;
	.main {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		.left {
			width: 520px;
			height: 1119px;
			.left-top {
				width: 100%;
				height: 582px;
				padding-bottom: 20px;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				background-color: #fff;
				margin-bottom: 16px;
        .left-top-title {
          padding: 22px 0 22px 27px;
          width: 100%;
          height: 286px;
          border-bottom: 1px solid rgb(234, 236, 238);
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          gap: 12px;

          .info-row {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-family: "Microsoft YaHei";
            line-height: 24px;

            .label {
              min-width: 92px;
              color: rgb(59, 65, 75);
              font-weight: 700;
              font-size: 16px;
              font-family: "Microsoft YaHei";
              line-height: 24px;
              text-align: left;
            }

            .value {
              display: flex;
              align-items: center;
              color: rgb(59, 65, 75);
              font-weight: 400;
              font-size: 16px;
              font-family: "Microsoft YaHei";
              line-height: 24px;

              &.link {
                color: rgb(5, 95, 194);
                cursor: pointer;
              }

              .icon {
                width: 20px;
                height: 20px;
                margin-right: 8px;
                object-fit: contain;

                &.avatar {
                  border-radius: 50%;
                  width: 24px;
                  height: 24px;
                }
              }

              &.tags {
                gap: 8px;

                .tag {
                  padding: 1px 8px;
                  background: rgba(246, 250, 255, 1);
                  border-radius: 4px;
                  border: 1px solid rgba(231, 243, 255, 1);
                  color: rgb(5, 95, 194);
                  font-size: 14px;
                  line-height: 20px;
                }
              }
            }
          }
        }
        .left-top-content {
          width: 100%;
          height: 234px;
          padding: 19px 29px 22px 27px;
          
          .content-title {
            font-size: 16px;
            font-weight: 700;
            color: rgb(59, 65, 75);
            font-family: "Microsoft YaHei";
            line-height: 24px;
            margin-bottom: 12px;
            text-align: left;
          }

          .distribution-list {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .list-item {
              display: flex;
              align-items: center;
              height: 24px;

              .flag {
                width: 24px;
                height: 24px;
                margin-right: 16px;
                border-radius: 50%;
                object-fit: cover;
              }

              .country-name {
                width: 96px;
                font-size: 16px;
                font-weight: 400;
                color: rgb(59, 65, 75);
                font-family: "Microsoft YaHei";
                line-height: 24px;
                margin-right: 12px;
                text-align: left;
              }

              .progress-bar-container {
                flex: 1;
                height: 8px;
                // background: #f0f2f5;
                // border-radius: 4px;
                // overflow: hidden;
                margin-right: 24px;
                display: flex;
                align-items: center;

                .progress-bar {
                  height: 100%;
                  border-radius: 4px;
                }
              }

              .count {
                // width: 40px;
                text-align: right;
                font-size: 16px;
                font-weight: 400;
                color: rgb(59, 65, 75);
                font-family: "Microsoft YaHei";
                line-height: 24px;

                &.highlight {
                  color: rgb(206, 79, 81);
                  font-weight: 700;
                }
              }
            }
          }
        }
			}
			.left-bottom {
				width: 100%;
				height: 521px;
				padding-bottom: 20px;
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
				background-color: #fff;
        .left-bottom-content {
          padding: 26px 30px 0 25px;

          .timeline-list {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 24px;
          }

          .timeline-item {
            display: flex;
            flex-direction: column;
            // margin-left: 12px;
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: 6px;
              top: 12px;
              height: calc(100% + 24px);
              width: 1px;
              background-color: rgb(234, 236, 238);
              transform: translateX(-50%);
            }

            &:last-child::before {
              display: none;
            }
          }

          .date-row {
            display: flex;
            align-items: center;
            margin-bottom: 3px;
          }

          .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #fff;
            border: 3px solid rgb(5, 95, 194);
            box-sizing: border-box;
            margin-right: 13px;
            position: relative;
            z-index: 1;
          }

          .date {
            font-size: 16px;
            font-weight: 700;
            color: rgb(5, 95, 194);
            font-family: "Microsoft YaHei";
            line-height: 24px;
            // margin-bottom: 3px;
          }

          .content {
            font-size: 16px;
            font-weight: 400;
            color: rgb(59, 65, 75);
            line-height: 24px;
            margin-left: 25px;
            text-align: left;
            font-family: "Microsoft YaHei";
          }

          .view-more {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 400;
            color: rgb(5, 95, 194);
            cursor: pointer;
            margin-top: 24px;
            font-family: "Microsoft YaHei";

            .icon-more {
              transform: rotate(90deg);
              margin-left: 8px;
            }
          }
        }
			}
		}
		.right {
			width: 1064px;
			height: auto;
			border-radius: 10px;
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background-color: #fff;
      .right-title {
        width: 100%;
        // height: 107px;
        padding: 4px 20px 20px 20px;
        box-sizing: border-box;

        .filter-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;

          :deep(.el-input__inner) {
            font-size: 16px;
            font-weight: 400;
            font-family: "Microsoft YaHei";
            line-height: 24px;
            color: rgb(95, 101, 108);

            &::placeholder {
              color: rgb(95, 101, 108);
            }
          }

          :deep(.el-checkbox__label) {
            font-size: 16px;
            font-weight: 400;
            font-family: "Microsoft YaHei";
            line-height: 24px;
            color: rgb(95, 101, 108);
          }

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

        .stats-row {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .tabs {
            display: flex;
            gap: 8px;

            .tab-btn {
              padding: 4px 8px;
              border: 1px solid rgb(230, 231, 232);
              border-radius: 4px;
              cursor: pointer;
              font-size: 18px;
              color: rgb(59, 65, 75);
              font-weight: 400;
              line-height: 24px;
              font-family: "Microsoft YaHei";

              &.active {
                color: rgb(5, 95, 194);
                border-color: rgb(5, 95, 194);
                font-weight: 700;
              }
            }
          }

          .stats-info {
            display: flex;
            gap: 24px;
            align-items: center;

            .stat-item {
              display: flex;
              align-items: center;
              font-size: 18px;
              color: rgb(59, 65, 75);
              font-family: "Microsoft YaHei";
              line-height: 24px;
              margin-right: 34px;
              .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin-right: 8px;

                &.red {
                  background-color: rgb(206, 79, 81);
                }
                &.green {
                  background-color: rgb(33, 129, 57);
                }
              }

              .text {
                font-size: 18px;
                font-weight: 700;
                line-height: 24px;
                font-family: "Microsoft YaHei";
                color: rgb(59, 65, 75);
                .num {
                  font-weight: 700;
                  &.red {
                    color: rgb(206, 79, 81);
                  }
                  &.green {
                    color: rgb(33, 129, 57);
                  }
                }
              }
            }
          }
        }
      }
        .right-content {
          padding: 0 20px 17px 20px;

          .sanction-group-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            
            .sanction-group {
              border: 1px solid rgb(234, 236, 238);
              border-radius: 8px;
              overflow: hidden;

              :deep(.el-table__header-wrapper) {
                th {
                  background-color: rgb(59, 65, 75) !important;
                  height: 48px;
                  padding: 0;
                  color: #fff;
                  font-weight: 700;
                  font-size: 16px;
                  font-family: "Microsoft YaHei";
                  border-bottom: none;
                }
                th:first-child {
                  border-top-left-radius: 8px;
                }
                th:last-child {
                  border-top-right-radius: 8px;
                }
              }

              :deep(.el-table__body-wrapper) {
                tr:nth-child(odd) td {
                  background-color: rgba(248, 249, 250, 1);
                }
                tr:nth-child(even) td {
                  background-color: #fff;
                }
                td {
                  height: 48px;
                  padding: 0;
                  font-size: 16px;
                  font-weight: 400;
                  font-family: "Microsoft YaHei";
                  color: rgb(95, 101, 108);
                  line-height: 24px;
                }
              }

              .name-cell {
                display: flex;
                align-items: center;
                
                .dot {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: rgb(206, 79, 81);
                  margin-right: 16px;
                  flex-shrink: 0;
                }
                
                .company-icon {
                  width: 24px;
                  height: 24px;
                  margin-right: 12px;
                  border-radius: 50%;
                  flex-shrink: 0;
                }

                .company-name {
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 24px;
                  font-family: "Microsoft YaHei";
                  color: rgba(59, 65, 75, 1);
                }
              }

              .tag {
                padding: 1px 8px;
                border-radius: 4px;
                font-size: 14px;
                display: inline-block;
                border: 1px solid transparent; 
              }

              .subsidiary-link {
                cursor: pointer;
                font-size: 14px;
                color: rgb(59, 65, 75);
                
                .blue-text {
                  color: rgb(5, 95, 194);
                }
              }

              .reason-box {
                padding: 12px 19px 14px 39px;
                background-color: #fff;
                border-top: 1px solid rgb(234, 236, 238);
                font-size: 16px;
                color: rgb(59, 65, 75);
                line-height: 28px;
                font-family: "Microsoft YaHei";
                text-align: left;
              }
            }
          }
        }
		}
	}
}
.title-com {
	width: 100%;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 14px 12px 16px 0;
	.box {
		width: 8px;
		height: 20px;
		background-color: rgb(5, 95, 194);
		border-bottom-right-radius: 4px;
		border-top-right-radius: 4px;
		margin-right: 14px;
	}
	.text {
		font-size: 20px;
		font-weight: 700;
		font-family: "Microsoft YaHei";
		line-height: 26px;
		color: rgb(5, 95, 194);
	}
	.btn {
		width: 60px;
		height: 28px;
		margin-left: auto;
		img {
			width: 28px;
			height: 28px;
			cursor: pointer;
		}
		img:first-child {
			margin-right: 4px;
		}
	}
}
</style>
