提交 12a9f4b2 authored 作者: yanpeng's avatar yanpeng

Merge branch 'master' into yp-dev

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