Skip to content

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

update

上级 dcb35cb3
隐藏空白字符变更
内嵌 并排
正在显示 包含 4115 行增加 和 1712 行删除
src/api/bill.js
浏览文件 @ 75e4f208
......@@ -7,7 +7,7 @@ import request from "@/api/request.js";
export function getBillInfo(params) {
return request({
method: 'GET',
url: `/billInfoBean/info/${params.id}`,
url: `/api/billInfoBean/info/${params.id}`,
params,
})
}
......@@ -20,7 +20,7 @@ export function getBillInfo(params) {
export function getBillPerson(params) {
return request({
method: 'GET',
url: `/billInfoBean/person/${params.id}`,
url: `/api/billInfoBean/person/${params.id}`,
params,
})
}
......@@ -33,7 +33,7 @@ export function getBillPerson(params) {
export function getBillEvent(params) {
return request({
method: 'GET',
url: `/billInfoBean/event/${params.id}`,
url: `/api/billInfoBean/event/${params.id}`,
params,
})
}
......@@ -46,7 +46,7 @@ export function getBillEvent(params) {
export function getBillDyqk(params) {
return request({
method: 'GET',
url: `/billInfoBean/dyqk/${params.id}`,
url: `/api/billInfoBean/dyqk/${params.id}`,
params,
})
}
......@@ -59,7 +59,7 @@ export function getBillDyqk(params) {
export function getBillBackground(params) {
return request({
method: 'GET',
url: `/billInfoBean/background/${params.id}`,
url: `/api/billInfoBean/background/${params.id}`,
params,
})
}
......@@ -72,7 +72,7 @@ export function getBillBackground(params) {
export function getBillPersonAnalyze(params) {
return request({
method: 'GET',
url: `/billInfoBean/personAnalyze/${params.id}`,
url: `/api/billInfoBean/personAnalyze/${params.id}`,
params,
})
}
......@@ -85,7 +85,7 @@ export function getBillPersonAnalyze(params) {
export function getBillContentId(params) {
return request({
method: 'GET',
url: `/billInfoBean/contentId/${params.id}`,
url: `/api/billInfoBean/contentId/${params.id}`,
params,
})
}
......@@ -98,7 +98,7 @@ export function getBillContentId(params) {
export function getBillContentTk(params) {
return request({
method: 'GET',
url: `/billInfoBean/content/tk/${params.id}`,
url: `/api/billInfoBean/content/tk/${params.id}`,
params,
})
}
......@@ -111,7 +111,7 @@ export function getBillContentTk(params) {
export function getBillContentXzfs(params) {
return request({
method: 'GET',
url: `/billInfoBean/content/xzfs/${params.id}`,
url: `/api/billInfoBean/content/xzfs/${params.id}`,
params,
})
}
......@@ -124,7 +124,7 @@ export function getBillContentXzfs(params) {
export function getBillHyly(params) {
return request({
method: 'GET',
url: `/billInfoBean/content/hyly/${params.id}`,
url: `/api/billInfoBean/content/hyly/${params.id}`,
params,
})
}
\ No newline at end of file
src/api/chat.js 0 → 100644
浏览文件 @ 75e4f208
import request from "@/api/chatRequest";
export function getChat(params) {
return request({
method: 'POST',
url: `/aichat/chat/chat/completions`,
data: params,
})
}
\ No newline at end of file
src/api/chatRequest.js 0 → 100644
浏览文件 @ 75e4f208
//引入axios请求
import axios from 'axios'
//引入element-plus里面的消息提示
import {
ElMessage
} from 'element-plus'
// Token管理
const TOKEN_KEY = 'auth_token'
// 获取token
const getToken = () => {
return 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkYXRhLWNlbnRlciIsImF1ZCI6IndlYiIsImlzcyI6ImRhdGEtY2VudGVyIiwiZXhwIjozODI1ODM1NTkxLCJpYXQiOjE2NzgzNTE5NTMsImp0aSI6IjI4YmY1NTZjMTc0MDQ3YjJiNTExNWM3NzVhYjhlNWRmIiwidXNlcm5hbWUiOiJzdXBlcl91c2VyIn0.zHyVzsleX2lEqjDBYRpwluu_wy2nZKGl0dw3IUGnKNw'
// return localStorage.getItem(TOKEN_KEY)
}
// 设置token
const setToken = (token) => {
localStorage.setItem(TOKEN_KEY, token)
}
// 移除token
const removeToken = () => {
localStorage.removeItem(TOKEN_KEY)
}
// 导出token管理方法
export { getToken, setToken, removeToken }
// const BASE_API = import.meta.env.VITE_BASE_API
// 创建axios实例
const service = axios.create({
// baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
timeout: 60000*5 // 请求超时时间,这里15秒
//withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
//请求头里面设置通用传参类型
/*headers: {
//设置后端需要的传参类型
'Content-Type': 'application/json',
'token': 'x-auth-token',//一开始就要token
'X-Requested-With': 'XMLHttpRequest',
}*/
})
// request拦截器
service.interceptors.request.use(config => {
// 获取token并添加到请求头
// const token = getToken()
// if (token) {
// // 根据curl命令，后端接受的是token字段名，而不是Authorization
// config.headers['token'] = token
// // config.headers['Authorization'] = `Bearer ${token}` // 如果后端需要Bearer格式可以使用这个
// }
return config
}, error => {
console.log(error)
return Promise.reject(error)
})
// response拦截器
service.interceptors.response.use(
response => {
//对数据返回做什么
if (response.data.code == 0) {
ElMessage({
message: response.data.message,
type: 'error',
duration: 3 * 1000
})
}
return response.data
},
error => {
console.log('err' + error)
// 处理token过期或无效的情况
if (error.response && (error.response.status === 401 || error.response.status === 403)) {
ElMessage({
message: 'Token已过期，请重新登录',
type: 'error',
duration: 3 * 1000
})
// 清除无效的token
removeToken()
// 可以在这里跳转到登录页
// router.push('/login')
} else {
ElMessage({
message: error.message,
type: 'error',
duration: 3 * 1000
})
}
return Promise.reject(error)
}
)
export default service
\ No newline at end of file
src/api/deepdig.js
浏览文件 @ 75e4f208
......@@ -7,7 +7,7 @@ import request from "@/api/request.js";
export function getBillTimeAnalyze(params) {
return request({
method: 'GET',
url: `/billDeepDive/processAnalyze/time/${params.id}`,
url: `/api/billDeepDive/processAnalyze/time/${params.id}`,
params,
})
}
......@@ -19,7 +19,7 @@ export function getBillTimeAnalyze(params) {
export function getBillTotalXj(params) {
return request({
method: 'GET',
url: `/billDeepDive/processAnalyze/totalxj/${params.id}`,
url: `/api/billDeepDive/processAnalyze/totalxj/${params.id}`,
params,
})
}
......@@ -31,7 +31,7 @@ export function getBillTotalXj(params) {
export function getBillTp(params) {
return request({
method: 'GET',
url: `/billDeepDive/processAnalyze/tp/${params.id}`,
url: `/api/billDeepDive/processAnalyze/tp/${params.id}`,
params,
})
}
......@@ -43,7 +43,7 @@ export function getBillTp(params) {
export function getBillXj(params) {
return request({
method: 'GET',
url: `/billDeepDive/processAnalyze/xj/${params.id}`,
url: `/api/billDeepDive/processAnalyze/xj/${params.id}`,
params,
})
}
......@@ -55,7 +55,7 @@ export function getBillXj(params) {
export function getProcessSummaryDetail(params) {
return request({
method: 'GET',
url: `/billDeepDive/processSummary/detail/${params.id}`,
url: `/api/billDeepDive/processSummary/detail/${params.id}`,
params,
})
}
......@@ -67,7 +67,7 @@ export function getProcessSummaryDetail(params) {
export function getProcessSummaryTk(params) {
return request({
method: 'GET',
url: `/billDeepDive/processSummary/tk/${params.id}`,
url: `/api/billDeepDive/processSummary/tk/${params.id}`,
params,
})
}
......@@ -79,7 +79,7 @@ export function getProcessSummaryTk(params) {
export function getProcessSummary(params) {
return request({
method: 'GET',
url: `/billDeepDive/processSummary/${params.id}`,
url: `/api/billDeepDive/processSummary/${params.id}`,
params,
})
}
\ No newline at end of file
src/api/home.js
浏览文件 @ 75e4f208
......@@ -4,7 +4,7 @@ import request from "@/api/request.js";
export function getHotBills() {
return request({
method: 'GET',
url: '/BillOverview/hotBills',
url: '/api/BillOverview/hotBills',
})
}
......@@ -15,7 +15,7 @@ export function getHotBills() {
export function getBillsByType(params) {
return request({
method: 'GET',
url: '/BillOverview/bills',
url: '/api/BillOverview/bills',
params,
})
}
......@@ -24,6 +24,6 @@ export function getBillsByType(params) {
export function getHylyList() {
return request({
method: 'GET',
url: `/billImpactAnalysis/industry/hylyList`,
url: `/api/billImpactAnalysis/industry/hylyList`,
})
}
\ No newline at end of file
src/api/influence.js
浏览文件 @ 75e4f208
......@@ -7,7 +7,7 @@ import request from "@/api/request.js";
export function getCompanyList(params) {
return request({
method: 'GET',
url: `/billImpactAnalysis/industry/company/${params.id}`,
url: `/api/billImpactAnalysis/industry/company/${params.id}`,
params,
})
}
......@@ -19,7 +19,7 @@ export function getCompanyList(params) {
export function getIndustryHyly(params) {
return request({
method: 'GET',
url: `/billImpactAnalysis/industry/hyly/${params.id}`,
url: `/api/billImpactAnalysis/industry/hyly/${params.id}`,
params,
})
}
......@@ -28,6 +28,6 @@ export function getIndustryHyly(params) {
export function getHylyList() {
return request({
method: 'GET',
url: `/billImpactAnalysis/industry/hylyList`,
url: `/api/billImpactAnalysis/industry/hylyList`,
})
}
\ No newline at end of file
src/api/request.js
浏览文件 @ 75e4f208
......@@ -27,10 +27,10 @@ const removeToken = () => {
// 导出token管理方法
export { getToken, setToken, removeToken }
const BASE_API = import.meta.env.VITE_BASE_API
// const BASE_API = import.meta.env.VITE_BASE_API
// 创建axios实例
const service = axios.create({
baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
// baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
timeout: 60000*5 // 请求超时时间,这里15秒
//withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
//请求头里面设置通用传参类型
......
src/components/AiBox.vue
浏览文件 @ 75e4f208
......@@ -51,7 +51,7 @@
</div>
</div>
<div class="footer">
<el-input type="textarea" :rows="3" v-model="question" placeholder="请输入问题开启智能问答" />
<el-input type="textarea" :rows="3" v-model="userInput" placeholder="请输入问题开启智能问答" />
<div class="btn">
<div class="icon">
<img src="@/assets/icons/aiBox/idea.png" alt="" />
......@@ -71,6 +71,8 @@ import { fetchEventSource } from "@microsoft/fetch-event-source";
import MarkdownIt from "markdown-it";
import { ElMessage } from "element-plus";
import { getChat } from "@/api/chat";
const contentContainer = ref(null);
const userInput = ref("");
const isLoading = ref(false);
......@@ -78,7 +80,7 @@ const abortController = ref(null);
// 消息数据
const messages = ref([
{
{
type: "user",
content: "你好"
},
......@@ -86,7 +88,6 @@ const messages = ref([
type: "ai",
content: "您好！我是AI助手，有什么可以帮助您的吗？"
}
]);
// Markdown 渲染器
......@@ -138,18 +139,22 @@ const connectSSE = async question => {
// 创建 AbortController 用于取消请求
abortController.value = new AbortController();
const params = {
query: "如何检索？",
knowledge_base_name: "kb_test251112",
top_k: 6,
score_threshold: 0.5,
metadata: { year: 2024 }
};
try {
await fetchEventSource("/api/chat-stream", {
await fetchEventSource("/chat/knowledge_base/search_docs", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
question: question
// 其他参数...
}),
body: JSON.stringify(params),
signal: abortController.value.signal,
onopen: async response => {
console.log("SSE 连接已建立", response.status);
if (response.status !== 200) {
......@@ -199,6 +204,23 @@ const connectSSE = async question => {
}
};
const chat = async () => {
const params = {
query: "如何检索？",
knowledge_base_name: "kb_test251112",
top_k: 6,
score_threshold: 0.5,
metadata: { year: 2024 }
};
try {
const res = await getChat(params);
console.log("chat", res);
} catch (error) {
console.error(error);
}
};
// 发送消息
const sendMessage = async () => {
const question = userInput.value.trim();
......@@ -214,6 +236,7 @@ const sendMessage = async () => {
userInput.value = "";
// await connectSSE(question);
chat();
};
// 停止生成
......
src/components/boxHeader.vue 0 → 100644
浏览文件 @ 75e4f208
<template>
<div class="header-wrapper">
<div class="icon"></div>
<div class="title"></div>
<div class="btn-box"></div>
</div>
</template>
\ No newline at end of file
src/router/index.js
浏览文件 @ 75e4f208
......@@ -15,7 +15,7 @@ import BillTemplate from '@/views/bill/template/index.vue'
import BillDeepDigLayout from '@/views/bill/deepDig/index.vue'
import BillDeepDigProcessOverview from '@/views/bill/deepDig/processOverview/index.vue'
import BillDeepDigProcessAnalysis from '@/views/bill/deepDig/processAnalysis/index.vue'
import BillDeepDigProgressOverview from '@/views/bill/deepDig/progressAnalysis/index.vue'
import BillDeepDigPoliContribution from '@/views/bill/deepDig/poliContribution/index.vue'
import BillInfluenceLayout from '@/views/bill/influence/index.vue'
import BillInfluenceIndustry from '@/views/bill/influence/industry/index.vue'
import BillInfluenceScientificResearch from '@/views/bill/influence/scientificResearch/index.vue'
......@@ -161,10 +161,10 @@ const routes = [
meta: { title: '流程分析' }
},
{
path: 'progressAnalysis',
name: 'DeepDigProgressAnalysis',
component: BillDeepDigProgressOverview,
meta: { title: '进程分析' }
path: 'poliContribution',
name: 'BillDeepDigPoliContribution',
component: BillDeepDigPoliContribution,
meta: { title: '政治献金' }
},
]
},
......
src/utils/setChart.js 0 → 100644
浏览文件 @ 75e4f208
// 绘制echarts图表
import * as echarts from 'echarts'
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
export default setChart
\ No newline at end of file
src/views/bill/billHome/index.vue
浏览文件 @ 75e4f208
......@@ -225,6 +225,7 @@
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
......@@ -301,6 +302,107 @@
<div class="box6-main" id="wordCloudChart"></div>
</div>
</div>
<div class="center-footer1">
<div class="box7">
<div class="box7-header">
<div class="box7-header-left">
<div class="box7-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box7-header-title">{{ "法案提出部门" }}</div>
</div>
<div class="box7-header-right">
<div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
</div>
</div>
<div class="box-center">
<el-select v-model="box7selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box7YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
</div>
<div class="box8">
<div class="box8-header">
<div class="box8-header-left">
<div class="box8-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box8-header-title">{{ "关键议员提案" }}</div>
</div>
<div class="box8-header-right">
<div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
</div>
</div>
<div class="box-center">
<el-select v-model="box8selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="box8-main">
<div class="box8-main-item" v-for="(item, index) in box8Data" :key="index">
<div class="box8-main-item-left">
<img :src="item.img" alt="" />
<div class="left-icon1">
<img :src="item.dangpai" alt="" />
</div>
<div class="left-icon2">
<img :src="item.yuan" alt="" />
</div>
</div>
<div class="box8-main-item-center">
<div class="box8-main-item-center-top">{{ item.name }}</div>
<div class="box8-main-item-center-footer">{{ item.zhiwei }}</div>
</div>
<div class="box8-main-item-right">
{{ `${item.num}项提案 >` }}
</div>
</div>
</div>
</div>
<div class="box9">
<div class="box9-header">
<div class="box9-header-left">
<div class="box9-header-icon">
<img src="./assets/images/box7-header-icon.png" alt="" />
</div>
<div class="box9-header-title">{{ "涉华法案领域分布" }}</div>
</div>
<div class="box9-header-right">
<div class="header-right-icon">
<img src="./assets/images/tips-icon.png" alt="" />
</div>
<div class="header-right-text">{{ "数据来源：美国国会官方网站" }}</div>
</div>
</div>
<div class="box-center">
<el-select v-model="box9selectetedTime" placeholder="选择时间" style="width: 90px">
<el-option
v-for="item in box9YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="box9-main" id="box9Chart"></div>
</div>
</div>
</div>
</div>
<div class="home-main-footer">
......@@ -405,12 +507,6 @@
</div>
</div>
</div>
<!-- <div class="ai-btn">
<div class="icon">
<img src="@/assets/icons/ai-icon.png" alt="" />
</div>
<div class="text">智能问答</div>
</div> -->
</div>
</template>
......@@ -432,6 +528,7 @@ import headerIcon5 from "./assets/icons/header-icon5.png";
import getMultiLineChart from "./utils/multiLineChart";
import getWordCloudChart from "./utils/worldCloudChart";
import getPieChart from "./utils/piechart";
import bill1 from "./assets/images/bill1.png";
import bill2 from "./assets/images/bill2.png";
......@@ -456,6 +553,17 @@ import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
import Box8Img1 from "./assets/images/box8-icon1.png";
import Box8Img2 from "./assets/images/box8-icon2.png";
import Box8Img3 from "./assets/images/box8-icon3.png";
import Box8Img4 from "./assets/images/box8-icon4.png";
import Box8Img5 from "./assets/images/box8-icon5.png";
import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
......@@ -465,7 +573,7 @@ const handleCurrentChange = page => {
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const hotBillList = ref([]); // 热门法案列表
const hotBillList = ref([]); // 热门法案列表
const curHotBillListIndex = ref(0); // 当前热门法案索引
// 切换热门法案
......@@ -659,7 +767,67 @@ const curBillList = computed(() => {
return billList.value.slice(startIndex, endIndex);
});
const releaseTime = ref("近一年发布"); // 发布时间
const box7selectetedTime = ref("2025");
const box7YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
}
]);
const box8selectetedTime = ref("2025");
const box8YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
}
]);
const box9selectetedTime = ref("2025");
const box9YearList = ref([
{
label: "2025",
value: "2025"
},
{
label: "2024",
value: "2024"
},
{
label: "2023",
value: "2023"
},
{
label: "2022",
value: "2022"
}
]);
const releaseTime = ref("近一年发布"); // 发布时间
const releaseTimeList = ref([
{
......@@ -869,6 +1037,82 @@ const wordCloudData = ref([
{ name: "加强供应链风险管理", value: 73 }
]);
const box9ChartData = ref([
{
name: "半导体",
value: 50
},
{
name: "电子设备",
value: 46
},
{
name: "显示技术",
value: 40
},
{
name: "新能源",
value: 32
},
{
name: "通信设备",
value: 31
},
{
name: "汽车",
value: 30
},
{
name: "其他",
value: 24
}
]);
const box8Data = ref([
{
name: "汤姆·科顿",
zhiwei: "参议院情报委员会主席",
img: Message3,
dangpai: Cyy,
yuan: Ghd,
num: 8
},
{
name: "吉姆·里施",
zhiwei: "参议院外交关系委员会主席",
img: Message3,
dangpai: Cyy,
yuan: Ghd,
num: 4
},
{
name: "特德·克鲁兹",
zhiwei: "参议院商务、科学和交通委员会主席",
img: Message3,
dangpai: Cyy,
yuan: Ghd,
num: 2
},
{
name: "里克·克劳福德",
zhiwei: "众议院美中战略竞争特设委员会主席",
img: Message3,
dangpai: Cyy,
yuan: Ghd,
num: 2
},
{
name: "布莱恩·马斯特",
zhiwei: "众议院情报委员会主席",
img: Message3,
dangpai: Cyy,
yuan: Ghd,
num: 2
}
]);
const box9ChartColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
onMounted(async () => {
handleGetHylyList();
await handleGetHotBills();
......@@ -879,6 +1123,9 @@ onMounted(async () => {
const wordCloudChart = getWordCloudChart(wordCloudData.value);
setChart(wordCloudChart, "wordCloudChart");
const box9Chart = getPieChart(box9ChartData.value, box9ChartColorList.value);
setChart(box9Chart, "box9Chart");
});
</script>
......@@ -918,6 +1165,7 @@ onMounted(async () => {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
......@@ -1029,6 +1277,7 @@ onMounted(async () => {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
......@@ -1465,6 +1714,7 @@ onMounted(async () => {
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
......@@ -1589,6 +1839,7 @@ onMounted(async () => {
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
......@@ -1610,6 +1861,19 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
}
.box3-main {
......@@ -1917,6 +2181,305 @@ onMounted(async () => {
}
}
}
.center-footer1 {
display: flex;
gap: 16px;
margin-top: 16px;
.box7 {
width: 520px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
}
.box7-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
.box8 {
width: 527px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
}
.box8-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.box8-main {
height: 340px;
.box8-main-item {
margin: 0 auto;
width: 458px;
height: 51px;
margin-bottom: 16px;
display: flex;
align-items: center;
position: relative;
.box8-main-item-left {
position: relative;
width: 42px;
height: 42px;
img {
width: 100%;
height: 100%;
}
.left-icon1 {
position: absolute;
left: 2px;
bottom: -6px;
width: 20px;
height: 20px;
border-radius: 10px;
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
.left-icon2 {
position: absolute;
right: 2px;
bottom: -6px;
width: 20px;
height: 20px;
border-radius: 10px;
background: (255, 255, 255, 0.8);
box-sizing: border-box;
padding: 2px;
img {
width: 100%;
height: 100%;
}
}
}
.box8-main-item-center {
height: 48px;
margin-left: 12px;
.box8-main-item-center-top {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.box8-main-item-center-footer {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.box8-main-item-right {
position: absolute;
top: 0;
right: 0;
width: 92px;
height: 51px;
text-align: right;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 51px;
}
}
}
}
.box9 {
width: 521px;
height: 450px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box9-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box9-header-left {
display: flex;
.box9-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box9-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
}
.box9-header-right {
display: flex;
justify-content: flex-end;
gap: 8px;
height: 24px;
margin-top: 12px;
.header-right-icon {
margin-top: 4px;
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-right-text {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box-center {
height: 45px;
padding-right: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.box9-main {
height: 340px;
}
}
}
}
}
.home-main-footer {
......
src/views/bill/billHome/utils/doublePieChart.js 0 → 100644
浏览文件 @ 75e4f208
const getDoublePieChart = (data) => {
const colorList = ['#8AC4FF','#FFD591']
const colorList1 = ['#055FC2','#FFA940']
let option = {
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getDoublePieChart;
\ No newline at end of file
src/views/bill/billHome/utils/piechart.js 0 → 100644
浏览文件 @ 75e4f208
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/bill/deepDig/index.vue
浏览文件 @ 75e4f208
......@@ -38,9 +38,9 @@ const siderBtnList = ref([
path: "/billLayout/deepDig/processAnalysis",
},
{
name: "进程分析",
name: "政治献金",
isActive: false,
path: "/billLayout/deepDig/progressAnalysis",
path: "/billLayout/deepDig/poliContribution",
},
]);
......
src/views/bill/deepDig/poliContribution/index.vue 0 → 100644
浏览文件 @ 75e4f208
<template>
<div class="wrapper">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "主要议员" }}</div>
<div class="btn-box">
<div class="btn" :class="{ btnActive: activeBtnIndex === 0 }">{{ "参议院" }}</div>
<div class="btn" :class="{ btnActive: activeBtnIndex === 1 }">{{ "众议院" }}</div>
</div>
<div class="header-right">
<div class="right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="right-icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-top">
<div class="top-item" v-for="(item, index) in majorList[activeBtnIndex].data1" :key="index">
<div class="icon">
<img :src="item.img" alt="" />
</div>
<div class="name">{{ item.name }}</div>
<div class="line" :class="{ line1: index === 0, line2: index === 1 }"></div>
<div class="num" :class="{ num1: index === 0, num2: index === 1 }">{{ item.num }}</div>
</div>
</div>
<div class="box1-main-main">
<div
class="item"
:class="{ itemActive: itemActiveIndex === index }"
v-for="(item, index) in majorList[activeBtnIndex].data2"
:key="index"
>
<div class="item-left">
<img :src="item.img" alt="" />
</div>
<div class="item-center">
<div class="center-top">
<div class="name">{{ item.name }}</div>
<div class="icon1">
<img :src="item.dangpai" alt="" />
</div>
<div class="icon2">
<img :src="item.yuanbie" alt="" />
</div>
</div>
<div class="center-footer">
{{ item.zhiwei }}
</div>
</div>
<div class="item-right">
{{ item.num }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box2">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "政治献金流向" }}</div>
<div class="header-right">
<div class="right-icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="right-icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2-main" id="chart1"></div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3">
<div class="box-header">
<div class="icon"></div>
<div class="title">{{ "政治献金领域分布" }}</div>
<div class="header-right">
<div class="right-icon">
<img src="@/assets/icons/box-header-icon1.png" alt="" />
</div>
<div class="right-icon">
<img src="@/assets/icons/box-header-icon2.png" alt="" />
</div>
<div class="right-icon">
<img src="@/assets/icons/box-header-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-main-left" id="chart2"></div>
<div class="box3-main-right">
<div class="box3-main-right-item" v-for="(item, index) in areaList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="name">{{ item.name }}</div>
<div class="line">
<div class="inner-line" :style="{width: (item.num / areaList[0].num)* 100 + '%' }"></div>
</div>
<div class="num">{{ item.numtext }}</div>
<div class="more">{{ `${item.insNum}家机构 >` }}</div>
</div>
</div>
</div>
<div class="box-footer">
<div class="box-footer-left">
<img src="@/assets/icons/box-footer-left-icon.png" alt="" />
</div>
<div class="box-footer-center">
{{
"马尔科·卢比奥的政治资金主要依赖于一个由亿万富翁、特定行业利益集团及通过​“超级政治行动委员会”​​ 运作的大额捐款网络。"
}}
</div>
<div class="box-footer-right">
<img src="@/assets/icons/box-footer-right-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getSankeyChart from "./utils/sankey"
import Img1 from "./assets/images/1.png";
import Img2 from "./assets/images/2.png";
import Img3 from "./assets/images/3.png";
import Img4 from "./assets/images/4.png";
import Img5 from "./assets/images/5.png";
import Img6 from "./assets/images/6.png";
import Img7 from "./assets/images/7.png";
import Img8 from "./assets/images/8.png";
import Img9 from "./assets/images/9.png";
import Img10 from "./assets/images/10.png";
import Cyy from "@/assets/icons/cyy.png";
import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png";
const activeBtnIndex = ref(0);
const itemActiveIndex = ref(0);
const majorList = ref([
{
name: "参议院",
data1: [
{
name: "共和党",
img: Ghd,
num: "$1,550,000"
},
{
name: "民主党",
img: Mzd,
num: "$298,000"
}
],
data2: [
{
img: Img1,
name: "马尔科·卢比奥",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$1,550,000"
},
{
img: Img2,
name: "史蒂夫·戴恩斯",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$820,000"
},
{
img: Img3,
name: "伯尼·莫雷诺",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$50,000"
},
{
img: Img4,
name: "戴夫·麦考密克",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$50,000"
},
{
img: Img5,
name: "蒂姆·希伊",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
},
{
img: Img6,
name: "史蒂夫·戴恩斯",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
},
{
img: Img7,
name: "皮特·赫格塞思",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
},
{
img: Img8,
name: "安妮·海瑟薇",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
},
{
img: Img9,
name: "贾米森·格里尔",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
},
{
img: Img10,
name: "迈克·华尔兹",
dangpai: Ghd,
yuanbie: Cyy,
zhiwei: "众议院预算委员会主席",
num: "$35,000"
}
]
}
]);
const chart1Data = ref(
)
const areaList = ref([
{
name: "半导体",
num: 186000,
numtext: "$186,000",
insNum: 8
},
{
name: "电子设备",
num: 180000,
numtext: "$180,000",
insNum: 5
},
{
name: "显示技术",
num: 171000,
numtext: "$171,000",
insNum: 2
},
{
name: "新能源",
num: 75000,
numtext: "$75,000",
insNum: 3
},
{
name: "通信设备",
num: 70000,
numtext: "$70,000",
insNum: 2
},
{
name: "汽车",
num: 52000,
numtext: "$52,000",
insNum: 2
},
{
name: "其他",
num: 36000,
numtext: "$36,000",
insNum: 1
}
]);
const chart2Data = ref([
{
name: "半导体",
value: 50
},
{
name: "电子设备",
value: 46
},
{
name: "显示技术",
value: 40
},
{
name: "新能源",
value: 32
},
{
name: "通信设备",
value: 31
},
{
name: "汽车",
value: 30
},
{
name: "其他",
value: 24
}
]);
const chart2ColorList = ref(["#4096FF", "#FFA39E", "#ADC6FF", "#FFC069", "#B5F5EC", "#B37FEB", "#D6E4FF"]);
onMounted(() => {
let chart1 = getSankeyChart()
setChart(chart1, 'chart1')
let chart2 = getPieChart(chart2Data.value, chart2ColorList.value);
setChart(chart2, "chart2");
});
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
gap: 16px;
.box-header {
height: 51px;
width: 100%;
display: flex;
position: relative;
.icon {
width: 8px;
height: 20px;
margin-top: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
}
.title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.btn-box {
display: flex;
gap: 8px;
position: absolute;
right: 84px;
top: 15px;
.btn {
height: 28px;
padding: 0 8px;
box-sizing: border-box;
color: var(--btn-plain-text-color);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
border-radius: 4px;
background: var(--btn-plain-bg-color);
border: 1px solid var(--btn-plain-border-color);
}
.btnActive {
color: var(--btn-active-text-color);
background: var(--btn-active-bg-color);
border: 1px solid var(--btn-active-border-color);
}
}
.header-right {
position: absolute;
right: 12px;
top: 14px;
display: flex;
gap: 4px;
.right-icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box-footer {
margin: 0 auto;
display: flex;
width: 1034px;
height: 40px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.box-footer-left {
width: 19px;
height: 20px;
margin-top: 10px;
margin-left: 12px;
img {
width: 100%;
height: 100%;
}
}
.box-footer-center {
margin-left: 13px;
width: 941px;
height: 40px;
line-height: 40px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box-footer-right {
margin-left: 13px;
margin-top: 8px;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
margin-top: 16px;
width: 520px;
height: 846px;
.box1 {
width: 520px;
height: 846px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box1-main {
.box1-main-top {
width: 486px;
height: 110px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
margin: 8px auto;
.top-item {
display: flex;
align-items: center;
width: 450px;
height: 30px;
margin: 15px auto;
.icon {
width: 30px;
height: 30px;
img {
width: 100%;
height: 100%;
}
}
.name {
height: 30px;
margin-left: 10px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
}
.line {
margin-left: 10px;
width: 202px;
height: 8px;
border-radius: 0px 4px 4px 0px;
}
.line1 {
background: linear-gradient(270deg, rgba(206, 79, 81, 1), rgba(206, 79, 81, 0) 100%);
}
.line2 {
background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
}
.num {
margin-left: 10px;
width: 120px;
height: 24px;
text-align: right;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.num1 {
color: rgba(206, 79, 81, 1);
}
.num2 {
color: rgba(5, 95, 194, 1);
}
}
}
.box1-main-main {
margin: 0 auto;
margin-top: 6px;
width: 498px;
height: 640px;
.item {
display: flex;
position: relative;
height: 64px;
box-sizing: border-box;
border-radius: 4px;
border: 1px soild transparent;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.item-left {
width: 40px;
height: 40px;
margin-top: 11px;
margin-left: 14px;
img {
width: 100%;
height: 100%;
}
}
.item-center {
margin-left: 11px;
.center-top {
display: flex;
.name {
height: 24px;
margin-top: 7px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.icon1 {
width: 16px;
height: 16px;
margin-left: 7px;
margin-top: 11px;
img {
width: 100%;
height: 100%;
}
}
.icon2 {
width: 16px;
height: 16px;
margin-left: 2px;
margin-top: 11px;
img {
width: 100%;
height: 100%;
}
}
}
.center-footer {
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 24px;
}
}
.item-right {
position: absolute;
right: 16px;
top: 19px;
height: 24px;
text-align: right;
color: rgba(206, 79, 81, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.itemActive {
background: rgba(246, 250, 255, 1);
border: 1px solid rgba(174, 214, 255, 1);
}
}
}
}
}
.right {
margin-top: 16px;
width: 1064px;
height: 846px;
.box2 {
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box2-main {
width: 1020px;
height: 302px;
margin: 0 auto;
margin-bottom: 9px;
}
}
.box3 {
margin-top: 16px;
width: 1064px;
height: 415px;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box3-main {
width: 1020px;
height: 300px;
margin: 0 auto;
margin-top: 3px;
margin-bottom: 9px;
display: flex;
.box3-main-left {
width: 492px;
}
.box3-main-right {
width: 518px;
margin-left: 10px;
overflow: hidden;
.box3-main-right-item {
height: 60px;
width: 518px;
box-sizing: border-box;
display: flex;
align-items: center;
.id {
margin-left: 15px;
width: 24px;
height: 24px;
background: #e7f3ff;
border-radius: 12px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 24px;
text-align: center;
}
.name {
margin-left: 13px;
width: 80px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.line {
margin-left: 25px;
width: 166px;
height: 8px;
.inner-line {
height: 8px;
border-radius: 0px 4px 4px 0px;
background: linear-gradient(270deg, rgba(5, 95, 194, 1), rgba(5, 95, 194, 0) 100%);
}
}
.num {
margin-left: 17px;
width: 75px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.more {
margin-left: 25px;
width: 80px;
height: 30px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
&:nth-child(2n-1) {
border-top: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
}
}
}
}
}
}
}
</style>
src/views/bill/deepDig/poliContribution/utils/piechart.js 0 → 100644
浏览文件 @ 75e4f208
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/bill/deepDig/poliContribution/utils/sankey.js 0 → 100644
浏览文件 @ 75e4f208
const getSankeyChart = () => {
const option = {
series: {
type: 'sankey',
layout: 'none',
left: '5%',
right: '5%',
top: '5%',
bottom: '5%',
emphasis: {
focus: 'adjacency'
},
nodeWidth: 50,
label: {
show: true,
formatter: function (params) {
return `${params.name} $${params.value}`;
},
position: 'right',
textStyle: {
fontSize: '16px',
color: '#555'
}
},
data: [
{
name: '马尔科·卢比奥',
label: {
position: 'left'
}
},
{
name: '成长俱乐部'
},
{
name: '埃利奥特管理公司'
},
{
name: '高盛集团'
},
{
name: '黑石集团'
},
{
name: '佛罗里达水晶'
},
{
name: '美国银行'
}
],
links: [
{
source: '成长俱乐部',
target: '马尔科·卢比奥',
value: 680751
},
{
source: '埃利奥特管理公司',
target: '马尔科·卢比奥',
value: 440120
},
{
source: '高盛集团',
target: '马尔科·卢比奥',
value: 371517
},
{
source: '黑石集团',
target: '马尔科·卢比奥',
value: 259321
},
{
source: '佛罗里达水晶',
target: '马尔科·卢比奥',
value: 203775
},
{
source: '美国银行',
target: '马尔科·卢比奥',
value: 150892
}
]
}
};
return option
}
export default getSankeyChart
\ No newline at end of file
src/views/bill/deepDig/progressAnalysis/index.vue deleted 100644 → 0
浏览文件 @ dcb35cb3
<template>
<div>我是进程分析</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
</style>
src/views/decree/decreeHome/index.vue
浏览文件 @ 75e4f208
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="search-header" v-show="isShow">
<div class="home-main-header-center">
<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技政令" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
</div>
<div class="home-main" :class="{ scrollHomeMain: isShow }" ref="containerRef">
<div class="home-main-header">
<div class="home-main-header-top">
<div class="home-main-header-top" v-show="!isShow">
<span>国家科技安全 </span>> <span>中美博弈概览 </span>>
<span>科技政令</span>
</div>
<div class="home-main-header-center">
<div class="home-main-header-center" v-show="!isShow">
<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技政令" />
<div class="search">
<div class="search-icon">
......@@ -15,7 +44,7 @@
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-footer">
<div class="home-main-header-footer" v-show="!isShow">
<div class="home-main-header-footer-item">
<div class="item-top">3.8T</div>
<div class="item-footer">数据量</div>
......@@ -37,7 +66,7 @@
<div class="item-footer">分析报告</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="home-main-header-btn-box" v-show="!isShow">
<div class="btn">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
......@@ -64,7 +93,7 @@
</div>
</div>
</div>
<DivideHeader class="divide" :titleText="'最新动态'"></DivideHeader>
<DivideHeader class="divide" :titleText="'最新动态'"></DivideHeader>
<div class="home-main-center">
<div class="center-top">
<div class="box1">
......@@ -170,7 +199,57 @@
</div>
</div>
</div>
<div class="center-center1">
<DivideHeader class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in newsList" :key="index">
<div class="left">
<img :src="news.img" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.title }}</div>
<div class="time">{{ news.from }}</div>
</div>
<div class="right-footer">{{ news.content }}</div>
</div>
</div>
</div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/box4-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="more">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
<div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left">
<img :src="item.img" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="center-center1">
<div
class="center1-item"
:class="{ center1ItemActive: center1ActiveIndex === 0 }"
......@@ -239,8 +318,8 @@
</div>
</div>
</div>
</div>
<div class="center-center2">
</div> -->
<!-- <div class="center-center2">
<div class="center2-header">
<div class="center2-header-left">
<div class="left">
......@@ -356,7 +435,8 @@
</div>
</div>
</div>
</div>
</div> -->
<DivideHeader class="divide3" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box3">
<div class="box3-header">
......@@ -422,6 +502,7 @@
</div>
</div>
<div class="home-main-footer">
<DivideHeader class="divide4" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
......@@ -458,28 +539,51 @@
</div>
</div>
<div class="home-main-footer-main">
<div class="main-item" v-for="(decree, index) in curDecreeList" :key="index">
<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="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">
<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 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="footer-box">
<div class="footer-left">
{{ `共${decreeList.length}项调查` }}
</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 class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="10"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="decreeList.length"
/>
</div>
</div>
</div>
......@@ -489,12 +593,12 @@
</template>
<script setup>
import { onMounted, ref } from "vue";
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import WordCloudMap from "./WordCloudMap.vue";
import DivideHeader from "@/components/DivideHeader.vue";
import { useContainerScroll } from "@/hooks/useScrollShow";
import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
......@@ -522,12 +626,88 @@ import Gov8 from "./assets/images/gov8.png";
import Gov9 from "./assets/images/gov9.png";
import Gov10 from "./assets/images/gov10.png";
import News1 from "./assets/images/news1.png";
import News2 from "./assets/images/news2.png";
import News3 from "./assets/images/news3.png";
import News4 from "./assets/images/news4.png";
import News5 from "./assets/images/news5.png";
import Message1 from "./assets/images/message-icon1.png";
import Message2 from "./assets/images/message-icon2.png";
import Message3 from "./assets/images/message-icon3.png";
const currentPage = ref(1);
const pageSize = ref(10);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
};
const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef);
const center1ActiveIndex = ref(0);
const handleClickCenter1Item = index => {
center1ActiveIndex.value = index;
};
// 新闻资讯
const newsList = ref([
{
img: News1,
title: "美政府停摆仍持续，拨款法案存缺陷，但两党磋商露曙光",
content: `美国政府停摆已持续34天，距离历史上最长的停摆纪录仅差一天，参议院已先后13次尝试...`,
from: "11-4 · 华盛顿邮报"
},
{
img: News2,
title: "美参议院通过决议，要求终止特朗普全球关税政策",
content: `参议院以51票赞成、47票反对通过一项决议，旨在终止特朗普实施的全面关税政策，四名......`,
from: "11-4 · 纽约时报"
},
{
img: News3,
title: "美众院通过950亿美元对外援助法案，包含对台军援",
content: `国会众议院在4月通过了大规模对外援助法案，其中包括为“印太安全”提供资金的条款，......`,
from: "11-3 · 洛杉矶时报"
},
{
img: News4,
title: "“大而美”法案在激烈争议中通过",
content: `特朗普力推的大规模税收与支出法案在国会以微弱优势通过。该法案因大幅削减医疗补助和......`,
from: "11-3 · 今日美国"
},
{
img: News5,
title: "美政府“停摆”追平历史最长纪录，民生多领域受重创",
content: `联邦政府“停摆”进入第35天，追平历史纪录。食品救济项目资金中断，数百万低收入民......`,
from: "11-2 · ​福克斯新闻网"
}
]);
// 社交媒体
const messageList = ref([
{
img: Message1,
name: "唐纳德·特朗普",
time: "15:23 · 发布于真实社交",
content: `埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。`
},
{
img: Message2,
name: "埃隆·马斯克",
time: "14:49 · 发布于X",
content: `如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。`
},
{
img: Message3,
name: "塞巴斯蒂安·马拉比",
time: "11:05 · 发布于X",
content: `提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。`
}
]);
const govInsList = ref([
{
img: Gov1,
......@@ -834,7 +1014,7 @@ const areaList = ref([
}
]);
const curDecreeList = ref([
const decreeList = ref([
{
type: "总统政令",
status: 1,
......@@ -877,6 +1057,66 @@ const curDecreeList = ref([
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日"
},
{
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,
......@@ -885,6 +1125,12 @@ const curDecreeList = ref([
}
]);
const curDecreeList = computed(() => {
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return decreeList.value.slice(startIndex, endIndex);
});
const releaseTime = ref("近一年发布");
const releaseTimeList = ref([
......@@ -1089,10 +1335,106 @@ onMounted(async () => {
box-shadow: none;
}
.home-wrapper {
width: 100%;
height: calc(100vh - 96px);
position: relative;
overflow-y: hidden;
.search-header {
width: 100%;
height: 144px;
background: #fff;
overflow: hidden;
.home-main-header-center {
margin-top: 20px;
margin-left: 200px;
width: 800px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
.search {
position: absolute;
right: 1px;
top: 2px;
width: 120px;
height: 44px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-btn-box {
margin-top: 20px;
margin-left: 200px;
display: flex;
gap: 16px;
.btn {
display: flex;
width: 140px;
height: 36px;
border: 1px solid #aed6ff;
box-sizing: border-box;
border-radius: 18px;
justify-content: center;
background: #e7f3ff;
position: relative;
cursor: pointer;
&:hover {
background: #cae3fc;
}
.btn-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
.btn-icon {
height: 20px;
line-height: 20px;
position: absolute;
top: 6px;
right: 8px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
}
}
}
}
.scrollHomeMain {
width: 100%;
height: calc(100% - 144px);
overflow-y: auto;
}
.home-main {
// width: 1400px;
width: 100%;
margin: 0 auto;
height: 100%;
overflow-y: auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
......@@ -1128,11 +1470,11 @@ onMounted(async () => {
.search {
position: absolute;
right: 1px;
top: 1px;
top: 2px;
width: 120px;
height: 42px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
height: 44px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
......@@ -1221,8 +1563,8 @@ onMounted(async () => {
}
}
.home-main-header-item-box {
margin-top: 48px;
margin-bottom: 64px;
margin-top: 48px;
margin-bottom: 64px;
width: 1600px;
display: flex;
flex-wrap: wrap;
......@@ -1236,7 +1578,7 @@ onMounted(async () => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 0.65);
align-items: center;
margin:0 6px 16px 6px;
margin: 0 6px 16px 6px;
.item-left {
width: 48px;
height: 48px;
......@@ -1605,6 +1947,225 @@ onMounted(async () => {
}
}
}
.divide2 {
width: 1600px;
margin: 0 auto;
margin-top: 68px;
margin-bottom: 36px;
}
.center-center {
width: 1600px;
margin: 0 auto;
margin-top: 21px;
height: 450px;
display: flex;
.box3 {
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 520px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 18px;
height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-top: 8px;
.box4-main-item {
margin-top: 16px;
display: flex;
margin-left: 21px;
.left {
margin-top: 5px;
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 10px;
width: 690px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
padding: 10px 15px;
.right-top {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
}
}
}
.center-center1 {
margin: 0 auto;
margin-top: 24px;
......@@ -2030,6 +2591,12 @@ onMounted(async () => {
}
}
}
.divide3 {
width: 1600px;
margin: 0 auto;
margin-top: 68px;
margin-bottom: 36px;
}
.center-footer {
margin-top: 21px;
height: 452px;
......@@ -2267,9 +2834,15 @@ onMounted(async () => {
}
}
.home-main-footer {
// width: 100%;
height: 911px;
margin-top: 34px;
height: 1379px;
background: rgba(248, 249, 250, 1);
overflow: hidden;
.divide4 {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
.home-main-footer-header {
width: 1600px;
height: 42px;
......@@ -2317,101 +2890,142 @@ onMounted(async () => {
}
.home-main-footer-main {
width: 1600px;
height: 685px;
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;
padding: 10px 20px 0 20px;
overflow-y: auto;
.main-item {
border-radius: 10px;
.content-header {
height: 48px;
display: flex;
height: 84px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.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);
.icon {
width: 20px;
height: 20px;
margin-top: 14px;
margin-left: 19px;
img {
width: 100%;
height: 100%;
}
}
.main-item-center {
width: 1300px;
.main-item-center-box1 {
margin-top: 15px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.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;
}
.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;
}
.main-item-right {
}
.content-box {
height: 850px;
margin: 0 30px;
.main-item {
display: flex;
.main-item-right-text {
margin-top: 18px;
width: 128px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
height: 84px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.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);
}
}
.main-item-right-icon {
margin-top: 22px;
margin-left: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
.main-item-center {
width: 1300px;
.main-item-center-box1 {
margin-top: 15px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.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;
}
}
.main-item-right {
display: flex;
.main-item-right-text {
margin-top: 18px;
width: 128px;
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.main-item-right-icon {
margin-top: 22px;
margin-left: 9px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.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;
}
}
}
}
}
}
.divide{
margin: 0 auto;
.divide {
margin: 0 auto;
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/deepdig/index.vue
浏览文件 @ 75e4f208
<template>
<div class="wrap">
<div class="box1">
<div class="wrap">
<!-- <div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">政令时序及战略里程碑</div>
......@@ -46,211 +46,228 @@
<img src="./assets/icons/box1-icon3.png" alt="" />
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关政令关联分析</div>
<div class="header-right">
<img src="./assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div class="left">
<div
class="left-item"
:class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in decreeList"
:key="index"
>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div> -->
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关政令关联分析</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="left">
<div
class="left-item"
:class="{ leftItemActive: box2LeftActiveIndex === index }"
v-for="(item, index) in decreeList"
:key="index"
>
<div class="time">{{ item.time }}</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
<div class="right">
<div class="info-box">
<div class="info-left">
<img :src="decreeList[box2LeftActiveIndex].img" alt="" />
</div>
<div class="info-right">
<div class="info-item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right1">
<div class="item-right-text">
{{ decreeList[box2LeftActiveIndex].totalTitle }}
</div>
<div class="item-right-icon">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].eTotalTitle }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signTime }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signPerson }}
</div>
</div>
</div>
</div>
<div class="list-box">
<div class="list-header">
<div class="icon">
<img src="./assets/icons/box2-list-header-icon.png" alt="" />
</div>
<div class="title">{{ "政令主要内容" }}</div>
</div>
<div class="list-main">
<div
class="list-item"
v-for="(val, idx) in decreeList[box2LeftActiveIndex].list"
:key="idx"
>
<div class="id">{{ idx + 1 }}</div>
<div class="title">{{ val.title }}</div>
<div class="open">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="info-box">
<div class="info-left">
<img :src="decreeList[box2LeftActiveIndex].img" alt="" />
</div>
<div class="info-right">
<div class="info-item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right1">
<div class="item-right-text">
{{ decreeList[box2LeftActiveIndex].totalTitle }}
</div>
<div class="item-right-icon">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].eTotalTitle }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signTime }}
</div>
</div>
<div class="info-item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right">
{{ decreeList[box2LeftActiveIndex].signPerson }}
</div>
</div>
</div>
</div>
<div class="list-box">
<div class="list-header">
<div class="icon">
<img src="./assets/icons/box2-list-header-icon.png" alt="" />
</div>
<div class="title">{{ "政令主要内容" }}</div>
</div>
<div class="list-main">
<div class="list-item" v-for="(val, idx) in decreeList[box2LeftActiveIndex].list" :key="idx">
<div class="id">{{ idx + 1 }}</div>
<div class="title">{{ val.title }}</div>
<div class="open">
<img src="./assets/icons/open-icon.png" alt="" />
</div>
</div>
</div>
</div>
<div class="list-footer">
<div class="footer-left">
{{ `共${decreeList[box2LeftActiveIndex].list.length}项动态` }}
</div>
<div class="footer-right">
<el-pagination
@current-change="handleCurrentChange"
:pageSize="pageSize"
:current-page="currentPage"
background
layout="prev, pager, next"
:total="decreeList[box2LeftActiveIndex].list.length"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import box2InfoImg from "./assets/icons/box2-info.png";
const pageSize = ref(10);
const currentPage = ref(1);
const box1BtnActive = ref(1);
const timeLineList = ref([
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。",
},
{
time: "2025年5月",
title: "特朗普宣布撤销拜登AI规则",
content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。",
},
{
time: "2025年7月23日",
title: "特朗普签署EO 14320",
content: "特朗普签署EO 14320，推动美国AI技术栈出口。",
},
{
time: "2025年7月31日",
title: "中国网信办约谈英伟达",
content:
"中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
},
{
time: "2025年8月",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。",
},
{
time: "2025年1月",
title: "《AI扩散暂行最终规则》发布",
content: "拜登政府发布《AI扩散暂行最终规则》，建立三级许可制度。"
},
{
time: "2025年5月",
title: "特朗普宣布撤销拜登AI规则",
content: "特朗普政府宣布撤销拜登AI规则，计划推出新规。"
},
{
time: "2025年7月23日",
title: "特朗普签署EO 14320",
content: "特朗普签署EO 14320，推动美国AI技术栈出口。"
},
{
time: "2025年7月31日",
title: "中国网信办约谈英伟达",
content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。"
},
{
time: "2025年8月",
title: "英伟达H20发放出口许可证",
content: "美国商务部为4月份被实质禁售的英伟达H20发放出口许可证。"
}
]);
const decreeList = ref([
{
time: "2023",
title: "拜登人工智能政令",
img: box2InfoImg,
totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
eTotalTitle:
"Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
signTime: "2025年7月23日",
signPerson: "乔·拜登（Joe Biden）",
list: [
{
title:
"要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准",
},
{
title:
"优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。",
},
{
title:
"为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。",
},
{
title:
"推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。",
},
{
title:
"制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。",
},
{
title:
"通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。",
},
{
title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。",
},
{
title:
"发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。",
},
],
},
{
time: "2023",
title: "拜登人工智能政令",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2025",
title: "特朗普撤销拜登AI规则",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2023",
title: "美国AI行动计划",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2024",
title: "对中国AI芯片限制",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: [],
},
{
time: "2023",
title: "拜登人工智能政令",
img: box2InfoImg,
totalTitle: "关于安全、可靠和可信地开发和使用人工智能的行政命令",
eTotalTitle: "Executive Order on the Safe, Secure, and Trustworthy Development and Use of Artificial Intelligence",
signTime: "2025年7月23日",
signPerson: "乔·拜登（Joe Biden）",
list: [
{
title: "要求强大AI系统开发者与政府分享安全测试结果（“红队测试”）；制定生物合成筛查标准防范风险；建立AI生成内容鉴别标准"
},
{
title: "优先支持隐私保护技术（PET）研发；评估各机构如何收集和使用商业信息；制定评估隐私保护技术有效性的指南。"
},
{
title: "为解决算法歧视提供明确指导；确保刑事司法系统中AI使用的公平性；协调调查和起诉AI相关的民权侵犯行为。"
},
{
title: "推动医疗保健领域负责任地使用AI；创造资源支持教育工作者部署AI教育工具。"
},
{
title: "制定减轻AI对工人潜在危害的原则和最佳实践；编写AI对劳动力市场潜在影响的报告。"
},
{
title: "通过“国家AI研究资源”（NAIRR）试点促进研究；为小型开发者和企业家提供技术援助和资源；简化相关领域高技能人才的签证流程。"
},
{
title: "扩大在AI领域的国际合作；与国际伙伴和标准组织加速制定AI标准。"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
},
{
title: "发布政府机构使用AI的指南；加快招聘AI专业人才并为相关领域员工提供培训。"
}
]
},
{
time: "2023",
title: "拜登人工智能政令",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: []
},
{
time: "2025",
title: "特朗普撤销拜登AI规则",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: []
},
{
time: "2023",
title: "美国AI行动计划",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: []
},
{
time: "2024",
title: "对中国AI芯片限制",
img: "",
totalTitle: "",
eTotalTitle: "",
signTime: "",
signPerson: "",
list: []
}
]);
const box2LeftActiveIndex = ref(0);
......@@ -258,405 +275,423 @@ const box2LeftActiveIndex = ref(0);
<style lang="scss" scoped>
.wrap {
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.box1 {
margin: 27px auto 16px;
width: 1600px;
height: 492px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 17px;
margin-left: 22px;
width: 1556px;
height: 330px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
.box1-line-box {
position: absolute;
left: 0;
top: 135px;
height: 8px;
width: 1556px;
background: url("./assets/icons/line-bg.png") repeat;
}
.box1-item {
width: 315px;
height: 142px;
position: relative;
box-sizing: border-box;
padding-left: 20px;
margin-left: 10px;
border-left: 1px solid #0a57a6;
.box1-item-header {
display: flex;
width: 315px;
.title {
// width: 262px;
height: 26px;
}
.icon {
margin-left: 10px;
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-item-content {
width: 288px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.point {
position: absolute;
left: -11px;
bottom: -11px;
}
.pointFooter {
position: absolute;
left: -11px;
top: -11px;
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
.timeFooter {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
top: -36px;
left: 0;
}
}
.box1ItemFooter {
margin-top: 138px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
}
.box1-footer {
margin-left: 22px;
margin-top: 10px;
width: 1556px;
height: 64px;
box-sizing: border-box;
padding: 6px 12px;
display: flex;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.box1-footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.box1-footer-center {
width: 1463px;
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 2px;
margin-left: 15px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-footer-right {
width: 24px;
height: 24px;
border-radius: 12px;
background: #e7f3ff;
margin-top: 14px;
margin-left: 13px;
img {
margin-left: 6px;
margin-top: 6px;
width: 12px;
height: 12px;
}
}
}
}
.box2 {
margin: 0 auto 10px;
width: 1600px;
height: 751px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
display: flex;
margin-top: 5px;
.left {
margin-left: 21px;
width: 300px;
.left-item {
width: 300px;
height: 64px;
border-radius: 4px;
display: flex;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
cursor: pointer;
&:hover {
background: rgba(246, 250, 255, 1);
}
.time {
width: 45px;
height: 24px;
line-height: 24px;
margin-left: 18px;
margin-top: 20px;
}
.title {
margin-left: 17px;
margin-top: 17px;
height: 30px;
// color: rgba(10, 87, 166, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
line-height: 30px;
}
}
.leftItemActive {
color: rgba(10, 87, 166, 1);
font-weight: 700;
background: rgba(246, 250, 255, 1);
&::after {
position: relative;
content: "";
width: 5px;
height: 48px;
background: rgba(10, 87, 166, 1);
right: -70px;
top: 8px;
}
}
}
.right {
margin-left: 36px;
.info-box {
margin-top: 25px;
margin-left: 28px;
width: 1180px;
height: 188px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
display: flex;
.info-left {
width: 97px;
height: 136px;
margin-top: 25px;
margin-left: 28px;
img {
width: 100%;
height: 100%;
}
}
.info-right {
margin-left: 35px;
margin-top: 22px;
.info-item {
display: flex;
height: 30px;
margin-bottom: 8px;
.item-left {
margin-top: 3px;
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
width: 899px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.item-right1 {
display: flex;
.item-right-text {
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.item-right-icon {
margin-left: 13px;
margin-top: 7px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.list-box {
margin-left: 36px;
.list-header {
display: flex;
height: 56px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
margin-top: 21px;
margin-left: 17px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 16px;
margin-left: 16px;
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
}
.list-main {
height: 400px;
overflow-x: hidden;
overflow-y: auto;
.list-item {
width: 1180px;
height: 54px;
box-sizing: border-box;
border-radius: 4px;
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.id {
width: 24px;
height: 24px;
margin-left: 15px;
margin-top: 15px;
border-radius: 12px;
background: #e7f3ff;
text-align: center;
line-height: 24px;
color: #0a57a6;
}
.title {
margin-left: 13px;
margin-top: 12px;
height: 30px;
width: 1100px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.open {
width: 16px;
height: 16px;
margin-top: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
}
}
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1 {
margin: 27px auto 16px;
width: 1600px;
height: 492px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-top: 17px;
margin-left: 22px;
width: 1556px;
height: 330px;
overflow-x: auto;
overflow-y: hidden;
display: flex;
position: relative;
.box1-line-box {
position: absolute;
left: 0;
top: 135px;
height: 8px;
width: 1556px;
background: url("./assets/icons/line-bg.png") repeat;
}
.box1-item {
width: 315px;
height: 142px;
position: relative;
box-sizing: border-box;
padding-left: 20px;
margin-left: 10px;
border-left: 1px solid #0a57a6;
.box1-item-header {
display: flex;
width: 315px;
.title {
// width: 262px;
height: 26px;
}
.icon {
margin-left: 10px;
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.box1-item-content {
width: 288px;
min-height: 48px;
max-height: 96px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.point {
position: absolute;
left: -11px;
bottom: -11px;
}
.pointFooter {
position: absolute;
left: -11px;
top: -11px;
}
.time {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
bottom: -36px;
left: 0;
}
.timeFooter {
height: 24px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
position: absolute;
top: -36px;
left: 0;
}
}
.box1ItemFooter {
margin-top: 138px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
}
.box1-footer {
margin-left: 22px;
margin-top: 10px;
width: 1556px;
height: 64px;
box-sizing: border-box;
padding: 6px 12px;
display: flex;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
display: flex;
.box1-footer-left {
width: 19px;
height: 20px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.box1-footer-center {
width: 1463px;
height: 48px;
display: flex;
flex-direction: row;
align-items: center;
margin-top: 2px;
margin-left: 15px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.box1-footer-right {
width: 24px;
height: 24px;
border-radius: 12px;
background: #e7f3ff;
margin-top: 14px;
margin-left: 13px;
img {
margin-left: 6px;
margin-top: 6px;
width: 12px;
height: 12px;
}
}
}
}
.box2 {
margin: 16px auto;
width: 1600px;
height: 898px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
display: flex;
margin-top: 5px;
.left {
margin-left: 21px;
width: 300px;
.left-item {
width: 300px;
height: 64px;
border-radius: 4px;
display: flex;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
cursor: pointer;
&:hover {
background: rgba(246, 250, 255, 1);
}
.time {
width: 45px;
height: 24px;
line-height: 24px;
margin-left: 18px;
margin-top: 20px;
}
.title {
margin-left: 17px;
margin-top: 17px;
height: 30px;
// color: rgba(10, 87, 166, 1);
// font-family: Microsoft YaHei;
// font-size: 16px;
// font-weight: 700;
line-height: 30px;
}
}
.leftItemActive {
color: rgba(10, 87, 166, 1);
font-weight: 700;
background: rgba(246, 250, 255, 1);
&::after {
position: relative;
content: "";
width: 5px;
height: 48px;
background: rgba(10, 87, 166, 1);
right: -70px;
top: 8px;
}
}
}
.right {
margin-left: 36px;
.info-box {
margin-left: 28px;
width: 1180px;
height: 188px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
background: rgba(246, 250, 255, 1);
display: flex;
.info-left {
width: 97px;
height: 136px;
margin-top: 25px;
margin-left: 28px;
img {
width: 100%;
height: 100%;
}
}
.info-right {
margin-left: 35px;
margin-top: 22px;
.info-item {
display: flex;
height: 30px;
margin-bottom: 8px;
.item-left {
margin-top: 3px;
width: 100px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.item-right {
width: 899px;
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.item-right1 {
display: flex;
.item-right-text {
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
.item-right-icon {
margin-left: 13px;
margin-top: 7px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
.list-box {
margin-left: 36px;
.list-header {
display: flex;
height: 56px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.icon {
margin-top: 21px;
margin-left: 17px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 16px;
margin-left: 16px;
height: 30px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
}
}
.list-main {
height: 540px;
overflow-x: hidden;
overflow-y: auto;
.list-item {
width: 1180px;
height: 54px;
box-sizing: border-box;
border-radius: 4px;
background: rgba(255, 255, 255, 1);
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.id {
width: 24px;
height: 24px;
margin-left: 15px;
margin-top: 15px;
border-radius: 12px;
background: #e7f3ff;
text-align: center;
line-height: 24px;
color: #0a57a6;
}
.title {
margin-left: 13px;
margin-top: 12px;
height: 30px;
width: 1100px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
.open {
width: 16px;
height: 16px;
margin-top: 20px;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.list-footer {
margin-left: 35px;
height: 32px;
margin-top: 10px;
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;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/background/index.vue
浏览文件 @ 75e4f208
<template>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">提出背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1"
>涉华背景</el-button
>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2"
>全部背景</el-button
>
<el-button type="info" plain v-else>全部背景</el-button>
</div>
</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div
class="box1-item"
v-for="(item, index) in backgroundList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ "共计10条指令" }}</div>
<div class="box1-footer-right">
<el-pagination
:page-size="5"
background
layout="prev, pager, next"
:total="10"
/>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div
class="box2-item"
v-for="(item, index) in relatedEvents"
:key="index"
>
<div class="item-left">
<img :src="item.image" alt="" />
</div>
<div class="item-center">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
<div class="item-right">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">法律依据</div>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">提出背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1">涉华背景</el-button>
<el-button type="info" plain v-else>涉华背景</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2">全部背景</el-button>
<el-button type="info" plain v-else>全部背景</el-button>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in backgroundList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box1-footer">
<div class="box1-footer-left">{{ "共计10条指令" }}</div>
<div class="box1-footer-right">
<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">相关事件</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-item" v-for="(item, index) in relatedEvents" :key="index">
<div class="item-left">
<img :src="item.image" alt="" />
</div>
<div class="item-center">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
</div>
<div class="item-right">{{ item.time }}</div>
</div>
</div>
<div class="box2-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">法律依据</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in laws" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="item-header">
<div class="name">{{ item.name }}</div>
<div class="info">{{ item.info }}</div>
</div>
<div class="item-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(item, index) in laws" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="item-header">
<div class="name">{{ item.name }}</div>
<div class="info">{{ item.info }}</div>
</div>
<div class="item-content">{{ item.content }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
......@@ -114,351 +112,349 @@ import Img5 from "./assets/images/box2-img5.png";
const box1BtnActive = ref(1);
const backgroundList = ref([
{
title:
"认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术",
},
{
title:
"要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用",
},
{
title: "要求加强与盟友的关系并确保我们持续的技术主导地位",
},
{
title:
"计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位",
},
{
title: "目的为减少国际社会对由中国开发的人工智能技术的依赖",
},
{
title: "认为人工智能（AI）是一项将决定未来几十年经济增长、国家安全和全球竞争力的基础性技术"
},
{
title: "要求美国不仅必须在开发通用和前沿AI能力方面领先，还必须确保美国的人工智能技术、标准和治理模式在全球范围内被采用"
},
{
title: "要求加强与盟友的关系并确保我们持续的技术主导地位"
},
{
title: "计划通过支持美国原产人工智能技术的全球部署，以维护和扩大美国在人工智能领域的领导地位"
},
{
title: "目的为减少国际社会对由中国开发的人工智能技术的依赖"
}
]);
const relatedEvents = ref([
{
image: Img1,
title: "中美AI模型性能差距迅速缩小",
content:
"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
time: "2025-08-30",
},
{
image: Img2,
title: "中国模型以更低成本实现高性能",
content:
"2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
time: "2025-05-16",
},
{
image: Img3,
title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
content:
"特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
time: "2025-07-23",
},
{
image: Img4,
title: "中国深入推进“人工智能+”行动",
content:
"中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
time: "2025-07-31",
},
{
image: Img5,
title: "美国对华AI芯片出口管制持续升级",
content:
"美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
time: "2025-05-20",
},
{
image: Img1,
title: "中美AI模型性能差距迅速缩小",
content:
"斯坦福大学《2025年人工智能指数报告》显示，中美顶尖AI模型在MMLU（大规模多任务语言理解）等主流基准测试中的性能...",
time: "2025-08-30"
},
{
image: Img2,
title: "中国模型以更低成本实现高性能",
content: "2025年1月，中国公司深度求索（DeepSeek）发布高性能AI推理模型R1，以其极低的训练成本和媲美顶级模型的推理能力受...",
time: "2025-05-16"
},
{
image: Img3,
title: "美国发布《赢得AI竞赛：美国AI行动计划》​",
content:
"特朗普政府发布该计划，核心包括加速创新​（解除监管）、建设AI基础设施​（加速数据中心审批、保障能源供应）和引领国际...",
time: "2025-07-23"
},
{
image: Img4,
title: "中国深入推进“人工智能+”行动",
content: "中国国务院常务会议审议通过《关于深入实施“人工智能+”行动的意见》，大力推进AI在各领域的规模化商业化应用和和深...",
time: "2025-07-31"
},
{
image: Img5,
title: "美国对华AI芯片出口管制持续升级",
content:
"美国商务部宣布撤销拜登时期的《AI扩散规则》，要求全球使用美国技术的芯片厂商停止向中国出口AI芯片，直接影响英伟达...",
time: "2025-05-20"
}
]);
const laws = ref([
{
name: "《美国法典》",
info: "第3编第301条",
content:
"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。",
},
{
name: "《出口管制改革法案》",
info: "",
content:
"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。",
},
{
name: "《国际紧急经济权力法》",
info: "",
content:
"授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。",
},
{
name: "《2019年通过外交捍卫美国商业法》",
info: "第708(c)(3)条",
content:
"授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。",
},
{
name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
info: "",
content:
"要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。",
},
{
name: "《美国法典》",
info: "第3编第301条",
content:
"允许总统通过行政命令（Executive Order）​​ 或其它书面形式授权行政部门或机构的负责人​（如国务卿、财政部长等）代行本属于总统的法定职能（由国会立法授予总统的职能）。"
},
{
name: "《出口管制改革法案》",
info: "",
content:
"该法案授权政府出于国家安全和外交政策目的对特定技术、商品和软件的出口进行管制。确保AI技术不流向“对手国家”是其题中应有之义。"
},
{
name: "《国际紧急经济权力法》",
info: "",
content:
"授予总统在应对“不寻常且极其严重的威胁”时，监管商业和金融交易的广泛权力，包括实施出口管制。这在以往的贸易和科技管制中常被引用。"
},
{
name: "《2019年通过外交捍卫美国商业法》",
info: "第708(c)(3)条",
content: "授权小企业管理局局长和OSTP主任任命其各自行政部门和机构的高级官员担任EDAG成员。"
},
{
name: "《关于安全、可靠和可信地开发和使用人工智能的行政命令》",
info: "",
content: "要求强大AI系统的开发者与政府共享安全测试结果，并为AI安全、隐私保护、公平权利及创新竞争等方面制定标准。"
}
]);
</script>
<style lang="scss" scoped>
.introduction-wrap {
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-left: 22px;
height: 280px;
.box1-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box1-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 310px;
width: 1090px;
.box2-item {
display: flex;
height: 60px;
margin-bottom: 2px;
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
}
.item-center {
width: 892px;
margin-left: 14px;
.title {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
margin-top: -5px;
}
.content {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.item-right {
margin-top: 19px;
margin-left: 30px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.box2-footer {
margin: 5px auto 0;
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 9px;
width: 520px;
height: 720px;
overflow-y: auto;
.box3-item {
margin-bottom: 24px;
position: relative;
.id {
width: 24px;
height: 24px;
position: absolute;
left: 28px;
top: 1px;
z-index: 99;
text-align: center;
line-height: 24px;
margin-top: 5px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.item-header {
width: 460px;
height: 35px;
display: flex;
justify-content: space-between;
margin-left: 60px;
.name {
max-width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
margin-top: 5px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.info {
text-align: right;
margin-left: 10px;
height: 24px;
margin-top: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.item-content {
margin-left: 66px;
border-top: 1px solid rgba(234, 236, 238, 1);
padding-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 84px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
margin-left: 22px;
height: 280px;
.box1-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box1-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box1-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-top: 3px;
margin-left: 31px;
height: 310px;
width: 1090px;
.box2-item {
display: flex;
height: 60px;
margin-bottom: 2px;
.item-left {
width: 64px;
height: 48px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
}
.item-center {
width: 892px;
margin-left: 14px;
.title {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 30px;
margin-top: -5px;
}
.content {
height: 30px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
.item-right {
margin-top: 19px;
margin-left: 30px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
}
}
}
.box2-footer {
margin: 5px auto 0;
width: 108px;
height: 32px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-main {
margin-top: 9px;
width: 520px;
height: 720px;
overflow-y: auto;
.box3-item {
margin-bottom: 24px;
position: relative;
.id {
width: 24px;
height: 24px;
position: absolute;
left: 28px;
top: 1px;
z-index: 99;
text-align: center;
line-height: 24px;
margin-top: 5px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.item-header {
width: 460px;
height: 35px;
display: flex;
justify-content: space-between;
margin-left: 60px;
.name {
max-width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 24px;
margin-top: 5px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
}
.info {
text-align: right;
margin-left: 10px;
height: 24px;
margin-top: 5px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
.item-content {
margin-left: 66px;
border-top: 1px solid rgba(234, 236, 238, 1);
padding-top: 3px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/decree/decreeLayout/overview/introduction/index.vue
浏览文件 @ 75e4f208
<template>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="introduction-wrap">
<div class="left">
<div class="box1">
<div class="box-header">
<div class="header-left"></div>
<div class="title">基本信息</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img src="./assets/images/box1-img.png" alt="" />
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text">
{{ "Promoting the Export of the American AI Technology Stack" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in areaList" :key="index">
{{ area }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ "2025年7月23日" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right text">
{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ "第14320号行政命令 (EO 14320)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ "签署后90天内建立机制并开始实施" }}
</div>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">主要指令</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box2-main">
<div
class="box2-item"
v-for="(item, index) in majorList"
:key="index"
>
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ "共计10条指令" }}</div>
<div class="box2-footer-right">
<el-pagination
:page-size="5"
background
layout="prev, pager, next"
:total="10"
/>
</div>
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">立法背景</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1"
>商务部</el-button
>
<el-button type="info" plain v-else>商务部</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2"
>经济外交行动组</el-button
>
<el-button type="info" plain v-else>经济外交行动组</el-button>
</div>
</div>
<div class="header-right">
<img src="../assets/icons/header-icon.png" alt="" />
</div>
</div>
<div class="box3-top">
<div class="box3-top-left">
<img src="./assets/images/box3-img.png" alt="" />
</div>
<div class="box3-top-right">
<div class="box3-top-right-header">
<div class="header-left">{{ "美国商务部" }}</div>
<div class="header-right">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
<div class="box3-top-right-main">
<div class="main-item">
<div class="item-left">{{ "英文名:" }}</div>
<div class="item-right">
{{ "United States Department of Commerce" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "成立时间:" }}</div>
<div class="item-right">{{ "1903年2月14日" }}</div>
</div>
<div class="main-item">
<div class="item-left">{{ "主要职责:" }}</div>
<div class="item-right">
{{ "国际贸易、进出口管制（R-TX-19）" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "总部地址:" }}</div>
<div class="item-right">
{{ "华盛顿宪法大道1401号胡佛大楼" }}
</div>
</div>
<div class="main-item">
<div class="item-left">{{ "部长:" }}</div>
<div class="item-right">{{ "霍华德·卢特尼克" }}</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="">
</div>
<div class="header-title">{{ '机构动态' }}</div>
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item
:timestamp="item.time"
placement="top"
v-for="(item, index) in eventList"
:key="index"
>
<div class="timeline-content">
{{ item.content }}
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="box3-bottom-footer">
<img src="./assets/images/more-icon.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img src="./assets/images/box1-img.png" alt="" />
</div>
<div class="box1-main-right">
<div class="item">
<div class="item-left">{{ "政令全称：" }}</div>
<div class="item-right">{{ "推动美国人工智能技术栈出口" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "英文全称：" }}</div>
<div class="item-right text">
{{ "Promoting the Export of the American AI Technology Stack" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "相关领域：" }}</div>
<div class="item-right tag-box">
<div class="tag" v-for="(area, index) in areaList" :key="index">
{{ area }}
</div>
</div>
</div>
<div class="item">
<div class="item-left">{{ "签署时间：" }}</div>
<div class="item-right text">{{ "2025年7月23日" }}</div>
</div>
<div class="item">
<div class="item-left">{{ "签署总统：" }}</div>
<div class="item-right text">
{{ "唐纳德·约翰·特朗普(Donald John Trump)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "政令编号：" }}</div>
<div class="item-right text">
{{ "第14320号行政命令 (EO 14320)" }}
</div>
</div>
<div class="item">
<div class="item-left">{{ "执行期限：" }}</div>
<div class="item-right text">
{{ "签署后90天内建立机制并开始实施" }}
</div>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="box-header">
<div class="header-left"></div>
<div class="title">主要指令</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box2-main">
<div class="box2-item" v-for="(item, index) in majorList" :key="index">
<div class="id">{{ index + 1 }}</div>
<div class="title">{{ item.title }}</div>
<div class="open">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box2-footer">
<div class="box2-footer-left">{{ "共计10条指令" }}</div>
<div class="box2-footer-right">
<el-pagination :page-size="5" background layout="prev, pager, next" :total="10" />
</div>
</div>
</div>
</div>
<div class="right">
<div class="box3">
<div class="box-header">
<div class="header-left"></div>
<div class="title">执行机构</div>
<div class="header-btn-box">
<div class="btn" @click="handleClickBox1Btn(1)">
<el-button type="primary" plain v-if="box1BtnActive === 1">商务部</el-button>
<el-button type="info" plain v-else>商务部</el-button>
</div>
<div class="btn" @click="handleClickBox1Btn(2)">
<el-button type="primary" plain v-if="box1BtnActive === 2">经济外交行动组</el-button>
<el-button type="info" plain v-else>经济外交行动组</el-button>
</div>
</div>
<div class="header-right">
<div class="icon">
<img src="../assets/icons/header-right-icon1.png" alt="" />
</div>
<div class="icon">
<img src="../assets/icons/header-right-icon2.png" alt="" />
</div>
</div>
</div>
<div class="box3-top">
<div class="box3-top-top">
<div class="left">
<img src="./assets/images/box3-img.png" alt="" />
</div>
<div class="right">
<div class="name">{{ "美国商务部" }}</div>
<div class="ename">{{ "United States Department of Commerce" }}</div>
</div>
<div class="more">
<div class="text">{{ "查看官网" }}</div>
<div class="icon">
<img src="./assets/images/open-icon.png" alt="" />
</div>
</div>
</div>
<div class="box3-top-bottom">
<div class="box3-top-right-main">
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "成立时间:" }}</div>
<div class="item-right">{{ "1903年2月14日" }}</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "主要职责:" }}</div>
<div class="item-right">
{{ "国际贸易、进出口管制（R-TX-19）" }}
</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "总部地址:" }}</div>
<div class="item-right">
{{ "华盛顿宪法大道1401号胡佛大楼" }}
</div>
</div>
<div class="main-item">
<div class="item-icon"></div>
<div class="item-left">{{ "部长:" }}</div>
<div class="item-right">{{ "霍华德·卢特尼克" }}</div>
</div>
</div>
</div>
</div>
<div class="box3-bottom">
<div class="box3-bottom-header">
<div class="header-icon">
<img src="./assets/images/box3-bottom-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "机构动态" }}</div>
</div>
<div class="box3-bottom-main">
<el-timeline style="max-width: 500px">
<el-timeline-item
:timestamp="item.time"
placement="top"
v-for="(item, index) in eventList"
:key="index"
>
<div class="timeline-content">
{{ item.content }}
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="box3-bottom-footer">
<img src="./assets/images/more-icon.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const box1BtnActive = ref(1);
const areaList = ref([
"人工智能",
"出口管制",
"半导体产业",
"关税",
"光伏产业",
]);
const areaList = ref(["人工智能", "出口管制", "半导体产业", "关税", "光伏产业"]);
const majorList = ref([
{
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。',
},
{
title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。',
},
{
title:
'指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。',
},
{
title:
"要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。",
},
{
title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。',
},
{
title: '要求商务部在90天内建立"全栈式"美国AI出口机制。'
},
{
title: '要求每个纳入出口计划的提案必须涵盖完整的"全栈AI技术包"。'
},
{
title: '指示联邦机构提供贷款、担保、股权投资和技术援助支持入选的"优先AI出口包"。'
},
{
title: "要求输出技术必须符合美国出口管制法规，并由多部门对最终用户进行合规与安全联合审查。"
},
{
title: '明确政策目标为"减少对对手国家开发的AI技术的国际依赖"。'
}
]);
// 人物动态
const eventList = ref([
{
time: '2025-07-31',
content: '美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。'
},
{
time: '2025-07-25',
content: '美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。'
},
{
time: '2025-07-21',
content: '美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口'
},
{
time: '2025-07-12',
content: '美商务部发起第三次反倾销和反补贴日落复审调查。'
}
{
time: "2025-07-31",
content:
"美商务部发布指南，警告全球企业使用华为昇腾芯片可能违反美国出口管制。意在限制中国AI产业发展，阻碍其获得先进算力。"
},
{
time: "2025-07-25",
content:
"美商务部持续对多种中国产品发起“双反”（反倾销、反补贴）调查并作出裁决，涉及产品从工业原料到日常用品，且裁定的税率普遍较高。"
},
{
time: "2025-07-21",
content:
"美商务部进一步收紧对华先进半导体出口管制，将更多中国实体列入“实体清单”。限制14纳米及以下先进芯片、DRAM等对华出口"
},
{
time: "2025-07-12",
content: "美商务部发起第三次反倾销和反补贴日落复审调查。"
}
]);
</script>
<style lang="scss" scoped>
.introduction-wrap {
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 600;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 52px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
display: flex;
.box1-main-left {
width: 235px;
height: 332px;
margin-left: 42px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
margin-left: 40px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
.item {
height: 30px;
display: flex;
margin-bottom: 17px;
.item-left {
width: 100px;
}
.tag-box {
display: flex;
.tag {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
// line-height: 20px;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
padding: 1px 8px;
margin-right: 8px;
}
}
.text {
font-weight: normal !important;
}
}
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-left: 22px;
height: 280px;
.box2-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
&:nth-child(2n-1) {
background: rgba(247, 248, 249, 1);
}
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box2-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box2-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-top {
display: flex;
margin-top: 10px;
height: 261px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.box3-top-left {
width: 120px;
height: 120px;
margin-left: 27px;
img {
width: 100%;
height: 100%;
}
}
.box3-top-right {
margin-left: 30px;
.box3-top-right-header {
display: flex;
height: 26px;
.header-left {
width: 325px;
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.header-right {
margin-left: 9px;
margin-top: 5px;
width: 16px;
height: 16px;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
}
}
.box3-top-right-main {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 4px;
.main-item {
display: flex;
margin-top: 12px;
.item-left{
height: 24px;
width: 80px;
}
.item-right{
width: 291px;
}
}
}
}
}
.box3-bottom {
.box3-bottom-header {
height: 59px;
display: flex;
.header-icon{
margin-left: 22px;
margin-top: 27px;
width: 16px;
height: 16px;
img{
width: 100%;
height: 100%;
}
}
.header-title{
margin-left: 12px;
margin-top: 23px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.box3-bottom-main{
height: 410px;
}
.box3-bottom-footer{
width: 108px;
height: 32px;
margin: 5px auto;
cursor: pointer;
img{
width: 100%;
height: 100%;
}
}
}
}
}
display: flex;
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
height: 16px;
border-radius: 0 4px 4px 0;
background: rgba(10, 87, 166, 1);
}
.title {
margin-left: 22px;
margin-top: 20px;
height: 16px;
line-height: 16px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 16px;
}
.header-btn-box {
position: absolute;
top: 14px;
right: 84px;
display: flex;
.btn {
margin-left: 8px;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
}
}
.left {
width: 1150px;
.box1 {
margin-top: 16px;
width: 1150px;
height: 414px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box1-main {
display: flex;
.box1-main-left {
width: 235px;
height: 332px;
margin-left: 42px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
margin-left: 40px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
.item {
height: 30px;
display: flex;
margin-bottom: 17px;
.item-left {
width: 100px;
}
.tag-box {
display: flex;
.tag {
color: rgba(22, 119, 255, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
border-radius: 4px;
background: rgba(230, 244, 255, 1);
padding: 0px 8px;
margin-right: 8px;
}
}
.text {
font-weight: normal !important;
}
}
}
}
}
.box2 {
margin-top: 16px;
width: 1150px;
height: 415px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box2-main {
margin-left: 22px;
height: 280px;
.box2-item {
width: 1101px;
height: 48px;
margin-bottom: 8px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 2px;
background: rgba(255, 255, 255, 1);
display: flex;
&:nth-child(2n-1) {
background: rgba(247, 248, 249, 1);
}
.id {
margin-top: 12px;
margin-left: 15px;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 12px;
background: #e7f3ff;
color: #0a57a6;
}
.title {
width: 1000px;
line-height: 48px;
margin-left: 13px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
}
.open {
width: 16px;
height: 16px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
}
}
.box2-footer {
margin: 20px 22px;
display: flex;
justify-content: space-between;
.box2-footer-left {
height: 20px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
}
}
.right {
margin-left: 16px;
.box3 {
margin-top: 16px;
width: 576px;
height: 845px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.box3-top {
margin-top: 10px;
height: 261px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
.box3-top-top {
width: 473px;
height: 88px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
background: rgba(247, 248, 249, 1);
display: flex;
align-items: center;
margin: 0 auto;
position: relative;
.more {
position: absolute;
right: 17px;
top: 17px;
display: flex;
gap: 3px;
.text {
height: 16px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 16px;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
}
.left {
width: 64px;
height: 64px;
margin-left: 17px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 22px;
.name {
height: 26px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
.ename {
margin-top: 6px;
height: 24px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.box3-top-bottom {
margin-left: 50px;
.box3-top-right-main {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 4px;
.main-item {
display: flex;
margin-top: 12px;
height: 26px;
line-height: 26px;
.item-icon {
width: 4px;
height: 4px;
border-radius: 2px;
background: #3b414b;
margin-top: 11px;
margin-right: 19px;
}
.item-left {
height: 24px;
width: 80px;
}
.item-right {
width: 291px;
}
}
}
}
}
.box3-bottom {
.box3-bottom-header {
height: 59px;
display: flex;
.header-icon {
margin-left: 22px;
margin-top: 27px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-left: 12px;
margin-top: 23px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.box3-bottom-main {
height: 410px;
}
.box3-bottom-footer {
width: 108px;
height: 32px;
margin: 5px auto;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
}
</style>
\ No newline at end of file
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 75e4f208
......@@ -771,11 +771,11 @@ onMounted(async () => {
.search {
position: absolute;
right: 1px;
top: 1px;
top: 2px;
width: 120px;
height: 44px;
border-radius: 4px;
background: rgba(22, 119, 255, 1);
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
......
vite.config.js
浏览文件 @ 75e4f208
......@@ -43,6 +43,11 @@ export default defineConfig({
target: 'http://192.168.26.70:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/sse/, '')
},
'/aichat': {
target: 'http://192.168.184.24:7861/',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/aichat/, '')
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论