Skip to content

R
risk-monitor
提交 be0dcea2 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

企业主页：被制裁情况:事件对接

实体清单跳转逻辑修复
上级 c54c4460
隐藏空白字符变更
内嵌 并排
正在显示 包含 759 行增加 和 608 行删除
src/api/companyPages/index.js
浏览文件 @ be0dcea2
...@@ -83,3 +83,12 @@ export function getEnterprisPatentField(params) { ...@@ -83,3 +83,12 @@ export function getEnterprisPatentField(params) {
} }
//被制裁情况:事件
export function getSanctionList(params) {
return request({
method: 'GET',
url: `/api/enterprisePage/getSanctionList/${params}`,
})
}
src/router/modules/company.js
浏览文件 @ be0dcea2
...@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue"; ...@@ -4,7 +4,7 @@ import companyPages from "@/views/companyPages/index.vue";
const companyPagesRoutes = [ const companyPagesRoutes = [
// 智库系统的主要路由 // 智库系统的主要路由
{ {
path: "/companyPages:id", path: "/companyPages/:id",
name: "companyPages", name: "companyPages",
component: companyPages, component: companyPages,
meta: { meta: {
...@@ -14,4 +14,4 @@ const companyPagesRoutes = [ ...@@ -14,4 +14,4 @@ const companyPagesRoutes = [
] ]
export default companyPagesRoutes export default companyPagesRoutes
\ No newline at end of file \ No newline at end of file
src/views/companyPages/component/SanctionsSituation‌.vue
浏览文件 @ be0dcea2
...@@ -30,9 +30,12 @@ ...@@ -30,9 +30,12 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue'; import { ref, onMounted } from 'vue';
import Timeline from './Timeline.vue'; import Timeline from './Timeline.vue';
import process from './process.vue'; import process from './process.vue';
import { useRouter } from "vue-router";
import { getSanctionList } from "@/api/companyPages/index.js";
const router = useRouter();
const sanctionTimeData = ref([ const sanctionTimeData = ref([
{ {
"title": "初步限制与“实体清单”", "title": "初步限制与“实体清单”",
...@@ -60,6 +63,24 @@ const sanctionTimeData = ref([ ...@@ -60,6 +63,24 @@ const sanctionTimeData = ref([
"time": "2025年10月" "time": "2025年10月"
} }
]) ])
// 获取制裁事件
const handleGetSanctionList = async () => {
try {
const res = await getSanctionList(router.currentRoute._value.params.id);
console.log("获取制裁事件", res);
if (res.code === 200 && res.data) {
sanctionTimeData.value = res.data
}
} catch (error) {
console.error("获取制裁事件error", error);
}
};
onMounted(async () => {
handleGetSanctionList()
});
</script> </script>
<style scoped> <style scoped>
......
src/views/companyPages/component/Timeline.vue
浏览文件 @ be0dcea2
...@@ -15,13 +15,13 @@ ...@@ -15,13 +15,13 @@
<div class="node" :style="leftOffset(i)"> <div class="node" :style="leftOffset(i)">
<!-- 圆环 --> <!-- 圆环 -->
<div class="dot" :class="linePos(i, flip)" :style="{ <div class="dot" :class="linePos(i, flip)" :style="{
marginTop: linePos(i, flip) === 'down' ? '-5px' : '35px' marginTop: linePos(i, flip) === 'down' ? '-5px' : '-5px'
}"></div> }"></div>
<div class="time" :style="{ <div class="time" :style="{
marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px' marginTop: linePos(i, flip) === 'down' ? '-50px' : '10px'
}" v-if="type === 'normal'"> }" v-if="type === 'normal'">
{{ item.time }} {{ item.sanctionDate }}
</div> </div>
<!-- 卡片：放到线右侧 --> <!-- 卡片：放到线右侧 -->
<div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)" :style="{ <div class="card" :class="[cardPos(i, flip), 'right-side']" @click="$emit('click-card', item)" :style="{
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<div class="time" :style="{ <div class="time" :style="{
marginLeft: 0 marginLeft: 0
}" v-if="type !== 'normal'"> }" v-if="type !== 'normal'">
{{ item.time }} {{ item.sanctionDate }}
</div> </div>
<div class="title"> <div class="title">
{{ item.title }} {{ item.title }}
......
src/views/exportControl/index.vue
浏览文件 @ be0dcea2
...@@ -66,17 +66,9 @@ ...@@ -66,17 +66,9 @@
</div> </div>
</div> </div>
<div class="home-main-header-footer-info"> <div class="home-main-header-footer-info">
<InfoCard <InfoCard v-for="(item, index) in infoList" :key="item.id" :title="item.nameZh" :subtitle="item.nameAbbr"
v-for="(item, index) in infoList" :description="item.description" :quantity="item.postCount" unit="次" :color="infoListColor[index]"
:key="item.id" @click="handleToEntityListNoId(item)" />
:title="item.nameZh"
:subtitle="item.nameAbbr"
:description="item.description"
:quantity="item.postCount"
unit="次"
:color="infoListColor[index]"
@click="handleToEntityListNoId(item)"
/>
</div> </div>
</div> </div>
...@@ -102,15 +94,8 @@ ...@@ -102,15 +94,8 @@
<img src="./assets/images/box1-right.png" alt="" /> <img src="./assets/images/box1-right.png" alt="" />
</div> </div>
</div> </div>
<el-carousel <el-carousel ref="carouselRef" height="350px" :autoplay="true" :interval="3000" arrow="never"
ref="carouselRef" indicator-position="none" @change="handleCarouselChange">
height="350px"
:autoplay="true"
:interval="3000"
arrow="never"
indicator-position="none"
@change="handleCarouselChange"
>
<el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index"> <el-carousel-item v-for="(item, index) in entitiesDataInfoList" :key="item.id + index">
<div> <div>
<div class="box1-top"> <div class="box1-top">
...@@ -128,11 +113,8 @@ ...@@ -128,11 +113,8 @@
</div> </div>
<div class="box1-top-content-item"> <div class="box1-top-content-item">
<span class="box1-top-content-item-title">· 涉及领域：</span> <span class="box1-top-content-item-title">· 涉及领域：</span>
<div <div class="box1-top-content-item-tags" v-for="(domainItem, index) in item.domains"
class="box1-top-content-item-tags" :key="index">
v-for="(domainItem, index) in item.domains"
:key="index"
>
<el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag> <el-tag :type="getTagType(domainItem)">{{ domainItem }}</el-tag>
</div> </div>
</div> </div>
...@@ -141,18 +123,10 @@ ...@@ -141,18 +123,10 @@
<div class="box1-bottom"> <div class="box1-bottom">
<div class="box1-bottom-title">· 涉及主要实体：</div> <div class="box1-bottom-title">· 涉及主要实体：</div>
<div class="box1-bottom-content"> <div class="box1-bottom-content">
<div <div class="box1-bottom-content-item" v-for="(ett, index) in item.sanEntities" :key="index"
class="box1-bottom-content-item" @click="handleEntityClick(ett)">
v-for="(ett, index) in item.sanEntities" <el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img"
:key="index" alt=""></el-image>
@click="handleEntityClick(ett)"
>
<el-image
v-if="ett.img"
class="box1-bottom-content-item-img"
:src="ett.img"
alt=""
></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined"> <div v-else class="box1-bottom-content-item-imgUndefined">
{{ {{
(ett.entityNameZh || ett.enName)?.match( (ett.entityNameZh || ett.enName)?.match(
...@@ -168,7 +142,9 @@ ...@@ -168,7 +142,9 @@
</div> </div>
<div class="box1-absolute"> <div class="box1-absolute">
<div class="box1-absolute-des"> <div class="box1-absolute-des">
<el-icon><Warning color="rgba(206, 79, 81, 1)" /></el-icon> <el-icon>
<Warning color="rgba(206, 79, 81, 1)" />
</el-icon>
<span>新增中国实体</span> <span>新增中国实体</span>
</div> </div>
<div class="box1-absolute-num">{{ item.cnEntityCount }}家</div> <div class="box1-absolute-num">{{ item.cnEntityCount }}家</div>
...@@ -181,23 +157,16 @@ ...@@ -181,23 +157,16 @@
</custom-container> </custom-container>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<custom-container <custom-container titleType="danger" title="风险信号" :headerNum="warningList.length" :titleIcon="dangerIcon"
titleType="danger" height="450px">
title="风险信号"
:headerNum="warningList.length"
:titleIcon="dangerIcon"
height="450px"
>
<template #default> <template #default>
<div class="box2-main"> <div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index" @click="handleToRiskSignalDetail(item)"> <div class="box2-main-item" v-for="(item, index) in warningList" :key="index"
<div @click="handleToRiskSignalDetail(item)">
class="item-left" <div class="item-left" :class="{
:class="{ itemLeftStatus1: item.status === '一般风险',
itemLeftStatus1: item.status === '一般风险', itemLeftStatus2: item.status === '重大风险'
itemLeftStatus2: item.status === '重大风险' }">
}"
>
{{ item.status }} {{ item.status }}
</div> </div>
<div class="item-right"> <div class="item-right">
...@@ -242,17 +211,9 @@ ...@@ -242,17 +211,9 @@
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px"> <custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #default> <template #default>
<div class="dialog-list"> <div class="dialog-list">
<MessageBubble <MessageBubble v-for="(item, index) in socialMediaList" @click="handlePerClick(item)"
v-for="(item, index) in socialMediaList" @info-click="handleMediaClick(item)" :key="index" :avatar="item.avatar" :name="item.name"
@click="handlePerClick(item)" :time="item.time" :source="item.source" :content="item.content" />
@info-click="handleMediaClick(item)"
:key="index"
:avatar="item.avatar"
:name="item.name"
:time="item.time"
:source="item.source"
:content="item.content"
/>
<!-- <MessageBubble <!-- <MessageBubble
:avatar="customMessage.avatar" :avatar="customMessage.avatar"
:name="customMessage.name" :name="customMessage.name"
...@@ -304,19 +265,14 @@ ...@@ -304,19 +265,14 @@
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="280" align="center"> <el-table-column label="重点领域" width="280" align="center">
<template #default="scope"> <template #default="scope">
<div <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{ <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag tag
}}</el-tag> }}</el-tag>
...@@ -333,19 +289,14 @@ ...@@ -333,19 +289,14 @@
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="重点领域" width="280" align="center"> <el-table-column label="重点领域" width="280" align="center">
<template #default="scope"> <template #default="scope">
<div <div style="display: flex; justify-content: center; align-items: center; gap: 5px">
style="display: flex; justify-content: center; align-items: center; gap: 5px"
>
<el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{ <el-tag v-for="tag in scope.row.tags" :key="tag" :type="getTagType(tag)">{{
tag tag
}}</el-tag> }}</el-tag>
...@@ -362,11 +313,8 @@ ...@@ -362,11 +313,8 @@
<template #default="scope"> <template #default="scope">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span> <span style="margin-right: 10px; width: 40px">{{ scope.row.num }}次</span>
<el-progress <el-progress :percentage="scope.row.percent * 100" :show-text="false"
:percentage="scope.row.percent * 100" :status="getStatus(scope.row.percent)" />
:show-text="false"
:status="getStatus(scope.row.percent)"
/>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -413,13 +361,9 @@ ...@@ -413,13 +361,9 @@
<el-row :gutter="20" style="width: 1600px; margin: 0 auto"> <el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle id="position4" title="资源库" style="margin-top: 54px" /> <CustomTitle id="position4" title="资源库" style="margin-top: 54px" />
<div class="resource-tabs"> <div class="resource-tabs">
<div <div v-for="tab in resourceTabs" :key="tab.value" class="resource-tab-item"
v-for="tab in resourceTabs"
:key="tab.value"
class="resource-tab-item"
:class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }" :class="{ active: activeResourceTab === tab.value, disabled: tab.disabled }"
@click="handleResourceTabClick(tab)" @click="handleResourceTabClick(tab)">
>
{{ tab.label }} {{ tab.label }}
</div> </div>
</div> </div>
...@@ -432,25 +376,15 @@ ...@@ -432,25 +376,15 @@
<div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title"> <div class="box4-item" v-for="(item, idx) in sanctionProcessList" :key="item.title">
<div class="box4-item-left"> <div class="box4-item-left">
<el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" /> <el-image :src="dotIcon" alt="图片" class="box4-item-left-icon" />
<div <div class="box4-item-left-line" v-if="idx + 1 != sanctionProcessList.length"></div>
class="box4-item-left-line"
v-if="idx + 1 != sanctionProcessList.length"
></div>
</div> </div>
<div class="box4-item-right"> <div class="box4-item-right">
<div class="box4-item-right-header" @click="handleSanc(item)"> <div class="box4-item-right-header" @click="handleSanc(item)">
<span class="box4-item-right-header-title" <span class="box4-item-right-header-title">{{ item.postDate }}—{{ item.title }}</span>
>{{ item.postDate }}—{{ item.title }}</span
>
<span class="box4-item-right-header-desc">{{ item.desc }}</span> <span class="box4-item-right-header-desc">{{ item.desc }}</span>
</div> </div>
<el-tooltip <el-tooltip effect="dark" :content="item.content" popper-class="common-prompt-popper"
effect="dark" placement="top" :show-after="500">
:content="item.content"
popper-class="common-prompt-popper"
placement="top"
:show-after="500"
>
<div class="box4-item-right-content"> <div class="box4-item-right-content">
{{ item.content }} {{ item.content }}
</div> </div>
...@@ -458,13 +392,11 @@ ...@@ -458,13 +392,11 @@
</div> </div>
</div> </div>
</div> </div>
<div <div class="box4-footer" :style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }">
class="box4-footer" <el-button type="primary" link @click="handleGetMore">查看更多
:style="{ marginTop: sanctionProcessList.length > 0 ? '0px' : 'auto' }" <el-icon>
> <DArrowRight />
<el-button type="primary" link @click="handleGetMore" </el-icon>
>查看更多
<el-icon><DArrowRight /></el-icon>
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -478,30 +410,19 @@ ...@@ -478,30 +410,19 @@
</template> </template>
<template #default> <template #default>
<div class="box5"> <div class="box5">
<el-table <el-table :data="entitiesList" class="sanction-table" stripe empty-text="暂无数据" height="700px"
:data="entitiesList" header-row-class-name="table-header" row-class-name="table-row">
class="sanction-table"
stripe
empty-text="暂无数据"
height="700px"
header-row-class-name="table-header"
row-class-name="table-row"
>
<!-- <el-table-column prop="index" label="序号" width="80" align="center"> <!-- <el-table-column prop="index" label="序号" width="80" align="center">
<template #default="scope"> <template #default="scope">
{{ scope.$index + 1 + (currentPage - 1) * pageSize }} {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
</template> </template>
</el-table-column> --> </el-table-column> -->
<el-table-column prop="name" label="实体名称" min-width="200"> <el-table-column prop="name" label="实体名称" min-width="200">
<template #default="scope"> <template #default="scope">
<div class="tableName" @click="handleCompClick(scope.row)"> <div class="tableName" @click="handleCompClick(scope.row)">
<el-image <el-image v-if="scope.row.img" class="box1-bottom-content-item-img" :src="scope.row.img"
v-if="scope.row.img" alt=""></el-image>
class="box1-bottom-content-item-img"
:src="scope.row.img"
alt=""
></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined"> <div v-else class="box1-bottom-content-item-imgUndefined">
{{ {{
(scope.row.name || scope.row.enName)?.match( (scope.row.name || scope.row.enName)?.match(
...@@ -552,19 +473,13 @@ ...@@ -552,19 +473,13 @@
<el-table-column prop="revenue" label="50%规则子企业" width="280" align="right"> <el-table-column prop="revenue" label="50%规则子企业" width="280" align="right">
<template #default="scope"> <template #default="scope">
<div class="num-item" v-if="scope.row.ruleOrgCount > 0"> <div class="num-item" v-if="scope.row.ruleOrgCount > 0">
<div <div class="name-item" :class="[
class="name-item" 'revenue-cell',
:class="[ scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
'revenue-cell', ]">
scope.row.revenue === '无营收数据' ? 'no-revenue' : ''
]"
>
{{ scope.row.ruleOrgList[0].orgName }}...等 {{ scope.row.ruleOrgList[0].orgName }}...等
</div> </div>
<div <div style="width: 50px; color: #409eff; cursor: pointer" @click="handleOrgClick(scope.row)">
style="width: 50px; color: #409eff; cursor: pointer"
@click="handleOrgClick(scope.row)"
>
{{ scope.row.ruleOrgCount }}家> {{ scope.row.ruleOrgCount }}家>
</div> </div>
</div> </div>
...@@ -576,15 +491,8 @@ ...@@ -576,15 +491,8 @@
<!-- <div class="pagination-info"> <!-- <div class="pagination-info">
第{{ currentPage }}页，共{{ totalPages }}页 第{{ currentPage }}页，共{{ totalPages }}页
</div> --> </div> -->
<el-pagination <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total"
v-model:current-page="currentPage" :pager-count="5" layout="prev, pager, next" background @current-change="handlePageChange" />
:page-size="pageSize"
:total="total"
:pager-count="5"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -650,14 +558,8 @@ ...@@ -650,14 +558,8 @@
</div> </div>
<div class="right-footer"> <div class="right-footer">
<div class="total-count">共{{ totalAll }}项调查</div> <div class="total-count">共{{ totalAll }}项调查</div>
<el-pagination <el-pagination v-model:current-page="currentPageAll" :page-size="pageSizeAll" :total="totalAll"
v-model:current-page="currentPageAll" layout="prev, pager, next" background @current-change="handlePageChangeAll" />
:page-size="pageSizeAll"
:total="totalAll"
layout="prev, pager, next"
background
@current-change="handlePageChangeAll"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -670,12 +572,8 @@ ...@@ -670,12 +572,8 @@
<div class="dialog-title">50%规则子企业</div> <div class="dialog-title">50%规则子企业</div>
</template> </template>
<div class="dialog-ett-wrpper"> <div class="dialog-ett-wrpper">
<div <div class="box1-bottom-content-item" v-for="(ett, index) in currentOrgList" :key="index"
class="box1-bottom-content-item" @click="handleEntityClick(ett)">
v-for="(ett, index) in currentOrgList"
:key="index"
@click="handleEntityClick(ett)"
>
<el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img" alt=""></el-image> <el-image v-if="ett.img" class="box1-bottom-content-item-img" :src="ett.img" alt=""></el-image>
<div v-else class="box1-bottom-content-item-imgUndefined"> <div v-else class="box1-bottom-content-item-imgUndefined">
{{ (ett.orgName || ett.enName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }} {{ (ett.orgName || ett.enName)?.match(/[\u4e00-\u9fa5a-zA-Z0-9]/)?.[0] }}
...@@ -1257,15 +1155,15 @@ const fetchSanctionList = async () => { ...@@ -1257,15 +1155,15 @@ const fetchSanctionList = async () => {
let year = ""; let year = "";
let dateStr = fullTime; let dateStr = fullTime;
if (typeof fullTime === "string") { if (typeof fullTime === "string") {
if (fullTime.includes("年")) { if (fullTime.includes("年")) {
const parts = fullTime.split("年"); const parts = fullTime.split("年");
year = parts[0]; year = parts[0];
dateStr = parts[1].replace(/\s+/g, ""); dateStr = parts[1].replace(/\s+/g, "");
} else if (fullTime.includes("-")) { } else if (fullTime.includes("-")) {
const parts = fullTime.split("-"); const parts = fullTime.split("-");
year = parts[0]; year = parts[0];
dateStr = parts.slice(1).join("-"); dateStr = parts.slice(1).join("-");
} }
} }
return { return {
...@@ -1281,7 +1179,7 @@ const fetchSanctionList = async () => { ...@@ -1281,7 +1179,7 @@ const fetchSanctionList = async () => {
}); });
totalAll.value = res.totalElements; totalAll.value = res.totalElements;
} }
} catch (error) {} } catch (error) { }
}; };
const handlePageChangeAll = val => { const handlePageChangeAll = val => {
...@@ -1447,7 +1345,7 @@ const fetchRiskSignals = async () => { ...@@ -1447,7 +1345,7 @@ const fetchRiskSignals = async () => {
time: item.signalTime, time: item.signalTime,
status: item.signalLevel, status: item.signalLevel,
id: item.signalId, id: item.signalId,
sanId:item.sanId sanId: item.sanId
})); }));
} }
} catch (err) { } catch (err) {
...@@ -1552,7 +1450,7 @@ const handleGetHylyList = async () => { ...@@ -1552,7 +1450,7 @@ const handleGetHylyList = async () => {
hylymc: "全部分类" hylymc: "全部分类"
}; };
categoryList.value = [obj, ...categoryList.value]; categoryList.value = [obj, ...categoryList.value];
} catch (error) {} } catch (error) { }
}; };
const chart1Data = ref({ const chart1Data = ref({
...@@ -1665,7 +1563,7 @@ const handleSearch = () => { ...@@ -1665,7 +1563,7 @@ const handleSearch = () => {
} }
}); });
window.open(curRoute.href, "_blank"); window.open(curRoute.href, "_blank");
} }
...@@ -1703,6 +1601,7 @@ const handleMediaClick = item => { ...@@ -1703,6 +1601,7 @@ const handleMediaClick = item => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
} }
...@@ -1719,11 +1618,14 @@ const handleMediaClick = item => { ...@@ -1719,11 +1618,14 @@ const handleMediaClick = item => {
box-sizing: border-box; box-sizing: border-box;
padding-left: 160px; padding-left: 160px;
display: flex; display: flex;
.header-item { .header-item {
margin: 0 3px; margin: 0 3px;
} }
.back-item { .back-item {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #ccc; color: #ccc;
} }
...@@ -1735,6 +1637,7 @@ const handleMediaClick = item => { ...@@ -1735,6 +1637,7 @@ const handleMediaClick = item => {
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
position: relative; position: relative;
.box1-left-arrow { .box1-left-arrow {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
...@@ -1747,15 +1650,18 @@ const handleMediaClick = item => { ...@@ -1747,15 +1650,18 @@ const handleMediaClick = item => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 11px; width: 11px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.box1-right-arrow { .box1-right-arrow {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
...@@ -1768,15 +1674,18 @@ const handleMediaClick = item => { ...@@ -1768,15 +1674,18 @@ const handleMediaClick = item => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 11px; width: 11px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.box1-absolute { .box1-absolute {
position: absolute; position: absolute;
width: 240px; width: 240px;
...@@ -1790,6 +1699,7 @@ const handleMediaClick = item => { ...@@ -1790,6 +1699,7 @@ const handleMediaClick = item => {
padding-right: 50px; padding-right: 50px;
box-sizing: border-box; box-sizing: border-box;
background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3)); background: linear-gradient(to right, rgba(206, 79, 81, 0), rgba(206, 79, 81, 0.3));
&-des { &-des {
display: flex; display: flex;
gap: 5px; gap: 5px;
...@@ -1798,18 +1708,21 @@ const handleMediaClick = item => { ...@@ -1798,18 +1708,21 @@ const handleMediaClick = item => {
font-weight: 700; font-weight: 700;
color: rgba(206, 79, 81, 1); color: rgba(206, 79, 81, 1);
} }
&-num { &-num {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: rgba(206, 79, 81, 1); color: rgba(206, 79, 81, 1);
} }
} }
.box1-top { .box1-top {
// display: flex; // display: flex;
// flex-direction: column; // flex-direction: column;
// gap: 10px; // gap: 10px;
padding-left: 30px; padding-left: 30px;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-bottom: 1px solid rgba(234, 236, 238, 1);
&-title { &-title {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -1817,14 +1730,17 @@ const handleMediaClick = item => { ...@@ -1817,14 +1730,17 @@ const handleMediaClick = item => {
margin-top: 10px; margin-top: 10px;
margin-bottom: 15px; margin-bottom: 15px;
} }
&-content { &-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
margin-bottom: 20px; margin-bottom: 20px;
&-item { &-item {
display: flex; display: flex;
gap: 5px; gap: 5px;
&-title { &-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -1833,6 +1749,7 @@ const handleMediaClick = item => { ...@@ -1833,6 +1749,7 @@ const handleMediaClick = item => {
} }
} }
} }
.box1-bottom { .box1-bottom {
padding-left: 30px; padding-left: 30px;
...@@ -1842,6 +1759,7 @@ const handleMediaClick = item => { ...@@ -1842,6 +1759,7 @@ const handleMediaClick = item => {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
margin-bottom: 15px; margin-bottom: 15px;
} }
&-content { &-content {
display: flex; display: flex;
gap: 15px; gap: 15px;
...@@ -1850,20 +1768,24 @@ const handleMediaClick = item => { ...@@ -1850,20 +1768,24 @@ const handleMediaClick = item => {
padding-left: 10px; padding-left: 10px;
height: 156px; height: 156px;
overflow: auto; overflow: auto;
&-item { &-item {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 48%; /* 留出2%的间距 */ width: 48%;
/* 留出2%的间距 */
// margin-bottom: 6px; // margin-bottom: 6px;
box-sizing: border-box; box-sizing: border-box;
gap: 10px; gap: 10px;
cursor: pointer; cursor: pointer;
&-img { &-img {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
} }
&-imgUndefined { &-imgUndefined {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -1876,6 +1798,7 @@ const handleMediaClick = item => { ...@@ -1876,6 +1798,7 @@ const handleMediaClick = item => {
text-align: center; text-align: center;
border-radius: 12px; border-radius: 12px;
} }
&-txt { &-txt {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1884,30 +1807,36 @@ const handleMediaClick = item => { ...@@ -1884,30 +1807,36 @@ const handleMediaClick = item => {
} }
} }
} }
.box1-right { .box1-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
.box1-right-title { .box1-right-title {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
color: $base-color; color: $base-color;
} }
.box1-right-tags { .box1-right-tags {
display: flex; display: flex;
gap: 10px; gap: 10px;
} }
.box1-right-content { .box1-right-content {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;
} }
.box1-right-footer { .box1-right-footer {
margin-top: auto; margin-top: auto;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.box1-right-footer-time { .box1-right-footer-time {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-size: 14px; font-size: 14px;
...@@ -1920,6 +1849,7 @@ const handleMediaClick = item => { ...@@ -1920,6 +1849,7 @@ const handleMediaClick = item => {
.box2-main { .box2-main {
height: 320px; height: 320px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -1928,17 +1858,21 @@ const handleMediaClick = item => { ...@@ -1928,17 +1858,21 @@ const handleMediaClick = item => {
box-sizing: border-box; box-sizing: border-box;
padding-right: 3px; padding-right: 3px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important; color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important; background: rgba(246, 255, 237, 1) !important;
} }
.itemLeftStatus2 { .itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important; color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important; background: rgba(255, 247, 230, 1) !important;
} }
.item-left { .item-left {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -1956,6 +1890,7 @@ const handleMediaClick = item => { ...@@ -1956,6 +1890,7 @@ const handleMediaClick = item => {
text-align: center; text-align: center;
flex-shrink: 0; flex-shrink: 0;
} }
.item-right { .item-right {
margin-left: 13px; margin-left: 13px;
width: 100%; width: 100%;
...@@ -1965,6 +1900,7 @@ const handleMediaClick = item => { ...@@ -1965,6 +1900,7 @@ const handleMediaClick = item => {
gap: 8px; gap: 8px;
height: 47px; height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
.text { .text {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
line-height: 47px; line-height: 47px;
...@@ -1976,6 +1912,7 @@ const handleMediaClick = item => { ...@@ -1976,6 +1912,7 @@ const handleMediaClick = item => {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.time { .time {
margin-left: 10px; margin-left: 10px;
line-height: 47px; line-height: 47px;
...@@ -1987,6 +1924,7 @@ const handleMediaClick = item => { ...@@ -1987,6 +1924,7 @@ const handleMediaClick = item => {
} }
} }
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -2002,14 +1940,17 @@ const handleMediaClick = item => { ...@@ -2002,14 +1940,17 @@ const handleMediaClick = item => {
background: var(--color-main-active); background: var(--color-main-active);
margin: 0 auto; margin: 0 auto;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 8px; margin-left: 8px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
...@@ -2025,6 +1966,7 @@ const handleMediaClick = item => { ...@@ -2025,6 +1966,7 @@ const handleMediaClick = item => {
justify-content: center; justify-content: center;
// align-items: flex-start; // align-items: flex-start;
gap: 100px; gap: 100px;
.box3-content-title { .box3-content-title {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
...@@ -2038,7 +1980,9 @@ const handleMediaClick = item => { ...@@ -2038,7 +1980,9 @@ const handleMediaClick = item => {
color: $base-color; color: $base-color;
margin-bottom: 15px; margin-bottom: 15px;
} }
.box3-content { .box3-content {
// flex: 1; // flex: 1;
.el-progress--line { .el-progress--line {
width: 82px; width: 82px;
...@@ -2055,20 +1999,24 @@ const handleMediaClick = item => { ...@@ -2055,20 +1999,24 @@ const handleMediaClick = item => {
padding-top: 16px; padding-top: 16px;
// padding-bottom: 50px; // padding-bottom: 50px;
position: relative; position: relative;
.box4-item { .box4-item {
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: flex-start; align-items: flex-start;
padding-bottom: 35px; padding-bottom: 35px;
position: relative; position: relative;
.box4-item-left { .box4-item-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.box4-item-left-icon { .box4-item-left-icon {
width: 10px; width: 10px;
height: 10px; height: 10px;
} }
.box4-item-left-line { .box4-item-left-line {
width: 1px; width: 1px;
height: 100%; height: 100%;
...@@ -2076,9 +2024,11 @@ const handleMediaClick = item => { ...@@ -2076,9 +2024,11 @@ const handleMediaClick = item => {
border-left: 1px solid rgba(10, 87, 166, 0.3); border-left: 1px solid rgba(10, 87, 166, 0.3);
} }
} }
.box4-item-right { .box4-item-right {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.box4-item-right-header { .box4-item-right-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -2088,17 +2038,20 @@ const handleMediaClick = item => { ...@@ -2088,17 +2038,20 @@ const handleMediaClick = item => {
top: -7.5px; top: -7.5px;
padding-bottom: 8px; padding-bottom: 8px;
cursor: pointer; cursor: pointer;
&-title { &-title {
font-size: 18px; font-size: 18px;
color: $base-color; color: $base-color;
font-weight: 700; font-weight: 700;
} }
&-desc { &-desc {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
} }
} }
.box4-item-right-content { .box4-item-right-content {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -2112,6 +2065,7 @@ const handleMediaClick = item => { ...@@ -2112,6 +2065,7 @@ const handleMediaClick = item => {
} }
} }
} }
.box4-footer { .box4-footer {
position: absolute; position: absolute;
// margin-top: auto; // margin-top: auto;
...@@ -2132,15 +2086,18 @@ const handleMediaClick = item => { ...@@ -2132,15 +2086,18 @@ const handleMediaClick = item => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
:deep(.table-header) { :deep(.table-header) {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
} }
:deep(.table-row) { :deep(.table-row) {
height: 64px; height: 64px;
} }
.domain-tags { .domain-tags {
display: flex; display: flex;
gap: 8px; gap: 8px;
...@@ -2161,17 +2118,20 @@ const handleMediaClick = item => { ...@@ -2161,17 +2118,20 @@ const handleMediaClick = item => {
height: calc(100vh - 96px); height: calc(100vh - 96px);
position: relative; position: relative;
overflow-y: hidden; overflow-y: hidden;
.home-main { .home-main {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
background: url("./assets/images/background.png"); background: url("./assets/images/background.png");
background-size: 100% 100%; background-size: 100% 100%;
.home-main-header { .home-main-header {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
.home-main-header-center { .home-main-header-center {
margin-top: 51px; margin-top: 51px;
width: 960px; width: 960px;
...@@ -2183,9 +2143,11 @@ const handleMediaClick = item => { ...@@ -2183,9 +2143,11 @@ const handleMediaClick = item => {
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent; border: 1px solid transparent;
&:hover { &:hover {
border: 1px solid var(--color-main-active); border: 1px solid var(--color-main-active);
} }
.search { .search {
position: absolute; position: absolute;
right: -1px; right: -1px;
...@@ -2198,14 +2160,17 @@ const handleMediaClick = item => { ...@@ -2198,14 +2160,17 @@ const handleMediaClick = item => {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.search-text { .search-text {
margin-left: 8px; margin-left: 8px;
height: 22px; height: 22px;
...@@ -2217,6 +2182,7 @@ const handleMediaClick = item => { ...@@ -2217,6 +2182,7 @@ const handleMediaClick = item => {
} }
} }
} }
.home-main-header-footer { .home-main-header-footer {
margin-top: 64px; margin-top: 64px;
width: 700px; width: 700px;
...@@ -2225,9 +2191,11 @@ const handleMediaClick = item => { ...@@ -2225,9 +2191,11 @@ const handleMediaClick = item => {
padding: 0 108px; padding: 0 108px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.home-main-header-footer-item { .home-main-header-footer-item {
padding: 0 10px; padding: 0 10px;
text-align: center; text-align: center;
.item-top { .item-top {
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
...@@ -2236,6 +2204,7 @@ const handleMediaClick = item => { ...@@ -2236,6 +2204,7 @@ const handleMediaClick = item => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.item-footer { .item-footer {
margin-top: 10px; margin-top: 10px;
height: 30px; height: 30px;
...@@ -2247,6 +2216,7 @@ const handleMediaClick = item => { ...@@ -2247,6 +2216,7 @@ const handleMediaClick = item => {
} }
} }
} }
.home-main-header-footer-link, .home-main-header-footer-link,
.home-main-header-footer-info { .home-main-header-footer-info {
width: 100%; width: 100%;
...@@ -2255,15 +2225,18 @@ const handleMediaClick = item => { ...@@ -2255,15 +2225,18 @@ const handleMediaClick = item => {
gap: 16px; gap: 16px;
padding: 30px 0; padding: 30px 0;
} }
.home-main-header-footer-info{
.home-main-header-footer-info {
margin-top: 34px; margin-top: 34px;
} }
.home-main-header-btn-box { .home-main-header-btn-box {
width: 688px; width: 688px;
margin: 0 auto; margin: 0 auto;
margin-top: 39px; margin-top: 39px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -2276,9 +2249,11 @@ const handleMediaClick = item => { ...@@ -2276,9 +2249,11 @@ const handleMediaClick = item => {
background: #e7f3ff; background: #e7f3ff;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
&:hover { &:hover {
background: #cae3fc; background: #cae3fc;
} }
.btn-text { .btn-text {
width: 80px; width: 80px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -2289,12 +2264,14 @@ const handleMediaClick = item => { ...@@ -2289,12 +2264,14 @@ const handleMediaClick = item => {
margin-left: 36px; margin-left: 36px;
text-align: center; text-align: center;
} }
.btn-icon { .btn-icon {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 19px; right: 19px;
width: 6px; width: 6px;
height: 12px; height: 12px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -2303,12 +2280,15 @@ const handleMediaClick = item => { ...@@ -2303,12 +2280,15 @@ const handleMediaClick = item => {
} }
} }
} }
.home-main-center { .home-main-center {
margin-top: 34px; margin-top: 34px;
.center-top { .center-top {
height: 450px; height: 450px;
display: flex; display: flex;
gap: 20px; gap: 20px;
.box1 { .box1 {
display: flex; display: flex;
gap: 10px; gap: 10px;
...@@ -2319,17 +2299,21 @@ const handleMediaClick = item => { ...@@ -2319,17 +2299,21 @@ const handleMediaClick = item => {
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-top: 19px; margin-top: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.title { .title {
height: 22px; height: 22px;
margin-left: 18px; margin-left: 18px;
...@@ -2341,6 +2325,7 @@ const handleMediaClick = item => { ...@@ -2341,6 +2325,7 @@ const handleMediaClick = item => {
line-height: 22px; line-height: 22px;
} }
} }
.box1-header-right { .box1-header-right {
margin-top: 19px; margin-top: 19px;
height: 16px; height: 16px;
...@@ -2352,14 +2337,17 @@ const handleMediaClick = item => { ...@@ -2352,14 +2337,17 @@ const handleMediaClick = item => {
cursor: pointer; cursor: pointer;
} }
} }
.box1-main { .box1-main {
display: flex; display: flex;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 22px;
.box1-main-top { .box1-main-top {
height: 68px; height: 68px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.box1-main-top-left { .box1-main-top-left {
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2369,9 +2357,11 @@ const handleMediaClick = item => { ...@@ -2369,9 +2357,11 @@ const handleMediaClick = item => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.box1-main-top-right { .box1-main-top-right {
margin-left: 20px; margin-left: 20px;
display: flex; display: flex;
.num { .num {
padding: 1px 8px; padding: 1px 8px;
height: 24px; height: 24px;
...@@ -2380,6 +2370,7 @@ const handleMediaClick = item => { ...@@ -2380,6 +2370,7 @@ const handleMediaClick = item => {
border-radius: 4px; border-radius: 4px;
background: rgba(230, 244, 255, 1); background: rgba(230, 244, 255, 1);
} }
.tag { .tag {
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1); border: 1px solid rgba(135, 232, 222, 1);
...@@ -2390,6 +2381,7 @@ const handleMediaClick = item => { ...@@ -2390,6 +2381,7 @@ const handleMediaClick = item => {
} }
} }
} }
.box2 { .box2 {
flex: 1; flex: 1;
padding-right: 20px; padding-right: 20px;
...@@ -2397,19 +2389,23 @@ const handleMediaClick = item => { ...@@ -2397,19 +2389,23 @@ const handleMediaClick = item => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
height: 54px; height: 54px;
display: flex; display: flex;
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 33px; margin-left: 33px;
margin-top: 18px; margin-top: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 22px; margin-left: 22px;
margin-top: 16px; margin-top: 16px;
...@@ -2420,6 +2416,7 @@ const handleMediaClick = item => { ...@@ -2420,6 +2416,7 @@ const handleMediaClick = item => {
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
.num { .num {
width: 24px; width: 24px;
height: 16px; height: 16px;
...@@ -2433,6 +2430,7 @@ const handleMediaClick = item => { ...@@ -2433,6 +2430,7 @@ const handleMediaClick = item => {
border-radius: 100px; border-radius: 100px;
background: rgba(255, 77, 79, 1); background: rgba(255, 77, 79, 1);
} }
.more { .more {
margin-top: 19px; margin-top: 19px;
margin-left: 256px; margin-left: 256px;
...@@ -2443,22 +2441,27 @@ const handleMediaClick = item => { ...@@ -2443,22 +2441,27 @@ const handleMediaClick = item => {
line-height: 16px; line-height: 16px;
} }
} }
.box2-main { .box2-main {
height: 282px; height: 282px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
margin-left: 23px; margin-left: 23px;
height: 47px; height: 47px;
width: 464px; width: 464px;
display: flex; display: flex;
.itemLeftStatus1 { .itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important; color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important; background: rgba(246, 255, 237, 1) !important;
} }
.itemLeftStatus2 { .itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important; color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important; background: rgba(255, 247, 230, 1) !important;
} }
.item-left { .item-left {
margin-top: 4px; margin-top: 4px;
margin-left: 2px; margin-left: 2px;
...@@ -2475,6 +2478,7 @@ const handleMediaClick = item => { ...@@ -2475,6 +2478,7 @@ const handleMediaClick = item => {
padding: 6px 4px; padding: 6px 4px;
text-align: center; text-align: center;
} }
.item-right { .item-right {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
...@@ -2482,6 +2486,7 @@ const handleMediaClick = item => { ...@@ -2482,6 +2486,7 @@ const handleMediaClick = item => {
border-top: 1px solid rgba(240, 242, 244, 1); border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
width: 348px; width: 348px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -2490,6 +2495,7 @@ const handleMediaClick = item => { ...@@ -2490,6 +2495,7 @@ const handleMediaClick = item => {
font-weight: 400; font-weight: 400;
line-height: 47px; line-height: 47px;
} }
.time { .time {
margin-left: 10px; margin-left: 10px;
line-height: 47px; line-height: 47px;
...@@ -2501,6 +2507,7 @@ const handleMediaClick = item => { ...@@ -2501,6 +2507,7 @@ const handleMediaClick = item => {
} }
} }
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 26px; left: 26px;
...@@ -2514,14 +2521,17 @@ const handleMediaClick = item => { ...@@ -2514,14 +2521,17 @@ const handleMediaClick = item => {
border-radius: 6px; border-radius: 6px;
background: rgba(22, 119, 255, 1); background: rgba(22, 119, 255, 1);
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .text {
margin-left: 8px; margin-left: 8px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
...@@ -2533,15 +2543,18 @@ const handleMediaClick = item => { ...@@ -2533,15 +2543,18 @@ const handleMediaClick = item => {
} }
} }
} }
.center-footer { .center-footer {
margin-top: 21px; margin-top: 21px;
height: 450px; height: 450px;
display: flex; display: flex;
.box3 { .box3 {
width: 900px; width: 900px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box3-header { .box3-header {
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
...@@ -2549,17 +2562,21 @@ const handleMediaClick = item => { ...@@ -2549,17 +2562,21 @@ const handleMediaClick = item => {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 20px; padding: 0 20px;
.box3-header-left { .box3-header-left {
display: flex; display: flex;
.box3-header-icon { .box3-header-icon {
margin-top: 15px; margin-top: 15px;
width: 13px; width: 13px;
height: 13px; height: 13px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box3-header-title { .box3-header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 22px; margin-left: 22px;
...@@ -2571,17 +2588,20 @@ const handleMediaClick = item => { ...@@ -2571,17 +2588,20 @@ const handleMediaClick = item => {
line-height: 22px; line-height: 22px;
} }
} }
.box3-header-right { .box3-header-right {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 178px; width: 178px;
height: 22px; height: 22px;
.right-box { .right-box {
display: flex; display: flex;
margin-top: 16px; margin-top: 16px;
width: 89px; width: 89px;
height: 22px; height: 22px;
justify-content: flex-end; justify-content: flex-end;
.icon1 { .icon1 {
margin-top: 5px; margin-top: 5px;
width: 12px; width: 12px;
...@@ -2589,6 +2609,7 @@ const handleMediaClick = item => { ...@@ -2589,6 +2609,7 @@ const handleMediaClick = item => {
border-radius: 6px; border-radius: 6px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
.icon2 { .icon2 {
margin-top: 5px; margin-top: 5px;
width: 12px; width: 12px;
...@@ -2596,6 +2617,7 @@ const handleMediaClick = item => { ...@@ -2596,6 +2617,7 @@ const handleMediaClick = item => {
border-radius: 6px; border-radius: 6px;
background: rgba(250, 140, 22, 1); background: rgba(250, 140, 22, 1);
} }
.text { .text {
margin-left: 5px; margin-left: 5px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -2607,31 +2629,37 @@ const handleMediaClick = item => { ...@@ -2607,31 +2629,37 @@ const handleMediaClick = item => {
} }
} }
} }
.box3-main { .box3-main {
height: 397px; height: 397px;
} }
} }
.box4 { .box4 {
margin-left: 20px; margin-left: 20px;
width: 521px; width: 521px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box4-header { .box4-header {
width: 452px; width: 452px;
margin: 0 auto; margin: 0 auto;
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.header-icon { .header-icon {
margin-top: 18px; margin-top: 18px;
width: 18px; width: 18px;
height: 18px; height: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 26px; margin-left: 26px;
...@@ -2643,22 +2671,27 @@ const handleMediaClick = item => { ...@@ -2643,22 +2671,27 @@ const handleMediaClick = item => {
line-height: 22px; line-height: 22px;
} }
} }
.box4-main { .box4-main {
width: 452px; width: 452px;
margin: 0 auto; margin: 0 auto;
margin-top: 8px; margin-top: 8px;
height: 360px; height: 360px;
overflow-y: auto; overflow-y: auto;
.box4-main-item { .box4-main-item {
margin-top: 6px; margin-top: 6px;
height: 30px; height: 30px;
display: flex; display: flex;
.leftStatus3 { .leftStatus3 {
color: rgba(255, 197, 61, 1) !important; color: rgba(255, 197, 61, 1) !important;
} }
.leftStatus2 { .leftStatus2 {
color: rgba(255, 169, 64, 1) !important; color: rgba(255, 169, 64, 1) !important;
} }
.left { .left {
width: 44px; width: 44px;
text-align: left; text-align: left;
...@@ -2668,6 +2701,7 @@ const handleMediaClick = item => { ...@@ -2668,6 +2701,7 @@ const handleMediaClick = item => {
line-height: 30px; line-height: 30px;
color: rgba(206, 79, 81, 1); color: rgba(206, 79, 81, 1);
} }
.center { .center {
width: 300px; width: 300px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -2676,6 +2710,7 @@ const handleMediaClick = item => { ...@@ -2676,6 +2710,7 @@ const handleMediaClick = item => {
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
} }
.right { .right {
width: 108px; width: 108px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
...@@ -2690,10 +2725,12 @@ const handleMediaClick = item => { ...@@ -2690,10 +2725,12 @@ const handleMediaClick = item => {
} }
} }
} }
.home-main-footer { .home-main-footer {
// width: 100%; // width: 100%;
height: 911px; height: 911px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
.home-main-footer-header { .home-main-footer-header {
margin-top: 37px; margin-top: 37px;
margin-bottom: 36px; margin-bottom: 36px;
...@@ -2702,10 +2739,12 @@ const handleMediaClick = item => { ...@@ -2702,10 +2739,12 @@ const handleMediaClick = item => {
// background: orange; // background: orange;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
width: 1300px; width: 1300px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2716,32 +2755,38 @@ const handleMediaClick = item => { ...@@ -2716,32 +2755,38 @@ const handleMediaClick = item => {
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: rgba(20, 89, 187, 0.1); background: rgba(20, 89, 187, 0.1);
} }
} }
.btnActive { .btnActive {
padding: 0 24px; padding: 0 24px;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
color: #fff; color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
} }
} }
} }
.select-box { .select-box {
height: 42px; height: 42px;
box-sizing: border-box; box-sizing: border-box;
padding: 5px 0; padding: 5px 0;
} }
} }
.home-main-footer-main { .home-main-footer-main {
width: 100%; width: 100%;
// background: orange; // background: orange;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
// justify-content: space-between; // justify-content: space-between;
// justify-content: center; // justify-content: center;
.main-item { .main-item {
...@@ -2751,6 +2796,7 @@ const handleMediaClick = item => { ...@@ -2751,6 +2796,7 @@ const handleMediaClick = item => {
background: #fff; background: #fff;
margin-bottom: 24px; margin-bottom: 24px;
margin-right: 25px; margin-right: 25px;
.main-item-box1 { .main-item-box1 {
margin-top: 20px; margin-top: 20px;
margin-left: 45px; margin-left: 45px;
...@@ -2764,6 +2810,7 @@ const handleMediaClick = item => { ...@@ -2764,6 +2810,7 @@ const handleMediaClick = item => {
height: 100%; height: 100%;
} }
} }
.main-item-box2 { .main-item-box2 {
margin-top: 26px; margin-top: 26px;
text-align: center; text-align: center;
...@@ -2774,6 +2821,7 @@ const handleMediaClick = item => { ...@@ -2774,6 +2821,7 @@ const handleMediaClick = item => {
font-weight: 700; font-weight: 700;
line-height: 30px; line-height: 30px;
} }
.main-item-box3 { .main-item-box3 {
text-align: center; text-align: center;
height: 30px; height: 30px;
...@@ -2788,6 +2836,7 @@ const handleMediaClick = item => { ...@@ -2788,6 +2836,7 @@ const handleMediaClick = item => {
} }
} }
} }
.tableName { .tableName {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2818,6 +2867,7 @@ const handleMediaClick = item => { ...@@ -2818,6 +2867,7 @@ const handleMediaClick = item => {
.num-item { .num-item {
width: 280px; width: 280px;
display: flex; display: flex;
.name-item { .name-item {
width: 215px; width: 215px;
overflow: hidden; overflow: hidden;
...@@ -2825,6 +2875,7 @@ const handleMediaClick = item => { ...@@ -2825,6 +2875,7 @@ const handleMediaClick = item => {
white-space: nowrap; white-space: nowrap;
} }
} }
.dialog-title { .dialog-title {
text-align: center; text-align: center;
font-size: 24px; font-size: 24px;
...@@ -2833,11 +2884,13 @@ const handleMediaClick = item => { ...@@ -2833,11 +2884,13 @@ const handleMediaClick = item => {
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.dialog-ett-wrpper { .dialog-ett-wrpper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: 10px;
height: 500px; height: 500px;
.box1-bottom-content { .box1-bottom-content {
display: flex; display: flex;
gap: 15px; gap: 15px;
...@@ -2846,20 +2899,24 @@ const handleMediaClick = item => { ...@@ -2846,20 +2899,24 @@ const handleMediaClick = item => {
padding-left: 10px; padding-left: 10px;
height: 156px; height: 156px;
overflow: auto; overflow: auto;
&-item { &-item {
display: flex; display: flex;
// align-items: center; // align-items: center;
justify-content: flex-start; justify-content: flex-start;
width: 48%; /* 留出2%的间距 */ width: 48%;
/* 留出2%的间距 */
// margin-bottom: 6px; // margin-bottom: 6px;
box-sizing: border-box; box-sizing: border-box;
gap: 10px; gap: 10px;
cursor: pointer; cursor: pointer;
&-img { &-img {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; flex-shrink: 0;
} }
&-imgUndefined { &-imgUndefined {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -2872,6 +2929,7 @@ const handleMediaClick = item => { ...@@ -2872,6 +2929,7 @@ const handleMediaClick = item => {
text-align: center; text-align: center;
border-radius: 12px; border-radius: 12px;
} }
&-txt { &-txt {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -2885,6 +2943,7 @@ const handleMediaClick = item => { ...@@ -2885,6 +2943,7 @@ const handleMediaClick = item => {
box-shadow: none; box-shadow: none;
border-radius: 10px; border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
} }
...@@ -2902,6 +2961,7 @@ const handleMediaClick = item => { ...@@ -2902,6 +2961,7 @@ const handleMediaClick = item => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
:deep(.el-table tr) { :deep(.el-table tr) {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -2952,6 +3012,7 @@ const handleMediaClick = item => { ...@@ -2952,6 +3012,7 @@ const handleMediaClick = item => {
} }
} }
} }
.all-content { .all-content {
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -2960,6 +3021,7 @@ const handleMediaClick = item => { ...@@ -2960,6 +3021,7 @@ const handleMediaClick = item => {
justify-content: space-between; justify-content: space-between;
// align-items: center; // align-items: center;
gap: 16px; gap: 16px;
.left { .left {
width: 360px; width: 360px;
height: auto; height: auto;
...@@ -2967,12 +3029,14 @@ const handleMediaClick = item => { ...@@ -2967,12 +3029,14 @@ const handleMediaClick = item => {
background: #fff; background: #fff;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.title { .title {
width: 100%; width: 100%;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 12px 16px 0; padding: 14px 12px 16px 0;
.box { .box {
width: 8px; width: 8px;
height: 20px; height: 20px;
...@@ -2981,6 +3045,7 @@ const handleMediaClick = item => { ...@@ -2981,6 +3045,7 @@ const handleMediaClick = item => {
border-top-right-radius: 4px; border-top-right-radius: 4px;
margin-right: 14px; margin-right: 14px;
} }
.text { .text {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -2989,20 +3054,24 @@ const handleMediaClick = item => { ...@@ -2989,20 +3054,24 @@ const handleMediaClick = item => {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
} }
.left-main { .left-main {
width: 100%; width: 100%;
height: auto; height: auto;
padding-left: 24px; padding-left: 24px;
.checkbox-grid { .checkbox-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
row-gap: 16px; row-gap: 16px;
padding-bottom: 16px; padding-bottom: 16px;
} }
:deep(.el-checkbox) { :deep(.el-checkbox) {
margin-right: 0; margin-right: 0;
height: auto; height: auto;
} }
:deep(.el-checkbox__label) { :deep(.el-checkbox__label) {
font-size: 16px; font-size: 16px;
color: #666666; color: #666666;
...@@ -3010,6 +3079,7 @@ const handleMediaClick = item => { ...@@ -3010,6 +3079,7 @@ const handleMediaClick = item => {
} }
} }
} }
.right { .right {
width: 1224px; width: 1224px;
height: auto; height: auto;
...@@ -3017,17 +3087,20 @@ const handleMediaClick = item => { ...@@ -3017,17 +3087,20 @@ const handleMediaClick = item => {
border-radius: 4px; border-radius: 4px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
.right-title { .right-title {
width: 100%; width: 100%;
height: 48px; height: 48px;
border-bottom: 1px solid rgb(234, 236, 238); border-bottom: 1px solid rgb(234, 236, 238);
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
width: 22px; width: 22px;
height: 18px; height: 18px;
margin-left: 19px; margin-left: 19px;
} }
div { div {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -3037,14 +3110,17 @@ const handleMediaClick = item => { ...@@ -3037,14 +3110,17 @@ const handleMediaClick = item => {
margin-left: 19px; margin-left: 19px;
} }
} }
.right-main { .right-main {
width: 100%; width: 100%;
height: auto; height: auto;
padding: 24px 35px 0 20px; padding: 24px 35px 0 20px;
.sanction-list { .sanction-list {
width: 1169px; width: 1169px;
padding: 0px 0 12px 0; padding: 0px 0 12px 0;
display: flex; display: flex;
// justify-content: flex-start; // justify-content: flex-start;
.time { .time {
width: 80px; width: 80px;
...@@ -3071,6 +3147,7 @@ const handleMediaClick = item => { ...@@ -3071,6 +3147,7 @@ const handleMediaClick = item => {
line-height: 24px; line-height: 24px;
} }
} }
img { img {
width: 30px; width: 30px;
height: 30px; height: 30px;
...@@ -3078,10 +3155,12 @@ const handleMediaClick = item => { ...@@ -3078,10 +3155,12 @@ const handleMediaClick = item => {
margin-top: 14px; margin-top: 14px;
margin-right: 16px; margin-right: 16px;
} }
.main { .main {
width: 1027px; width: 1027px;
padding-top: 14px; padding-top: 14px;
position: relative; position: relative;
.main-title { .main-title {
width: 800px; width: 800px;
font-size: 20px; font-size: 20px;
...@@ -3092,6 +3171,7 @@ const handleMediaClick = item => { ...@@ -3092,6 +3171,7 @@ const handleMediaClick = item => {
margin-bottom: 11px; margin-bottom: 11px;
cursor: pointer; cursor: pointer;
} }
.main-desc { .main-desc {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -3100,8 +3180,10 @@ const handleMediaClick = item => { ...@@ -3100,8 +3180,10 @@ const handleMediaClick = item => {
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
margin-bottom: 9px; margin-bottom: 9px;
} }
.tag-box { .tag-box {
display: flex; display: flex;
.tag-item { .tag-item {
padding: 1px 8px; padding: 1px 8px;
margin-right: 8px; margin-right: 8px;
...@@ -3114,6 +3196,7 @@ const handleMediaClick = item => { ...@@ -3114,6 +3196,7 @@ const handleMediaClick = item => {
background-color: rgba(231, 243, 255, 1); background-color: rgba(231, 243, 255, 1);
} }
} }
.count-tag { .count-tag {
position: absolute; position: absolute;
padding: 2px 8px; padding: 2px 8px;
...@@ -3130,6 +3213,7 @@ const handleMediaClick = item => { ...@@ -3130,6 +3213,7 @@ const handleMediaClick = item => {
} }
} }
} }
.right-footer { .right-footer {
width: 100%; width: 100%;
height: 73px; height: 73px;
......
src/views/exportControl/v2.0EntityList/components/sanctionsOverview/components/listPage/index.vue
浏览文件 @ be0dcea2
...@@ -13,29 +13,27 @@ ...@@ -13,29 +13,27 @@
<div class="text">科技领域</div> <div class="text">科技领域</div>
</div> </div>
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, techFields, 'tech')" /> <el-checkbox v-for="(item, index) in techFields" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, techFields, 'tech')" />
</div> </div>
<div class="title"> <div class="title">
<div class="box"></div> <div class="box"></div>
<div class="text">实体类型</div> <div class="text">实体类型</div>
</div> </div>
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, entityTypes, 'type')" /> <el-checkbox v-for="(item, index) in entityTypes" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, entityTypes, 'type')" />
</div> </div>
<div class="title"> <div class="title">
<div class="box"></div> <div class="box"></div>
<div class="text">制裁时间</div> <div class="text">制裁时间</div>
</div> </div>
<div class="checkbox-group"> <div class="checkbox-group">
<el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label" @change="handleFilterChange(item, sanctionTimes, 'time')" /> <el-checkbox v-for="(item, index) in sanctionTimes" :key="index" v-model="item.checked" :label="item.label"
@change="handleFilterChange(item, sanctionTimes, 'time')" />
<div v-if="sanctionTimes.find(i => i.value === 'custom' && i.checked)" class="custom-date-picker"> <div v-if="sanctionTimes.find(i => i.value === 'custom' && i.checked)" class="custom-date-picker">
<el-date-picker <el-date-picker v-model="customDateRange" type="daterange" range-separator="-" start-placeholder="开始日期"
v-model="customDateRange" end-placeholder="结束日期" />
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -48,8 +46,8 @@ ...@@ -48,8 +46,8 @@
<div class="right-wrapper"> <div class="right-wrapper">
<div class="stats"> <div class="stats">
<div class="dot"></div> <div class="dot"></div>
<div class="count-text">共 <span class="highlight">{{ruleCount.totalCount}}</span> 家</div> <div class="count-text">共 <span class="highlight">{{ ruleCount.totalCount }}</span> 家</div>
<div class="rule-text">(50%规则涉及<span class="highlight">{{ruleCount.ruleCount}}</span>家)</div> <div class="rule-text">(50%规则涉及<span class="highlight">{{ ruleCount.ruleCount }}</span>家)</div>
</div> </div>
<div class="btn"> <div class="btn">
<img src="../../../../assets/下载按钮.png" alt="" /> <img src="../../../../assets/下载按钮.png" alt="" />
...@@ -58,21 +56,12 @@ ...@@ -58,21 +56,12 @@
</div> </div>
</div> </div>
<div class="right-table"> <div class="right-table">
<el-table <el-table :data="entityRows" table-layout="fixed" :row-class-name="tableRowClassName"
:data="entityRows" :header-cell-style="{ background: '#fff' }">
table-layout="fixed"
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#fff' }"
>
<el-table-column label="实体名称" min-width="200"> <el-table-column label="实体名称" min-width="200">
<template #default="{ row }"> <template #default="{ row }">
<div class="entity-name-cell" @click="handleCompClick(row)"> <div class="entity-name-cell" @click="handleCompClick(row)">
<el-image <el-image v-if="row.img" class="avatar" :src="row.img" alt=""></el-image>
v-if="row.img"
class="avatar"
:src="row.img"
alt=""
></el-image>
<div v-else class="avatar-undefined"> <div v-else class="avatar-undefined">
{{ {{
(row.entityNameZh || row.entityName)?.match( (row.entityNameZh || row.entityName)?.match(
...@@ -87,14 +76,8 @@ ...@@ -87,14 +76,8 @@
<el-table-column label="涉及领域" min-width="150"> <el-table-column label="涉及领域" min-width="150">
<template #default="{ row }"> <template #default="{ row }">
<div class="domain-cell"> <div class="domain-cell">
<el-tag <el-tag v-for="tag in row.techDomains" :key="tag" class="domain-tag" effect="plain"
v-for="tag in row.techDomains" :disable-transitions="true" :style="getTagStyle(tag)">
:key="tag"
class="domain-tag"
effect="plain"
:disable-transitions="true"
:style="getTagStyle(tag)"
>
{{ tag }} {{ tag }}
</el-tag> </el-tag>
</div> </div>
...@@ -107,7 +90,8 @@ ...@@ -107,7 +90,8 @@
<div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''"> <div class="rule-text" :title="row.ruleOrgList?.[0]?.orgName || ''">
{{ row.ruleOrgList?.[0]?.orgName || '' }}...等 {{ row.ruleOrgList?.[0]?.orgName || '' }}...等
</div> </div>
<el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{ row.ruleOrgCount }}家 ></el-link> <el-link class="rule-link" type="primary" :underline="false" @click="handleRuleClick(row)">{{
row.ruleOrgCount }}家 ></el-link>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
...@@ -115,25 +99,14 @@ ...@@ -115,25 +99,14 @@
</div> </div>
<div class="tight-footer"> <div class="tight-footer">
<div class="total-text">共{{ total }}项</div> <div class="total-text">共{{ total }}项</div>
<el-pagination <el-pagination :current-page="currentPage" v-model:page-size="pageSize" :total="total"
:current-page="currentPage" layout="prev, pager, next" prev-text="<" next-text=">" @current-change="handleCurrentChange" />
v-model:page-size="pageSize"
:total="total"
layout="prev, pager, next"
prev-text="<"
next-text=">"
@current-change="handleCurrentChange"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<RuleSubsidiaryDialog <RuleSubsidiaryDialog v-model="ruleDialogVisible" :company-name="currentRuleCompany" :total-count="currentRuleCount"
v-model="ruleDialogVisible" :data-list="currentRuleList" />
:company-name="currentRuleCompany"
:total-count="currentRuleCount"
:data-list="currentRuleList"
/>
</template> </template>
<script setup> <script setup>
...@@ -149,14 +122,14 @@ const router = useRouter(); ...@@ -149,14 +122,14 @@ const router = useRouter();
// 跳转公司详情页 // 跳转公司详情页
const handleCompClick = item => { const handleCompClick = item => {
console.log("item", item); console.log("item", item);
const route = router.resolve({ const route = router.resolve({
path: "/companyPages", path: "/companyPages",
query: { query: {
id: item.id id: item.id
} }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
const searchKeyword = ref(""); const searchKeyword = ref("");
...@@ -172,7 +145,7 @@ const entityRows = computed(() => mainList.value); ...@@ -172,7 +145,7 @@ const entityRows = computed(() => mainList.value);
const handleCurrentChange = (val) => { const handleCurrentChange = (val) => {
if (val === currentPage.value) return; if (val === currentPage.value) return;
currentPage.value = val; currentPage.value = val;
getExportControlListApi(); getExportControlListApi();
}; };
const getTagStyle = tag => { const getTagStyle = tag => {
...@@ -191,10 +164,10 @@ const getTagStyle = tag => { ...@@ -191,10 +164,10 @@ const getTagStyle = tag => {
for (let i = 0; i < tag.length; i++) { for (let i = 0; i < tag.length; i++) {
hash = tag.charCodeAt(i) + ((hash << 5) - hash); hash = tag.charCodeAt(i) + ((hash << 5) - hash);
} }
// 确保索引为正数并取模 // 确保索引为正数并取模
const index = Math.abs(hash) % colorPool.length; const index = Math.abs(hash) % colorPool.length;
return colorPool[index]; return colorPool[index];
}; };
...@@ -254,48 +227,48 @@ const handleRuleClick = (row) => { ...@@ -254,48 +227,48 @@ const handleRuleClick = (row) => {
// 筛选逻辑处理 // 筛选逻辑处理
const handleFilterChange = (item, list, type) => { const handleFilterChange = (item, list, type) => {
// 如果点击的是"全部" // 如果点击的是"全部"
if (item.value === 'all') { if (item.value === 'all') {
if (item.checked) { if (item.checked) {
// 选中全部，取消其他所有 // 选中全部，取消其他所有
list.forEach(i => { list.forEach(i => {
if (i.value !== 'all') i.checked = false; if (i.value !== 'all') i.checked = false;
}); });
} else { } else {
// 取消全部（通常不允许全部取消，至少得选一个，这里如果取消全部，就默认为全部选中） // 取消全部（通常不允许全部取消，至少得选一个，这里如果取消全部，就默认为全部选中）
item.checked = true; item.checked = true;
} }
} else { } else {
// 点击的是具体项 // 点击的是具体项
if (item.checked) { if (item.checked) {
// 选中具体项，取消"全部" // 选中具体项，取消"全部"
const allItem = list.find(i => i.value === 'all'); const allItem = list.find(i => i.value === 'all');
if (allItem) allItem.checked = false; if (allItem) allItem.checked = false;
// 特殊处理制裁时间的自定义和其他年份互斥 // 特殊处理制裁时间的自定义和其他年份互斥
if (type === 'time') { if (type === 'time') {
if (item.value === 'custom') { if (item.value === 'custom') {
list.forEach(i => { list.forEach(i => {
if (i.value !== 'custom' && i.value !== 'all') i.checked = false; if (i.value !== 'custom' && i.value !== 'all') i.checked = false;
}); });
} else { } else {
const customItem = list.find(i => i.value === 'custom'); const customItem = list.find(i => i.value === 'custom');
if (customItem) customItem.checked = false; if (customItem) customItem.checked = false;
} }
} }
} else { } else {
// 取消具体项，检查是否还有选中的 // 取消具体项，检查是否还有选中的
const anyChecked = list.some(i => i.checked); const anyChecked = list.some(i => i.checked);
if (!anyChecked) { if (!anyChecked) {
const allItem = list.find(i => i.value === 'all'); const allItem = list.find(i => i.value === 'all');
if (allItem) allItem.checked = true; if (allItem) allItem.checked = true;
} }
} }
} }
// 重置页码并查询 // 重置页码并查询
currentPage.value = 1; currentPage.value = 1;
getExportControlListApi(); getExportControlListApi();
}; };
// 获取实体清单列表 // 获取实体清单列表
...@@ -307,7 +280,7 @@ let abortController = null; ...@@ -307,7 +280,7 @@ let abortController = null;
const getExportControlListApi = async () => { const getExportControlListApi = async () => {
// 取消上一轮未完成的请求 // 取消上一轮未完成的请求
if (abortController) { if (abortController) {
try { abortController.abort(); } catch {} try { abortController.abort(); } catch { }
} }
abortController = new AbortController(); abortController = new AbortController();
isFetching.value = true; isFetching.value = true;
...@@ -334,12 +307,12 @@ const getExportControlListApi = async () => { ...@@ -334,12 +307,12 @@ const getExportControlListApi = async () => {
let startDate = undefined; let startDate = undefined;
let endDate = undefined; let endDate = undefined;
const allTime = sanctionTimes.value.find(item => item.value === 'all'); const allTime = sanctionTimes.value.find(item => item.value === 'all');
if (!allTime || !allTime.checked) { if (!allTime || !allTime.checked) {
years = sanctionTimes.value years = sanctionTimes.value
.filter(item => item.checked && item.value !== 'all' && item.value !== 'custom') .filter(item => item.checked && item.value !== 'all' && item.value !== 'custom')
.map(item => Number(item.value)); .map(item => Number(item.value));
const customTime = sanctionTimes.value.find(item => item.value === 'custom'); const customTime = sanctionTimes.value.find(item => item.value === 'custom');
if (customTime && customTime.checked && customDateRange.value && customDateRange.value.length === 2) { if (customTime && customTime.checked && customDateRange.value && customDateRange.value.length === 2) {
const start = new Date(customDateRange.value[0]); const start = new Date(customDateRange.value[0]);
...@@ -362,7 +335,7 @@ const getExportControlListApi = async () => { ...@@ -362,7 +335,7 @@ const getExportControlListApi = async () => {
pageSize: pageSize.value pageSize: pageSize.value
}; };
try { try {
const res = await getExportControlList(data, { signal: abortController.signal }); const res = await getExportControlList(data, { signal: abortController.signal });
// 50%规则涉及实体数 // 50%规则涉及实体数
const countRes = await get50PercentEntityCount(data); const countRes = await get50PercentEntityCount(data);
...@@ -416,22 +389,27 @@ watch(customDateRange, () => { ...@@ -416,22 +389,27 @@ watch(customDateRange, () => {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.list-page { .list-page {
width: 1601px; width: 1601px;
padding-bottom: 50px; padding-bottom: 50px;
margin: 0 auto; margin: 0 auto;
padding-top: 16px; padding-top: 16px;
.search-box { .search-box {
margin-bottom: 16px; margin-bottom: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.search-input { .search-input {
width: 388px; width: 388px;
height: 32px; height: 32px;
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
padding: 0 11px; padding: 0 11px;
} }
:deep(.el-input__inner) { :deep(.el-input__inner) {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -440,24 +418,29 @@ watch(customDateRange, () => { ...@@ -440,24 +418,29 @@ watch(customDateRange, () => {
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
} }
.filters { .filters {
display: flex; display: flex;
align-items: center; align-items: center;
.el-checkbox { .el-checkbox {
margin-right: 20px; margin-right: 20px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.time-select { .time-select {
width: 160px; width: 160px;
height: 32px; height: 32px;
} }
} }
} }
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
.left { .left {
padding-bottom: 20px; padding-bottom: 20px;
width: 388px; width: 388px;
...@@ -465,10 +448,12 @@ watch(customDateRange, () => { ...@@ -465,10 +448,12 @@ watch(customDateRange, () => {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.checkbox-group { .checkbox-group {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 0 0 24px; padding: 0 0 0 24px;
.el-checkbox { .el-checkbox {
width: 50%; width: 50%;
margin-right: 0; margin-right: 0;
...@@ -479,11 +464,13 @@ watch(customDateRange, () => { ...@@ -479,11 +464,13 @@ watch(customDateRange, () => {
line-height: 24px; line-height: 24px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.custom-date-picker { .custom-date-picker {
width: 100%; width: 100%;
margin-top: 8px; margin-top: 8px;
padding-right: 24px; padding-right: 24px;
box-sizing: border-box; box-sizing: border-box;
:deep(.el-date-editor) { :deep(.el-date-editor) {
width: 100%; width: 100%;
height: 32px; height: 32px;
...@@ -491,21 +478,26 @@ watch(customDateRange, () => { ...@@ -491,21 +478,26 @@ watch(customDateRange, () => {
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 4px;
padding: 0 10px; padding: 0 10px;
&:hover { &:hover {
border-color: #c0c4cc; border-color: #c0c4cc;
} }
&.is-active { &.is-active {
border-color: #409eff; border-color: #409eff;
} }
.el-range-input { .el-range-input {
font-size: 14px; font-size: 14px;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
} }
.el-range-separator { .el-range-separator {
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
line-height: 30px; line-height: 30px;
} }
.el-input__icon { .el-input__icon {
line-height: 32px; line-height: 32px;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
...@@ -514,12 +506,14 @@ watch(customDateRange, () => { ...@@ -514,12 +506,14 @@ watch(customDateRange, () => {
} }
} }
} }
.right { .right {
width: 1196px; width: 1196px;
height: auto; height: auto;
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff; background-color: #fff;
.title { .title {
width: 100%; width: 100%;
height: 56px; height: 56px;
...@@ -528,9 +522,11 @@ watch(customDateRange, () => { ...@@ -528,9 +522,11 @@ watch(customDateRange, () => {
align-items: center; align-items: center;
padding: 14px 12px 16px 0; padding: 14px 12px 16px 0;
box-sizing: border-box; box-sizing: border-box;
.left-wrapper { .left-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
.box { .box {
width: 8px; width: 8px;
height: 20px; height: 20px;
...@@ -539,6 +535,7 @@ watch(customDateRange, () => { ...@@ -539,6 +535,7 @@ watch(customDateRange, () => {
border-top-right-radius: 4px; border-top-right-radius: 4px;
margin-right: 14px; margin-right: 14px;
} }
.text { .text {
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
...@@ -547,13 +544,16 @@ watch(customDateRange, () => { ...@@ -547,13 +544,16 @@ watch(customDateRange, () => {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
} }
.right-wrapper { .right-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
.stats { .stats {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 24px; margin-right: 24px;
.dot { .dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -561,50 +561,61 @@ watch(customDateRange, () => { ...@@ -561,50 +561,61 @@ watch(customDateRange, () => {
border-radius: 50%; border-radius: 50%;
margin-right: 8px; margin-right: 8px;
} }
.count-text { .count-text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
color: #3b414b; color: #3b414b;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
margin-right: 16px; margin-right: 16px;
.highlight { .highlight {
color: #cd4246; color: #cd4246;
margin: 0 4px; margin: 0 4px;
} }
} }
.rule-text { .rule-text {
font-size: 14px; font-size: 14px;
color: #5f656c; color: #5f656c;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
.highlight { .highlight {
color: #cd4246; color: #cd4246;
} }
} }
} }
.btn { .btn {
width: 60px; width: 60px;
height: 28px; height: 28px;
img { img {
width: 28px; width: 28px;
height: 28px; height: 28px;
cursor: pointer; cursor: pointer;
} }
img:first-child { img:first-child {
margin-right: 4px; margin-right: 4px;
} }
} }
} }
} }
.right-table { .right-table {
padding: 5px 21px 0 21px; padding: 5px 21px 0 21px;
:deep(.el-table) { :deep(.el-table) {
--el-table-header-bg-color: #fff; --el-table-header-bg-color: #fff;
--el-table-border-color: transparent; --el-table-border-color: transparent;
--el-table-row-hover-bg-color: rgba(248, 249, 250, 1); --el-table-row-hover-bg-color: rgba(248, 249, 250, 1);
} }
:deep(.el-table__inner-wrapper::before) { :deep(.el-table__inner-wrapper::before) {
background-color: transparent; background-color: transparent;
} }
:deep(.el-table__header-wrapper th) { :deep(.el-table__header-wrapper th) {
height: 60px; height: 60px;
background-color: #fff; background-color: #fff;
...@@ -615,15 +626,19 @@ watch(customDateRange, () => { ...@@ -615,15 +626,19 @@ watch(customDateRange, () => {
border-bottom: 1px solid rgba(230, 231, 232, 1); border-bottom: 1px solid rgba(230, 231, 232, 1);
border-top: 1px solid rgba(230, 231, 232, 1); border-top: 1px solid rgba(230, 231, 232, 1);
} }
:deep(.el-table__header-wrapper .cell) { :deep(.el-table__header-wrapper .cell) {
line-height: 22px; line-height: 22px;
} }
:deep(.el-table__header-wrapper th:first-child .cell) { :deep(.el-table__header-wrapper th:first-child .cell) {
padding-left: 39px; padding-left: 39px;
} }
:deep(.el-table__row) { :deep(.el-table__row) {
height: 64px; height: 64px;
} }
:deep(.el-table__cell) { :deep(.el-table__cell) {
border-bottom: 0; border-bottom: 0;
font-size: 16px; font-size: 16px;
...@@ -631,21 +646,26 @@ watch(customDateRange, () => { ...@@ -631,21 +646,26 @@ watch(customDateRange, () => {
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
} }
:deep(.el-table__row .el-table__cell:first-child .cell) { :deep(.el-table__row .el-table__cell:first-child .cell) {
padding-left: 39px; padding-left: 39px;
} }
:deep(.odd-row td.el-table__cell) { :deep(.odd-row td.el-table__cell) {
background-color: rgba(248, 249, 250, 1); background-color: rgba(248, 249, 250, 1);
} }
.entity-name-cell { .entity-name-cell {
display: flex; display: flex;
align-items: center; align-items: center;
.avatar { .avatar {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 8px; margin-right: 8px;
border-radius: 4px; border-radius: 4px;
} }
.avatar-undefined { .avatar-undefined {
width: 24px; width: 24px;
height: 24px; height: 24px;
...@@ -659,6 +679,7 @@ watch(customDateRange, () => { ...@@ -659,6 +679,7 @@ watch(customDateRange, () => {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
} }
.name { .name {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -668,10 +689,12 @@ watch(customDateRange, () => { ...@@ -668,10 +689,12 @@ watch(customDateRange, () => {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
.domain-cell { .domain-cell {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
:deep(.el-tag) { :deep(.el-tag) {
height: auto; height: auto;
padding: 2px 8px; padding: 2px 8px;
...@@ -683,16 +706,19 @@ watch(customDateRange, () => { ...@@ -683,16 +706,19 @@ watch(customDateRange, () => {
border: 1px solid; border: 1px solid;
} }
} }
.rule-cell { .rule-cell {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
.rule-text { .rule-text {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.rule-link { .rule-link {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -702,6 +728,7 @@ watch(customDateRange, () => { ...@@ -702,6 +728,7 @@ watch(customDateRange, () => {
} }
} }
} }
.tight-footer { .tight-footer {
padding: 16px 24px; padding: 16px 24px;
display: flex; display: flex;
...@@ -768,12 +795,14 @@ watch(customDateRange, () => { ...@@ -768,12 +795,14 @@ watch(customDateRange, () => {
} }
} }
} }
.title { .title {
width: 100%; width: 100%;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 12px 16px 0; padding: 14px 12px 16px 0;
.box { .box {
width: 8px; width: 8px;
height: 16px; height: 16px;
...@@ -782,6 +811,7 @@ watch(customDateRange, () => { ...@@ -782,6 +811,7 @@ watch(customDateRange, () => {
border-top-right-radius: 4px; border-top-right-radius: 4px;
margin-right: 14px; margin-right: 14px;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
......
src/views/exportControl/v2.0SingleSanction/components/sanctionsOverview/index.vue
浏览文件 @ be0dcea2
<template> <template>
<div class="sanctions-overview"> <div class="sanctions-overview">
<div class="main"> <div class="main">
<div class="left"> <div class="left">
<div class="left-top"> <div class="left-top">
<div class="title-com"> <div class="title-com">
<div class="box"></div> <div class="box"></div>
<div class="text">基本信息</div> <div class="text">基本信息</div>
<div class="btn"> <div class="btn">
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
<img src="../../assets/收藏按钮.png" alt="" /> <img src="../../assets/收藏按钮.png" alt="" />
</div> </div>
</div> </div>
<div class="left-top-title"> <div class="left-top-title">
<div class="info-row"> <div class="info-row">
<div class="label">发布机构：</div> <div class="label">发布机构：</div>
...@@ -45,54 +45,39 @@ ...@@ -45,54 +45,39 @@
<div class="info-row"> <div class="info-row">
<div class="label">制裁领域：</div> <div class="label">制裁领域：</div>
<div class="value tags"> <div class="value tags">
<span <span class="tag" v-for="(domain, index) in formattedData.domains" :key="index">{{ domain }}</span>
class="tag"
v-for="(domain, index) in formattedData.domains"
:key="index"
>{{ domain }}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="left-top-content"> <div class="left-top-content">
<div class="content-title">制裁实体分布：</div> <div class="content-title">制裁实体分布：</div>
<div class="distribution-list"> <div class="distribution-list">
<div <div class="list-item" v-for="(item, index) in entityDistribution" :key="index">
class="list-item"
v-for="(item, index) in entityDistribution"
:key="index"
>
<img :src="flag" alt="" class="flag"> <img :src="flag" alt="" class="flag">
<div class="country-name">{{ item.name }}</div> <div class="country-name">{{ item.name }}</div>
<div class="progress-bar-container"> <div class="progress-bar-container">
<div <div class="progress-bar" :style="{
class="progress-bar" width: item.width,
:style="{ background: item.gradient
width: item.width, }"></div>
background: item.gradient
}"
></div>
</div> </div>
<div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div> <div class="count" :class="{ 'highlight': index === 0 }">{{ item.count }}家</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="left-bottom"> <div class="left-bottom">
<div class="title-com"> <div class="title-com">
<div class="box"></div> <div class="box"></div>
<div class="text">制裁背景</div> <div class="text">制裁背景</div>
<div class="btn"> <div class="btn">
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
<img src="../../assets/收藏按钮.png" alt="" /> <img src="../../assets/收藏按钮.png" alt="" />
</div> </div>
</div> </div>
<div class="left-bottom-content"> <div class="left-bottom-content">
<div class="timeline-list"> <div class="timeline-list">
<div <div class="timeline-item" v-for="(item, index) in timelineData" :key="index">
class="timeline-item"
v-for="(item, index) in timelineData"
:key="index"
>
<div class="date-row"> <div class="date-row">
<div class="dot"></div> <div class="dot"></div>
<div class="date">{{ item.date }}</div> <div class="date">{{ item.date }}</div>
...@@ -101,20 +86,22 @@ ...@@ -101,20 +86,22 @@
</div> </div>
</div> </div>
<div class="view-more" v-if="hasMore" @click="loadMore"> <div class="view-more" v-if="hasMore" @click="loadMore">
查看更多 <el-icon class="icon-more"><DArrowRight /></el-icon> 查看更多 <el-icon class="icon-more">
<DArrowRight />
</el-icon>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="right"> <div class="right">
<div class="title-com"> <div class="title-com">
<div class="box"></div> <div class="box"></div>
<div class="text">制裁清单</div> <div class="text">制裁清单</div>
<div class="btn"> <div class="btn">
<img src="../../assets/下载按钮.png" alt="" /> <img src="../../assets/下载按钮.png" alt="" />
<img src="../../assets/收藏按钮.png" alt="" /> <img src="../../assets/收藏按钮.png" alt="" />
</div> </div>
</div> </div>
<div class="right-title"> <div class="right-title">
<div class="filter-row"> <div class="filter-row">
<!-- <div class="filter-left"> <!-- <div class="filter-left">
...@@ -128,12 +115,7 @@ ...@@ -128,12 +115,7 @@
<el-option label="全部领域" value="" /> <el-option label="全部领域" value="" />
<el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" /> <el-option v-for="item in domainOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select> </el-select>
<el-input <el-input v-model="searchKeyword" placeholder="搜索实体" style="width: 150px" :suffix-icon="Search" />
v-model="searchKeyword"
placeholder="搜索实体"
style="width: 150px"
:suffix-icon="Search"
/>
</div> </div>
</div> </div>
<div class="stats-row"> <div class="stats-row">
...@@ -142,24 +124,22 @@ ...@@ -142,24 +124,22 @@
<div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div> <div class="tab-btn" :class="{ active: activeTab === 'remove' }" @click="activeTab = 'remove'">移除实体</div>
</div> --> </div> -->
<div class="stats-info"> <div class="stats-info">
<div class="stat-item"> <div class="stat-item">
<span class="dot red"></span> <span class="dot red"></span>
<span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{ addRuleCount }}</span>家)</span> <span class="text">新增 <span class="num red">{{ addCount }}</span> 家 (50%规则涉及<span class="num red">{{
</div> addRuleCount }}</span>家)</span>
<!-- <div class="stat-item"> </div>
<!-- <div class="stat-item">
<span class="dot green"></span> <span class="dot green"></span>
<span class="text">移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span class="num green">{{ removeRuleCount }}</span>家)</span> <span class="text">移除 <span class="num green">{{ removeCount }}</span> 家 (50%规则涉及<span class="num green">{{ removeRuleCount }}</span>家)</span>
</div> --> </div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="sanction-group-list"> <div class="sanction-group-list">
<div class="sanction-group" v-for="(group, index) in sanctionList" :key="index"> <div class="sanction-group" v-for="(group, index) in sanctionList" :key="index">
<el-table <el-table :data="group.entities" style="width: 100%">
:data="group.entities"
style="width: 100%"
>
<el-table-column label="实体名称" min-width="280"> <el-table-column label="实体名称" min-width="280">
<template #default="scope"> <template #default="scope">
<div class="name-cell"> <div class="name-cell">
...@@ -171,13 +151,8 @@ ...@@ -171,13 +151,8 @@
</el-table-column> </el-table-column>
<el-table-column label="涉及领域" width="180" align="center"> <el-table-column label="涉及领域" width="180" align="center">
<template #default="scope"> <template #default="scope">
<span <span v-for="(item, index) in scope.row.fields" :key="index" class="tag" :style="getTagStyle(item)"
v-for="(item, index) in scope.row.fields" style="margin: 0 2px;">{{ item }}</span>
:key="index"
class="tag"
:style="getTagStyle(item)"
style="margin: 0 2px;"
>{{ item }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="location" label="上市地点" width="90" align="center" /> <el-table-column prop="location" label="上市地点" width="90" align="center" />
...@@ -185,7 +160,8 @@ ...@@ -185,7 +160,8 @@
<el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" /> <el-table-column prop="revenue" label="营收(亿元)" width="110" align="center" />
<el-table-column label="50%规则子企业" width="180" align="center"> <el-table-column label="50%规则子企业" width="180" align="center">
<template #default="scope"> <template #default="scope">
<span v-if="scope.row.subsidiaryCount" class="subsidiary-link" @click="handleSubsidiaryClick(scope.row)"> <span v-if="scope.row.subsidiaryCount" class="subsidiary-link"
@click="handleSubsidiaryClick(scope.row)">
{{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span> {{ scope.row.subsidiaryText }} <span class="blue-text">{{ scope.row.subsidiaryCount }}家 ></span>
</span> </span>
<span v-else>--</span> <span v-else>--</span>
...@@ -198,16 +174,12 @@ ...@@ -198,16 +174,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 50%规则子企业弹框 --> <!-- 50%规则子企业弹框 -->
<RuleSubsidiaryDialog <RuleSubsidiaryDialog v-model="subsidiaryDialogVisible" :company-name="currentSubsidiaryCompanyName"
v-model="subsidiaryDialogVisible" :total-count="currentSubsidiaryCount" :data-list="currentSubsidiaryList" />
:company-name="currentSubsidiaryCompanyName" </div>
:total-count="currentSubsidiaryCount"
:data-list="currentSubsidiaryList"
/>
</div>
</template> </template>
<script setup> <script setup>
...@@ -223,14 +195,16 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv ...@@ -223,14 +195,16 @@ import RuleSubsidiaryDialog from "../../../v2.0EntityList/components/sanctionsOv
// 跳转公司详情页 // 跳转公司详情页
const handleCompClick = item => { const handleCompClick = item => {
console.log("item", item); // console.log("item", item);
const route = router.resolve({ // const route = router.resolve({
path: "/companyPages", // path: "/companyPages",
query: { // query: {
id: item.id // id: item.entityId
} // }
}); // });
window.open(route.href, "_blank"); // window.open(route.href, "_blank");
const curRoute = router.resolve({ name: "companyPages", params: { id: item.entityId } });
window.open(curRoute.href, "_blank");
}; };
// 跳转发布机构详情页 // 跳转发布机构详情页
...@@ -280,7 +254,7 @@ const getSanctionOverviewList = async () => { ...@@ -280,7 +254,7 @@ const getSanctionOverviewList = async () => {
addRuleCount.value = data.addRuleCount || 0 addRuleCount.value = data.addRuleCount || 0
removeCount.value = data.removeCount || 0 removeCount.value = data.removeCount || 0
removeRuleCount.value = data.removeRuleCount || 0 removeRuleCount.value = data.removeRuleCount || 0
const list = data.sanList || [] const list = data.sanList || []
sanctionList.value = list.map(item => ({ sanctionList.value = list.map(item => ({
reason: item.sanReason, reason: item.sanReason,
...@@ -292,7 +266,7 @@ const getSanctionOverviewList = async () => { ...@@ -292,7 +266,7 @@ const getSanctionOverviewList = async () => {
date: org.startTime ? org.startTime.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$1年$2月$3日') : '--', // 格式化日期 date: org.startTime ? org.startTime.replace(/^(\d{4})-(\d{2})-(\d{2}).*$/, '$1年$2月$3日') : '--', // 格式化日期
revenue: "--", // 接口暂无数据 revenue: "--", // 接口暂无数据
subsidiaryCount: org.ruleOrgCount || 0, subsidiaryCount: org.ruleOrgCount || 0,
subsidiaryText: org.ruleOrgList && org.ruleOrgList.length > 0 subsidiaryText: org.ruleOrgList && org.ruleOrgList.length > 0
? (org.ruleOrgList[0].orgName.length > 10 ? org.ruleOrgList[0].orgName.slice(0, 10) + '...' : org.ruleOrgList[0].orgName) + '...等' ? (org.ruleOrgList[0].orgName.length > 10 ? org.ruleOrgList[0].orgName.slice(0, 10) + '...' : org.ruleOrgList[0].orgName) + '...等'
: '' : ''
})) }))
...@@ -347,8 +321,8 @@ const loadMore = () => { ...@@ -347,8 +321,8 @@ const loadMore = () => {
const router = useRouter(); const router = useRouter();
const sanRecordId = ref("") const sanRecordId = ref("")
const getUrlParams = () => { const getUrlParams = () => {
const urlParams = new URLSearchParams(window.location.search); const urlParams = new URLSearchParams(window.location.search);
sanRecordId.value = urlParams.get("id") || "" sanRecordId.value = urlParams.get("id") || ""
} }
// 单次制裁-制裁概况-制裁实体国家分布 // 单次制裁-制裁概况-制裁实体国家分布
...@@ -360,7 +334,7 @@ const getEntityCountry = async () => { ...@@ -360,7 +334,7 @@ const getEntityCountry = async () => {
if (res.code === 200) { if (res.code === 200) {
const rawData = res.data || []; const rawData = res.data || [];
const maxCount = Math.max(...rawData.map(item => item.count || 0), 1); const maxCount = Math.max(...rawData.map(item => item.count || 0), 1);
// 颜色池 - 用于循环分配 // 颜色池 - 用于循环分配
const gradientPool = [ const gradientPool = [
"linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)", // 橙 "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)", // 橙
...@@ -394,20 +368,20 @@ const props = defineProps({ ...@@ -394,20 +368,20 @@ const props = defineProps({
}); });
// 跳转到人物页 // 跳转到人物页
const handleClick = () => { const handleClick = () => {
const route = router.resolve({ const route = router.resolve({
path: "/characterPage", path: "/characterPage",
query: { query: {
// type: props.data.type, // type: props.data.type,
personId: props.data.postPersonId personId: props.data.postPersonId
} }
}); });
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 计算属性处理数据 // 计算属性处理数据
const formattedData = computed(() => { const formattedData = computed(() => {
const info = props.data || {}; const info = props.data || {};
// 日期格式化 // 日期格式化
const formatDate = (dateStr) => { const formatDate = (dateStr) => {
if (!dateStr) return ''; if (!dateStr) return '';
...@@ -491,29 +465,29 @@ const getTagStyle = (tagName) => { ...@@ -491,29 +465,29 @@ const getTagStyle = (tagName) => {
const timelineData = ref([]); const timelineData = ref([]);
const entityDistribution = ref([ const entityDistribution = ref([
{ {
name: "中国", name: "中国",
count: 24, count: 24,
width: "100%", width: "100%",
gradient: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)" gradient: "linear-gradient(270deg, rgba(206,79,81,1) 0%, rgba(255,255,255,0) 100%)"
}, },
{ {
name: "沙特阿拉伯", name: "沙特阿拉伯",
count: 2, count: 2,
width: "60%", width: "60%",
gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)" gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
}, },
{ {
name: "俄罗斯", name: "俄罗斯",
count: 2, count: 2,
width: "60%", width: "60%",
gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)" gradient: "linear-gradient(270deg, rgba(255,170,0,1) 0%, rgba(255,255,255,0) 100%)"
}, },
{ {
name: "中国香港", name: "中国香港",
count: 1, count: 1,
width: "50%", width: "50%",
gradient: "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)" gradient: "linear-gradient(270deg, rgba(5,95,194,1) 0%, rgba(255,255,255,0) 100%)"
} }
]) ])
...@@ -531,30 +505,35 @@ onMounted(() => { ...@@ -531,30 +505,35 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.sanctions-overview { .sanctions-overview {
width: 1601px; width: 1601px;
margin: 0 auto; margin: 0 auto;
padding-top: 16px; padding-top: 16px;
padding-bottom: 50px; padding-bottom: 50px;
.main {
width: 100%; .main {
height: 100%; width: 100%;
display: flex; height: 100%;
justify-content: space-between; display: flex;
.left { justify-content: space-between;
width: 520px;
height: 1119px; .left {
.left-top { width: 520px;
width: 100%; height: 1119px;
height: 582px;
padding-bottom: 20px; .left-top {
border-radius: 10px; width: 100%;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); height: 582px;
background-color: #fff; padding-bottom: 20px;
margin-bottom: 16px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
margin-bottom: 16px;
.left-top-title { .left-top-title {
padding: 22px 20px 22px 27px; padding: 22px 20px 22px 27px;
width: 100%; width: 100%;
...@@ -620,10 +599,12 @@ onMounted(() => { ...@@ -620,10 +599,12 @@ onMounted(() => {
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 4px; height: 4px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #ccc; background: #ccc;
border-radius: 2px; border-radius: 2px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: transparent; background: transparent;
} }
...@@ -642,11 +623,13 @@ onMounted(() => { ...@@ -642,11 +623,13 @@ onMounted(() => {
} }
} }
} }
.left-top-content { .left-top-content {
width: 100%; width: 100%;
height: 234px; height: 234px;
padding: 19px 29px 22px 27px; padding: 19px 29px 22px 27px;
overflow: auto; overflow: auto;
.content-title { .content-title {
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
...@@ -662,6 +645,7 @@ onMounted(() => { ...@@ -662,6 +645,7 @@ onMounted(() => {
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
overflow: auto; overflow: auto;
.list-item { .list-item {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -719,42 +703,46 @@ onMounted(() => { ...@@ -719,42 +703,46 @@ onMounted(() => {
} }
} }
} }
} }
.left-bottom {
width: 100%; .left-bottom {
height: 521px; width: 100%;
padding-bottom: 20px; height: 521px;
border-radius: 10px; padding-bottom: 20px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); border-radius: 10px;
background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.left-bottom-content { .left-bottom-content {
padding: 26px 30px 0 25px; padding: 26px 30px 0 25px;
height: calc(100% - 56px); // 减去标题高度 height: calc(100% - 56px); // 减去标题高度
display: flex;
flex-direction: column;
.timeline-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px;
margin-bottom: 24px;
overflow-y: auto; // 允许垂直滚动
flex: 1; // 占据剩余空间
padding-right: 10px; // 防止滚动条遮挡内容
/* Custom Scrollbar */
&::-webkit-scrollbar {
width: 6px;
}
.timeline-list { &::-webkit-scrollbar-thumb {
display: flex; background: #ccc;
flex-direction: column; border-radius: 3px;
gap: 24px;
margin-bottom: 24px;
overflow-y: auto; // 允许垂直滚动
flex: 1; // 占据剩余空间
padding-right: 10px; // 防止滚动条遮挡内容
/* Custom Scrollbar */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
} }
&::-webkit-scrollbar-track {
background: transparent;
}
}
.timeline-item { .timeline-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -831,14 +819,16 @@ onMounted(() => { ...@@ -831,14 +819,16 @@ onMounted(() => {
} }
} }
} }
} }
} }
.right {
width: 1064px; .right {
height: auto; width: 1064px;
border-radius: 10px; height: auto;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); border-radius: 10px;
background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background-color: #fff;
.right-title { .right-title {
width: 100%; width: 100%;
// height: 107px; // height: 107px;
...@@ -920,6 +910,7 @@ onMounted(() => { ...@@ -920,6 +910,7 @@ onMounted(() => {
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
line-height: 24px; line-height: 24px;
margin-right: 34px; margin-right: 34px;
.dot { .dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
...@@ -929,6 +920,7 @@ onMounted(() => { ...@@ -929,6 +920,7 @@ onMounted(() => {
&.red { &.red {
background-color: rgb(206, 79, 81); background-color: rgb(206, 79, 81);
} }
&.green { &.green {
background-color: rgb(33, 129, 57); background-color: rgb(33, 129, 57);
} }
...@@ -940,11 +932,14 @@ onMounted(() => { ...@@ -940,11 +932,14 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
.num { .num {
font-weight: 700; font-weight: 700;
&.red { &.red {
color: rgb(206, 79, 81); color: rgb(206, 79, 81);
} }
&.green { &.green {
color: rgb(33, 129, 57); color: rgb(33, 129, 57);
} }
...@@ -954,153 +949,164 @@ onMounted(() => { ...@@ -954,153 +949,164 @@ onMounted(() => {
} }
} }
} }
.right-content {
padding: 0 20px 17px 20px;
.sanction-group-list { .right-content {
display: flex; padding: 0 20px 17px 20px;
flex-direction: column;
gap: 16px; .sanction-group-list {
display: flex;
.sanction-group { flex-direction: column;
border: 1px solid rgb(234, 236, 238); gap: 16px;
border-radius: 8px;
overflow: hidden; .sanction-group {
border: 1px solid rgb(234, 236, 238);
:deep(.el-table__header-wrapper) { border-radius: 8px;
th { overflow: hidden;
background-color: rgb(59, 65, 75) !important;
height: 48px; :deep(.el-table__header-wrapper) {
padding: 0; th {
color: #fff; background-color: rgb(59, 65, 75) !important;
font-weight: 700; height: 48px;
font-size: 16px; padding: 0;
font-family: "Microsoft YaHei"; color: #fff;
border-bottom: none; font-weight: 700;
} font-size: 16px;
th:first-child { font-family: "Microsoft YaHei";
border-top-left-radius: 8px; border-bottom: none;
}
th:last-child {
border-top-right-radius: 8px;
}
} }
:deep(.el-table__body-wrapper) { th:first-child {
tr:nth-child(odd) td { border-top-left-radius: 8px;
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 { th:last-child {
display: flex; border-top-right-radius: 8px;
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 { :deep(.el-table__body-wrapper) {
font-size: 16px; tr:nth-child(odd) td {
font-weight: 700; background-color: rgba(248, 249, 250, 1);
line-height: 24px;
font-family: "Microsoft YaHei";
color: rgba(59, 65, 75, 1);
}
} }
.tag { tr:nth-child(even) td {
padding: 1px 8px; background-color: #fff;
border-radius: 4px;
font-size: 14px;
display: inline-block;
border: 1px solid transparent;
} }
.subsidiary-link { td {
cursor: pointer; height: 48px;
font-size: 14px; padding: 0;
color: rgb(59, 65, 75); font-size: 16px;
font-weight: 400;
.blue-text { font-family: "Microsoft YaHei";
color: rgb(5, 95, 194); color: rgb(95, 101, 108);
} line-height: 24px;
} }
}
.reason-box { .name-cell {
padding: 12px 19px 14px 39px; display: flex;
background-color: #fff; align-items: center;
border-top: 1px solid rgb(234, 236, 238);
.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-size: 16px;
color: rgb(59, 65, 75); font-weight: 700;
line-height: 28px; line-height: 24px;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
text-align: left; 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 { .title-com {
width: 100%; width: 100%;
height: 56px; height: 56px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 14px 12px 16px 0; padding: 14px 12px 16px 0;
.box {
width: 8px; .box {
height: 20px; width: 8px;
background-color: rgb(5, 95, 194); height: 20px;
border-bottom-right-radius: 4px; background-color: rgb(5, 95, 194);
border-top-right-radius: 4px; border-bottom-right-radius: 4px;
margin-right: 14px; border-top-right-radius: 4px;
} margin-right: 14px;
.text { }
font-size: 20px;
font-weight: 700; .text {
font-family: "Microsoft YaHei"; font-size: 20px;
line-height: 26px; font-weight: 700;
color: rgb(5, 95, 194); font-family: "Microsoft YaHei";
} line-height: 26px;
.btn { color: rgb(5, 95, 194);
width: 60px; }
height: 28px;
margin-left: auto; .btn {
img { width: 60px;
width: 28px; height: 28px;
height: 28px; margin-left: auto;
cursor: pointer;
} img {
img:first-child { width: 28px;
margin-right: 4px; height: 28px;
} cursor: pointer;
} }
img:first-child {
margin-right: 4px;
}
}
} }
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论