Skip to content

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

智库首页接口对接

上级 138e5b5a
隐藏空白字符变更
内嵌 并排
正在显示 包含 607 行增加 和 209 行删除
src/api/thinkTank/overview.js
浏览文件 @ cba2ee51
...@@ -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}`,
}) })
} }
...@@ -44,4 +53,32 @@ export function getThinkTankDonation() { ...@@ -44,4 +53,32 @@ export function getThinkTankDonation() {
url: `/api/thinkTankOverview/donation`, url: `/api/thinkTankOverview/donation`,
}) })
}
//智库概览:获取智库研究热点
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
})
} }
\ No newline at end of file
src/views/thinkTank/index.vue
浏览文件 @ cba2ee51
...@@ -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" tag1: val.status === 1,
:class="{ tag2: val.status === 2,
tag1: val.status === 1, tag3: val.status === 3,
tag2: val.status === 2, tag4: val.status === 4
tag3: val.status === 3, }" v-for="(val, idx) in item.tagList" :key="idx">
tag4: val.status === 4
}"
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 class="box1-main"> <div style="display: flex">
<div class="box1-main-left"> <img src="./assets/images/right-left-icon1.png" alt=""
<img :src="box1Data.img" alt="" /> style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('previous')" />
</div> <div class="box1-main">
<div class="box1-main-right"> <div class="box1-main-left">
<div class="title">{{ box1Data.title }}</div> <img :src="box1Data[box1DataIndex]?.imageUrl" alt="" />
<div class="tag-box">
<div class="tag" v-for="(item, index) in box1Data.tagList" :key="index">{{ item }}</div>
</div> </div>
<div class="content">{{ box1Data.content }}</div> <div class="box1-main-right">
<div class="box1-right-footer"> <div class="title">{{ box1Data[box1DataIndex]?.reportName }}</div>
<div class="time">{{ box1Data.time }}</div> <div class="tag-box">
<div class="name"> <div class="tag" v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList" :key="index">
<div class="logo"> {{ item }}
<img :src="box1Data.logo" alt="" /> </div>
</div>
<div class="content">{{ box1Data[box1DataIndex]?.summary }}</div>
<div class="box1-right-footer">
<div class="time">{{ box1Data[box1DataIndex]?.time }}</div>
<div class="name">
<div class="logo">
<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" itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
:class="{ itemLeftStatus2: item.status === '重大风险',
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值', itemLeftStatus3: item.status === '特别重大'
itemLeftStatus2: 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" tagActive: box4ActiveTag === tag.name,
:class="{ tag1: tag.status === 1,
tagActive: box4ActiveTag === tag.name, tag2: tag.status === 2,
tag1: tag.status === 1, tag3: tag.status === 3,
tag2: tag.status === 2, tag4: tag.status === 4,
tag3: tag.status === 3, tag5: tag.status === 5
tag4: tag.status === 4, }" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
tag5: tag.status === 5
}"
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,14 +362,14 @@ ...@@ -396,14 +362,14 @@
<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>
...@@ -434,7 +400,11 @@ import { ...@@ -434,7 +400,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 +442,9 @@ import Img12 from "./assets/images/img12.png"; ...@@ -472,7 +442,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 +508,38 @@ const handleGetThinkTankList = async () => { ...@@ -536,16 +508,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 +640,9 @@ const box4TagList = ref([ ...@@ -646,9 +640,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 +683,42 @@ const box5Data = ref({ ...@@ -689,25 +683,42 @@ const box5Data = ref({
} }
] ]
}); });
//获取当前时间十年前的日期
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 +728,8 @@ const handleGetThinkTankPolicyIndustryChange = async () => { ...@@ -717,8 +728,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 +800,7 @@ const box6YearList = ref([ ...@@ -789,7 +800,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 +943,83 @@ const handleBox7 = async () => { ...@@ -932,64 +943,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 +1028,52 @@ const handleClickCate = cate => { ...@@ -998,41 +1028,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) {
console.error("获取行业领域字典error", error);
} }
]); };
const selectedAreaList = ref(["全部领域"]);
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([
{ {
...@@ -1141,6 +1182,25 @@ const curFooterList = ref([ ...@@ -1141,6 +1182,25 @@ const curFooterList = ref([
} }
]); ]);
//获取智库报告
const handleGetetThinkTankReport = async () => {
const params = {
currentPage: 1,
pageSize: 10,
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;
}
} catch (error) {
console.error("获取智库报告error", error);
}
};
const handleClick = tank => { const handleClick = 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 } });
...@@ -1162,10 +1222,14 @@ const handleToMoreRiskSignal = () => { ...@@ -1162,10 +1222,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 +1237,19 @@ onMounted(async () => { ...@@ -1173,16 +1237,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 +1266,20 @@ onMounted(async () => { ...@@ -1199,16 +1266,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 +1291,11 @@ onMounted(async () => { ...@@ -1220,9 +1291,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 +1308,17 @@ onMounted(async () => { ...@@ -1235,14 +1308,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 +1330,7 @@ onMounted(async () => { ...@@ -1254,6 +1330,7 @@ onMounted(async () => {
} }
} }
} }
.home-main-header-footer { .home-main-header-footer {
margin-top: 38px; margin-top: 38px;
width: 688px; width: 688px;
...@@ -1261,9 +1338,11 @@ onMounted(async () => { ...@@ -1261,9 +1338,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 +1351,7 @@ onMounted(async () => { ...@@ -1272,6 +1351,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 +1363,14 @@ onMounted(async () => { ...@@ -1283,12 +1363,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 +1383,13 @@ onMounted(async () => { ...@@ -1301,11 +1383,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 +1398,14 @@ onMounted(async () => { ...@@ -1314,12 +1398,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 +1413,13 @@ onMounted(async () => { ...@@ -1327,11 +1413,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 +1430,7 @@ onMounted(async () => { ...@@ -1342,6 +1430,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 +1442,17 @@ onMounted(async () => { ...@@ -1353,14 +1442,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 +1466,30 @@ onMounted(async () => { ...@@ -1374,25 +1466,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 +1501,7 @@ onMounted(async () => { ...@@ -1404,6 +1501,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 +1513,7 @@ onMounted(async () => { ...@@ -1415,6 +1513,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 +1531,12 @@ onMounted(async () => { ...@@ -1432,10 +1531,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 +1547,7 @@ onMounted(async () => { ...@@ -1446,6 +1547,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 +1555,7 @@ onMounted(async () => { ...@@ -1453,6 +1555,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 +1563,7 @@ onMounted(async () => { ...@@ -1460,6 +1563,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 +1571,7 @@ onMounted(async () => { ...@@ -1467,6 +1571,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 +1580,7 @@ onMounted(async () => { ...@@ -1475,6 +1580,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 +1599,13 @@ onMounted(async () => { ...@@ -1493,11 +1599,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 +1614,7 @@ onMounted(async () => { ...@@ -1506,6 +1614,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 +1622,13 @@ onMounted(async () => { ...@@ -1513,11 +1622,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 +1636,34 @@ onMounted(async () => { ...@@ -1525,28 +1636,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 +1678,28 @@ onMounted(async () => { ...@@ -1561,23 +1678,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 +1712,7 @@ onMounted(async () => { ...@@ -1590,6 +1712,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 +1720,7 @@ onMounted(async () => { ...@@ -1597,6 +1720,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 +1737,7 @@ onMounted(async () => { ...@@ -1613,6 +1737,7 @@ onMounted(async () => {
text-align: left; text-align: left;
} }
} }
.content { .content {
margin-top: 17px; margin-top: 17px;
width: 462px; width: 462px;
...@@ -1625,14 +1750,17 @@ onMounted(async () => { ...@@ -1625,14 +1750,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 +1771,23 @@ onMounted(async () => { ...@@ -1643,19 +1771,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 +1803,7 @@ onMounted(async () => { ...@@ -1671,6 +1803,7 @@ onMounted(async () => {
} }
} }
} }
.box2 { .box2 {
width: 521px; width: 521px;
height: 450px; height: 450px;
...@@ -1678,26 +1811,31 @@ onMounted(async () => { ...@@ -1678,26 +1811,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 +1846,7 @@ onMounted(async () => { ...@@ -1708,6 +1846,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 +1861,7 @@ onMounted(async () => { ...@@ -1722,6 +1861,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 +1873,19 @@ onMounted(async () => { ...@@ -1733,16 +1873,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 +1904,29 @@ onMounted(async () => { ...@@ -1761,24 +1904,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 +1938,7 @@ onMounted(async () => { ...@@ -1790,6 +1938,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 +1950,7 @@ onMounted(async () => { ...@@ -1801,6 +1950,7 @@ onMounted(async () => {
} }
} }
} }
.box2-footer { .box2-footer {
position: absolute; position: absolute;
left: 30px; left: 30px;
...@@ -1815,14 +1965,17 @@ onMounted(async () => { ...@@ -1815,14 +1965,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 +1986,20 @@ onMounted(async () => { ...@@ -1833,17 +1986,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 +2008,21 @@ onMounted(async () => { ...@@ -1852,17 +2008,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 +2033,7 @@ onMounted(async () => { ...@@ -1873,6 +2033,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 +2049,40 @@ onMounted(async () => { ...@@ -1888,33 +2049,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 +2096,7 @@ onMounted(async () => { ...@@ -1928,6 +2096,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 +2109,7 @@ onMounted(async () => { ...@@ -1940,6 +2109,7 @@ onMounted(async () => {
line-height: 22px; line-height: 22px;
} }
} }
.right-footer { .right-footer {
width: 657px; width: 657px;
height: 24px; height: 24px;
...@@ -1956,6 +2126,7 @@ onMounted(async () => { ...@@ -1956,6 +2126,7 @@ onMounted(async () => {
} }
} }
} }
.box4 { .box4 {
margin-left: 20px; margin-left: 20px;
width: 792px; width: 792px;
...@@ -1963,6 +2134,7 @@ onMounted(async () => { ...@@ -1963,6 +2134,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 +2143,18 @@ onMounted(async () => { ...@@ -1971,15 +2143,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 +2165,7 @@ onMounted(async () => { ...@@ -1990,6 +2165,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 +2180,14 @@ onMounted(async () => { ...@@ -2004,12 +2180,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 +2196,7 @@ onMounted(async () => { ...@@ -2018,6 +2196,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 +2211,44 @@ onMounted(async () => { ...@@ -2032,37 +2211,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 +2258,13 @@ onMounted(async () => { ...@@ -2072,11 +2258,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 +2273,11 @@ onMounted(async () => { ...@@ -2085,9 +2273,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 +2286,7 @@ onMounted(async () => { ...@@ -2096,6 +2286,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 +2296,7 @@ onMounted(async () => { ...@@ -2105,6 +2296,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 +2309,14 @@ onMounted(async () => { ...@@ -2117,12 +2309,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 +2325,7 @@ onMounted(async () => { ...@@ -2131,6 +2325,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 +2334,22 @@ onMounted(async () => { ...@@ -2139,18 +2334,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 +2361,7 @@ onMounted(async () => { ...@@ -2162,6 +2361,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 +2370,12 @@ onMounted(async () => { ...@@ -2170,10 +2370,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 +2384,7 @@ onMounted(async () => { ...@@ -2182,6 +2384,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 +2393,18 @@ onMounted(async () => { ...@@ -2190,15 +2393,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 +2415,7 @@ onMounted(async () => { ...@@ -2209,6 +2415,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 +2424,19 @@ onMounted(async () => { ...@@ -2217,16 +2424,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 +2445,7 @@ onMounted(async () => { ...@@ -2235,6 +2445,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 +2454,22 @@ onMounted(async () => { ...@@ -2243,18 +2454,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 +2481,7 @@ onMounted(async () => { ...@@ -2266,6 +2481,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 +2491,17 @@ onMounted(async () => { ...@@ -2275,14 +2491,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 +2514,12 @@ onMounted(async () => { ...@@ -2295,10 +2514,12 @@ onMounted(async () => {
} }
} }
} }
.box7-main { .box7-main {
height: 412px; height: 412px;
} }
} }
.box8 { .box8 {
width: 521px; width: 521px;
height: 460px; height: 460px;
...@@ -2307,6 +2528,7 @@ onMounted(async () => { ...@@ -2307,6 +2528,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 +2537,22 @@ onMounted(async () => { ...@@ -2315,18 +2537,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 +2564,7 @@ onMounted(async () => { ...@@ -2338,6 +2564,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 +2573,20 @@ onMounted(async () => { ...@@ -2346,17 +2573,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 +2614,22 @@ onMounted(async () => { ...@@ -2384,18 +2614,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 +2647,11 @@ onMounted(async () => { ...@@ -2413,9 +2647,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 +2659,11 @@ onMounted(async () => { ...@@ -2423,9 +2659,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 +2675,58 @@ onMounted(async () => { ...@@ -2437,48 +2675,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 +2734,7 @@ onMounted(async () => { ...@@ -2486,6 +2734,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 +2746,16 @@ onMounted(async () => { ...@@ -2497,13 +2746,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 +2764,7 @@ onMounted(async () => { ...@@ -2512,6 +2764,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 +2777,7 @@ onMounted(async () => { ...@@ -2524,6 +2777,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 +2791,7 @@ onMounted(async () => { ...@@ -2537,6 +2791,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 +2809,60 @@ onMounted(async () => { ...@@ -2554,42 +2809,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 +2878,12 @@ onMounted(async () => { ...@@ -2605,10 +2878,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 +2900,22 @@ onMounted(async () => { ...@@ -2625,18 +2900,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 +2923,85 @@ onMounted(async () => { ...@@ -2644,4 +2923,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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论