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