提交 ea9f98d2 authored 作者: coderBryanFu's avatar coderBryanFu

update

上级 65d8fbde
File added
...@@ -21,19 +21,19 @@ ...@@ -21,19 +21,19 @@
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, watch } from "vue"; import { ref, onMounted, onBeforeUnmount, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Center from "./assets/埃隆·马斯克.png"; import Center from "./assets/img1.png";
import P1 from "./assets/唐纳德·特朗普.png"; import P1 from "./assets/img2.png";
import P2 from "./assets/詹姆斯・默多克.png"; import P2 from "./assets/img3.png";
import P3 from "./assets/格温・肖特韦尔.png"; import P3 from "./assets/img4.png";
import P4 from "./assets/金博尔・马斯克.png"; import P4 from "./assets/img5.png";
import P5 from "./assets/拉里・埃里森.png"; import P5 from "./assets/img6.png";
import P6 from "./assets/斯科特·贝森特.png"; import P6 from "./assets/img7.png";
import P7 from "./assets/杰弗里·凯斯勒.png"; import P7 from "./assets/img8.png";
import P8 from "./assets/马尔科·卢比奥.png"; import P8 from "./assets/img9.png";
import P9 from "./assets/道格·伯格姆.png"; import P9 from "./assets/img10.png";
import P10 from "./assets/艾拉・埃伦普里斯.png"; import P10 from "./assets/img11.png";
import P11 from "./assets/贾斯汀・马斯克.png"; import P11 from "./assets/img12.png";
import PS from "./assets/史蒂夫・尤尔韦松.png"; import PS from "./assets/img13.png";
const list = ref(["圆形布局", "力导向布局", "树形布局"]); const list = ref(["圆形布局", "力导向布局", "树形布局"]);
const activeIndex = ref("圆形布局"); const activeIndex = ref("圆形布局");
......
...@@ -562,51 +562,124 @@ ...@@ -562,51 +562,124 @@
</div> </div>
</div> </div>
<div class="home-main-footer-main"> <div class="home-main-footer-main">
<div class="content-header"> <div class="left">
<div class="icon"> <div class="select-box">
<img src="./assets/images/box1-header-icon.png" alt="" /> <div class="select-box-header">
</div> <div class="icon"></div>
<div class="title">{{ "政令库" }}</div> <div class="title">{{ "发布时间" }}</div>
</div> </div>
<div class="content-box"> <div class="select-main">
<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index" @click="handleClickToDetail"> <div class="checkbox-group">
<div class="main-item-left"> <el-checkbox
<div v-for="time in pubTime"
class="left-box" :key="time.id"
:class="{ v-model="activePubTime"
type1: decree.status === 1, :label="time.id"
type2: decree.status === 2, class="filter-checkbox"
type3: decree.status === 3 >
}" {{ time.name }}
> </el-checkbox>
{{ decree.type }}
</div> </div>
</div> </div>
<div class="main-item-center"> </div>
<div class="main-item-center-box1">{{ decree.title }}</div> <div class="select-box">
<div class="main-item-center-box2">{{ decree.time }}</div> <div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "涉及领域" }}</div>
</div> </div>
<div class="main-item-right"> <div class="select-main select-main1">
<div class="main-item-right-text">{{ "查看官网政令原文" }}</div> <div class="checkbox-group">
<div class="main-item-right-icon"> <el-checkbox
<img src="./assets/images/open-icon.png" alt="" /> v-for="area in areaList"
:key="area.id"
v-model="activeAreaList"
:label="area.id"
class="filter-checkbox"
>
{{ area.name }}
</el-checkbox>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="footer-box"> <div class="right">
<div class="footer-left"> <div class="content-header">
{{ `共${decreeList.length}项调查` }} <div class="icon">
<img src="./assets/images/footer-header-icon.png" alt="" />
</div>
<div class="title">{{ "政令库" }}</div>
</div> </div>
<div class="footer-right"> <div class="content-box">
<el-pagination <div
@current-change="handleCurrentChange" class="main-item"
:pageSize="10" v-for="(item, index) in curDecreeList"
:current-page="currentPage" :key="index"
background @click="handleClickToDetail"
layout="prev, pager, next" >
:total="decreeList.length" <div class="main-item-left">
/> <div class="left-left">{{ item.time }}</div>
<div class="left-right">
<div class="icon"></div>
<div class="line"></div>
</div>
</div>
<div class="main-item-center">
<div class="center-header">
<div class="title">{{ item.title }}</div>
<div
class="type-box"
:class="{
type1: item.status === 1,
type2: item.status === 2,
type3: item.status === 3
}"
>
{{ item.type }}
</div>
</div>
<div class="desc">{{ item.desc }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
</div>
</div>
<!-- <div class="main-item-left">
<div
class="left-box"
:class="{
type1: decree.status === 1,
type2: decree.status === 2,
type3: decree.status === 3
}"
>
{{ decree.type }}
</div>
</div>
<div class="main-item-center">
<div class="main-item-center-box1">{{ decree.title }}</div>
<div class="main-item-center-box2">{{ decree.time }}</div>
</div>
<div class="main-item-right">
<div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
<div class="main-item-right-icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div> -->
</div>
</div>
<div class="footer-box">
<div class="footer-left">
{{ `共${decreeList.length}项调查` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="10"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="decreeList.length"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -935,109 +1008,91 @@ const decreeList = ref([ ...@@ -935,109 +1008,91 @@ const decreeList = ref([
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "关于进一步延长TikTok执法宽限期的行政令", title: "关于进一步延长TikTok执法宽限期的行政令",
time: "2025年9月16日" time: "2025年9月16日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "为国家安全部署先进核反应堆技术", title: "为国家安全部署先进核反应堆技术",
time: "2025年9月16日" time: "2025年9月16日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令", title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
time: "2025年9月15日" time: "2025年9月15日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "调整互惠关税范围,并制定实施贸易和安全协议的程序", title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
time: "2025年9月15日" time: "2025年9月15日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令", title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
time: "2025年9月14日" time: "2025年9月14日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统备忘录", type: "总统备忘录",
status: 3, status: 3,
title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性", title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
time: "2025年9月14日" time: "2025年9月14日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "提名与任命", type: "提名与任命",
status: 2, status: 2,
title: "终止对不可靠、非受控能源的市场扭曲补贴", title: "终止对不可靠、非受控能源的市场扭曲补贴",
time: "2025年9月11日" time: "2025年9月11日",
}, img: 1,
{ desc: "123",
type: "总统政令", tagList: ["生物科技"]
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "对所有国家暂停免关税待遇", title: "对所有国家暂停免关税待遇",
time: "2025年9月6日" time: "2025年9月6日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "对所有国家暂停免关税待遇", title: "对所有国家暂停免关税待遇",
time: "2025年9月6日" time: "2025年9月6日",
img: 1,
desc: "123",
tagList: ["生物科技"]
}, },
{ {
type: "总统政令", type: "总统政令",
status: 1, status: 1,
title: "对所有国家暂停免关税待遇", title: "对所有国家暂停免关税待遇",
time: "2025年9月6日" time: "2025年9月6日",
}, img: 1,
{ desc: "123",
type: "总统政令", tagList: ["生物科技"]
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日"
} }
]); ]);
const curDecreeList = computed(() => { const curDecreeList = computed(() => {
...@@ -1068,7 +1123,7 @@ const releaseTimeList = ref([ ...@@ -1068,7 +1123,7 @@ const releaseTimeList = ref([
value: "近五年发布" value: "近五年发布"
} }
]); ]);
const categoryList = ref(["全部分类", "总统政令", "提名与任命", "总统备忘录", "声明"]); const categoryList = ref(["全部分类", "白宫", "能源部", "商务部", "战争部", "FCC", "FDA", "NASA", "NSF", "NIH"]);
const activeCate = ref("全部分类"); const activeCate = ref("全部分类");
const handleClickCate = cate => { const handleClickCate = cate => {
...@@ -1135,6 +1190,24 @@ const handleToPosi = id => { ...@@ -1135,6 +1190,24 @@ const handleToPosi = id => {
} }
}; };
const areaList = [
{ id: "人工智能", name: "人工智能" },
{ id: "集成电路", name: "集成电路" },
{ id: "通信网络", name: "通信网络" },
{ id: "量子科技", name: "量子科技" }
];
const activeAreaList = ["人工智能"];
const pubTime = ref([
{ id: "2025年", name: "2025年" },
{ id: "2024年", name: "2024年" },
{ id: "2023年", name: "2023年" },
{ id: "2022年", name: "2022年" },
{ id: "2021年", name: "2021年" },
{ id: "更早时间", name: "更早时间" }
]);
const activePubTime = ref(["2025年"]);
onMounted(async () => { onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY); let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
setChart(chart1, "chart1"); setChart(chart1, "chart1");
...@@ -2689,7 +2762,7 @@ onMounted(async () => { ...@@ -2689,7 +2762,7 @@ onMounted(async () => {
} }
.home-main-footer { .home-main-footer {
margin-top: 34px; margin-top: 34px;
height: 1379px; height: 1860px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
overflow: hidden; overflow: hidden;
.divide4 { .divide4 {
...@@ -2706,13 +2779,13 @@ onMounted(async () => { ...@@ -2706,13 +2779,13 @@ onMounted(async () => {
justify-content: space-between; justify-content: space-between;
.btn-box { .btn-box {
margin-top: 10px; margin-top: 10px;
width: 1000px; width: 1200px;
display: flex; display: flex;
.btn { .btn {
height: 42px; height: 42px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 42px; line-height: 42px;
padding: 0 24px; padding: 0 24px;
...@@ -2725,8 +2798,7 @@ onMounted(async () => { ...@@ -2725,8 +2798,7 @@ onMounted(async () => {
} }
} }
.btnActive { .btnActive {
padding: 0 24px; font-weight: 700;
border-radius: 21px;
background: rgba(20, 89, 187, 1); background: rgba(20, 89, 187, 1);
color: #fff; color: #fff;
&:hover { &:hover {
...@@ -2744,138 +2816,207 @@ onMounted(async () => { ...@@ -2744,138 +2816,207 @@ onMounted(async () => {
} }
.home-main-footer-main { .home-main-footer-main {
width: 1600px; width: 1600px;
height: 999px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; display: flex;
border-radius: 10px; gap: 16px;
.content-header { .left {
height: 48px; width: 300px;
display: flex; height: 443px;
border-bottom: 1px solid rgba(234, 236, 238, 1); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
.icon { background: rgba(255, 255, 255, 1);
width: 20px; box-sizing: border-box;
height: 20px; border-radius: 10px;
margin-top: 14px; .select-box {
margin-left: 19px; margin-top: 21px;
img { .select-box-header {
width: 100%; display: flex;
height: 100%; gap: 17px;
} .icon {
} margin-top: 4px;
.title { width: 8px;
height: 48px; height: 16px;
margin-left: 21px; background: var(--color-main-active);
color: rgba(5, 95, 194, 1); border-radius: 0 4px 4px 0;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 48px;
}
}
.content-box {
height: 850px;
margin: 0 30px;
.main-item {
display: flex;
height: 84px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.main-item-left {
width: 105px;
.left-box {
margin-top: 17px;
height: 24px;
width: 95px;
text-align: center;
// color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
box-sizing: border-box;
border-radius: 4px;
// border: 1px solid rgba(186, 224, 255, 1);
// background: rgba(230, 244, 255, 1);
}
.type1 {
color: rgba(22, 119, 255, 1);
border: 1px solid rgba(186, 224, 255, 1);
background: rgba(230, 244, 255, 1);
}
.type2 {
color: rgba(19, 168, 168, 1);
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
}
.type3 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
} }
} .title {
.main-item-center {
width: 1300px;
.main-item-center-box1 {
margin-top: 15px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 18px; font-size: 16px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
letter-spacing: 1px;
text-align: left;
} }
.main-item-center-box2 { }
margin-top: 4px; .select-main {
height: 24px; margin-left: 25px;
color: rgba(95, 101, 108, 1); }
font-family: Microsoft YaHei; .select-main1 {
font-size: 16px; width: 100px;
font-weight: 400; }
line-height: 24px; }
}
.right {
width: 1284px;
height: 1489px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-radius: 10px;
.content-header {
height: 48px;
display: flex;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
width: 23px;
height: 18px;
margin-top: 16px;
margin-left: 20px;
img {
width: 100%;
height: 100%;
} }
} }
.main-item-right { .title {
height: 26px;
margin-top: 11px;
margin-left: 17px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.content-box {
height: 1367px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
overflow: hidden;
.main-item {
display: flex; display: flex;
.main-item-right-text { height: 136px;
margin-top: 18px; box-sizing: border-box;
width: 128px; padding-top: 10px;
height: 24px; cursor: pointer;
color: var(--color-main-active); &:hover {
font-family: Microsoft YaHei; background: var(--color-bg-hover);
font-size: 16px;
font-weight: 400;
line-height: 24px;
} }
.main-item-right-icon { .main-item-left {
margin-top: 22px; display: flex;
margin-left: 9px; gap: 18px;
width: 16px; justify-content: flex-end;
height: 16px; .left-left {
img { width: 84px;
width: 100%; height: 48px;
height: 100%; color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: right;
}
.left-right {
.icon {
width: 24px;
height: 24px;
border-radius: 12px;
background: #ccc;
}
.line {
height: 112px;
width: 2px;
background: #ddd;
margin-left: 11px;
}
}
}
.main-item-center {
margin-left: 21px;
width: 1086px;
.center-header {
display: flex;
justify-content: space-between;
.title {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
}
.type-box {
height: 28px;
line-height: 28px;
padding: 0 8px;
text-align: center;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
border-radius: 4px;
}
.type1 {
color: rgba(22, 119, 255, 1);
background: rgba(230, 244, 255, 1);
}
.type2 {
color: rgba(19, 168, 168, 1);
background: rgba(230, 255, 251, 1);
}
.type3 {
color: rgba(250, 140, 22, 1);
background: rgba(255, 247, 230, 1);
}
}
.desc {
margin-top: 8px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
max-height: 48px;
overflow: hidden;
}
.tag-box {
margin-top: 9px;
display: flex;
.tag {
height: 28px;
line-height: 28px;
text-align: center;
padding: 0 8px;
border-radius: 4px;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
}
} }
} }
} }
} }
} .footer-box {
.footer-box { margin: 0 30px;
margin: 0 30px; height: 32px;
height: 32px; margin-top: 30px;
margin-top: 30px; display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; .footer-left {
.footer-left { color: rgba(59, 65, 75, 1);
color: rgba(59, 65, 75, 1); font-family: Microsoft YaHei;
font-family: Microsoft YaHei; font-size: 16px;
font-size: 16px; font-weight: 400;
font-weight: 400; line-height: 32px;
line-height: 32px; }
} }
} }
} }
......
...@@ -42,7 +42,7 @@ const getBarChart = (nameList, valueList) => { ...@@ -42,7 +42,7 @@ const getBarChart = (nameList, valueList) => {
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
color: 'var(--color-main-active)', color: 'rgba(5, 95, 194, 1)',
fontWeight: 'bold', // 文字加粗 fontWeight: 'bold', // 文字加粗
fontSize: 14, fontSize: 14,
formatter: function (params) { formatter: function (params) {
...@@ -59,7 +59,7 @@ const getBarChart = (nameList, valueList) => { ...@@ -59,7 +59,7 @@ const getBarChart = (nameList, valueList) => {
}, },
{ {
offset: 1, offset: 1,
color: 'var(--color-main-active)' color: 'rgba(5, 95, 194, 1)'
} }
]); ]);
}, },
......
...@@ -1344,17 +1344,6 @@ const chart1Data = ref({ ...@@ -1344,17 +1344,6 @@ const chart1Data = ref({
] ]
}); });
// 获取热门法案
const handleGetHotBills = async () => {
try {
const res = await getHotBills();
console.log("热门法案", res);
billList.value = res.data;
} catch (error) {
console.error(error);
}
};
// 根据法案类型获取法案列表 // 根据法案类型获取法案列表
const handleGetBillsByType = async () => { const handleGetBillsByType = async () => {
const params = { const params = {
...@@ -1376,7 +1365,6 @@ const handleGetBillsByType = async () => { ...@@ -1376,7 +1365,6 @@ const handleGetBillsByType = async () => {
onMounted(async () => { onMounted(async () => {
handleGetHylyList(); handleGetHylyList();
await handleGetHotBills();
curBill.value = billList.value[0]; curBill.value = billList.value[0];
handleGetBillsByType(); handleGetBillsByType();
let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value); let chart1 = getMultiLineChart(chart1Data.value.title, chart1Data.value.data[0].value, chart1Data.value.data[1].value);
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论