提交 5f63cd2e authored 作者: 朱政's avatar 朱政

feat:智库概览页,智库报告详情报告分析

上级 d0ae5131
......@@ -217,6 +217,15 @@ export const getThinkTankReportSummary = (params) => {
}
);
}
//智库报告:获取相关报告
export const getThinkTankReportRelated = (params) => {
return request(
{
method: 'GET',
url: `/api/thinkTankReport/related/${params}`,
}
);
}
//获取报告原文
export const getThinkTankReportcontentUrl = (params) => {
......
......@@ -50,7 +50,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList.vue";
import NewsList from "@/components/base/newsList/index.vue";
import { ref, onMounted } from "vue";
import router from '@/router'
import { getCoopRestrictionNews, getCoopRestrictionSocial } from '@/api/coopRestriction/coopRestriction'
......
......@@ -374,8 +374,8 @@
<script setup>
import RiskSignal from "@/components/base/RiskSignal/index.vue";
import NewsList from "@/components/NewsList.vue";
import RiskSignal from "@/components/base/riskSignal/index.vue";
import NewsList from "@/components/base/newsList/index.vue";
import { onMounted, ref, computed } from "vue";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
......
......@@ -61,7 +61,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList.vue";
import NewsList from "@/components/base/newsList/index.vue";
import { ref, onBeforeMount } from "vue";
import router from "@/router"
......
......@@ -53,7 +53,7 @@
</template>
<script setup>
import NewsList from "@/components/NewsList.vue";
import NewsList from "@/components/base/newsList/index.vue";
import { ref, onMounted } from "vue";
import {
......
......@@ -50,6 +50,12 @@
</div>
<div class="text">{{ "查看官网" }}</div>
</div> -->
<div class="btn">
<div class="icon">
<img src="./images/btn-icon2.png" alt="" />
</div>
<div class="text" @click="goToOfficialWebsite()">{{ "查看官网" }}</div>
</div>
<div class="btn">
<div class="icon">
<img src="./images/btn-icon2.png" alt="" />
......@@ -72,7 +78,7 @@
</div>
</div>
<div class="main">
<ReportAnalysis v-if="tabActiveName === '报告分析'"></ReportAnalysis>
<ReportAnalysis v-if="tabActiveName === '报告分析'" :thinkInfo="thinkInfo" :reportList="reportList"></ReportAnalysis>
<PolicyTracking v-else></PolicyTracking>
</div>
</div>
......@@ -83,12 +89,13 @@ import { ref, onMounted } from "vue";
import ReportAnalysis from "./reportAnalysis/index.vue";
import PolicyTracking from "./policyTracking/index.vue";
import { getThinkTankReportSummary } from "@/api/thinkTank/overview";
import { getThinkTankReportSummary, getThinkTankReportRelated } from "@/api/thinkTank/overview";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const reportUrl = ref("");
const thinkInfo = ref({});
const reportList = ref({})
// 获取报告全局信息
const handleGetThinkTankReportSummary = async () => {
......@@ -104,7 +111,20 @@ const handleGetThinkTankReportSummary = async () => {
console.error("获取报告全局信息error", error);
}
};
// 获取相关报告信息
const handleGetThinkTankReport = async () => {
try {
const res = await getThinkTankReportRelated(router.currentRoute._value.params.id);
console.log("报告全局信息", res);
if (res.code === 200 && res.data) {
reportList.value = res.data;
}
} catch (error) {
console.error("获取相关报告error", error);
}
};
const toReport = () => {
console.log(reportUrl.value, "reportUrl.valuereportUrl.value");
const route = router.resolve({
......@@ -132,7 +152,17 @@ const handleAnalysisClick = () => {
};
onMounted(async () => {
handleGetThinkTankReportSummary();
handleGetThinkTankReport();
});
const goToOfficialWebsite = () => {
const url = thinkInfo.value?.reportUrl;
if (!url) {
return;
}
// 简单校验一下,防止空字符串
window.open(url, "_blank");
};
</script>
<style lang="scss" scoped>
......
......@@ -10,18 +10,17 @@
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<div class="select-box">
<el-select v-model="box1SelectYear" placeholder="选择时间" style="width: 100px">
<el-option
v-for="(item, index) in box1YearList"
:key="index"
:label="item.label + '年'"
:value="item.value"
@click="handleGetThinkPolicyIndustry()"
/>
<el-option v-for="(item, index) in box1YearList" :key="index" :label="item.label + '年'"
:value="item.value" @click="handleGetThinkPolicyIndustry()" />
</el-select>
</div>
</div>
<div class="box-main">
<div id="box1Chart"></div>
<div class="source">
<div class="info"><img src="./images/image-exclamation.png"></div>
<div class="text"> 数据来源:美国国会官网,数据时间:2015.1至2025.12</div>
</div>
</div>
</div>
<div class="box1 box">
......@@ -40,6 +39,10 @@
</div>
<div class="box-main">
<div id="box2Chart"></div>
<div class="source">
<div class="info"><img src="./images/image-exclamation.png"></div>
<div class="text"> 数据来源:美国国会官网,数据时间:2015.1至2025.12</div>
</div>
</div>
</div>
<!-- <div class="box2 box">
......@@ -78,18 +81,17 @@
<!-- <div class="box-header-right">{{ "查看数据源 >" }}</div> -->
<div class="select-box">
<el-select v-model="box3SelectMonths" placeholder="选择时间" style="width: 100px">
<el-option
v-for="item in box3MonthsList"
:key="item.value"
:label="item.label + '年'"
:value="item.value"
@click="handleGetThinkPolicyIndustryChange()"
/>
<el-option v-for="item in box3MonthsList" :key="item.value" :label="item.label + '年'" :value="item.value"
@click="handleGetThinkPolicyIndustryChange()" />
</el-select>
</div>
</div>
<div class="box3-main">
<div id="box3Chart"></div>
<div class="source">
<div class="info"><img src="./images/image-exclamation.png"></div>
<div class="text"> 数据来源:美国国会官网,数据时间:2015.1至2025.12</div>
</div>
</div>
</div>
</div>
......@@ -106,14 +108,8 @@
<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
class="select-box-sort"
v-model="sort"
placeholder="倒序"
style="width: 120px"
:teleported="true"
:placement="'bottom-start'"
:popper-options="{
<el-select class="select-box-sort" v-model="sort" placeholder="倒序" style="width: 120px" :teleported="true"
:placement="'bottom-start'" :popper-options="{
modifiers: [
{
name: 'preventOverflow',
......@@ -124,8 +120,7 @@
enabled: false
}
]
}"
>
}">
<template #prefix>
<img v-if="!sort" src="../thinkDynamics/images/image down.png" class="select-prefix-img" alt="" />
<img v-else src="../thinkDynamics/images/image up.png" class="select-prefix-img" alt="" />
......@@ -149,13 +144,8 @@
{{ item }}
</el-checkbox> -->
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox
class="filter-checkbox"
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
>
<el-checkbox class="filter-checkbox" v-for="research in areaList" :key="research.id"
v-model="selectedAreaList" :label="research.id">
{{ research.name }}
</el-checkbox>
</div>
......@@ -173,13 +163,8 @@
{{ item }}
</el-checkbox> -->
<el-checkbox class="filter-checkbox" label="全部领域"></el-checkbox>
<el-checkbox
class="filter-checkbox"
v-for="year in selectableYears"
:key="year"
v-model="selectedAreaList"
:label="year"
>
<el-checkbox class="filter-checkbox" v-for="year in selectableYears" :key="year"
v-model="selectedAreaList" :label="year">
{{ year }}
</el-checkbox>
</div>
......@@ -198,10 +183,7 @@
<div class="info">
{{ item.times }} · {{ item.name }}
<div class="more" @click="toDetail(item)">
<img
src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image open.png"
alt=""
/>
<img src="@/views/thinkTank/ThinkTankDetail/thinkDynamics/images/image open.png" alt="" />
</div>
</div>
<div class="tag-box">
......@@ -231,14 +213,8 @@
<div class="right-footer">
<div class="info">共{{ total }}条政策建议</div>
<div class="page-box">
<el-pagination
:page-size="12"
background
layout="prev, pager, next"
:total="total"
@current-change="handleCurrentChange"
:current-page="currentPage"
/>
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="handleCurrentChange" :current-page="currentPage" />
</div>
</div>
</div>
......@@ -825,29 +801,62 @@ onMounted(() => {
.box-main {
height: 372px;
width: 520px;
position: relative;
overflow: hidden;
box-sizing: border-box;
padding: 24px 24px 0;
#box1Chart {
height: 309px;
width: 446.5px;
width: 472px;
}
#box2Chart {
height: 309px;
width: 446.5px;
width: 472px;
}
#box3Chart {
height: 309px;
width: 446.5px;
width: 472px;
}
.source {
margin: 0 auto;
margin-top: 10px;
/* 上下0,左右自动居中 */
width: 370px;
height: 22px;
display: flex;
.info {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
color: rgb(132, 136, 142);
margin-left: 8px;
}
}
}
.box3-main {
height: 372px;
width: 520px;
......@@ -863,6 +872,41 @@ onMounted(() => {
height: 300px;
width: 520px;
}
.source {
margin: 0 auto;
margin-top: 10px;
/* 上下0,左右自动居中 */
width: 370px;
height: 22px;
display: flex;
.info {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
color: rgb(132, 136, 142);
margin-left: 8px;
}
}
}
}
}
......@@ -975,6 +1019,7 @@ onMounted(() => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
padding-bottom: 24px;
.select-box-science {
margin-top: 16px;
......@@ -998,12 +1043,13 @@ onMounted(() => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
margin-left: 24px;
.filter-checkbox {
width: 160px;
height: 24px;
margin: 0;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
......@@ -1089,8 +1135,8 @@ onMounted(() => {
}
.select-box-publish {
margin-top: 24px;
margin-bottom: 24px;
margin-top: 16px;
.select-box-header {
display: flex;
......@@ -1111,12 +1157,13 @@ onMounted(() => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
margin-left: 24px;
.filter-checkbox {
width: 160px;
height: 24px;
margin: 0;
font-family: "Source Han Sans CN", sans-serif;
font-weight: 400;
......
......@@ -18,7 +18,7 @@
</div>
</div>
<div class="header-top-right">
<button class="blue-btn">
<button class="blue-btn" @click="handleOpenThinkTankSite">
<img class="btn-img" src="./images/image1.png" alt="" />
<span class="text">{{ '查看智库官网' }}</span>
</button>
......@@ -88,6 +88,16 @@ const handleGetThinkTankSummary = async () => {
}
};
// 查看智库官网
const handleOpenThinkTankSite = () => {
const url = thinkTank.value?.url;
if (!url) {
return;
}
// 简单校验一下,防止空字符串
window.open(url, "_blank");
};
onMounted(async () => {
handleGetThinkTankSummary();
});
......
......@@ -18,7 +18,7 @@
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
......@@ -271,16 +271,19 @@ const handleToReportDetail = item => {
};
</script>
<style lang="scss" scoped>
/* 统一智库动态国会听证会内所有 el-checkbox 文本为 16px */
:deep(.el-checkbox__label) {
font-size: 16px;
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 360px;
height: 874px;
padding-bottom: 36px;
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -290,8 +293,8 @@ const handleToReportDetail = item => {
.select-research-box {
width: 360px;
height: 284px;
margin-top: 19px;
height: 100%;
margin-top: 16px;
.select-box-header {
display: flex;
......@@ -309,10 +312,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -325,7 +328,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......@@ -343,9 +346,9 @@ const handleToReportDetail = item => {
}
.select-time-box {
margin-top: 44px;
margin-top: 16px;
width: 360px;
height: 156px;
height: 100%;
.select-box-header {
margin-bottom: 12px;
......@@ -363,10 +366,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -379,7 +382,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......@@ -405,8 +408,8 @@ const handleToReportDetail = item => {
}
.select-hearing-box {
margin-top: 36px;
width: 360px;
margin-top: 16px;
width: 100%;
.select-box-header {
display: flex;
......@@ -425,9 +428,9 @@ const handleToReportDetail = item => {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......
......@@ -18,7 +18,7 @@
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
......@@ -183,14 +183,19 @@ const handleToReportDetail = item => {
};
</script>
<style lang="scss" scoped>
/* 统一智库动态调查报告内所有 el-checkbox 文本为 16px */
:deep(.el-checkbox__label) {
font-size: 16px;
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 360px;
height: 541px;
padding-bottom: 36px;
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -200,8 +205,8 @@ const handleToReportDetail = item => {
.select-research-box {
width: 360px;
height: 284px;
margin-top: 19px;
height: 100%;
margin-top: 16px;
.select-box-header {
display: flex;
......@@ -219,10 +224,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -234,7 +239,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......@@ -260,9 +265,9 @@ const handleToReportDetail = item => {
}
.select-time-box {
margin-top: 44px;
margin-top: 16px;
width: 360px;
height: 156px;
height: 100%;
.select-box-header {
display: flex;
......@@ -280,10 +285,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -295,7 +300,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......
......@@ -18,7 +18,7 @@
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
......@@ -183,14 +183,19 @@ const handleToReportDetail = item => {
};
</script>
<style lang="scss" scoped>
/* 统一智库动态智库报告内所有 el-checkbox 文本为 16px */
:deep(.el-checkbox__label) {
font-size: 16px;
}
.main-content {
display: flex;
gap: 16px;
.left {
width: 360px;
height: 541px;
padding-bottom: 36px;
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -200,8 +205,8 @@ const handleToReportDetail = item => {
.select-research-box {
width: 360px;
height: 284px;
margin-top: 19px;
height: 100%;
margin-top: 16px;
.select-box-header {
display: flex;
......@@ -219,10 +224,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -234,7 +239,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......@@ -260,9 +265,9 @@ const handleToReportDetail = item => {
}
.select-time-box {
margin-top: 44px;
margin-top: 16px;
width: 360px;
height: 156px;
height: 100%;
.select-box-header {
display: flex;
......@@ -280,10 +285,10 @@ const handleToReportDetail = item => {
.title {
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -295,7 +300,7 @@ const handleToReportDetail = item => {
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......
......@@ -630,8 +630,9 @@ onMounted(async () => {
<style lang="scss" scoped>
.main-header {
height: 64px;
width: 1600px;
margin-bottom: 16px;
display: flex;
align-items: center;
background: rgb(255, 255, 255);
......
......@@ -113,6 +113,10 @@
</div>
<div class="box1-main-right" id="box1Chart"></div>
</div>
<div class="source">
<div class="info"><img src="./images/image-exclamation.png"></div>
<div class="text"> 数据来源:美国国会官网,数据时间:2015.1至2025.12</div>
</div>
</AnalysisBox>
</div>
<div class="box">
......@@ -211,7 +215,13 @@
</div> -->
<AnalysisBox title="核心研究人员">
<div class="box3-main">
<div class="box3-main-left" id="box3Chart"></div>
<div class="box3-main-left">
<div id="box3Chart"></div>
<div class="source">
<div class="info"><img src="./images/image-exclamation.png"></div>
<div class="text"> 数据来源:美国国会官网,数据时间:2015.1至2025.12</div>
</div>
</div>
<div class="box3-main-right">
<div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index">
<div class="icon" @click="handleClickPerson(item)">
......@@ -250,6 +260,7 @@ import {
import { useRouter } from "vue-router";
import DefaultIcon1 from '@/assets/icons/default-icon1.png'
import { getPersonSummaryInfo } from "@/api/common/index";
const router = useRouter();
import InfoImg from "./images/img.png";
......@@ -662,18 +673,64 @@ const handleGetThinkPerson = async () => {
};
// 点击人物头像,跳转到人物主页
const handleClickPerson = (item) => {
console.log('item', item);
window.sessionStorage.setItem("curTabName", item.name)
const handleClickPerson = async item => {
console.log("person", item);
const personTypeList = JSON.parse(window.sessionStorage.getItem("personTypeList"));
console.log("personTypeList", personTypeList);
let type = 0;
let personTypeName = "";
const params = {
personId: item.personId
};
try {
const res = await getPersonSummaryInfo(params);
console.log("人物全局信息", res);
if (res.code === 200 && res.data) {
const arr = personTypeList.filter(t => {
const typeIdNum = Number(t.typeId);
const personTypeNum = Number(res.data.personType);
return !Number.isNaN(typeIdNum) && !Number.isNaN(personTypeNum) && typeIdNum === personTypeNum;
});
console.log("arr", arr);
if (arr && arr.length > 0) {
personTypeName = arr[0].typeName;
console.log("personTypeName", personTypeName);
if (personTypeName === "科技企业领袖") {
type = 1;
} else if (personTypeName === "国会议员") {
type = 2;
} else if (personTypeName === "智库研究人员") {
type = 3;
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值!");
return;
}
window.sessionStorage.setItem("curTabName", item.name);
const route = router.resolve({
path: "/characterPage",
query: {
type: 3 // 1 2 3
type: type, // type=1为科技企业领袖,2为国会议员,3为智库研究人员
personId: item.personId
}
});
window.open(route.href, "_blank");
} else {
personTypeName = "";
ElMessage.warning("找不到当前人员的类型值!");
return;
}
} else {
ElMessage.warning("找不到当前人员的类型值!");
return;
}
} catch (error) { }
};
onMounted(() => {
handleGetThinkTankInfoBasic()
handleGetThinkTankInfoBranch()
......@@ -1003,6 +1060,42 @@ onMounted(() => {
}
}
.source {
margin: 0 auto;
margin-top: 10px;
/* 上下0,左右自动居中 */
width: 370px;
height: 22px;
display: flex;
.info {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
color: rgb(132, 136, 142);
margin-left: 8px;
}
}
.box2-main {
height: 320px;
display: flex;
......@@ -1143,7 +1236,48 @@ onMounted(() => {
height: 326px;
margin-left: 9px;
box-sizing: border-box;
padding: 24px 24px 0;
#box3Chart {
width: 536px;
height: 290px;
}
.source {
margin: 0 auto;
margin-top: 10px;
/* 上下0,左右自动居中 */
width: 370px;
height: 22px;
display: flex;
.info {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.text {
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
color: rgb(132, 136, 142);
margin-left: 8px;
}
}
}
.box3-main-right {
......@@ -1221,6 +1355,8 @@ onMounted(() => {
}
}
}
}
}
}
......
......@@ -8,8 +8,7 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAllModel" :indeterminate="isIndeterminate" class="all-checkbox"
@change="emit('check-all-change', $event)">
<el-checkbox v-model="checkAllModel" class="all-checkbox" @change="emit('check-all-change', $event)">
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaListModel"
......@@ -27,16 +26,15 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAllTimeModel" class="all-checkbox" :indeterminate="isIndeterminateTime"
<el-checkbox v-model="checkAllTimeModel" class="all-checkbox"
@change="emit('check-all-time-change', $event)">
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeListModel">
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
@change="emit('checked-area-time-change')">
<el-checkbox v-for="time in pubTimeList" :key="time.id" v-model="selectedPubTimeListModel" :label="time.id"
class="filter-checkbox" @change="emit('checked-area-time-change')">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
......@@ -133,7 +131,7 @@ const selectedPubTimeListModel = computed({
.left {
width: 360px;
height: 100%;
padding-bottom: 36px;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -142,7 +140,7 @@ const selectedPubTimeListModel = computed({
position: relative;
.select-box {
margin-top: 21px;
margin-top: 16px;
.header {
display: flex;
......@@ -159,7 +157,7 @@ const selectedPubTimeListModel = computed({
.title {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
......@@ -169,11 +167,43 @@ const selectedPubTimeListModel = computed({
}
.select-main {
margin-left: 25px;
margin-left: 24px;
margin-top: 12px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.all-checkbox {
width: 160px;
height: 24px;
margin: 0;
}
.filter-checkbox {
width: 160px;
height: 24px;
margin-right: 0 !important;
}
}
}
.select-main1 {
width: 100px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
width: 160px;
height: 24px;
margin-right: 0 !important;
}
}
}
}
}
......@@ -268,11 +298,11 @@ const selectedPubTimeListModel = computed({
}
}
.all-checkbox {
width: 220px;
}
.filter-checkbox {
width: 105px;
width: 160px;
height: 24px;
margin: 0;
}
</style>
......@@ -9,8 +9,7 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAllModel" :indeterminate="isIndeterminate" class="all-checkbox"
@change="emit('check-all-change', $event)">
<el-checkbox v-model="checkAllModel" class="all-checkbox" @change="emit('check-all-change', $event)">
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaListModel"
......@@ -28,16 +27,14 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox v-model="checkAllTimeModel" class="all-checkbox" :indeterminate="isIndeterminateTime"
<el-checkbox v-model="checkAllTimeModel" class="all-checkbox"
@change="emit('check-all-time-change', $event)">
全部时间
</el-checkbox>
<el-checkbox-group v-model="selectedPubTimeListModel">
<el-checkbox v-for="time in pubTimeList" :key="time.id" :label="time.id" class="filter-checkbox"
@change="emit('checked-area-time-change')">
<el-checkbox v-model="selectedPubTimeListModel" v-for="time in pubTimeList" :key="time.id" :label="time.id"
class="filter-checkbox" @change="emit('checked-area-time-change')">
{{ time.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</div>
......@@ -60,7 +57,7 @@
</div>
</div>
<div class="right-footer">
<div class="info">{{ total }}调查项目</div>
<div class="info">{{ total }}智库报告</div>
<div class="page-box">
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total"
@current-change="emit('page-change', $event)" :current-page="currentPage" />
......@@ -135,7 +132,7 @@ const selectedPubTimeListModel = computed({
.left {
width: 360px;
height: 100%;
padding-bottom: 36px;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -144,7 +141,7 @@ const selectedPubTimeListModel = computed({
position: relative;
.select-box {
margin-top: 21px;
margin-top: 16px;
.header {
display: flex;
......@@ -161,7 +158,7 @@ const selectedPubTimeListModel = computed({
.title {
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
......@@ -171,7 +168,14 @@ const selectedPubTimeListModel = computed({
}
.select-main {
margin-left: 25px;
margin-left: 24px;
margin-top: 12px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
}
}
.select-main1 {
......@@ -265,10 +269,14 @@ const selectedPubTimeListModel = computed({
}
.all-checkbox {
width: 220px;
width: 160px;
height: 24px;
margin: 0;
}
.filter-checkbox {
width: 105px;
width: 160px;
height: 24px;
margin: 0;
}
</style>
......@@ -4,7 +4,7 @@
<div class="select-research-box">
<div class="select-box-header">
<div class="icon"></div>
<div class="title">{{ "研究类型" }}</div>
<div class="title">{{ "科技领域" }}</div>
</div>
<div class="select-main">
<div class="checkbox-group">
......@@ -75,7 +75,10 @@
<img src="../ThinkTankDetail/thinkDynamics/images/image open.png" alt="open icon"
class="card-open-image" />
</div>
<div class="card-item-category"> {{ item.category }}</div>
<div class="card-item-category">
<AreaTag :key="index" :tagName="item.category">
</AreaTag>
</div>
</div>
</div>
<div class="divider" v-if="index !== displayList.length - 1"></div>
......@@ -118,6 +121,15 @@ const hearingData = ref([
{ id: 1, title: "美国国会听证会:人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
{ id: 2, title: "美国国会听证会:先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
{ id: 3, title: "美国国会听证会:半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
{ id: 4, title: "美国国会听证会:人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
{ id: 5, title: "美国国会听证会:先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
{ id: 6, title: "美国国会听证会:半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
{ id: 7, title: "美国国会听证会:人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
{ id: 8, title: "美国国会听证会:先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
{ id: 9, title: "美国国会听证会:半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
{ id: 10, title: "美国国会听证会:人工智能与国家安全", content: "美中经济与安全审查委员会", category: "人工智能", time: "2025年7月8日" },
{ id: 11, title: "美国国会听证会:先进制造供应链韧性", content: "国会-行政部门中国委员会", category: "先进制造", time: "2025年6月15日" },
{ id: 12, title: "美国国会听证会:半导体出口管制与产业政策", content: "美国商务部", category: "半导体", time: "2025年5月22日" },
]);
const researchHearingList = ref([
......@@ -187,6 +199,11 @@ const handlePageChange = page => {
</script>
<style lang="scss" scoped>
/* 统一资源库国会听证会内所有 el-checkbox 文本为 16px */
:deep(.el-checkbox__label) {
font-size: 16px;
}
/* 外层对齐智库报告资源库布局 */
.home-main-footer-main {
margin: 0 auto;
......@@ -198,8 +215,8 @@ const handlePageChange = page => {
.left {
width: 360px;
height: 874px;
padding-bottom: 36px;
height: 100%;
padding-bottom: 24px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
......@@ -211,7 +228,7 @@ const handlePageChange = page => {
.select-box-header {
display: flex;
gap: 17px;
margin-bottom: 12px;
.icon {
margin-top: 4px;
......@@ -222,12 +239,12 @@ const handlePageChange = page => {
}
.title {
height: 26px;
height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 26px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
......@@ -236,26 +253,27 @@ const handlePageChange = page => {
.select-research-box {
width: 360px;
height: 284px;
margin-top: 19px;
margin-top: 16px;
}
.select-time-box {
margin-top: 44px;
margin-top: 16px;
width: 360px;
height: 156px;
}
.select-hearing-box {
margin-top: 36px;
margin-top: 16px;
width: 360px;
}
.select-main {
margin-left: 24px;
margin-top: 12px;
.checkbox-group {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 160px);
gap: 8px 4px;
.filter-checkbox {
......@@ -266,7 +284,7 @@ const handlePageChange = page => {
}
.hearing-grid {
grid-template-columns: 1fr;
grid-template-columns: 160px;
width: 259px;
gap: 4px;
}
......@@ -278,13 +296,14 @@ const handlePageChange = page => {
.card-box {
width: 100%;
height: 1248px;
height: 1134px;
display: flex;
background: rgba(255, 255, 255, 1);
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);
padding-right: 36px;
.card-content {
width: 1211px;
......@@ -360,18 +379,10 @@ const handlePageChange = page => {
}
.card-item-category {
padding: 1px 8px;
box-sizing: border-box;
border: 1px solid rgb(231, 243, 255);
border-radius: 4px;
display: inline-flex;
background-color: rgb(247, 248, 249);
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
width: fit-content;
gap: 8px;
height: 24px;
display: flex;
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论