Skip to content

R
risk-monitor
提交 1179583c authored 作者: 付康's avatar 付康
浏览文件
操作

合并分支 'yp-dev' 到 'master'

Yp dev 查看合并请求 !8
上级 44e6af90 ed1ebab4
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 1612 行增加 和 0 行删除
src/router/index.js
浏览文件 @ 1179583c
差异被折叠。
src/views/exportControl/components/dialog.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="message-bubble">
<div class="avatar-container">
<img :src="avatar" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ time }} · {{ source }}</span>
</div>
<div class="bubble-content">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 600px;
margin: 20px 0;
}
.avatar-container {
flex-shrink: 0;
margin-right: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 16px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.name {
font-weight: bold;
font-size: 14px;
color: #333;
}
.meta {
font-size: 12px;
color: #999;
}
.bubble-content {
font-size: 14px;
line-height: 1.5;
color: #333;
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/views/exportControl/components/info.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="info-card">
<div class="color-bar" :style="{ backgroundColor: color }"></div>
<div class="card-content">
<div class="title-section">
<div class="main-title">{{ title }}</div>
<div class="sub-title">{{ subtitle }}</div>
</div>
<div class="description">{{ description }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">{{ quantity }}个</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "标题"
},
subtitle: {
type: String,
default: "Subtitle"
},
description: {
type: String,
default: "描述信息"
},
quantity: {
type: [Number, String],
default: 0
},
color: {
type: String,
default: "#409EFF"
}
});
</script>
<style scoped>
.info-card {
max-width: 388px;
min-width: 300px;
height: 150px;
border-radius: 12px;
background-color: white;
display: flex;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.color-bar {
width: 6px;
height: 120px;
flex-shrink: 0;
margin-top: 15px;
}
.card-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
}
.title-section {
margin-bottom: 12px;
}
.main-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.sub-title {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #6b7280;
margin-top: 2px;
}
.description {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 1.4;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.quantity {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
font-weight: 700;
}
</style>
src/views/exportControl/components/link.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
<span class="card-text">{{ text }}</span>
<!-- <span class="arrow-icon">→</span> -->
<el-icon><ArrowRight /></el-icon>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
text: {
type: String,
default: "点击跳转"
},
link: {
type: String,
default: ""
},
target: {
type: String,
default: "_self"
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
const handleClick = () => {
if (props.disabled) return;
emit("click");
if (props.link) {
if (props.link.startsWith("http") || props.link.startsWith("//")) {
// 外部链接
window.open(props.link, props.target);
} else {
router.push(props.link);
console.log(`跳转到: ${props.link}`);
}
}
};
</script>
<style scoped>
.clickable-card {
width: 160px;
height: 48px;
border-radius: 32px;
border: 1px solid rgba(174, 214, 255, 1);
background-color: rgba(231, 243, 255, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
/* padding: 0 16px; */
cursor: pointer;
transition: all 0.3s ease;
color: rgba(5, 95, 194, 1);
font-size: 20px;
font-weight: 500;
box-sizing: border-box;
}
.clickable-card:hover {
background-color: rgba(231, 243, 255, 0.5);
box-shadow: 0 2px 8px rgba(5, 95, 194, 0.1);
transform: translateY(-2px);
}
.clickable-card:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(5, 95, 194, 0.1);
}
.clickable-card.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.clickable-card.disabled:hover {
background-color: white;
box-shadow: none;
transform: none;
}
.arrow-icon {
font-weight: bold;
font-size: 16px;
}
</style>
src/views/exportControl/components/news.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="news-list">
<div v-for="(item, index) in listData" :key="index" class="news-item" @click="handleItemClick(item)">
<div class="news-image">
<img :src="item.image" :alt="item.title" />
</div>
<div class="news-content">
<div class="news-header">
<div class="news-title">{{ item.title }}</div>
<div class="news-meta">
<span class="news-time">{{ item.time }}</span> ·
<span class="news-source">{{ item.source }}</span>
</div>
</div>
<div class="news-description">{{ item.description }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
listData: {
type: Array,
default: () => [
{
image: "https://via.placeholder.com/72x48/4A90E2/FFFFFF?text=News",
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析指出..."
}
]
}
});
const emit = defineEmits(["item-click"]);
const handleItemClick = item => {
emit("item-click", item);
};
</script>
<style scoped>
.news-list {
width: 100%;
max-width: 800px;
}
.news-item {
display: flex;
padding: 10px 0;
align-items: center;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}
.news-item:hover {
background-color: #f9f9f9;
}
.news-item:last-child {
border-bottom: none;
}
.news-image {
width: 72px;
height: 48px;
flex-shrink: 0;
margin-right: 16px;
border-radius: 4px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
}
.news-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.news-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
line-height: 24px;
flex: 1;
margin-right: 12px;
}
.news-meta {
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
flex-shrink: 0;
font-size: 14px;
color: #999;
}
.news-time {
/* margin-bottom: 2px; */
}
.news-source {
/* color: #666; */
}
.news-description {
font-size: 16px;
color: rgba(59, 65, 75, 1);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
src/views/exportControl/components/title.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="custom-title">
<div class="color-block block1"></div>
<div class="color-block block2"></div>
<div class="title-text">{{ title }}</div>
<div class="color-line"></div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "最新动态"
}
});
</script>
<style scoped>
.custom-title {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 20px;
padding: 10px 15px;
}
.color-block {
background-color: rgba(174, 214, 255, 1);
height: 30px;
flex-shrink: 0;
}
.block1 {
width: 24px;
}
.block2 {
width: 8px;
margin-left: 10px;
}
.title-text {
font-size: 20px;
font-weight: bold;
margin-left: 20px;
white-space: nowrap;
}
.color-line {
background-color: rgba(174, 214, 255, 1);
height: 2px;
flex-grow: 1;
margin-left: 20px;
}
</style>
src/views/exportControl/index.vue
浏览文件 @ 1179583c
...@@ -29,8 +29,90 @@ ...@@ -29,8 +29,90 @@
<div class="item-footer">关键和新型技术清单</div> <div class="item-footer">关键和新型技术清单</div>
</div> </div>
</div> </div>
<div class="home-main-header-footer-link">
<ClickableCard text="最新动态" link="/billHome" target="_blank" />
<ClickableCard text="资讯要闻" link="/billHome" target="_blank" />
<ClickableCard text="数据总览" link="/billHome" target="_blank" />
<ClickableCard text="资源库" link="/billHome" target="_blank" />
</div>
<div class="home-main-header-footer-info">
<InfoCard
v-for="item in infoList"
:key="item.title"
:title="item.title"
:subtitle="item.subTitle"
:description="item.des"
:quantity="item.num"
:color="item.color"
/>
</div>
</div> </div>
<el-row :gutter="20"> <el-row :gutter="20">
<CustomTitle title="资讯要闻" />
<el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleClick">
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="news-list">
<NewsList :list-data="customNewsData" />
</div>
</template>
</custom-container>
</el-col>
<el-col :span="12">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
<template #header-right>
<el-button type="primary" link>
{{ "更多 +" }}
</el-button>
</template>
<template #default>
<div class="dialog-list">
<!-- <MessageBubble
:avatar="customMessage.avatar"
:name="customMessage.name"
:time="customMessage.time"
:source="customMessage.source"
:content="customMessage.content"
/> -->
<MessageBubble
:avatar="trumpAvatar"
name="唐纳德·特朗普"
time="16:02"
source="发布于真实社交"
content="埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="如果这个疯狂的支出法案获得通过，‘美国党’将在第二天成立。"
/>
<MessageBubble
:avatar="elongAvatar"
name="埃隆·马斯克"
time="16:02"
source="发布于真实社交"
content="提出特朗普政府的AI政策强调技术开放与快速应用，但可能以牺牲安全防范为代价，开启了“潘多拉魔盒”。"
/>
</div>
</template>
</custom-container>
</el-col>
</el-row>
<el-row :gutter="20">
<CustomTitle title="最新动态" />
<el-col :span="16"> <el-col :span="16">
<custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px"> <custom-container titleType="primary" title="最新出口管制政策" :titleIcon="houseIcon" height="450px">
<template #header-right> <template #header-right>
...@@ -156,6 +238,7 @@ ...@@ -156,6 +238,7 @@
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<CustomTitle title="数据总览" />
<el-col :span="24"> <el-col :span="24">
<custom-container title="发布频度" :titleIcon="box3Icon" height="450px"> <custom-container title="发布频度" :titleIcon="box3Icon" height="450px">
<template #default> <template #default>
...@@ -292,6 +375,7 @@ ...@@ -292,6 +375,7 @@
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20">
<CustomTitle title="最新动态" />
<el-col :span="8"> <el-col :span="8">
<custom-container title="历次制裁过程" :titleIcon="listIcon" height="845px"> <custom-container title="历次制裁过程" :titleIcon="listIcon" height="845px">
<template #default> <template #default>
...@@ -517,6 +601,16 @@ import { useRouter } from "vue-router"; ...@@ -517,6 +601,16 @@ import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
import CustomContainer from "@/components/Container/index.vue"; import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "./components/news.vue";
import MessageBubble from "./components/dialog.vue";
import trumpAvatar from "@/assets/images/icon-trump.png";
import elongAvatar from "@/assets/images/icon-elong.png";
import newsIcon from "@/assets/images/icon-news.png";
import dialogIcon from "@/assets/images/icon-duihua.png";
import houseIcon from "@/assets/images/icon-house.png"; import houseIcon from "@/assets/images/icon-house.png";
import dangerIcon from "./assets/images/box2-header-icon.png"; import dangerIcon from "./assets/images/box2-header-icon.png";
import box1Image from "./assets/images/box1-image.png"; import box1Image from "./assets/images/box1-image.png";
...@@ -527,6 +621,8 @@ import listIcon from "./assets/images/icon-list.png"; ...@@ -527,6 +621,8 @@ import listIcon from "./assets/images/icon-list.png";
import dotIcon from "./assets/images/info2-icon.png"; import dotIcon from "./assets/images/info2-icon.png";
import entityIcon from "./assets/images/icon-entity.png"; import entityIcon from "./assets/images/icon-entity.png";
import newsImg from "@/assets/images/news-img.png";
import { getHotBills, getBillsByType, getHylyList } from "@/api/home"; import { getHotBills, getBillsByType, getHylyList } from "@/api/home";
import headerIcon1 from "./assets/icons/header-icon1.png"; import headerIcon1 from "./assets/icons/header-icon1.png";
...@@ -570,6 +666,37 @@ const curBillListIndex = ref(0); ...@@ -570,6 +666,37 @@ const curBillListIndex = ref(0);
const searchKey = ref(""); const searchKey = ref("");
const infoList = ref([
{
title: "实体清单",
subTitle: "Entity List",
des: "美国商务部工业与安全局依据《出口管理条例》建立的出口管制机制",
num: 956,
color: "rgba(206, 79, 81, 1)"
},
{
title: "商业管制清单 ",
subTitle: "CCL",
des: "美国《出口管制条例》中列明受管制军民两用物项的清单",
num: 253,
color: "rgba(114, 46, 209, 1)"
},
{
title: "关键与新兴技术清单",
subTitle: "CETs",
des: "美国为维护其技术领导地位与国家安全而制定的18项优先发展技术清单",
num: 52,
color: "rgba(250, 140, 22, 1)"
},
{
title: "军事最终用户清单 ",
subTitle: "MEU",
des: "美国商务部制定的限制特定外国实体获取可能用于军事用途的美国技术的清单",
num: 0,
color: "rgba(132, 136, 142, 1)"
}
]);
const entityList = ref([ const entityList = ref([
{ {
name: "北京复旦微电子技术有限公司", name: "北京复旦微电子技术有限公司",
...@@ -605,6 +732,44 @@ const entityList = ref([ ...@@ -605,6 +732,44 @@ const entityList = ref([
} }
]); ]);
const customNewsData = ref([
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
},
{
image: newsImg,
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析..."
}
]);
const handleSwithCurBill = name => { const handleSwithCurBill = name => {
if (name === "left") { if (name === "left") {
if (curBillListIndex.value === 0) { if (curBillListIndex.value === 0) {
...@@ -1880,6 +2045,12 @@ onMounted(async () => { ...@@ -1880,6 +2045,12 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-footer-link,
.home-main-header-footer-info {
display: flex;
gap: 30px;
padding: 30px 0;
}
} }
.home-main-center { .home-main-center {
margin-top: 34px; margin-top: 34px;
......
src/views/finance/analysis/content/survey.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/analysis/header.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="sanction-container">
<!-- 页面标题区域 -->
<div class="page-header">
<!-- <h1 class="main-title">制裁分析</h1> -->
<div class="bill-info">
<div class="bill-details">
<div class="main-title">制裁分析</div>
<div class="bill-name-en">第119届美国国会众议院第1号法案One Big Beautiful Bill Act</div>
</div>
<div class="date-author">
<div class="date">2025年7月</div>
<div class="author">乔迪·阿灵顿（Jodey Arrington）</div>
</div>
</div>
</div>
<!-- 导航标签区域 -->
<!-- <div class="nav-section">
<div class="tabs">
<div class="tab-item active">制裁概况</div>
<div class="tab-item">深度挖掘</div>
<div class="tab-item">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div> -->
<!-- 内容区域 -->
<!-- <div class="content-section">
<div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div>
</div> -->
</div>
</template>
<script setup></script>
<style scoped>
.sanction-container {
width: 100%;
/* max-width: 1200px; */
background-color: #fff;
/* border-radius: 8px; */
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
box-sizing: border-box;
padding-left: 5%;
padding-right: 5%;
}
.page-header {
padding: 24px;
padding-top: 0;
/* border-bottom: 1px solid #ebeef5; */
}
.main-title {
font-size: 20px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
/* color: var(--base-color); */
margin-bottom: 8px;
}
.bill-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
}
.bill-details {
flex: 1;
}
.bill-name {
font-size: 16px;
color: #606266;
margin-bottom: 4px;
}
.bill-name-en {
font-size: 14px;
color: #909399;
font-style: italic;
}
.date-author {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.date {
font-size: 14px;
color: #606266;
margin-bottom: 4px;
}
.author {
font-size: 14px;
color: #606266;
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 24px;
background-color: #f8fafc;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
padding: 12px 24px;
font-size: 14px;
color: #606266;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
}
.tab-item.active {
color: #409eff;
border-bottom-color: #409eff;
background-color: rgba(64, 158, 255, 0.1);
}
.tab-item:hover {
color: #409eff;
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
</style>
src/views/finance/analysis/index.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="page-container">
<Header />
<!-- 导航标签区域 -->
<div class="nav-section">
<div class="tabs">
<div :class="['tab-item', { active: activeTab === '制裁概况' }]" @click="setActiveTab('制裁概况')">制裁概况</div>
<div :class="['tab-item', { active: activeTab === '深度挖掘' }]" @click="setActiveTab('深度挖掘')">深度挖掘</div>
<div :class="['tab-item', { active: activeTab === '影响分析' }]" @click="setActiveTab('影响分析')">影响分析</div>
</div>
<div class="action-buttons">
<el-button>法案原文</el-button>
<el-button type="primary">分析报告</el-button>
</div>
</div>
<!-- 内容区域 -->
<div class="content-section">
<!-- <div class="content-placeholder">
<el-icon><document /></el-icon>
<p>这里是制裁概况的内容区域</p>
<p>请选择上方标签查看不同分析内容</p>
</div> -->
<Survey v-if="activeTab === '制裁概况'" />
<DepthMine v-if="activeTab === '深度挖掘'" />
<ImpactAnalysis v-if="activeTab === '影响分析'" />
</div>
<div class="left-absolute">
<el-image :src="Left1" alt="" />
<el-image :src="Left2" alt="" />
<el-image :src="Left3" alt="" />
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Header from "./header.vue";
import Survey from "./content/survey.vue";
import DepthMine from "./content/depthMine.vue";
import ImpactAnalysis from "./content/impactAnalysis.vue";
import Left1 from "@/assets/images/left-1.png";
import Left2 from "@/assets/images/left-2.png";
import Left3 from "@/assets/images/left-3.png";
const activeTab = ref("制裁概况");
const setActiveTab = tabName => {
activeTab.value = tabName;
};
</script>
<style scoped lang="scss">
.page-container {
position: relative;
margin: 0px auto;
background-color: rgba(247, 248, 249, 1);
}
.nav-section {
display: flex;
justify-content: space-between;
align-items: center;
/* padding: 16px 24px; */
padding-left: 6%;
padding-right: 6%;
background-color: #fff;
border-bottom: 1px solid #ebeef5;
}
.tabs {
display: flex;
gap: 0;
}
.tab-item {
width: 120px;
height: 40px;
text-align: center;
line-height: 30px;
// padding: 12px 24px;
font-size: 18px;
color: #606266;
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.3s;
box-sizing: border-box;
}
// .tab-item.active {
// color: #409eff;
// border-bottom-color: #409eff;
// background-color: rgba(64, 158, 255, 0.1);
// }
.tab-item.active {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 30px;
border-bottom: 3px solid var(--color-main-active);
}
.tab-item:hover {
color: var(--color-main-active);
}
.action-buttons {
display: flex;
gap: 12px;
}
.content-section {
padding: 24px;
min-height: 400px;
}
.content-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 300px;
color: #909399;
}
.content-placeholder .el-icon {
font-size: 48px;
margin-bottom: 16px;
color: #dcdfe6;
}
.content-placeholder p {
font-size: 16px;
margin-top: 8px;
}
@media (max-width: 768px) {
.bill-info {
flex-direction: column;
align-items: flex-start;
}
.date-author {
align-items: flex-start;
margin-top: 12px;
}
.nav-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.tabs {
width: 100%;
overflow-x: auto;
}
}
.left-absolute {
position: fixed;
left: 0;
top: 60%;
// width: 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
background-color: #fff;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 16px 12px;
box-shadow: 0 0 15px 0 rgba(60, 87, 126, 0.2);
div {
width: 17px;
height: 18px;
}
}
</style>
src/views/finance/assets/images/background.png 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/components/dialog.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="message-bubble">
<div class="avatar-container">
<img :src="avatar" :alt="name" class="avatar" />
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ name }}</span>
<span class="meta">{{ time }} · {{ source }}</span>
</div>
<div class="bubble-content">
{{ content }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
</template>
<script setup>
defineProps({
avatar: {
type: String,
default: "https://via.placeholder.com/40x40/4A90E2/FFFFFF?text=T"
},
name: {
type: String,
default: "唐纳德·特朗普"
},
time: {
type: String,
default: "15:23"
},
source: {
type: String,
default: "发布于真实社交"
},
content: {
type: String,
default:
"埃隆·马斯克在强力支持我竞选总统之前，早就知道我强烈反对‘电动汽车强制令’。这太荒谬了，这一直是我竞选活动的主要部分。电动汽车没问题，但不应该强迫每个人都拥有一辆。埃隆获得的补贴可能远远超过历史上任何一个人。如果没有补贴，埃隆可能不得不关门大吉，回到南非老家。"
}
});
</script>
<style scoped>
.message-bubble {
display: flex;
max-width: 600px;
margin: 20px 0;
}
.avatar-container {
flex-shrink: 0;
margin-right: 12px;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.bubble-container {
flex: 1;
position: relative;
}
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 16px;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.name {
font-weight: bold;
font-size: 14px;
color: #333;
}
.meta {
font-size: 12px;
color: #999;
}
.bubble-content {
font-size: 14px;
line-height: 1.5;
color: #333;
}
.triangle {
position: absolute;
left: -8px;
top: 15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/views/finance/components/info.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="info-card">
<div class="color-bar" :style="{ backgroundColor: color }"></div>
<div class="card-content">
<div class="title-section">
<div class="main-title">{{ title }}</div>
<div class="sub-title">{{ subtitle }}</div>
</div>
<div class="description">{{ description }}</div>
<div v-if="quantity > 0" class="quantity" :style="{ color: color }">{{ quantity }}个</div>
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "标题"
},
subtitle: {
type: String,
default: "Subtitle"
},
description: {
type: String,
default: "描述信息"
},
quantity: {
type: [Number, String],
default: 0
},
color: {
type: String,
default: "#409EFF"
}
});
</script>
<style scoped>
.info-card {
max-width: 388px;
min-width: 300px;
height: 150px;
border-radius: 12px;
background-color: white;
display: flex;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.info-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.color-bar {
width: 6px;
height: 120px;
flex-shrink: 0;
margin-top: 15px;
}
.card-content {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
position: relative;
}
.title-section {
margin-bottom: 12px;
}
.main-title {
font-size: 24px;
font-weight: 700;
color: #1f2937;
line-height: 1.2;
}
.sub-title {
font-size: 16px;
font-weight: 700;
line-height: 1.2;
color: #6b7280;
margin-top: 2px;
}
.description {
font-size: 16px;
font-weight: 400;
color: rgba(95, 101, 108, 1);
line-height: 1.4;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.quantity {
position: absolute;
top: 20px;
right: 20px;
font-size: 32px;
font-weight: 700;
}
</style>
src/views/finance/components/link.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
<span class="card-text">{{ text }}</span>
<!-- <span class="arrow-icon">→</span> -->
<el-icon><ArrowRight /></el-icon>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
text: {
type: String,
default: "点击跳转"
},
link: {
type: String,
default: ""
},
target: {
type: String,
default: "_self"
},
disabled: {
type: Boolean,
default: false
}
});
const emit = defineEmits(["click"]);
const handleClick = () => {
if (props.disabled) return;
emit("click");
if (props.link) {
if (props.link.startsWith("http") || props.link.startsWith("//")) {
// 外部链接
window.open(props.link, props.target);
} else {
router.push(props.link);
console.log(`跳转到: ${props.link}`);
}
}
};
</script>
<style scoped>
.clickable-card {
width: 160px;
height: 48px;
border-radius: 32px;
border: 1px solid rgba(174, 214, 255, 1);
background-color: rgba(231, 243, 255, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
/* padding: 0 16px; */
cursor: pointer;
transition: all 0.3s ease;
color: rgba(5, 95, 194, 1);
font-size: 20px;
font-weight: 500;
box-sizing: border-box;
}
.clickable-card:hover {
background-color: rgba(231, 243, 255, 0.5);
box-shadow: 0 2px 8px rgba(5, 95, 194, 0.1);
transform: translateY(-2px);
}
.clickable-card:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(5, 95, 194, 0.1);
}
.clickable-card.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.clickable-card.disabled:hover {
background-color: white;
box-shadow: none;
transform: none;
}
.arrow-icon {
font-weight: bold;
font-size: 16px;
}
</style>
src/views/finance/components/news.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="news-list">
<div v-for="(item, index) in listData" :key="index" class="news-item" @click="handleItemClick(item)">
<div class="news-image">
<img :src="item.image" :alt="item.title" />
</div>
<div class="news-content">
<div class="news-header">
<div class="news-title">{{ item.title }}</div>
<div class="news-meta">
<span class="news-time">{{ item.time }}</span> ·
<span class="news-source">{{ item.source }}</span>
</div>
</div>
<div class="news-description">{{ item.description }}</div>
</div>
</div>
</div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue";
const props = defineProps({
listData: {
type: Array,
default: () => [
{
image: "https://via.placeholder.com/72x48/4A90E2/FFFFFF?text=News",
title: "美国智库激辩人工智能监管路径",
time: "11-4",
source: "华盛顿邮报",
description: "各方就AI监管模式展开讨论。有观点认为碎片化州级监管比全面联邦法规更灵活，也有分析指出..."
}
]
}
});
const emit = defineEmits(["item-click"]);
const handleItemClick = item => {
emit("item-click", item);
};
</script>
<style scoped>
.news-list {
width: 100%;
max-width: 800px;
}
.news-item {
display: flex;
padding: 10px 0;
align-items: center;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.3s;
}
.news-item:hover {
background-color: #f9f9f9;
}
.news-item:last-child {
border-bottom: none;
}
.news-image {
width: 72px;
height: 48px;
flex-shrink: 0;
margin-right: 16px;
border-radius: 4px;
overflow: hidden;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-content {
flex: 1;
display: flex;
flex-direction: column;
}
.news-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.news-title {
font-size: 16px;
font-weight: 700;
color: rgba(59, 65, 75, 1);
line-height: 24px;
flex: 1;
margin-right: 12px;
}
.news-meta {
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
flex-shrink: 0;
font-size: 14px;
color: #999;
}
.news-time {
/* margin-bottom: 2px; */
}
.news-source {
/* color: #666; */
}
.news-description {
font-size: 16px;
color: rgba(59, 65, 75, 1);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
src/views/finance/components/title.vue 0 → 100644
浏览文件 @ 1179583c
<template>
<div class="custom-title">
<div class="color-block block1"></div>
<div class="color-block block2"></div>
<div class="title-text">{{ title }}</div>
<div class="color-line"></div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "最新动态"
}
});
</script>
<style scoped>
.custom-title {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 20px;
padding: 10px 15px;
}
.color-block {
background-color: rgba(174, 214, 255, 1);
height: 30px;
flex-shrink: 0;
}
.block1 {
width: 24px;
}
.block2 {
width: 8px;
margin-left: 10px;
}
.title-text {
font-size: 20px;
font-weight: bold;
margin-left: 20px;
white-space: nowrap;
}
.color-line {
background-color: rgba(174, 214, 255, 1);
height: 2px;
flex-grow: 1;
margin-left: 20px;
}
</style>
src/views/finance/index.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/infoPlatform/index.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/researchFunding/index.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/researchFunding/mock.js 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/ruleDetail/header.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/ruleDetail/index.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/ruleLimit/index.vue 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
src/views/finance/utils/multiLineChart.js 0 → 100644
浏览文件 @ 1179583c
差异被折叠。
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论