Skip to content

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

update

上级 08105c8b
隐藏空白字符变更
内嵌 并排
正在显示 包含 2758 行增加 和 571 行删除
src/main.js
浏览文件 @ 5e8a9085
...@@ -6,6 +6,9 @@ import 'element-plus/dist/index.css' ...@@ -6,6 +6,9 @@ import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue' import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import CardTitle from './components/CardTitle.vue' import CardTitle from './components/CardTitle.vue'
import { withFallbackImage } from './utils' import { withFallbackImage } from './utils'
import './styles/scrollbar.css'
import './styles/elui.css'
import './styles/main.css'
const app = createApp(App) const app = createApp(App)
......
src/router/index.js
浏览文件 @ 5e8a9085
...@@ -33,6 +33,7 @@ import OverviewLayout from '@/views/decree/decreeLayout/overview/index.vue' ...@@ -33,6 +33,7 @@ import OverviewLayout from '@/views/decree/decreeLayout/overview/index.vue'
import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue' import DecreeIntroduction from '@/views/decree/decreeLayout/overview/introduction/index.vue'
import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue' import DecreeBackground from '@/views/decree/decreeLayout/overview/background/index.vue'
import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue' import DecreeDeepDig from '@/views/decree/decreeLayout/deepdig/index.vue'
import DecreeInfluence from '@/views/decree/decreeLayout/influence/index.vue'
// 市场准入限制 // 市场准入限制
import MarketAccessRestrictions from '@/views/marketAccessRestrictions/marketAccessHome/index.vue' import MarketAccessRestrictions from '@/views/marketAccessRestrictions/marketAccessHome/index.vue'
...@@ -245,30 +246,16 @@ const routes = [ ...@@ -245,30 +246,16 @@ const routes = [
title: '深度挖掘' title: '深度挖掘'
}, },
}, },
// // 影响分析路由 // 影响分析路由
// { {
// path: 'influence', path: 'influence',
// name: 'InfluenceLayout', name: 'DecreeInfluence',
// component: InfluenceLayout, component: DecreeInfluence,
// redirect: '/billLayout/influence/industry', meta: {
// meta: { title: '影响分析'
// title: '影响分析' },
// },
// children: [ }
// {
// path: 'industry',
// name: 'InfluenceIndustry',
// component: InfluenceIndustry,
// meta: { title: '对华产业影响' }
// },
// {
// path: 'scientificResearch',
// name: 'InfluenceScientificResearch',
// component: InfluenceScientificResearch,
// meta: { title: '对华科研影响' }
// }
// ]
// }
] ]
}, },
......
src/styles/elui.css 0 → 100644
浏览文件 @ 5e8a9085
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
color: red !important;
}
:root {
--el-color-primary: rgba(10, 87, 166, 1);
/* --el-color-success: #1dd1a1;
--el-border-radius-base: 8px;
--el-font-size-base: 14px; */
}
\ No newline at end of file
src/styles/main.css 0 → 100644
浏览文件 @ 5e8a9085
:root {
--color-main-active: rgba(10, 87, 166, 1);
--color-main-primay: rgba(59, 65, 75, 1);
/* 普通按钮颜色 */
--btn-plain-border-color: rgba(230, 231, 232, 1);
--btn-plain-bg-color: rgba(255, 255, 255, 1);
--btn-plain-text-color: rgba(59, 65, 75, 1);
/* 选中按钮颜色 */
--btn-active-border-color: rgba(10, 87, 166, 1);
--btn-active-bg-color: rgba(231, 243, 255, 1);
--btn-active-text-color: rgba(10, 87, 166, 1);
/* 标签按钮颜色 */
--tag-btn1-bg-color: rgba(255, 241, 240, 1);
--tag-btn1-border-color: rgba(255, 204, 199, 1);
--tag-btn1-text-color: rgba(255, 77, 79, 1);
--tag-btn2-bg-color: rgba(255, 251, 230, 1);
--tag-btn2-border-color: rgba(255, 241, 184, 1);
--tag-btn2-text-color: rgba(250, 173, 20, 1);
--tag-btn2-bg-color: rgba(230, 244, 255, 1);
--tag-btn2-border-color: rgba(186, 224, 255, 1);
--tag-btn2-text-color: rgba(22, 119, 255, 1);
--tag-btn3-bg-color: rgba(246, 255, 237, 1);
--tag-btn3-border-color: rgba(217, 247, 190, 1);
--tag-btn3-text-color: rgba(82, 196, 26, 1);
}
\ No newline at end of file
src/styles/scrollbar.css 0 → 100644
浏览文件 @ 5e8a9085
/* 全局滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
/* Webkit 浏览器 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f8f9fa;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #6c757d;
border-radius: 6px;
border: 2px solid #f8f9fa;
}
::-webkit-scrollbar-thumb:hover {
background: #495057;
}
::-webkit-scrollbar-thumb:active {
background: #343a40;
}
::-webkit-scrollbar-corner {
background: #f8f9fa;
}
/* 特定元素的滚动条样式 */
.el-scrollbar__bar {
z-index: 9999;
}
/* Element UI 组件滚动条优化 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #909399;
border-radius: 4px;
}
.el-select-dropdown .el-scrollbar__wrap {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
\ No newline at end of file
src/views/bill/background/index.vue
浏览文件 @ 5e8a9085
...@@ -80,9 +80,8 @@ ...@@ -80,9 +80,8 @@
</div> </div>
</div> </div>
<div class="box2-footer"> <div class="box2-footer">
<div class="box2-footer-text">查看更多</div> <div class="btn-more">
<div class="box2-footer-icon"> <img src="../assets/images/btn-more.png" alt="" />
<img src="./assets/images/more.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -150,15 +149,7 @@ ...@@ -150,15 +149,7 @@
<div class="right-box2"> <div class="right-box2">
<div class="right-box2-header"> <div class="right-box2-header">
<div class="title"> <div class="title">
<span <span class="title-active">"传统能源"</span>涉及议员动态 >
style="
color: rgb(22, 119, 255);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
"
>"传统能源"</span
>涉及议员动态 >
</div> </div>
</div> </div>
<div class="right-box2-center"> <div class="right-box2-center">
...@@ -177,9 +168,8 @@ ...@@ -177,9 +168,8 @@
</div> </div>
</div> </div>
<div class="right-box2-footer"> <div class="right-box2-footer">
<div class="box2-footer-text">查看更多</div> <div class="btn-more">
<div class="box2-footer-icon"> <img src="../assets/images/btn-more.png" alt="" />
<img src="./assets/images/more.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -205,7 +195,11 @@ import userIcon from "./assets/icons/user-icon.png"; ...@@ -205,7 +195,11 @@ import userIcon from "./assets/icons/user-icon.png";
import userIcon1 from "./assets/icons/user-icon1.png"; import userIcon1 from "./assets/icons/user-icon1.png";
import userIcon2 from "./assets/icons/user-icon2.png"; import userIcon2 from "./assets/icons/user-icon2.png";
import { getBillBackground, getBillEvent, getBillPersonAnalyze } from "@/api/bill"; import {
getBillBackground,
getBillEvent,
getBillPersonAnalyze,
} from "@/api/bill";
const box1BtnActive = ref(1); const box1BtnActive = ref(1);
const handleClickBox1Btn = (index) => { const handleClickBox1Btn = (index) => {
...@@ -220,10 +214,10 @@ const handleClickBox1Btn = (index) => { ...@@ -220,10 +214,10 @@ const handleClickBox1Btn = (index) => {
const box2BtnActive = ref(1); const box2BtnActive = ref(1);
const handleClickBox2Btn = (index) => { const handleClickBox2Btn = (index) => {
box2BtnActive.value = index; box2BtnActive.value = index;
if(index === 1) { if (index === 1) {
handleGetBillPersonAnalyze(true) handleGetBillPersonAnalyze(true);
} else { } else {
handleGetBillPersonAnalyze(false) handleGetBillPersonAnalyze(false);
} }
}; };
...@@ -249,7 +243,7 @@ const aboutUserList = ref([ ...@@ -249,7 +243,7 @@ const aboutUserList = ref([
const backgroundList = ref([ const backgroundList = ref([
{ {
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
bjnr: "将中国跨境电商描述为“利用低价商品冲击美国市场、规避关税监管”", bjnr: "将中国跨境电商描述为“利用低价商品冲击美国市场、规避关税监管”",
}, },
{ {
...@@ -433,7 +427,7 @@ const wordCloudData = [ ...@@ -433,7 +427,7 @@ const wordCloudData = [
const handleGetBillBackground = async (cRelated) => { const handleGetBillBackground = async (cRelated) => {
const params = { const params = {
cRelated: cRelated, cRelated: cRelated,
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
currentPage: 0, currentPage: 0,
pageSize: 10, pageSize: 10,
}; };
...@@ -445,58 +439,52 @@ const handleGetBillBackground = async (cRelated) => { ...@@ -445,58 +439,52 @@ const handleGetBillBackground = async (cRelated) => {
}; };
// 获取相关事件 // 获取相关事件
const handleGetRelatedEvent = async() => { const handleGetRelatedEvent = async () => {
const params = { const params = {
id: 1 id: 1,
} };
try { try {
const res = await getBillEvent(params) const res = await getBillEvent(params);
console.log('相关事件',res); console.log("相关事件", res);
eventList.value = res.data eventList.value = res.data;
eventList.value.forEach((item,index) => { eventList.value.forEach((item, index) => {
if(index === 0) { if (index === 0) {
item.image = event1 item.image = event1;
} else if(index === 1) { } else if (index === 1) {
item.image = event2 item.image = event2;
} else if(index===2) { } else if (index === 2) {
item.image = event3 item.image = event3;
} else if(index ===3) { } else if (index === 3) {
item.image = event4 item.image = event4;
} else { } else {
item.image = event5 item.image = event5;
} }
}) });
} catch (error) {}
} catch (error) { };
}
}
// 议员相关性分析 // 议员相关性分析
const handleGetBillPersonAnalyze = async (isOppose) => { const handleGetBillPersonAnalyze = async (isOppose) => {
const params = { const params = {
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
isOppose: isOppose isOppose: isOppose,
} };
try { try {
const res = await getBillPersonAnalyze(params) const res = await getBillPersonAnalyze(params);
console.log('议员相关性分析', res); console.log("议员相关性分析", res);
personList.value = res.data personList.value = res.data;
personList.value.forEach(item => { personList.value.forEach((item) => {
item.image = user1 item.image = user1;
item.icon = userIcon item.icon = userIcon;
item.icon1 = userIcon1 item.icon1 = userIcon1;
}) });
} catch (error) {}
} catch (error) { };
}
}
onMounted(() => { onMounted(() => {
handleGetBillBackground(true); handleGetBillBackground(true);
handleGetRelatedEvent() handleGetRelatedEvent();
handleGetBillPersonAnalyze(true) handleGetBillPersonAnalyze(true);
}); });
</script> </script>
...@@ -515,14 +503,14 @@ onMounted(() => { ...@@ -515,14 +503,14 @@ onMounted(() => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 22px; margin-left: 22px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -576,16 +564,16 @@ onMounted(() => { ...@@ -576,16 +564,16 @@ onMounted(() => {
display: flex; display: flex;
margin-top: 8px; margin-top: 8px;
.id { .id {
width: 18px; width: 24px;
height: 18px; height: 24px;
border-radius: 9px; border-radius: 12px;
background: rgba(231, 241, 255); background: rgba(231, 241, 255);
color: #1677ff; color: var(--color-main-active);
text-align: center; text-align: center;
line-height: 18px; line-height: 24px;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: 400;
margin: 15px 16px 15px 18px; margin: 12px 16px 12px 18px;
} }
.title { .title {
width: 440px; width: 440px;
...@@ -702,13 +690,14 @@ onMounted(() => { ...@@ -702,13 +690,14 @@ onMounted(() => {
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.box2-footer-text { .btn-more {
color: rgba(22, 119, 255, 1); width: 108px;
font-family: Microsoft YaHei; height: 32px;
font-size: 14px; cursor: pointer;
font-weight: 400; img {
line-height: 22px; width: 100%;
margin-right: 4px; height: 100%;
}
} }
} }
} }
...@@ -724,7 +713,6 @@ onMounted(() => { ...@@ -724,7 +713,6 @@ onMounted(() => {
.background-wrap-right-main { .background-wrap-right-main {
.right-box1 { .right-box1 {
height: 365px; height: 365px;
border-bottom: 1px solid rgba(243, 243, 244, 1);
.right-box1-header { .right-box1-header {
height: 22px; height: 22px;
margin-left: 22px; margin-left: 22px;
...@@ -895,7 +883,7 @@ onMounted(() => { ...@@ -895,7 +883,7 @@ onMounted(() => {
.right-box2-header { .right-box2-header {
height: 22px; height: 22px;
margin-left: 22px; margin-left: 22px;
padding-top: 19px; padding-top: 10px;
display: flex; display: flex;
.icon { .icon {
margin: 1px 12px 3px 0; margin: 1px 12px 3px 0;
...@@ -915,6 +903,12 @@ onMounted(() => { ...@@ -915,6 +903,12 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
.title-active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
} }
} }
.right-box2-center { .right-box2-center {
...@@ -963,13 +957,14 @@ onMounted(() => { ...@@ -963,13 +957,14 @@ onMounted(() => {
margin-top: 7px; margin-top: 7px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.box2-footer-text { .btn-more {
color: rgba(22, 119, 255, 1); width: 108px;
font-family: Microsoft YaHei; height: 32px;
font-size: 14px; cursor: pointer;
font-weight: 400; img {
line-height: 22px; width: 100%;
margin-right: 4px; height: 100%;
}
} }
} }
} }
......
src/views/bill/index.vue
浏览文件 @ 5e8a9085
...@@ -302,7 +302,7 @@ onMounted(() => {}); ...@@ -302,7 +302,7 @@ onMounted(() => {});
} }
} }
.siderBtnActive { .siderBtnActive {
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
.btn-text { .btn-text {
color: #fff !important; color: #fff !important;
} }
......
src/views/bill/introdoction/index.vue
浏览文件 @ 5e8a9085
...@@ -162,9 +162,8 @@ ...@@ -162,9 +162,8 @@
</div> </div>
</div> </div>
<div class="box2-footer"> <div class="box2-footer">
<div class="box2-footer-text">查看更多</div> <div class="btn-more">
<div class="box2-footer-icon"> <img src="../assets/images/btn-more.png" alt="" />
<img src="./assets/images/more.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -287,10 +286,9 @@ ...@@ -287,10 +286,9 @@
</el-timeline-item> --> </el-timeline-item> -->
</el-timeline> </el-timeline>
</div> </div>
<div class="right-main-box3-footer" @click="handleClickMore2"> <div class="right-main-box3-footer">
<div class="right-main-box3-footer-text">查看更多</div> <div class="btn-more" @click="handleClickMore2">
<div class="right-main-box3-footer-icon"> <img src="../assets/images/btn-more.png" alt="" />
<img src="./assets/images/more.png" alt="" />
</div> </div>
</div> </div>
</div> </div>
...@@ -321,11 +319,11 @@ ...@@ -321,11 +319,11 @@
</div> </div>
<div class="info-right-item"> <div class="info-right-item">
<div class="item-left">选区:</div> <div class="item-left">选区:</div>
<div class="item-right">{{curPerson.xq}}</div> <div class="item-right">{{ curPerson.xq }}</div>
</div> </div>
<div class="info-right-item"> <div class="info-right-item">
<div class="item-left">职位:</div> <div class="item-left">职位:</div>
<div class="item-right">{{curPerson.zw}}</div> <div class="item-right">{{ curPerson.zw }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -583,7 +581,7 @@ const handleClickMore2 = () => { ...@@ -583,7 +581,7 @@ const handleClickMore2 = () => {
// 获取基本信息 // 获取基本信息
const handleGetBasicInfo = async () => { const handleGetBasicInfo = async () => {
const params = { const params = {
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
}; };
try { try {
const res = await getBillInfo(params); const res = await getBillInfo(params);
...@@ -599,7 +597,7 @@ const warningNum = ref(0); ...@@ -599,7 +597,7 @@ const warningNum = ref(0);
const handleGetBillEvent = async () => { const handleGetBillEvent = async () => {
warningNum.value = 0; warningNum.value = 0;
const params = { const params = {
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
}; };
try { try {
const res = await getBillEvent(params); const res = await getBillEvent(params);
...@@ -618,7 +616,7 @@ const handleGetBillEvent = async () => { ...@@ -618,7 +616,7 @@ const handleGetBillEvent = async () => {
// 法案进展 获取前期进展 --也是提出人左上角列表 // 法案进展 获取前期进展 --也是提出人左上角列表
const handleGetBillDyqk = async () => { const handleGetBillDyqk = async () => {
const params = { const params = {
id: window.sessionStorage.getItem('billId'), id: window.sessionStorage.getItem("billId"),
}; };
try { try {
const res = await getBillDyqk(params); const res = await getBillDyqk(params);
...@@ -682,17 +680,17 @@ onMounted(() => { ...@@ -682,17 +680,17 @@ onMounted(() => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 18px;
font-weight: 600; font-weight: 700;
line-height: 16px; line-height: 16px;
} }
.header-btn-box { .header-btn-box {
...@@ -752,8 +750,7 @@ onMounted(() => { ...@@ -752,8 +750,7 @@ onMounted(() => {
} }
.item-right { .item-right {
height: 14px; height: 14px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
...@@ -800,7 +797,8 @@ onMounted(() => { ...@@ -800,7 +797,8 @@ onMounted(() => {
} }
.item-right4 { .item-right4 {
// width: 500px; // width: 500px;
height: 24px; margin-top: -2px;
height: 26px;
display: flex; display: flex;
padding-left: -10px; padding-left: -10px;
border: 2px solid #5f656c; border: 2px solid #5f656c;
...@@ -821,10 +819,10 @@ onMounted(() => { ...@@ -821,10 +819,10 @@ onMounted(() => {
.right-arrow { .right-arrow {
position: absolute; position: absolute;
right: -21px; right: -21px;
top: -3px; top: -2px;
z-index: 99; z-index: 99;
width: 30px; width: 30px;
height: 30px; height: 28px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -996,22 +994,17 @@ onMounted(() => { ...@@ -996,22 +994,17 @@ onMounted(() => {
} }
} }
.box2-footer { .box2-footer {
margin-top: 7px;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100px; .btn-more {
margin: 0 auto; width: 108px;
margin-top: 5px; height: 32px;
cursor: pointer; cursor: pointer;
&:hover { img {
background: rgba(225, 225, 225, 0.3); width: 100%;
} height: 100%;
.box2-footer-text { }
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
} }
} }
} }
...@@ -1040,10 +1033,10 @@ onMounted(() => { ...@@ -1040,10 +1033,10 @@ onMounted(() => {
.person-item { .person-item {
height: 28px; height: 28px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(170, 172, 177, 1); border: 1px solid var(--btn-plain-border-color);
border-radius: 4px; border-radius: 4px;
background: rgba(250, 250, 251, 1); background: var(--btn-plain-bg-color);
color: rgba(132, 136, 142, 1); color: var(--btn-plain-text-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1056,9 +1049,9 @@ onMounted(() => { ...@@ -1056,9 +1049,9 @@ onMounted(() => {
cursor: pointer; cursor: pointer;
} }
.nameItemActive { .nameItemActive {
border: 1px solid rgba(22, 119, 255, 1); border: 1px solid var(--btn-active-border-color);
background: rgba(246, 251, 255, 1); background: var(--btn-active-bg-color);
color: rgba(22, 119, 255, 1); color: var(--btn-active-text-color);
} }
} }
} }
...@@ -1104,7 +1097,7 @@ onMounted(() => { ...@@ -1104,7 +1097,7 @@ onMounted(() => {
.info-right-title { .info-right-title {
height: 22px; height: 22px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -1189,22 +1182,17 @@ onMounted(() => { ...@@ -1189,22 +1182,17 @@ onMounted(() => {
overflow-y: auto; overflow-y: auto;
} }
.right-main-box3-footer { .right-main-box3-footer {
margin-top: 7px;
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100px; .btn-more {
margin: 0 auto; width: 108px;
margin-top: 10px; height: 32px;
cursor: pointer; cursor: pointer;
&:hover { img {
background: rgba(225, 225, 225, 0.3); width: 100%;
} height: 100%;
.right-main-box3-footer-text { }
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-right: 4px;
} }
} }
} }
...@@ -1271,9 +1259,9 @@ onMounted(() => { ...@@ -1271,9 +1259,9 @@ onMounted(() => {
.info-right-title { .info-right-title {
height: 22px; height: 22px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
text-align: center; text-align: center;
...@@ -1344,7 +1332,7 @@ onMounted(() => { ...@@ -1344,7 +1332,7 @@ onMounted(() => {
bottom: 32px; bottom: 32px;
width: 81px; width: 81px;
height: 16px; height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1367,16 +1355,17 @@ onMounted(() => { ...@@ -1367,16 +1355,17 @@ onMounted(() => {
align-items: center; align-items: center;
padding: 1px 8px; padding: 1px 8px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); border: 1px solid var(--btn-plain-border-color);
background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
margin: 20px 8px; margin: 20px 8px;
cursor: pointer; cursor: pointer;
} }
.btnActive { .btnActive {
border: 1px solid rgba(22, 119, 255, 1); border: 1px solid var(--btn-active-border-color);
background: rgba(246, 251, 255, 1); background: var(--btn-active-bg-color);
color: rgba(22, 119, 255, 1); color: var(--btn-active-text-color);
} }
} }
} }
...@@ -1396,10 +1385,9 @@ onMounted(() => { ...@@ -1396,10 +1385,9 @@ onMounted(() => {
padding-bottom: 5px !important; padding-bottom: 5px !important;
} }
:deep(.el-timeline-item__timestamp) { :deep(.el-timeline-item__timestamp) {
// color: rgba(95, 101, 108, 1) !important; color: var(--color-main-active) !important;
color: rgba(22, 119, 255, 1) !important;
font-family: Microsoft YaHei !important; font-family: Microsoft YaHei !important;
font-size: 14px !important; font-size: 16px !important;
font-weight: 600 !important; font-weight: 600 !important;
} }
.timeline-content { .timeline-content {
......
src/views/bill/template/index.vue
浏览文件 @ 5e8a9085
...@@ -5,22 +5,6 @@ ...@@ -5,22 +5,6 @@
<div class="box-header-left"></div> <div class="box-header-left"></div>
<div class="box-header-title">主要条款</div> <div class="box-header-title">主要条款</div>
<div class="box-header-btn-box"> <div class="box-header-btn-box">
<!-- <div class="btn" @click="handleSelectBtn(1)">
<el-button type="primary" plain v-if="btnActiveIndex === 1"
>涉华条款</el-button
>
<el-button type="info" plain v-if="btnActiveIndex === 2"
>涉华条款</el-button
>
</div>
<div class="btn" @click="handleSelectBtn(2)">
<el-button type="primary" plain v-if="btnActiveIndex === 2"
>全部条款</el-button
>
<el-button type="info" plain v-if="btnActiveIndex === 1"
>全部条款</el-button
>
</div> -->
</div> </div>
<div class="box-header-icon"> <div class="box-header-icon">
<img src="./assets/icons/header-icon.png" alt="" /> <img src="./assets/icons/header-icon.png" alt="" />
...@@ -66,11 +50,11 @@ ...@@ -66,11 +50,11 @@
<div class="id">{{ index + 1 }}</div> <div class="id">{{ index + 1 }}</div>
<div class="info"> <div class="info">
<div class="title"> <div class="title">
<span style="color: #1677ff">{{ term.header }}</span> <span class="title-active">{{ term.header }}</span>
{{ term.title }} {{ term.title }}
</div> </div>
<div class="content"> <div class="content">
<span style="color: #1677ff">{{ term.headerEn }}</span> <span class="content-active">{{ term.headerEn }}</span>
{{ term.content }} {{ term.content }}
</div> </div>
</div> </div>
...@@ -500,13 +484,13 @@ onMounted(async () => { ...@@ -500,13 +484,13 @@ onMounted(async () => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.box-header-title { .box-header-title {
margin-left: 22px; margin-left: 22px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -580,7 +564,7 @@ onMounted(async () => { ...@@ -580,7 +564,7 @@ onMounted(async () => {
height: 24px; height: 24px;
border-radius: 12px; border-radius: 12px;
background: rgba(231, 241, 255); background: rgba(231, 241, 255);
color: #1677ff; color: var(--color-main-active);
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
...@@ -600,6 +584,9 @@ onMounted(async () => { ...@@ -600,6 +584,9 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
.title-active{
color: var(--color-main-active)
}
} }
.content { .content {
margin-top: 6px; margin-top: 6px;
...@@ -613,6 +600,9 @@ onMounted(async () => { ...@@ -613,6 +600,9 @@ onMounted(async () => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
.content-active{
color: var(--color-main-active)
}
} }
} }
.tags-box { .tags-box {
...@@ -732,7 +722,7 @@ onMounted(async () => { ...@@ -732,7 +722,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 456px; width: 456px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -788,7 +778,7 @@ onMounted(async () => { ...@@ -788,7 +778,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 456px; width: 456px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
......
src/views/billHome/index.vue
浏览文件 @ 5e8a9085
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="home-header">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>科技法案 </span>
</div>
<div class="home-main"> <div class="home-main">
<div class="home-main-header"> <div class="home-main-header">
<div class="home-main-header-top">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span style="color: #1459bb; font-weight: bold">科技法案 </span>
</div>
<div class="home-main-header-center"> <div class="home-main-header-center">
<el-input <el-input
v-model="input" v-model="input"
...@@ -180,9 +180,11 @@ ...@@ -180,9 +180,11 @@
<div class="icon"> <div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" /> <img src="./assets/images/box2-header-icon.png" alt="" />
</div> </div>
<div class="text">{{ "风险信号" }}</div> <div class="title">
<div class="num">{{ warningList.length }}</div> <div class="text">{{ "风险信号" }}</div>
<div class="more">{{ "更多 >" }}</div> <div class="num">{{ warningList.length }}</div>
</div>
<div class="more">{{ "更多 +" }}</div>
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div <div
...@@ -242,7 +244,7 @@ ...@@ -242,7 +244,7 @@
<div class="header-icon"> <div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" /> <img src="./assets/images/box4-header-icon.png" alt="" />
</div> </div>
<div class="header-title">{{ "法案趋势" }}</div> <div class="header-title">{{ "关键条款" }}</div>
</div> </div>
<div class="box4-main"> <div class="box4-main">
<div <div
...@@ -268,17 +270,20 @@ ...@@ -268,17 +270,20 @@
</div> </div>
<div class="home-main-footer"> <div class="home-main-footer">
<div class="home-main-footer-header"> <div class="home-main-footer-header">
<div class="btn-box"> <div class="btn-wrapper">
<div <div class="btn-box">
class="btn" <div
:class="{ btnActive: activeCate === cate.hylymc }" class="btn"
v-for="(cate, index) in categoryList" :class="{ btnActive: activeCate === cate.hylymc }"
:key="index" v-for="(cate, index) in categoryList"
@click="handleClickCate(cate)" :key="index"
> @click="handleClickCate(cate)"
{{ cate.hylymc }} >
{{ cate.hylymc }}
</div>
</div> </div>
</div> </div>
<div class="select-box"> <div class="select-box">
<el-select <el-select
v-model="releaseTime" v-model="releaseTime"
...@@ -764,6 +769,18 @@ onMounted(async () => { ...@@ -764,6 +769,18 @@ onMounted(async () => {
box-shadow: none; box-shadow: none;
} }
.home-wrapper { .home-wrapper {
.home-header {
height: 64px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
line-height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding-left: 160px;
}
.home-main { .home-main {
width: 1400px; width: 1400px;
margin: 0 auto; margin: 0 auto;
...@@ -773,15 +790,6 @@ onMounted(async () => { ...@@ -773,15 +790,6 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.home-main-header-top {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
margin-top: 43px;
}
.home-main-header-center { .home-main-header-center {
margin-top: 13px; margin-top: 13px;
width: 960px; width: 960px;
...@@ -865,8 +873,6 @@ onMounted(async () => { ...@@ -865,8 +873,6 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
position: relative; position: relative;
.box1-left { .box1-left {
position: absolute; position: absolute;
...@@ -909,10 +915,12 @@ onMounted(async () => { ...@@ -909,10 +915,12 @@ onMounted(async () => {
} }
} }
.box1-header { .box1-header {
height: 53px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box;
padding: 0 40px 0 30px;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
...@@ -925,14 +933,16 @@ onMounted(async () => { ...@@ -925,14 +933,16 @@ onMounted(async () => {
} }
} }
.title { .title {
height: 22px; width: 112px;
height: 48px;
background: var(--color-main-active);
margin-left: 18px; margin-left: 18px;
margin-top: 16px; color: #fff;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 48px;
text-align: center;
} }
} }
.box1-header-right { .box1-header-right {
...@@ -950,6 +960,8 @@ onMounted(async () => { ...@@ -950,6 +960,8 @@ onMounted(async () => {
display: flex; display: flex;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 22px;
box-sizing: border-box;
padding-left: 31px;
.box1-main-left { .box1-main-left {
margin-left: 37px; margin-left: 37px;
// flex: 1; // flex: 1;
...@@ -1039,7 +1051,7 @@ onMounted(async () => { ...@@ -1039,7 +1051,7 @@ onMounted(async () => {
.box1-main-left-info2 { .box1-main-left-info2 {
margin-top: 21px; margin-top: 21px;
height: 200px; height: 200px;
width: 100%; width: 400px;
position: relative; position: relative;
.time-line { .time-line {
position: absolute; position: absolute;
...@@ -1054,6 +1066,7 @@ onMounted(async () => { ...@@ -1054,6 +1066,7 @@ onMounted(async () => {
margin-bottom: 8px; margin-bottom: 8px;
height: 30px; height: 30px;
display: flex; display: flex;
// background: orange;
.item-icon { .item-icon {
margin-top: 2px; margin-top: 2px;
width: 10px; width: 10px;
...@@ -1061,8 +1074,8 @@ onMounted(async () => { ...@@ -1061,8 +1074,8 @@ onMounted(async () => {
position: relative; position: relative;
z-index: 1; z-index: 1;
img { img {
width: 100%; width: 10px;
height: 100%; height: 10px;
} }
} }
.itemTimeActive { .itemTimeActive {
...@@ -1083,7 +1096,7 @@ onMounted(async () => { ...@@ -1083,7 +1096,7 @@ onMounted(async () => {
line-height: 30px; line-height: 30px;
} }
.item-title { .item-title {
margin-left: 17px; margin-left: 10px;
width: 295px; width: 295px;
height: 30px; height: 30px;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
...@@ -1096,6 +1109,8 @@ onMounted(async () => { ...@@ -1096,6 +1109,8 @@ onMounted(async () => {
} }
} }
.box1-main-right { .box1-main-right {
margin-top: 50px;
height: 270px;
width: 350px; width: 350px;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
...@@ -1156,50 +1171,58 @@ onMounted(async () => { ...@@ -1156,50 +1171,58 @@ onMounted(async () => {
} }
.box2 { .box2 {
flex: 1; flex: 1;
padding-right: 20px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
height: 54px; height: 48px;
display: flex; display: flex;
box-sizing: border-box;
padding-right: 20px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 33px; margin-left: 18px;
margin-top: 18px; margin-top: 18px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.text { .title {
margin-left: 22px; margin-left: 18px;
margin-top: 16px; width: 148px;
height: 22px; height: 48px;
color: rgba(20, 89, 187, 1); background: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei; display: flex;
font-size: 16px; .text {
font-weight: 700; margin-left: 16px;
line-height: 22px; height: 22px;
} color: #fff;
.num { font-family: Microsoft YaHei;
width: 24px; font-size: 20px;
height: 20px; font-weight: 700;
text-align: center; line-height: 48px;
color: rgba(255, 255, 255, 1); }
font-family: Microsoft YaHei; .num {
font-size: 12px; width: 24px;
margin-left: 6px; height: 20px;
margin-top: 17px; text-align: center;
border: 1px solid rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
border-radius: 100px; font-family: Microsoft YaHei;
background: rgba(255, 77, 79, 1); font-size: 12px;
margin-left: 10px;
margin-top: 15px;
// border: 1px solid rgba(255, 255, 255, 1);
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
} }
.more { .more {
margin-top: 19px; margin-top: 19px;
margin-left: 256px; margin-left: 224px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
...@@ -1208,8 +1231,10 @@ onMounted(async () => { ...@@ -1208,8 +1231,10 @@ onMounted(async () => {
} }
} }
.box2-main { .box2-main {
height: 282px; height: 330px;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box;
padding-right: 20px;
.box2-main-item { .box2-main-item {
margin-left: 23px; margin-left: 23px;
height: 47px; height: 47px;
...@@ -1243,7 +1268,6 @@ onMounted(async () => { ...@@ -1243,7 +1268,6 @@ onMounted(async () => {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
height: 47px; height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
...@@ -1316,9 +1340,9 @@ onMounted(async () => { ...@@ -1316,9 +1340,9 @@ onMounted(async () => {
.box3-header-left { .box3-header-left {
display: flex; display: flex;
.box3-header-icon { .box3-header-icon {
margin-top: 15px; margin-top: 16px;
width: 13px; width: 19px;
height: 13px; height: 19px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1326,11 +1350,11 @@ onMounted(async () => { ...@@ -1326,11 +1350,11 @@ onMounted(async () => {
} }
.box3-header-title { .box3-header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 22px; margin-left: 19px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
...@@ -1382,15 +1406,16 @@ onMounted(async () => { ...@@ -1382,15 +1406,16 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box4-header { .box4-header {
width: 452px; width: 521px;
margin: 0 auto;
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
box-sizing: border-box;
padding-left: 22px;
.header-icon { .header-icon {
margin-top: 18px; margin-top: 15px;
width: 18px; width: 20px;
height: 18px; height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1398,11 +1423,11 @@ onMounted(async () => { ...@@ -1398,11 +1423,11 @@ onMounted(async () => {
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 16px;
margin-left: 26px; margin-left: 18px;
height: 22px; height: 22px;
color: rgba(20, 89, 187, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 22px;
} }
...@@ -1458,44 +1483,51 @@ onMounted(async () => { ...@@ -1458,44 +1483,51 @@ onMounted(async () => {
// width: 100%; // width: 100%;
height: 911px; height: 911px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
margin-bottom: 20px;
.home-main-footer-header { .home-main-footer-header {
margin-top: 37px; margin-top: 37px;
margin-bottom: 36px; margin-bottom: 36px;
// width: 1600px; // width: 1600px;
height: 42px; height: 62px;
// background: orange; // background: orange;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-wrapper {
width: 1300px; width: 1300px;
display: flex;
justify-content: space-between;
overflow-x: auto; overflow-x: auto;
.btn { .btn-box {
width: 150px; display: flex;
margin: 0 5px; // justify-content: space-between;
overflow: hidden; max-width: 2000px;
color: rgba(95, 101, 108, 1); .btn {
font-family: Microsoft YaHei; max-width: 100px;
font-size: 16px; min-width: 80px;
font-weight: 400; height: 42px;
line-height: 42px; margin: 0 5px;
text-align: center; overflow: hidden;
border-radius: 21px; color: rgba(95, 101, 108, 1);
background: rgba(20, 89, 187, 0); font-family: Microsoft YaHei;
padding: 0 5px; font-size: 16px;
cursor: pointer; font-weight: 400;
&:hover { line-height: 42px;
background: rgba(20, 89, 187, 0.1); text-align: center;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
padding: 0 16px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
} }
} .btnActive {
.btnActive { border-radius: 21px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff;
font-weight: 700;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
} }
} }
} }
...@@ -1510,9 +1542,11 @@ onMounted(async () => { ...@@ -1510,9 +1542,11 @@ onMounted(async () => {
// background: orange; // background: orange;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 10px; padding: 5px 10px;
// justify-content: space-between; // justify-content: space-between;
// justify-content: center; // justify-content: center;
overflow-y: auto;
height: 820px;
.main-item { .main-item {
width: 240px; width: 240px;
height: 320px; height: 320px;
......
src/views/decree/decreeHome/WordCloudMap.vue
浏览文件 @ 5e8a9085
...@@ -105,7 +105,7 @@ onBeforeUnmount(() => { ...@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.echarts-wrap { .echarts-wrap {
// width: 100%; // width: 100%;
width: 576px; width: 792px;
height: 215px; height: 401px;
} }
</style> </style>
src/views/decree/decreeHome/index.vue
浏览文件 @ 5e8a9085
...@@ -118,7 +118,7 @@ ...@@ -118,7 +118,7 @@
<div class="text">{{ "风险信号" }}</div> <div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div> <div class="num">{{ warningList.length }}</div>
</div> </div>
<div class="more">{{ "更多 >" }}</div> <div class="more">{{ "更多 +" }}</div>
</div> </div>
<div class="box2-main"> <div class="box2-main">
<div <div
...@@ -151,6 +151,225 @@ ...@@ -151,6 +151,225 @@
</div> </div>
</div> </div>
</div> </div>
<div class="center-center1">
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 0 }"
@click="handleClickCenter1Item(0)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 0 }"
>
{{ "唐纳德·特朗普任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 0 }"
>
{{ "2025.1.20-至今" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 1 }"
@click="handleClickCenter1Item(1)"
>
<div class="left">
<img src="./assets/images/p2.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 1 }"
>
{{ "乔·拜登任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 1 }"
>
{{ "2021.1.20-2025.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 2 }"
@click="handleClickCenter1Item(2)"
>
<div class="left">
<img src="./assets/images/p1.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 2 }"
>
{{ "唐纳德·特朗普任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 2 }"
>
{{ "2017.1.20-2021.1.20" }}
</div>
</div>
</div>
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 3 }"
@click="handleClickCenter1Item(3)"
>
<div class="left">
<img src="./assets/images/p3.png" alt="" />
</div>
<div class="right">
<div
class="name"
:class="{ nameActive: center1ActiveIndex === 3 }"
>
{{ "贝拉克·奥巴马任期" }}
</div>
<div
class="time"
:class="{ timeActive: center1ActiveIndex === 3 }"
>
{{ "2013.1.20-2017.1.20" }}
</div>
</div>
</div>
</div>
<div class="center-center2">
<div class="center2-header">
<div class="center2-header-left">
<div class="left">
<div class="icon">
<img src="./assets/images/p1.png" alt="" />
</div>
</div>
<div class="right">
<div class="right-item1">{{ "唐纳德·特朗普" }}</div>
<div class="right-item2">
<div class="icon">
<img src="./assets/images/icon1.png" alt="" />
</div>
<div class="text">{{ "共和党" }}</div>
</div>
<div class="right-item3">{{ "美国第45任总统" }}</div>
<div class="right-item4">{{ "2025.1.20-至今" }}</div>
</div>
</div>
<div class="center2-header-right">
<div class="top">
<div class="top-box">
<div class="item1">{{ "本月发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "1项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "4项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "今年发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "7项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "29项" }}</div>
</div>
</div>
<div class="top-box">
<div class="item1">{{ "任期内发布" }}</div>
<div class="item2">
<div class="item2-1">{{ "20项" }}</div>
<div class="item2-2">{{ "/" }}</div>
<div class="item2-3">{{ "96项" }}</div>
</div>
</div>
</div>
<div class="bottom">
<div class="icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="text">{{ "涉华政令数量/政令总数" }}</div>
</div>
</div>
</div>
<div class="center2-mid" id="chartCalendar"></div>
<div class="center2-footer">
<div class="center2-footer-left">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon2.png" alt="" />
</div>
<div class="text">{{ "主要内阁成员" }}</div>
</div>
<div class="main">
<div
class="item"
v-for="(item, index) in personList"
:key="index"
>
<div class="item-left">
<img :src="item.avator" alt="" />
</div>
<div class="item-right">
<div class="item-right-box1">{{ item.name }}</div>
<div class="item-right-box2">{{ item.posi }}</div>
</div>
</div>
</div>
</div>
<div class="center2-footer-right">
<div class="header">
<div class="icon">
<img src="./assets/images/center2-header-icon1.png" alt="" />
</div>
<div class="tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in list"
:key="index"
>
{{ item.title }}
</div>
</div>
<div class="right">
<div class="btn">
<img src="./assets/images/left-btn.png" alt="" />
</div>
<div class="btn">
<img src="./assets/images/right-btn.png" alt="" />
</div>
</div>
</div>
<div class="main">
<div
class="main-item"
v-for="(val, idx) in list[tabActiveIndex].data"
:key="idx"
>
<div class="id">{{ idx + 1 }}</div>
<div class="info">
<div class="info-header">
<div class="title">{{ val.title }}</div>
<div class="tag">{{ val.tag }}</div>
</div>
<div class="info-content">
{{ val.content }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="center-footer"> <div class="center-footer">
<div class="box3"> <div class="box3">
<div class="box3-header"> <div class="box3-header">
...@@ -158,15 +377,10 @@ ...@@ -158,15 +377,10 @@
<div class="box3-header-icon"> <div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" /> <img src="./assets/images/box3-header-icon.png" alt="" />
</div> </div>
<div class="box3-header-title">{{ "涉华政令数量" }}</div> <div class="box3-header-title">{{ "政令发布频度" }}</div>
</div> </div>
<div class="box3-header-right"> <div class="box3-header-right">
<div class="right-box rightBoxActive"> <img src="./assets/images/header-more.png" alt="" />
{{ "月度" }}
</div>
<div class="right-box">
{{ "年度" }}
</div>
</div> </div>
</div> </div>
<div class="box3-main" id="chart1"></div> <div class="box3-main" id="chart1"></div>
...@@ -176,9 +390,49 @@ ...@@ -176,9 +390,49 @@
<div class="header-icon"> <div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" /> <img src="./assets/images/box4-header-icon.png" alt="" />
</div> </div>
<div class="header-title">{{ "关键内容" }}</div> <div class="header-title">{{ "政令涉及领域" }}</div>
<div class="header-right">
<img src="./assets/images/header-more.png" alt="" />
</div>
</div>
<div class="box4-main" id="chart2"></div>
</div>
</div>
<div class="center-footer1">
<div class="box5">
<div class="box5-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "关键政令及举措" }}</div>
</div> </div>
<div class="box4-main"> <div class="box5-main">
<div
class="box5-item"
v-for="(item, index) in keyDecreeList"
:key="index"
>
<div class="icon">
<img src="./assets/images/warning.png" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="info-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
<div class="box6">
<div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box5-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "政令重点条款" }}</div>
</div>
<div class="box6-main">
<WordCloudMap :data="wordCloudData" :shape="circle" /> <WordCloudMap :data="wordCloudData" :shape="circle" />
</div> </div>
</div> </div>
...@@ -266,7 +520,174 @@ import router from "@/router"; ...@@ -266,7 +520,174 @@ import router from "@/router";
import WordCloudMap from "./WordCloudMap.vue"; import WordCloudMap from "./WordCloudMap.vue";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";
import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
import p3 from "./assets/images/iconp3.png";
import p4 from "./assets/images/iconp4.png";
import p5 from "./assets/images/iconp5.png";
import p6 from "./assets/images/iconp6.png";
import p7 from "./assets/images/iconp7.png";
import p8 from "./assets/images/iconp8.png";
import p9 from "./assets/images/iconp9.png";
import p10 from "./assets/images/iconp10.png";
const center1ActiveIndex = ref(0);
const handleClickCenter1Item = (index) => {
center1ActiveIndex.value = index;
};
const personList = ref([
{
name: "詹姆斯·JD·万斯",
posi: "副总统",
avator: p1,
},
{
name: "马尔科·卢比奥",
posi: "国务卿",
avator: p2,
},
{
name: "斯科特·贝森特",
posi: "财政部长",
avator: p3,
},
{
name: "皮特·赫格塞斯",
posi: "国防部长",
avator: p4,
},
{
name: "帕姆·邦迪",
posi: "司法部长",
avator: p5,
},
{
name: "霍华德·卢特尼克",
posi: "商务部长",
avator: p6,
},
{
name: "苏西·威尔斯",
posi: "白宫办公厅主任",
avator: p7,
},
{
name: "克里斯蒂·诺姆",
posi: "国土安全部长",
avator: p8,
},
{
name: "道格·伯古姆",
posi: "内政部长",
avator: p9,
},
{
name: "克里斯·赖特",
posi: "能源部长",
avator: p10,
},
]);
const tabActiveIndex = ref(0);
const list = [
{
title: "内政情况",
data: [
{
title: "司法与法律政策",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
{
title: "外交情况",
data: [
{
title: "司法与法律政策1",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
{
title: "经济情况",
data: [
{
title: "司法与法律政策2",
tag: "司法改革",
content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
},
{
title: "移民政策",
tag: "边境安全",
content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
},
{
title: "能源政策",
tag: "能源独立",
content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
},
{
title: "关税政策",
tag: "能征关税",
content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
},
{
title: "外交政策",
tag: "能华强硬",
content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
},
],
},
];
const tagList = ref([ const tagList = ref([
{ {
...@@ -517,7 +938,6 @@ const handleClickCate = (cate) => { ...@@ -517,7 +938,6 @@ const handleClickCate = (cate) => {
handleGetBillsByType(); handleGetBillsByType();
}; };
const activeNavIndex = ref(0); const activeNavIndex = ref(0);
const handleClickNav = (index, item) => { const handleClickNav = (index, item) => {
...@@ -535,28 +955,50 @@ const setChart = (option, chartId) => { ...@@ -535,28 +955,50 @@ const setChart = (option, chartId) => {
}; };
const chart1Data = ref({ const chart1Data = ref({
title: [ dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
"2024-09", dataY: [219, 228, 129, 159, 152, 157, 78],
"2024-10",
"2024-11",
"2024-12",
"2025-01",
"2025-02",
"2025-03",
"2025-04",
"2025-05",
"2025-06",
"2025-07",
"2025-08",
],
data: [
{
name: "提出法案",
value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
},
],
}); });
const chart2Data = ref([
{
name: "集成电路",
value: 50,
},
{
name: "人工智能",
value: 46,
},
{
name: "通信网络",
value: 40,
},
{
name: "量子科技",
value: 32,
},
{
name: "能源",
value: 31,
},
{
name: "生物科技",
value: 30,
},
{
name: "航空航天",
value: 24,
},
]);
const colorList = [
"#69B1FF",
"#FFC069",
"#87E8DE",
"#85A5FF",
"#FF7875",
"#B37FEB",
"#4096FF",
];
// 根据法案类型获取法案列表 // 根据法案类型获取法案列表
// const handleGetBillsByType = async () => { // const handleGetBillsByType = async () => {
...@@ -577,13 +1019,80 @@ const chart1Data = ref({ ...@@ -577,13 +1019,80 @@ const chart1Data = ref({
// } catch (error) {} // } catch (error) {}
// }; // };
onMounted(async () => { const keyDecreeList = ref([
{
title: "关于“对等关税”的行政令",
time: "2025年4月",
content: `对所有贸易伙伴设立10%的“最低基准关税”，并对中国商品加征高达34%​​ 的额外关税，使针对中国的总关税水平大幅提升。`,
},
{
title: "《美国优先投资政策》备忘录",
time: "2025年2月",
content: `将中国列为“外国对手”，系统性收紧中美在半导体、人工智能、量子技术等前沿科技领域的双向投资，构建对华科技封锁体系。`,
},
{
title: "针对TikTok的行政令",
time: "2025年2月",
content: `以所谓“信息安全”为由，要求字节跳动剥离TikTok在美业务，并禁止通过微信、支付宝等中国应用程序进行交易。`,
},
{
title: "签署《外国投资风险审查现代化法》",
time: "2025年2月",
content: `极大加强了美国外国投资委员会（CFIUS）的权限，重点关注来自中国的投资。`,
},
]);
const calendarData = ref([
["2025-01-01", 20],
["2025-01-05", 120],
["2025-01-09", 220],
["2025-01-15", 320],
["2025-01-20", 120],
["2025-01-24", 420],
["2025-02-05", 80],
["2025-02-08", 280],
["2025-02-18", 480],
["2025-02-11", 420],
["2025-02-21", 320],
["2025-03-05", 160],
["2025-03-09", 260],
["2025-03-19", 460],
["2025-03-26", 430],
["2025-04-01", 70],
["2025-04-05", 170],
["2025-04-11", 270],
["2025-04-18", 370],
["2025-05-05", 210],
["2025-05-09", 210],
["2025-05-15", 410],
["2025-05-22", 480],
["2025-06-06", 45],
["2025-06-09", 415],
["2025-06-16", 245],
["2025-06-19", 332],
["2025-07-04", 127],
["2025-07-09", 327],
["2025-07-24", 427],
["2025-08-08", 150],
["2025-08-11", 250],
["2025-08-15", 350],
["2025-08-22", 460],
["2025-09-10", 480],
["2025-09-18", 312],
["2025-10-15", 60],
["2025-10-19", 80],
["2025-10-21", 190],
]);
let chart1 = getMultiLineChart( onMounted(async () => {
chart1Data.value.title, let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
chart1Data.value.data[0].value
);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
let chart2 = getPieChart(chart2Data.value, colorList);
setChart(chart2, "chart2");
let chartCalendar = getCalendarHeatChart(calendarData.value);
setChart(chartCalendar, "chartCalendar");
}); });
</script> </script>
...@@ -602,10 +1111,6 @@ onMounted(async () => { ...@@ -602,10 +1111,6 @@ onMounted(async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
// position: sticky;
// left: 0;
// top: 0;
// z-index: 9999;
.home-main-header-top { .home-main-header-top {
width: 100%; width: 100%;
height: 64px; height: 64px;
...@@ -706,8 +1211,6 @@ onMounted(async () => { ...@@ -706,8 +1211,6 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
position: relative; position: relative;
.box1-left { .box1-left {
position: absolute; position: absolute;
...@@ -756,6 +1259,7 @@ onMounted(async () => { ...@@ -756,6 +1259,7 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
margin-left: 19px;
.icon { .icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -787,12 +1291,16 @@ onMounted(async () => { ...@@ -787,12 +1291,16 @@ onMounted(async () => {
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
cursor: pointer; cursor: pointer;
margin-right: 39px;
} }
} }
.box1-main { .box1-main {
display: flex; display: flex;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 22px;
padding-left: 31px;
padding-right: 41px;
box-sizing: border-box;
.box1-main-left { .box1-main-left {
width: 458px; width: 458px;
height: 353px; height: 353px;
...@@ -887,7 +1395,6 @@ onMounted(async () => { ...@@ -887,7 +1395,6 @@ onMounted(async () => {
} }
.box2 { .box2 {
width: 521px; width: 521px;
padding-right: 20px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
...@@ -895,6 +1402,7 @@ onMounted(async () => { ...@@ -895,6 +1402,7 @@ onMounted(async () => {
.box2-header { .box2-header {
height: 54px; height: 54px;
display: flex; display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
...@@ -942,9 +1450,12 @@ onMounted(async () => { ...@@ -942,9 +1450,12 @@ onMounted(async () => {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 16px; line-height: 16px;
cursor: pointer;
} }
} }
.box2-main { .box2-main {
box-sizing: border-box;
padding-right: 20px;
height: 282px; height: 282px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
...@@ -980,7 +1491,6 @@ onMounted(async () => { ...@@ -980,7 +1491,6 @@ onMounted(async () => {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
height: 47px; height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
...@@ -1034,18 +1544,444 @@ onMounted(async () => { ...@@ -1034,18 +1544,444 @@ onMounted(async () => {
} }
} }
} }
.center-center1 {
margin: 0 auto;
margin-top: 24px;
height: 100px;
width: 1600px;
border-radius: 50px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 4px 5px;
.center1-item {
width: 351px;
height: 92px;
border-radius: 48px;
display: flex;
cursor: pointer;
&:hover {
background: rgba(231, 243, 255, 1);
}
.left {
margin-top: 15px;
margin-left: 39px;
width: 60px;
height: 60px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 8px;
.name {
height: 31px;
margin-top: 16px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 31px;
}
.nameActive {
color: rgba(10, 87, 166, 1);
}
.time {
margin-top: 1px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.timeActive {
color: rgba(10, 87, 166, 1);
}
}
}
.center1ItemActive {
background: rgba(231, 243, 255, 1);
}
}
.center-center2 {
margin: 0 auto;
margin-top: 24px;
width: 1600px;
height: 960px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.center2-header {
display: flex;
justify-content: space-between;
.center2-header-left {
margin-left: 62px;
display: flex;
.left {
width: 140px;
height: 175px;
border-radius: 0px 0px 70px 70px;
background: rgba(231, 243, 255, 1);
overflow: hidden;
.icon {
width: 128px;
height: 128px;
border-radius: 75px;
margin-top: 41px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
.right {
margin-left: 29px;
.right-item1 {
margin-top: 41px;
height: 31px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 24px;
font-weight: 700;
line-height: 32px;
}
.right-item2 {
display: flex;
margin-top: 7px;
.icon {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
}
.right-item3 {
margin-top: 10px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
.right-item4 {
margin-top: 8px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 24px;
}
}
}
.center2-header-right {
margin-right: 59px;
margin-top: 47px;
.top {
display: flex;
.top-box {
width: 180px;
height: 72px;
margin-left: 50px;
.item1 {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
text-align: right;
}
.item2 {
margin-top: 4px;
font-family: Microsoft YaHei;
font-weight: 700;
display: flex;
justify-content: flex-end;
.item2-3 {
height: 42px;
color: rgba(10, 87, 166, 1);
font-size: 32px;
line-height: 42px;
}
.item2-2 {
height: 24px;
margin-top: 9px;
margin-left: 5px;
margin-right: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.item2-1 {
height: 42px;
color: rgba(206, 79, 81, 1);
font-size: 32px;
line-height: 42px;
}
}
}
}
.bottom {
height: 22px;
margin-top: 29px;
display: flex;
justify-content: flex-end;
.icon {
margin-top: 4px;
width: 14px;
height: 14px;
margin-right: 8px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 22px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
}
}
}
.center2-mid {
width: 1479px;
height: 189px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
margin: 40px auto 0;
}
.center2-footer {
display: flex;
.center2-footer-left {
width: 732px;
margin-left: 58px;
margin-top: 21px;
.header {
display: flex;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
margin-top: 15px;
margin-left: 20px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.text {
margin-left: 20px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
}
.main {
width: 732px;
height: 470px;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
padding-top: 9px;
.item {
width: 50%;
height: 80px;
display: flex;
margin-top: 8px;
.item-left {
width: 60px;
height: 60px;
margin-top: 10px;
margin-left: 16px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 13px;
.item-right-box1 {
margin-top: 15px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.item-right-box2 {
margin-top: 1px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.center2-footer-right {
margin-left: 21px;
margin-top: 16px;
width: 730px;
.header {
height: 54px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.icon {
width: 24px;
height: 24px;
margin-left: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.tab-box {
margin-left: 20px;
width: 500px;
display: flex;
.tab {
height: 54px;
margin-right: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 54px;
padding: 0 2px;
box-sizing: border-box;
}
.tabActive {
font-weight: 700;
color: var(--color-main-active);
border-bottom: 3px solid var(--color-main-active);
}
}
.right {
width: 80px;
margin-left: 90px;
display: flex;
justify-content: space-between;
.btn {
width: 28px;
height: 28px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
}
}
}
}
.main {
height: 475px;
margin-top: 5px;
overflow-y: hidden;
.main-item {
display: flex;
margin-top: 20px;
.id {
margin-top: 3px;
margin-left: 2px;
width: 36px;
height: 36px;
border-radius: 18px;
background: #e7f3ff;
line-height: 36px;
text-align: center;
color: var(--color-main-active);
}
.info {
margin-left: 13px;
width: 672px;
.info-header {
display: flex;
justify-content: space-between;
height: 24px;
.title {
height: 24px;
margin-top: 1px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
height: 24px;
line-height: 24px;
border-radius: 4px;
padding: 0 8px;
background: var(--tag-btn2-bg-color);
color: var(--tag-btn2-text-color);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
.info-content {
margin-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
}
.center-footer { .center-footer {
margin-top: 21px; margin-top: 21px;
height: 450px; height: 452px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.box3 { .box3 {
width: 1064px; width: 792px;
height: 450px; height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-radius: 4px;
.box3-header { .box3-header {
height: 53px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
...@@ -1054,48 +1990,35 @@ onMounted(async () => { ...@@ -1054,48 +1990,35 @@ onMounted(async () => {
.box3-header-left { .box3-header-left {
display: flex; display: flex;
.box3-header-icon { .box3-header-icon {
margin-top: 15px; margin-top: 14px;
width: 13px; margin-left: 4px;
height: 13px; width: 17px;
height: 17px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box3-header-title { .box3-header-title {
margin-top: 16px; margin-top: 11px;
margin-left: 22px; margin-left: 19px;
height: 22px; height: 26px;
color: rgba(20, 89, 187, 1); color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 26px;
} }
} }
.box3-header-right { .box3-header-right {
display: flex; width: 49px;
justify-content: flex-end; height: 24px;
width: 178px; margin-top: 12px;
height: 22px; margin-right: 7px;
margin-top: 11px; cursor: pointer;
.right-box { img {
width: 48px; width: 100%;
height: 28px; height: 100%;
text-align: center;
line-height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
margin-left: 8px;
cursor: pointer;
}
.rightBoxActive {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(10, 87, 166, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
} }
} }
} }
...@@ -1104,41 +2027,180 @@ onMounted(async () => { ...@@ -1104,41 +2027,180 @@ onMounted(async () => {
} }
} }
.box4 { .box4 {
margin-left: 20px; margin-left: 16px;
width: 521px; width: 792px;
height: 450px; height: 452px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-radius: 4px;
.box4-header { .box4-header {
width: 452px;
margin: 0 auto; margin: 0 auto;
height: 53px; height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.header-icon { .header-icon {
margin-top: 18px; margin-top: 16px;
width: 18px; margin-left: 22px;
height: 18px; width: 20px;
height: 20px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.header-title { .header-title {
margin-top: 16px; margin-top: 12px;
margin-left: 26px; margin-left: 18px;
height: 22px; height: 26px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 22px; line-height: 26px;
}
.header-right {
margin-left: 550px;
width: 49px;
height: 24px;
margin-top: 12px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
} }
} }
.box4-main { .box4-main {
width: 452px;
margin-top: 8px; margin-top: 8px;
height: 360px; height: 390px;
}
}
}
.center-footer1 {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box5 {
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box5-header {
width: 792px;
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.header-icon {
width: 22px;
height: 20px;
margin-left: 25px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
height: 26px;
margin-top: 11px;
margin-left: 13px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box5-main {
height: 400px;
box-sizing: border-box;
.box5-item {
width: 730px;
margin-top: 16px;
margin-left: 25px;
display: flex;
.icon {
margin-top: 6px;
width: 24px;
height: 22px;
img {
width: 100%;
height: 100%;
}
}
.info {
margin-left: 13px;
width: 100%;
.info-header {
display: flex;
margin-top: 4px;
justify-content: space-between;
.title {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.info-content {
margin-top: 6px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
.box6 {
margin-left: 16px;
width: 792px;
height: 450px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 792px;
height: 48px;
display: flex;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.header-icon {
width: 22px;
height: 20px;
margin-left: 25px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
height: 26px;
margin-top: 11px;
margin-left: 13px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box6-main {
height: 401px;
} }
} }
} }
......
src/views/decree/decreeHome/utils/barChart.js 0 → 100644
浏览文件 @ 5e8a9085
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: true,
position: 'top',
color: 'rgba(10, 87, 166, 1)',
fontWeight: 'bold', // 文字加粗
fontSize: 14,
formatter: function (params) {
return params.value
},
},
barWidth: 20,
itemStyle: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 1, 0, 0,
[{
offset: 0,
color: 'rgba(10, 87, 166, 0)'
},
{
offset: 1,
color: 'rgba(10, 87, 166, 1)'
}
]);
},
barBorderRadius: 10,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/decree/decreeHome/utils/cleandarHeat.js 0 → 100644
浏览文件 @ 5e8a9085
const getCalendarHeatChart = (data) => {
const option = {
title: {
top: 30,
left: 'center',
text: `日历热力图`,
show: false
},
tooltip: {
position: 'top',
formatter: function (params) {
const date = new Date(params.data[0]);
return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}<br/>数值: ${params.data[1]}`;
}
},
visualMap: {
show: false,
min: 0,
max: 500,
calculable: true,
orient: 'horizontal',
left: 'center',
top: 65,
inRange: {
color: ['#E7F3FF', '#8AC4FF', '#0A57A6', '#FFC069', '#CE4F51']
},
textStyle: {
color: '#7f8c8d'
}
},
calendar: {
top: 24,
left: 30,
right: 30,
cellSize: ['auto', 20],
range: '2025',
itemStyle: {
borderWidth: 0.5,
borderColor: '#ccc'
},
yearLabel: { show: true },
monthLabel: {
nameMap: 'cn'
},
dayLabel: {
nameMap: ['日', '一', '二', '三', '四', '五', '六'],
show: false
}
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: data
}
};
return option
}
export default getCalendarHeatChart
\ No newline at end of file
src/views/decree/decreeHome/utils/piechart.js 0 → 100644
浏览文件 @ 5e8a9085
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [110, 143],
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: 24,
rich: {
time: {
fontSize: 16,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
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/decree/decreeLayout/index.vue
浏览文件 @ 5e8a9085
...@@ -204,7 +204,7 @@ const mainHeaderBtnList = ref([ ...@@ -204,7 +204,7 @@ const mainHeaderBtnList = ref([
icon: icon3, icon: icon3,
activeIcon: icon3Active, activeIcon: icon3Active,
name: "影响分析", name: "影响分析",
// path: "/billLayout/influence", path: "/decreeLayout/influence",
} }
]); ]);
...@@ -233,153 +233,153 @@ onMounted(() => { ...@@ -233,153 +233,153 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-container { .layout-container {
width: 1920px; width: 1920px;
height: 1080px; height: 1016px;
background: rgba(249, 250, 252, 1); background: rgba(249, 250, 252, 1);
position: relative; position: relative;
.layout-header { // .layout-header {
width: 1920px; // width: 1920px;
height: 64px; // height: 64px;
// background: #0a121e; // // background: #0a121e;
background: #fff; // background: #fff;
// border-bottom: 1px solid rgba(0, 0, 0, 0.1); // // border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1); // box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
// margin-bottom: 13px; // // margin-bottom: 13px;
display: flex; // display: flex;
position: relative; // position: relative;
z-index: 99; // z-index: 99;
.layout-header-left { // .layout-header-left {
width: 480px; // width: 480px;
display: flex; // display: flex;
.logo-box { // .logo-box {
width: 36px; // width: 36px;
height: 36px; // height: 36px;
margin: 14px; // margin: 14px;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
border-radius: 6px; // border-radius: 6px;
} // }
} // }
.title-box { // .title-box {
height: 64px; // height: 64px;
width: 350px; // width: 350px;
margin: 0 5px; // margin: 0 5px;
color: #eee; // color: #eee;
line-height: 64px; // line-height: 64px;
font-size: 20px; // font-size: 20px;
font-weight: bold; // font-weight: bold;
color: rgba(10, 18, 30, 1); // color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei; // font-family: Microsoft YaHei;
font-size: 22px; // font-size: 22px;
font-weight: 700; // font-weight: 700;
text-align: left; // text-align: left;
} // }
} // }
.layout-header-center { // .layout-header-center {
width: 700px; // width: 700px;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
margin-left: 200px; // margin-left: 200px;
.nav-item { // .nav-item {
border-radius: 5px; // border-radius: 5px;
cursor: pointer; // cursor: pointer;
display: flex; // display: flex;
&:hover { // &:hover {
background: rgba(255, 255, 255, 0.2); // background: rgba(255, 255, 255, 0.2);
} // }
.nav-icon-box { // .nav-icon-box {
width: 25px; // width: 25px;
height: 25px; // height: 25px;
margin: 22px 0 20px 5px; // margin: 22px 0 20px 5px;
.nav-icon { // .nav-icon {
width: 20px; // width: 20px;
height: 20px; // height: 20px;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
} // }
} // }
.nav-icon-active { // .nav-icon-active {
width: 20px; // width: 20px;
height: 20px; // height: 20px;
img { // img {
width: 100%; // width: 100%;
height: 100%; // height: 100%;
} // }
} // }
} // }
.name-box { // .name-box {
margin: 18px 5px; // margin: 18px 5px;
height: 30px; // height: 30px;
text-align: center; // text-align: center;
line-height: 30px; // line-height: 30px;
color: rgba(59, 65, 75, 1); // color: rgba(59, 65, 75, 1);
letter-spacing: 2px; // letter-spacing: 2px;
font-size: 18px; // font-size: 18px;
} // }
// .nameActive { // // .nameActive {
// color: #ea9518; // // color: #ea9518;
// font-weight: bold; // // font-weight: bold;
// } // // }
} // }
.navItemActive { // .navItemActive {
// background: #295dab; // // background: #295dab;
// border-bottom: 4px solid #ea9518; // // border-bottom: 4px solid #ea9518;
// &:hover { // // &:hover {
// background: #295dab; // // background: #295dab;
// border-bottom: 4px solid #ea9518; // // border-bottom: 4px solid #ea9518;
// } // // }
} // }
} // }
.layout-header-right { // .layout-header-right {
flex: 1; // flex: 1;
display: flex; // display: flex;
justify-content: flex-end; // justify-content: flex-end;
.nav-search { // .nav-search {
width: 22px; // width: 22px;
height: 22px; // height: 22px;
margin: 21px 0; // margin: 21px 0;
} // }
.nav-message { // .nav-message {
width: 22px; // width: 22px;
height: 22px; // height: 22px;
margin: 21px 30px; // margin: 21px 30px;
} // }
.nav-usr { // .nav-usr {
width: 110px; // width: 110px;
display: flex; // display: flex;
height: 40px; // height: 40px;
margin: 12px 5px 12px 0; // margin: 12px 5px 12px 0;
.usr-img { // .usr-img {
margin-top: 4px; // margin-top: 4px;
height: 32px; // height: 32px;
width: 32px; // width: 32px;
background: rgba(255, 255, 255, 0.5); // background: rgba(255, 255, 255, 0.5);
border-radius: 100%; // border-radius: 100%;
box-sizing: border-box; // box-sizing: border-box;
padding: 4px; // padding: 4px;
// img { // // img {
// width: 100%; // // width: 100%;
// height: 100%; // // height: 100%;
// } // // }
} // }
.usr-info { // .usr-info {
height: 40px; // height: 40px;
line-height: 40px; // line-height: 40px;
text-align: center; // text-align: center;
font-size: 14px; // font-size: 14px;
margin-left: 10px; // margin-left: 10px;
} // }
} // }
} // }
} // }
.layout-main { .layout-main {
width: 100%; width: 100%;
height: calc(100% - 64px); height: 100%;
.layout-main-header { .layout-main-header {
height: 137px; height: 137px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
......
src/views/decree/decreeLayout/influence/index.vue 0 → 100644
浏览文件 @ 5e8a9085
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "企业影响分析" }}</div>
<div class="header-right1">
<el-checkbox
v-model="isChecked"
label="只看中国企业"
size="large"
/>
</div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box1-top" id="chart1"></div>
<div class="box1-tab-box">
<div
class="tab"
:class="{ tabActive: tabActiveIndex === index }"
v-for="(item, index) in tabList"
:key="index"
>
{{ item }}
</div>
</div>
<div class="box1-list-box">
<div
class="box1-item"
v-for="(item, index) in companyList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.name }}</div>
<div class="icon">
<img
v-if="item.status === 'up'"
src="./assets/images/up.png"
alt=""
/>
<img v-else src="./assets/images/down.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ `共105家企业` }}</div>
<div class="box1-footer-right">
<el-pagination
background
layout="prev, pager, next"
size="small"
:total="105"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "政令举措落实分析" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./assets/images/point.png" alt="" />
</div>
<div class="box2-item-header">
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
</div>
</div>
</div>
<div class="box2-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="footer-center">
{{
`政令目前仍处于关键的执行框架搭建期。该政令旨在通过推动“全栈式”美国AI技术出口，巩固其技术霸权并减少国际社会对美国对手国家技术的依赖`
}}
</div>
<div class="footer-right">
<img src="./assets/images/footer-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "历史相似举措及落实情况" }}</div>
<div class="header-right1"></div>
<div class="header-right">
<img src="./assets/images/header-right-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in box3List" :key="index">
<div class="box3-item-left">
<div class="text">
{{ item.type }}
</div>
</div>
<div class="box3-item-right">
<div class="right-top">
<div class="title">{{ item.title }}</div>
<div class="tag">{{ item.tag }}</div>
</div>
<div class="right-footer">
<div class="content">{{ item.content }}</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
</div>
<div class="box3-footer">
<div class="footer-left">
<img src="./assets/images/footer-icon1.png" alt="" />
</div>
<div class="footer-center">
{{
`中美经济深度交织，全面脱钩成本高昂且不现实。其核心揭示了三大纽带：生产网络相互依存使强行分离代价巨大；人才双向流动推动创新却成政策博弈焦点；能源领域合作与竞争并存，关乎全球气候治理与经济博弈。报告主张理性竞合，在竞争中找到合作路径。`
}}
</div>
<div class="footer-right">
<img src="./assets/images/footer-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";
const chart1Data = ref({
title: ["集成电路", "新能源", "人工智能", "先进制造", "量子科技"],
value: [109, 95, 79, 25, 11],
});
const tabActiveIndex = ref(0);
const tabList = ref(["集成电路", "新能源", "人工智能", "先进制造", "量子科技"]);
const companyList = ref([
{
name: "宁德时代新能源科技股份有限公司",
status: "down",
},
{
name: "比亚迪股份有限公司",
status: "down",
},
{
name: "隆基绿能科技股份有限公司",
status: "down",
},
{
name: "晶科能源控股有限公司",
status: "down",
},
{
name: "厦门海辰储能科技股份有限公司",
status: "down",
},
{
name: "国轩高科股份有限公司",
status: "up",
},
{
name: "远景科技集团",
status: "down",
},
{
name: "惠州亿纬锂能股份有限公司",
status: "down",
},
{
name: "天合光能股份有限公司",
status: "down",
},
{
name: "晶澳太阳能科技股份有限公司",
status: "up",
},
]);
const companyTotalNum = ref(105);
const isChecked = ref(true);
const box3List = ref([
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "云计算出口管制",
content: "落实情况：部分有效，但执行难度大。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "芯片与科学法案",
content: "落实情况：正在实施，效果待观察。",
time: "2022-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "AI芯片出口管制",
content: "落实情况：部分有效，但催生中国自主创新。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
{
type: "科技法案",
title: "瓦森纳安排",
content: "落实情况：持续有效，但面临技术快速迭代挑战。",
time: "1996-至今",
tag: "人工智能",
},
]);
const timeLineList = ref([
{
time: "2025年7月25日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
{
time: "2025年7月31日",
content: "英伟达、微软、谷歌等企业已提交初步技术栈提案。",
},
{
time: "2025年8月5日",
content: "国务院开始与盟友国家进行初步磋商。",
},
{
time: "2025年8月9日",
content:"国防部、能源部安全审查流程尚未最终确定。",
},
{
time: "2025年8月12日",
content: "商务部已成立AI出口计划办公室，并开始招募专业人员。",
},
]);
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
let chart1 = getBarChart(chart1Data.value.title, chart1Data.value.value);
setChart(chart1, "chart1");
});
</script>
<style lang="scss" scoped>
.wrapper {
width: 100%;
height: 879px;
display: flex;
.box-header {
display: flex;
height: 48px;
position: relative;
.icon {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 24px;
margin-left: 14px;
margin-top: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.header-right {
top: 14px;
right: 12px;
position: absolute;
width: 28px;
width: 28px;
img {
width: 100%;
height: 100%;
}
}
.header-right1 {
position: absolute;
top: 8px;
right: 60px;
}
}
.left {
margin-left: 160px;
margin-top: 16px;
.box1 {
width: 480px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-top {
width: 446px;
height: 188px;
margin: 7px auto 0;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
.box1-tab-box {
height: 57px;
width: 446px;
margin: 0 auto;
display: flex;
.tab {
margin-top: 18px;
margin-right: 8px;
padding: 0 8px;
height: 28px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
cursor: pointer;
&:hover {
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.tabActive {
color: var(--btn-active-text-color);
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.box1-list-box {
height: 480px;
width: 446px;
margin: 0 auto;
.box1-item {
width: 446px;
height: 48px;
box-sizing: border-box;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.id {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 12px;
border-radius: 12px;
background: #e7f3ff;
font-size: 14px;
font-family: Microsoft YaHei;
text-align: center;
line-height: 24px;
color: var(--color-main-active);
}
.title {
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 48px;
}
.icon {
width: 8px;
height: 6px;
margin-top: 14px;
margin-left: 6px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
height: 65px;
width: 446px;
margin: 0 auto;
display: flex;
justify-content: space-between;
box-sizing: border-box;
.box1-footer-left {
margin-top: 25px;
height: 18px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
}
.box1-footer-right {
margin-top: 23px;
}
}
}
}
.right {
margin-left: 17px;
margin-top: 16px;
.box2 {
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 10px;
height: 260px;
width: 1054px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
padding-left: 120px;
.box2-line-box {
position: absolute;
left: 0;
top: 114px;
height: 8px;
width: 1556px;
background: url("./assets/images/line-bg.png") repeat;
}
.box2-item {
width: 300px;
height: 120px;
// background: pink;
position: relative;
box-sizing: border-box;
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: rgba(10, 87, 166, 1);
height: 26px;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img{
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
}
.box2ItemFooter {
margin-top: 118px;
margin-left: -120px;
box-sizing: border-box;
padding-top: 20px;
// display: flex;
// flex-direction: column;
// justify-content: flex-end;
}
}
.box2-footer {
margin-top: 6px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
}
}
}
}
.box3 {
margin-top: 15px;
width: 1103px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
height: 264px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 21px;
margin-right: 26px;
.box3-item {
margin-top: 12px;
width: 520px;
height: 76px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
display: flex;
.box3-item-left {
width: 54px;
height: 54px;
border-radius: 27px;
background: #e7f3ff;
text-align: center;
margin-top: 11px;
margin-left: 14px;
.text {
width: 33px;
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 700;
line-height: 18px;
margin: 11px auto;
}
}
.box3-item-right {
margin-left: 8px;
width: 433px;
.right-top {
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.tag {
margin-top: 11px;
width: 72px;
height: 24px;
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
border-radius: 4px;
background: rgba(255, 241, 240, 1);
color: rgba(245, 34, 45, 1);
}
}
.right-footer {
margin-top: 2px;
display: flex;
justify-content: space-between;
.content {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
width: 353px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
width: 78px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.box3-footer {
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
margin: 14px auto 0;
padding: 6px 12px 6px 12px;
display: flex;
.footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
margin-left: 13px;
width: 964px;
height: 48px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.footer-right {
margin-left: 13px;
width: 24px;
height: 24px;
border-radius: 12px;
background: rgba(231, 243, 255, 1);
margin-top: 14px;
img {
margin: 6px;
width: 12px;
height: 12px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/influence/utils/barChart.js 0 → 100644
浏览文件 @ 5e8a9085
import * as echarts from "echarts";
const getBarChart = (nameList, valueList) => {
const colorList = ['#b37feb', '#ffc53e', '#36cfc9', '#5c80f7', '#ff7d7a', '#4a9cff']
const option = {
tooltip: {},
grid: {
top: '3%',
right: '7%',
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.map((item,index) => {
return {
value: item,
label: {
textStyle: {
color: colorList[index]
}
}
};
}
),
barWidth: 8,
label: {
show: true,
position: [355, 0],
formatter: function(params) {
return params.value
}
},
itemStyle: {
color: function (params) {
var colorList = [
['rgba(179, 127, 235, 0.1)', 'rgba(179, 127, 235, 1)'],
['rgba(255, 197, 61, 0.1)', 'rgba(255, 197, 61, 1)'],
['rgba(54, 207, 201, 0.1)', 'rgba(54, 207, 201, 1)'],
['rgba(89, 126, 247, 0.1)', 'rgba(89, 126, 247, 1)'],
['rgba(255, 192, 105, 0.1)', 'rgba(255, 192, 105, 1)'],
// ['#fff', '#4a9cff'],
];
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: colorList[index][0]
},
{
offset: 1,
color: colorList[index][1]
}
]);
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/deepDig/index.vue
浏览文件 @ 5e8a9085
...@@ -86,7 +86,7 @@ const handleClickLeftSiderBtn = (item,index) => { ...@@ -86,7 +86,7 @@ const handleClickLeftSiderBtn = (item,index) => {
} }
} }
.siderBtnActive { .siderBtnActive {
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
.btn-text { .btn-text {
color: #fff !important; color: #fff !important;
} }
......
src/views/deepDig/processAnalysis/index.vue
浏览文件 @ 5e8a9085
...@@ -1109,14 +1109,14 @@ onMounted(async () => { ...@@ -1109,14 +1109,14 @@ onMounted(async () => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 22px; margin-left: 22px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -1222,7 +1222,7 @@ onMounted(async () => { ...@@ -1222,7 +1222,7 @@ onMounted(async () => {
font-weight: 700; font-weight: 700;
} }
.item:nth-child(3) { .item:nth-child(3) {
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1262,7 +1262,7 @@ onMounted(async () => { ...@@ -1262,7 +1262,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1541,7 +1541,7 @@ onMounted(async () => { ...@@ -1541,7 +1541,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1821,7 +1821,7 @@ onMounted(async () => { ...@@ -1821,7 +1821,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
......
src/views/deepDig/processOverview/index.vue
浏览文件 @ 5e8a9085
...@@ -741,14 +741,14 @@ const handleClickDetail = (isShow) => { ...@@ -741,14 +741,14 @@ const handleClickDetail = (isShow) => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -1241,7 +1241,7 @@ const handleClickDetail = (isShow) => { ...@@ -1241,7 +1241,7 @@ const handleClickDetail = (isShow) => {
margin-top: 8px; margin-top: 8px;
width: 1617px; width: 1617px;
height: 60px; height: 60px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -1344,7 +1344,7 @@ const handleClickDetail = (isShow) => { ...@@ -1344,7 +1344,7 @@ const handleClickDetail = (isShow) => {
.box3-center { .box3-center {
width: 345px; width: 345px;
margin-left: 25px; margin-left: 25px;
color: rgba(20, 89, 187, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
......
src/views/influence/index.vue
浏览文件 @ 5e8a9085
...@@ -82,7 +82,7 @@ const handleClickLeftSiderBtn = (item,index) => { ...@@ -82,7 +82,7 @@ const handleClickLeftSiderBtn = (item,index) => {
} }
} }
.siderBtnActive { .siderBtnActive {
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
.btn-text { .btn-text {
color: #fff !important; color: #fff !important;
} }
......
src/views/influence/industry/index.vue
浏览文件 @ 5e8a9085
...@@ -376,14 +376,14 @@ onMounted(async () => { ...@@ -376,14 +376,14 @@ onMounted(async () => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 22px; margin-left: 22px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -439,10 +439,10 @@ onMounted(async () => { ...@@ -439,10 +439,10 @@ onMounted(async () => {
text-align: center; text-align: center;
padding: 0 5px; padding: 0 5px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px; border-radius: 4px;
background: rgba(255, 255, 255, 1); border: 1px solid var(--btn-plain-border-color);
color: rgba(132, 136, 142, 1); background: var(--btn-plain-bg-color);
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
...@@ -452,11 +452,11 @@ onMounted(async () => { ...@@ -452,11 +452,11 @@ onMounted(async () => {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} .btnActive {
border: 1px solid var(--btn-active-border-color);
.btnActive { background: var(--btn-active-bg-color);
border: 1px solid rgba(20, 89, 187, 1); color: var(--btn-active-text-color);
background: rgba(246, 251, 255, 1); }
} }
} }
.left-footer { .left-footer {
...@@ -907,7 +907,7 @@ onMounted(async () => { ...@@ -907,7 +907,7 @@ onMounted(async () => {
margin-top: 8px; margin-top: 8px;
width: 1119px; width: 1119px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
......
src/views/influence/scientificResearch/index.vue
浏览文件 @ 5e8a9085
...@@ -577,14 +577,14 @@ onMounted(() => { ...@@ -577,14 +577,14 @@ onMounted(() => {
width: 8px; width: 8px;
height: 16px; height: 16px;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 20px; margin-top: 20px;
height: 16px; height: 16px;
line-height: 16px; line-height: 16px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
...@@ -654,7 +654,7 @@ onMounted(() => { ...@@ -654,7 +654,7 @@ onMounted(() => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -729,7 +729,7 @@ onMounted(() => { ...@@ -729,7 +729,7 @@ onMounted(() => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -874,7 +874,7 @@ onMounted(() => { ...@@ -874,7 +874,7 @@ onMounted(() => {
margin-top: 8px; margin-top: 8px;
width: 749px; width: 749px;
height: 24px; height: 24px;
color: rgba(22, 119, 255, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
......
浏览文件 @ 5e8a9085
No preview for this file type
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论