Skip to content

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

update

上级 05fba319
显示空白字符变更
内嵌 并排
正在显示 包含 1626 行增加 和 1448 行删除
index.html
浏览文件 @ 93476144
......@@ -2,7 +2,7 @@
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" href="/logo.svg" type="image/svg+xml">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>某方向风险监测预警系统</title>
</head>
......
public/logo.svg 0 → 100644
浏览文件 @ 93476144
<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48.000000" height="48.000000" fill="none" customFrame="#000000">
<rect id="logo" width="48.000000" height="48.000000" x="0.000000" y="0.000000" />
<circle id="椭圆 4" cx="24" cy="24" r="24" fill="rgb(5,95,194)" />
<path id="多边形 2(边框)" d="M35.8806 15.2356C37.3616 16.013 38.2893 17.5475 38.2893 19.2201L38.2893 28.7796C38.2893 30.4522 37.3616 31.9868 35.8806 32.7641L26.0912 37.9022C24.7817 38.5895 23.2181 38.5895 21.9085 37.9022L12.1191 32.7641C10.6381 31.9868 9.71045 30.4522 9.71045 28.7796L9.71045 19.2201C9.71045 17.5475 10.6381 16.013 12.1191 15.2356L21.9085 10.0975C23.2181 9.4102 24.7817 9.4102 26.0912 10.0975L35.8806 15.2356ZM34.1378 18.5561L24.3484 13.4179C24.2939 13.3893 24.2375 13.3678 24.1794 13.3535C24.1214 13.3392 24.0615 13.332 23.9999 13.332C23.9382 13.332 23.8784 13.3392 23.8203 13.3535C23.7622 13.3678 23.7059 13.3893 23.6513 13.4179L13.8619 18.5561C13.8002 18.5884 13.7449 18.6277 13.696 18.6737C13.6471 18.7197 13.6047 18.7725 13.5686 18.8321C13.5326 18.8918 13.5055 18.9539 13.4875 19.0186C13.4695 19.0833 13.4604 19.1505 13.4604 19.2201L13.4605 28.7796C13.4605 28.8493 13.4695 28.9164 13.4875 28.9811C13.5055 29.0458 13.5326 29.1079 13.5686 29.1676C13.6047 29.2272 13.6471 29.28 13.696 29.326C13.7449 29.3721 13.8002 29.4113 13.8619 29.4436L23.6513 34.5818C23.7059 34.6104 23.7622 34.6319 23.8203 34.6462C23.8784 34.6605 23.9382 34.6677 23.9999 34.6677C24.0615 34.6677 24.1213 34.6605 24.1795 34.6462C24.2375 34.6319 24.2939 34.6104 24.3484 34.5818L34.1378 29.4436C34.1995 29.4113 34.2548 29.3721 34.3037 29.3261L34.3037 29.3261C34.3526 29.28 34.3951 29.2272 34.4311 29.1676C34.4672 29.1079 34.4942 29.0458 34.5123 28.9811L34.5123 28.981C34.5303 28.9164 34.5393 28.8492 34.5393 28.7796L34.5393 19.2201C34.5393 19.1505 34.5303 19.0833 34.5123 19.0186C34.4942 18.9539 34.4672 18.8918 34.4311 18.8321C34.3951 18.7725 34.3526 18.7197 34.3038 18.6737L34.3037 18.6736C34.2548 18.6276 34.1995 18.5884 34.1378 18.5561Z" fill="rgb(255,255,255)" fill-rule="evenodd" />
<rect id="矩形 4" width="29.250000" height="7.500000" x="9.375000" y="20.250000" fill="rgb(5,95,194)" />
<path id="椭圆 5(边框)" d="M24 18C27.3137 18 30 20.6863 30 24C30 27.3137 27.3137 30 24 30C20.6863 30 18 27.3137 18 24C18 20.6863 20.6863 18 24 18ZM24 21.75C23.8027 21.75 23.6118 21.7741 23.4271 21.8225L23.4271 21.8225C23.3246 21.8493 23.224 21.8836 23.1253 21.9253C23.013 21.9728 22.9059 22.0286 22.8041 22.0927L22.8041 22.0927C22.6622 22.182 22.5306 22.2875 22.409 22.409C22.2875 22.5305 22.1821 22.6622 22.0928 22.804C22.0286 22.9059 21.9728 23.013 21.9253 23.1253C21.8835 23.224 21.8493 23.3246 21.8224 23.4272L21.8224 23.4272C21.7741 23.6118 21.75 23.8027 21.75 24C21.75 24.1973 21.7741 24.3882 21.8224 24.5728L21.8225 24.5729C21.8493 24.6754 21.8836 24.776 21.9253 24.8746C21.9728 24.987 22.0286 25.0941 22.0927 25.1959L22.0928 25.1959L22.0928 25.196C22.1821 25.3378 22.2875 25.4695 22.409 25.591C22.5305 25.7125 22.6622 25.8179 22.8041 25.9073C22.9059 25.9714 23.013 26.0272 23.1253 26.0747C23.224 26.1164 23.3246 26.1507 23.4271 26.1775C23.6118 26.2258 23.8027 26.25 24 26.25C24.1973 26.25 24.3882 26.2259 24.5728 26.1776L24.5728 26.1776L24.5729 26.1775C24.6754 26.1507 24.776 26.1164 24.8746 26.0747C24.987 26.0272 25.0941 25.9714 25.196 25.9072C25.3378 25.8179 25.4695 25.7125 25.591 25.591C25.7125 25.4695 25.8179 25.3378 25.9072 25.196L25.9072 25.196C25.9714 25.0941 26.0272 24.987 26.0747 24.8747C26.1165 24.776 26.1507 24.6754 26.1776 24.5728C26.2259 24.3882 26.25 24.1973 26.25 24C26.25 23.8027 26.2258 23.6118 26.1775 23.4271C26.1507 23.3246 26.1164 23.224 26.0747 23.1253C26.0272 23.013 25.9714 22.9059 25.9072 22.8041L25.9072 22.804C25.8179 22.6622 25.7125 22.5305 25.591 22.409C25.4695 22.2875 25.3378 22.1821 25.196 22.0928L25.1959 22.0927C25.0941 22.0286 24.987 21.9728 24.8747 21.9253C24.776 21.8836 24.6754 21.8493 24.5729 21.8225L24.5728 21.8224C24.3882 21.7741 24.1973 21.75 24 21.75Z" fill="rgb(255,255,255)" fill-rule="evenodd" />
<rect id="矩形 3" width="3.750000" height="7.500000" x="22.125000" y="28.875000" fill="rgb(255,255,255)" />
</svg>
src/router/index.js
浏览文件 @ 93476144
......@@ -22,7 +22,14 @@ const router = createRouter({
// 路由守卫 - 设置页面标题
router.beforeEach((to, from, next) => {
if (to.meta.title) {
if (to.meta.dynamicTitle) {
console.log('to', to);
document.title = window.sessionStorage.getItem("billId");
} else {
document.title = to.meta.title
}
}
next();
});
......
src/router/modules/bill.js
浏览文件 @ 93476144
......@@ -22,7 +22,7 @@ const billRoutes = [
name: "BillHome",
component: BillHome,
meta: {
title: "法案首页"
title: "科技法案概览"
}
},
{
......@@ -41,26 +41,30 @@ const billRoutes = [
component: BillLayout,
redirect: "/billLayout/bill/introduction",
meta: {
title: "法案分析"
title: "法案分析",
dynamicTitle: true // 标记需要动态设置标题
},
children: [
{
path: "introduction",
name: "BillIntroduction",
component: BillIntroduction,
meta: { title: "法案简介" }
// meta: {
// title: "法案简介"
// }
},
{
path: "background",
name: "BillBackground",
component: BillBackground,
meta: { title: "法案背景" }
// meta: { title: "法案背景" }
},
{
path: "template",
name: "BillTemplate",
component: BillTemplate,
meta: { title: "内容概要" }
// meta: { title: "内容概要" }
}
]
},
......@@ -70,27 +74,27 @@ const billRoutes = [
name: "BillDeepDigLayout",
component: BillDeepDigLayout,
redirect: "/billLayout/deepDig/processOverview",
meta: {
title: "深度挖掘"
},
// meta: {
// title: "深度挖掘"
// },
children: [
{
path: "processOverview",
name: "BillDeepDigProcessOverview",
component: BillDeepDigProcessOverview,
meta: { title: "流程概要" }
// meta: { title: "流程概要" }
},
{
path: "processAnalysis",
name: "BillDeepDigProcessAnalysis",
component: BillDeepDigProcessAnalysis,
meta: { title: "流程分析" }
// meta: { title: "流程分析" }
},
{
path: "poliContribution",
name: "BillDeepDigPoliContribution",
component: BillDeepDigPoliContribution,
meta: { title: "政治献金" }
// meta: { title: "政治献金" }
}
]
},
......@@ -100,21 +104,21 @@ const billRoutes = [
name: "BillInfluenceLayout",
component: BillInfluenceLayout,
redirect: "/billLayout/influence/industry",
meta: {
title: "影响分析"
},
// meta: {
// title: "影响分析"
// },
children: [
{
path: "industry",
name: "BillInfluenceIndustry",
component: BillInfluenceIndustry,
meta: { title: "对华产业影响" }
// meta: { title: "对华产业影响" }
},
{
path: "scientificResearch",
name: "BillInfluenceScientificResearch",
component: BillInfluenceScientificResearch,
meta: { title: "对华科研影响" }
// meta: { title: "对华科研影响" }
}
]
},
......@@ -122,9 +126,9 @@ const billRoutes = [
path: "relevantCircumstance",
name: "BillRelevantCircumstance",
component: BillRelevantCircumstance,
meta: {
title: "相关情况"
}
// meta: {
// title: "相关情况"
// }
}
]
},
......
src/router/modules/marketAccessRestrictions.js
浏览文件 @ 93476144
......@@ -22,19 +22,12 @@ const marketAccessRestrictionsRoutes = [
path: "/marketAccessLayout",
name: "MarketAccessLayout",
component: MarketAccessLayout,
redirect: "/marketAccessLayout/overview",
redirect: "/marketAccessLayout/case",
meta: {
title: "市场准入限制布局"
},
children: [
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "调查概况"
}
},
{
path: "case",
name: "MarketAccessCase",
......@@ -43,7 +36,14 @@ const marketAccessRestrictionsRoutes = [
title: "调查案件"
}
},
{
path: "overview",
name: "MarketAccessOverview",
component: MarketAccessOverview,
meta: {
title: "数据统计"
}
}
]
},
......
src/router/modules/overview.js
浏览文件 @ 93476144
......@@ -14,7 +14,7 @@ const overViewRoutes = [
name: "overView",
component: overView,
meta: {
title: "中美博弈概览"
title: "中美科技博弈概览"
}
},
// GJ概览页面路由
......
src/views/bill/billHome/index.vue
浏览文件 @ 93476144
......@@ -943,7 +943,18 @@ const curBill = ref({
// 查看详情
const handleClickToDetail = () => {
window.sessionStorage.setItem("billId", curBill.value.billId);
const route = router.resolve("/billLayout?billId=" + curBill.value.billId);
const route = router.resolve(
{
path: "/billLayout",
query: {
billId: curBill.value.billId,
},
}
);
console.log(route);
window.open(route.href, "_blank");
};
// 查看详情 传递参数
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 93476144
......@@ -56,7 +56,7 @@
</div>
</div>
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-text">{{ "数据总览" }}</div>
<div class="btn-icon">
<img src="@/assets/icons/arrow-right-icon.png" alt="" />
</div>
......@@ -69,7 +69,7 @@
</div>
</div>
<div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1 card" @click="handleClickToDetail(sortInfo[1]?.sortCode)">
<div class="home-main-header-card-box-box1 card" @click="handleClickCardToDetail(sortInfo[1]?.sortCode)">
<div class="header">
<div class="header-left">{{ sortInfo[1]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[1]?.sortCount}项` }}</div>
......@@ -81,7 +81,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box2 card" @click="handleClickToDetail(sortInfo[2]?.sortCode)">
<div class="home-main-header-card-box-box2 card" @click="handleClickCardToDetail(sortInfo[2]?.sortCode)">
<div class="header">
<div class="header-left">{{ sortInfo[2]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[2]?.sortCount}项` }}</div>
......@@ -93,7 +93,7 @@
</div>
</div>
</div>
<div class="home-main-header-card-box-box3 card" @click="handleClickToDetail(sortInfo[0]?.sortCode)">
<div class="home-main-header-card-box-box3 card" @click="handleClickCardToDetail(sortInfo[0]?.sortCode)">
<div class="header">
<div class="header-left">{{ sortInfo[0]?.sortName }}</div>
<div class="header-right">{{ `${sortInfo[0]?.sortCount}项` }}</div>
......@@ -124,7 +124,7 @@
</div>
<div class="title">{{ "调查进展" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail('337')">
<div class="box1-header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
......@@ -378,7 +378,7 @@
<div class="box7-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box7-header-title">{{ "受调查企业地域分布" }}</div>
<div class="box7-header-title">{{ "受调查国家分布" }}</div>
</div>
<div class="box-header-right">
<div class="icon">
......@@ -388,9 +388,20 @@
</div>
</div>
<div class="box7-main">
<div class="box7-main-left" id="box7Chart1"></div>
<div class="box7-main-right">
<div class="box7-main-right-top">
<div class="box7-main-top">
<el-select
v-model="box7SelectedSurvey"
@change="handleChangeBox7Survey"
placeholder="选择调查"
style="width: 120px"
>
<el-option
v-for="item in box7SurveyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<el-select
v-model="box7SelectedYear"
@change="handleChangeBox7Year"
......@@ -405,8 +416,15 @@
/>
</el-select>
</div>
<div class="box7-main-right-main" id="box7Chart2"></div>
<div class="box7-main-main" id="box7Chart"></div>
<!-- <div class="box7-main-left" id="box7Chart1"></div>
<div class="box7-main-right">
<div class="box7-main-right-top">
</div>
<div class="box7-main-right-main" id="box7Chart2"></div>
</div> -->
</div>
</div>
<div class="box8">
......@@ -415,50 +433,25 @@
<div class="box8-header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" />
</div>
<div class="box8-header-title">{{ "制裁领域分布" }}</div>
<div class="box8-header-title">{{ "调查结果分布" }}</div>
</div>
<div class="box-header-right">
<div class="icon">
<img src="@/assets/images/icon/header-btn.png" alt="" />
</div>
<div class="text">{{ "数据来源：美国商务部" }}</div>
</div>
</div>
<div class="box8-main">
<div class="box8-main-header">
<div class="header-1">{{ "企业名称" }}</div>
<div class="header-2">
<div class="inner-item">
{{ "337" }}
</div>
</div>
<div class="header-3">
<div class="inner-item">
{{ "301" }}
</div>
</div>
<div class="header-4">
<div class="inner-item">
{{ "232" }}
</div>
</div>
</div>
<div class="box8-main-content">
<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
<div class="item-1">
<div class="icon">
<img :src="item.logo ? item.logo : DefaultCompanyIcon" alt="" />
</div>
<div class="text">
{{ item.name }}
</div>
</div>
<div class="item-2 item-num">{{ item.data337 ? item.data337 : "--" }}</div>
<div class="item-3 item-num">{{ item.data301 ? item.data301 : "--" }}</div>
<div class="item-4 item-num">{{ item.data232 ? item.data232 : "--" }}</div>
</div>
<el-select
v-model="box8SelectedSurvey"
@change="handleChangeBox8Survey"
placeholder="选择调查"
style="width: 120px"
>
<el-option
v-for="item in box8SurveyList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="box8-main" id="box8Chart"></div>
</div>
</div>
</div>
......@@ -546,31 +539,48 @@
</div>
<div class="right">
<div class="right-header">
<div class="header-item1">{{ "调查名称" }}</div>
<div class="header-item2">{{ "调查案号" }}</div>
<div class="header-item3">{{ "涉及领域" }}</div>
<div class="header-item4">{{ "案件状态" }}</div>
<div class="header-item5">{{ "发布日期" }}</div>
<div class="icon">
<img src="./assets/images/right-header-icon.png" alt="" />
</div>
<div class="title">{{ "市场准入限制调查" }}</div>
</div>
<div class="right-main">
<div class="item" v-for="(val, idx) in surveyInfoList" :key="idx" @click="handleClickToSurveyDetail(val.SORTCODE)">
<div class="item-box1">
<div
class="name"
:class="{
name1: val.SORTCODE === '301',
name2: val.SORTCODE === '337',
name3: val.SORTCODE === '232'
}"
class="item"
v-for="(item, index) in surveyInfoList"
:key="index"
@click="handleClickToSurveyDetail()"
>
{{ val.SORTCODE }}
<div class="item-left">{{ "2025年11月12日" }}</div>
<div class="item-center">
<div class="icon">
<!-- <img :src="item.img" alt="" /> -->
</div>
<div class="line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="item-right">
<div class="item-right-header">
<div class="tag tag1">{{ "337" }}</div>
<div class="title">{{ item.title }}</div>
<div class="status">
<div class="status-icon"></div>
<div class="status-text">{{ item.status }}</div>
</div>
</div>
<div class="item-right-content">
{{ item.content }}
</div>
<div class="item-right-footer">
<div class="area-box" v-for="(val, idx) in item.areaList" :key="idx">
<div class="area">{{ val }}</div>
</div>
<div class="flag-box">
<div class="flag" v-for="(vall, idxx) in item.countryList" :key="idxx">
<!-- <img src="" alt="" /> -->
</div>
</div>
</div>
<div class="title">{{ val.SEARCHNAME }}</div>
</div>
<div class="item-box2">{{ val.SEARCHID }}</div>
<div class="item-box3">{{ val.searchArea?.toString() }}</div>
<div class="item-box4">{{ val.CASESTATUS }}</div>
<div class="item-box5">{{ val.SEARCHDATEZH }}</div>
</div>
</div>
<div class="right-footer">
......@@ -606,7 +616,7 @@ import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
import getBarChart from "./utils/barChart";
// import getBarChart from "./utils/barChart";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
......@@ -614,6 +624,14 @@ import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
......@@ -636,6 +654,8 @@ import {
import { getRiskSignal, getNews, getRemarks } from "@/api/common/index";
import { ElMessage } from "element-plus";
import getBarChart from "./utils/barChart1";
import DefaultUserIcon from "@/assets/icons/default-icon1.png";
import DefaultCompanyIcon from "@/assets/icons/default-icon2.png";
import DefaultNewsIcon from "@/assets/icons/default-icon-news.png";
......@@ -683,6 +703,16 @@ const handleClickToDetail = () => {
window.open(route.href, "_blank");
};
const handleClickCardToDetail = (id) => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
}
// 切换当前调查
const handleSwithCurSurvey = name => {
if (name === "left") {
......@@ -938,6 +968,7 @@ const hadleGetStatNum = async () => {
} else {
chart1Data.value = transformAllData(res.data);
}
console.log("chart1Data", chart1Data.value);
}
} catch (error) {}
};
......@@ -1070,6 +1101,23 @@ const handleBox6 = async () => {
setChart(chart2, "chart2");
};
const box7SurveyList = ref([
{
label: "337调查",
value: "337调查"
},
{
label: "301调查",
value: "301调查"
},
{
label: "232调查",
value: "232调查"
}
]);
const box7SelectedSurvey = ref("337调查");
const box7YearList = ref([
{
label: "2025",
......@@ -1099,166 +1147,174 @@ const box7YearList = ref([
const box7SelectedYear = ref("2025");
const handleChangeBox7Survey = () => {
handleGetBox7Data();
};
const handleChangeBox7Year = () => {
handleGetBox7Data2();
handleGetBox7Data();
};
const box7Chart1Data = ref([
const box7Data = ref({
title: [
{
name: "337调查",
data: [
{ name: "北京", value: 10, coord: [115.46, 39.92] },
{ name: "上海", value: 9, coord: [120.48, 31.22] },
{ name: "广东", value: 15, coord: [114.23, 23.16] },
{ name: "江苏", value: 30, coord: [117.78, 32.04] },
{ name: "浙江", value: 20, coord: [121.19, 30.26] },
{ name: "四川", value: 4, coord: [105.06, 30.67] },
{ name: "陕西", value: 1, coord: [106.95, 34.27] },
{ name: "辽宁", value: 3, coord: [122.38, 41.8] }
]
img: Img1,
name: "中国"
},
{
name: "301调查",
data: [
{ name: "北京", value: 10, coord: [112.48, 38.95] },
{ name: "上海", value: 9, coord: [121.5, 33.25] },
{ name: "广东", value: 15, coord: [118.25, 21.18] },
{ name: "江苏", value: 30, coord: [115.8, 34.06] },
{ name: "浙江", value: 20, coord: [124.21, 31.28] },
{ name: "四川", value: 4, coord: [114.08, 32.69] },
{ name: "陕西", value: 1, coord: [109.97, 30.29] },
{ name: "辽宁", value: 3, coord: [113.4, 40.82] }
]
img: Img2,
name: "俄罗斯"
},
{
name: "232调查",
data: [
{ name: "北京", value: 10, coord: [116.44, 39.9] },
{ name: "上海", value: 9, coord: [121.46, 31.2] },
{ name: "广东", value: 15, coord: [113.21, 23.14] },
{ name: "江苏", value: 30, coord: [118.76, 32.02] },
{ name: "浙江", value: 20, coord: [120.19, 30.24] },
{ name: "四川", value: 4, coord: [104.04, 30.67] },
{ name: "陕西", value: 1, coord: [108.95, 34.25] },
{ name: "辽宁", value: 3, coord: [123.36, 41.8] }
]
img: Img3,
name: "巴西"
},
{
img: Img4,
name: "巴基斯坦"
},
{
img: Img5,
name: "印度"
},
{
img: Img6,
name: "日本"
},
{
img: Img7,
name: "德国"
}
]);
],
data: [23, 24, 14, 13, 12, 7, 5]
});
const box7Chart2Data = ref([]);
const handleGetBox7Data2 = async () => {
const params = {
years: box7SelectedYear.value
};
try {
const res = await getCompanyPlace(params);
console.log("企业地域分布", res);
if (res.code === 200 && res.data) {
box7Chart2Data.value = res.data
.filter(item => {
return item.ORGPROVINCE;
})
.map(item => {
return {
name: item.ORGPROVINCE,
value: item.PROVINCECOUNT
};
});
let box7Chart2 = getBarChart(box7Chart2Data.value);
setChart(box7Chart2, "box7Chart2");
} else {
box7Chart2Data.value = [];
const handleGetBox7Data = async () => {};
// const box7Chart1Data = ref([
// {
// name: "337调查",
// data: [
// { name: "北京", value: 10, coord: [115.46, 39.92] },
// { name: "上海", value: 9, coord: [120.48, 31.22] },
// { name: "广东", value: 15, coord: [114.23, 23.16] },
// { name: "江苏", value: 30, coord: [117.78, 32.04] },
// { name: "浙江", value: 20, coord: [121.19, 30.26] },
// { name: "四川", value: 4, coord: [105.06, 30.67] },
// { name: "陕西", value: 1, coord: [106.95, 34.27] },
// { name: "辽宁", value: 3, coord: [122.38, 41.8] }
// ]
// },
// {
// name: "301调查",
// data: [
// { name: "北京", value: 10, coord: [112.48, 38.95] },
// { name: "上海", value: 9, coord: [121.5, 33.25] },
// { name: "广东", value: 15, coord: [118.25, 21.18] },
// { name: "江苏", value: 30, coord: [115.8, 34.06] },
// { name: "浙江", value: 20, coord: [124.21, 31.28] },
// { name: "四川", value: 4, coord: [114.08, 32.69] },
// { name: "陕西", value: 1, coord: [109.97, 30.29] },
// { name: "辽宁", value: 3, coord: [113.4, 40.82] }
// ]
// },
// {
// name: "232调查",
// data: [
// { name: "北京", value: 10, coord: [116.44, 39.9] },
// { name: "上海", value: 9, coord: [121.46, 31.2] },
// { name: "广东", value: 15, coord: [113.21, 23.14] },
// { name: "江苏", value: 30, coord: [118.76, 32.02] },
// { name: "浙江", value: 20, coord: [120.19, 30.24] },
// { name: "四川", value: 4, coord: [104.04, 30.67] },
// { name: "陕西", value: 1, coord: [108.95, 34.25] },
// { name: "辽宁", value: 3, coord: [123.36, 41.8] }
// ]
// }
// ]);
// const box7Chart2Data = ref([]);
// const handleGetBox7Data2 = async () => {
// const params = {
// years: box7SelectedYear.value
// };
// try {
// const res = await getCompanyPlace(params);
// console.log("企业地域分布", res);
// if (res.code === 200 && res.data) {
// box7Chart2Data.value = res.data
// .filter(item => {
// return item.ORGPROVINCE;
// })
// .map(item => {
// return {
// name: item.ORGPROVINCE,
// value: item.PROVINCECOUNT
// };
// });
// let box7Chart2 = getBarChart(box7Chart2Data.value);
// setChart(box7Chart2, "box7Chart2");
// } else {
// box7Chart2Data.value = [];
// }
// } catch (error) {}
// };
// handleGetBox7Data2();
const box8SurveyList = ref([
{
label: "337调查",
value: "337调查"
},
{
label: "301调查",
value: "301调查"
},
{
label: "232调查",
value: "232调查"
}
} catch (error) {}
};
]);
handleGetBox7Data2();
const box8SelectedSurvey = ref("337调查");
// 制裁领域分布企业分布
// 调查结果分布
const box8Data = ref([
// {
// logo: Logo1,
// name: "华为技术有限公司",
// data337: 12,
// data301: 2,
// data232: 1
// },
// {
// logo: Logo2,
// name: "大疆创新科技有限公司",
// data337: 7,
// data301: 1,
// data232: null
// },
// {
// logo: Logo3,
// name: "TCL科技集团股份有限公司",
// data337: 6,
// data301: 1,
// data232: null
// },
// {
// logo: Logo4,
// name: "中兴通讯股份有限公司",
// data337: 6,
// data301: null,
// data232: null
// },
// {
// logo: Logo5,
// name: "联想集团",
// data337: 6,
// data301: null,
// data232: null
// }
{
name: "和解/同意令",
value: 50
},
{
name: "裁定不侵权",
value: 46
},
{
name: "裁定侵权",
value: 40
},
{
name: "申诉方撤诉",
value: 31
},
{
name: "其他",
value: 24
}
]);
const handleGetBox8Data = async () => {
try {
const res = await getStatAreaCompanyList();
console.log("制裁领域分布-企业分布", res);
if (res.code === 200 && res.data) {
const arr = res.data.map(item => {
return item.ORGNAME;
});
const nameArr = [...new Set(arr)];
console.log("nameArr", nameArr);
box8Data.value = Array.from({ length: nameArr.length }, () => ({
name: "",
data337: null,
data232: null,
data301: null,
logo: null
}));
nameArr.forEach((item, index) => {
box8Data.value[index].name = item;
box8Data.value[index].data337 = null;
box8Data.value[index].data301 = null;
box8Data.value[index].data232 = null;
box8Data.value[index].logo = null;
});
box8Data.value.forEach(item => {
res.data.forEach(val => {
if (val.ORGNAME === item.name && val.SORTCODE === "337") {
item.data337 = val.ORGCOUNT;
}
if (val.ORGNAME === item.name && val.SORTCODE === "232") {
item.data232 = val.ORGCOUNT;
}
if (val.ORGNAME === item.name && val.SORTCODE === "302") {
item.data301 = val.ORGCOUNT;
}
});
});
console.log("box8Data", box8Data.value);
}
const box8Chart = getPieChart(box8Data.value);
setChart(box8Chart, "box8Chart");
} catch (error) {
console.error(error);
}
};
const handleChangeBox8Survey = () => {
handleGetBox8Data();
};
// 资源库
const pageSize = ref(10);
const currentPage = ref(1);
......@@ -1353,7 +1409,27 @@ const handleChangeCheckedAreas = () => {
};
const surveyInfoList = ref([
{
time: "2025 11月12日",
survey: "337",
title: "外国制造的半导体器件及其下游产品和组件",
content:
"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
status: "部分终裁",
areaList: ["集成电路"],
countryList: ["a", "b"]
},
{
time: "202511月12日",
survey: "337",
title: "外国制造的半导体器件及其下游产品和组件",
content:
"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
status: "部分终裁",
areaList: ["集成电路"]
}
]);
const handleGetSurveyList = async () => {
const params = {
currentPage: currentPage.value - 1,
......@@ -1377,7 +1453,7 @@ const handleGetSurveyList = async () => {
} catch (error) {}
};
const handleClickToSurveyDetail = (id) => {
const handleClickToSurveyDetail = id => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
......@@ -1416,11 +1492,13 @@ onMounted(async () => {
handleBox6();
handleGetBox8Data();
let box7Chart1 = getMapChart(box7Chart1Data.value);
setChart(box7Chart1, "box7Chart1");
// let box7Chart1 = getMapChart(box7Chart1Data.value);
// setChart(box7Chart1, "box7Chart1");
const box7Chart = getBarChart(box7Data.value.title, box7Data.value.data);
setChart(box7Chart, "box7Chart");
await handleGetAreaList();
handleGetSurveyList();
// handleGetSurveyList();
});
</script>
......@@ -2679,23 +2757,17 @@ onMounted(async () => {
}
.box7-main {
height: 412px;
display: flex;
.box7-main-left {
width: 640px;
}
.box7-main-right {
width: 424px;
.box7-main-right-top {
height: 50px;
margin-right: 30px;
.box7-main-top {
height: 40px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.box7-main-right-main {
height: 340px;
margin-right: 22px;
box-sizing: border-box;
padding-top: 12px;
gap: 12px;
}
.box7-main-main {
height: 372px;
}
}
}
......@@ -2767,138 +2839,7 @@ onMounted(async () => {
}
}
.box8-main {
width: 469px;
height: 360px;
margin: 20px auto;
.box8-main-header {
height: 60px;
display: flex;
// border-top: 1px solid rgba(230, 231, 232, 1);
border-bottom: 1px solid rgba(230, 231, 232, 1);
.header-1 {
width: 250px;
height: 60px;
line-height: 60px;
box-sizing: border-box;
padding-left: 49px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.header-2 {
width: 64px;
display: flex;
justify-content: center;
align-items: center;
.inner-item {
width: 48px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
line-height: 24px;
text-align: center;
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.header-3 {
width: 64px;
display: flex;
justify-content: center;
align-items: center;
.inner-item {
width: 48px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(255, 213, 145, 1);
border-radius: 4px;
background: rgba(255, 247, 230, 1);
line-height: 24px;
text-align: center;
color: rgba(250, 140, 22, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.header-4 {
width: 64px;
display: flex;
justify-content: center;
align-items: center;
.inner-item {
width: 48px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(211, 173, 247, 1);
border-radius: 4px;
background: rgba(249, 240, 255, 1);
line-height: 24px;
text-align: center;
color: rgba(114, 46, 209, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
.box8-main-content {
height: 300px;
overflow: hidden;
overflow-y: auto;
.box8-main-item {
display: flex;
height: 60px;
align-items: center;
.item-1 {
width: 250px;
display: flex;
.icon {
width: 24px;
height: 24px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 200px;
margin-left: 13px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.item-num {
width: 64px;
line-height: 64px;
text-align: center;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box8-main-item:nth-child(2n-1) {
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
}
}
}
}
......@@ -3067,168 +3008,198 @@ onMounted(async () => {
}
.right {
margin-left: 16px;
width: 1284px;
width: 1224px;
min-height: 700px;
// height: 899px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
overflow: hidden;
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
height: 48px;
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 22px;
height: 18px;
margin-left: 19px;
img {
width: 100%;
height: 100%;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
.title {
height: 26px;
margin-left: 19px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
}
.right-main {
padding-top: 6px;
min-height: 586px;
max-height: 1540px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
// height: 780px;
.item {
height: 154px;
display: flex;
padding: 16px 0;
cursor: pointer;
&:hover{
&:hover {
background: var(--color-bg-hover) !important;
}
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
.item-left {
width: 100px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
padding-right: 20px;
}
.item-center {
width: 30px;
height: 154px;
.icon {
width: 30px;
height: 30px;
border-radius: 15px;
background: orange;
}
.line {
margin-left: 14px;
width: 2px;
height: 124px;
border-radius: 1.5px;
background: rgba(234, 236, 238, 1);
}
}
.item-box1 {
width: 500px;
.item-right {
padding-left: 20px;
.item-right-header {
height: 26px;
display: flex;
.name {
height: 22px;
align-items: center;
.tag {
width: 48px;
height: 24px;
padding: 0 8px;
box-sizing: border-box;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: var(--color-main-active);
.tag1 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(5, 95, 194, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
.tag2 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag3 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.title {
margin-left: 12px;
margin-left: 9px;
width: 880px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 24px;
display: flex;
align-items: center;
}
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
.status {
margin-left: 9px;
display: flex;
width: 76px;
height: 24px;
justify-content: space-between;
align-items: center;
.status-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--color-main-active);
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
.status-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
letter-spacing: 0px;
text-align: right;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
}
}
.item-right-content {
margin-top: 9px;
width: 1022px;
height: 60px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
.item-right-footer {
margin-top: 9px;
display: flex;
gap: 8px;
.area-box {
display: flex;
.area {
height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.flag-box {
display: flex;
align-items: center;
.flag {
width: 24px;
height: 24px;
border-radius: 12px;
background: orange;
}
}
}
}
}
}
......
src/views/marketAccessRestrictions/marketAccessHome/utils/barChart1.js 0 → 100644
浏览文件 @ 93476144
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '8%',
right: '6%',
bottom: '6%',
left: '6%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
xAxis: {
type: 'category',
data: nameList.map(item => {
return item.name
}),
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: 'top',
textStyle: {
color: 'rgba(5, 95, 194, 1)',
fontSize: 16,
fontWeight: 700,
fontFamily: 'Microsoft YaHei'
},
formatter: function (params) {
return params.value
}
},
barWidth: 20,
markPoint: {
symbol: 'circle',
symbolSize: 0,
data: (function () {
const data = [];
nameList.forEach((item, index) => {
data.push({
name: 'icon',
// value: '',
xAxis: index,
yAxis: valueList[index],
symbol: `image://${item.img}`,
symbolSize: [20, 20],
symbolOffset: [0, 10]
});
});
return data;
})()
},
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(5, 95, 194, 0)'
},
{
offset: 1,
color: 'rgba(5, 95, 194, 1)'
}
]);
},
barBorderRadius: [10, 10, 4, 4],
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/utils/multiLineChart.js
浏览文件 @ 93476144
......@@ -40,7 +40,7 @@ const getMultiLineChart = (data) => {
],
series: [
{
name: data.data[0].name,
name: data.data[0]?.name,
type: 'line',
areaStyle: {
......@@ -55,10 +55,10 @@ const getMultiLineChart = (data) => {
emphasis: {
focus: 'series'
},
data: data.data[0].value
data: data.data[0]?.value
},
{
name: data.data[1].name,
name: data.data[1]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
......@@ -72,10 +72,10 @@ const getMultiLineChart = (data) => {
emphasis: {
focus: 'series'
},
data: data.data[1].value,
data: data.data[1]?.value,
},
{
name: data.data[2].name,
name: data.data[2]?.name,
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
......@@ -89,7 +89,7 @@ const getMultiLineChart = (data) => {
emphasis: {
focus: 'series'
},
data: data.data[2].value,
data: data.data[2]?.value,
}
]
}
......
src/views/marketAccessRestrictions/marketAccessHome/utils/piechart.js
浏览文件 @ 93476144
const getPieChart = (data,colorList) => {
const getPieChart = (data) => {
let option = {
color: colorList,
// color: colorList,
series: [
{
type: 'pie',
radius: [70, 100],
radius: [90, 115],
height: '100%',
left: 'center',
width: '100%',
......@@ -17,11 +17,18 @@ const getPieChart = (data,colorList) => {
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
lineHeight: 25,
rich: {
name: {
color: 'rgba(59, 65, 75, 1)',
fontFamily: 'Microsoft YaHei',
fontSize: 16,
fontWeight: 'bold',
},
time: {
fontSize: 10,
color: '#999'
fontSize: 16,
fontFamily: 'Microsoft YaHei',
color: '#rgba(95, 101, 108, 1)'
}
}
},
......
src/views/marketAccessRestrictions/marketAccessLayout/case/301/index.vue 0 → 100644
浏览文件 @ 93476144
<template>
<div class="case-wrapper">
<div class="wrapper-header">
<div class="search-box">
<el-input
v-model="searchText"
style="width: 300px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<template #append
><el-button @click="handleSearch"
><el-icon><Search color="#84888E" /></el-icon></el-button
></template>
</el-input>
</div>
<div class="select-box">
<div class="paixu-btn" @click="handleSwithSort">
<div class="icon1">
<img v-if="isSort" src="@/assets/icons/shengxu1.png" alt="" />
<img v-else src="@/assets/icons/jiangxu1.png" alt="" />
</div>
<div class="text">{{ "发布时间" }}</div>
<div class="icon2">
<img v-if="isSort" src="@/assets/icons/shengxu2.png" alt="" />
<img v-else src="@/assets/icons/jiangxu2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="wrapper-main">
<div class="left">
<div class="left-box1">
<div class="left-box1-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="left-box1-main">
<div class="checkbox-group">
<el-checkbox
v-for="year in surveyYearList"
:key="year.id"
v-model="checkedSurveyYears"
:label="year.id"
class="filter-checkbox"
@change="handleChangeCheckedSurveyYears"
>
{{ year.name }}
</el-checkbox>
</div>
</div>
</div>
<div class="left-box2">
<div class="left-box2-header">
<div class="icon"></div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="left-box2-main">
<div class="checkbox-group">
<el-checkbox
v-for="area in surveyAreaList"
:key="area.id"
v-model="checkedAreaList"
:label="area.id"
class="filter-checkbox"
@change="handleChangeCheckedAreas"
>
{{ area.name }}
</el-checkbox>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="icon">
<img src="./assets/images/right-header-icon.png" alt="" />
</div>
<div class="title">{{ "301调查历程" }}</div>
</div>
<div class="right-main">
<div class="item" v-for="(item, index) in surveyInfoList" :key="index" @click="handleToSingleCase(item)">
<div class="item-left">{{ "2025年11月12日" }}</div>
<div class="item-center">
<div class="icon">
<!-- <img :src="item.img" alt="" /> -->
</div>
<div class="line" v-if="index !== surveyInfoList.length - 1"></div>
</div>
<div class="item-right">
<div class="item-right-header">
<div class="tag tag1">{{ "337" }}</div>
<div class="title">{{ item.title }}</div>
<div class="status">
<div class="status-icon"></div>
<div class="status-text">{{ item.status }}</div>
</div>
</div>
<div class="item-right-content">
{{ item.content }}
</div>
<div class="item-right-footer">
<div class="area-box" v-for="(val, idx) in item.areaList" :key="idx">
<div class="area">{{ val }}</div>
</div>
<div class="flag-box">
<div class="flag" v-for="(vall, idxx) in item.countryList" :key="idxx">
<!-- <img src="" alt="" /> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ `共${totalDiscussNum}项调查` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="totalDiscussNum"
/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
const isSort = ref(true); // true 升序 false 倒序
const handleSwithSort = () => {
isSort.value = !isSort.value;
};
const allYear = {
name: "全部时间",
selected: true
};
const surveyYearList = ref([
{
name: "2025年",
id: "2025"
},
{
name: "2024年",
id: "2024"
},
{
name: "2023年",
id: "2023"
},
{
name: "2022年",
id: "2022"
},
{
name: "2021年",
id: "2021"
}
]);
const checkedSurveyYears = ref(["2025"]);
const surveyAreaList = ref([
{
name: "人工智能",
id: "人工智能"
},
{
name: "半导体/芯片",
id: "半导体/芯片"
},
{
name: "电子设备",
id: "电子设备"
},
{
name: "显示技术",
id: "显示技术"
}
]);
const checkedAreaList = ref(['人工智能'])
const surveyInfoList = ref([
{
time: "2025 11月12日",
survey: "337",
title: "外国制造的半导体器件及其下游产品和组件",
content:
"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
status: "部分终裁",
areaList: ["集成电路"],
countryList: ["a", "b"]
},
{
time: "202511月12日",
survey: "337",
title: "外国制造的半导体器件及其下游产品和组件",
content:
"美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain Semiconductor Devices, Computing Products Containing the Same,and Components Thereof）启动337调查。",
status: "部分终裁",
areaList: ["集成电路"]
}
]);
const totalDiscussNum = ref(0);
const curSurveyInfoList = ref([]);
const searchText = ref("");
const handleSearch = () => {
curSurveyInfoList.value = surveyInfoList.value.filter(item => {
return item.title.indexOf(searchText.value) > -1;
});
};
watch(
() => surveyYearList.value,
val => {
const selectedArr = val
.filter(item => {
return item.selected;
})
.map(item => item.name);
let arr = [];
selectedArr.forEach(item => {
let arr1 = surveyInfoList.value.filter(vall => {
return vall.releaseDate.indexOf(item) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true
}
);
watch(
() => surveyAreaList.value,
val => {
const selectedArr = val
.filter(item => {
return item.selected;
})
.map(item => item.name);
let arr = [];
selectedArr.forEach(item => {
let arr1 = surveyInfoList.value.filter(vall => {
return vall.area.indexOf(item) > -1 || item.indexOf(vall.area) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true
}
);
const handleToSingleCase = item => {
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id
}
});
window.open(curRoute.href, "_blank");
};
onMounted(() => {
curSurveyInfoList.value = surveyInfoList.value;
});
</script>
<style lang="scss" scoped>
.case-wrapper {
width: 100%;
height: 100%;
overflow-y: auto;
.wrapper-header {
width: 1600px;
height: 32px;
margin: 16px auto;
display: flex;
justify-content: space-between;
.search-box {
width: 300px;
display: flex;
}
.select-box {
height: 32px;
box-sizing: border-box;
.paixu-btn {
display: flex;
width: 120px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
&:hover {
background: var(--color-bg-hover);
}
cursor: pointer;
.icon1 {
width: 11px;
height: 14px;
margin-top: 10px;
margin-left: 9px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
margin-top: 7px;
margin-left: 9px;
}
.icon2 {
width: 10px;
height: 5px;
margin-top: 5px;
margin-left: 13px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.wrapper-main {
width: 1600px;
// height: 935px;
height: 800px;
margin: 0 auto;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.left {
width: 360px;
height: 560px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
// height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
// margin-top: 10px;
}
}
.left-box2 {
margin-top: 17px;
// height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
// margin-top: 10px;
}
}
}
.right {
margin-left: 16px;
width: 1224px;
min-height: 700px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
overflow: hidden;
.right-header {
height: 48px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 22px;
height: 18px;
margin-left: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
height: 26px;
margin-left: 19px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
}
.right-main {
padding-top: 6px;
min-height: 586px;
max-height: 1540px;
border-bottom: 1px solid rgba(230, 231, 232, 1);
// height: 780px;
.item {
height: 154px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover) !important;
}
.item-left {
width: 100px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
padding-right: 16px;
}
.item-center {
width: 30px;
height: 154px;
.icon {
width: 30px;
height: 30px;
border-radius: 15px;
background: orange;
}
.line {
margin-left: 14px;
width: 2px;
height: 124px;
border-radius: 1.5px;
background: rgba(234, 236, 238, 1);
}
}
.item-right {
padding-left: 20px;
.item-right-header {
height: 26px;
display: flex;
align-items: center;
.tag {
width: 48px;
height: 24px;
padding: 0 8px;
box-sizing: border-box;
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
border-radius: 4px;
}
.tag1 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(5, 95, 194, 1);
}
.tag2 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag3 {
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
color: rgba(114, 46, 209, 1);
}
.title {
margin-left: 9px;
width: 880px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.status {
margin-left: 9px;
display: flex;
width: 76px;
height: 24px;
justify-content: space-between;
align-items: center;
.status-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: var(--color-main-active);
}
.status-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: right;
}
}
}
.item-right-content {
margin-top: 9px;
width: 1022px;
height: 60px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.item-right-footer {
margin-top: 9px;
display: flex;
gap: 8px;
.area-box {
display: flex;
.area {
height: 24px;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
.flag-box {
display: flex;
.flag {
width: 24px;
height: 24px;
border-radius: 12px;
background: orange;
}
}
}
}
}
}
.right-footer {
box-sizing: border-box;
padding-top: 15px;
height: 60px;
display: flex;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
.checkbox-group{
padding-top: 10px;
margin-left: 16px;
}
.filter-checkbox {
width: 140px;
// background: orange;
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/case/index.vue
浏览文件 @ 93476144
<template>
<div class="case-wrapper">
<div class="wrapper-header">
<div class="search-box">
<el-input
v-model="searchText"
style="width: 300px; height: 32px"
placeholder="搜索调查案件"
@keyup.enter="handleSearch"
>
<template #append
><el-button @click="handleSearch"
><el-icon><Search color="#84888E" /></el-icon></el-button
></template>
</el-input>
</div>
<div class="select-box">
<el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="wrapper-main">
<div class="left">
<div class="left-box1">
<div class="left-box1-header">
<div class="icon"></div>
<div class="title">{{ "发布时间" }}</div>
</div>
<div class="left-box1-main">
<div class="time-label">
<el-checkbox
v-model="allYear.selected"
:label="allYear.name"
size="large"
/>
</div>
<div
class="time-label"
v-for="(item, index) in surveyYearList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
<div class="left-box2">
<div class="left-box2-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div>
<div class="left-box2-main">
<div
class="area-label"
v-for="(item, index) in surveyAreaList"
:key="index"
>
<el-checkbox
v-model="item.selected"
:label="item.name"
size="large"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="right-header">
<div class="header-item1">{{ "调查名称" }}</div>
<div class="header-item2">{{ "调查案号" }}</div>
<div class="header-item3">{{ "涉及领域" }}</div>
<div class="header-item4">{{ "案件状态" }}</div>
<div class="header-item5">{{ "发布日期" }}</div>
</div>
<div class="right-main">
<div
class="case-item"
v-for="(val, idx) in curSurveyInfoList"
:key="idx"
@click=handleToSingleCase(item)
>
<div class="item-box1">
<div
class="name"
:class="{
name1: val.name === '301',
name2: val.name === '337',
name3: val.name === '232',
}"
>
{{ val.name }}
</div>
<div class="title">{{ val.title }}</div>
</div>
<div class="item-box2">{{ val.num }}</div>
<div class="item-box3">{{ val.area }}</div>
<div class="item-box4">{{ val.status }}</div>
<div class="item-box5">{{ val.releaseDate }}</div>
</div>
</div>
<div class="right-footer">
<div class="footer-left">
{{ "共105项调查" }}
</div>
<div class="footer-right">
<el-pagination background layout="prev, pager, next" :total="105" />
</div>
</div>
</div>
</div>
<div class="case-wrap">
<Discussion1 v-if="showDiscussion ==='337'"></Discussion1>
<Discussion2 v-else-if="showDiscussion ==='232'"></Discussion2>
<Discussion3 v-else></Discussion3>
</div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import router from '@/router'
import { ref, onMounted, computed } from "vue";
// import Discussion1 from './337/index.vue'
// import Discussion2 from './232/index.vue'
import Discussion3 from './301/index.vue'
import { useRoute } from "vue-router";
const route = useRoute();
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
{
label: "近半年发布",
value: "近半年发布",
},
{
label: "近一年发布",
value: "近一年发布",
},
{
label: "近两年发布",
value: "近两年发布",
},
{
label: "近三年发布",
value: "近三年发布",
},
{
label: "近五年发布",
value: "近五年发布",
},
]);
const allYear = {
name: "全部时间",
selected: true,
};
const surveyYearList = ref([
{
name: "2025年",
selected: false,
},
{
name: "2024年",
selected: false,
},
{
name: "2023年",
selected: false,
},
{
name: "2022年",
selected: false,
},
{
name: "2021年",
selected: false,
},
]);
const surveyAreaList = ref([
{
name: "人工智能",
selected: false,
},
{
name: "半导体/芯片",
selected: false,
},
{
name: "电子设备",
selected: false,
},
{
name: "显示技术",
selected: false,
},
{
name: "新能源",
selected: false,
},
{
name: "通信设备",
selected: false,
},
]);
const surveyInfoList = ref([
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件",
num: "337-TA-1393",
area: "半导体",
status: "正在调查",
releaseDate: "2025年9月1日",
},
{
name: "337",
title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
num: "337-TA-1392",
area: "制造业",
status: "正在调查",
releaseDate: "2025年8月15日",
},
{
name: "301",
title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
num: "337-TA-1422和337-TA-1425(合并)",
area: "半导体",
status: "正在调查",
releaseDate: "2025年8月10日",
},
{
name: "337",
title: "某些光伏干线总线电缆组件及其组件",
num: "337-TA-1438",
area: "光伏",
status: "正在调查",
releaseDate: "2024年7月29日",
},
{
name: "337",
title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
num: "337-TA-1443",
area: "半导体",
status: "正在调查",
releaseDate: "2024年7月18日",
},
{
name: "301",
title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
num: "337-TA-1441",
area: "半导体",
status: "终止调查",
releaseDate: "2023年7月1日",
},
{
name: "337",
title: "某些包含相同功能的无线前端模块和设备",
num: "337-TA-1435",
area: "半导体",
status: "正在调查",
releaseDate: "2022年6月14日",
},
{
name: "337",
title:
"用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
num: "337-TA-1433",
area: "显示技术",
status: "正在调查",
releaseDate: "2022年6月5日",
},
// {
// name: "337",
// title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
// num: "337-TA-1422和337-TA-1425(合并)",
// area: "光伏",
// status: "终止调查",
// releaseDate: "2025年8月10日",
// },
// {
// name: "232",
// title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
// num: "337-TA-1392",
// area: "制造业",
// status: "终止调查",
// releaseDate: "2025年8月15日",
// },
]);
const curSurveyInfoList = ref([]);
const searchText = ref("");
const handleSearch = () => {
curSurveyInfoList.value = surveyInfoList.value.filter((item) => {
return item.title.indexOf(searchText.value) > -1;
});
};
const route = useRoute()
console.log('route',route.query.id)
watch(
() => surveyYearList.value,
(val) => {
const selectedArr = val
.filter((item) => {
return item.selected;
})
.map((item) => item.name);
let arr = [];
selectedArr.forEach((item) => {
let arr1 = surveyInfoList.value.filter((vall) => {
return vall.releaseDate.indexOf(item) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true,
}
);
watch(
() => surveyAreaList.value,
(val) => {
const selectedArr = val
.filter((item) => {
return item.selected;
})
.map((item) => item.name);
let arr = [];
selectedArr.forEach((item) => {
let arr1 = surveyInfoList.value.filter((vall) => {
return vall.area.indexOf(item) > -1 || item.indexOf(vall.area) > -1;
});
arr = [...arr, ...arr1];
});
curSurveyInfoList.value = arr;
},
{
deep: true,
}
);
const handleToSingleCase = (item) => {
// router.push('/marketSingleCaseLayout/overview')
const curRoute = router.resolve({
path: "/marketSingleCaseLayout/overview",
query: {
id: route.query.id
}
});
window.open(curRoute.href, "_blank");
}
const showDiscussion = ref('')
onMounted(() => {
curSurveyInfoList.value = surveyInfoList.value;
});
showDiscussion.value = route.query.id
})
</script>
<style lang="scss" scoped>
.case-wrapper {
.case-wrap {
width: 100%;
height: 100%;
overflow-y: auto;
.wrapper-header {
width: 1600px;
height: 32px;
margin: 16px auto;
display: flex;
justify-content: space-between;
.search-box {
width: 300px;
display: flex;
}
.select-box {
height: 32px;
box-sizing: border-box;
}
}
.wrapper-main {
width: 1600px;
// height: 935px;
height: 800px;
margin: 0 auto;
box-sizing: border-box;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: var(--color-main-active);
}
.title {
height: 2px;
margin-left: 17px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
}
}
}
}
.right {
margin-left: 16px;
width: 1284px;
// height: 896px;
height: 780px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
}
.right-main {
height: 680px;
overflow-y: auto;
.case-item {
display: flex;
padding: 16px 0;
cursor: pointer;
&:hover {
background: rgb(215, 215, 215, 0.5);
}
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
&:hover {
background: rgb(215, 215, 215, 0.5);
}
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: var(--color-main-active);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: flex;
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 93476144
......@@ -59,18 +59,19 @@ import { useRoute } from "vue-router";
const route = useRoute();
const btnList = ref([
{
name: "调查概况",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
{
name: "调查案件",
icon: icon2,
acitveIcon: icon2Active,
path: "/marketAccessLayout/case"
}
},
{
name: "数据统计",
icon: icon1,
acitveIcon: icon1Active,
path: "/marketAccessLayout/overview"
},
]);
const curSurvey = computed(() => {
......@@ -95,7 +96,7 @@ const curSurvey = computed(() => {
}
});
const activeBtnName = ref("调查概况");
const activeBtnName = ref("调查案件");
const handleClickBtn = item => {
activeBtnName.value = item.name;
......@@ -107,7 +108,13 @@ const handleClickBtn = item => {
});
};
onMounted(() => {});
onMounted(() => {
if(route.path === '/marketAccessLayout/overview') {
activeBtnName.value = '数据统计'
} else {
activeBtnName.value = '调查案件'
}
});
</script>
......
src/views/marketAccessRestrictions/marketAccessLayout/overview/301/utils/barChart.js
浏览文件 @ 93476144
......@@ -3,6 +3,18 @@ import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
title: {
text: '单位：万人',
left: 660,
top: 10,
textStyle: {
color: 'rgba(95, 101, 108, 1)',
fontSize: 14,
fontFamily: 'Microsoft YaHei',
fontstyle: 'Regular',
fontWeight: 'normal'
}
},
grid: {
top: '5%',
right: '3%',
......
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ 93476144
......@@ -16,6 +16,7 @@
class="nav-item"
:class="{ navItemActive: item.isActive }"
v-for="(item, index) in navList"
v-show="item.isShow"
:key="index"
@click="handleClickNav(index)"
>
......@@ -64,26 +65,29 @@ import { useRoute } from "vue-router";
const route = useRoute();
const navList = ref([
{
name: "调查简介",
name: "调查概况",
icon: NavIcon1,
activeIcon: NavIcon1Active,
isActive: true,
isShow: true,
path: "/marketSingleCaseLayout/overview"
},
{
name: route.query.id === "337" ? "深度挖掘" : "报告解析",
name: "报告解析",
icon: NavIcon2,
activeIcon: NavIcon2Active,
isActive: false,
isShow: route.query.id === '337',
path: "/marketSingleCaseLayout/deepdig"
},
{
name: "影响分析",
icon: NavIcon3,
activeIcon: NavIcon3Active,
isActive: false,
isShow: true,
path: "/marketSingleCaseLayout/deepdig"
}
// {
// name: "影响分析",
// icon: NavIcon3,
// activeIcon: NavIcon3Active,
// isActive: false,
// path: "/marketSingleCaseLayout/deepdig"
// }
]);
const handleClickNav = index => {
......
src/views/marketAccessRestrictions/singleCaseLayout/overview/301/index.vue
浏览文件 @ 93476144
......@@ -6,12 +6,6 @@
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
......@@ -70,105 +64,115 @@
{{ "2025年2月4日总统政令《确保美国海事及造船业在世界保持主导地位》 >" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查进展：" }}</div>
<div class="box1-item-right4">
<el-timeline style="max-width: 346px">
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
<template #dot>
<div class="custom-dot">
<img src="./assets/images/dot-icon.png" width="10" height="10" />
</div>
</template>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查公告</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
<div class="box2-item-left">
<img src="./assets/images/box2-icon.png" alt="" />
</div>
<div class="box2-item-right">
<div class="time">{{ item.time }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">调查脉络</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: box3BtnActive === item }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(item)"
>
{{ item }}
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in box2List" :key="index">
<div class="box2-main-item-header">
<div class="icon">
<img src="./assets/images/dot-icon.png" alt="" />
<div class="box3-main">
<div class="box3-main1" v-if="box3BtnActive === '事件脉络'">
<div class="box3-main1-item" v-for="(item, index) in box3Data1" :key="index">
<div class="left">
<div class="point">
<img src="./assets/images/dot-active-icon.png" alt="" />
</div>
<div class="line" v-if="index !== box3Data1.length - 1"></div>
</div>
<div class="right">
<div class="header">
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
<div class="warning" v-if="item.warning">
{{ item.warning }}
</div>
<div class="open">
<img src="./assets/images/open.png" alt="" />
<div class="content">{{ item.content }}</div>
</div>
</div>
<div class="box2-main-item-content">
<div class="box2-main-item-content-item" v-for="(val, idx) in item.data" :key="idx">
<div class="inner-header">{{ val.title + ":" }}</div>
<div class="inner-content" v-if="val.content">{{ val.content }}</div>
<div class="inner-list" v-if="val.dataList">
<div class="inner-list-item" v-for="(vall, idxx) in val.dataList" :key="idxx">
{{ idxx + 1 + "." }} <span style="font-weight: 700">{{ vall.content1 }}</span
>{{ vall.content2 }}
</div>
<div class="box3-main2" v-else>
<div class="box3-main2-item" v-for="(item, index) in box3Data2" :key="index">
<div class="box3-main2-item-header">
<div class="title">{{ item.title }}</div>
<div class="more">
<div class="icon">
<img src="./assets/images/open-active.png" alt="" />
</div>
<div class="text">
{{ "跳转原文" }}
</div>
</div>
</div>
<div class="box3-main2-item-content">
<div class="item" v-for="(val, idx) in item.data" :key="idx">
{{ idx+1 + "." + val.content }}
</div>
</div>
<div class="box3">
</div>
</div>
</div>
</div>
<div class="box4">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<div class="icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-item" v-for="(item, index) in relatedEvents" :key="index">
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in box4Data" :key="index">
<div class="item-left">
<img :src="item.img" alt="" />
<div class="item-left-tag" :class="{ tag1: item.tag.type === 1, tag2: item.tag.type === 2 }">
{{ item.tag.name }}
</div>
</div>
<div class="item-right">
<div class="item-right-header">
<div class="item-right-title">{{ item.title }}</div>
<div class="item-right-tag" :class="{ tag1: item.tag.type === 1, tag2: item.tag.type === 2 }">
{{ item.tag.name }}
<div class="item-right-time">
{{ item.time }}
</div>
</div>
<div class="item-right-time">{{ item.time }}</div>
<div class="item-right-content">{{ item.content }}</div>
</div>
</div>
......@@ -180,11 +184,6 @@
<script setup>
import { ref, onMounted } from "vue";
import Img1 from "./assets/images/img1.png";
import Img2 from "./assets/images/img2.png";
import Img3 from "./assets/images/img3.png";
import Img4 from "./assets/images/img4.png";
const surveyAreaList = ref([
{
name: "先进制造",
......@@ -196,125 +195,102 @@ const surveyAreaList = ref([
}
]);
const activities = ref([
{
content: "递交请愿书",
timestamp: "2025-02-18",
size: "large",
type: "primary"
},
const box2Data = ref([
{
content: "启动调查",
timestamp: "2025-03-21",
size: "large",
type: "primary"
time: "2025-02-20",
content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
},
{
content: "调查报告递交",
timestamp: "2025-08-14",
size: "large",
type: "primary"
time: "2025-02-20",
content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
},
{
content: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
timestamp: "2025-08-15",
size: "large",
type: "primary"
},
{
content: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
timestamp: "2025-09-08",
size: "large",
type: "primary"
time: "2025-02-20",
content: "美国贸易代表征求公众意见，针对中国针对海事、物流和造船业主导地位的调查第301条拟议行动"
}
]);
const box2List = ref([
const box3BtnList = ref(["事件脉络", "报复性措施"]);
const box3BtnActive = ref("事件脉络");
const handleClickBox3Btn = btn => {
box3BtnActive.value = btn;
};
const box3Data1 = ref([
{
time: "2024-03-12",
title: "递交请愿书",
time: "2025-02-18",
data: [
{
title: "节点概况",
content:
"2024年3月12日，请愿方提交了一份关于中国为主导海事、物流和造船领域而采取的行动、政策和实践的301条款请愿书。该请愿书是根据经修订的《1974年贸易法》（《贸易法》）（19 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
}
]
content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
},
{
title: "启动调查",
time: "2025-03-21",
data: [
time: "2024-03-12",
title: "递交请愿书",
content: ""
},
{
title: "节点概况",
time: "2024-03-12",
title: "递交请愿书",
content:
"根据《贸易法》第302(a)(2)条，美国贸易代表审查了请愿书中的指控，并在收到301委员会的建议后，决定就请愿书中提出的问题启动调查。根据《贸易法》第303(a)条，USTR请求与中国政府进行磋商。请愿者要求举行公开听证会。根据第302(a)(4)条，并经请愿者同意，301委员会将于2024年5月29日就此事举行公开听证会。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
}
]
"2024年4月17日，在与相关咨询委员会和第301条委员会协商后，美国贸易代表启动了对中国在海事、物流和造船行业中追求主导地位的行为、政策和做法的调查。"
},
{
title: "调查报告递交",
time: "2025-08-14"
time: "2024-03-12",
title: "递交请愿书",
content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
},
{
title: "根据第301条作出的决定通知：中国针对海事、物流和造船业谋求主导地位",
time: "2025-08-15",
warning: "决定通知",
data: [
time: "2024-03-12",
title: "递交请愿书",
content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
},
{
title: "节点概况",
content:
"美国贸易代表已裁定，中国针对海事、物流和造船业谋求主导地位的行为根据第301条是可诉的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
time: "2024-03-12",
title: "递交请愿书",
content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
},
{
title: "行动裁定",
content:
"中国针对海事、物流和造船业谋求主导地位是不合理的，并且加重或限制了美国商业，因此根据《贸易法》第301(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
time: "2024-03-12",
title: "递交请愿书",
content: "2024年3月12日，请愿人提交了一份关于中国在海事、物流和造船领域主导行为、政策和做法的301条请愿书。"
}
]
},
]);
const box3Data2 = ref([
{
title: "关于中国针对海事、物流和造船业谋求主导地位的第301条调查的拟议行动",
time: "2025-09-08",
warning: "征求评论意见和公共听证会通知",
title: "（一）海运服务费用",
data: [
{
title: "节点概况",
content:
"USTR就针对中国主导海事、物流和造船业的第301条调查可能采取的贸易行动征求书面评论。USTR还将就此拟议行动召开公共听证会并接受反驳评论。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
content: `对中国船舶运营商和船舶所有者分阶段征收费用。该费用根据船舶的净吨位计算，适用于任何由中国运营商运营或由中国实体拥有的船舶，如附录 I 所示。如果一艘船舶在前往外国目的地之前多次进入美国港口，则该费用按每次轮次或美国港口航行序列征收。费用在前180天为零，随后设定为每净吨50美元，并在接下来的三年内逐步增加。`
},
{
title: "拟议行动",
dataList: [
{
content1: "对中国海运运营商的服务费。",
content2:
"向中国船舶运营商收取其提供的国际海运服务费，费率可达 (a) 该运营商任何船舶每次进入美国港口最高1,000,000美元；或 (b) 按该船舶净吨位容量，每次进入美国港口最高每净吨1,000美元。(b)条是可采取行动的。 U.S.C. 2412(a)）第302(a)条提交的，要求根据《贸易法》第301(b)条（19 U.S.C. 2411(b)）采取行动。"
content: `分阶段对中国建造船舶收取费用。此费用以以下两者中的较高者为基准：(i) 基于船舶净吨位的费用，或 (ii) 基于每个集装箱的费用。如果一艘船在前往外国目的地之前多次进入美国港口，该费用按每次航行轮次或美国港口访问串次收取。费用在前180天设定为0美元，随后在接下来的三年内按附录二所述逐步增加。某些中国建造的船舶不适用此费用，包括：注册于某些美国海事管理局计划（例如海上安全计划和油轮安全计划）的船舶；空载或吃水浅位到港的船舶；低于某些规模或载重阈值的船舶；从事近海运输（即从某些美国港口出发航程少于2,000海里的航程）的船舶；某些美国所有公司拥有的船舶；以及某些专用出口船舶。如果船舶运营商订购并接收等同规模的美国建造船舶，其有资格获得最长三年的费用减免。`
},
{
content1: "对中国建造的船舶分阶段收费。",
content2:
"此费用取以下两者中的较高者：(i) 基于船舶净吨位的费用，或 (ii) 基于每个集装箱的费用。如果一艘船在前往外国目的地之前进行多次美国入境，此费用将按每个轮班或美国港口航线的串次收取。费用在前180天设定为0美元，并在接下来的三年内逐步增加，如附录二所述。某些中国建造的船舶免于缴纳此费用，包括：注册在某些美国海事管理局计划（例如海事安全计划和油轮安全计划）中的特定船舶；空船或压载船舶；低于特定尺寸或载重阈值的船舶；从事近海航运的船舶（即从某些美国港口出发航程少于2000海里的航次）；某些美国公司拥有的船舶；以及某些专用出口船舶。如果船舶运营商订购并接收同等尺寸的美国建造船舶，其有资格获得最长三年的费用减免。"
content: `对外国车辆运输船船舶运营商分阶段收取费用。根据附件三规定，该费用根据任何外国建造的车辆运输船的车等效单位（CEU）容量进行评估。费用在前180天设定为0美元，随后按进入的非美国建造船舶的CEU容量每单位收取150美元。如果运营商在此期间订购并接收等同或更大容量的美国建造船舶，其费用可以获得最多三年的减免。如果船舶运营商订购并接收至少同等尺寸的美国建造船舶，则有资格获得三年的费用减免。`
}
]
},
{
content1: "对外国车辆运输船船舶运营商分阶段收费。",
content2:
"此费用根据附录 III 规定的车辆同等单位（CEU）容量，对任何外国建造的车辆运输船征收。费用在前 180 天设定为 0 美元，此后将按进入的非美国建造船舶的每 CEU 容量设定为 150 美元。如果运营商在此期间订购并交付同等或更大容量的美国建造船舶，可获得最长三年的费用减免。如果船舶运营商订购并交付至少同等规模的美国建造船舶，将有资格获得三年的费用减免。"
},
title: "（二）关于促进美国货物在美国船舶上运输的服务限制",
data: [
{
content1: "对某些海上运输的限制。",
content2:
"三年后，根据附件 IV 的规定，美国贸易代表署将实施一项限制，要求在海运运输一定比例的液化天然气出口时使用美国船只。"
content: `对某些海上运输的限制。三年后，USTR 将实施限制，要求在海上运输一定比例的 LNG 出口时使用美国船舶，如附录 IV 所述。运营商或其不符合要求的 LNG 船舶可以在三年内获准运营，仿佛已满足该要求，前提是该运营商在此期间订购并接收一艘同等或更大容量的美国建造 LNG 船舶。USTR 将根据需要与美国能源部及其他机构协商，以提供有关该限制的通知和进一步的技术信息。`
}
]
},
{
title: "（三）总统在第14269号行政命令《恢复美国海上主导地位》中指示的行动",
data: [
{
content: `根据总统在第14269号行政命令《恢复美国海上主导地位》中提出的指示，美国贸易代表正在提议对STS起重机征收额外关税，这一做法与行政命令中的描述一致，同时还对来自中国的集装箱和某些底盘征收关税，这符合第14269号行政命令关于其他中国货物处理设备的指示，涵盖税则编号和子目8609.00.00、8716.39.0090、8716.90.30和8716.90.50。`
}
]
}
]);
const relatedEvents = ref([
const box4Data = ref([
{
img: Img1,
title: "美国商务部工业与安全局发布实体清单，涉及多家中国半导体企业",
time: "2025年9月12日",
content:
......@@ -325,7 +301,6 @@ const relatedEvents = ref([
}
},
{
img: Img2,
title: "美国白宫发布总统政令，提出将发展美国人工智能产业硬件支持放在新任期的科技首要地位",
time: "2025年9月11日",
content:
......@@ -336,7 +311,6 @@ const relatedEvents = ref([
}
},
{
img: Img3,
title: "美国财政部外国资产控制办公室指控中国企业及船只",
time: "2025年3月13日",
content:
......@@ -347,7 +321,6 @@ const relatedEvents = ref([
}
},
{
img: Img4,
title: "美国国会通过《芯片科学》法案",
time: "2025年1月3日",
content:
......@@ -387,57 +360,35 @@ const relatedEvents = ref([
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
.btn-box {
position: absolute;
top: 14px;
right: 52px;
top: 17px;
left: 36px;
display: flex;
gap: 20px;
height: 26px;
.btn {
margin-left: 8px;
height: 28px;
height: 26px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
text-align: center;
line-height: 28px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Regular;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
cursor: pointer;
}
.btnActive {
border: 1px solid var(--color-main-active);
background: rgba(246, 250, 255, 1);
color: var(--color-main-active);
}
}
.header-info {
height: 22px;
position: absolute;
right: 84px;
top: 17px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 3px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
border: 1px solid var(--color-main-active);
font-weight: bold;
background: rgba(231, 243, 255, 1);
}
}
.header-right {
......@@ -462,8 +413,8 @@ const relatedEvents = ref([
.box1 {
margin-top: 16px;
width: 520px;
// height: 837px;
border-radius: 4px;
height: 561px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
......@@ -554,179 +505,227 @@ const relatedEvents = ref([
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
width: 520px;
height: 815px;
margin-top: 16px;
width: 1064px;
// height: 410px;
border-radius: 4px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
width: 1024px;
margin: 10px 20px;
.box2-main-item {
.box2-main-item-header {
// height: 51px;
padding: 10px 24px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
height: 749px;
border-top: 1px solid rgba(234, 236, 238, 1);
.box2-item {
width: 483px;
height: 108px;
margin: 0 auto;
display: flex;
gap: 16px;
position: relative;
.icon {
margin-top: 8px;
width: 10px;
height: 10px;
padding: 12px 8px 8px 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.box2-item-left {
margin-top: 4px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.box2-item-right {
.time {
margin-top: 4px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-style: Bold;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.content {
width: 435px;
height: 60px;
margin-top: 4px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
}
.title {
width: 535px;
margin-top: 4px;
// height: 24px;
color: rgba(59, 65, 75, 1);
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 1064px;
// height: 410px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 8px;
margin: 10px 0;
border-top: 1px solid rgba(234, 236, 238, 1);
padding: 15px 20px;
.box3-main1 {
.box3-main1-item {
// height: 140px;
display: flex;
.left {
width: 10px;
.point {
width: 10px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
.line {
width: 2px;
height: 100%;
margin-left: 4px;
background: #e6e7e8;
}
}
.right {
margin-left: 17px;
.header {
height: 24px;
display: flex;
gap: 16px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.warning {
position: absolute;
height: 28px;
border-radius: 20px;
background: rgba(206, 79, 81, 0.1);
line-height: 28px;
top: 12px;
right: 56px;
color: rgba(206, 79, 81, 1);
.content {
border-top: 1px solid #eaecee;
margin-top: 10px;
margin-bottom: 36px;
padding: 10px 0;
width: 971px;
max-height: 60px;
min-height: 0;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
padding: 0 8px;
}
.open {
position: absolute;
right: 24px;
top: 10px;
width: 16px;
height: 31px;
img {
width: 100%;
height: 100%;
}
}
}
.box2-main-item-content {
.box2-main-item-content-item {
.inner-header {
height: 54px;
.box3-main2 {
.box3-main2-item {
margin-top: 16px;
.box3-main2-item-header {
width: 1020px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
padding: 12px 24px 12px 51px;
border-top: 1dpx solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
display: flex;
justify-content: space-between;
align-items: center;
.title {
margin-left: 12px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Bold;
font-size: 18px;
font-weight: 700;
line-height: 30px;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.inner-content {
padding: 12px 24px 12px 51px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
.more {
margin-right: 22px;
height: 14px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 7px;
.icon {
width: 12px;
height: 12px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-style: Regular;
font-size: 12px;
font-weight: 400;
line-height: 30px;
line-height: 14px;
letter-spacing: 0px;
text-align: justify;
}
.inner-list {
.inner-list-item {
padding: 12px 24px 12px 50px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
}
.box3-main2-item-content {
.item {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-style: Regular;
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
padding: 12px 23px 12px 44px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
}
}
}
}
}
}
.box3 {
.box4 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
// height: 714px;
border-radius: 4px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
padding-bottom: 18px;
.box3-main {
.box4-main {
width: 1014px;
margin: 10px auto;
.box3-main-item {
.box4-main-item {
width: 1014px;
padding: 11px 0;
display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.item-left {
width: 24px;
height: 24px;
margin-left: 26px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 15px;
.item-right-header {
width: 928px;
width: 90px;
display: flex;
justify-content: space-between;
.item-right-title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right-tag {
.item-left-tag {
width: 80px;
height: 28px;
padding: 0px 8px;
border-radius: 20px;
......@@ -735,7 +734,8 @@ const relatedEvents = ref([
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
text-align: center;
padding: 0 8px;
}
.tag1 {
color: var(--color-main-active);
......@@ -746,8 +746,25 @@ const relatedEvents = ref([
color: rgba(232, 189, 11, 1);
}
}
.item-right {
width: 924px;
.item-right-header {
width: 924px;
display: flex;
justify-content: space-between;
.item-right-title {
width: 800px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
.item-right-time {
margin-top: 4px;
width: 124px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -757,7 +774,10 @@ const relatedEvents = ref([
letter-spacing: 0px;
text-align: left;
}
}
.item-right-content {
margin-top: 4px;
width: 928px;
height: 30px;
color: rgba(95, 101, 108, 1);
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论