Skip to content

R
risk-monitor
提交 598a80d1 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

Merge branch 'master' of http://8.140.26.4:10003/caijian/risk-monitor into dev_hhq

上级 836577e5 91e261a9
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 677 行增加 和 282 行删除
src/App.vue
浏览文件 @ 598a80d1
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="brand-icon"> <div class="brand-icon">
<img src="@/assets/icons/header-logo.png" alt="" /> <img src="@/assets/icons/header-logo.png" alt="" />
</div> </div>
<div class="brand-text"> <div class="brand-text" @click="handleToHome">
<div class="text-ch">某方向风险监测预警系统</div> <div class="text-ch">某方向风险监测预警系统</div>
<div class="text-en"> <div class="text-en">
National Science and Technology Security Risk Monitoring and Early Warning System National Science and Technology Security Risk Monitoring and Early Warning System
...@@ -101,6 +101,12 @@ import AiBox from "./components/AiBox.vue"; ...@@ -101,6 +101,12 @@ import AiBox from "./components/AiBox.vue";
const router = useRouter(); const router = useRouter();
const handleToHome = () => {
router.push({
path: '/overview'
})
}
const isShowAiBox = ref(false); const isShowAiBox = ref(false);
const closeAiBox = () => { const closeAiBox = () => {
...@@ -193,6 +199,7 @@ body { ...@@ -193,6 +199,7 @@ body {
} }
.brand-text { .brand-text {
cursor: pointer;
.text-ch { .text-ch {
height: 37px; height: 37px;
color: rgba(10, 18, 30, 1); color: rgba(10, 18, 30, 1);
...@@ -298,7 +305,7 @@ body { ...@@ -298,7 +305,7 @@ body {
.ai-btn { .ai-btn {
position: absolute; position: absolute;
top: 50%; bottom: 20%;
right: 46px; right: 46px;
cursor: pointer; cursor: pointer;
...@@ -313,6 +320,7 @@ body { ...@@ -313,6 +320,7 @@ body {
} }
.text { .text {
margin-top: -15px;
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -326,7 +334,7 @@ body { ...@@ -326,7 +334,7 @@ body {
.ai-dialog { .ai-dialog {
position: absolute; position: absolute;
right: 100px; right: 100px;
top: 50px; top: 100px;
z-index: 9999; z-index: 9999;
} }
} }
......
src/components/AiBox.vue
浏览文件 @ 598a80d1
...@@ -269,7 +269,7 @@ onUnmounted(() => { ...@@ -269,7 +269,7 @@ onUnmounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.ai-wrapper { .ai-wrapper {
width: 548px; width: 548px;
height: 1048px; height: 800px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
...@@ -326,7 +326,7 @@ onUnmounted(() => { ...@@ -326,7 +326,7 @@ onUnmounted(() => {
} }
.main { .main {
height: 830px; height: 580px;
// background: rgba(225, 225, 225, 0.5); // background: rgba(225, 225, 225, 0.5);
width: 520px; width: 520px;
margin: 10px auto; margin: 10px auto;
......
src/styles/main.css
浏览文件 @ 598a80d1
:root { :root {
--color-main-active: rgba(10, 87, 166, 1); --color-main-active: rgba(5, 95, 194, 1);
--color-main-primay: rgba(59, 65, 75, 1); --color-main-primay: rgba(59, 65, 75, 1);
/* 普通按钮颜色 */ /* 普通按钮颜色 */
......
src/views/bill/billHome/index.vue
浏览文件 @ 598a80d1
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="home-wrapper"> <div class="home-wrapper">
<div class="search-header" v-show="isShow"> <div class="search-header" v-show="isShow">
<div class="home-main-header-center"> <div class="home-main-header-center">
<el-input v-model="input" style="width: 680px; height: 100%" placeholder="搜索科技法案" /> <el-input v-model="searchBillText" style="width: 680px; height: 100%" placeholder="搜索科技法案" />
<div class="search"> <div class="search">
<div class="search-icon"> <div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" /> <img src="./assets/images/search-icon.png" alt="" />
...@@ -31,8 +31,6 @@ ...@@ -31,8 +31,6 @@
</div> </div>
<div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef"> <div class="home-box" :class="{ scrollHomeBox: isShow }" ref="containerRef">
<div class="home-header" v-show="!isShow"> <div class="home-header" v-show="!isShow">
<!-- <span>国家科技安全 </span>> <span style="cursor: pointer;">中美博弈概览 </span>>
<span>科技法案 </span> -->
<div class="header-item">国家科技安全</div> <div class="header-item">国家科技安全</div>
<div class="header-item">></div> <div class="header-item">></div>
<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div> <div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
...@@ -42,7 +40,7 @@ ...@@ -42,7 +40,7 @@
<div class="home-main"> <div class="home-main">
<div class="home-main-header" v-show="!isShow"> <div class="home-main-header" v-show="!isShow">
<div class="home-main-header-center"> <div class="home-main-header-center">
<el-input v-model="input" style="width: 800px; height: 100%" placeholder="搜索科技法案" /> <el-input v-model="searchBillText" style="width: 800px; height: 100%" placeholder="搜索科技法案" />
<div class="search"> <div class="search">
<div class="search-icon"> <div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" /> <img src="./assets/images/search-icon.png" alt="" />
...@@ -571,12 +569,14 @@ import Zyy from "@/assets/icons/zyy.png"; ...@@ -571,12 +569,14 @@ import Zyy from "@/assets/icons/zyy.png";
import Ghd from "@/assets/icons/ghd.png"; import Ghd from "@/assets/icons/ghd.png";
import Mzd from "@/assets/icons/mzd.png"; import Mzd from "@/assets/icons/mzd.png";
const searchBillText = ref("");
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
path: '/overview' path: "/overview"
}) });
} };
const currentPage = ref(1); const currentPage = ref(1);
// 处理页码改变事件 // 处理页码改变事件
...@@ -1246,12 +1246,16 @@ onMounted(async () => { ...@@ -1246,12 +1246,16 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 2px; top: 0px;
width: 120px; width: 120px;
height: 44px; height: 46px;
border-radius: 10px; border-radius: 10px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
...@@ -1368,12 +1372,16 @@ onMounted(async () => { ...@@ -1368,12 +1372,16 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 2px; top: 0px;
width: 120px; width: 120px;
height: 44px; height: 46px;
border-radius: 10px; border-radius: 10px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
...@@ -2818,6 +2826,7 @@ onMounted(async () => { ...@@ -2818,6 +2826,7 @@ onMounted(async () => {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
......
src/views/decree/decreeHome/index.vue
浏览文件 @ 598a80d1
...@@ -644,9 +644,9 @@ import Message3 from "./assets/images/message-icon3.png"; ...@@ -644,9 +644,9 @@ import Message3 from "./assets/images/message-icon3.png";
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
path: '/overview' path: "/overview"
}) });
} };
const containerRef = ref(null); const containerRef = ref(null);
const { isShow } = useContainerScroll(containerRef); const { isShow } = useContainerScroll(containerRef);
...@@ -1112,17 +1112,22 @@ onMounted(async () => { ...@@ -1112,17 +1112,22 @@ onMounted(async () => {
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 2px; top: 0px;
width: 120px; width: 120px;
height: 44px; height: 46px;
border-radius: 10px; border-radius: 10px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -1228,23 +1233,28 @@ onMounted(async () => { ...@@ -1228,23 +1233,28 @@ onMounted(async () => {
margin-top: 48px; margin-top: 48px;
width: 960px; width: 960px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 2px; top: 0px;
width: 120px; width: 120px;
height: 44px; height: 46px;
border-radius: 10px; border-radius: 10px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -1347,6 +1357,11 @@ onMounted(async () => { ...@@ -1347,6 +1357,11 @@ onMounted(async () => {
align-items: center; align-items: center;
margin: 0 6px 16px 6px; margin: 0 6px 16px 6px;
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.item-left { .item-left {
width: 48px; width: 48px;
height: 48px; height: 48px;
...@@ -2799,6 +2814,7 @@ onMounted(async () => { ...@@ -2799,6 +2814,7 @@ onMounted(async () => {
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
......
src/views/exportControl/index.vue
浏览文件 @ 598a80d1
...@@ -10,25 +10,32 @@ ...@@ -10,25 +10,32 @@
<div class="home-main"> <div class="home-main">
<div class="home-main-header"> <div class="home-main-header">
<div class="home-main-header-center"> <div class="home-main-header-center">
<el-input <!-- <el-input
v-model="searchKey" v-model="searchKey"
style="width: 100%; height: 48px" style="width: 100%; height: 48px"
size="large" size="large"
placeholder="搜索出口管制调查" placeholder="搜索出口管制调查"
:suffix-icon="Search" :suffix-icon="Search"
/> /> -->
<el-input v-model="searchKey" style="width: 800px; height: 100%" placeholder="搜索出口管制调查" />
<div class="search">
<div class="search-icon">
<img src="@/assets/icons/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div> </div>
<div class="home-main-header-footer"> <div class="home-main-header-footer">
<div class="home-main-header-footer-item"> <div class="home-main-header-footer-item">
<div class="item-top">142</div> <div class="item-top">1096</div>
<div class="item-footer">实体清单</div> <div class="item-footer">实体清单</div>
</div> </div>
<div class="home-main-header-footer-item"> <div class="home-main-header-footer-item">
<div class="item-top">28</div> <div class="item-top">2633</div>
<div class="item-footer">商业管制清单</div> <div class="item-footer">商业管制清单</div>
</div> </div>
<div class="home-main-header-footer-item"> <div class="home-main-header-footer-item">
<div class="item-top">326</div> <div class="item-top">162</div>
<div class="item-footer">关键和新型技术清单</div> <div class="item-footer">关键和新型技术清单</div>
</div> </div>
</div> </div>
...@@ -51,71 +58,8 @@ ...@@ -51,71 +58,8 @@
</div> </div>
</div> </div>
<el-row :gutter="20"> <el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle title="资讯要闻" /> <CustomTitle title="最新动态" style="margin-top: 24px" />
<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>
...@@ -240,8 +184,71 @@ ...@@ -240,8 +184,71 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle title="数据总览" /> <CustomTitle title="资讯要闻" style="margin-top: 64px" />
<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" style="width: 1600px; margin: 0 auto">
<CustomTitle title="数据总览" style="margin-top: 64px" />
<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>
...@@ -354,7 +361,7 @@ ...@@ -354,7 +361,7 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row gutter="20"> <el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<el-col :span="8"> <el-col :span="8">
<custom-container title="制裁领域分析" :titleIcon="radarIcon" height="450px"> <custom-container title="制裁领域分析" :titleIcon="radarIcon" height="450px">
<template #header-right> <template #header-right>
...@@ -377,8 +384,8 @@ ...@@ -377,8 +384,8 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20"> <el-row :gutter="20" style="width: 1600px; margin: 0 auto">
<CustomTitle title="最新动态" /> <CustomTitle title="资源库" style="margin-top: 54px" />
<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>
...@@ -661,9 +668,9 @@ import aircasIcon from "./assets/images/aircas.png"; ...@@ -661,9 +668,9 @@ import aircasIcon from "./assets/images/aircas.png";
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
path: '/overview' path: "/overview"
}) });
} };
const handleToDetail = () => { const handleToDetail = () => {
router.push({ router.push({
...@@ -1996,26 +2003,31 @@ onMounted(async () => { ...@@ -1996,26 +2003,31 @@ onMounted(async () => {
margin-top: 43px; margin-top: 43px;
} }
.home-main-header-center { .home-main-header-center {
margin-top: 13px; margin-top: 20px;
width: 960px; width: 800px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 1px; top: 0px;
width: 120px; width: 120px;
height: 42px; height: 46px;
border-radius: 4px; border-radius: 10px;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: pointer;
.search-icon { .search-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
...@@ -2067,8 +2079,10 @@ onMounted(async () => { ...@@ -2067,8 +2079,10 @@ onMounted(async () => {
} }
.home-main-header-footer-link, .home-main-header-footer-link,
.home-main-header-footer-info { .home-main-header-footer-info {
width: 1600px;
display: flex; display: flex;
gap: 30px; justify-content: center;
gap: 16px;
padding: 30px 0; padding: 30px 0;
} }
} }
...@@ -2592,4 +2606,16 @@ onMounted(async () => { ...@@ -2592,4 +2606,16 @@ onMounted(async () => {
} }
} }
} }
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
</style> </style>
src/views/finance/components/link.vue
浏览文件 @ 598a80d1
...@@ -2,12 +2,14 @@ ...@@ -2,12 +2,14 @@
<div :class="['clickable-card', { disabled: disabled }]" @click="handleClick"> <div :class="['clickable-card', { disabled: disabled }]" @click="handleClick">
<span class="card-text">{{ text }}</span> <span class="card-text">{{ text }}</span>
<!-- <span class="arrow-icon">→</span> --> <!-- <span class="arrow-icon">→</span> -->
<el-icon><ArrowRight /></el-icon> <div class="icon">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ArrowRight } from "@element-plus/icons-vue"; import { ArrowRight, ArrowRightBold } from "@element-plus/icons-vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
const router = useRouter(); const router = useRouter();
...@@ -50,7 +52,7 @@ const handleClick = () => { ...@@ -50,7 +52,7 @@ const handleClick = () => {
}; };
</script> </script>
<style scoped> <style lang="scss" scoped>
.clickable-card { .clickable-card {
width: 160px; width: 160px;
height: 48px; height: 48px;
...@@ -68,6 +70,12 @@ const handleClick = () => { ...@@ -68,6 +70,12 @@ const handleClick = () => {
font-size: 20px; font-size: 20px;
font-weight: 500; font-weight: 500;
box-sizing: border-box; box-sizing: border-box;
position: relative;
.icon{
position: absolute;
top: 14px;
right: 12px;
}
} }
.clickable-card:hover { .clickable-card:hover {
......
src/views/finance/components/title.vue
浏览文件 @ 598a80d1
...@@ -41,8 +41,8 @@ defineProps({ ...@@ -41,8 +41,8 @@ defineProps({
} }
.title-text { .title-text {
font-size: 20px; font-size: 32px;
font-weight: bold; font-weight: 700;
margin-left: 20px; margin-left: 20px;
white-space: nowrap; white-space: nowrap;
} }
......
src/views/marketAccessRestrictions/marketAccessHome/index.vue
浏览文件 @ 598a80d1
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<div class="home-main-header-card-box"> <div class="home-main-header-card-box">
<div class="home-main-header-card-box-box1"> <div class="home-main-header-card-box-box1 card">
<div class="header"> <div class="header">
<div class="header-left">{{ "301调查" }}</div> <div class="header-left">{{ "301调查" }}</div>
<div class="header-right">{{ "52项" }}</div> <div class="header-right">{{ "52项" }}</div>
...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="home-main-header-card-box-box2"> <div class="home-main-header-card-box-box2 card">
<div class="header"> <div class="header">
<div class="header-left">{{ "232调查" }}</div> <div class="header-left">{{ "232调查" }}</div>
<div class="header-right">{{ "3项" }}</div> <div class="header-right">{{ "3项" }}</div>
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="home-main-header-card-box-box3"> <div class="home-main-header-card-box-box3 card">
<div class="header"> <div class="header">
<div class="header-left">{{ "337调查" }}</div> <div class="header-left">{{ "337调查" }}</div>
<div class="header-right">{{ "87项" }}</div> <div class="header-right">{{ "87项" }}</div>
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
<div class="icon"> <div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" /> <img src="./assets/images/box2-footer-icon.png" alt="" />
</div> </div>
<div class="text">{{ "风险处理" }}</div> <div class="text">{{ "查看更多" }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -443,9 +443,9 @@ import Message3 from "./assets/images/message-icon3.png"; ...@@ -443,9 +443,9 @@ import Message3 from "./assets/images/message-icon3.png";
// 返回首页 // 返回首页
const handleBackHome = () => { const handleBackHome = () => {
router.push({ router.push({
path: '/overview' path: "/overview"
}) });
} };
const handleClickToDetail = () => { const handleClickToDetail = () => {
router.push("/marketAccessLayout"); router.push("/marketAccessLayout");
...@@ -861,18 +861,22 @@ onMounted(async () => { ...@@ -861,18 +861,22 @@ onMounted(async () => {
margin-top: 48px; margin-top: 48px;
width: 960px; width: 960px;
height: 48px; height: 48px;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
position: relative; position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search { .search {
position: absolute; position: absolute;
right: 1px; right: -1px;
top: 2px; top: 0px;
width: 120px; width: 120px;
height: 44px; height: 46px;
border-radius: 10px; border-radius: 10px;
background: var(--color-main-active); background: var(--color-main-active);
display: flex; display: flex;
...@@ -952,7 +956,7 @@ onMounted(async () => { ...@@ -952,7 +956,7 @@ onMounted(async () => {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
line-height: 36px; line-height: 34px;
margin-left: 5px; margin-left: 5px;
} }
.btn-icon { .btn-icon {
...@@ -975,13 +979,22 @@ onMounted(async () => { ...@@ -975,13 +979,22 @@ onMounted(async () => {
margin-top: 64px; margin-top: 64px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
}
.home-main-header-card-box-box1 { .home-main-header-card-box-box1 {
width: 520px; width: 520px;
height: 142px; height: 142px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative; position: relative;
cursor: pointer;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1033,9 +1046,13 @@ onMounted(async () => { ...@@ -1033,9 +1046,13 @@ onMounted(async () => {
width: 520px; width: 520px;
height: 142px; height: 142px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative; position: relative;
cursor: pointer;
// &:hover {
// margin-top: -2px;
// }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1087,9 +1104,14 @@ onMounted(async () => { ...@@ -1087,9 +1104,14 @@ onMounted(async () => {
width: 520px; width: 520px;
height: 142px; height: 142px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2); box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
position: relative; position: relative;
cursor: pointer;
// &:hover {
// margin-top: -3px;
// box-shadow: 0 0 5px 5px rgba(10, 87, 166, 0.1);
// }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
...@@ -1153,8 +1175,6 @@ onMounted(async () => { ...@@ -1153,8 +1175,6 @@ onMounted(async () => {
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff; background: #fff;
box-sizing: border-box; box-sizing: border-box;
padding-left: 31px;
padding-right: 41px;
position: relative; position: relative;
.box1-left { .box1-left {
position: absolute; position: absolute;
...@@ -1185,6 +1205,8 @@ onMounted(async () => { ...@@ -1185,6 +1205,8 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-left: 31px;
padding-right: 41px;
.box1-header-left { .box1-header-left {
display: flex; display: flex;
.icon { .icon {
...@@ -1224,6 +1246,7 @@ onMounted(async () => { ...@@ -1224,6 +1246,7 @@ onMounted(async () => {
width: 1064px; width: 1064px;
height: 354px; height: 354px;
margin-top: 22px; margin-top: 22px;
margin-left: 31px;
.box1-main-header { .box1-main-header {
width: 990px; width: 990px;
height: 54px; height: 54px;
...@@ -1355,19 +1378,19 @@ onMounted(async () => { ...@@ -1355,19 +1378,19 @@ onMounted(async () => {
} }
.box2 { .box2 {
width: 521px; width: 521px;
padding-right: 20px;
height: 450px; height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1); box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
position: relative; position: relative;
.box2-header { .box2-header {
height: 54px; height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.icon { .icon {
width: 24px; width: 24px;
height: 22px; height: 22px;
margin-left: 33px; margin-left: 33px;
margin-top: 18px; margin-top: 13px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -1376,11 +1399,12 @@ onMounted(async () => { ...@@ -1376,11 +1399,12 @@ onMounted(async () => {
.title { .title {
display: flex; display: flex;
width: 148px; width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1); background: rgba(206, 79, 81, 1);
margin-left: 25px; margin-left: 25px;
.text { .text {
margin-left: 15px; margin-left: 15px;
margin-top: 16px; margin-top: 13px;
height: 22px; height: 22px;
color: #fff; color: #fff;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1397,13 +1421,13 @@ onMounted(async () => { ...@@ -1397,13 +1421,13 @@ onMounted(async () => {
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 12px; font-size: 12px;
margin-left: 15px; margin-left: 15px;
margin-top: 18px; margin-top: 14px;
border-radius: 100px; border-radius: 100px;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
} }
} }
.more { .more {
margin-top: 19px; margin-top: 16px;
margin-left: 200px; margin-left: 200px;
color: rgba(20, 89, 187, 1); color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -1414,7 +1438,8 @@ onMounted(async () => { ...@@ -1414,7 +1438,8 @@ onMounted(async () => {
} }
} }
.box2-main { .box2-main {
height: 282px; margin-top: 2px;
height: 330px;
overflow-y: auto; overflow-y: auto;
.box2-main-item { .box2-main-item {
margin-left: 23px; margin-left: 23px;
...@@ -1449,7 +1474,6 @@ onMounted(async () => { ...@@ -1449,7 +1474,6 @@ onMounted(async () => {
margin-left: 13px; margin-left: 13px;
width: 408px; width: 408px;
height: 47px; height: 47px;
border-top: 1px solid rgba(240, 242, 244, 1);
border-bottom: 1px solid rgba(240, 242, 244, 1); border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex; display: flex;
.text { .text {
...@@ -1473,16 +1497,17 @@ onMounted(async () => { ...@@ -1473,16 +1497,17 @@ onMounted(async () => {
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 40px; left: 30px;
bottom: 20px; bottom: 20px;
width: 430px; width: 460px;
height: 42px; height: 42px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
gap: 8px;
cursor: pointer; cursor: pointer;
.icon { .icon {
width: 16px; width: 16px;
...@@ -1493,10 +1518,9 @@ onMounted(async () => { ...@@ -1493,10 +1518,9 @@ onMounted(async () => {
} }
} }
.text { .text {
margin-left: 8px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
} }
...@@ -2161,6 +2185,7 @@ onMounted(async () => { ...@@ -2161,6 +2185,7 @@ onMounted(async () => {
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
box-shadow: none; box-shadow: none;
border-radius: 10px;
} }
:deep(.el-input__wrapper:hover) { :deep(.el-input__wrapper:hover) {
box-shadow: none !important; box-shadow: none !important;
......
src/views/marketAccessRestrictions/marketAccessLayout/index.vue
浏览文件 @ 598a80d1
...@@ -137,7 +137,7 @@ const handleClickBtn = (item) => { ...@@ -137,7 +137,7 @@ const handleClickBtn = (item) => {
width: 120px; width: 120px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.icon { .icon {
......
src/views/marketAccessRestrictions/singleCaseLayout/index.vue
浏览文件 @ 598a80d1
...@@ -223,7 +223,7 @@ const handleClickNav = (index) => { ...@@ -223,7 +223,7 @@ const handleClickNav = (index) => {
width: 120px; width: 120px;
height: 36px; height: 36px;
border-radius: 6px; border-radius: 6px;
background: rgba(22, 119, 255, 1); background: var(--color-main-active);
display: flex; display: flex;
cursor: pointer; cursor: pointer;
.icon { .icon {
......
src/components/ReportList.vue → src/views/thinkTank/components/ReportList.vue
浏览文件 @ 598a80d1
...@@ -66,7 +66,7 @@ ...@@ -66,7 +66,7 @@
</div> </div>
<div class="subscription-box"> <div class="subscription-box">
<h3>动态订阅</h3> <h3>动态订阅1</h3>
<p>选择您感兴趣的研究领域，获取最新报告和相关书目。</p> <p>选择您感兴趣的研究领域，获取最新报告和相关书目。</p>
<el-button type="primary" style="width: 100%;">保存订阅设置</el-button> <el-button type="primary" style="width: 100%;">保存订阅设置</el-button>
</div> </div>
...@@ -102,6 +102,7 @@ import { ref, reactive, onMounted } from 'vue'; ...@@ -102,6 +102,7 @@ import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import PolicyTab from '@/components/PolicyTab.vue' import PolicyTab from '@/components/PolicyTab.vue'
import { getOverviewReport, getThinkTankResearchType } from '@/api' import { getOverviewReport, getThinkTankResearchType } from '@/api'
import { mockReportList } from '../mockData';
const router = useRouter() const router = useRouter()
const activeTab = ref('report') const activeTab = ref('report')
...@@ -132,24 +133,15 @@ const activeFilters = reactive({ ...@@ -132,24 +133,15 @@ const activeFilters = reactive({
const selectedDateRange = ref('last_year'); const selectedDateRange = ref('last_year');
const selectedSort = ref('publish_time'); const selectedSort = ref('publish_time');
const reportList = ref([ const reportList = ref([]);
{ id: 1, title: '中国对AI的转型产业政策', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=1' },
{ id: 2, title: '中美对抗、竞争和合作将跨越人工智能通用领域的五个...', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=2' },
{ id: 3, title: '中国、智慧城市和中东：地区和美国的选择', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=3' },
{ id: 4, title: '中国对AI的转型产业政策', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=4' },
{ id: 5, title: '中美经济竞争：复杂经济和地缘政治关系中的收益...', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=5' },
{ id: 6, title: '中国、智慧城市和中东：留给地区和美国的选择', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=6' },
{ id: 7, title: '中国对AI的转型产业政策', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=7' },
{ id: 8, title: '中美对抗、竞争和合作将跨越人工智能通用领域的五个...', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=8' },
{ id: 9, title: '中国、智慧城市和中东：地区和美国的选择', date: '2025年6月26日', source: '兰德科技智库', imageUrl: 'https://picsum.photos/600/320?random=9' },
]);
const getReports = async () => { const getReports = async () => {
const { data } = await getOverviewReport({ const { data } = await getOverviewReport({
areas: activeFilters.regions, areas: activeFilters.regions,
researchTypeIds: activeFilters.researches, researchTypeIds: activeFilters.researches,
}) })
reportList.value = data // reportList.value = data
reportList.value = mockReportList
} }
const handleReportClick = (report) => { const handleReportClick = (report) => {
router.push({ name: 'ReportDetail', params: { id: report.id } }) router.push({ name: 'ReportDetail', params: { id: report.id } })
...@@ -240,8 +232,8 @@ onMounted(() => { ...@@ -240,8 +232,8 @@ onMounted(() => {
/* --- Right Content Styles --- */ /* --- Right Content Styles --- */
.main-content { .main-content {
background-color: #fff; /* background-color: #fff; */
padding: 20px; /* padding: 20px; */
border-radius: 4px; border-radius: 4px;
} }
...@@ -309,6 +301,8 @@ onMounted(() => { ...@@ -309,6 +301,8 @@ onMounted(() => {
.report-card { .report-card {
cursor: pointer; cursor: pointer;
border-radius: 10px;
padding: 10px;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
} }
...@@ -340,7 +334,6 @@ onMounted(() => { ...@@ -340,7 +334,6 @@ onMounted(() => {
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2; line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
min-height: 42px; /* 2 lines * 1.4 line-height * 15px font-size */
} }
.card-meta { .card-meta {
......
src/views/thinkTank/components/ThinkTankCard.vue 0 → 100644
浏览文件 @ 598a80d1
<template>
<div class="think-tank-card" @click="handleClick">
<div class="card-header">
<div class="logo-box">
<el-image
:src="tank.logo || 'https://via.placeholder.com/60'"
:alt="tank.name"
fit="contain"
>
<template #error>
<div class="image-slot">
<el-icon><Picture /></el-icon>
</div>
</template>
</el-image>
</div>
<div class="rank-badge" v-if="index !== undefined">
<span class="rank-text">No.{{ index + 1 }}</span>
</div>
</div>
<div class="title-row">
<div class="tank-name" :title="tank.name">{{ tank.name }}</div>
<div class="tank-country">{{ tank.country }}</div>
</div>
<div class="tank-description" :title="tank.describe">
{{ tank.describe }}
</div>
<div class="tank-tags">
<span
v-for="(tag, idx) in tank.tags"
:key="tag"
class="custom-tag"
:class="idx % 2 === 0 ? 'tag-blue' : 'tag-red'"
>
{{ tag }}
</span>
</div>
</div>
</template>
<script setup>
import { Picture } from '@element-plus/icons-vue' // 引入图标用于图片加载失败占位
const props = defineProps({
tank: {
type: Object,
required: true
},
// 新增 index用于显示 No.1, No.2 等排名
index: {
type: Number,
default: 0
}
})
const emit = defineEmits(['click'])
const handleClick = () => {
emit('click', props.tank)
}
</script>
<style scoped lang="scss">
.think-tank-card {
background: #ffffff;
border-radius: 12px; // 更圆润的角
padding: 16px;
width: 280px; // 稍微加宽以匹配设计图比例，可根据父容器自适应
// border: 1px solid #e4e7ed; // 设计图看起来边框很淡，或者主要是阴影
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
overflow: hidden; // 确保排名背景不溢出
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
}
}
/* --- 顶部区域 --- */
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
position: relative;
}
.logo-box {
width: 48px;
height: 48px;
// 设计图中Logo是自适应显示的，取消了灰底
display: flex;
align-items: center;
justify-content: center;
.el-image {
width: 100%;
height: 100%;
border-radius: 4px;
display: block; // 消除图片底部间隙
}
.image-slot {
width: 100%;
height: 100%;
background: #f5f7fa;
display: flex;
justify-content: center;
align-items: center;
color: #909399;
}
}
/* 排名条样式 */
.rank-badge {
/* 绝对定位到右上角，或者利用Flex布局 */
position: absolute;
right: -16px; /* 抵消父级padding */
top: -6px; /* 微调垂直位置 */
height: 32px;
padding-left: 30px; /* 渐变过度区 */
padding-right: 16px;
display: flex;
align-items: center;
justify-content: flex-end;
/* 核心：背景渐变从透明到淡红色 */
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(206, 126, 126, 0.15) 40%, rgba(199, 58, 58, 0.15) 100%);
.rank-text {
font-family: 'Impact', sans-serif, 'Arial Black'; /* 选用粗体字体 */
font-size: 20px;
font-style: italic;
color: #b54646; /* 暗红色字体 */
letter-spacing: 1px;
}
}
/* --- 标题行 --- */
.title-row {
display: flex;
justify-content: space-between;
align-items: baseline; /* 文字基线对齐 */
margin-bottom: 12px;
}
.tank-name {
font-size: 16px;
font-weight: 700;
color: #303133;
line-height: 1.4;
margin-right: 8px;
/* 防止名字太长换行导致布局崩坏，可按需开启截断 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tank-country {
font-size: 13px;
color: #909399;
flex-shrink: 0;
}
/* --- 描述文本 --- */
.tank-description {
font-size: 13px;
color: #606266;
line-height: 1.6;
margin-bottom: 16px;
min-height: 63px; /* 预留3行高度，保证卡片高度一致 */
/* 3行省略号 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- 底部标签 --- */
.tank-tags {
display: flex;
gap: 8px;
margin-top: auto; /* 推到底部 */
}
/* 自定义标签样式，模拟设计图 */
.custom-tag {
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
border: 1px solid transparent; // 预留边框位置
&.tag-blue {
background-color: #e6f1fc; /* 淡蓝背景 */
color: #409eff; /* 蓝色文字 */
border-color: #d9ecff;
}
&.tag-red {
background-color: #fef0f0; /* 淡红背景 */
color: #f56c6c; /* 红色文字 */
border-color: #fde2e2;
}
}
</style>
\ No newline at end of file
src/views/thinkTank/index.vue
浏览文件 @ 598a80d1
...@@ -52,21 +52,13 @@ ...@@ -52,21 +52,13 @@
<!-- 智库展示区域 --> <!-- 智库展示区域 -->
<div class="think-tanks-section"> <div class="think-tanks-section">
<div v-for="tank in thinkTanks" :key="tank.id" class="think-tank-card" @click="handleClick(tank)"> <ThinkTankCard
<div class="tank-header"> v-for="(tank, index) in thinkTanks"
<div class="tank-logo"> :key="tank.id"
<el-image :src="$withFallbackImage(tank.logo, tank.id)" :alt="tank.name" /> :tank="tank"
</div> :index="index"
<div class="tank-country">{{ tank.country }}</div> @click="handleClick"
</div> />
<div class="tank-name">{{ tank.name }}</div>
<div class="tank-description" :title="tank.describe">{{ tank.describe }}</div>
<div class="tank-tags">
<el-tag v-for="tag in tank.tags" :key="tag" type="primary" size="small">
{{ tag }}
</el-tag>
</div>
</div>
<div class="view-all"> <div class="view-all">
<span class="view-all-link">查看全部智库 ></span> <span class="view-all-link">查看全部智库 ></span>
...@@ -99,9 +91,10 @@ ...@@ -99,9 +91,10 @@
<div class="right-section"> <div class="right-section">
<div class="signal-header"> <div class="signal-header">
<el-icon class="signal-icon"><Warning /></el-icon> <el-icon class="signal-icon"><Warning /></el-icon>
<div class="signal-title-box">
<span class="signal-title">风险信号</span> <span class="signal-title">风险信号</span>
<el-badge :value="5" class="signal-badge" /> <el-badge :value="5" class="signal-badge" />
<span class="more-link">更多 ></span> </div>
</div> </div>
<div class="signal-list"> <div class="signal-list">
...@@ -117,8 +110,7 @@ ...@@ -117,8 +110,7 @@
</div> </div>
<el-button type="primary" class="process-btn" block> <el-button type="primary" class="process-btn" block>
<el-icon><Setting /></el-icon> 查看更多
风险处理
</el-button> </el-button>
</div> </div>
</div> </div>
...@@ -185,17 +177,16 @@ ...@@ -185,17 +177,16 @@
import { ref, onMounted, nextTick } from "vue"; import { ref, onMounted, nextTick } from "vue";
import { Search, Location, Warning, Setting } from "@element-plus/icons-vue"; import { Search, Location, Warning, Setting } from "@element-plus/icons-vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import ReportList from "@/components/ReportList.vue"; import ReportList from "@/views/thinkTank/components/ReportList.vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import rand from "@/assets/images/rand.png";
import brookings from "@/assets/images/brookings.png";
import mit from "@/assets/images/mit.png"; import { mockThinkTankList } from "./mockData";
import itif from "@/assets/images/itif.png";
import mckinsley from "@/assets/images/mckinsey.png";
import { getThinkTankList } from "@/api"; import { getThinkTankList } from "@/api";
import ClickableCard from "@/views/finance/components/link.vue"; import ClickableCard from "@/views/finance/components/link.vue";
import DivideHeader from "@/components/DivideHeader.vue"; import DivideHeader from "@/components/DivideHeader.vue";
import DataOverview from "./components/DataOverview.vue"; import DataOverview from "./components/DataOverview.vue";
import ThinkTankCard from "./components/ThinkTankCard.vue";
import News1 from "@/views/bill/billHome/assets/images/news1.png"; import News1 from "@/views/bill/billHome/assets/images/news1.png";
import News2 from "@/views/bill/billHome/assets/images/news2.png"; import News2 from "@/views/bill/billHome/assets/images/news2.png";
import News3 from "@/views/bill/billHome/assets/images/news3.png"; import News3 from "@/views/bill/billHome/assets/images/news3.png";
...@@ -207,6 +198,13 @@ import Message2 from "@/views/bill/billHome/assets/images/message-icon2.png"; ...@@ -207,6 +198,13 @@ import Message2 from "@/views/bill/billHome/assets/images/message-icon2.png";
import Message3 from "@/views/bill/billHome/assets/images/message-icon3.png"; import Message3 from "@/views/bill/billHome/assets/images/message-icon3.png";
const router = useRouter(); const router = useRouter();
// 返回首页
const handleBackHome = () => {
router.push({
path: "/overview"
});
};
const searchText = ref(""); const searchText = ref("");
const activeTime = ref("本月"); const activeTime = ref("本月");
const worldMapRef = ref(null); const worldMapRef = ref(null);
...@@ -498,7 +496,8 @@ const thinkTanks = ref([]); ...@@ -498,7 +496,8 @@ const thinkTanks = ref([]);
const getThinkTanks = async () => { const getThinkTanks = async () => {
const { data } = await getThinkTankList(); const { data } = await getThinkTankList();
thinkTanks.value = data; // thinkTanks.value = data;
thinkTanks.value = [...mockThinkTankList];
}; };
const handleClick = tank => { const handleClick = tank => {
router.push({ name: "ThinkTankDetail", params: { id: tank.id } }); router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
...@@ -539,7 +538,7 @@ onMounted(() => { ...@@ -539,7 +538,7 @@ onMounted(() => {
} }
.tech-think-tank { .tech-think-tank {
max-width: 1400px; max-width: 1650px;
margin: 0 auto; margin: 0 auto;
margin-top: 31px; margin-top: 31px;
padding: 20px; padding: 20px;
...@@ -781,11 +780,8 @@ onMounted(() => { ...@@ -781,11 +780,8 @@ onMounted(() => {
} }
.search-section { .search-section {
margin: 0 auto;
margin-bottom: 30px; margin-bottom: 30px;
// display: flex;
// justify-content: center;
// margin-top: 20px;
margin-left: 200px;
width: 800px; width: 800px;
height: 48px; height: 48px;
border-radius: 10px; border-radius: 10px;
...@@ -950,12 +946,14 @@ onMounted(() => { ...@@ -950,12 +946,14 @@ onMounted(() => {
background: white; background: white;
border-radius: 2px; border-radius: 2px;
padding: 20px; padding: 20px;
padding-top: 0px;
} }
.signal-header { .signal-header {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; display: flex;
margin-bottom: 15px;
} }
.signal-icon { .signal-icon {
...@@ -963,6 +961,13 @@ onMounted(() => { ...@@ -963,6 +961,13 @@ onMounted(() => {
margin-right: 2px; margin-right: 2px;
} }
.signal-title-box {
display: flex;
background-color: #C05052;
padding: 10px;
color: #fff;
margin-left: 20px;
}
.signal-title { .signal-title {
font-weight: 500; font-weight: 500;
margin-right: 8px; margin-right: 8px;
...@@ -972,11 +977,6 @@ onMounted(() => { ...@@ -972,11 +977,6 @@ onMounted(() => {
margin-right: auto; margin-right: auto;
} }
.more-link {
color: #409eff;
font-size: 14px;
cursor: pointer;
}
.signal-list { .signal-list {
margin-bottom: 40px; margin-bottom: 40px;
...@@ -1036,86 +1036,12 @@ onMounted(() => { ...@@ -1036,86 +1036,12 @@ onMounted(() => {
justify-content: flex-start; justify-content: flex-start;
} }
.think-tank-card {
background: white;
border-radius: 8px;
padding: 12px;
border: 1px solid #e4e7ed;
width: 220px;
// height: 180px;
flex-shrink: 0;
display: flex;
flex-direction: column;
cursor: pointer;
}
.tank-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.tank-logo {
width: 60px;
height: 60px;
background: #f0f0f0;
border-radius: 8px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
.el-image {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: contain;
}
}
.tank-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.tank-country {
background: #f0f0f0;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
color: #666;
}
.tank-name {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
color: #333;
}
.tank-description {
font-size: 12px;
color: #666;
flex: 1;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
margin-bottom: 5px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.tank-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.view-all { .view-all {
text-align: center; text-align: center;
width: 180px; width: 110px;
border-radius: 10px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
padding: 0 5px; padding: 0 5px;
background: #fff; background: #fff;
display: flex; display: flex;
......
src/views/thinkTank/mockData.js 0 → 100644
浏览文件 @ 598a80d1
import rand from "@/assets/images/rand.png";
import brookings from "@/assets/images/brookings.png";
import mit from "@/assets/images/mit.png";
import itif from "@/assets/images/itif.png";
import mckinsley from "@/assets/images/mckinsey.png";
import report1 from "./assets/矩形 196.png";
import report2 from "./assets/矩形 196 (1).png";
import report3 from "./assets/矩形 196 (2).png";
import report4 from "./assets/矩形 196 (3).png";
import report5 from "./assets/矩形 196 (4).png";
import report6 from "./assets/矩形 196 (5).png";
import report7 from "./assets/矩形 196 (6).png";
import report8 from "./assets/矩形 196 (7).png";
import report9 from "./assets/矩形 196 (8).png";
import report10 from "./assets/矩形 196 (9).png";
import report11 from "./assets/矩形 196 (10).png";
import report12 from "./assets/矩形 196 (11).png";
export const mockThinkTankList = [
{
"id": 1,
"name": "兰德科技智库",
"describe": "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。",
"country": "美国",
"tags": [
"国家安全",
"科技政策"
],
"logo": rand
},
{
"id": 2,
"name": "布鲁金斯学会",
"describe": "专注于全球经济与发展、外交政策、都市政策、治理研究等领域，是美国最具影响力的智库之一。",
"country": "美国",
"tags": [
"经济政策",
"公共政策"
],
"logo": brookings
},
{
"id": 3,
"name": "麦肯锡全球研究院",
"describe": "专注于国际安全、国防、区域研究、能源与气候变化等领域，以其强硬的安全政策立场著称。",
"country": "美国",
"tags": [
"国际安全",
"国防政策"
],
"logo": mckinsley
},
{
"id": 4,
"name": "麻省理工学院科技评论",
"describe": "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。",
"country": "美国",
"tags": [
"公共政策",
"国际关系"
],
"logo": mit
},
{
"id": 5,
"name": "信息技术与创新基金会",
"describe": "专注于国内外公共政策、国际关系等领域，是美国最具影响力的官方智库之一。",
"country": "美国",
"tags": [
"国家安全",
"科技政策"
],
"logo": itif
}
]
export const mockReportList = [
{
"id": 1,
"name": "中国对AI的转型产业政策",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report1
},
{
"id": 2,
"name": "中美对抗、竞争和合作跨越人工智能通用领域...",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report2
},
{
"id": 3,
"name": "中国、智慧城市和中东：地区和美国的选择",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report3
},
{
"id": 4,
"name": "中国对AI的转型产业政策",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report4
},
{
"id": 5,
"name": "中美经济竞争：复杂经济和地缘政治关系中的...",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report5
},
{
"id": 6,
"name": "中国、智慧城市和中东：留给地区和美国的选择",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report6
},
{
"id": 7,
"name": "中国对AI的转型产业政策",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report7
},
{
"id": 8,
"name": "中美对抗、竞争和合作跨越人工智能通用领域...",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report8
},
{
"id": 9,
"name": "中国、智慧城市和中东：地区和美国的选择",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report9
},
{
"id": 10,
"name": "中国对AI的转型产业政策",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report10
},
{
"id": 11,
"name": "中美对抗、竞争和合作跨越人工智能通用领域...",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report11
},
{
"id": 12,
"name": "中国、智慧城市和中东：地区和美国的选择",
"times": "2025-06-26",
"thinkTankName": "兰德科技智库",
imageUrl: report12
}
]
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论