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() {
})
}
//智库概览:获取智库发布
export function getNewReport() {
return request({
method: 'GET',
url: `/api/thinkTankOverview/newReport`,
})
}
// 风险信号
export function getThinkTankRiskSignal() {
return request({
......@@ -20,10 +29,10 @@ export function getThinkTankRiskSignal() {
}
// 政策建议趋势分布
export function getThinkTankPolicyIndustryChange() {
export function getThinkTankPolicyIndustryChange(params) {
return request({
method: 'GET',
url: `/api/thinkTankOverview/policyIndustryChange`,
url: `/api/thinkTankOverview/policyIndustryChange/${params}`,
})
}
......@@ -44,4 +53,32 @@ export function getThinkTankDonation() {
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 @@
</div>
<div class="content">{{ item.desc }}</div>
<div class="tag-box">
<div
class="tag"
:class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}"
v-for="(val, idx) in item.tagList"
:key="idx"
>
<div class="tag" :class="{
tag1: val.status === 1,
tag2: val.status === 2,
tag3: val.status === 3,
tag4: val.status === 4
}" v-for="(val, idx) in item.tagList" :key="idx">
{{ val.name }}
</div>
</div>
......@@ -112,26 +107,34 @@
<div class="title">{{ "智库发布" }}</div>
</div>
</div>
<div class="box1-main">
<div class="box1-main-left">
<img :src="box1Data.img" alt="" />
</div>
<div class="box1-main-right">
<div class="title">{{ box1Data.title }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box1Data.tagList" :key="index">{{ item }}</div>
<div style="display: flex">
<img src="./assets/images/right-left-icon1.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('previous')" />
<div class="box1-main">
<div class="box1-main-left">
<img :src="box1Data[box1DataIndex]?.imageUrl" alt="" />
</div>
<div class="content">{{ box1Data.content }}</div>
<div class="box1-right-footer">
<div class="time">{{ box1Data.time }}</div>
<div class="name">
<div class="logo">
<img :src="box1Data.logo" alt="" />
<div class="box1-main-right">
<div class="title">{{ box1Data[box1DataIndex]?.reportName }}</div>
<div class="tag-box">
<div class="tag" v-for="(item, index) in box1Data[box1DataIndex]?.industryVOList" :key="index">
{{ item }}
</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 class="text">{{ box1Data.from }}</div>
</div>
</div>
</div>
<img src="./assets/images/right-left-icon2.png" alt=""
style="margin-top: 174px; width: 24px; height: 48px" @click="changeBox1Data('next')" />
</div>
</div>
<div class="box2">
......@@ -146,14 +149,11 @@
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}"
>
<div class="item-left" :class="{
itemLeftStatus1: item.status === '一般风险 ' || item.status === '暂无数值',
itemLeftStatus2: item.status === '重大风险',
itemLeftStatus3: item.status === '特别重大'
}">
{{ item.status || "一般风险" }}
</div>
<div class="item-right">
......@@ -207,20 +207,14 @@
<div class="header-title">{{ "智库人物动态" }}</div>
</div>
<div class="box4-tag-box">
<div
class="tag"
:class="{
tagActive: box4ActiveTag === tag.name,
tag1: tag.status === 1,
tag2: tag.status === 2,
tag3: tag.status === 3,
tag4: tag.status === 4,
tag5: tag.status === 5
}"
v-for="(tag, index) in box4TagList"
:key="index"
@click="handleClickBox4Tag(tag.name)"
>
<div class="tag" :class="{
tagActive: box4ActiveTag === tag.name,
tag1: tag.status === 1,
tag2: tag.status === 2,
tag3: tag.status === 3,
tag4: tag.status === 4,
tag5: tag.status === 5
}" v-for="(tag, index) in box4TagList" :key="index" @click="handleClickBox4Tag(tag.name)">
{{ tag.name }}
</div>
</div>
......@@ -252,12 +246,8 @@
</div>
<div class="box5-select-box">
<el-select v-model="box5selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box5YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box5YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox5Data(item.value)" />
</el-select>
</div>
</div>
......@@ -271,12 +261,8 @@
<div class="header-title">{{ "政策建议领域分布" }}</div>
<div class="box6-select-box">
<el-select v-model="box6selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box6YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box6YearList" :key="item.value" :label="item.label" :value="item.value"
@click="handleBox6()" />
</el-select>
</div>
</div>
......@@ -305,30 +291,22 @@
</div>
<div class="box8-select-box">
<el-select v-model="box8selectetedYear" placeholder="选择时间" style="width: 120px">
<el-option
v-for="item in box8YearList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-option v-for="item in box8YearList" :key="item.value" :label="item.label" :value="item.value"
@click="changeBox8Data(item.value)" />
</el-select>
</div>
</div>
<div class="box8-main">
<div class="box8-item" v-for="(item, index) in box8Data" :key="index">
<div
class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
<div class="item-left"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ index + 1 }}
</div>
<div
class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }"
>
{{ item.title }}
<div class="item-center"
:class="{ itemBold1: index === 0, itemBold2: index === 1, itemBold3: index === 2 }">
{{ item.clause }}
</div>
<div class="item-right">{{ `${item.report} >` }}</div>
<div class="item-right">{{ `${item.count}份报告 >` }}</div>
</div>
</div>
</div>
......@@ -339,13 +317,8 @@
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
<div class="btn" :class="{ btnActive: activeCate === cate }" v-for="(cate, index) in categoryList"
:key="index" @click="handleClickCate(cate)">
{{ cate }}
</div>
</div>
......@@ -359,13 +332,11 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="research in areaList"
:key="research.id"
v-model="selectedAreaList"
:label="research.id"
class="filter-checkbox"
>
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
全部领域
</el-checkbox>
<el-checkbox v-for="research in areaList" :key="research.id" v-model="selectedAreaList"
:label="research.id" @change="handleCheckedAreaChange()" class="filter-checkbox">
{{ research.name }}
</el-checkbox>
</div>
......@@ -379,13 +350,8 @@
</div>
<div class="select-main">
<div class="checkbox-group">
<el-checkbox
v-for="time in pubTimeList"
:key="time.id"
v-model="selectedPubTimeList"
:label="time.id"
class="filter-checkbox"
>
<el-checkbox v-for="time in pubTimeList" :key="time.id" v-model="selectedPubTimeList" :label="time.id"
class="filter-checkbox">
{{ time.name }}
</el-checkbox>
</div>
......@@ -396,14 +362,14 @@
<div class="card-box">
<div class="footer-card" v-for="(item, index) in curFooterList" :key="index">
<div class="footer-card-top">
<img :src="item.img" alt="" />
<img :src="item.imageUrl" alt="" />
</div>
<div class="footer-card-title">
{{ item.title }}
{{ item.name }}
</div>
<div class="footer-card-footer">
<div class="time">{{ item.time }}</div>
<div class="from">{{ item.from }}</div>
<div class="time">{{ item.times }}</div>
<div class="from">{{ item.thinkTankName }}</div>
</div>
</div>
</div>
......@@ -434,7 +400,11 @@ import {
getThinkTankRiskSignal,
getThinkTankPolicyIndustryChange,
getThinkTankPolicyIndustry,
getThinkTankDonation
getThinkTankDonation,
getThinkTankHot,
getNewReport,
getHylyList,
getThinkTankReport
} from "@/api/thinkTank/overview";
import getMultiLineChart from "./utils/multiLineChart";
......@@ -472,7 +442,9 @@ import Img12 from "./assets/images/img12.png";
import Box1Img from "./assets/images/box1-img.png";
import Box1Logo from "./assets/images/box1-logo.png";
import { setCanvasCreator } from "echarts/core";
const input = ref(""); //搜索科技人物及观点
// 智库列表
const cardList = ref([
// {
......@@ -536,16 +508,38 @@ const handleGetThinkTankList = async () => {
};
// 智库发布
const box1DataIndex = ref(0);
const box1Data = ref({
img: Box1Img,
title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
tagList: ["外交", "军事", "经济"],
content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
time: "2025年9月16日",
from: "兰德科技智库",
logo: Box1Logo
// img: Box1Img,
// title: "中美经济竞争：复杂经济和地缘政治关系中的收益和风险",
// tagList: ["外交", "军事", "经济"],
// content: `自2017年以来，美中竞争，包括经济竞争，已成为美国外交政策的定义。这两个经济体是世界上第一和第二大国家经济体，彼此紧密交织。无论多么必要的关系变化，都可能付出高昂代价。因此，美国面临着在双重战略竞争条件下确保其经济满足国家需求的挑战。为应对这一挑战，兰德研究人员对美中竞争进行了经济和制度分析，开展了参与式前瞻性研究，以理解确保美国经济健全发展`,
// time: "2025年9月16日",
// from: "兰德科技智库",
// logo: Box1Logo
});
//获取智库发布
const handleGetNewReport = async () => {
try {
const res = await getNewReport();
console.log("智库发布", res);
if (res.code === 200 && res.data) {
box1Data.value = res.data;
}
} catch (error) {
console.error("获取智库列表error", error);
}
};
//前后切换智库发布
function changeBox1Data(type) {
console.log(type, box1DataIndex.value);
if (type === "previous") {
box1DataIndex.value === 0 ? "" : (box1DataIndex.value = box1DataIndex.value - 1);
} else {
box1DataIndex.value === box1Data.value.length - 1 ? "" : (box1DataIndex.value = box1DataIndex.value + 1);
}
}
// 风险信号
const warningList = ref([
{
......@@ -646,9 +640,9 @@ const box4TagList = ref([
}
]);
const box4ActiveTag = ref("通信网络");
const handleClickBox4Tag = (tag) => {
box4ActiveTag.value = tag
}
const handleClickBox4Tag = tag => {
box4ActiveTag.value = tag;
};
const messageList = 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 box5YearList = ref([
{
label: "近十年",
value: "近十年"
value: 10
},
{
label: "近五年",
value: "近五年"
value: 5
},
{
label: "近三年",
value: "近三年"
value: 3
}
]);
function changeBox5Data(value) {
handleBox5(getDateYearsAgo(value));
}
// 政策建议趋势分布
const handleGetThinkTankPolicyIndustryChange = async () => {
const handleGetThinkTankPolicyIndustryChange = async date => {
try {
const res = await getThinkTankPolicyIndustryChange();
const res = await getThinkTankPolicyIndustryChange(date);
console.log("政策建议趋势分布", res);
if (res.code === 200 && res.data) {
} else {
......@@ -717,8 +728,8 @@ const handleGetThinkTankPolicyIndustryChange = async () => {
console.error("获取政策建议趋势分布error", error);
}
};
const handleBox5 = async () => {
await handleGetThinkTankPolicyIndustryChange();
const handleBox5 = async date => {
await handleGetThinkTankPolicyIndustryChange(date);
let box5Chart = getMultiLineChart(
box5Data.value.title,
box5Data.value.data[0].value,
......@@ -789,7 +800,7 @@ const box6YearList = ref([
const handleGetThinkTankPolicyIndustry = async () => {
const params = {
apply: 1,
yaer: box6selectetedYear.value
year: box6selectetedYear.value
};
try {
const res = await getThinkTankPolicyIndustry(params);
......@@ -932,64 +943,83 @@ const handleBox7 = async () => {
// 智库研究热点
const box8Data = ref([
{
title: "人工智能领域竞争发展",
report: "11份报告"
},
{
title: "美元未来与能源出口挂钩",
report: "7份报告"
},
{
title: "量子领域国家合作",
report: "5份报告"
},
{
title: "限制中国产燃油进口",
report: "5份报告"
},
{
title: "禁止政府部门采购受控半导体或服务",
report: "4份报告"
},
{
title: "禁止向部分中国实体提供资金",
report: "3份报告"
},
{
title: "中国生产电池",
report: "2份报告"
},
{
title: "重视新兴中国技术公司威胁",
report: "2份报告"
},
{
title: "禁止卫星出口至中国",
report: "1份报告"
},
{
title: "华为设备",
report: "1份报告"
}
// {
// title: "人工智能领域竞争发展",
// report: "11份报告"
// },
// {
// title: "美元未来与能源出口挂钩",
// report: "7份报告"
// },
// {
// title: "量子领域国家合作",
// report: "5份报告"
// },
// {
// title: "限制中国产燃油进口",
// report: "5份报告"
// },
// {
// title: "禁止政府部门采购受控半导体或服务",
// report: "4份报告"
// },
// {
// title: "禁止向部分中国实体提供资金",
// report: "3份报告"
// },
// {
// title: "中国生产电池",
// report: "2份报告"
// },
// {
// title: "重视新兴中国技术公司威胁",
// report: "2份报告"
// },
// {
// title: "禁止卫星出口至中国",
// report: "1份报告"
// },
// {
// title: "华为设备",
// report: "1份报告"
// }
]);
const box8selectetedYear = ref("近一年");
const box8selectetedYear = ref(1);
const box8YearList = ref([
{
label: "近一年",
value: "近一年"
value: 1
},
{
label: "近两年",
value: "近两年"
value: 2
},
{
label: "近三年",
value: "近三年"
value: 3
}
]);
function changeBox8Data(value) {
handleGetThinkTankHot(getDateYearsAgo(value));
}
//智库研究热点
const handleGetThinkTankHot = async date => {
try {
const res = await getThinkTankHot(date);
console.log("智库研究热点", res);
if (res.code === 200 && res.data) {
box8Data.value = res.data;
} else {
box8Data.value = [];
}
} catch (error) {
console.error("获取智库研究热点error", error);
}
};
// 资源库
const categoryList = ref(["智库报告", "政策建议"]);
const activeCate = ref("智库报告");
......@@ -998,41 +1028,52 @@ const handleClickCate = cate => {
};
const areaList = ref([
{
id: "全部领域",
name: "全部领域"
},
{
id: "人工智能",
name: "人工智能"
},
{
id: "通信网络",
name: "通信网络"
},
{
id: "量子科技",
name: "量子科技"
},
{
id: "能源",
name: "能源"
},
{
id: "生物技术",
name: "生物技术"
},
// {
// id: "全部领域",
// name: "全部领域"
// },
// "通信网络",
// "量子科技",
// "能源"
]);
{
id: "新材料",
name: "新材料"
},
{
id: "海洋",
name: "海洋"
//获取行业领域字典
// getHylyList
const handleGetHylyList = async () => {
try {
const res = await getHylyList();
console.log("行业领域字典", res);
if (res.code === 200 && res.data) {
areaList.value = res.data;
}
} 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([
{
......@@ -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 => {
// router.push({ name: "ThinkTankDetail", params: { id: tank.id } });
const curRoute = router.resolve({ name: "ThinkTankDetail", params: { id: tank.id } });
......@@ -1162,10 +1222,14 @@ const handleToMoreRiskSignal = () => {
onMounted(async () => {
handleGetThinkTankList();
handleGetNewReport();
handleGetThinkTankRiskSignal();
handleBox5();
handleBox5(getDateYearsAgo(10));
handleBox6();
handleBox7();
handleGetHylyList();
handleGetThinkTankHot(getDateYearsAgo(1));
handleGetetThinkTankReport()
});
</script>
......@@ -1173,16 +1237,19 @@ onMounted(async () => {
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
width: 1920px;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
......@@ -1199,16 +1266,20 @@ onMounted(async () => {
color: #fff;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
}
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
......@@ -1220,9 +1291,11 @@ onMounted(async () => {
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
......@@ -1235,14 +1308,17 @@ onMounted(async () => {
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
......@@ -1254,6 +1330,7 @@ onMounted(async () => {
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 688px;
......@@ -1261,9 +1338,11 @@ onMounted(async () => {
box-sizing: border-box;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
......@@ -1272,6 +1351,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
......@@ -1283,12 +1363,14 @@ onMounted(async () => {
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
align-items: center;
......@@ -1301,11 +1383,13 @@ onMounted(async () => {
background: #e7f3ff;
cursor: pointer;
position: relative;
&:hover {
background: #cae3fc;
}
.btn-text {
width: 80px;
width: 82px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
......@@ -1314,12 +1398,14 @@ onMounted(async () => {
margin-left: 36px;
text-align: center;
}
.btn-icon {
position: absolute;
top: 16px;
right: 19px;
width: 6px;
height: 12px;
img {
width: 100%;
height: 100%;
......@@ -1327,11 +1413,13 @@ onMounted(async () => {
}
}
}
.home-main-header-card-box {
margin-top: 64px;
width: 1600px;
display: flex;
justify-content: space-between;
.card {
width: 253px;
height: 228px;
......@@ -1342,6 +1430,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.65);
transition: all 0.3s;
cursor: pointer;
&:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
......@@ -1353,14 +1442,17 @@ onMounted(async () => {
margin-top: 19px;
margin-left: 20px;
justify-content: space-between;
.icon {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
.rank {
width: 100px;
height: 32px;
......@@ -1374,25 +1466,30 @@ onMounted(async () => {
line-height: 32px;
letter-spacing: 0px;
}
.rank1 {
background: linear-gradient(270deg, rgba(206, 79, 81, 0.3), rgba(206, 79, 81, 0) 100%);
color: rgba(206, 79, 81, 1);
}
.rank2 {
background: linear-gradient(270deg, rgba(255, 172, 77, 0.3), rgba(255, 172, 77, 0) 100%);
color: rgba(255, 149, 77, 1);
}
.rank3 {
background: linear-gradient(270deg, rgba(255, 197, 61, 0.3), rgba(255, 197, 61, 0) 100%);
color: rgba(255, 197, 61, 1);
}
}
.card-title {
margin-top: 13px;
display: flex;
margin-left: 20px;
margin-right: 21px;
justify-content: space-between;
.title-left {
width: 175px;
height: 24px;
......@@ -1404,6 +1501,7 @@ onMounted(async () => {
letter-spacing: 1px;
text-align: left;
}
.title-right {
height: 22px;
color: rgba(132, 136, 142, 1);
......@@ -1415,6 +1513,7 @@ onMounted(async () => {
text-align: right;
}
}
.content {
margin: 13px auto 19px;
width: 212px;
......@@ -1432,10 +1531,12 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
}
.tag-box {
margin: 0 20px;
display: flex;
gap: 8px;
.tag {
height: 22px;
padding: 0 8px;
......@@ -1446,6 +1547,7 @@ onMounted(async () => {
font-weight: 400;
line-height: 20px;
}
.tag1 {
box-sizing: border-box;
border: 1px solid rgba(135, 232, 222, 1);
......@@ -1453,6 +1555,7 @@ onMounted(async () => {
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag2 {
box-sizing: border-box;
border: 1px solid rgba(186, 224, 255, 1);
......@@ -1460,6 +1563,7 @@ onMounted(async () => {
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
box-sizing: border-box;
border: 1px solid rgba(255, 229, 143, 1);
......@@ -1467,6 +1571,7 @@ onMounted(async () => {
background: rgba(255, 251, 230, 1);
color: rgba(250, 173, 20, 1);
}
.tag4 {
box-sizing: border-box;
border: 1px solid rgba(255, 163, 158, 1);
......@@ -1475,6 +1580,7 @@ onMounted(async () => {
color: rgba(245, 34, 45, 1);
}
}
.more {
margin: 103px auto;
height: 22px;
......@@ -1493,11 +1599,13 @@ onMounted(async () => {
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
......@@ -1506,6 +1614,7 @@ onMounted(async () => {
box-sizing: border-box;
border-radius: 10px;
position: relative;
.box1-left {
position: absolute;
left: 0;
......@@ -1513,11 +1622,13 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
......@@ -1525,28 +1636,34 @@ onMounted(async () => {
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-left: 19px;
margin-top: 16px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 112px;
height: 48px;
......@@ -1561,23 +1678,28 @@ onMounted(async () => {
}
}
}
.box1-main {
margin: 24px auto;
width: 948px;
height: 353px;
display: flex;
gap: 28px;
.box1-main-left {
width: 458px;
height: 353px;
border-radius: 4px;
img {
width: 100%;
height: 100%;
}
}
.box1-main-right {
width: 462px;
.title {
width: 462px;
max-height: 52px;
......@@ -1590,6 +1712,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.tag-box {
width: 462px;
height: 26px;
......@@ -1597,6 +1720,7 @@ onMounted(async () => {
margin-top: 16px;
display: flex;
gap: 8px;
.tag {
height: 26px;
padding: 0 8px;
......@@ -1613,6 +1737,7 @@ onMounted(async () => {
text-align: left;
}
}
.content {
margin-top: 17px;
width: 462px;
......@@ -1625,14 +1750,17 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: justify;
display: -webkit-box;
-webkit-line-clamp: 6; /* 限制行数为5 */
-webkit-line-clamp: 6;
/* 限制行数为5 */
-webkit-box-orient: vertical;
overflow: hidden;
}
.box1-right-footer {
margin-top: 31px;
display: flex;
justify-content: space-between;
.time {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -1643,19 +1771,23 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.name {
display: flex;
justify-content: flex-end;
gap: 6px;
.logo {
margin-top: 5px;
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(95, 101, 108, 1);
......@@ -1671,6 +1803,7 @@ onMounted(async () => {
}
}
}
.box2 {
width: 521px;
height: 450px;
......@@ -1678,26 +1811,31 @@ onMounted(async () => {
background: rgba(255, 255, 255, 1);
position: relative;
border-radius: 10px;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 18px;
margin-top: 14px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
margin-left: 18px;
.text {
margin-left: 15px;
margin-top: 13px;
......@@ -1708,6 +1846,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
......@@ -1722,6 +1861,7 @@ onMounted(async () => {
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 16px;
margin-left: 200px;
......@@ -1733,16 +1873,19 @@ onMounted(async () => {
cursor: pointer;
}
}
.box2-main {
margin-top: 2px;
height: 330px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
......@@ -1761,24 +1904,29 @@ onMounted(async () => {
padding: 6px 4px;
text-align: center;
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.itemLeftStatus3 {
color: rgba(245, 34, 45, 1);
background: rgba(255, 241, 240);
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 315px;
color: rgba(59, 65, 75, 1);
......@@ -1790,6 +1938,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
margin-left: 10px;
line-height: 47px;
......@@ -1801,6 +1950,7 @@ onMounted(async () => {
}
}
}
.box2-footer {
position: absolute;
left: 30px;
......@@ -1815,14 +1965,17 @@ onMounted(async () => {
background: var(--color-main-active);
gap: 8px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
......@@ -1833,17 +1986,20 @@ onMounted(async () => {
}
}
}
.center-center {
margin-top: 21px;
height: 450px;
display: flex;
justify-content: center;
.box3 {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -1852,17 +2008,21 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 19px;
......@@ -1873,6 +2033,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -1888,33 +2049,40 @@ onMounted(async () => {
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding-top: 6px;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
.title {
margin-top: 13px;
width: 520px;
......@@ -1928,6 +2096,7 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
flex: 1;
text-align: right;
......@@ -1940,6 +2109,7 @@ onMounted(async () => {
line-height: 22px;
}
}
.right-footer {
width: 657px;
height: 24px;
......@@ -1956,6 +2126,7 @@ onMounted(async () => {
}
}
}
.box4 {
margin-left: 20px;
width: 792px;
......@@ -1963,6 +2134,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
......@@ -1971,15 +2143,18 @@ onMounted(async () => {
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 18px;
......@@ -1990,6 +2165,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
......@@ -2004,12 +2180,14 @@ onMounted(async () => {
cursor: pointer;
}
}
.box4-tag-box {
height: 60px;
display: flex;
padding: 0 10px;
align-items: center;
gap: 8px;
.tag {
height: 28px;
line-height: 28px;
......@@ -2018,6 +2196,7 @@ onMounted(async () => {
border-radius: 4px;
cursor: pointer;
}
.tagActive {
height: 36px;
line-height: 36px;
......@@ -2032,37 +2211,44 @@ onMounted(async () => {
line-height: 36px;
letter-spacing: 1px;
}
.tag1 {
border: 1px solid rgba(135, 232, 222, 1);
background: rgba(230, 255, 251, 1);
color: rgba(19, 168, 168, 1);
}
.tag2 {
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
color: rgba(22, 119, 255, 1);
}
.tag3 {
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
color: rgba(250, 140, 22, 1);
}
.tag4 {
border: 1px solid rgba(255, 187, 150, 1);
background: rgba(255, 242, 232, 1);
color: rgba(250, 84, 28, 1);
}
.tag5 {
border: 1px solid rgba(255, 163, 158, 1);
background: rgba(255, 241, 240, 1);
color: rgba(206, 79, 81, 1);
}
}
.box4-main {
height: 342px;
overflow-y: auto;
box-sizing: border-box;
padding: 8px 0;
.box4-main-item {
margin-top: 16px;
display: flex;
......@@ -2072,11 +2258,13 @@ onMounted(async () => {
margin-top: 5px;
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
.right {
margin-left: 10px;
width: 690px;
......@@ -2085,9 +2273,11 @@ onMounted(async () => {
background: rgba(246, 250, 255, 1);
padding: 10px 15px;
border-radius: 4px;
.right-top {
display: flex;
justify-content: space-between;
.name {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -2096,6 +2286,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 24px;
}
.time {
height: 30px;
color: rgba(95, 101, 108, 1);
......@@ -2105,6 +2296,7 @@ onMounted(async () => {
line-height: 30px;
}
}
.content {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -2117,12 +2309,14 @@ onMounted(async () => {
}
}
}
.center-footer {
margin-top: 21px;
height: 460px;
display: flex;
justify-content: center;
gap: 15px;
.box5 {
width: 1064px;
height: 460px;
......@@ -2131,6 +2325,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2139,18 +2334,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2162,6 +2361,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box5-select-box {
width: 120px;
height: 28px;
......@@ -2170,10 +2370,12 @@ onMounted(async () => {
right: 25px;
}
}
.box5-main {
height: 397px;
}
}
.box6 {
width: 521px;
height: 460px;
......@@ -2182,6 +2384,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
......@@ -2190,15 +2393,18 @@ onMounted(async () => {
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-top: 18px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 15px;
......@@ -2209,6 +2415,7 @@ onMounted(async () => {
font-weight: 700;
line-height: 22px;
}
.box6-select-box {
width: 120px;
height: 28px;
......@@ -2217,16 +2424,19 @@ onMounted(async () => {
right: 25px;
}
}
.box6-main {
height: 360px;
}
}
}
.center-footer1 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 15px;
.box7 {
width: 1064px;
height: 460px;
......@@ -2235,6 +2445,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2243,18 +2454,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2266,6 +2481,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
......@@ -2275,14 +2491,17 @@ onMounted(async () => {
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
......@@ -2295,10 +2514,12 @@ onMounted(async () => {
}
}
}
.box7-main {
height: 412px;
}
}
.box8 {
width: 521px;
height: 460px;
......@@ -2307,6 +2528,7 @@ onMounted(async () => {
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
......@@ -2315,18 +2537,22 @@ onMounted(async () => {
justify-content: space-between;
padding: 0 20px;
position: relative;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 12px;
margin-left: 19px;
......@@ -2338,6 +2564,7 @@ onMounted(async () => {
line-height: 26px;
}
}
.box8-select-box {
width: 120px;
height: 28px;
......@@ -2346,17 +2573,20 @@ onMounted(async () => {
right: 25px;
}
}
.box8-main {
margin: 0 auto;
margin-top: 5px;
width: 452px;
height: 382px;
overflow: hidden;
.box8-item {
margin-top: 14px;
width: 452px;
height: 24px;
display: flex;
.item-left {
width: 20px;
height: 24px;
......@@ -2384,18 +2614,22 @@ onMounted(async () => {
text-overflow: ellipsis;
white-space: nowrap;
}
.itemBold1 {
color: rgba(206, 79, 81, 1);
font-weight: 700;
}
.itemBold2 {
color: rgba(255, 169, 64, 1);
font-weight: 700;
}
.itemBold3 {
color: rgba(255, 197, 61, 1);
font-weight: 700;
}
.item-right {
width: 92px;
height: 24px;
......@@ -2413,9 +2647,11 @@ onMounted(async () => {
}
}
}
.home-main-footer {
overflow: hidden;
background: rgba(247, 248, 249, 1);
.home-main-footer-header {
width: 1600px;
height: 42px;
......@@ -2423,9 +2659,11 @@ onMounted(async () => {
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
......@@ -2437,48 +2675,58 @@ onMounted(async () => {
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: var(--color-main-active);
color: #fff;
font-weight: 700;
&:hover {
color: #fff;
background: var(--color-main-active);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
margin: 0 auto;
margin-top: 36px;
width: 1600px;
display: flex;
gap: 16px;
.left {
width: 300px;
height: 600px;
width: 360px;
height: 100%;
padding-bottom: 36px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.select-box {
margin-top: 21px;
.header {
display: flex;
gap: 17px;
.icon {
margin-top: 4px;
width: 8px;
......@@ -2486,6 +2734,7 @@ onMounted(async () => {
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.title {
height: 24px;
color: var(--color-main-active);
......@@ -2497,13 +2746,16 @@ onMounted(async () => {
text-align: left;
}
}
.select-main {
margin-left: 25px;
}
.select-main1 {
width: 100px;
}
}
.left-footer-box {
left: 25px;
bottom: 20px;
......@@ -2512,6 +2764,7 @@ onMounted(async () => {
height: 149px;
border-radius: 4px;
background: rgba(246, 250, 255, 1);
.header {
margin-top: 8px;
margin-left: 21px;
......@@ -2524,6 +2777,7 @@ onMounted(async () => {
letter-spacing: 1px;
text-align: left;
}
.content {
margin: 0 auto;
margin-top: 11px;
......@@ -2537,6 +2791,7 @@ onMounted(async () => {
letter-spacing: 0px;
text-align: left;
}
.btn {
margin: 0 auto;
margin-top: 13px;
......@@ -2554,42 +2809,60 @@ onMounted(async () => {
}
}
}
.right {
width: 1284px;
height: 1377px;
.card-box {
width: 1284px;
width: 1226px;
height: 1248px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.footer-card {
width: 418px;
width: 398px;
height: 300px;
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.footer-card-top {
width: 384px;
height: 206px;
width: 364px;
height: 180px;
margin: 0 auto;
margin-top: 15px;
img {
width: 100%;
height: 100%;
}
}
.footer-card-title {
margin: 0 auto;
margin-top: 13px;
width: 376px;
height: 24px;
height: 48px;
/* 修改高度为两行的高度 */
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
display: -webkit-box;
/* 使用弹性盒模型 */
-webkit-line-clamp: 2;
/* 限制显示两行 */
-webkit-box-orient: vertical;
/* 设置盒模型方向为垂直 */
}
.footer-card-footer {
margin: 0 auto;
margin-top: 5px;
......@@ -2605,10 +2878,12 @@ onMounted(async () => {
}
}
}
.right-footer {
margin-top: 43px;
display: flex;
justify-content: space-between;
.info {
height: 19px;
color: rgba(132, 136, 142, 1);
......@@ -2625,18 +2900,22 @@ onMounted(async () => {
}
}
}
.divide-header {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
.filter-checkbox {
width: 105px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
......@@ -2644,4 +2923,85 @@ onMounted(async () => {
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
.page {
width: 1600px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin: 36px 0 0 0;
padding-left: 11px;
.count {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
:deep(.el-pagination) {
display: flex;
align-items: center;
}
:deep(.el-pagination.is-background .el-pager li) {
min-width: 32px;
height: 32px;
line-height: 32px;
border-radius: 6px;
margin: 0 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-weight: 400;
font-family: "Microsoft YaHei";
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
background-color: #fff;
color: rgba(22, 119, 255, 1);
border-color: rgba(22, 119, 255, 1);
}
:deep(.el-pagination.is-background .el-pager li.is-ellipsis) {
border: none;
background-color: transparent;
color: rgb(95, 101, 108);
min-width: 16px;
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev),
:deep(.el-pagination.is-background .btn-next) {
min-width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.15);
background-color: #fff;
color: rgb(95, 101, 108);
font-size: 16px;
font-family: "Microsoft YaHei";
margin: 0 6px;
}
:deep(.el-pagination.is-background .btn-prev.is-disabled),
:deep(.el-pagination.is-background .btn-next.is-disabled) {
color: rgba(95, 101, 108, 0.45);
border-color: rgb(235, 238, 242);
background-color: #fff;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论