Skip to content

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

update

上级 aae510aa
隐藏空白字符变更
内嵌 并排
正在显示 包含 870 行增加 和 1437 行删除
src/api/decree/background.js 0 → 100644
浏览文件 @ 1b14c707
import request from "@/api/request.js";
// 提出背景
/**
* @param {cRelated, currentPage, id, pageSize}
*/
export function getDecreeBackground(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/background/${id}`,
params
})
}
// 相关事件
/**
* @param { id }
*/
export function getDecreeRelatedEvent(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/relateEvent/${id}`,
params
})
}
// 法律依据
/**
* @param { id }
*/
export function getDecreeDepend(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/depend/${id}`,
params
})
}
\ No newline at end of file
src/api/decree/home.js 0 → 100644
浏览文件 @ 1b14c707
import request from "@/api/request.js";
// 最新科技政令
export function getLatestDecree() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/info`,
})
}
// 风险信号
export function getDecreeRiskSignal() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/riskSignal`,
})
}
// 行政令发布频度
export function getDecreeYearOrder() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/yearOrder`,
})
}
// 政令涉及领域
export function getDecreeArea() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/industry`,
})
}
// 关键行政令
export function getKeyDecree() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/action`,
})
}
// 政令重点条款
export function getDecreeKeyInstruction() {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/instruction`,
})
}
// 资源库
/**
* @param {currentPage, pageSize, proposeName, researchTypeIds, sortFun, years}
*/
export function getDecreeOrderList(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderOverview/orderList`,
params
})
}
// 左侧行业领域列表
export function getDecreehylyList(params) {
return request({
method: 'GET',
url: `/api/billImpactAnalysis/industry/hylyList`,
params
})
}
\ No newline at end of file
src/api/decree/influence.js 0 → 100644
浏览文件 @ 1b14c707
import request from "@/api/request.js";
// 根据政令ID获取领域公司信息
/**
* @param {cRelated, id}
*/
export function getDecreeIndustry(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/industry/${id}`,
params
})
}
// 获取行业领域列表
export function getDecreehylyList(params) {
return request({
method: 'GET',
url: `/api/billImpactAnalysis/industry/hylyList`,
params
})
}
// 根据政行业领域ID获取公司列表
/**
* @param {cRelated, id}
*/
export function getDecreeCompany(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/industry/company/${id}`,
params
})
}
// 获取政令举措落实分析
/**
* @param {id}
*/
export function getDecreeAction(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderImpactAnalysis/action/${id}`,
params
})
}
src/api/decree/introduction.js 0 → 100644
浏览文件 @ 1b14c707
import request from "@/api/request.js";
// 基本信息
/**
* @param {id}
*/
export function getDecreeBasicInfo(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/basicInfo/${id}`,
params
})
}
// 主要指令
/**
* @param {currentPage, id, pageSize}
*/
export function getDecreeMainContent(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/mainContent/${id}`,
params
})
}
// 执行机构
/**
* @param {id}
*/
export function getDecreeOrganization(params) {
return request({
method: 'GET',
url: `/api/administrativeOrderInfo/organization/${id}`,
params
})
}
\ No newline at end of file
src/router/modules/decree.js
浏览文件 @ 1b14c707
...@@ -6,7 +6,6 @@ import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introductio ...@@ -6,7 +6,6 @@ import DecreeIntroduction from "@/views/decree/decreeLayout/overview/introductio
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 DecreeInfluence from "@/views/decree/decreeLayout/influence/index.vue";
import Institution from "@/views/decree/institution/index.vue" import Institution from "@/views/decree/institution/index.vue"
const decreeRoutes = [ const decreeRoutes = [
......
src/router/modules/portal.js
浏览文件 @ 1b14c707
import Portal1 from "@/views/portals/portal1/index.vue"; import Portal from "@/views/portals/portal1/index.vue";
import Portal2 from "@/views/portals/portal2/index.vue"; import Portal2 from "@/views/portals/portal2/index.vue";
const portalRoutes = [ const portalRoutes = [
// 门户 // 门户
{ {
path: "/portal1", path: "/portal",
name: "portal1", name: "portal",
component: Portal1, component: Portal,
meta: { meta: {
title: "门户" title: "门户"
} }
......
src/views/decree/content/depthMine.vue deleted 100644 → 0
浏览文件 @ aae510aa
<template>
<el-row :gutter="20">
<el-col :span="24">
<custom-container title="政令时序及战略里程碑" height="510px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">涉华背景</el-button>
<el-button>全部背景</el-button>
</div>
</template> -->
<template #default>
<div class="content-box">
<el-image :src="TimeLine" alt="" style="width: 100%; height: 306px" />
<div class="content-box-footer">
<img class="footer-img-small" src="@/assets/images/icon-guanzhu.png" alt="" />
<span class="content-box-footer-text"> 促进美国人工智能栈技术出口总统政令的时序及战略里程碑分析结果。 </span>
<img class="footer-img-large" src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<custom-container title="相关政令关联分析" height="505px">
<template #default>
<div class="content-box">
<div class="content-tabs">
<div
:class="['content-tabs-item', activeTab === item.id ? 'contetn-tabs-item-active' : '']"
v-for="item in data"
:key="item.id"
@click="tabsClick(item.id)"
>
{{ item.name }}
<el-image :src="IconOpen" :style="{ width: '16px', height: '16px' }"></el-image>
</div>
</div>
<div class="content-tabs-pane">
<div class="content-tabs-pane-left">
<div class="content-tabs-pane-header">
<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
政令基本信息
</div>
<div class="content-tabs-pane-content">
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">政令名称：</span>
<span>{{ currentContent.info.fullName }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">英文名称：</span>
<span>{{ currentContent.info.fullNameEn }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">相关领域：</span>
<!-- <span>{{ currentContent.info.fullName }}</span> -->
<el-tag v-for="item in currentContent.info.tags" :key="item" type="primary">{{ item }}</el-tag>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">签署时间：</span>
<span>{{ currentContent.info.time }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">签署总统：</span>
<span>{{ currentContent.info.president }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">政令编号：</span>
<span>{{ currentContent.info.orderNum }}</span>
</div>
<div class="content-tabs-pane-content-item">
<span class="content-tabs-pane-content-item-title">执行期限：</span>
<span>{{ currentContent.info.period }}</span>
</div>
</div>
</div>
<div class="content-tabs-pane-right">
<div class="content-tabs-pane-header">
<el-image :src="IconNews" :style="{ width: '20px', height: '20px' }"></el-image>
政令主要条款
</div>
<div class="content-tabs-pane-content">
<div class="content-tabs-pane-content-list">
<div class="content-tabs-pane-content-list-item" v-for="(item, index) in clause" :key="item.id">
<span class="content-tabs-pane-content-list-item-index">
{{ (currentPage - 1) * 5 + index + 1 }}
</span>
<span class="content-tabs-pane-content-list-item-content">
{{ item.content }}
</span>
</div>
</div>
</div>
<div class="content-tabs-pane-footer">
<el-pagination
v-model:current-page="currentPage"
:page-size="5"
size="small"
:total="currentContent.clause.length"
background
layout="total, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</div>
</template>
</custom-container>
</el-col>
</el-row>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import CustomContainer from "@/components/Container/index.vue";
import { TAGTYPE } from "@/common/constant.js";
import TimeLine from "@/assets/images/time-line.png";
import IconOpen from "@/assets/images/icon-open.png";
import IconNews from "@/assets/images/icon-news.png";
import { data } from "./mock";
const activeTab = ref(11);
const currentContent = ref({});
const clause = ref([]);
const tableData = ref([
{
date: "2024年5月14日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年4月11日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2024年2月27日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年12月7日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: "2023年11月15日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
},
{
date: " 2024年3月5日",
entity: "37/24",
entityCN: "37/4",
proportion: "100%/1"
}
]);
// 重点实体列表
const entityList = ref([
{
entity: "中国科学技术大学",
tags: ["双一流", "985", "关税政策"]
},
{
entity: "合肥量子信息科学国家实验室",
tags: ["中国上市企业"]
},
{
entity: "中国科学院物理研究所",
tags: ["科研院所"]
}
]);
let option = null;
onMounted(() => {
currentContent.value = data.filter(item => item.id === activeTab.value)[0];
clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
console.log("数据查看 =>", currentContent.value);
// 更新频率
option = {
grid: {
left: 0,
right: 0,
top: 0,
bottom: 0
},
legend: {
show: true,
bottom: -5,
icon: "circle",
itemWidth: 6,
itemHeight: 6,
textStyle: {
color: "#4E5969"
}
},
tooltip: {
show: true,
formatter(params) {
return `总计：${params.value}<br>${params.data.size}`;
}
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: true,
label: {
show: false,
position: "center"
},
data: [
{
value: 37,
name: "中国上市企业"
},
{
value: 4,
name: "科研院所"
}
]
}
]
};
});
const tabsClick = id => {
console.log(id);
activeTab.value = id;
currentContent.value = data.filter(e => e.id === id)[0];
currentPage.value = 1;
clause.value = currentContent.value.clause.slice((currentPage.value - 1) * 5, currentPage.value * 5);
};
const currentPage = ref(1);
const handleCurrentChange = val => {
currentPage.value = val;
clause.value = currentContent.value.clause.slice((val - 1) * 5, val * 5);
console.log(`当前页: ${val}`);
console.log(`当前页-shuju`, clause.value);
};
const handleSizeChange = val => {
console.log(val);
};
</script>
<style scoped>
.content-box {
/* height: 90vh; */
display: flex;
flex-direction: row;
justify-content: flex-start;
border: 1px solid rgba(234, 236, 238, 1);
overflow: hidden;
}
.content-tabs {
height: 100%;
padding-top: 2%;
width: 300px;
border-right: 1px solid rgba(234, 236, 238, 1);
}
.content-tabs-item {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(234, 236, 238, 1);
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
padding-left: 24px;
padding-right: 24px;
height: 36px;
cursor: pointer;
}
.contetn-tabs-item-active {
background-color: rgba(231, 243, 255, 1);
color: var(--color-main-active);
}
.content-tabs-pane {
display: flex;
justify-content: flex-start;
align-items: flex-start;
height: 100%;
flex: 1;
/* padding-top: 25px; */
padding-left: 20px;
background-color: rgba(246, 250, 255, 1);
}
.content-tabs-pane-left {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
width: 550px;
padding-top: 15px;
gap: 15px;
flex-shrink: 0;
}
.content-tabs-pane-right {
height: 375px;
padding-top: 15px;
padding-left: 20px;
border-left: 1px solid rgba(234, 236, 238, 1);
display: flex;
flex-direction: column;
justify-content: space-between;
padding-right: 15px;
flex-grow: 1;
}
.content-tabs-pane-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--base-color);
}
.content-tabs-pane-content {
display: flex;
flex-direction: column;
gap: 15px;
margin-bottom: auto;
}
.content-tabs-pane-content-item {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 700;
color: var(--base-color);
}
.content-tabs-pane-content-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-tabs-pane-content-list {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
.content-tabs-pane-content-list-item {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 5px 10px;
gap: 8px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 5px;
}
.content-tabs-pane-content-list-item-index {
height: 24px;
width: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
/* font-weight: 700; */
border-radius: 50%;
color: var(--base-color);
background-color: rgba(231, 243, 255, 1);
}
.content-tabs-pane-content-list-item-content {
font-size: 16px;
font-weight: 400;
color: rgba(10, 18, 30, 1);
}
.content-box-list {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.content-box-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
}
.content-box-list-item-title {
font-size: 16px;
font-weight: 700;
color: rgba(10, 18, 30, 1);
}
.content-box-list-item-tag {
display: flex;
gap: 8px;
}
.content-box-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(246, 251, 255, 1);
padding: 5px 15px;
}
.content-box-footer-text {
font-size: 16px;
font-weight: 400;
color: var(--color-main-active);
}
.footer-img-small {
width: 20px;
height: 20px;
}
.footer-img-large {
width: 24px;
height: 24px;
}
</style>
src/views/decree/content/mock.js deleted 100644 → 0
浏览文件 @ aae510aa
export const data = [
{
id: 11,
name: "拜登AI芯片出口管制",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "Ending Crime and Disorder on America’s Streets",
tags: ["人工智能", "出口管制", "半导体产业", "税收", "光伏产业"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
},
{
id: 6,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
}
]
},
{
id: 22,
name: "特朗普撤销拜登AI规则",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
},
{
id: 33,
name: "美国AI行动计划",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
},
{
id: 44,
name: "对中国AI芯片限制",
info: {
fullName: "推动美国人工智能技术栈出口",
fullNameEn: "推动美国人工智能技术栈出口",
tags: ["AI", "出口", "管制"],
time: "2025年7月23日",
president: "唐纳德·约翰·特朗普(Donald John Trump)",
orderNum: "第14320号行政命令 (EO 14320)",
period: "签署后90天内建立机制并开始实施"
},
clause: [
{
id: 1,
content: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
id: 2,
content: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
id: 3,
content: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
id: 4,
content: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
id: 5,
content: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]
}
];
src/views/decree/content/survey.vue deleted 100644 → 0
浏览文件 @ aae510aa
<template>
<el-row :gutter="20">
<el-col :span="16">
<custom-container title="实体清单发布机构" height="414px">
<!-- 顶部右侧自定义内容 -->
<!-- <template #header-right>
<div style="display: flex; gap: 8px">
<el-input placeholder="搜索项目..." clearable style="width: 200px">
<template #prefix>
<el-icon><Search /></el-icon>
</template>
</el-input>
<el-button type="primary">政令原文</el-button>
<el-button>全部背景分析报告</el-button>
</div>
</template> -->
<!-- 中间内容自定义 -->
<template #default>
<div class="content-card">
<el-image class="content-img" :src="DecreeInfoImg" fit="fill" />
<div class="content-desc" style="gap: 20px">
<div class="content-desc-item">
<div class="content-desc-title">政令全称：</div>
<div class="content-desc-content">
Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">英文全称：</div>
<div class="content-desc-content">出口管制条例（EAR）、实体清单、商业管制清单（CCL）、232调查等</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">相关领域：</div>
<!-- <div class="content-desc-content">公法（编号：Pub. L. No. 119-21）</div> -->
<el-tag type="primary">人工智能</el-tag>
<el-tag type="primary">出口管制</el-tag>
<el-tag type="primary">半导体</el-tag>
<el-tag type="primary">关税</el-tag>
<el-tag type="primary">光伏产业</el-tag>
</div>
<div class="content-desc-item">
<div class="content-desc-title">签署时间：</div>
<div class="content-desc-content">2025年7月23日</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">签署总统：</div>
<div class="content-desc-content">唐纳德·约翰·特朗普(Donald John Trump)</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">证明编号：</div>
<div class="content-desc-content content-desc-content-long">第14320号行政命令 (EO 14320)</div>
</div>
<div class="content-desc-item">
<div class="content-desc-title">执行期限：</div>
<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
</div>
</div>
</div>
</template>
</custom-container>
<custom-container title="主要指令" height="415px">
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card content-vertical-card-flex-start">
<div class="content-box">
<div class="content-box-content" v-for="(item, index) in mainInstructions" :key="index">
<span class="content-num">{{ index + 1 }}</span>
<span class="content-desc">{{ item }}</span>
</div>
</div>
<div class="content-box-footer">
<div>共5条指令</div>
<el-pagination size="small" background layout="prev, pager, next" :total="10" page-size="5" />
</div>
</div>
</template>
</custom-container>
</el-col>
<el-col :span="8">
<custom-container title="执行机构" height="845px">
<!-- 中间内容自定义 -->
<template #default>
<div class="content-vertical-card content-vertical-card-flex-start">
<el-space>
<el-button plain type="primary">商务部</el-button>
<el-button>国务院</el-button>
<el-button>科技政策办公室</el-button>
<el-button>国防部</el-button>
</el-space>
<div
style="
display: flex;
justify-content: space-between;
margin-top: 10px;
padding-bottom: 10px;
gap: 5px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
"
>
<el-image class="content-img-small" :src="DecreeOrg" fit="fill" />
<div class="content-desc">
<div class="content-desc-item">
<div class="content-desc-content">美国商务部</div>
<!-- <div class="content-desc-content">
Further Modifying Reciprocal Tariff Rates to Reflect Ongoing Discussions with the People’s Republic of China
</div> -->
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">英文名：</div>
<div class="content-desc-content-long">United States Department of Commerce</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">成立时间：</div>
<div class="content-desc-content-long">1903年2月14日</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">主要职责：</div>
<div class="content-desc-content-long">国际贸易、进出口管制（R-TX-19）</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">总部地址：</div>
<div class="content-desc-content-long">华盛顿宪法大道1401号胡佛大楼</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">部长：</div>
<div class="content-desc-content content-desc-content-long">霍华德·卢特尼克</div>
</div>
<div class="content-desc-item">
<div class="content-desc-content-long">执行期限：</div>
<div class="content-desc-content content-desc-content-long">签署后90天内建立机制并开始实施</div>
</div>
</div>
</div>
<div class="content-time-line-box">
<div class="content-time-line-title">
<img class="time-line-img" src="@/assets/images/decree-date.png" alt="" />
<span class="time-line-title-text">机构动态</span>
</div>
<el-timeline style="max-width: 600px">
<el-timeline-item
placement="top"
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
<div class="content-card-footer">
<el-button type="primary" link>
查看更多 <img class="icon-mark" src="@/assets/images/icon-double-down.png" alt="" />
</el-button>
</div>
</div>
</template>
<!-- 底部自定义内容 -->
<!-- <template #footer>
<el-button>取消</el-button>
<el-button type="primary">保存更改</el-button>
</template> -->
</custom-container>
</el-col>
</el-row>
</template>
<script setup>
import CustomContainer from "@/components/Container/index.vue";
import DecreeInfoImg from "@/assets/images/decree-info.png";
import DecreeOrg from "@/assets/images/decree-org.png";
// 主要指令数据
const mainInstructions = [
"获取美国产物项，以支持中国量子技术；",
"支持2023年2月飞越美国上空的高空气球；",
"获取美国原产的无人机物项供中国军方使用。",
"限制中国对美国商品的进口。",
"限制中国对美国商品的出口。"
];
// 机构动态
const activities = [
{
content: `推动《州责任联邦部署成本法案》,要求拒执行联邦移民法的州政府
支付相关军事部署费用,强化财政约束。`,
timestamp: "20258-07-31",
size: "large",
type: "primary",
hollow: true
},
{
content: `借OBBBA通过势头,在得州巩固军工、能源集团支持,为2026年连任
铺路,同时协调党内资源争夺关键摇摆选区。`,
timestamp: "2025-07-30",
type: "primary",
hollow: true
},
{
content: `众议院预算委员会主席乔迪·阿灵顿(得克萨斯州共和党人)周四上午在辩论时将此法案形容为“美国历史上最大的减税措施”。`,
timestamp: "2025-07-30",
type: "primary",
hollow: true
},
{
content: "特朗普力挺阿灵顿,白宫声明强调法案“美丽且必要”,双方矛盾凸显共和党内 商业资本与传统能源势力裂痕。",
timestamp: "2025-07-27",
type: "primary",
hollow: true
}
];
</script>
<style scoped>
.content-card {
display: flex;
align-items: flex-start;
gap: 20px;
}
.content-vertical-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.content-vertical-card-flex-start {
align-items: flex-start;
}
.content-box {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.content-box-content {
width: 95%;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
border: 1px solid rgba(234, 236, 238, 1);
padding: 5px 10px;
height: 48px;
box-sizing: border-box;
}
.content-box-footer {
width: 95%;
display: flex;
justify-content: space-between;
align-items: center;
}
.content-num {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
font-weight: 400;
border-radius: 50%;
background-color: rgba(231, 243, 255, 1);
color: var(--color-main-active);
}
.content-box-footer {
display: flex;
justify-content: space-between;
}
.renwu-card {
display: flex;
align-items: center;
gap: 20px;
width: 379px;
height: 148px;
background-color: rgba(234, 236, 238, 1);
padding-left: 10px;
}
.content-img {
width: 235px;
height: 332px;
flex-shrink: 0;
}
.content-img-small {
width: 140px;
height: 140px;
flex-shrink: 0;
}
.content-img-2 {
width: 128px;
height: 128px;
flex-shrink: 0;
}
.content-distribution-img {
width: 627px;
height: 536px;
}
.content-desc {
display: flex;
flex-direction: column;
gap: 8px;
}
.content-desc-item {
display: flex;
gap: 4px;
}
.content-desc-title {
width: 100px;
flex-shrink: 0;
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
}
.content-desc-content {
color: var(--color-main-active);
font-size: 16px;
font-weight: 700;
}
.content-desc-content-long {
color: rgba(95, 101, 108, 1);
font-weight: 400;
}
.time-line {
display: flex;
gap: 20px;
align-items: flex-start;
padding-left: 10px;
margin-bottom: 20px;
}
.time-line-title {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.time-line-dot {
width: 10px;
height: 10px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
color: var(--base-color);
}
.time-line-desc-title {
font-size: 16px;
font-weight: 400;
color: var(--base-color);
margin-bottom: 5px;
}
.time-line-desc-text {
font-size: 14px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
}
.time-line-dot {
width: 8px;
height: 8px;
background-color: var(--color-main-active);
border-radius: 50%;
}
.content-time-line-box {
margin-bottom: 10px;
}
.content-time-line-title {
display: flex;
align-items: center;
gap: 8px;
padding-left: 20px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.time-line-img {
width: 16px;
height: 16px;
}
.time-line-title-text {
font-size: 14px;
font-weight: 700;
color: rgba(95, 101, 108, 1);
}
.icon-mark {
height: 12px;
width: 12px;
margin-right: 5px;
margin-left: 8px;
}
.content-card-footer {
display: flex;
width: 100%;
justify-content: center;
/* margin-top: 30px; */
}
</style>
src/views/decree/decreeHome/index.vue
浏览文件 @ 1b14c707
...@@ -139,13 +139,13 @@ ...@@ -139,13 +139,13 @@
</div> </div>
<div class="box1-main"> <div class="box1-main">
<div class="box1-main-left"> <div class="box1-main-left">
<img src="./assets/images/img1.png" alt="" /> <img :src="curBox1Data.imageUrl" alt="" />
</div> </div>
<div class="box1-main-right"> <div class="box1-main-right">
<div class="box1-main-right-title"> <div class="box1-main-right-title">
{{ "关于进一步延长TikTok执法宽限期的行政令" }} {{ curBox1Data.name }}
</div> </div>
<div class="box1-main-right-info"> <div class="box1-main-right-info" v-if="curBox1Data.industryList">
<div <div
class="tag" class="tag"
:class="{ :class="{
...@@ -154,23 +154,20 @@ ...@@ -154,23 +154,20 @@
tag3: tag.status == 3, tag3: tag.status == 3,
tag4: tag.status == 4 tag4: tag.status == 4
}" }"
v-for="(tag, index) in tagList" v-for="(tag, index) in curBox1Data.industryList"
:key="index" :key="index"
> >
{{ tag.name }} {{ tag.name }}
</div> </div>
</div> </div>
<div class="box1-main-right-center"> <div class="box1-main-right-center">
{{ {{ curBox1Data.describe }}
`9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
`
}}
</div> </div>
<div class="box1-main-right-footer"> <div class="box1-main-right-footer">
<div class="footer-left">{{ "2025年9月16日" }}</div> <div class="footer-left">{{ curBox1Data.postDate }}</div>
<div class="footer-right"> <div class="footer-right">
<div class="footer-right-item1"> <div class="footer-right-item1">
{{ "美国白宫官方网站" }} {{ curBox1Data.officialUrl }}
</div> </div>
<div class="footer-right-item2"> <div class="footer-right-item2">
<img src="./assets/images/open-icon.png" alt="" /> <img src="./assets/images/open-icon.png" alt="" />
...@@ -200,17 +197,17 @@ ...@@ -200,17 +197,17 @@
<div <div
class="item-left" class="item-left"
:class="{ :class="{
itemLeftStatus1: item.status === '一般风险', itemLeftStatus3: item.riskLevel === '特别重大',
itemLeftStatus2: item.status === '重大风险' itemLeftStatus2: item.riskLevel === '重大风险'
}" }"
> >
{{ item.status }} {{ item.riskLevel ? item.riskLevel : "暂无数据" }}
</div> </div>
<div class="item-right"> <div class="item-right">
<div class="text"> <div class="text">
{{ item.title }} {{ item.name }}
</div> </div>
<div class="time">{{ item.time }}</div> <div class="time">{{ item.postDate }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -319,7 +316,7 @@ ...@@ -319,7 +316,7 @@
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div class="time">{{ item.time }}</div> <div class="time">{{ item.time }}</div>
</div> </div>
<div class="info-content">{{ item.content }}</div> <div class="info-content">{{ item.content ? item.content : "暂无数据" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -331,8 +328,8 @@ ...@@ -331,8 +328,8 @@
</div> </div>
<div class="header-title">{{ "政令重点条款" }}</div> <div class="header-title">{{ "政令重点条款" }}</div>
</div> </div>
<div class="box6-main"> <div class="box6-main" id="wordCloudChart">
<WordCloudMap :data="wordCloudData" :shape="circle" /> <!-- <WordCloudMap :data="wordCloudData" :shape="circle" /> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -360,18 +357,6 @@ ...@@ -360,18 +357,6 @@
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<!-- <el-select
v-model="releaseTime"
placeholder="选择发布时间"
style="width: 120px"
>
<el-option
v-for="item in releaseTimeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> -->
</div> </div>
</div> </div>
<div class="home-main-footer-main"> <div class="home-main-footer-main">
...@@ -407,7 +392,7 @@ ...@@ -407,7 +392,7 @@
:key="area.id" :key="area.id"
v-model="activeAreaList" v-model="activeAreaList"
:label="area.id" :label="area.id"
class="filter-checkbox" style="width: 100px"
> >
{{ area.name }} {{ area.name }}
</el-checkbox> </el-checkbox>
...@@ -422,7 +407,7 @@ ...@@ -422,7 +407,7 @@
</div> </div>
<div class="title">{{ "政令库" }}</div> <div class="title">{{ "政令库" }}</div>
</div> </div>
<div class="content-box"> <div class="content-box" v-show="curDecreeList">
<div <div
class="main-item" class="main-item"
v-for="(item, index) in curDecreeList" v-for="(item, index) in curDecreeList"
...@@ -439,7 +424,7 @@ ...@@ -439,7 +424,7 @@
<div class="main-item-center"> <div class="main-item-center">
<div class="center-header"> <div class="center-header">
<div class="title">{{ item.title }}</div> <div class="title">{{ item.title }}</div>
<div <!-- <div
class="type-box" class="type-box"
:class="{ :class="{
type1: item.status === 1, type1: item.status === 1,
...@@ -448,40 +433,20 @@ ...@@ -448,40 +433,20 @@
}" }"
> >
{{ item.type }} {{ item.type }}
</div> </div> -->
</div> </div>
<div class="desc">{{ item.desc }}</div> <div class="desc">{{ item.desc }}</div>
<div class="tag-box"> <div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div> <div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
</div> {{ val.industryName }}
</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> </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> </div>
<div class="footer-box"> <div class="footer-box">
<div class="footer-left"> <div class="footer-left">
{{ `共${decreeList.length}项调查` }} {{ `共${totalDecreesNum}项调查` }}
</div> </div>
<div class="footer-right"> <div class="footer-right">
<el-pagination <el-pagination
...@@ -490,7 +455,7 @@ ...@@ -490,7 +455,7 @@
:current-page="currentPage" :current-page="currentPage"
background background
layout="prev, pager, next" layout="prev, pager, next"
:total="decreeList.length" :total="totalDecreesNum"
/> />
</div> </div>
</div> </div>
...@@ -502,15 +467,26 @@ ...@@ -502,15 +467,26 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref, computed } from "vue"; import { onMounted, ref, computed, watch } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import router from "@/router"; import router from "@/router";
import {
getLatestDecree,
getDecreeRiskSignal,
getDecreeYearOrder,
getDecreeArea,
getKeyDecree,
getDecreeKeyInstruction,
getDecreeOrderList,
getDecreehylyList
} from "@/api/decree/home";
import WordCloudMap from "./WordCloudMap.vue"; import WordCloudMap from "./WordCloudMap.vue";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow"; import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart"; import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart"; import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getWordCloudChart from "./utils/wordCloudChart";
import getCalendarHeatChart from "./utils/cleandarHeat"; import getCalendarHeatChart from "./utils/cleandarHeat";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
...@@ -546,6 +522,7 @@ import News5 from "./assets/images/news5.png"; ...@@ -546,6 +522,7 @@ import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/message-icon1.png"; import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png"; import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png"; import Message3 from "./assets/images/message-icon3.png";
import { reduce } from "lodash";
// 跳转行政机构主页 // 跳转行政机构主页
const handleToInstitution = item => { const handleToInstitution = item => {
...@@ -615,17 +592,6 @@ const govInsList = ref([ ...@@ -615,17 +592,6 @@ const govInsList = ref([
} }
]); ]);
// 最新科技政令
const tagList = ref([
{
name: "互联网",
status: 2
},
{
name: "人工智能",
status: 4
}
]);
// 点击查看详情 // 点击查看详情
const handleClickToDetail = () => { const handleClickToDetail = () => {
// router.push("/decreeLayout"); // router.push("/decreeLayout");
...@@ -645,34 +611,89 @@ const handleToMoreNews = () => { ...@@ -645,34 +611,89 @@ const handleToMoreNews = () => {
window.open(route.href, "_blank"); window.open(route.href, "_blank");
}; };
// 最新科技政令
const box1DataList = ref([
{
id: 89,
name: "",
postDate: "",
describe: null,
imageUrl: null,
officialUrl: null,
industryList: null
}
]);
const curBox1Data = ref({
id: 89,
name: "",
postDate: "",
describe: null,
imageUrl: null,
officialUrl: null,
industryList: null
});
const handleGetLatestDecree = async () => {
try {
const res = await getLatestDecree();
console.log("最新科技政令", res);
if (res.code === 200 && res.data) {
box1DataList.value = res.data;
curBox1Data.value = res.data[0];
}
} catch (error) {
console.error("最新科技政令error", error);
}
};
const boxInterval = ref(null);
const handleBox1 = async () => {
await handleGetLatestDecree();
let index = 0;
curBox1Data.value = box1DataList.value[0];
// boxInterval.value = setInterval(() => {
// if (index < box1DataList.value.length - 1) {
// index++;
// } else {
// index = 0;
// }
// curBox1Data.value = box1DataList.value[index];
// }, 2000);
};
// 风险信号 // 风险信号
const warningList = ref([ const warningList = ref([
{ {
title: "关于对中华人民共和国合成阿片类药物供应链...", id: 1,
time: "一天前", name: "关于对中华人民共和国合成阿片类药物供应链...",
status: "特别重大" postDate: "一天前",
}, riskLevel: "特别重大"
{
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大"
}, },
{ {
title: "关于调整钢铁进口的公告", id: 2,
time: "一天前", name: "关于调整钢铁进口的公告",
status: "重大风险" postDate: "一天前",
riskLevel: "重大风险"
}, },
{ {
title: "关于使用互惠关税规范进口以纠正导致大规模...", id: 3,
time: "一天前", name: "关于修订对中华人民共和国低价值进口商品适...",
status: "重大风险" postDate: "一天前",
}, riskLevel: "一般风险"
{
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险"
} }
]); ]);
const handlegetDecreeRiskSignal = async () => {
try {
const res = await getDecreeRiskSignal();
console.log("风险信号", res);
if (res.code === 200 && res.data) {
warningList.value = res.data;
}
} catch (error) {
console.error("风险信号error", error);
}
};
handlegetDecreeRiskSignal();
// 新闻资讯 // 新闻资讯
const newsList = ref([ const newsList = ref([
...@@ -730,12 +751,39 @@ const messageList = ref([ ...@@ -730,12 +751,39 @@ const messageList = ref([
} }
]); ]);
// 政令发布频度 // 行政令发布频度
const chart1Data = ref({ const chart1Data = ref({
dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"], dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
dataY: [219, 228, 129, 159, 152, 157, 78] dataY: [219, 228, 129, 159, 152, 157, 78]
}); });
const handleGetDecreeYearOrder = async () => {
try {
const res = await getDecreeYearOrder();
console.log("行政令发布频度", res);
if (res.code === 200 && res.data) {
chart1Data.value.dataX = res.data
.map(item => {
return item.year;
})
.reverse();
chart1Data.value.dataY = res.data
.map(item => {
return item.count;
})
.reverse();
}
} catch (error) {
console.error("行政令发布频度error", error);
}
};
const handleBox5 = async () => {
await handleGetDecreeYearOrder();
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
setChart(chart1, "chart1");
};
// 政令涉及领域 // 政令涉及领域
const chart2Data = ref([ const chart2Data = ref([
{ {
...@@ -767,7 +815,29 @@ const chart2Data = ref([ ...@@ -767,7 +815,29 @@ const chart2Data = ref([
value: 24 value: 24
} }
]); ]);
const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"]; // const colorList = ["#69B1FF", "#FFC069", "#87E8DE", "#85A5FF", "#FF7875", "#B37FEB", "#4096FF"];
const handleGetDecreeArea = async () => {
try {
const res = await getDecreeArea();
console.log("政令涉及领域", res);
if (res.code === 200 && res.data) {
chart2Data.value = res.data.map(item => {
return {
name: item.industry,
value: item.count
};
});
}
} catch (error) {
console.error("政令涉及领域error", error);
}
};
const handleBox6 = async () => {
await handleGetDecreeArea();
let chart2 = getPieChart(chart2Data.value);
setChart(chart2, "chart2");
};
// 关键行政令 // 关键行政令
const keyDecreeList = ref([ const keyDecreeList = ref([
...@@ -793,126 +863,68 @@ const keyDecreeList = ref([ ...@@ -793,126 +863,68 @@ const keyDecreeList = ref([
} }
]); ]);
const handleGetKeyDecree = async () => {
try {
const res = await getKeyDecree();
console.log("关键行政令", res);
if (res.code === 200 && res.data) {
keyDecreeList.value = res.data.map(item => {
return {
title: item.name,
content: item.describe,
time: item.postDate
};
});
}
} catch (error) {}
};
handleGetKeyDecree();
// 政令重点条款 // 政令重点条款
const wordCloudData = [ const wordCloudData = [
{ name: "与马斯克公开冲突", value: 100 }, // { name: "与马斯克公开冲突", value: 100 },
{ name: "传统能源", value: 5 }, // { name: "传统能源", value: 5 },
{ name: "共和党财政鹰派", value: 77 }, // { name: "共和党财政鹰派", value: 77 },
{ name: "未实现赤字控制目标", value: 35 }, // { name: "未实现赤字控制目标", value: 35 },
{ name: "得克萨斯州", value: 88 }, // { name: "得克萨斯州", value: 88 },
{ name: "选举压力", value: 57 }, // { name: "选举压力", value: 57 },
{ name: "主张财政紧缩", value: 72 }, // { name: "主张财政紧缩", value: 72 },
{ name: "财政保守", value: 18 }, // { name: "财政保守", value: 18 },
{ name: "共和党", value: 34 }, // { name: "共和党", value: 34 },
{ name: "扩大军费", value: 16 }, // { name: "扩大军费", value: 16 },
{ name: "参议院多数党", value: 72 }, // { name: "参议院多数党", value: 72 },
{ name: "地方利益捍卫者", value: 58 }, // { name: "地方利益捍卫者", value: 58 },
{ name: "众议院预算委员会", value: 24 }, // { name: "众议院预算委员会", value: 24 },
{ name: "债务与赤字警告", value: 33 }, // { name: "债务与赤字警告", value: 33 },
{ name: "抗议医疗补助条款", value: 47 }, // { name: "抗议医疗补助条款", value: 47 },
{ name: "深红州", value: 32 }, // { name: "深红州", value: 32 },
{ name: "温和派选区", value: 62 }, // { name: "温和派选区", value: 62 },
{ name: "高压游说", value: 51 } // { name: "高压游说", value: 51 }
]; ];
// 资源库 const handleGetDecreeKeyInstruction = async () => {
const decreeList = ref([ try {
{ const res = await getDecreeKeyInstruction();
type: "总统政令", console.log("政令重点条款", res);
status: 1, wordCloudData.value = res.data.map(item => {
title: "关于进一步延长TikTok执法宽限期的行政令", return {
time: "2025年9月16日", name: item.clause,
img: 1, value: item.count
desc: "123", };
tagList: ["生物科技"] });
}, } catch (error) {
{ console.error("政令重点条款error", error);
type: "总统政令",
status: 1,
title: "为国家安全部署先进核反应堆技术",
time: "2025年9月16日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
time: "2025年9月15日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
time: "2025年9月15日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
time: "2025年9月14日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统备忘录",
status: 3,
title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
time: "2025年9月14日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "提名与任命",
status: 2,
title: "终止对不可靠、非受控能源的市场扭曲补贴",
time: "2025年9月11日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日",
img: 1,
desc: "123",
tagList: ["生物科技"]
},
{
type: "总统政令",
status: 1,
title: "对所有国家暂停免关税待遇",
time: "2025年9月6日",
img: 1,
desc: "123",
tagList: ["生物科技"]
} }
]); };
const curDecreeList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value; const handleBox8 = async () => {
const endIndex = startIndex + pageSize.value; await handleGetDecreeKeyInstruction();
return decreeList.value.slice(startIndex, endIndex); let chart3 = getWordCloudChart(wordCloudData.value);
}); setChart(chart3, "wordCloudChart");
};
// 资源库
const releaseTime = ref("近一年发布"); const releaseTime = ref("近一年发布");
const releaseTimeList = ref([ const releaseTimeList = ref([
{ {
...@@ -937,54 +949,12 @@ const releaseTimeList = ref([ ...@@ -937,54 +949,12 @@ const releaseTimeList = ref([
} }
]); ]);
const categoryList = ref(["全部分类", "白宫", "能源部", "商务部", "战争部", "FCC", "FDA", "NASA", "NSF", "NIH"]); const categoryList = ref(["全部分类", "白宫", "能源部", "商务部", "战争部", "FCC", "FDA", "NASA", "NSF", "NIH"]);
const activeCate = ref("全部分类"); const activeCate = ref("白宫");
const handleClickCate = cate => { const handleClickCate = cate => {
activeCate.value = cate; activeCate.value = cate;
}; };
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]
]);
const handleToPosi = id => { const handleToPosi = id => {
// 0 618 1240 2350 // 0 618 1240 2350
switch (id) { switch (id) {
...@@ -1003,33 +973,199 @@ const handleToPosi = id => { ...@@ -1003,33 +973,199 @@ const handleToPosi = id => {
} }
}; };
const areaList = [ const areaList = ref([
{ id: "人工智能", name: "人工智能" }, // { id: "人工智能", name: "人工智能" },
{ id: "集成电路", name: "集成电路" }, // { id: "集成电路", name: "集成电路" },
{ id: "通信网络", name: "通信网络" }, // { id: "通信网络", name: "通信网络" },
{ id: "量子科技", name: "量子科技" } // { id: "量子科技", name: "量子科技" }
]; ]);
const activeAreaList = ["人工智能"]; const activeAreaList = ref(["1"]);
const handleGetAreaList = async () => {
try {
const res = await getDecreehylyList();
console.log("行业领域列表", res);
if (res.code === 200 && res.data) {
areaList.value = res.data.map(item => {
return {
name: item.name,
id: item.id
};
});
console.log("areaList", areaList.value);
}
} catch (error) {}
};
const pubTime = ref([ const pubTime = ref([
{ id: "2025年", name: "2025年" }, { id: "2025", name: "2025年" },
{ id: "2024年", name: "2024年" }, { id: "2024", name: "2024年" },
{ id: "2023年", name: "2023年" }, { id: "2023", name: "2023年" },
{ id: "2022年", name: "2022年" }, { id: "2022", name: "2022年" },
{ id: "2021年", name: "2021年" }, { id: "2021", name: "2021年" },
{ id: "更早时间", name: "更早时间" } { id: "更早时间", name: "更早时间" }
]); ]);
const activePubTime = ref(["2025年"]); const activePubTime = ref(["2025"]);
const totalDecreesNum = ref(0);
const decreeList = ref([
// {
// type: "总统政令",
// status: 1,
// title: "关于进一步延长TikTok执法宽限期的行政令",
// time: "2025年9月16日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "为国家安全部署先进核反应堆技术",
// time: "2025年9月16日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
// time: "2025年9月15日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
// time: "2025年9月15日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
// time: "2025年9月14日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统备忘录",
// status: 3,
// title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
// time: "2025年9月14日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "提名与任命",
// status: 2,
// title: "终止对不可靠、非受控能源的市场扭曲补贴",
// time: "2025年9月11日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "对所有国家暂停免关税待遇",
// time: "2025年9月6日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "对所有国家暂停免关税待遇",
// time: "2025年9月6日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// },
// {
// type: "总统政令",
// status: 1,
// title: "对所有国家暂停免关税待遇",
// time: "2025年9月6日",
// img: 1,
// desc: "123",
// tagList: ["生物科技"]
// }
]);
const handleGetDecreeOrderList = async () => {
const params = {
currentPage: 0,
pageSize: 999999,
proposeName: activeCate.value,
researchTypeIds: '2,3',
sortFun: true,
years: activePubTime.value
};
try {
const res = await getDecreeOrderList(params);
console.log("资源库列表", res.data.content);
if (res.code === 200 && res.data) {
totalDecreesNum.value = res.data.totalElements;
decreeList.value = res.data.content.map(item => {
return {
id: item.id,
time: item.postDate,
title: item.name,
desc: item.order,
img: item.orgImage,
tagList: item.industryList
};
});
console.log("decreeList", decreeList.value);
} else {
decreeList.value = [];
}
// const startIndex = 0;
// const endIndex = pageSize.value;
// curDecreeList.value = decreeList.value.slice(startIndex, endIndex);
} catch (error) {}
};
const curDecreeList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return decreeList.value.slice(startIndex, endIndex);
});
watch(
() => activePubTime.value,
val => {
handleGetDecreeOrderList();
}
);
watch(
() => activeAreaList.value,
val => {
handleGetDecreeOrderList();
}
);
onMounted(async () => { onMounted(async () => {
let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY); handleGetAreaList();
setChart(chart1, "chart1"); handleGetDecreeOrderList();
handleBox1(); // 最新科技政令
let chart2 = getPieChart(chart2Data.value, colorList); handleBox5();
setChart(chart2, "chart2");
let chartCalendar = getCalendarHeatChart(calendarData.value); handleBox6();
setChart(chartCalendar, "chartCalendar");
handleBox8();
}); });
</script> </script>
...@@ -1602,9 +1738,9 @@ onMounted(async () => { ...@@ -1602,9 +1738,9 @@ onMounted(async () => {
&:hover { &:hover {
background: var(--color-bg-hover); background: var(--color-bg-hover);
} }
.itemLeftStatus1 { .itemLeftStatus3 {
color: rgba(82, 196, 26, 1) !important; color: rgba(245, 34, 45, 1) !important;
background: rgba(246, 255, 237, 1) !important; background: rgba(255, 241, 240) !important;
} }
.itemLeftStatus2 { .itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important; color: rgba(250, 140, 22, 1) !important;
...@@ -1616,8 +1752,8 @@ onMounted(async () => { ...@@ -1616,8 +1752,8 @@ onMounted(async () => {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
background: rgba(255, 241, 240); color: rgba(82, 196, 26, 1);
color: rgba(245, 34, 45, 1); background: rgba(246, 255, 237, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
...@@ -1633,16 +1769,20 @@ onMounted(async () => { ...@@ -1633,16 +1769,20 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
width: 348px; width: 318px;
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: 47px; line-height: 47px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.time { .time {
margin-left: 10px; width: 90px;
line-height: 47px; line-height: 47px;
text-align: center;
color: rgba(132, 136, 142, 1); color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 14px;
...@@ -2484,6 +2624,8 @@ onMounted(async () => { ...@@ -2484,6 +2624,8 @@ onMounted(async () => {
.box5-main { .box5-main {
height: 400px; height: 400px;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto;
overflow-x: hidden;
.box5-item { .box5-item {
width: 730px; width: 730px;
margin-top: 16px; margin-top: 16px;
...@@ -2502,33 +2644,45 @@ onMounted(async () => { ...@@ -2502,33 +2644,45 @@ onMounted(async () => {
margin-left: 13px; margin-left: 13px;
width: 100%; width: 100%;
.info-header { .info-header {
height: 24px;
display: flex; display: flex;
margin-top: 4px; margin-top: 4px;
justify-content: space-between; justify-content: space-between;
.title { .title {
width: 600px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.time { .time {
width: 91px;
height: 24px; height: 24px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
} }
.info-content { .info-content {
min-height: 24px;
max-height: 48px;
margin-top: 6px; margin-top: 6px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
overflow: hidden;
} }
} }
} }
...@@ -2634,7 +2788,7 @@ onMounted(async () => { ...@@ -2634,7 +2788,7 @@ onMounted(async () => {
gap: 16px; gap: 16px;
.left { .left {
width: 300px; width: 300px;
height: 443px; height: 666px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
...@@ -2666,7 +2820,7 @@ onMounted(async () => { ...@@ -2666,7 +2820,7 @@ onMounted(async () => {
margin-left: 25px; margin-left: 25px;
} }
.select-main1 { .select-main1 {
width: 100px; width: 260px;
} }
} }
} }
...@@ -2800,6 +2954,7 @@ onMounted(async () => { ...@@ -2800,6 +2954,7 @@ onMounted(async () => {
.tag-box { .tag-box {
margin-top: 9px; margin-top: 9px;
display: flex; display: flex;
gap: 8px;
.tag { .tag {
height: 28px; height: 28px;
line-height: 28px; line-height: 28px;
......
src/views/decree/decreeHome/utils/piechart.js
浏览文件 @ 1b14c707
const getPieChart = (data,colorList) => { const getPieChart = (data) => {
let option = { let option = {
color: colorList,
series: [ series: [
{ {
type: 'pie', type: 'pie',
......
src/views/decree/decreeHome/utils/wordCloudChart.js 0 → 100644
浏览文件 @ 1b14c707
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 5,
top: 5,
right: 5,
bottom: 5,
},
series: [
{
type: "wordCloud",
shape: 'circle',
width: '100%',
height: '100%',
// 其他形状你可以使用形状路径
// shape: 'circle', // 示例
// 或者自定义路径
gridSize: 30, // 网格大小，影响词间距。
sizeRange: [15, 40], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 0,
drawOutOfBound: false, // 是否超出画布
shrinkToFit: true, // 是否自动缩小以适应容器
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
};
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 1b14c707
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
<el-table :data="InnovationRanking" stripe style="width: 100%;padding: 5px 25px;" <el-table :data="InnovationRanking" stripe style="width: 100%;padding: 5px 25px;"
:header-cell-style="headerCellStyle"> :header-cell-style="headerCellStyle">
<el-table-column prop="name" label="创新主体" width="100" /> <el-table-column prop="name" label="创新主体" width="100" />
<el-table-column prop="markValue" align="right"> <el-table-column prop="markValue" align="center">
<template #header> <template #header>
<div class="custom-header"> <div class="custom-header">
<div class="label">市值</div> <div class="label">市值</div>
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ 1b14c707
...@@ -322,7 +322,16 @@ const totalDistribution = ref([ ...@@ -322,7 +322,16 @@ const totalDistribution = ref([
change: "较上月+8", change: "较上月+8",
path: "/innovationSubject", path: "/innovationSubject",
color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"] color: ["#C9AAF0", "#DFCAF6", "#FAF1FF", "#531DAC"]
} },
{
titlle: "科技人物观点",
value: 58,
text: "51",
unit: "次",
change: "较上月+3",
path: "/technologyFigures",
color: ["#96DFDD", "#BCEFEC", "#E7FFFB", "#006E75"]
},
]); ]);
const startIndex = ref(0); const startIndex = ref(0);
......
src/views/portals/portal1/index.vue
浏览文件 @ 1b14c707
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</div> </div>
</template> </template>
<div class="panel1Body"> <div class="panel1Body">
<Echarts :option="mapOption" height="100%" @chart-ready="echarsReady"></Echarts> <Echarts :option="mapOption" height="90%" @chart-ready="echarsReady"></Echarts>
<div class="countryWrap"> <div class="countryWrap">
<div class="item" v-for="(item, index) in mapData" :key="index"> <div class="item" v-for="(item, index) in mapData" :key="index">
<img :src="item.flag" alt="" class="itemIcon" /> <img :src="item.flag" alt="" class="itemIcon" />
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
</el-row> </el-row>
<el-card class="gap"> <el-card class="gap">
<el-row> <el-row>
<PieProgress v-for="item in List" :data="item" /> <PieProgress v-for="item,index in List" :key="index" :data="item" />
</el-row> </el-row>
</el-card> </el-card>
<el-row class="gap"> <el-row class="gap">
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }"> <div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="itemCard2TextWrap" v-for="(itemText, inde) in item.list" :key="index"> <div class="itemCard2TextWrap" v-for="(itemText, index) in item.list" :key="index">
<div class="temCard2Title">{{ itemText.title }}</div> <div class="temCard2Title">{{ itemText.title }}</div>
<div class="temCard2Text">{{ itemText.text }}</div> <div class="temCard2Text">{{ itemText.text }}</div>
</div> </div>
...@@ -1073,15 +1073,11 @@ function moreClick(n) { ...@@ -1073,15 +1073,11 @@ function moreClick(n) {
position: relative; position: relative;
height: 100%; height: 100%;
.countryWrap { .countryWrap {
position: absolute; width: 840px;
bottom: 8px;
left: 0;
right: 0;
width: 782px;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
gap: 10px; gap: 10px;
overflow-x: auto; justify-content: space-between;
.item { .item {
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/portals/utils/charts.js
浏览文件 @ 1b14c707
...@@ -74,7 +74,7 @@ export function setChart(option, chartDom) { ...@@ -74,7 +74,7 @@ export function setChart(option, chartDom) {
chart.setOption(option); chart.setOption(option);
return chart; return chart;
}; };
export function getMapOption(data,levelMap) { export function getMapOption(data, levelMap) {
echarts.registerMap('world', worldJson); echarts.registerMap('world', worldJson);
function convertData(data) { function convertData(data) {
let res = []; let res = [];
...@@ -144,7 +144,8 @@ export function getMapOption(data,levelMap) { ...@@ -144,7 +144,8 @@ export function getMapOption(data,levelMap) {
map: 'world', map: 'world',
roam: true, roam: true,
// 地图尺寸为容器宽高较小值的80% // 地图尺寸为容器宽高较小值的80%
zoom: 1.5, zoom: 1.15,
top: 0,
center: [31.614149450443932, 20.978078159827206], center: [31.614149450443932, 20.978078159827206],
// scaleLimit:{ // scaleLimit:{
// max:'1.2', // max:'1.2',
......
src/views/technologyFigures/component/SourceLibrary.vue
浏览文件 @ 1b14c707
<!-- SourceLibrary.vue --> <!-- SourceLibrary.vue -->
<template> <template>
<div class="source-library-container"> <div class="source-library-container">
<div class="source-library-grid"> <div class="source-library-grid">
<div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card"> <div v-for="(item, index) in sourceLibraryData" :key="index" class="source-library-card">
<div class="source-library-avatar-wrapper"> <div class="source-library-avatar-wrapper">
<img :src="item.avatar" alt="" class="source-library-avatar" /> <img :src="item.avatar" alt="" class="source-library-avatar" />
</div> </div>
<div class="source-library-text-content"> <div class="source-library-text-content">
<div style=" width: 240px;"> <div style="width: 240px">
<h3 class="source-library-name">{{ item.name }}</h3> <h3 class="source-library-name">{{ item.name }}</h3>
<p class="source-library-title">{{ item.title }}</p> <p class="source-library-title">{{ item.title }}</p>
<p class="source-library-tag" :style="{ <p
background: item.colorArray[2], class="source-library-tag"
color: item.colorArray[0], :style="{
borderColor: item.colorArray[1], background: item.colorArray[2],
}">{{ item.tag }}</p> color: item.colorArray[0],
</div> borderColor: item.colorArray[1]
}"
>
</div> {{ item.tag }}
</div> </p>
</div> </div>
<div class="page"> </div>
<div class="count">共1205项调查</div> </div>
<el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total" layout="prev, pager, next" </div>
background @current-change="handlePageChange" /> <div class="page">
</div> <div class="count">共1205项调查</div>
</div> <el-pagination
v-model:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
background
@current-change="handlePageChange"
/>
</div>
</div>
</template> </template>
<script setup> <script setup>
// 导入数据（建议使用更具语义的变量名） // 导入数据（建议使用更具语义的变量名）
import sourceLibraryData from '../json/source.json'; import sourceLibraryData from "../json/source.json";
import { ref } from 'vue' import { ref } from "vue";
const total = ref(1205); const total = ref(1205);
const pageSize = ref(121); const pageSize = ref(121);
const currentPage = ref(5); const currentPage = ref(5);
const handlePageChange = p => { const handlePageChange = p => {
currentPage.value = p; currentPage.value = p;
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.source-library-container { .source-library-container {
width: 1530px; width: 1530px;
margin: 0; margin: 0;
} }
.source-library-grid { .source-library-grid {
width: 1600px; width: 1600px;
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 16px 16px; gap: 16px 16px;
} }
.source-library-card { .source-library-card {
width: 388px; width: 388px;
height: 160px; height: 160px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: var(---10, 10px); border-radius: var(---10, 10px);
padding: 20px 18px; padding: 20px 18px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
} }
.source-library-card:hover { .source-library-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
} }
.source-library-avatar-wrapper { .source-library-avatar-wrapper {
flex-shrink: 0; flex-shrink: 0;
margin-right: 18px; margin-right: 18px;
} }
.source-library-avatar { .source-library-avatar {
/* 椭圆 142 */ /* 椭圆 142 */
width: 88px; width: 88px;
height: 88px; height: 88px;
border-radius: 50%; border-radius: 50%;
} }
.source-library-text-content { .source-library-text-content {
width: 656px; width: 656px;
flex: 1; flex: 1;
} }
.source-library-name { .source-library-name {
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
margin: 0; margin: 0;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 700; font-weight: 700;
line-height: 26px; line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.source-library-title { .source-library-title {
width: 240px; width: 240px;
height: 48px; height: 48px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
margin: 11px 0 14px 0; margin: 11px 0 14px 0;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.source-library-tag { .source-library-tag {
/* width: 72px; */
/* width: 72px; */ height: 22px;
height: 22px; /* 自动布局 */
/* 自动布局 */ display: inline-block;
display: inline-block; /* 关键：把块级盒子变成行内块 */
/* 关键：把块级盒子变成行内块 */
align-items: center;
align-items: center;
padding: 1px 8px 1px 8px;
padding: 1px 8px 1px 8px; box-sizing: border-box;
box-sizing: border-box; border: 1px solid rgba(255, 229, 143, 1);
border: 1px solid rgba(255, 229, 143, 1); border-radius: 4px;
border-radius: 4px; background: rgba(255, 251, 230, 1);
background: rgba(255, 251, 230, 1); color: rgba(22, 119, 255, 1);
color: rgba(22, 119, 255, 1); margin: 0;
margin: 0; font-family: Microsoft YaHei;
font-family: Microsoft YaHei; font-size: 14px;
font-size: 14px; font-weight: 400;
font-weight: 400; line-height: 20px;
line-height: 20px; letter-spacing: 0px;
letter-spacing: 0px; text-align: left;
text-align: left;
} }
.page { .page {
width: 1221px; /* width: 1221px; */
height: 40px; width: 1600px;
display: flex; height: 40px;
align-items: center; display: flex;
justify-content: space-between; align-items: center;
margin: 36px 0 0 0; justify-content: space-between;
padding-left: 11px; margin: 36px 0 0 0;
padding-left: 11px;
.count { .count {
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: 24px;
line-height: 24px; letter-spacing: 0px;
letter-spacing: 0px; text-align: left;
text-align: left; }
}
} }
:deep(.el-pagination) { :deep(.el-pagination) {
display: flex; display: flex;
align-items: center; align-items: center;
} }
:deep(.el-pagination.is-background .el-pager li) { :deep(.el-pagination.is-background .el-pager li) {
min-width: 32px; min-width: 32px;
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
border-radius: 6px; border-radius: 6px;
margin: 0 6px; margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff; background-color: #fff;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
} }
:deep(.el-pagination.is-background .el-pager li.is-active) { :deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff; background-color: #fff;
color: rgba(22, 119, 255, 1); color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1); border-color: rgba(22, 119, 255, 1);
} }
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) { :deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none; border: none;
background-color: transparent; background-color: transparent;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
min-width: 16px; min-width: 16px;
margin: 0 6px; margin: 0 6px;
} }
:deep(.el-pagination.is-background .btn-prev), :deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) { :deep(.el-pagination.is-background .btn-next) {
min-width: 32px; min-width: 32px;
height: 32px; height: 32px;
border-radius: 6px; border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff; background-color: #fff;
color: rgb(95, 101, 108); color: rgb(95, 101, 108);
font-size: 16px; font-size: 16px;
font-family: "Microsoft YaHei"; font-family: "Microsoft YaHei";
margin: 0 6px; margin: 0 6px;
} }
:deep(.el-pagination.is-background .btn-prev.is-disabled), :deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) { :deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45); color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242); border-color: rgb(235, 238, 242);
background-color: #fff; background-color: #fff;
} }
</style> </style>
\ No newline at end of file
src/views/technologyFigures/index.vue
浏览文件 @ 1b14c707
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<div class="search-text">搜索</div> <div class="search-text">搜索</div>
</div> </div>
</div> </div>
<div class="home-main-header-footer"> <!-- <div class="home-main-header-footer">
<div class="home-main-header-footer-item"> <div class="home-main-header-footer-item">
<div class="item-top">843</div> <div class="item-top">843</div>
<div class="item-footer">政府官员</div> <div class="item-footer">政府官员</div>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<div class="item-top">312</div> <div class="item-top">312</div>
<div class="item-footer">国会议员</div> <div class="item-footer">国会议员</div>
</div> </div>
</div> </div> -->
<div class="home-main-header-btn-box"> <div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')"> <div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div> <div class="btn-text">{{ "最新动态" }}</div>
...@@ -1202,7 +1202,7 @@ onMounted(() => { ...@@ -1202,7 +1202,7 @@ onMounted(() => {
} }
.home-main-footer { .home-main-footer {
height: 1149px; height: 1000px;
overflow: hidden; overflow: hidden;
.home-main-footer-header { .home-main-footer-header {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论