Skip to content

R
risk-monitor
提交 af7079a0 authored 作者: 胡卉清's avatar 胡卉清
浏览文件
操作

合并分支 'dev_hhq' 到 'master'

Dev hhq 查看合并请求 !49
上级 88b6f73b e17d9815
显示空白字符变更
内嵌 并排
正在显示 包含 2229 行增加 和 751 行删除
src/api/thinkTank/overview.js
浏览文件 @ af7079a0
......@@ -10,6 +10,15 @@ export function getThinkTankList() {
})
}
//智库概览:获取智库发布
export function getNewReport() {
return request({
method: 'GET',
url: `/api/thinkTankOverview/newReport`,
})
}
// 风险信号
export function getThinkTankRiskSignal() {
return request({
......@@ -20,10 +29,10 @@ export function getThinkTankRiskSignal() {
}
// 政策建议趋势分布
export function getThinkTankPolicyIndustryChange() {
export function getThinkTankPolicyIndustryChange(params) {
return request({
method: 'GET',
url: `/api/thinkTankOverview/policyIndustryChange`,
url: `/api/thinkTankOverview/policyIndustryChange/${params}`,
})
}
......@@ -45,3 +54,187 @@ export function getThinkTankDonation() {
})
}
//智库概览:获取智库研究热点
export function getThinkTankHot(params) {
return request({
method: 'GET',
url: `/api/thinkTankOverview/research/hot/${params}`,
})
}
// 行业领域字典列表
export function getHylyList() {
return request({
method: 'GET',
url: `/api/billImpactAnalysis/industry/hylyList`,
})
}
//获取智库报告
export function getThinkTankReport(params) {
return request({
method: 'GET',
url: `/api/thinkTankOverview/report`,
params: params
})
}
/********* 智库信息 */
//智库百科:获取全局信息
export function getThinkTankSummary(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/summary/${params.id}`,
})
}
//智库报告:获取智库报告类型
export function getThinkDynamicsReportType() {
return request({
method: 'GET',
url: `/api/thinkTankInfo/reportType`,
})
}
//智库动态:获取智库报告
export function getThinkDynamicsReport(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/report/${params.id}/${params.startDate}`,
params: params.parmas
})
}
//提出建议领域分布
export function getThinkPolicyIndustry(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustry/${params.id}/${params.year}`,
})
}
//获取相关政策领域分布
export function getThinkPolicyIndustryTotal(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustryTotal/${params.id}/${params.year}`,
})
}
//获取热门研究方向变化趋势
export function getThinkPolicyIndustryChange(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policyIndustryChange/${params.id}/${params.year}`,
})
}
//获取智库政策
export function getThinkPolicy(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
})
}
//智库百科基本信息
export function getThinkTankInfoBasic(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/basic/${params}`,
})
}
//获取全球分支机构
export function getThinkTankInfoBranch(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/branch/${params}`,
})
}
//获取经费来源统计
export function getThinkTankFundsTotal(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsTotal/${params}`,
})
}
//获取经费来源
export function getThinkTankFundsSource(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsSource/${params}`,
})
}
//获取研究领域演变
export function getThinkTankResearchAreae(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/researchArea/${params}`,
})
}
//获取核心研究人员
export function getThinkTankPerson(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/person/${params}`,
})
}
//获取报告内容摘要
export function getThinkTankReportAbstract(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/abstract/${params}`,
})
}
//获取报告主要观点
export function getThinkTankReportContent(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/content/${params}`,
})
}
//获取涉及科技领域
export function getThinkTankReportIndustry(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/industry/${'Rand_RRA3572-1'}`,
})
}
//获取科技领域词云
export function getThinkTankReportIndustryCloud(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/industry/${params.id}/${params.industryId}`,
})
}
//获取政策建议落实情况
export function getThinkTankReportPolicy(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/policy/${params}`,
})
}
//获取相关政策动态
export function getThinkTankReportPolicyAction(params) {
return request({
method: 'GET',
url: `/api/thinkTankReport/policyAction/${params}`,
})
}
src/views/overView/component/Timeline.vue
浏览文件 @ af7079a0
......@@ -177,7 +177,7 @@ export default {
/* 向上节点：线往下伸 */
.dot.up::after {
bottom: 100%;
height: 180px;
height: 165px;
/* 圆环底部 → 卡片顶 */
}
......@@ -185,15 +185,15 @@ export default {
.dot.down::after {
top: 100%;
height: 180px;
height: 165px;
}
.card {
position: absolute;
height: 180px;
width:320px;
height: 165px;
width: 320px;
padding: 8px 12px;
text-align: left;
cursor: pointer;
......@@ -208,6 +208,7 @@ export default {
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
}
.title {
......@@ -218,6 +219,7 @@ export default {
line-height: 26px;
letter-spacing: 0px;
text-align: justify;
margin-bottom: 10px;
}
.content {
......
src/views/overView/index.vue
浏览文件 @ af7079a0
......@@ -52,27 +52,20 @@
}}
</div>
</div>
<img
class="item-card-content-title-image"
:src="organizationNews[organizationNewsShow].image"
alt=""
/>
<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image"
alt="" />
</div>
<div class="item-header-divider"></div>
<div class="item-card-content-text">
{{ organizationNews[organizationNewsShow].content }}
</div>
<div style="display: flex; margin-top: 30px">
<div
class="item-card-content-tag"
v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
:key="index"
:style="{
<div class="item-card-content-tag" v-for="(tag, index) in organizationNews[organizationNewsShow].tag"
:key="index" :style="{
color: tag.textColor,
background: tag.color,
border: `1px solid ${tag.textColor}`
}"
>
}">
{{ tag.text }}
</div>
</div>
......@@ -114,13 +107,10 @@
<div style="padding: 30px 23px; height: 400px">
<div class="waring-item" v-for="(item, index) in warningList" :key="index">
<div style="display: flex; height: 47px">
<div
class="waring-status"
:style="{
<div class="waring-status" :style="{
color: item.status === 0 ? '#CE4F51' : item.status === 1 ? '#FA8C16' : '#52C41A',
backgroundColor: item.status === 0 ? '#FFF1F0' : item.status === 1 ? '#FFF7E6' : '#F6FFED'
}"
>
}">
{{ item.status === 0 ? "特别重大" : item.status === 1 ? "重大风险" : "一般风险" }}
</div>
<div class="waring-text">
......@@ -424,7 +414,7 @@ function changeOrganizationNews(type) {
: (organizationNewsShow.value = organizationNewsShow.value + 1);
}
}
onMounted(() => {});
onMounted(() => { });
</script>
<style lang="scss" scoped>
......@@ -450,6 +440,7 @@ onMounted(() => {});
box-sizing: border-box;
padding-left: 160px;
position: relative;
.header-search-box {
position: absolute;
top: 14px;
......@@ -457,6 +448,7 @@ onMounted(() => {});
display: flex;
gap: 12px;
justify-content: flex-end;
.header-search-left {
width: 360px;
height: 36px;
......@@ -464,18 +456,22 @@ onMounted(() => {});
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
display: flex;
.input-box {
width: 324px;
}
.icon {
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
}
.header-search-right {
width: 36px;
height: 36px;
......@@ -483,10 +479,12 @@ onMounted(() => {});
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
.header-img-box {
width: 19px;
height: 24px;
margin: 4px auto;
img {
width: 100%;
height: 100%;
......@@ -590,6 +588,7 @@ onMounted(() => {});
font-size: 14px;
}
}
.item-header-text-1 {
// width: 150px;
height: 48px;
......@@ -641,7 +640,7 @@ onMounted(() => {});
}
.item-card-content-tag {
width: 74px;
width: 76px;
height: 24px;
padding: 1px 8px 1px 8px;
margin: 2px;
......@@ -682,7 +681,7 @@ onMounted(() => {});
.item-card-content {
height: 100%;
width: calc(100% - 50px);
width: 454px;
padding: 20px;
.item-card-content-header {
......@@ -1002,10 +1001,12 @@ onMounted(() => {});
}
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
background: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -1013,6 +1014,7 @@ onMounted(() => {});
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-input__inner::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......
src/views/thinkTank/ReportDetail/index.vue
浏览文件 @ af7079a0
......@@ -86,7 +86,8 @@ const switchTab = name => {
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 984px;
// height: 984px;
.header {
width: 1920px;
height: 188px;
......@@ -95,12 +96,14 @@ const switchTab = name => {
border-top: 1px solid rgba(234, 236, 238, 1);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.header-top {
margin-top: 20px;
margin-left: 248px;
display: flex;
justify-content: space-between;
margin-right: 160px;
.header-top-left {
.title {
height: 26px;
......@@ -112,6 +115,7 @@ const switchTab = name => {
letter-spacing: 0px;
text-align: left;
}
.en-title {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -122,10 +126,12 @@ const switchTab = name => {
letter-spacing: 0px;
text-align: left;
}
.tag-box {
margin-top: 11px;
display: flex;
gap: 8px;
.tag {
height: 26px;
padding: 0 8px;
......@@ -143,6 +149,7 @@ const switchTab = name => {
}
}
}
.header-top-right {
.name {
height: 24px;
......@@ -154,6 +161,7 @@ const switchTab = name => {
letter-spacing: 0px;
text-align: right;
}
.time {
height: 24px;
margin-top: 5px;
......@@ -167,6 +175,7 @@ const switchTab = name => {
}
}
}
.header-bottom {
margin: 0 auto;
margin-top: 30px;
......@@ -174,13 +183,15 @@ const switchTab = name => {
height: 48px;
display: flex;
justify-content: space-between;
.tab-box {
width: 224px;
height: 48px;
display: flex;
gap: 24px;
.tab {
width: 92px;
width: 94px;
height: 48px;
display: flex;
align-items: center;
......@@ -188,14 +199,17 @@ const switchTab = name => {
gap: 4px;
cursor: pointer;
border-bottom: 2px solid transparent;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -204,18 +218,22 @@ const switchTab = name => {
font-weight: 400;
line-height: 24px;
}
.textActive {
color: rgba(5, 95, 194, 1);
font-weight: 700;
}
}
.tabActive {
border-bottom: 2px solid rgba(5, 95, 194, 1);
}
}
.btn-box {
display: flex;
gap: 12px;
.btn {
width: 120px;
height: 36px;
......@@ -227,16 +245,19 @@ const switchTab = name => {
align-items: center;
justify-content: center;
gap: 8px;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
width: 64px;
width: 66px;
height: 22px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -247,17 +268,20 @@ const switchTab = name => {
text-align: center;
}
}
.btn1 {
border-radius: 6px;
background: var(--color-main-active);
.text{
color: rgba(255,255,255,1);
.text {
color: rgba(255, 255, 255, 1);
}
}
}
}
}
.main{
.main {
width: 100%;
}
}
......
src/views/thinkTank/ReportDetail/policyTracking/index.vue
浏览文件 @ af7079a0
......@@ -17,10 +17,10 @@
<div class="box1-main">
<div class="box1-item" v-for="(item, index) in box1Data" :key="index">
<div class="left">
{{ item.id }}
{{ index + 1 }}
</div>
<div class="center">
<div class="title">{{ item.title }}</div>
<div class="title">{{ item.content }}</div>
<div class="tag-box">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
{{ val }}
......@@ -28,8 +28,15 @@
</div>
<div class="file-box">
<div class="file-item" v-for="(vall, idxx) in item.fileList" :key="idxx">
<div class="file-item-left">{{ vall.type }}</div>
<div class="file-item-center">{{ vall.name }}</div>
<div class="file-item-left">法案</div>
<div class="file-item-center">{{ vall.relationBillsList }}</div>
<div class="file-item-right">
<img src="@/assets/images/icon-right-circle.png" alt="" />
</div>
</div>
<div class="file-item" v-for="(vall, idxx) in item.fileList" :key="idxx">
<div class="file-item-left">政令</div>
<div class="file-item-center">{{ vall.relationAdList }}</div>
<div class="file-item-right">
<img src="@/assets/images/icon-right-circle.png" alt="" />
</div>
......@@ -46,14 +53,7 @@
</div>
</div>
</div>
<div class="box1-footer">
<div class="info">
{{ `共105项调查` }}
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
</div>
</div>
</div>
</div>
......@@ -79,13 +79,13 @@
<div class="line" v-if="index < 5"></div>
</div>
<div class="box2-item-center">
<div class="title">{{ item.title }}</div>
<div class="content">{{ item.content }}</div>
<div class="title">{{ item.sjbt }}</div>
<div class="content">{{ item.sjnr }}</div>
</div>
<div class="box2-item-right">
<div class="time">{{ item.time }}</div>
<div class="img-box">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
</div>
</div>
......@@ -102,7 +102,12 @@
<script setup>
import { ref, onMounted } from "vue";
import {
getThinkTankReportPolicy,
getThinkTankReportPolicyAction
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
// 政策建议落实情况
const box1Data = ref([
{
......@@ -257,6 +262,19 @@ const box1Data = ref([
}
]);
const handleGetThinkTankReportPolicy = async () => {
try {
const res = await getThinkTankReportPolicy(router.currentRoute._value.params.id);
console.log("政策建议落实情况", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data
}
} catch (error) {
console.error("获取政策建议落实情况rror", error);
}
};
// 相关政策动态
const box2Data = ref([
{
......@@ -296,6 +314,24 @@ const box2Data = ref([
img: 1
}
]);
const handleGetThinkTankReportPolicyAction = async () => {
try {
const res = await getThinkTankReportPolicyAction(router.currentRoute._value.params.id);
console.log("相关政策动态", res);
if (res.code === 200 && res.data) {
box2Data.value = res.data
}
} catch (error) {
console.error("获取相关政策动态rror", error);
}
};
onMounted(async () => {
handleGetThinkTankReportPolicy()
handleGetThinkTankReportPolicyAction()
});
</script>
<style lang="scss" scoped>
......@@ -303,11 +339,14 @@ const box2Data = ref([
display: flex;
justify-content: center;
gap: 16px;
height: 100%;
.box-header {
width: 100%;
height: 50px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
......@@ -315,6 +354,7 @@ const box2Data = ref([
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -325,6 +365,7 @@ const box2Data = ref([
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 15px;
......@@ -332,6 +373,7 @@ const box2Data = ref([
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
......@@ -345,11 +387,13 @@ const box2Data = ref([
font-weight: 400;
line-height: 28px;
}
.btnActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -357,9 +401,11 @@ const box2Data = ref([
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -367,26 +413,32 @@ const box2Data = ref([
}
}
}
.left {
height: 1442px;
height: 100%;
.box1 {
margin-top: 16px;
width: 1104px;
height: 1405px;
height: 100%;
margin-bottom: 16px;
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 {
width: 1056px;
height: 1280px;
margin: 0 auto;
overflow: auto;
.box1-item {
height: 128px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
position: relative;
.left {
width: 28px;
height: 28px;
......@@ -402,8 +454,10 @@ const box2Data = ref([
font-weight: 400;
letter-spacing: 0px;
}
.center {
margin-left: 18px;
.title {
margin-top: 16px;
height: 24px;
......@@ -415,10 +469,12 @@ const box2Data = ref([
letter-spacing: 0px;
text-align: left;
}
.tag-box {
display: flex;
margin-top: 7px;
gap: 8px;
.tag {
height: 22px;
padding: 0 8px;
......@@ -435,10 +491,12 @@ const box2Data = ref([
text-align: left;
}
}
.file-box {
margin-top: 7px;
display: flex;
gap: 8px;
.file-item {
height: 32px;
padding: 0 8px;
......@@ -446,6 +504,7 @@ const box2Data = ref([
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
.file-item-left {
height: 22px;
padding: 0 4px;
......@@ -460,6 +519,7 @@ const box2Data = ref([
letter-spacing: 0px;
text-align: left;
}
.file-item-center {
margin-left: 12px;
color: var(--color-main-active);
......@@ -470,10 +530,12 @@ const box2Data = ref([
letter-spacing: 0px;
text-align: left;
}
.file-item-right {
margin-left: 12px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
......@@ -482,6 +544,7 @@ const box2Data = ref([
}
}
}
.right {
position: absolute;
top: 16px;
......@@ -491,6 +554,7 @@ const box2Data = ref([
justify-content: flex-end;
align-items: center;
gap: 9px;
.text {
height: 24px;
font-family: Microsoft YaHei;
......@@ -501,9 +565,11 @@ const box2Data = ref([
letter-spacing: 0px;
text-align: right;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
......@@ -512,12 +578,14 @@ const box2Data = ref([
}
}
}
.box1-footer {
height: 50px;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 20px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -539,24 +607,30 @@ const box2Data = ref([
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box2-main {
margin: 0 auto;
margin-top: 15px;
width: 459px;
height: 654px;
overflow: hidden;
.box2-item {
height: 109px;
display: flex;
.box2-item-left {
.point {
margin-left: 14px;
width: 10px;
height: 10px;
img {
width: 100%;
height: 100%;
}
}
.line {
width: 2px;
height: 109px;
......@@ -564,8 +638,10 @@ const box2Data = ref([
margin-left: 18px;
}
}
.box2-item-center {
margin-left: 11px;
.title {
width: 314px;
height: 24px;
......@@ -580,6 +656,7 @@ const box2Data = ref([
text-overflow: ellipsis;
white-space: nowrap;
}
.content {
width: 314px;
height: 48px;
......@@ -593,8 +670,10 @@ const box2Data = ref([
overflow: hidden;
}
}
.box2-item-right {
margin-left: 18px;
.time {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -608,11 +687,13 @@ const box2Data = ref([
text-overflow: ellipsis;
white-space: nowrap;
}
.img-box {
margin-top: 14px;
width: 78px;
height: 50px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
......@@ -621,6 +702,7 @@ const box2Data = ref([
}
}
}
.box2-footer {
margin: 10px auto;
width: 108px;
......@@ -630,9 +712,11 @@ const box2Data = ref([
justify-content: center;
gap: 4px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.text {
color: var(--color-main-active);
height: 22px;
......@@ -642,9 +726,11 @@ const box2Data = ref([
line-height: 22px;
letter-spacing: 0px;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ af7079a0
......@@ -39,14 +39,9 @@
</div>
<div class="box2-main">
<div class="box2-main-tag-box">
<div
class="tag"
:class="{ tagActive: activeArea === item }"
v-for="(item, index) in areaList"
:key="index"
@click="handleClickArea(item)"
>
{{ item }}
<div class="tag" :class="{ tagActive: activeArea === item }" v-for="(item, index) in areaList" :key="index"
@click="handleClickArea(item.status)">
{{ item.industryName }}
</div>
</div>
<div class="box2-content" id="box2Chart"></div>
......@@ -82,11 +77,14 @@
{{ item.id }}
</div>
<div class="center">
<div class="title">{{ item.title }}</div>
<div class="desc">{{ item.desc }}</div>
<div class="title">{{ item.content }}</div>
<div class="desc">{{ item.econtent }}</div>
</div>
<div class="right">
<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">
<div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
{{ val.name }}
</div>
<div class="tag" v-for="(val, idx) in item.serialNum" :key="idx">
{{ val.name }}
</div>
</div>
......@@ -97,10 +95,12 @@
</div>
<div class="box3-main-footer">
<div class="info">
{{ `共105项调查` }}
共{{ total }}项调查
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -126,53 +126,116 @@
import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart";
import {
getThinkTankReportAbstract,
getThinkTankReportContent,
getThinkTankReportIndustry,
getThinkTankReportIndustryCloud
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
// 内容摘要
const box1Data =
ref(`包括经济竞争在内的美中竞争自2017年以来一直在定义美国外交政策。这两个经济体是世界上第一和第二大国家经济体,并且深深交织在一起。改变关系,无论多么必要,可能是昂贵的。因此,美国面临着一项挑战,确保其经济在耦合的战略竞争条件下满足国家的需求。
为了应对这一挑战,兰德大学的研究人员对美中竞争进行了经济和制度分析,进行了参与式的远见练习,以了解确保美国经济健康的长期路径,并创建了两个经济竞争游戏,探索多个国家在相互交流的同时确保经济健康的动态...`);
//获取内容摘要
const handleGetThinkTankReportAbstract = async () => {
try {
const res = await getThinkTankReportAbstract(router.currentRoute._value.params.id);
console.log("内容摘要", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data
}
} catch (error) {
console.error("获取内容摘要error", error);
}
};
// 涉及科技领域
const areaList = ref(["人工智能", "半导体与高科技", "经济与贸易", "地缘政治", "军事与安全", "国际规则与多边体系"]);
const activeArea = ref("人工智能");
const areaList = ref([]);
const activeArea = ref(6);
const handleClickArea = area => {
activeArea.value = area;
handleGetThinkTankReportIndustryCloud()
};
const box2Data = ref([
{
name: "通用人工智能",
value: 100
},
{
name: "AI芯片",
value: 66
},
{
name: "计算能力又是",
value: 72
},
{
name: "基准测试",
value: 88
},
{
name: "出口管制",
value: 78
},
{
name: "军事AI",
value: 85
},
{
name: "生态系统",
value: 88
},
{
name: "模型能力",
value: 89
}
// {
// name: "通用人工智能",
// value: 100
// },
// {
// name: "AI芯片",
// value: 66
// },
// {
// name: "计算能力又是",
// value: 72
// },
// {
// name: "基准测试",
// value: 88
// },
// {
// name: "出口管制",
// value: 78
// },
// {
// name: "军事AI",
// value: 85
// },
// {
// name: "生态系统",
// value: 88
// },
// {
// name: "模型能力",
// value: 89
// }
]);
//获取科技领域词云
const handleGetThinkTankReportIndustryCloud = async () => {
try {
const params = {
id: router.currentRoute._value.params.id,
industryId: activeArea.value
}
const res = await getThinkTankReportIndustryCloud(params);
console.log("科技领域词云", res);
if (res.code === 200 && res.data) {
const data = []
res.data.map(item => {
data.push(
{
name: item.clause,
value: item.count
})
box2Data.value = data
const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart");
})
}
} catch (error) {
console.error("获取科技领域词云error", error);
}
};
//涉及科技领域
const handleGetThinkTankReportIndustry = async () => {
try {
const res = await getThinkTankReportIndustry(router.currentRoute._value.params.id);
console.log("涉及科技领域", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
}
} catch (error) {
console.error("获取涉及科技领域error", error);
}
};
// 主要观点
const majorOpinions = ref([
{
......@@ -314,10 +377,31 @@ const majorOpinions = ref([
]
}
]);
// 处理页码改变事件
const currentPage = ref(1)
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
};
//获取报告主要观点
const handleGetThinkTankReportContent = async () => {
try {
const res = await getThinkTankReportContent(router.currentRoute._value.params.id);
console.log("主要观点", res);
if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content
}
} catch (error) {
console.error("获取主要观点error", error);
}
};
onMounted(() => {
const box2Chart = getWordCloudChart(box2Data.value);
setChart(box2Chart, "box2Chart");
handleGetThinkTankReportAbstract()
handleGetThinkTankReportContent()
handleGetThinkTankReportIndustry()
handleGetThinkTankReportIndustryCloud()
});
</script>
......@@ -326,11 +410,13 @@ onMounted(() => {
display: flex;
justify-content: center;
gap: 16px;
.box-header {
width: 100%;
height: 50px;
display: flex;
position: relative;
.header-left {
margin-top: 18px;
width: 8px;
......@@ -338,6 +424,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 14px;
......@@ -348,6 +435,7 @@ onMounted(() => {
font-size: 20px;
font-weight: 700;
}
.header-btn-box {
position: absolute;
top: 15px;
......@@ -355,6 +443,7 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
......@@ -368,11 +457,13 @@ onMounted(() => {
font-weight: 400;
line-height: 28px;
}
.btnActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
}
.header-right {
position: absolute;
top: 14px;
......@@ -380,9 +471,11 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -390,6 +483,7 @@ onMounted(() => {
}
}
}
.left {
.box1 {
margin-top: 17px;
......@@ -399,10 +493,12 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box1-main {
margin: 5px auto;
width: 428px;
height: 282px;
/* 9行 * 30px/行 = 270px，这里可以稍微调整 */
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
......@@ -410,7 +506,16 @@ onMounted(() => {
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
display: -webkit-box;
/* 使用Webkit的弹性盒模型 */
-webkit-box-orient: vertical;
/* 垂直排列 */
-webkit-line-clamp: 9;
/* 限制显示9行 */
overflow: hidden;
/* 隐藏超出部分 */
}
.box1-footer {
margin: 0 auto;
width: 108px;
......@@ -420,9 +525,11 @@ onMounted(() => {
justify-content: center;
gap: 4px;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.text {
height: 22px;
color: var(--color-main-active);
......@@ -433,9 +540,11 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
......@@ -443,6 +552,7 @@ onMounted(() => {
}
}
}
.box2 {
margin-top: 16px;
width: 480px;
......@@ -451,10 +561,12 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box2-main {
width: 430px;
height: 320px;
margin: 0 auto;
.box2-main-tag-box {
display: flex;
flex-wrap: wrap;
......@@ -462,6 +574,7 @@ onMounted(() => {
box-sizing: border-box;
padding: 8px 0;
gap: 8px;
.tag {
height: 28px;
line-height: 28px;
......@@ -472,12 +585,14 @@ onMounted(() => {
background: rgba(255, 255, 255, 1);
cursor: pointer;
}
.tagActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
background: rgba(231, 243, 255, 1);
}
}
.box2-content {
width: 430px;
height: 231px;
......@@ -489,8 +604,10 @@ onMounted(() => {
}
}
}
.right {
margin-top: 17px;
.box3 {
width: 1103px;
height: 946px;
......@@ -499,13 +616,16 @@ onMounted(() => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box3-main {
width: 1057px;
height: 800px;
margin: 0 auto;
.box3-main-main {
height: 720px;
overflow: hidden;
.box3-item {
width: 1057px;
height: 72px;
......@@ -513,6 +633,7 @@ onMounted(() => {
border-radius: 4px;
display: flex;
position: relative;
.left {
margin-top: 24px;
margin-left: 15px;
......@@ -528,12 +649,14 @@ onMounted(() => {
font-weight: 400;
letter-spacing: 0px;
}
.center {
width: 770px;
margin-left: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.title {
margin-top: 12px;
height: 26px;
......@@ -545,6 +668,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.desc {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -556,6 +680,7 @@ onMounted(() => {
text-align: left;
}
}
.right {
margin-top: 26px;
width: 180px;
......@@ -563,6 +688,7 @@ onMounted(() => {
display: flex;
gap: 8px;
justify-content: flex-end;
.tag {
height: 22px;
padding: 0 8px;
......@@ -577,29 +703,34 @@ onMounted(() => {
line-height: 20px;
}
}
.more {
width: 16px;
height: 16px;
position: absolute;
top: 28px;
right: 20px;
img {
width: 100%;
height: 100%;
}
}
}
.box3-item:nth-child(2n-1) {
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
background: rgba(247, 248, 249, 1);
}
}
.box3-main-footer {
height: 80px;
display: flex;
justify-content: space-between;
padding: 30px 5px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......@@ -611,6 +742,7 @@ onMounted(() => {
}
}
}
.box3-footer {
position: absolute;
left: 22px;
......@@ -625,14 +757,17 @@ onMounted(() => {
align-items: center;
justify-content: center;
gap: 13px;
.footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
width: 964px;
height: 48px;
......@@ -644,9 +779,11 @@ onMounted(() => {
letter-spacing: 0px;
text-align: justify;
}
.footer-right {
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
......
src/views/thinkTank/ThinkTankDetail/PolicyTracking/index.vue
浏览文件 @ af7079a0
......@@ -12,7 +12,8 @@
<div class="box-main">
<div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box1YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustry()" />
</el-select>
</div>
<div id="box1Chart"></div>
......@@ -29,22 +30,18 @@
<div class="box-main">
<div class="select-box">
<el-select v-model="box2SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in box2YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustryTotal()" />
</el-select>
</div>
<div id="box2Chart">
<div class="box2-item" v-for="(item, index) in box2Data" :key="index">
<div class="icon" :style="{ background: item.color }"></div>
<div class="name">{{ item.name }}</div>
<el-progress
:show-text="false"
:color="item.color"
style="width: 220px"
stroke-width="8"
:percentage="item.per"
/>
<div class="num">{{ item.value + "项" }} / {{ item.total + "项" }}</div>
<div class="per">{{ item.per + "%" }}</div>
<div class="name">{{ item.industry }}</div>
<el-progress :show-text="false" :color="box2ColorList[index]" style="width: 220px" stroke-width="8"
:percentage="item.percent" />
<div class="num">{{ item.amount + "项" }} / {{ item.totalAmount + "项" }}</div>
<div class="per">{{ item.percent + "%" }}</div>
</div>
<div class="box2-item">
<el-progress :percentage="50" />
......@@ -63,7 +60,8 @@
<div class="box-main">
<div class="select-box">
<el-select v-model="box3SelectYear" placeholder="选择时间" style="width: 100px">
<el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value" />
<el-option v-for="item in box3YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleGetThinkPolicyIndustryChange()" />
</el-select>
</div>
<div id="box3Chart"></div>
......@@ -79,9 +77,13 @@
</div>
</div>
<div class="select-box">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px" @click="handleGetThinkPolicy()">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px">
<el-option @click="handleGetThinkPolicy()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkPolicy()" :key="false" label="倒序" :value="false" />
</el-select>
</div>
</div>
<div class="bottom-main">
......@@ -93,14 +95,13 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="(item, index) in areaList"
:key="index"
v-model="selectedAreaList"
:label="item"
class="filter-checkbox"
>
<!-- <el-checkbox v-for="(item, index) in areaList" :key="index" v-model="selectedAreaList" :label="item"
class="filter-checkbox">
{{ item }}
</el-checkbox> -->
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleGetThinkPolicy()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
</div>
</div>
......@@ -110,20 +111,27 @@
<div class="right-main">
<div class="right-main-item" v-for="(item, index) in policyList" :key="index">
<div class="item-left">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="item-right">
<div class="title">{{ item.title }}</div>
<div class="info">{{ item.time }} · {{ item.desc }}</div>
<div class="title">{{ item.name }}</div>
<div class="info">{{ item.times }} · {{ item.content }}</div>
<div class="tag-box">
<div class="tag" v-for="(tag, idx) in item.tagList" :key="idx">
{{ tag }}
</div>
</div>
<div class="file-box">
<div class="file" v-for="(file, idxx) in item.fileList" :key="idxx">
<div class="type">{{ file.type }}</div>
<div class="title">{{ file.title }}</div>
<div class="file" v-for="(file, idxx) in item.relationBillsList" :key="idxx">
<div class="type">法案</div>
<div class="title">{{ file.billName }}</div>
<div class="more">
<img src="./images/arrow-right.png" alt="" />
</div>
</div>
<div class="file" v-for="(file, idxx) in item.relationAdList" :key="idxx">
<div class="type">政令</div>
<div class="title">{{ file.adName }}</div>
<div class="more">
<img src="./images/arrow-right.png" alt="" />
</div>
......@@ -134,10 +142,12 @@
</div>
<div class="right-footer">
<div class="info">
{{ `共105项调查` }}
共{{ total }}项调查
</div>
<div class="page-box">
<el-pagination :page-size="10" background layout="prev, pager, next" :total="120" />
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -151,49 +161,59 @@ import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getMultiLineChart from "./utils/multiLineChart";
import {
getThinkPolicyIndustry,
getThinkPolicyIndustryTotal,
getThinkPolicyIndustryChange,
getHylyList,
getThinkPolicy
} from "@/api/thinkTank/overview";
import Img1 from "./images/img1.png";
import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png";
import { useRouter } from "vue-router";
const router = useRouter();
// import Img1 from "./images/img1.png";
// import Img2 from "./images/img2.png";
// import Img3 from "./images/img3.png";
// import Img4 from "./images/img4.png";
// 提出建议领域分布
const box1Data = ref([
{
name: "半导体",
value: 50,
color: "#4096FF"
},
{
name: "电子设备",
value: 46,
color: "#FFA39E"
},
{
name: "显示技术",
value: 40,
color: "#ADC6FF"
},
{
name: "新能源",
value: 32,
color: "#FFC069"
},
{
name: "通信设备",
value: 31,
color: "#B5F5EC"
},
{
name: "汽车",
value: 30,
color: "#B37FEB"
},
{
name: "其他",
value: 24,
color: "#D6E4FF"
}
// {
// name: "半导体",
// value: 50,
// color: "#4096FF"
// },
// {
// name: "电子设备",
// value: 46,
// color: "#FFA39E"
// },
// {
// name: "显示技术",
// value: 40,
// color: "#ADC6FF"
// },
// {
// name: "新能源",
// value: 32,
// color: "#FFC069"
// },
// {
// name: "通信设备",
// value: 31,
// color: "#B5F5EC"
// },
// {
// name: "汽车",
// value: 30,
// color: "#B37FEB"
// },
// {
// name: "其他",
// value: 24,
// color: "#D6E4FF"
// }
]);
const box1SelectYear = ref("2025");
......@@ -212,52 +232,78 @@ const box1YearList = ref([
}
]);
const handleGetThinkPolicyIndustry = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box1SelectYear.value
}
const res = await getThinkPolicyIndustry(parmas);
console.log("提出建议领域分布", res);
if (res.code === 200 && res.data) {
let data = []
res.data.map(item => {
data.push({
name: item.industry,
value: item.amount,
percent: item.percent
})
})
box1Data.value = data
const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart");
}
} catch (error) {
console.error("获取提出建议领域分布error", error);
}
};
// 相关政策领域分布
const box2Data = ref([
{
name: "集成电路",
value: 2,
total: 10,
per: 20,
color: "#CE4F51"
},
{
name: "人工智能",
value: 1,
total: 6,
per: 17,
color: "#055FC2"
},
{
name: "通信网络",
value: 2,
total: 7,
per: 26,
color: "#13A8A8"
},
{
name: "量子科技",
value: 1,
total: 2,
per: 50,
color: "#722ED1"
},
{
name: "生物科技",
value: 3,
total: 7,
per: 43,
color: "#FA8C16"
},
{
name: "能源",
value: 11,
total: 20,
per: 55,
color: "#69B1FF"
}
// {
// name: "集成电路",
// value: 2,
// total: 10,
// per: 20,
// color: "#CE4F51"
// },
// {
// name: "人工智能",
// value: 1,
// total: 6,
// per: 17,
// color: "#055FC2"
// },
// {
// name: "通信网络",
// value: 2,
// total: 7,
// per: 26,
// color: "#13A8A8"
// },
// {
// name: "量子科技",
// value: 1,
// total: 2,
// per: 50,
// color: "#722ED1"
// },
// {
// name: "生物科技",
// value: 3,
// total: 7,
// per: 43,
// color: "#FA8C16"
// },
// {
// name: "能源",
// value: 11,
// total: 20,
// per: 55,
// color: "#69B1FF"
// }
]);
const box2ColorList = ref(["#CE4F51", "#055FC2", "#13A8A8", "#722ED1", "#FA8C16", "#69B1FF"])
const box2SelectYear = ref("2025");
const box2YearList = ref([
{
......@@ -274,26 +320,38 @@ const box2YearList = ref([
}
]);
const handleGetThinkPolicyIndustryTotal = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box2SelectYear.value
}
const res = await getThinkPolicyIndustryTotal(parmas);
console.log("相关政策领域分布", res);
if (res.code === 200 && res.data) {
box2Data.value = res.data
}
} catch (error) {
console.error("获取相关政策领域分布error", error);
}
};
// 热门研究方向变化趋势
const box3Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "人工智能",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
},
{
name: "集成电路",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
},
{
name: "量子科技",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
}
]
// title: ["2024-Q1", "2024-Q2", "2024-Q3", "2024-Q4"],
// data: [
// {
// name: "新能源",
// value: [1,3,4,6]
// },
// {
// name: "人工智能",
// value: [1,3,4,2]
// },
// ...
// ]
});
const box3SelectYear = ref("2025");
const box3SelectYear = ref("2024");
const box3YearList = ref([
{
label: "2025",
......@@ -309,201 +367,306 @@ const box3YearList = ref([
}
]);
const handleGetThinkPolicyIndustryChange = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
year: box3SelectYear.value
}
const res = await getThinkPolicyIndustryChange(parmas);
console.log("热门研究方向变化趋势", res);
if (res.code === 200 && res.data) {
// 提取所有季度信息
const quarters = res.data.map(item => item.yearQuarter);
quarters.sort(); // 按时间排序
// 提取所有行业名称
const industries = new Set();
res.data.forEach(item => {
item.industryList.forEach(industry => {
industries.add(industry.industry);
});
});
// 构建前端数据结构
const frontendData = {
title: quarters,
data: []
};
industries.forEach(industry => {
const industryData = {
name: industry,
value: quarters.map(quarter => {
const quarterData = res.data.find(q => q.yearQuarter === quarter);
const industryAmount = quarterData?.industryList.find(i => i.industry === industry)?.amount || 0;
return industryAmount;
})
};
frontendData.data.push(industryData);
});
box3Data.value = frontendData
let box3Chart = getMultiLineChart(
box3Data.value.title,
box3Data.value.data[0].value,
box3Data.value.data[1].value,
box3Data.value.data[2].value
);
setChart(box3Chart, "box3Chart");
}
} catch (error) {
console.error("获取热门研究方向变化趋势error", error);
}
};
// 搜索政策建议
const searchPolicy = ref("");
const yearList = ref([
{
label: "近一年发布",
value: "近一年发布"
value: 1
},
{
label: "近两年发布",
value: "近两年发布"
value: 2
},
{
label: "近三年发布",
value: "近三年发布"
value: 3
}
]);
const selectedYear = ref("近一年发布");
const selectedYear = ref(1);
// 科技领域
const areaList = ref(["人工智能", "半导体/芯片", "能源与气候", "国际关系", "经济政策", "国防与安全"]);
const selectedAreaList = ref(["人工智能", "半导体/芯片"]);
const areaList = ref([]);
const selectedAreaList = ref(null);
//获取科技领域
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) {
areaList.value = res.data
}
} catch (error) {
console.error("获取研究类型error", error);
}
};
const policyList = ref([
{
img: Img1,
title: "创建并定制针对人工智能技术的验证、确认与评估技术。",
time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《芯片科学法案》"
},
{
type: "法案",
title: "2024《芯片科学法案》"
}
]
},
{
img: Img1,
title: "为运用人工智能的新作战概念建立开发、测试与评估流程。",
time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《芯片科学法案》"
},
{
type: "法案",
title: "2024《芯片科学法案》"
}
]
},
{
img: Img1,
title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标",
time: "2025年6月26日",
desc: "保持美国在人工智能与机器学习领域的优势",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《芯片科学法案》"
},
{
type: "政令",
title: "2025《关于优化美军作战决策结构的建议》"
}
]
},
{
img: Img2,
title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。",
time: "2025年3月15日",
desc: " 美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《维吾尔强迫劳动预防法》"
}
]
},
{
img: Img2,
title: "与利益相关者共同收集证据，为关于贸易执法的公共讨论提供信息。",
time: "2025年3月15日",
desc: "美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《维吾尔强迫劳动预防法》"
}
]
},
{
img: Img2,
title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
time: "2025年6月26日",
desc: "美国贸易执法是否发挥了作用，能否做得更多？",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《重塑美国人口结构法案》"
},
{
type: "法案",
title: "2024《重塑美国人口结构法案》"
}
]
},
{
img: Img2,
title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。",
time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《重塑美国人口结构法案》"
},
{
type: "法案",
title: "2025《开放人才法案》"
}
]
},
{
img: Img3,
title: "增加中国公民可获得的 H-1B 签证数量。",
time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《重塑美国人口结构法案》"
},
{
type: "法案",
title: "2025《GENIUS法案》"
}
]
},
{
img: Img3,
title: "通过就业偏好类别增加绿卡的数量。",
time: "2025年6月26日",
desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《重塑美国人口结构法案》"
},
{
type: "法案",
title: "2025《开放人才法案》"
}
]
},
{
img: Img4,
title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
time: "2025年6月26日",
desc: "美国传统能源产业的未来：是走向终结还是持续发展？",
tagList: ["人工智能", "集成电路"],
fileList: [
{
type: "法案",
title: "2024《能源法案》"
}
]
}
// {
// img: Img1,
// title: "创建并定制针对人工智能技术的验证、确认与评估技术。",
// time: "2025年6月26日",
// desc: "保持美国在人工智能与机器学习领域的优势",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《芯片科学法案》"
// },
// {
// type: "法案",
// title: "2024《芯片科学法案》"
// }
// ]
// },
// {
// img: Img1,
// title: "为运用人工智能的新作战概念建立开发、测试与评估流程。",
// time: "2025年6月26日",
// desc: "保持美国在人工智能与机器学习领域的优势",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《芯片科学法案》"
// },
// {
// type: "法案",
// title: "2024《芯片科学法案》"
// }
// ]
// },
// {
// img: Img1,
// title: "通过制定和维护一个前瞻性的人工智能发展路线图来管理预期，该路线图应阐明国防部在近期（一至两年）、中期（三至五年）和远期（六至十年）部署人工智能的现实目标",
// time: "2025年6月26日",
// desc: "保持美国在人工智能与机器学习领域的优势",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《芯片科学法案》"
// },
// {
// type: "政令",
// title: "2025《关于优化美军作战决策结构的建议》"
// }
// ]
// },
// {
// img: Img2,
// title: "考虑采取更全面的方法来打击全球供应链中强迫劳动使用的选项。",
// time: "2025年3月15日",
// desc: " 美国贸易执法是否发挥了作用，能否做得更多？",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《维吾尔强迫劳动预防法》"
// }
// ]
// },
// {
// img: Img2,
// title: "与利益相关者共同收集证据，为关于贸易执法的公共讨论提供信息。",
// time: "2025年3月15日",
// desc: "美国贸易执法是否发挥了作用，能否做得更多？",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《维吾尔强迫劳动预防法》"
// }
// ]
// },
// {
// img: Img2,
// title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
// time: "2025年6月26日",
// desc: "美国贸易执法是否发挥了作用，能否做得更多？",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// }
// ]
// },
// {
// img: Img2,
// title: "允许OPT的国际学生出国旅行并持多次入境签证重新进入美国。",
// time: "2025年6月26日",
// desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《开放人才法案》"
// }
// ]
// },
// {
// img: Img3,
// title: "增加中国公民可获得的 H-1B 签证数量。",
// time: "2025年6月26日",
// desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《GENIUS法案》"
// }
// ]
// },
// {
// img: Img3,
// title: "通过就业偏好类别增加绿卡的数量。",
// time: "2025年6月26日",
// desc: "中美经济竞争：复杂经济和地缘政治关系中的收益与风险",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《重塑美国人口结构法案》"
// },
// {
// type: "法案",
// title: "2025《开放人才法案》"
// }
// ]
// },
// {
// img: Img4,
// title: "推动清洁能源生产供内用，化石燃料重新配置出口。",
// time: "2025年6月26日",
// desc: "美国传统能源产业的未来：是走向终结还是持续发展？",
// tagList: ["人工智能", "集成电路"],
// fileList: [
// {
// type: "法案",
// title: "2024《能源法案》"
// }
// ]
// }
]);
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
const currentDate = new Date();
// 计算指定年数之前的日期
const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
// 格式化日期为 "YYYY-MM-DD" 的形式
const year = pastDate.getFullYear();
const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
const day = String(pastDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
const sort = ref(true)
const currentPage = ref(1)
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
};
const handleGetThinkPolicy = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value,
currentPage: currentPage.value,
pageSize: 12,
researchTypeIds: selectedAreaList.value ? selectedAreaList.value : null,
}
}
const res = await getThinkPolicy(parmas);
console.log("智库政策", res);
if (res.code === 200 && res.data) {
policyList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取智库政策error", error);
}
};
onMounted(() => {
const box1Chart = getPieChart(box1Data.value);
setChart(box1Chart, "box1Chart");
let box3Chart = getMultiLineChart(
box3Data.value.title,
box3Data.value.data[0].value,
box3Data.value.data[1].value,
box3Data.value.data[2].value
);
setChart(box3Chart, "box3Chart");
handleGetThinkPolicyIndustry()
handleGetThinkPolicyIndustryTotal()
handleGetThinkPolicyIndustryChange()
handleGetHylyList()
handleGetThinkPolicy()
});
</script>
......@@ -511,12 +674,14 @@ onMounted(() => {
.wrap {
width: 100%;
height: 100%;
.top {
height: 420px;
width: 1600px;
margin: 24px 0;
display: flex;
gap: 16px;
.box {
width: 520px;
height: 420px;
......@@ -525,22 +690,26 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box-header {
width: 520px;
height: 48px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
position: relative;
.icon {
width: 20px;
height: 20px;
margin-top: 15px;
margin-left: 22px;
img {
width: 100%;
height: 100%;
}
}
.title {
margin-top: 11px;
margin-left: 18px;
......@@ -553,6 +722,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.box-header-right {
position: absolute;
top: 12px;
......@@ -567,28 +737,34 @@ onMounted(() => {
text-align: right;
}
}
.box-main {
height: 360px;
position: relative;
overflow: hidden;
#box1Chart {
height: 360px;
}
#box2Chart {
width: 470px;
margin: 0 auto;
margin-top: 50px;
height: 300px;
.box2-item {
height: 30px;
margin-top: 20px;
display: flex;
align-items: center;
.icon {
width: 12px;
height: 12px;
border-radius: 6px;
}
.name {
width: 80px;
margin-left: 7px;
......@@ -602,6 +778,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.num {
width: 80px;
margin-left: 10px;
......@@ -613,6 +790,7 @@ onMounted(() => {
line-height: 22px;
text-align: right;
}
.per {
margin-left: 5px;
height: 22px;
......@@ -624,9 +802,11 @@ onMounted(() => {
}
}
}
#box3Chart {
height: 360px;
}
.select-box {
position: absolute;
z-index: 999;
......@@ -638,12 +818,15 @@ onMounted(() => {
}
}
}
.bottom {
width: 1600px;
.bottom-header {
height: 48px;
display: flex;
justify-content: space-between;
.search-box {
display: flex;
width: 300px;
......@@ -652,24 +835,29 @@ onMounted(() => {
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.select-box {
margin-right: 5px;
}
}
.bottom-main {
display: flex;
justify-content: space-between;
.left {
width: 300px;
height: 483px;
......@@ -678,11 +866,14 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -690,6 +881,7 @@ onMounted(() => {
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
......@@ -701,15 +893,18 @@ onMounted(() => {
text-align: left;
}
}
.select-main {
margin-left: 25px;
width: 160px;
}
.select-main1 {
width: 100px;
}
}
}
.right {
width: 1284px;
height: 1670px;
......@@ -718,27 +913,33 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.right-main {
margin: 17px auto;
width: 1209px;
height: 1540px;
.right-main-item {
height: 154px;
box-sizing: border-box;
padding-top: 8px;
border-bottom: 1px solid rgba(234, 236, 238, 1);
display: flex;
.item-left {
width: 57px;
height: 77px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.item-right {
margin-left: 15px;
.title {
// height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -749,6 +950,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.info {
margin-top: 7px;
height: 22px;
......@@ -760,10 +962,12 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.tag-box {
margin-top: 7px;
display: flex;
gap: 8px;
.tag {
height: 22px;
padding: 0 8px;
......@@ -778,10 +982,12 @@ onMounted(() => {
line-height: 20px;
}
}
.file-box {
margin-top: 7px;
display: flex;
gap: 8px;
.file {
height: 32px;
padding: 0 8px;
......@@ -791,6 +997,7 @@ onMounted(() => {
gap: 8px;
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.type {
height: 22px;
padding: 0 4px;
......@@ -802,6 +1009,7 @@ onMounted(() => {
font-weight: 400;
line-height: 22px;
}
.title {
height: 24px;
color: rgba(5, 95, 194, 1);
......@@ -810,9 +1018,11 @@ onMounted(() => {
font-weight: 400;
line-height: 24px;
}
.more {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
......@@ -823,12 +1033,14 @@ onMounted(() => {
}
}
}
.right-footer {
margin: 0 auto;
width: 1209px;
height: 96px;
display: flex;
justify-content: space-between;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
......
src/views/thinkTank/ThinkTankDetail/index.vue
浏览文件 @ af7079a0
......@@ -3,19 +3,19 @@
<div class="header">
<div class="header-top">
<div class="header-top-left">
<img src="" alt="" />
<img :src="thinkTank.imageUrl" alt="" />
</div>
<div class="header-top-center">
<div class="center-top">
<div class="name">{{ "兰德公司" }}</div>
<div class="e-name">{{ "RAND Corporation" }}</div>
<div class="name">{{ thinkTank.name }}</div>
<div class="e-name">{{ thinkTank.ename }}</div>
</div>
<div class="center-center">
{{ "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 " }}
{{ thinkTank.describe }}
</div>
<div class="center-footer">
<div class="tag">{{ "国家安全" }}</div>
<div class="tag">{{ "科技政策" }}</div>
<div class="tag" v-for="tag in thinkTank.tags">{{ tag.industryName }}</div>
</div>
</div>
<!-- <div class="header-top-right">{{ '查看智库官网' }}</div> -->
......@@ -58,19 +58,44 @@ import { ref, reactive, computed, onMounted } from "vue";
import ThinkDaynamics from "./thinkDynamics/index.vue"
import PolicyTracking from "./PolicyTracking/index.vue";
import ThinkInfo from "./thinkInfo/index.vue";
import {
getThinkTankSummary
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
const tabActiveName = ref("智库动态");
const switchTab = name => {
tabActiveName.value = name;
};
const thinkTank = ref({})
// 获取智库基本信息
const handleGetThinkTankSummary = async () => {
try {
const parmas = {
id: router.currentRoute._value.params.id
}
const res = await getThinkTankSummary(parmas);
console.log("智库信息", res);
if (res.code === 200 && res.data) {
thinkTank.value = res.data
}
} catch (error) {
console.error("获取智库列表error", error);
}
};
onMounted(async () => {
handleGetThinkTankSummary()
});
</script>
<style lang="scss" scoped>
.wrap {
width: 1920px;
height: 984px;
.header {
width: 1920px;
height: 188px;
......@@ -81,18 +106,23 @@ const switchTab = name => {
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.header-top {
margin-top: 24px;
display: flex;
.header-top-left {
width: 88px;
height: 88px;
background: purple;
}
.header-top-center {
margin-left: 22px;
.center-top {
display: flex;
.name {
height: 26px;
color: rgba(59, 65, 75, 1);
......@@ -103,6 +133,7 @@ const switchTab = name => {
letter-spacing: 0px;
text-align: left;
}
.e-name {
margin-left: 11px;
height: 26px;
......@@ -115,6 +146,7 @@ const switchTab = name => {
text-align: left;
}
}
.center-center {
margin-top: 4px;
width: 769px;
......@@ -126,10 +158,12 @@ const switchTab = name => {
line-height: 24px;
letter-spacing: 0px;
}
.center-footer {
margin-top: 9px;
display: flex;
gap: 8px;
.tag {
height: 26px;
line-height: 26px;
......@@ -148,6 +182,7 @@ const switchTab = name => {
}
}
}
.header-footer {
width: 340px;
height: 48px;
......@@ -156,8 +191,9 @@ const switchTab = name => {
left: 160px;
display: flex;
gap: 24px;
.tab {
width: 92px;
width: 94px;
height: 48px;
display: flex;
align-items: center;
......@@ -165,14 +201,17 @@ const switchTab = name => {
gap: 4px;
cursor: pointer;
border-bottom: 2px solid transparent;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -181,23 +220,28 @@ const switchTab = name => {
font-weight: 400;
line-height: 24px;
}
.textActive {
color: rgba(5, 95, 194, 1);
font-weight: 700;
}
}
.tabActive {
border-bottom: 2px solid rgba(5, 95, 194, 1);
}
}
}
.main {
margin: 0 auto;
width: 1600px;
.main-header {
height: 64px;
display: flex;
justify-content: space-between;
.search-box {
margin-top: 16px;
display: flex;
......@@ -207,25 +251,30 @@ const switchTab = name => {
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.select-box {
margin-top: 16px;
margin-right: 5px;
}
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 300px;
height: 806px;
......@@ -235,11 +284,14 @@ const switchTab = name => {
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -247,6 +299,7 @@ const switchTab = name => {
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
color: var(--color-main-active);
......@@ -258,39 +311,47 @@ const switchTab = name => {
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1284px;
height: 1248px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.footer-card {
width: 418px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.footer-card-top {
width: 384px;
height: 206px;
margin: 0 auto;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 13px;
......@@ -302,6 +363,7 @@ const switchTab = name => {
font-weight: 700;
line-height: 24px;
}
.footer-card-footer {
margin: 0 auto;
margin-top: 5px;
......@@ -317,10 +379,12 @@ const switchTab = name => {
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
......@@ -341,6 +405,7 @@ const switchTab = name => {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......
src/views/thinkTank/ThinkTankDetail/thinkDynamics/index.vue
浏览文件 @ af7079a0
......@@ -2,17 +2,25 @@
<div class="wrap">
<div class="main-header">
<div class="search-box">
<el-input placeholder="搜索智库报告" v-model="searchReport" style="width: 270px" />
<div class="icon">
<img src="./images/search-icon.png" alt="" />
<img src="./images/search-icon.png" alt="" @click="handleGetThinkDynamicsReport()" />
</div>
</div>
<div>
<div class="select-box">
<el-select v-model="selectedYear" placeholder="选择时间" style="width: 120px">
<el-option v-for="item in yearList" :key="item.value" :label="item.label" :value="item.value" />
<el-option @click="handleGetThinkDynamicsReport()" v-for="item in yearList" :key="item.value"
:label="item.label" :value="item.value" />
</el-select>
<el-select v-model="sort" placeholder="发布时间" style="width: 120px">
<el-option @click="handleGetThinkDynamicsReport()" :key="true" label="正序" :value="true" />
<el-option @click="handleGetThinkDynamicsReport()" :key="false" label="倒序" :value="false" />
</el-select>
</div>
</div>
</div>
<div class="main-content">
<div class="left">
<div class="select-box">
......@@ -22,14 +30,9 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="type in reportTypeList"
:key="type.id"
v-model="selectedReportTypeList"
:label="type.id"
class="filter-checkbox"
>
{{ type.name }}
<el-checkbox v-for="type in reportTypeList" :key="type.id" v-model="selectedReportTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.typeName }}
</el-checkbox>
</div>
</div>
......@@ -41,13 +44,8 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="type in researchTypeList"
:key="type.id"
v-model="selectedResearchTypeList"
:label="type.id"
class="filter-checkbox"
>
<el-checkbox v-for="type in researchTypeList" :key="type.id" v-model="selectedResearchTypeList"
:label="type.id" class="filter-checkbox" @change="handleGetThinkDynamicsReport()">
{{ type.name }}
</el-checkbox>
</div>
......@@ -59,31 +57,33 @@
<div class="title">{{ "作者" }}</div>
</div>
<div class="input-main">
<el-input placeholder="输入作者名字" v-model="author" />
<el-input placeholder="输入作者名字" v-model="author" @input="handleGetThinkDynamicsReport()" />
</div>
</div>
</div>
<div class="right">
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index" @click="handleToReportDetail()">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index"
@click="handleToReportDetail(item.id)">
<div class="footer-card-top">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="footer-card-title">
{{ item.title }}
{{ item.name }}
</div>
<div class="footer-card-footer">
<div class="time">{{ item.time }}</div>
<div class="from">{{ item.from }}</div>
<div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="info">
{{ `共1059篇智库报告` }}
共{{ total }}篇智库报告
</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="120" />
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -93,25 +93,34 @@
<script setup>
import { ref, reactive, onMounted } from "vue";
import router from "@/router";
import Img1 from "./images/img1.png";
import Img2 from "./images/img2.png";
import Img3 from "./images/img3.png";
import Img4 from "./images/img4.png";
import Img5 from "./images/img5.png";
import Img6 from "./images/img6.png";
import Img7 from "./images/img7.png";
import Img8 from "./images/img8.png";
import Img9 from "./images/img9.png";
import Img10 from "./images/img10.png";
import Img11 from "./images/img11.png";
import Img12 from "./images/img12.png";
const handleToReportDetail = () => {
// import Img1 from "./images/img1.png";
// import Img2 from "./images/img2.png";
// import Img3 from "./images/img3.png";
// import Img4 from "./images/img4.png";
// import Img5 from "./images/img5.png";
// import Img6 from "./images/img6.png";
// import Img7 from "./images/img7.png";
// import Img8 from "./images/img8.png";
// import Img9 from "./images/img9.png";
// import Img10 from "./images/img10.png";
// import Img11 from "./images/img11.png";
// import Img12 from "./images/img12.png";
//getThinkDynamicsReport
import {
getThinkDynamicsReportType,
getHylyList,
getThinkDynamicsReport
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
const searchReport = ref('')
const handleToReportDetail = (id) => {
const route = router.resolve({
name: 'ReportDetail',
params: {
id: 1
id: id
}
});
window.open(route.href, "_blank");
......@@ -135,7 +144,7 @@ const reportTypeList = ref([
name: '期刊文章',
},
])
const selectedReportTypeList = ref(['研究报告'])
const selectedReportTypeList = ref([])
const researchTypeList = ref([
{
......@@ -155,108 +164,195 @@ const researchTypeList = ref([
name: '期刊文章',
},
])
const selectedResearchTypeList = ref(['研究报告'])
const selectedResearchTypeList = ref([])
const author = ref('') // 作者
const curFooterList = ref([
{
title: "中国对AI的转型产业政策",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img1
},
{
title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img2
},
{
title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img3
},
{
title: "中国对AI的转型产业政策",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img4
},
{
title: "中美经济竞争：复杂经济和地缘政治关系中的...",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img5
},
{
title: "中国、智慧城市和中东：留给地区和美国的选择",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img6
},
{
title: "中国对AI的转型产业政策",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img7
},
{
title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日",
from: "",
img: Img8
},
{
title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img9
},
{
title: "中国对AI的转型产业政策",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img10
},
{
title: "中美对抗、竞争和合作跨越人工智能通用领域...",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img11
},
{
title: "中国、智慧城市和中东：地区和美国的选择",
time: "2025年6月26日",
from: "兰德科技智库",
img: Img12
}
// {
// title: "中国对AI的转型产业政策",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img1
// },
// {
// title: "中美对抗、竞争和合作跨越人工智能通用领域...",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img2
// },
// {
// title: "中国、智慧城市和中东：地区和美国的选择",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img3
// },
// {
// title: "中国对AI的转型产业政策",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img4
// },
// {
// title: "中美经济竞争：复杂经济和地缘政治关系中的...",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img5
// },
// {
// title: "中国、智慧城市和中东：留给地区和美国的选择",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img6
// },
// {
// title: "中国对AI的转型产业政策",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img7
// },
// {
// title: "中美对抗、竞争和合作跨越人工智能通用领域...",
// time: "2025年6月26日",
// from: "",
// img: Img8
// },
// {
// title: "中国、智慧城市和中东：地区和美国的选择",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img9
// },
// {
// title: "中国对AI的转型产业政策",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img10
// },
// {
// title: "中美对抗、竞争和合作跨越人工智能通用领域...",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img11
// },
// {
// title: "中国、智慧城市和中东：地区和美国的选择",
// time: "2025年6月26日",
// from: "兰德科技智库",
// img: Img12
// }
]);
const yearList = ref([
{
label: "近一年发布",
value: "近一年发布"
value: 1
},
{
label: "近两年发布",
value: "近两年发布"
value: 2
},
{
label: "近三年发布",
value: "近三年发布"
value: 3
}
]);
const selectedYear = ref("近一年发布");
const selectedYear = ref(1);
const sort = ref(true)
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
const currentDate = new Date();
// 计算指定年数之前的日期
const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
// 格式化日期为 "YYYY-MM-DD" 的形式
const year = pastDate.getFullYear();
const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
const day = String(pastDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
//获取智库研究类型
const handleGetThinkDynamicsReportType = async () => {
try {
const res = await getThinkDynamicsReportType();
console.log("智库研究类型信息", res);
if (res.code === 200 && res.data) {
reportTypeList.value = res.data
}
} catch (error) {
console.error("获取研究类型error", error);
}
};
//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域字典", res);
if (res.code === 200 && res.data) {
researchTypeList.value = res.data;
}
} catch (error) {
console.error("获取行业领域字典error", error);
}
};
const currentPage = ref(1);
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetThinkDynamicsReport()
};
// 获取智库动态报告
const handleGetThinkDynamicsReport = async () => {
console.log(selectedReportTypeList.value, 'selectedReportTypeList.value')
console.log(selectedResearchTypeList.value, 'selectedResearchTypeList.value')
try {
const parmas = {
id: router.currentRoute._value.params.id,
startDate: getDateYearsAgo(selectedYear.value),
parmas: {
sortFun: sort.value,
authorName: author.value ? author.value : null,
currentPage: currentPage.value,
pageSize: 12,
reportTypeIds: selectedReportTypeList.value ? selectedReportTypeList.value : null,
researchTypeIds: selectedResearchTypeList.value ? selectedResearchTypeList.value : null
}
}
const res = await getThinkDynamicsReport(parmas);
console.log("智库动态报告", res);
if (res.code === 200 && res.data) {
curFooterList.value = res.data.content
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取智库动态报告error", error);
}
};
const total = ref(0)
onMounted(async () => {
handleGetThinkDynamicsReportType()
handleGetHylyList()
handleGetThinkDynamicsReport()
});
</script>
<style lang="scss" scoped>
.main-header {
height: 64px;
width: 1600px;
display: flex;
justify-content: space-between;
.search-box {
margin-top: 16px;
display: flex;
......@@ -266,39 +362,48 @@ const selectedYear = ref("近一年发布");
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
.icon {
width: 16px;
height: 16px;
margin: 8px 7px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
.select-box {
margin-top: 16px;
margin-right: 5px;
}
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 300px;
height: 520px;
height: 100%;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.select-box-header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -306,6 +411,7 @@ const selectedYear = ref("近一年发布");
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 26px;
color: var(--color-main-active);
......@@ -317,13 +423,16 @@ const selectedYear = ref("近一年发布");
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
.input-main{
.input-main {
margin: 10px auto;
width: 250px;
height: 34px;
......@@ -332,15 +441,18 @@ const selectedYear = ref("近一年发布");
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1284px;
height: 1248px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.footer-card {
width: 418px;
height: 300px;
......@@ -348,21 +460,26 @@ const selectedYear = ref("近一年发布");
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
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);
}
cursor: pointer;
.footer-card-top {
width: 384px;
height: 206px;
margin: 0 auto;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 13px;
......@@ -374,6 +491,7 @@ const selectedYear = ref("近一年发布");
font-weight: 700;
line-height: 24px;
}
.footer-card-footer {
margin: 0 auto;
margin-top: 5px;
......@@ -389,10 +507,12 @@ const selectedYear = ref("近一年发布");
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
......@@ -410,4 +530,85 @@ const selectedYear = ref("近一年发布");
.filter-checkbox {
width: 180px;
}
.page {
width: 1600px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 36px 0 0 0;
padding-left: 11px;
.count {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
</style>
\ No newline at end of file
src/views/thinkTank/ThinkTankDetail/thinkInfo/index.vue
浏览文件 @ af7079a0
......@@ -8,7 +8,7 @@
</div>
<div class="left-top-main">
<div class="img-box">
<img :src="basicInfo.img" alt="" />
<img :src="basicInfo.imageUrl" alt="" />
</div>
<div class="left-top-item">
<div class="item-left">{{ "国家：" }}</div>
......@@ -16,7 +16,7 @@
</div>
<div class="left-top-item">
<div class="item-left">{{ "成立时间：" }}</div>
<div class="item-right">{{ basicInfo.time }}</div>
<div class="item-right">{{ basicInfo.foundingDate }}年</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "总部位置：" }}</div>
......@@ -24,15 +24,15 @@
</div>
<div class="left-top-item">
<div class="item-left">{{ "机构性质：" }}</div>
<div class="item-right">{{ basicInfo.type }}</div>
<div class="item-right">{{ basicInfo.nature }}</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "员工数量：" }}</div>
<div class="item-right">{{ basicInfo.num }}</div>
<div class="item-right">约 {{ basicInfo.memnum }}名员工</div>
</div>
<div class="left-top-item">
<div class="item-left">{{ "年度预算：" }}</div>
<div class="item-right">{{ basicInfo.money }}</div>
<div class="item-right">约{{ basicInfo.budget }}亿美元</div>
</div>
</div>
</div>
......@@ -42,11 +42,11 @@
<div class="title">{{ "全球分支机构" }}</div>
</div>
<div class="left-bottom-main">
<div class="left-bottom-item">
<div class="item-left">{{ "北美:" }}</div>
<div class="item-right">{{ worldInfo.position1 }}</div>
<div class="left-bottom-item" v-for="item in worldInfo">
<div class="item-left">{{ item.area }}:</div>
<div class="item-right">{{ item.city }}</div>
</div>
<div class="left-bottom-item">
<!-- <div class="left-bottom-item">
<div class="item-left">{{ "欧洲:" }}</div>
<div class="item-right">{{ worldInfo.position2 }}</div>
</div>
......@@ -57,7 +57,7 @@
<div class="left-bottom-item">
<div class="item-left">{{ "澳大利亚:" }}</div>
<div class="item-right">{{ worldInfo.position4 }}</div>
</div>
</div> -->
</div>
</div>
</div>
......@@ -82,15 +82,15 @@
<div class="box1-main-left">
<div class="card1">
<div class="card-title">{{ "总计" }}</div>
<div class="card-num">{{ box1LeftData.total }}</div>
<div class="card-num">{{ box1LeftData.totalJe / 100000000 }}亿美元</div>
</div>
<div class="card2">
<div class="card-title">{{ "政府部门" }}</div>
<div class="card-num">{{ box1LeftData.gov }}</div>
<div class="card-num">{{ box1LeftData.zfJe }}亿美元</div>
</div>
<div class="card3">
<div class="card-title">{{ "其他机构" }}</div>
<div class="card-num">{{ box1LeftData.other }}</div>
<div class="card-num">{{ box1LeftData.otherJe }}亿美元</div>
</div>
</div>
<div class="box1-main-right" id="box1Chart"></div>
......@@ -120,12 +120,8 @@
<img src="@/assets/images/icon/card-btn-right.png" alt="" />
</div>
<div class="box2-line-box"></div>
<div
class="box2-item"
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="box2-item" :class="{ box2ItemFooter: index % 2 }" v-for="(item, index) in timeLineList"
:key="index">
<div class="point" :class="{ pointFooter: index % 2 }">
<img src="./images/point.png" alt="" />
</div>
......@@ -133,7 +129,7 @@
<div class="title">{{ item.time }}</div>
</div>
<div class="box2-item-content">
{{ item.content }}
{{ item.describe }}
</div>
</div>
</div>
......@@ -159,14 +155,14 @@
<div class="box3-main-right">
<div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index">
<div class="icon">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="info">
<div class="info-header">
<div class="name">{{ item.name }}</div>
<div class="position">{{ item.postion }}</div>
<div class="position">{{ item.positionTitle }}</div>
</div>
<div class="info-footer">{{ item.desc }}</div>
<div class="info-footer">{{ item.describe }}</div>
</div>
</div>
</div>
......@@ -181,7 +177,18 @@ import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart";
import getTreeMapChart from "./utils/treeMapChart";
import {
getThinkTankInfoBasic,
getThinkTankInfoBranch,
getThinkTankFundsTotal,
getThinkTankFundsSource,
getThinkTankResearchAreae,
getThinkTankPerson
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
import InfoImg from "./images/img.png";
import Icon1 from "./images/icon1.png";
import Icon2 from "./images/icon2.png";
......@@ -191,14 +198,29 @@ import Icon5 from "./images/icon5.png";
// 基本信息
const basicInfo = ref({
img: InfoImg,
country: "美国",
time: "1948年",
position: "美国加利福尼亚州圣莫尼卡 ",
type: "非营利性研究与分析机构 ",
num: "约1,700名员工 ",
money: "约3.5亿美元 "
// img: InfoImg,
// country: "美国",
// time: "1948年",
// position: "美国加利福尼亚州圣莫尼卡 ",
// type: "非营利性研究与分析机构 ",
// num: "约1,700名员工 ",
// money: "约3.5亿美元 "
});
// getThinkTankInfoBasic
const handleGetThinkTankInfoBasic = async () => {
try {
const res = await getThinkTankInfoBasic(router.currentRoute._value.params.id);
console.log("基本信息", res);
if (res.code === 200 && res.data) {
basicInfo.value = res.data
}
} catch (error) {
console.error("获取基本信息error", error);
}
};
// 全球分支机构
const worldInfo = ref({
position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
......@@ -207,6 +229,41 @@ const worldInfo = ref({
position4: "堪培拉 "
});
// 全球分支机构
const handleGetThinkTankInfoBranch = async () => {
try {
const res = await getThinkTankInfoBranch(router.currentRoute._value.params.id);
console.log("全球分支机构", res);
if (res.code === 200 && res.data) {
// 创建一个对象来存储分组后的数据
const groupedData = {};
// 遍历数据，按 area 分组
res.data.forEach(item => {
if (!groupedData[item.area]) {
groupedData[item.area] = {
area: item.area,
city: []
};
}
groupedData[item.area].city.push(item.city);
});
// 将每个分组中的 city 转换为逗号分隔的字符串
const result = Object.values(groupedData).map(group => ({
area: group.area,
city: group.city.join(", ")
}));
worldInfo.value = result
}
} catch (error) {
console.error("获取全球分支机构error", error);
}
};
// 经费来源
const box1LeftData = ref({
total: "4.358亿美元",
......@@ -252,6 +309,41 @@ const box1ChartData = ref([
}
]);
const handleGetThinkTankFundsTotal = async () => {
try {
const res = await getThinkTankFundsTotal(router.currentRoute._value.params.id);
console.log("获取经费来源统计", res);
if (res.code === 200 && res.data) {
box1LeftData.value = res.data
}
} catch (error) {
console.error("获取经费来源统计error", error);
}
};
const handleGetThinkTankFundsSource = async () => {
try {
const res = await getThinkTankFundsSource(router.currentRoute._value.params.id);
console.log("获取经费来源", res);
if (res.code === 200 && res.data) {
let data = []
res.data.map(item => {
data.push({
name: item.institution,
value: item.amount,
})
})
box1ChartData.value = data
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
}
} catch (error) {
console.error("获取经费来源error", error);
}
};
// 研究领域演变
const timeLineList = ref([
{
......@@ -276,7 +368,18 @@ const timeLineList = ref([
}
]);
const handleGetThinkTankResearchAreae = async () => {
try {
const res = await getThinkTankResearchAreae(router.currentRoute._value.params.id);
console.log("研究领域演变", res);
if (res.code === 200 && res.data) {
timeLineList.value = res.data
}
} catch (error) {
console.error("获取研究领域演变error", error);
}
};
// 核心研究人员
const handleBox3Chart = () => {
// 将分类数据转换为树状图格式
......@@ -361,9 +464,26 @@ const box3RightData = ref([
}
]);
const handleGetThinkPerson = async () => {
try {
const res = await getThinkTankPerson(router.currentRoute._value.params.id);
console.log("核心研究人员", res);
if (res.code === 200 && res.data) {
box3RightData.value = res.data
}
} catch (error) {
console.error("获取核心研究人员error", error);
}
};
onMounted(() => {
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
handleGetThinkTankInfoBasic()
handleGetThinkTankInfoBranch()
handleGetThinkTankFundsTotal()
handleGetThinkTankFundsSource()
handleGetThinkTankResearchAreae()
handleGetThinkPerson()
handleBox3Chart();
});
......@@ -375,17 +495,20 @@ onMounted(() => {
height: 100%;
display: flex;
gap: 16px;
.left {
margin-top: 16px;
width: 480px;
height: 796px;
height: 100%;
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);
.left-box-header {
display: flex;
.icon {
margin-top: 5px;
width: 8px;
......@@ -393,6 +516,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
color: var(--color-main-active);
......@@ -404,26 +528,31 @@ onMounted(() => {
text-align: left;
}
}
.left-top {
margin-top: 14px;
height: 515px;
.img-box {
width: 437px;
height: 204px;
margin: 0 auto;
margin-top: 16px;
margin-bottom: 22px;
img {
width: 100%;
height: 100%;
}
}
.left-top-item {
display: flex;
margin-top: 12px;
width: 332px;
height: 24px;
margin-left: 34px;
.item-left {
width: 88px;
height: 24px;
......@@ -435,6 +564,7 @@ onMounted(() => {
letter-spacing: 1px;
text-align: left;
}
.item-right {
width: 240px;
height: 24px;
......@@ -448,14 +578,17 @@ onMounted(() => {
}
}
}
.left-bottom {
.left-bottom-main {
margin-top: 4px;
.left-bottom-item {
display: flex;
width: 354px;
margin-left: 34px;
margin-top: 12px;
.item-left {
width: 88px;
height: 24px;
......@@ -467,6 +600,7 @@ onMounted(() => {
letter-spacing: 1px;
text-align: left;
}
.item-right {
margin-left: 4px;
width: 240px;
......@@ -482,9 +616,11 @@ onMounted(() => {
}
}
}
.right {
width: 1104px;
height: 1245px;
.box {
width: 1104px;
height: 390px;
......@@ -494,10 +630,12 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box-header {
height: 56px;
display: flex;
position: relative;
.header-left {
margin-top: 20px;
width: 8px;
......@@ -505,6 +643,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title {
margin-left: 14px;
margin-top: 20px;
......@@ -516,6 +655,7 @@ onMounted(() => {
font-weight: 700;
line-height: 16px;
}
.header-right {
position: absolute;
top: 14px;
......@@ -523,9 +663,11 @@ onMounted(() => {
display: flex;
justify-content: flex-end;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
......@@ -533,17 +675,21 @@ onMounted(() => {
}
}
}
.box1-main {
display: flex;
.box1-main-left {
width: 156px;
margin-left: 41px;
margin-top: 26px;
.card1 {
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 244, 255, 1), rgba(230, 244, 255, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -556,6 +702,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -569,12 +716,14 @@ onMounted(() => {
text-align: left;
}
}
.card2 {
margin-top: 20px;
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(255, 241, 240, 1), rgba(255, 241, 240, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -587,6 +736,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -600,12 +750,14 @@ onMounted(() => {
text-align: left;
}
}
.card3 {
margin-top: 20px;
width: 156px;
height: 72px;
border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 255, 251, 1), rgba(230, 255, 251, 0) 100%);
.card-title {
height: 24px;
margin-top: 8px;
......@@ -618,6 +770,7 @@ onMounted(() => {
letter-spacing: 0px;
text-align: left;
}
.card-num {
margin-top: 5px;
margin-left: 19px;
......@@ -632,6 +785,7 @@ onMounted(() => {
}
}
}
.box1-main-right {
margin-left: 38px;
margin-top: 26px;
......@@ -639,11 +793,13 @@ onMounted(() => {
height: 270px;
}
}
.box2-main {
height: 320px;
display: flex;
position: relative;
padding-left: 150px;
.box2-arrow-left {
width: 24px;
height: 48px;
......@@ -651,11 +807,13 @@ onMounted(() => {
left: 0;
top: 130px;
z-index: 999;
img {
width: 100%;
height: 100%;
}
}
.box2-arrow-right {
width: 24px;
height: 48px;
......@@ -663,6 +821,7 @@ onMounted(() => {
right: 0;
top: 130px;
z-index: 999;
img {
width: 100%;
height: 100%;
......@@ -677,6 +836,7 @@ onMounted(() => {
width: 1100px;
background: url("./images/line-bg.png") repeat;
}
.box2-item {
margin-top: 4px;
width: 300px;
......@@ -686,9 +846,11 @@ onMounted(() => {
padding-left: 13px;
margin-left: -100px;
border-left: 1px solid #0a57a6;
.box2-item-header {
display: flex;
width: 240px;
.title {
color: var(--color-main-active);
height: 26px;
......@@ -697,6 +859,7 @@ onMounted(() => {
font-weight: 700;
}
}
.box2-item-content {
width: 210px;
min-height: 48px;
......@@ -711,28 +874,33 @@ onMounted(() => {
line-height: 24px;
overflow: hidden;
}
.point {
position: absolute;
left: -8px;
bottom: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.pointFooter {
position: absolute;
left: -8px;
top: -7px;
width: 15px;
height: 15px;
img {
width: 100%;
height: 100%;
}
}
.time {
height: 24px;
color: var(--color-main-active);
......@@ -748,6 +916,7 @@ onMounted(() => {
left: 0;
}
}
.box2ItemFooter {
margin-top: 154px;
margin-left: -100px;
......@@ -758,35 +927,43 @@ onMounted(() => {
.box3-main {
display: flex;
.box3-main-left {
width: 536px;
height: 326px;
margin-left: 10px;
}
.box3-main-right {
margin-left: 10px;
width: 536px;
height: 326px;
.box3-right-item {
display: flex;
width: 520px;
height: 64px;
align-items: center;
.icon {
width: 48px;
height: 48px;
margin-left: 8px;
img {
width: 100%;
height: 100%;
}
}
.info {
width: 459px;
margin-left: 13px;
.info-header {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -796,6 +973,7 @@ onMounted(() => {
line-height: 24px;
letter-spacing: 1px;
}
.position {
height: 22px;
color: var(--color-main-active);
......@@ -807,6 +985,7 @@ onMounted(() => {
text-align: right;
}
}
.info-footer {
height: 22px;
color: rgba(95, 101, 108, 1);
......@@ -816,6 +995,12 @@ onMounted(() => {
line-height: 22px;
letter-spacing: 0px;
text-align: left;
white-space: nowrap;
/* 禁止自动换行 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
}
}
}
......
src/views/thinkTank/index.vue
浏览文件 @ af7079a0
......@@ -78,17 +78,12 @@
</div>
<div class="content">{{ item.desc }}</div>
<div class="tag-box">
<div
class="tag"
:class="{
<div class="tag" :class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
}" v-for="(val, idx) in item.tagList" :key="idx">
{{ val.name }}
</div>
</div>
......@@ -112,26 +107,34 @@
<div class="title">{{ "智库发布" }}</div>
</div>
</div>
<div style="display: flex">
<img src="./assets/images/right-left-icon1.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('previous')" />
<div class="box1-main">
<div class="box1-main-left">
<img :src="box1Data.img" alt="" />
<img :src="box1Data[box1DataIndex]?.imageUrl" alt="" />
</div>
<div class="box1-main-right">
<div class="title">{{ box1Data.title }}</div>
<div class="title">{{ box1Data[box1DataIndex]?.reportName }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box1Data.tagList" :key="index">{{ item }}</div>
<div class="tag" v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList" :key="index">
{{ item }}
</div>
<div class="content">{{ box1Data.content }}</div>
</div>
<div class="content">{{ box1Data[box1DataIndex]?.summary }}</div>
<div class="box1-right-footer">
<div class="time">{{ box1Data.time }}</div>
<div class="time">{{ box1Data[box1DataIndex]?.time }}</div>
<div class="name">
<div class="logo">
<img :src="box1Data.logo" alt="" />
<img :src="box1Data[box1DataIndex]?.thinkTankImage" alt="" />
</div>
<div class="text">{{ box1Data[box1DataIndex]?.reportDate }}</div>
</div>
<div class="text">{{ box1Data.from }}</div>
</div>
</div>
</div>
<img src="./assets/images/right-left-icon2.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('next')" />
</div>
</div>
<div class="box2">
......@@ -146,14 +149,11 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}"
>
}">
{{ item.status || "一般风险" }}
</div>
<div class="item-right">
......@@ -207,20 +207,14 @@
<div class="header-title">{{ "智库人物动态" }}</div>
</div>
<div class="box4-tag-box">
<div
class="tag"
:class="{
<div class="tag" :class="{
tagActive: box4ActiveTag === tag.name,
tag1: tag.status === 1,
tag2: tag.status === 2,
tag3: tag.status === 3,
tag4: tag.status === 4,
tag5: tag.status === 5
}"
v-for="(tag, index) in box4TagList"
:key="index"
@click="handleClickBox4Tag(tag.name)"
>
}" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
{{ tag.name }}
</div>
</div>
......@@ -252,12 +246,8 @@
</div>
<div class="box5-select-box">
<el-select v-model="box5selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox5Data(item.value)" />
</el-select>
</div>
</div>
......@@ -271,12 +261,8 @@
<div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleBox6()" />
</el-select>
</div>
</div>
......@@ -305,30 +291,22 @@
</div>
<div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox8Data(item.value)" />
</el-select>
</div>
</div>
<div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div
class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ index + 1 }}
</div>
<div
class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ item.title }}
<div class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ item.clause }}
</div>
<div class="item-right">{{ `${item.report} >` }}</div>
<div class="item-right">{{ `${item.count}份报告 >` }}</div>
</div>
</div>
</div>
......@@ -339,13 +317,8 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
......@@ -359,13 +332,11 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
class="filter-checkbox"
>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleCheckedAreaChange()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
</div>
......@@ -379,13 +350,8 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="time in pubTimeList"
:key="time.id"
v-model="selectedPubTimeList"
:label="time.id"
class="filter-checkbox"
>
<el-checkbox v-for="time in pubTimeList" :key="time.id" v-model="selectedPubTimeList" :label="time.id"
class="filter-checkbox">
{{ time.name }}
</el-checkbox>
</div>
......@@ -396,23 +362,25 @@
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index">
<div class="footer-card-top">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="footer-card-title">
{{ item.title }}
{{ item.name }}
</div>
<div class="footer-card-footer">
<div class="time">{{ item.time }}</div>
<div class="from">{{ item.from }}</div>
<div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div>
</div>
</div>
</div>
<div class="right-footer">
<div class="info">
{{ `共1059篇智库报告` }}
共{{ total }}项调查
</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="120" />
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange()" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -434,7 +402,11 @@ import {
getThinkTankRiskSignal,
getThinkTankPolicyIndustryChange,
getThinkTankPolicyIndustry,
getThinkTankDonation
getThinkTankDonation,
getThinkTankHot,
getNewReport,
getHylyList,
getThinkTankReport
} from "@/api/thinkTank/overview";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -472,7 +444,9 @@ import Img12 from "./assets/images/img12.png";
import Box1Img from "./assets/images/box1-img.png";
import Box1Logo from "./assets/images/box1-logo.png";
import { setCanvasCreator } from "echarts/core";
const input = ref(""); //搜索科技人物及观点
// 智库列表
const cardList = ref([
// {
......@@ -536,16 +510,38 @@ const handleGetThinkTankList = async () => {
};
// 智库发布
const box1DataIndex = ref(0);
const box1Data = ref({
img: Box1Img,
title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
tagList: ["外交", "军事", "经济"],
content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
time: "2025年9月16日",
from: "兰德科技智库",
logo: Box1Logo
// img: Box1Img,
// title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
// tagList: ["外交", "军事", "经济"],
// content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
// time: "2025年9月16日",
// from: "兰德科技智库",
// logo: Box1Logo
});
//获取智库发布
const handleGetNewReport = async () => {
try {
const res = await getNewReport();
console.log("智库发布", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data;
}
} catch (error) {
console.error("获取智库列表error", error);
}
};
//前后切换智库发布
function changeBox1Data(type) {
console.log(type, box1DataIndex.value);
if (type === "previous") {
box1DataIndex.value === 0 ? "" : (box1DataIndex.value = box1DataIndex.value - 1);
} else {
box1DataIndex.value === box1Data.value.length - 1 ? "" : (box1DataIndex.value = box1DataIndex.value + 1);
}
}
// 风险信号
const warningList = ref([
{
......@@ -646,9 +642,9 @@ const box4TagList = ref([
}
]);
const box4ActiveTag = ref("通信网络");
const handleClickBox4Tag = (tag) => {
box4ActiveTag.value = tag
}
const handleClickBox4Tag = tag => {
box4ActiveTag.value = tag;
};
const messageList = ref([
{
......@@ -689,25 +685,42 @@ const box5Data = ref({
}
]
});
//获取当前时间x年前的日期
function getDateYearsAgo(years) {
// 获取当前日期
const currentDate = new Date();
// 计算指定年数之前的日期
const pastDate = new Date(currentDate.getFullYear() - years, currentDate.getMonth(), currentDate.getDate());
// 格式化日期为 "YYYY-MM-DD" 的形式
const year = pastDate.getFullYear();
const month = String(pastDate.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
const day = String(pastDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
const box5selectetedYear = ref("近十年");
const box5YearList = ref([
{
label: "近十年",
value: "近十年"
value: 10
},
{
label: "近五年",
value: "近五年"
value: 5
},
{
label: "近三年",
value: "近三年"
value: 3
}
]);
function changeBox5Data(value) {
handleBox5(getDateYearsAgo(value));
}
// 政策建议趋势分布
const handleGetThinkTankPolicyIndustryChange = async () => {
const handleGetThinkTankPolicyIndustryChange = async date => {
try {
const res = await getThinkTankPolicyIndustryChange();
const res = await getThinkTankPolicyIndustryChange(date);
console.log("政策建议趋势分布", res);
if (res.code === 200 && res.data) {
} else {
......@@ -717,8 +730,8 @@ const handleGetThinkTankPolicyIndustryChange = async () => {
console.error("获取政策建议趋势分布error", error);
}
};
const handleBox5 = async () => {
await handleGetThinkTankPolicyIndustryChange();
const handleBox5 = async date => {
await handleGetThinkTankPolicyIndustryChange(date);
let box5Chart = getMultiLineChart(
box5Data.value.title,
box5Data.value.data[0].value,
......@@ -789,7 +802,7 @@ const box6YearList = ref([
const handleGetThinkTankPolicyIndustry = async () => {
const params = {
apply: 1,
yaer: box6selectetedYear.value
year: box6selectetedYear.value
};
try {
const res = await getThinkTankPolicyIndustry(params);
......@@ -932,64 +945,83 @@ const handleBox7 = async () => {
// 智库研究热点
const box8Data = ref([
{
title: "人工智能领域竞争发展",
report: "11份报告"
},
{
title: "美元未来与能源出口挂钩",
report: "7份报告"
},
{
title: "量子领域国家合作",
report: "5份报告"
},
{
title: "限制中国产燃油进口",
report: "5份报告"
},
{
title: "禁止政府部门采购受控半导体或服务",
report: "4份报告"
},
{
title: "禁止向部分中国实体提供资金",
report: "3份报告"
},
{
title: "中国生产电池",
report: "2份报告"
},
{
title: "重视新兴中国技术公司威胁",
report: "2份报告"
},
{
title: "禁止卫星出口至中国",
report: "1份报告"
},
{
title: "华为设备",
report: "1份报告"
}
// {
// title: "人工智能领域竞争发展",
// report: "11份报告"
// },
// {
// title: "美元未来与能源出口挂钩",
// report: "7份报告"
// },
// {
// title: "量子领域国家合作",
// report: "5份报告"
// },
// {
// title: "限制中国产燃油进口",
// report: "5份报告"
// },
// {
// title: "禁止政府部门采购受控半导体或服务",
// report: "4份报告"
// },
// {
// title: "禁止向部分中国实体提供资金",
// report: "3份报告"
// },
// {
// title: "中国生产电池",
// report: "2份报告"
// },
// {
// title: "重视新兴中国技术公司威胁",
// report: "2份报告"
// },
// {
// title: "禁止卫星出口至中国",
// report: "1份报告"
// },
// {
// title: "华为设备",
// report: "1份报告"
// }
]);
const box8selectetedYear = ref("近一年");
const box8selectetedYear = ref(1);
const box8YearList = ref([
{
label: "近一年",
value: "近一年"
value: 1
},
{
label: "近两年",
value: "近两年"
value: 2
},
{
label: "近三年",
value: "近三年"
value: 3
}
]);
function changeBox8Data(value) {
handleGetThinkTankHot(getDateYearsAgo(value));
}
//智库研究热点
const handleGetThinkTankHot = async date => {
try {
const res = await getThinkTankHot(date);
console.log("智库研究热点", res);
if (res.code === 200 && res.data) {
box8Data.value = res.data;
} else {
box8Data.value = [];
}
} catch (error) {
console.error("获取智库研究热点error", error);
}
};
// 资源库
const categoryList = ref(["智库报告", "政策建议"]);
const activeCate = ref("智库报告");
......@@ -998,41 +1030,52 @@ const handleClickCate = cate => {
};
const areaList = ref([
{
id: "全部领域",
name: "全部领域"
},
{
id: "人工智能",
name: "人工智能"
},
{
id: "通信网络",
name: "通信网络"
},
{
id: "量子科技",
name: "量子科技"
},
{
id: "能源",
name: "能源"
},
{
id: "生物技术",
name: "生物技术"
},
// {
// id: "全部领域",
// name: "全部领域"
// },
// "通信网络",
// "量子科技",
// "能源"
]);
{
id: "新材料",
name: "新材料"
},
{
id: "海洋",
name: "海洋"
//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域字典", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
}
]);
const selectedAreaList = ref(["全部领域"]);
} catch (error) {
console.error("获取行业领域字典error", error);
}
};
const checkAll = ref(false);
const isIndeterminate = ref(true);
const selectedAreaList = ref([]);
const handleCheckAllChange = val => {
// console.log(val, "handleCheckAllChange");
if (val) {
isIndeterminate.value = false;
selectedAreaList.value.length !== areaList.value.length
? (selectedAreaList.value = areaList.value.map(obj => obj.id))
: "";
} else {
selectedAreaList.value = [];
}
// selectedAreaList.value = val ? areaList : []
// isIndeterminate.value = false
};
const handleCheckedAreaChange = () => {
// console.log(selectedAreaList.value, "handleCheckedAreaChange");
selectedAreaList.value.length !== areaList.value.length
? (isIndeterminate.value = true)
: ((checkAll.value = true), (isIndeterminate.value = false));
};
const pubTimeList = ref([
{
......@@ -1140,10 +1183,37 @@ const curFooterList = ref([
img: Img12
}
]);
const currentPage = ref(1);
const total = ref(0)
// 处理页码改变事件
const handleCurrentChange = page => {
currentPage.value = page;
handleGetetThinkTankReport()
};
//获取智库报告
const handleGetetThinkTankReport = async () => {
const params = {
currentPage: currentPage.value,
pageSize: 12,
researchTypeIds: selectedAreaList.value,
years: 2025
}
try {
const res = await getThinkTankReport(params);
console.log("智库报告", res);
if (res.code === 200 && res.data) {
curFooterList.value = res.data.content;
total.value = res.data.totalElements
}
} catch (error) {
console.error("获取智库报告error", error);
}
};
const handleClick = tank => {
console.log(tank)
// router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id } });
const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id, name: tank.name } });
window.open(curRoute.href, "_blank");
};
......@@ -1162,10 +1232,14 @@ const handleToMoreRiskSignal = () => {
onMounted(async () => {
handleGetThinkTankList();
handleGetNewReport();
handleGetThinkTankRiskSignal();
handleBox5();
handleBox5(getDateYearsAgo(10));
handleBox6();
handleBox7();
handleGetHylyList();
handleGetThinkTankHot(getDateYearsAgo(1));
handleGetetThinkTankReport()
});
</script>
......@@ -1173,16 +1247,19 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
width: 1920px;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
......@@ -1199,16 +1276,20 @@ onMounted(async () => {
color: #fff;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
}
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
......@@ -1220,9 +1301,11 @@ onMounted(async () => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -1235,14 +1318,17 @@ onMounted(async () => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -1254,6 +1340,7 @@ onMounted(async () => {
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 688px;
......@@ -1261,9 +1348,11 @@ onMounted(async () => {
box-sizing: border-box;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -1272,6 +1361,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -1283,12 +1373,14 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -1301,11 +1393,13 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
width: 82px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
......@@ -1314,12 +1408,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1327,11 +1423,13 @@ onMounted(async () => {
}
}
}
.home-main-header-card-box {
margin-top: 64px;
width: 1600px;
display: flex;
justify-content: space-between;
.card {
width: 253px;
height: 228px;
......@@ -1342,6 +1440,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.65);
transition: all 0.3s;
cursor: pointer;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
......@@ -1353,14 +1452,17 @@ onMounted(async () => {
margin-top: 19px;
margin-left: 20px;
justify-content: space-between;
.icon {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
.rank {
width: 100px;
height: 32px;
......@@ -1374,25 +1476,30 @@ onMounted(async () => {
line-height: 32px;
letter-spacing: 0px;
}
.rank1 {
background: linear-gradient(270deg, rgba(206, 79, 81, 0.3), rgba(206, 79, 81, 0) 100%);
color: rgba(206, 79, 81, 1);
}
.rank2 {
background: linear-gradient(270deg, rgba(255, 172, 77, 0.3), rgba(255, 172, 77, 0) 100%);
color: rgba(255, 149, 77, 1);
}
.rank3 {
background: linear-gradient(270deg, rgba(255, 197, 61, 0.3), rgba(255, 197, 61, 0) 100%);
color: rgba(255, 197, 61, 1);
}
}
.card-title {
margin-top: 13px;
display: flex;
margin-left: 20px;
margin-right: 21px;
justify-content: space-between;
.title-left {
width: 175px;
height: 24px;
......@@ -1404,6 +1511,7 @@ onMounted(async () => {
letter-spacing: 1px;
text-align: left;
}
.title-right {
height: 22px;
color: rgba(132, 136, 142, 1);
......@@ -1415,6 +1523,7 @@ onMounted(async () => {
text-align: right;
}
}
.content {
margin: 13px auto 19px;
width: 212px;
......@@ -1432,10 +1541,12 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
}
.tag-box {
margin: 0 20px;
display: flex;
gap: 8px;
.tag {
height: 22px;
padding: 0 8px;
......@@ -1446,6 +1557,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 20px;
}
.tag1 {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
......@@ -1453,6 +1565,7 @@ onMounted(async () => {
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag2 {
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
......@@ -1460,6 +1573,7 @@ onMounted(async () => {
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
box-sizing: border-box;
border: 1px solid rgba(255, 229, 143, 1);
......@@ -1467,6 +1581,7 @@ onMounted(async () => {
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag4 {
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
......@@ -1475,6 +1590,7 @@ onMounted(async () => {
color: rgba(245, 34, 45, 1);
}
}
.more {
margin: 103px auto;
height: 22px;
......@@ -1493,11 +1609,13 @@ onMounted(async () => {
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
......@@ -1506,6 +1624,7 @@ onMounted(async () => {
box-sizing: border-box;
border-radius: 10px;
position: relative;
.box1-left {
position: absolute;
left: 0;
......@@ -1513,11 +1632,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
......@@ -1525,28 +1646,34 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 112px;
height: 48px;
......@@ -1561,23 +1688,28 @@ onMounted(async () => {
}
}
}
.box1-main {
margin: 24px auto;
width: 948px;
height: 353px;
display: flex;
gap: 28px;
.box1-main-left {
width: 458px;
height: 353px;
border-radius: 4px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
width: 462px;
.title {
width: 462px;
max-height: 52px;
......@@ -1590,6 +1722,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.tag-box {
width: 462px;
height: 26px;
......@@ -1597,6 +1730,7 @@ onMounted(async () => {
margin-top: 16px;
display: flex;
gap: 8px;
.tag {
height: 26px;
padding: 0 8px;
......@@ -1613,6 +1747,7 @@ onMounted(async () => {
text-align: left;
}
}
.content {
margin-top: 17px;
width: 462px;
......@@ -1625,14 +1760,17 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: justify;
display: -webkit-box;
-webkit-line-clamp: 6; /* 限制行数为5 */
-webkit-line-clamp: 6;
/* 限制行数为5 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.box1-right-footer {
margin-top: 31px;
display: flex;
justify-content: space-between;
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -1643,19 +1781,23 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.name {
display: flex;
justify-content: flex-end;
gap: 6px;
.logo {
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -1671,6 +1813,7 @@ onMounted(async () => {
}
}
}
.box2 {
width: 521px;
height: 450px;
......@@ -1678,26 +1821,31 @@ onMounted(async () => {
background: rgba(255, 255, 255, 1);
position: relative;
border-radius: 10px;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
margin-left: 18px;
.text {
margin-left: 15px;
margin-top: 13px;
......@@ -1708,6 +1856,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
......@@ -1722,6 +1871,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 16px;
margin-left: 200px;
......@@ -1733,16 +1883,19 @@ onMounted(async () => {
cursor: pointer;
}
}
.box2-main {
margin-top: 2px;
height: 330px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
......@@ -1761,24 +1914,29 @@ onMounted(async () => {
padding: 6px 4px;
text-align: center;
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.itemLeftStatus3 {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240);
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 315px;
color: rgba(59, 65, 75, 1);
......@@ -1790,6 +1948,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -1801,6 +1960,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 30px;
......@@ -1815,14 +1975,17 @@ onMounted(async () => {
background: var(--color-main-active);
gap: 8px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
......@@ -1833,17 +1996,20 @@ onMounted(async () => {
}
}
}
.center-center {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 792px;
height: 450px;
border-radius: 10px;
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);
......@@ -1852,17 +2018,21 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.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;
......@@ -1873,6 +2043,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -1888,33 +2059,40 @@ onMounted(async () => {
}
}
}
.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;
......@@ -1928,6 +2106,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
......@@ -1940,6 +2119,7 @@ onMounted(async () => {
line-height: 22px;
}
}
.right-footer {
width: 657px;
height: 24px;
......@@ -1956,6 +2136,7 @@ onMounted(async () => {
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
......@@ -1963,6 +2144,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -1971,15 +2153,18 @@ onMounted(async () => {
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;
......@@ -1990,6 +2175,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -2004,12 +2190,14 @@ onMounted(async () => {
cursor: pointer;
}
}
.box4-tag-box {
height: 60px;
display: flex;
padding: 0 10px;
align-items: center;
gap: 8px;
.tag {
height: 28px;
line-height: 28px;
......@@ -2018,6 +2206,7 @@ onMounted(async () => {
border-radius: 4px;
cursor: pointer;
}
.tagActive {
height: 36px;
line-height: 36px;
......@@ -2032,37 +2221,44 @@ onMounted(async () => {
line-height: 36px;
letter-spacing: 1px;
}
.tag1 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag2 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag4 {
border: 1px solid rgba(255, 187, 150, 1);
background: rgba(255, 242, 232, 1);
color: rgba(250, 84, 28, 1);
}
.tag5 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(206, 79, 81, 1);
}
}
.box4-main {
height: 342px;
overflow-y: auto;
box-sizing: border-box;
padding: 8px 0;
.box4-main-item {
margin-top: 16px;
display: flex;
......@@ -2072,11 +2268,13 @@ onMounted(async () => {
margin-top: 5px;
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 10px;
width: 690px;
......@@ -2085,9 +2283,11 @@ onMounted(async () => {
background: rgba(246, 250, 255, 1);
padding: 10px 15px;
border-radius: 4px;
.right-top {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -2096,6 +2296,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
color: rgba(95, 101, 108, 1);
......@@ -2105,6 +2306,7 @@ onMounted(async () => {
line-height: 30px;
}
}
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -2117,12 +2319,14 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 460px;
display: flex;
justify-content: center;
gap: 15px;
.box5 {
width: 1064px;
height: 460px;
......@@ -2131,6 +2335,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2139,18 +2344,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2162,6 +2371,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box5-select-box {
width: 120px;
height: 28px;
......@@ -2170,10 +2380,12 @@ onMounted(async () => {
right: 25px;
}
}
.box5-main {
height: 397px;
}
}
.box6 {
width: 521px;
height: 460px;
......@@ -2182,6 +2394,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
......@@ -2190,15 +2403,18 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-top: 18px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 15px;
......@@ -2209,6 +2425,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.box6-select-box {
width: 120px;
height: 28px;
......@@ -2217,16 +2434,19 @@ onMounted(async () => {
right: 25px;
}
}
.box6-main {
height: 360px;
}
}
}
.center-footer1 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 15px;
.box7 {
width: 1064px;
height: 460px;
......@@ -2235,6 +2455,7 @@ onMounted(async () => {
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);
......@@ -2243,18 +2464,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2266,6 +2491,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2275,14 +2501,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2295,10 +2524,12 @@ onMounted(async () => {
}
}
}
.box7-main {
height: 412px;
}
}
.box8 {
width: 521px;
height: 460px;
......@@ -2307,6 +2538,7 @@ onMounted(async () => {
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);
......@@ -2315,18 +2547,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2338,6 +2574,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box8-select-box {
width: 120px;
height: 28px;
......@@ -2346,17 +2583,20 @@ onMounted(async () => {
right: 25px;
}
}
.box8-main {
margin: 0 auto;
margin-top: 5px;
width: 452px;
height: 382px;
overflow: hidden;
.box8-item {
margin-top: 14px;
width: 452px;
height: 24px;
display: flex;
.item-left {
width: 20px;
height: 24px;
......@@ -2384,18 +2624,22 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.itemBold1 {
color: rgba(206, 79, 81, 1);
font-weight: 700;
}
.itemBold2 {
color: rgba(255, 169, 64, 1);
font-weight: 700;
}
.itemBold3 {
color: rgba(255, 197, 61, 1);
font-weight: 700;
}
.item-right {
width: 92px;
height: 24px;
......@@ -2413,9 +2657,11 @@ onMounted(async () => {
}
}
}
.home-main-footer {
overflow: hidden;
background: rgba(247, 248, 249, 1);
.home-main-footer-header {
width: 1600px;
height: 42px;
......@@ -2423,9 +2669,11 @@ onMounted(async () => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2437,48 +2685,58 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: var(--color-main-active);
color: #fff;
font-weight: 700;
&:hover {
color: #fff;
background: var(--color-main-active);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
margin: 0 auto;
margin-top: 36px;
width: 1600px;
display: flex;
gap: 16px;
.left {
width: 300px;
height: 600px;
width: 360px;
height: 100%;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -2486,6 +2744,7 @@ onMounted(async () => {
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
color: var(--color-main-active);
......@@ -2497,13 +2756,16 @@ onMounted(async () => {
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
}
.left-footer-box {
left: 25px;
bottom: 20px;
......@@ -2512,6 +2774,7 @@ onMounted(async () => {
height: 149px;
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.header {
margin-top: 8px;
margin-left: 21px;
......@@ -2524,6 +2787,7 @@ onMounted(async () => {
letter-spacing: 1px;
text-align: left;
}
.content {
margin: 0 auto;
margin-top: 11px;
......@@ -2537,6 +2801,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.btn {
margin: 0 auto;
margin-top: 13px;
......@@ -2554,42 +2819,60 @@ onMounted(async () => {
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1284px;
width: 1226px;
height: 1248px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.footer-card {
width: 418px;
width: 398px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.footer-card-top {
width: 384px;
height: 206px;
width: 364px;
height: 180px;
margin: 0 auto;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 13px;
width: 376px;
height: 24px;
height: 48px;
/* 修改高度为两行的高度 */
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
display: -webkit-box;
/* 使用弹性盒模型 */
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
/* 设置盒模型方向为垂直 */
}
.footer-card-footer {
margin: 0 auto;
margin-top: 5px;
......@@ -2605,10 +2888,12 @@ onMounted(async () => {
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
......@@ -2625,18 +2910,22 @@ onMounted(async () => {
}
}
}
.divide-header {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
.filter-checkbox {
width: 105px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -2644,4 +2933,85 @@ onMounted(async () => {
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.page {
width: 1600px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 36px 0 0 0;
padding-left: 11px;
.count {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论