Skip to content

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

update

上级 46bcc87b
显示空白字符变更
内嵌 并排
正在显示 包含 1885 行增加 和 72 行删除
src/router/index.js
浏览文件 @ 08105c8b
...@@ -39,6 +39,11 @@ import MarketAccessRestrictions from '@/views/marketAccessRestrictions/marketAcc ...@@ -39,6 +39,11 @@ import MarketAccessRestrictions from '@/views/marketAccessRestrictions/marketAcc
import MarketAccessLayout from '@/views/marketAccessRestrictions/marketAccessLayout/index.vue' import MarketAccessLayout from '@/views/marketAccessRestrictions/marketAccessLayout/index.vue'
import MarketAccessOverview from '@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue' import MarketAccessOverview from '@/views/marketAccessRestrictions/marketAccessLayout/overview/index.vue'
import MarketAccessCase from '@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue' import MarketAccessCase from '@/views/marketAccessRestrictions/marketAccessLayout/case/index.vue'
import MarketSingleCaseLayout from '@/views/marketAccessRestrictions/singleCaseLayout/index.vue'
import MarketSingleCaseOverview from '@/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue'
import MarketSingleCaseDeepdig from '@/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue'
const routes = [ const routes = [
// 智库系统的主要路由 // 智库系统的主要路由
...@@ -304,6 +309,37 @@ const routes = [ ...@@ -304,6 +309,37 @@ const routes = [
] ]
}, },
{
path: '/marketSingleCaseLayout',
name: 'MarketSingleCaseLayout',
component: MarketSingleCaseLayout,
redirect: '/marketSingleCaseLayout/overview',
meta: {
title: '单次调查案件布局'
},
children: [
{
path: 'overview',
name: 'MarketSingleCaseOverview',
component: MarketSingleCaseOverview,
meta: {
title: '调查简介'
},
},
{
path: 'deepdig',
name: 'MarketSingleCaseDeepdig',
component: MarketSingleCaseDeepdig,
meta: {
title: '深度挖掘'
},
},
]
},
] ]
const router = createRouter({ const router = createRouter({
......
src/views/billHome/index.vue
浏览文件 @ 08105c8b
...@@ -104,7 +104,7 @@ ...@@ -104,7 +104,7 @@
<div class="box1-main-left-info2"> <div class="box1-main-left-info2">
<div <div
class="time-line" class="time-line"
:style="{ height: 38 * 4 + 'px' }" :style="{ height: 38 * 3 + 'px' }"
></div> ></div>
<div <div
class="info2-item" class="info2-item"
...@@ -385,7 +385,7 @@ const curBill = ref({ ...@@ -385,7 +385,7 @@ const curBill = ref({
}); });
const handleClickToDetail = () => { const handleClickToDetail = () => {
window.sessionStorage.setItem('billId', curBill.value.billId) window.sessionStorage.setItem("billId", curBill.value.billId);
router.push("/billLayout"); router.push("/billLayout");
}; };
...@@ -636,7 +636,7 @@ const handleClickCate = (cate) => { ...@@ -636,7 +636,7 @@ const handleClickCate = (cate) => {
activeCate.value = cate.hylymc; activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid; activeHylyId.value = cate.hylyid;
handleGetBillsByType() handleGetBillsByType();
}; };
const navList = ref([ const navList = ref([
...@@ -966,7 +966,11 @@ onMounted(async () => { ...@@ -966,7 +966,11 @@ onMounted(async () => {
margin-top: 17px; margin-top: 17px;
display: flex; display: flex;
.info-box { .info-box {
padding: 1px 8px; height: 30px;
width: 80px;
text-align: center;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1); border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px; border-radius: 4px;
...@@ -975,7 +979,7 @@ onMounted(async () => { ...@@ -975,7 +979,7 @@ onMounted(async () => {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 30px;
margin-right: 8px; margin-right: 8px;
} }
.info1 { .info1 {
...@@ -1041,7 +1045,7 @@ onMounted(async () => { ...@@ -1041,7 +1045,7 @@ onMounted(async () => {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
top: 15px; top: 15px;
left: 5px; left: 4px;
width: 2px; width: 2px;
background: #e6e7e8; background: #e6e7e8;
} }
...@@ -1092,8 +1096,7 @@ onMounted(async () => { ...@@ -1092,8 +1096,7 @@ onMounted(async () => {
} }
} }
.box1-main-right { .box1-main-right {
flex: 1; width: 350px;
margin-left: 20px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
...@@ -1102,9 +1105,8 @@ onMounted(async () => { ...@@ -1102,9 +1105,8 @@ onMounted(async () => {
height: 100%; height: 100%;
} }
.inner-box { .inner-box {
width: 458px; width: 330px;
height: 93px; height: 93px;
// backdrop-filter: blur(80px);
background: rgba(10, 18, 30, 0.75); background: rgba(10, 18, 30, 0.75);
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -1115,24 +1117,33 @@ onMounted(async () => { ...@@ -1115,24 +1117,33 @@ onMounted(async () => {
height: 30px; height: 30px;
display: flex; display: flex;
.inner-box-title { .inner-box-title {
width: 360px; width: 270px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 30px; line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.inner-box-time { .inner-box-time {
width: 60px;
height: 30px; height: 30px;
color: rgba(255, 255, 255, 0.65); color: rgba(255, 255, 255, 0.65);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.inner-box-content { .inner-box-content {
width: 418px; width: 330px;
height: 40px;
overflow: hidden;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
...@@ -1175,7 +1186,7 @@ onMounted(async () => { ...@@ -1175,7 +1186,7 @@ onMounted(async () => {
} }
.num { .num {
width: 24px; width: 24px;
height: 16px; height: 20px;
text-align: center; text-align: center;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1256,7 +1267,7 @@ onMounted(async () => { ...@@ -1256,7 +1267,7 @@ onMounted(async () => {
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 26px; left: 40px;
bottom: 20px; bottom: 20px;
width: 430px; width: 430px;
height: 42px; height: 42px;
...@@ -1459,22 +1470,26 @@ onMounted(async () => { ...@@ -1459,22 +1470,26 @@ onMounted(async () => {
width: 1300px; width: 1300px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
overflow-x: auto;
.btn { .btn {
width: 150px;
margin: 0 5px;
overflow: hidden;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 42px; line-height: 42px;
padding: 0 24px; text-align: center;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 0); background: rgba(20, 89, 187, 0);
padding: 0 5px;
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;
border-radius: 21px; border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
...@@ -1495,6 +1510,7 @@ onMounted(async () => { ...@@ -1495,6 +1510,7 @@ onMounted(async () => {
// background: orange; // background: orange;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px;
// justify-content: space-between; // justify-content: space-between;
// justify-content: center; // justify-content: center;
.main-item { .main-item {
......
src/views/deepDig/processOverview/index.vue
浏览文件 @ 08105c8b
...@@ -769,7 +769,7 @@ const handleClickDetail = (isShow) => { ...@@ -769,7 +769,7 @@ const handleClickDetail = (isShow) => {
.main { .main {
margin-left: 59px; margin-left: 59px;
height: 680px; height: 680px;
padding: 15px 10px; padding: 3px 10px;
.left { .left {
height: 680px; height: 680px;
position: relative; position: relative;
...@@ -860,7 +860,7 @@ const handleClickDetail = (isShow) => { ...@@ -860,7 +860,7 @@ const handleClickDetail = (isShow) => {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
left: 10px; left: 10px;
bottom: -4px; bottom: -7px;
width: 12px; width: 12px;
height: 12px; height: 12px;
img { img {
...@@ -1064,7 +1064,7 @@ const handleClickDetail = (isShow) => { ...@@ -1064,7 +1064,7 @@ const handleClickDetail = (isShow) => {
position: absolute; position: absolute;
z-index: 9999; z-index: 9999;
left: 10px; left: 10px;
top: 3px; top: 7px;
width: 12px; width: 12px;
height: 12px; height: 12px;
img { img {
...@@ -1076,7 +1076,7 @@ const handleClickDetail = (isShow) => { ...@@ -1076,7 +1076,7 @@ const handleClickDetail = (isShow) => {
display: flex; display: flex;
height: 30px; height: 30px;
border-left: 1px solid rgba(255, 172, 77, 1); border-left: 1px solid rgba(255, 172, 77, 1);
padding: 15px 10px; padding: 5px 10px;
.item-title { .item-title {
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
...@@ -1191,7 +1191,7 @@ const handleClickDetail = (isShow) => { ...@@ -1191,7 +1191,7 @@ const handleClickDetail = (isShow) => {
.right { .right {
position: absolute; position: absolute;
left: 1295px; left: 1295px;
top: calc(50% - 65px); top: calc(50% - 50px);
display: flex; display: flex;
align-items: center; align-items: center;
.right-line { .right-line {
......
src/views/influence/industry/index.vue
浏览文件 @ 08105c8b
...@@ -10,16 +10,18 @@ ...@@ -10,16 +10,18 @@
</div> </div>
<div class="left-top" id="chart1"></div> <div class="left-top" id="chart1"></div>
<div class="left-center"> <div class="left-center">
<div class="left-center-btn-box">
<div <div
class="btn" class="left-center-btn"
:class="{ btnActive: box1BtnActive === index }" :class="{ btnActive: box1BtnActive === index }"
v-for="(item, index) in industryList" v-for="(item, index) in industryList"
:key="index" :key="index"
@click="handleClickBox1Btn(item,index)" @click="handleClickBox1Btn(item, index)"
> >
{{ item.hylymc }} {{ item.hylymc }}
</div> </div>
</div> </div>
</div>
<div class="left-footer"> <div class="left-footer">
<div <div
class="item" class="item"
...@@ -169,7 +171,7 @@ ...@@ -169,7 +171,7 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import {getCompanyList, getIndustryHyly, getHylyList} from '@/api/influence' import { getCompanyList, getIndustryHyly, getHylyList } from "@/api/influence";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
import getLineChart from "./utils/lineChart"; import getLineChart from "./utils/lineChart";
import getBarChart1 from "./utils/barChart1"; import getBarChart1 from "./utils/barChart1";
...@@ -193,8 +195,8 @@ const box1BtnActive = ref(0); ...@@ -193,8 +195,8 @@ const box1BtnActive = ref(0);
const handleClickBox1Btn = (industry, index) => { const handleClickBox1Btn = (industry, index) => {
box1BtnActive.value = index; box1BtnActive.value = index;
curHylyId.value = industry.hylyid curHylyId.value = industry.hylyid;
handleGetCompanyListById() handleGetCompanyListById();
}; };
// 绘制echarts图表 // 绘制echarts图表
...@@ -255,7 +257,7 @@ const handleClickCompany = (index) => { ...@@ -255,7 +257,7 @@ const handleClickCompany = (index) => {
}, 100); }, 100);
}; };
const companyList= ref([]) const companyList = ref([]);
const industryList = ref([ const industryList = ref([
// { // {
...@@ -309,63 +311,54 @@ const companyInfo = ref({ ...@@ -309,63 +311,54 @@ const companyInfo = ref({
// 获取行业领域列表 // 获取行业领域列表
const handleGetHylyList = async () => { const handleGetHylyList = async () => {
try { try {
const res = await getHylyList() const res = await getHylyList();
// console.log('行业领域字典列表', res); console.log("行业领域字典列表", res);
industryList.value = res.data industryList.value = res.data;
curHylyId.value = res.data[0].hylyid curHylyId.value = res.data[0].hylyid;
} catch (error) { } catch (error) {}
};
}
}
const curHylyId = ref('') const curHylyId = ref("");
// 根据行业领域id获取公司列表 // 根据行业领域id获取公司列表
const handleGetCompanyListById = async () => { const handleGetCompanyListById = async () => {
const params = { const params = {
id: curHylyId.value id: curHylyId.value,
} };
try { try {
const res = await getCompanyList(params) const res = await getCompanyList(params);
// console.log('根据行业id获取公司里列表', res); // console.log('根据行业id获取公司里列表', res);
if(res.code === 200 && res.data.length) { if (res.code === 200 && res.data.length) {
companyList.value = res.data companyList.value = res.data;
} else { } else {
companyList.value = [] companyList.value = [];
} }
} catch (error) {}
} catch (error) { };
}
}
// 根据法案ID 获取行业领域统计 // 根据法案ID 获取行业领域统计
const handleGetIndustryHyly = async () => { const handleGetIndustryHyly = async () => {
const params = { const params = {
id : 1 id: 1,
} };
try { try {
const res = await getIndustryHyly(params) const res = await getIndustryHyly(params);
// console.log('行业领域统计', res); // console.log('行业领域统计', res);
chart1Data.value.name = res.data.map(item => { chart1Data.value.name = res.data.map((item) => {
return item.hylyName return item.hylyName;
}) });
chart1Data.value.value = res.data.map(item => { chart1Data.value.value = res.data.map((item) => {
return item.companyNum return item.companyNum;
}) });
} catch (error) { } catch (error) {}
};
}
}
onMounted(async () => { onMounted(async () => {
await handleGetHylyList() await handleGetHylyList();
handleGetCompanyListById() handleGetCompanyListById();
await handleGetIndustryHyly() await handleGetIndustryHyly();
let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value); let chart1 = getBarChart(chart1Data.value.name, chart1Data.value.value);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
}); });
</script> </script>
...@@ -429,14 +422,22 @@ onMounted(async () => { ...@@ -429,14 +422,22 @@ onMounted(async () => {
} }
.left-center { .left-center {
margin-top: 12px; margin-top: 12px;
height: 56px;
margin-left: 17px;
overflow-x: hidden;
width: 445px;
.left-center-btn-box {
width: 1000px;
margin-top: 10px;
height: 28px; height: 28px;
display: flex; display: flex;
justify-content: flex-start; flex-wrap: nowrap;
margin-left: 17px; .left-center-btn {
.btn { margin-right: 4px;
margin-right: 8px;
height: 28px; height: 28px;
padding: 1px 8px 1px 8px; width: 60px;
text-align: center;
padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1); border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
...@@ -445,9 +446,14 @@ onMounted(async () => { ...@@ -445,9 +446,14 @@ onMounted(async () => {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 28px;
cursor: pointer; cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.btnActive { .btnActive {
border: 1px solid rgba(20, 89, 187, 1); border: 1px solid rgba(20, 89, 187, 1);
background: rgba(246, 251, 255, 1); background: rgba(246, 251, 255, 1);
...@@ -457,7 +463,7 @@ onMounted(async () => { ...@@ -457,7 +463,7 @@ onMounted(async () => {
margin: 0 auto; margin: 0 auto;
margin-top: 5px; margin-top: 5px;
width: 446px; width: 446px;
height: 548px; height: 520px;
overflow: auto; overflow: auto;
.item { .item {
width: 100%; width: 100%;
...@@ -493,6 +499,9 @@ onMounted(async () => { ...@@ -493,6 +499,9 @@ onMounted(async () => {
font-weight: 600; font-weight: 600;
line-height: 22px; line-height: 22px;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.icon { .icon {
margin-left: 7px; margin-left: 7px;
......
src/views/marketAccessRestrictions/marketAccessLayout/case/index.vue
浏览文件 @ 08105c8b
...@@ -90,6 +90,7 @@ ...@@ -90,6 +90,7 @@
class="case-item" class="case-item"
v-for="(val, idx) in curSurveyInfoList" v-for="(val, idx) in curSurveyInfoList"
:key="idx" :key="idx"
@click=handleToSingleCase(item)
> >
<div class="item-box1"> <div class="item-box1">
<div <div
...@@ -125,6 +126,7 @@ ...@@ -125,6 +126,7 @@
<script setup> <script setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import router from '@/router'
const releaseTime = ref("近一年发布"); const releaseTime = ref("近一年发布");
...@@ -347,6 +349,10 @@ watch( ...@@ -347,6 +349,10 @@ watch(
} }
); );
const handleToSingleCase = (item) => {
router.push('/marketSingleCaseLayout/overview')
}
onMounted(() => { onMounted(() => {
curSurveyInfoList.value = surveyInfoList.value; curSurveyInfoList.value = surveyInfoList.value;
}); });
...@@ -516,9 +522,16 @@ onMounted(() => { ...@@ -516,9 +522,16 @@ onMounted(() => {
.case-item { .case-item {
display: flex; display: flex;
padding: 16px 0; padding: 16px 0;
cursor: pointer;
&:hover {
background: rgb(215, 215, 215, 0.5);
}
// height: 56px; // height: 56px;
&:nth-child(2n) { &:nth-child(2n) {
background: rgba(247, 248, 249, 1); background: rgba(247, 248, 249, 1);
&:hover {
background: rgb(215, 215, 215, 0.5);
}
} }
.item-box1 { .item-box1 {
width: 500px; width: 500px;
......
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/index.vue 0 → 100644
浏览文件 @ 08105c8b
<template>
<div class="wrapper">
<div class="top">
<div class="box1 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查案件数量</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main" id="chart1"></div>
<div class="box1-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">同领域调查涉及公司</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main" id="chart2"></div>
<div class="box2-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"主要集中在存储、芯片设计及通信领域，如长江存储、长鑫存储、华为、中兴等"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
<div class="footer">
<div class="box3 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">关联企业</div>
<div class="header-btn-box">
<div
class="btn"
:class="{ btnActive: item.isActive }"
v-for="(item, index) in box3BtnList"
:key="index"
@click="handleClickBox3Btn(index)"
>
{{ item.name }}
</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div id="chart3"></div>
<div id="chart4"></div>
</div>
<div class="box3-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
<div class="box4 box">
<div class="box-header">
<div class="header-left"></div>
<div class="title">和解可能性分析</div>
<div class="header-btn-box">
<div class="btn btnActive">{{ "半导体" }}</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box4-main">
<div id="chart5"></div>
<div class="box4-info-box">
<div class="item" v-for="(item, index) in infoList" :key="index">
<div class="item-left"></div>
<div class="item-right">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="box4-footer">
<div class="icon1">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">
{{
"近年来美对华半导体337调查呈现案件频发、聚焦专利壁垒、力图阻断产业链升级的特点。"
}}
</div>
<div class="icon2">
<img src="./assets/images/icon2.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import getBarChart from "./utils/barChart";
import getBarChart1 from "./utils/barChart1";
import getPieChart from "./utils/pieChart";
const box3BtnList = ref([
{
name: "全部",
isActive: true,
},
{
name: "一加",
isActive: false,
},
{
name: "联想",
isActive: false,
},
{
name: "TCL",
isActive: false,
},
{
name: "其他",
isActive: false,
},
]);
const handleClickBox3Btn = (index) => {
box3BtnList.value.forEach((item) => {
item.isActive = false;
});
box3BtnList.value[index].isActive = true;
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
const chart1Data = ref({
title: [
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
],
data: [32, 32, 41, 33, 29, 31, 16, 31, 37, 31, 27, 27],
});
const chart2Data = ref({
title: [
"华为技术有限公司",
"大疆创新科技有限公司",
"TCL科技集团股份有限公司",
"中兴通讯股份有限公司",
"联想集团",
"比亚迪集团",
"宁德时代新能源科技股份有限公司",
"长江存储科技有限公司",
],
data: [42, 35, 28, 19, 15, 12, 11, 8],
});
const chart3Data = ref([
{
name: "子公司",
value: 7,
},
{
name: "关联公司",
value: 7,
},
{
name: "合作伙伴",
value: 6,
},
{
name: "其他",
value: 4,
},
]);
const colorList1 = ref(["#4096FF", "#FFA39E", "#D6E4FF", "#FFC069"]);
const colorList2 = ref(["#69B1FF", "#FFC069", "#87E8DE", "#D6E4FF", "#FFA39E"]);
const chart4Data = ref([
{
name: "中国香港",
value: 7,
},
{
name: "美国",
value: 7,
},
{
name: "芬兰",
value: 6,
},
{
name: "中国大陆",
value: 4,
},
]);
const chart5Data = ref([
{
name: "和解/同意令",
value: 50,
},
{
name: "裁定不侵权",
value: 46,
},
{
name: "裁定侵权",
value: 40,
},
{
name: "申诉方撤诉",
value: 31,
},
{
name: "其他",
value: 24,
},
]);
const infoList = ref([
{
title: "专利无效宣告",
content: "被告企业可能通过证明Pantech专利无效来赢得案件",
},
{
title: "交叉许可协议",
content: "双方达成专利交叉许可协议，结束争端",
},
{
title: "和解协议",
content: "被告企业支付专利使用费以换取市场准入",
},
{
title: "有限排除令",
content: "如果侵权成立，ITC可能发布有限排除令，禁止涉案产品进入美国市场",
},
]);
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.data);
setChart(chart1, "chart1");
let chart2 = getBarChart1(chart2Data.value.title, chart2Data.value.data);
setChart(chart2, "chart2");
let chart3 = getPieChart(chart3Data.value, colorList1.value);
setChart(chart3, "chart3");
let chart4 = getPieChart(chart4Data.value, colorList1.value);
setChart(chart4, "chart4");
let chart5 = getPieChart(chart5Data.value, colorList2.value);
setChart(chart5, "chart5");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
// padding: 0 160px;
overflow-y: auto;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
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-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 56px;
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;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.box {
width: 792px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
}
.top {
display: flex;
margin: 0 160px;
margin-top: 16px;
.box1 {
.box1-main {
height: 280px;
}
.box1-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box2 {
margin-left: 16px;
.box2-main {
height: 280px;
}
.box2-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.footer {
margin: 0 160px;
margin-top: 16px;
display: flex;
.box3 {
.box3-main {
height: 280px;
display: flex;
#chart3 {
width: 396px;
}
#chart4 {
width: 396px;
}
}
.box3-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
.box4 {
margin-left: 16px;
.box4-main {
height: 280px;
display: flex;
#chart5 {
width: 396px;
}
.box4-info-box {
width: 385px;
.item {
min-height: 66px;
display: flex;
.item-left {
width: 6px;
height: 6px;
border-radius: 3px;
background: rgba(255, 77, 79, 1);
margin-top: 16px;
}
.item-right {
margin-left: 10px;
.title {
margin-top: 5px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.content {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.box4-footer {
height: 40px;
margin: 0 auto;
margin-top: 19px;
width: 759px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.icon1 {
margin-left: 12px;
margin-top: 10px;
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 12px;
line-height: 40px;
width: 666px;
height: 40px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
}
.icon2 {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
background: rgba(231, 243, 255, 1);
border-radius: 12px;
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/utils/barChart.js 0 → 100644
浏览文件 @ 08105c8b
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
yAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
show: false
},
show: true
},
xAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: true
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: false,
position: 'top',
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 12,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 6,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/utils/barChart1.js 0 → 100644
浏览文件 @ 08105c8b
import * as echarts from "echarts";
const getBarChart1 = (nameList, valueList) => {
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
data: nameList,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true
}
},
series: [{
type: 'bar',
data: valueList,
label: {
show: true,
position: [610, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(22, 119, 255, 0)'
},
{
offset: 1,
color: 'rgba(22, 119, 255, 1)'
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart1
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/deepdig/utils/pieChart.js 0 → 100644
浏览文件 @ 08105c8b
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [80, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 项 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 12,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/index.vue 0 → 100644
浏览文件 @ 08105c8b
<template>
<div class="wrapper">
<div class="header">
<div class="header-top">
<div class="header-top-left">{{ '337' }}</div>
<div class="header-top-right">
<div class="title">
{{ "337-TA-1443：外国制造的半导体器件及其下游产品和组件" }}
</div>
<div class="time">{{ "2025年7月18日" }}</div>
</div>
</div>
<div class="header-footer">
<div class="nav-box">
<div
class="nav-item"
:class="{ navItemActive: item.isActive }"
v-for="(item, index) in navList"
:key="index"
@click="handleClickNav(index)"
>
<div class="icon">
<img v-if="!item.isActive" :src="item.icon" alt="" />
<img v-else :src="item.activeIcon" alt="" />
</div>
<div class="text" :class="{ textActive: item.isActive }">
{{ item.name }}
</div>
</div>
</div>
<div class="btn-box">
<div class="btn">
<div class="icon">
<img src="./assets/images/btn-icon1.png" alt="" />
</div>
<div class="text">{{ "查看官网" }}</div>
</div>
<div class="btn1">
<div class="icon">
<img src="./assets/images/btn-icon2.png" alt="" />
</div>
<div class="text">{{ "分析报告" }}</div>
</div>
</div>
</div>
</div>
<div class="main">
<router-view />
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import NavIcon1 from "./assets/images/nav-icon1.png";
import NavIcon1Active from "./assets/images/nav-icon1-active.png";
import NavIcon2 from "./assets/images/nav-icon2.png";
import NavIcon2Active from "./assets/images/nav-icon2-active.png";
import NavIcon3 from "./assets/images/nav-icon2.png";
import NavIcon3Active from "./assets/images/nav-icon2-active.png";
const navList = ref([
{
name: "调查简介",
icon: NavIcon1,
activeIcon: NavIcon1Active,
isActive: true,
path: "/marketSingleCaseLayout/overview",
},
{
name: "深度挖掘",
icon: NavIcon2,
activeIcon: NavIcon2Active,
isActive: false,
path: "/marketSingleCaseLayout/deepdig",
},
{
name: "影响分析",
icon: NavIcon3,
activeIcon: NavIcon3Active,
isActive: false,
path: "/marketSingleCaseLayout/overview",
},
]);
const handleClickNav = (index) => {
navList.value.forEach((item) => {
item.isActive = false;
});
navList.value[index].isActive = true;
router.push(navList.value[index].path);
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 100%;
.header {
width: 1920px;
height: 148px;
box-sizing: border-box;
border-bottom: 1px solid rgba(230, 231, 232, 1);
background: rgba(255, 255, 255, 1);
padding: 24px 160px 0;
.header-top {
display: flex;
.header-top-left {
width: 48px;
height: 48px;
box-sizing: border-box;
border: 1px solid rgba(145, 202, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 48px;
}
.header-top-right {
margin-left: 20px;
.title {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.time {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.header-footer {
display: flex;
justify-content: space-between;
margin-top: 24px;
.nav-box {
height: 48px;
display: flex;
.navItemActive {
border-bottom: 3px solid rgba(10, 87, 166, 1);
}
.nav-item {
display: flex;
width: 95px;
margin-right: 20px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 72px;
height: 24px;
margin-top: 12px;
margin-left: 4px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.textActive {
font-size: 18px;
font-weight: 700;
color: rgba(10, 87, 166, 1);
}
}
}
.btn-box {
height: 48px;
display: flex;
.btn {
margin-top: 2px;
width: 120px;
height: 36px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 6px;
background: rgba(255, 255, 255, 1);
display: flex;
.icon {
width: 16px;
height: 16px;
margin-left: 16px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
margin-top: 7px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
.btn1 {
margin-left: 12px;
margin-top: 2px;
width: 120px;
height: 36px;
border-radius: 6px;
background: rgba(22, 119, 255, 1);
display: flex;
.icon {
width: 16px;
height: 16px;
margin-left: 16px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
margin-top: 7px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
}
}
.main {
height: 870px;
width: 1920px;
overflow-y: auto;
background: rgba(247, 248, 249, 1);
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/singleCaseLayout/overview/index.vue 0 → 100644
浏览文件 @ 08105c8b
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div class="box1-item">
<div class="box1-item-left">{{ "调查案号：" }}</div>
<div class="box1-item-right">{{ "337-TA-1443" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及产品：" }}</div>
<div class="box1-item-right">
{{
"特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated Semiconductor Devices, Products Containing the Same, and Components Thereof"
}}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查类别：" }}</div>
<div class="box1-item-right">{{ "专利侵权调查" }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "涉及专利：" }}</div>
<div class="box1-item-right">
{{ "注册专利号7745847、9093473、9147747、9184292" }}
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "限制措施：" }}</div>
<div class="box1-item-right">{{ "有限排除令 、禁止令 " }}</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "调查领域：" }}</div>
<div class="box1-item-right1">
<div class="tag">{{ "半导体" }}</div>
</div>
</div>
<div class="box1-item">
<div class="box1-item-left">{{ "案件进展：" }}</div>
<div class="box1-item-right2">
<div
class="box1-item-right2-item"
v-for="(item, index) in processList"
:key="index"
>
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">原告信息</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="box2-main-top">
<div class="left">
{{ "Lon" }}
</div>
<div class="right">
<div class="title">{{ "爱尔兰Longitude Licensing Ltd" }}</div>
<div class="info">{{ "爱尔兰半导体零件制造公司" }}</div>
</div>
</div>
<div class="box2-main-center">
{{
`Longitude Licensing Ltd. (“Longitude”) 是IPValue管理集团旗下企业，致力于在国际知识经济最活跃的领域开展业务。
公司总部位于爱尔兰共和国都柏林，以成为领先的知识产权管理公司为愿景，专注于为全球专利持有人实现专利知识产权价值最大化。自2013年7月成立以来，经度公司目前已获得知名科技企业授权，管理着总计超过8,000项有效专利和专利申请的组合。这些专利组合涵盖半导体设计与制造工艺、非易失性存储技术、显示技术及消费电子技术。我们计划将合作伙伴关系与许可活动拓展至相关技术领域。`
}}
</div>
<div class="box2-main-footer">
<div class="box2-main-footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="box2-main-footer-center">
{{
'Pantech是韩国的一家通信设备公司，曾经是手机制造商，但现在可能已转型为专利持有实体。这类公司常被称为"非执业实体"(NPE)或"专利断言实体"(PAE)，通过专利授权和诉讼获取收益。这些企业曾经是行业龙头，但因科技和市场形态巨变，加上自身改革步伐缓慢，经营状况每况愈下。卖掉实体业务部门后，留下来的是高达几万件的专利。'
}}
</div>
<div class="box2-main-footer-right">
<img src="./assets/images/footer-icon2.png" alt=""></img>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">被告信息</div>
<div class="header-info">
<div class="icon">
<img src="./assets/images/header-info-icon.png" alt="">
</div>
<div class="text">{{ '以下为列名被告企业及其关联公司' }}</div>
</div>
<div class="header-right">
<img src="../assets/images/header-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div class="box3-main-box" v-for="item,index in caseList" :key="index">
<div class="box3-main-box-header">{{ item.title }}</div>
<div class="box3-main-box-content">
<div class="content-item" v-for="val,idx in caseList[index].companyList" :key="idx">
<div class="icon">
<img :src="val.logo" alt="">
</div>
<div class="text">{{ val.name }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import Logo1 from './assets/images/logo1.png'
import Logo2 from './assets/images/logo2.png'
import Logo3 from './assets/images/logo3.png'
import Logo4 from './assets/images/logo4.png'
import Logo5 from './assets/images/logo5.png'
import Logo6 from './assets/images/logo6.png'
const processList = ref([
{
time: "2025-02-18",
title: "申请立案",
},
{
time: "2025-03-21",
title: "立案",
},
{
time: "2025-08-14",
title: "部分仲裁",
},
{
time: "2025-09-18",
title: "部分终裁",
},
]);
const caseList = ref([
{
title:'一加(OnePlus)及相关企业',
companyList: [
{
name: '深圳市万普拉斯科技有限公司 (中国广东)',
logo: Logo1
},
{
name: 'OnePlus USA Corp. (美国德州欧文)',
logo: Logo1
},
]
},
{
title:'联想(Lenovo)及相关企业',
companyList: [
{
name: '联想集团 (中国北京)',
logo: Logo2
},
{
name: 'Lenovo (United States) Inc. (美国北卡罗来纳州)',
logo: Logo2
},
{
name: 'Motorola Mobility LLC (美国伊利诺伊州)',
logo: Logo2
},
]
},
{
title:'TCL及相关企业',
companyList: [
{
name: 'TCL实业控股股份有限公司 (中国广东)',
logo: Logo3
},
{
name: 'TCL Electronics Holdings Ltd. (中国香港)',
logo: Logo3
},
{
name: 'TCL Communication Ltd. (中国香港)',
logo: Logo3
},
{
name: 'TCL Communication Ltd. (中国香港)',
logo: Logo3
},
{
name: 'TCL Communication Technology Holdings Ltd. (中国广东)',
logo: Logo3
},
{
name: 'TCL Mobile International Ltd. (中国香港)',
logo: Logo3
},
{
name: '惠州TCL移动通信有限公司 (中国广东)',
logo: Logo3
},
{
name: 'TCL Mobile Communication (HK) Company Ltd. (中国香港)',
logo: Logo3
},
]
},
{
title:'其他相关企业',
companyList: [
{
name: 'Tinno USA, Inc. (美国德州普莱诺)',
logo: Logo4
},
{
name: '深圳市天珑移动技术有限公司 (中国广东)',
logo: Logo5
},
{
name: 'HMD Global (芬兰)',
logo: Logo6
},
{
name: 'HMD Global OY (芬兰)',
logo: Logo6
},
{
name: 'HMD America, Inc. (美国佛罗里达州迈阿密)',
logo: Logo6
},
]
},
])
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 1191px;
padding: 0 160px;
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 14px;
margin-top: 16px;
height: 24px;
line-height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
height: 28px;
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-weight: 400;
cursor: pointer;
}
.btnActive {
border: 1px solid rgba(10, 87, 166, 1);
background: rgba(246, 250, 255, 1);
color: rgba(10, 87, 166, 1);
}
}
.header-info {
height: 22px;
position: absolute;
right: 56px;
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;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 520px;
.box1 {
margin-top: 16px;
width: 520px;
height: 837px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 6px;
margin-left: 22px;
.box1-item {
display: flex;
margin-bottom: 16px;
.box1-item-left {
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
margin-top: 3px;
margin-bottom: 3px;
}
.box1-item-right {
width: 346px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-item-right1 {
.tag {
margin-top: 3px;
margin-bottom: 3px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
border-radius: 4px;
background: rgba(230, 255, 251, 1);
line-height: 24px;
text-align: center;
padding: 0 8px;
color: rgba(19, 168, 168, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.box1-item-right2 {
.box1-item-right2-item {
width: 332px;
height: 36px;
display: flex;
.icon {
width: 10px;
height: 10px;
margin-left: 17px;
margin-top: 10px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.title {
height: 24px;
margin-left: 16px;
margin-top: 6px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
}
.right {
width: 1064px;
margin-left: 16px;
.box2 {
margin-top: 16px;
width: 1064px;
height: 410px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
.box2-main-top {
display: flex;
width: 1012px;
height: 69px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
margin: 0 auto;
.left {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
background: rgba(231, 243, 255, 1);
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
}
.right {
margin-left: 16px;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.info {
color: rgba(95, 101, 108, 1);
height: 24px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box2-main-center {
width: 1012px;
margin: 0 auto;
margin-top: 13px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
height: 160px;
}
.box2-main-footer {
margin: 0 auto;
margin-top: 10px;
width: 1034px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
box-sizing: border-box;
padding: 6px 12px;
display: flex;
.box2-main-footer-left {
width: 19px;
height: 20px;
margin-top: 22px;
img {
width: 100%;
height: 100%;
}
}
.box2-main-footer-center {
margin-top: 2px;
margin-left: 13px;
width: 941px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box2-main-footer-right {
margin-left: 13px;
margin-top: 26px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
img {
width: 12px;
height: 12px;
margin-top: 6px;
margin-left: 6px;
}
}
}
}
}
.box3 {
margin-top: 16px;
margin-bottom: 35px;
width: 1064px;
height: 714px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 1px;
margin-left: 24px;
margin-right: 27px;
.box3-main-box {
margin-bottom: 18px;
.box3-main-box-header {
height: 36px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 36px;
}
.box3-main-box-content {
padding-top: 13px;
display: flex;
flex-wrap: wrap;
.content-item {
display: flex;
height: 30px;
width: 50%;
margin-bottom: 11px;
.icon {
width: 24px;
height: 24px;
margin-top: 3px;
img{
width: 100%;
height: 100%;
}
}
.text {
margin-left: 13px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论