Skip to content

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

智库百科

上级 65555134
隐藏空白字符变更
内嵌 并排
正在显示 包含 265 行增加 和 34 行删除
src/api/thinkTank/overview.js
浏览文件 @ 0bceced4
...@@ -142,4 +142,51 @@ export function getThinkPolicy(params) { ...@@ -142,4 +142,51 @@ export function getThinkPolicy(params) {
method: 'GET', method: 'GET',
url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`, url: `/api/thinkTankInfo/policy/${params.id}/${params.startDate}`,
}) })
} }
\ No newline at end of file
//智库百科基本信息
export function getThinkTankInfoBasic(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/basic/${params}`,
})
}
//获取全球分支机构
export function getThinkTankInfoBranch(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/branch/${params}`,
})
}
//获取经费来源统计
export function getThinkTankFundsTotal(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsTotal/${params}`,
})
}
//获取经费来源
export function getThinkTankFundsSource(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/fundsSource/${params}`,
})
}
//获取研究领域演变
export function getThinkTankResearchAreae(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/researchArea/${params}`,
})
}
//获取核心研究人员
export function getThinkTankPerson(params) {
return request({
method: 'GET',
url: `/api/thinkTankInfo/person/${params}`,
})
}
src/views/thinkTank/ThinkTankDetail/thinkInfo/index.vue
浏览文件 @ 0bceced4
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</div> </div>
<div class="left-top-item"> <div class="left-top-item">
<div class="item-left">{{ "成立时间：" }}</div> <div class="item-left">{{ "成立时间：" }}</div>
<div class="item-right">{{ basicInfo.time }}</div> <div class="item-right">{{ basicInfo.foundingDate }}年</div>
</div> </div>
<div class="left-top-item"> <div class="left-top-item">
<div class="item-left">{{ "总部位置：" }}</div> <div class="item-left">{{ "总部位置：" }}</div>
...@@ -24,15 +24,15 @@ ...@@ -24,15 +24,15 @@
</div> </div>
<div class="left-top-item"> <div class="left-top-item">
<div class="item-left">{{ "机构性质：" }}</div> <div class="item-left">{{ "机构性质：" }}</div>
<div class="item-right">{{ basicInfo.type }}</div> <div class="item-right">{{ basicInfo.nature }}</div>
</div> </div>
<div class="left-top-item"> <div class="left-top-item">
<div class="item-left">{{ "员工数量：" }}</div> <div class="item-left">{{ "员工数量：" }}</div>
<div class="item-right">{{ basicInfo.num }}</div> <div class="item-right">约 {{ basicInfo.memnum }}名员工</div>
</div> </div>
<div class="left-top-item"> <div class="left-top-item">
<div class="item-left">{{ "年度预算：" }}</div> <div class="item-left">{{ "年度预算：" }}</div>
<div class="item-right">{{ basicInfo.money }}</div> <div class="item-right">约{{ basicInfo.budget }}亿美元</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -42,11 +42,11 @@ ...@@ -42,11 +42,11 @@
<div class="title">{{ "全球分支机构" }}</div> <div class="title">{{ "全球分支机构" }}</div>
</div> </div>
<div class="left-bottom-main"> <div class="left-bottom-main">
<div class="left-bottom-item"> <div class="left-bottom-item" v-for="item in worldInfo">
<div class="item-left">{{ "北美:" }}</div> <div class="item-left">{{ item.area }}:</div>
<div class="item-right">{{ worldInfo.position1 }}</div> <div class="item-right">{{ item.city }}</div>
</div> </div>
<div class="left-bottom-item"> <!-- <div class="left-bottom-item">
<div class="item-left">{{ "欧洲:" }}</div> <div class="item-left">{{ "欧洲:" }}</div>
<div class="item-right">{{ worldInfo.position2 }}</div> <div class="item-right">{{ worldInfo.position2 }}</div>
</div> </div>
...@@ -57,7 +57,7 @@ ...@@ -57,7 +57,7 @@
<div class="left-bottom-item"> <div class="left-bottom-item">
<div class="item-left">{{ "澳大利亚:" }}</div> <div class="item-left">{{ "澳大利亚:" }}</div>
<div class="item-right">{{ worldInfo.position4 }}</div> <div class="item-right">{{ worldInfo.position4 }}</div>
</div> </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -82,15 +82,15 @@ ...@@ -82,15 +82,15 @@
<div class="box1-main-left"> <div class="box1-main-left">
<div class="card1"> <div class="card1">
<div class="card-title">{{ "总计" }}</div> <div class="card-title">{{ "总计" }}</div>
<div class="card-num">{{ box1LeftData.total }}</div> <div class="card-num">{{ box1LeftData.totalJe / 100000000 }}亿美元</div>
</div> </div>
<div class="card2"> <div class="card2">
<div class="card-title">{{ "政府部门" }}</div> <div class="card-title">{{ "政府部门" }}</div>
<div class="card-num">{{ box1LeftData.gov }}</div> <div class="card-num">{{ box1LeftData.zfJe }}亿美元</div>
</div> </div>
<div class="card3"> <div class="card3">
<div class="card-title">{{ "其他机构" }}</div> <div class="card-title">{{ "其他机构" }}</div>
<div class="card-num">{{ box1LeftData.other }}</div> <div class="card-num">{{ box1LeftData.otherJe }}亿美元</div>
</div> </div>
</div> </div>
<div class="box1-main-right" id="box1Chart"></div> <div class="box1-main-right" id="box1Chart"></div>
...@@ -120,12 +120,8 @@ ...@@ -120,12 +120,8 @@
<img src="@/assets/images/icon/card-btn-right.png" alt="" /> <img src="@/assets/images/icon/card-btn-right.png" alt="" />
</div> </div>
<div class="box2-line-box"></div> <div class="box2-line-box"></div>
<div <div class="box2-item" :class="{ box2ItemFooter: index % 2 }" v-for="(item, index) in timeLineList"
class="box2-item" :key="index">
:class="{ box2ItemFooter: index % 2 }"
v-for="(item, index) in timeLineList"
:key="index"
>
<div class="point" :class="{ pointFooter: index % 2 }"> <div class="point" :class="{ pointFooter: index % 2 }">
<img src="./images/point.png" alt="" /> <img src="./images/point.png" alt="" />
</div> </div>
...@@ -133,7 +129,7 @@ ...@@ -133,7 +129,7 @@
<div class="title">{{ item.time }}</div> <div class="title">{{ item.time }}</div>
</div> </div>
<div class="box2-item-content"> <div class="box2-item-content">
{{ item.content }} {{ item.describe }}
</div> </div>
</div> </div>
</div> </div>
...@@ -159,14 +155,14 @@ ...@@ -159,14 +155,14 @@
<div class="box3-main-right"> <div class="box3-main-right">
<div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index"> <div class="box3-right-item" v-for="(item, index) in box3RightData" :key="index">
<div class="icon"> <div class="icon">
<img :src="item.img" alt="" /> <img :src="item.imageUrl" alt="" />
</div> </div>
<div class="info"> <div class="info">
<div class="info-header"> <div class="info-header">
<div class="name">{{ item.name }}</div> <div class="name">{{ item.name }}</div>
<div class="position">{{ item.postion }}</div> <div class="position">{{ item.positionTitle }}</div>
</div> </div>
<div class="info-footer">{{ item.desc }}</div> <div class="info-footer">{{ item.describe }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -181,7 +177,18 @@ import { ref, onMounted } from "vue"; ...@@ -181,7 +177,18 @@ import { ref, onMounted } from "vue";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import getPieChart from "./utils/piechart"; import getPieChart from "./utils/piechart";
import getTreeMapChart from "./utils/treeMapChart"; import getTreeMapChart from "./utils/treeMapChart";
import {
getThinkTankInfoBasic,
getThinkTankInfoBranch,
getThinkTankFundsTotal,
getThinkTankFundsSource,
getThinkTankResearchAreae,
getThinkTankPerson
} from "@/api/thinkTank/overview";
import { useRouter } from "vue-router";
const router = useRouter();
import InfoImg from "./images/img.png"; import InfoImg from "./images/img.png";
import Icon1 from "./images/icon1.png"; import Icon1 from "./images/icon1.png";
import Icon2 from "./images/icon2.png"; import Icon2 from "./images/icon2.png";
...@@ -191,14 +198,29 @@ import Icon5 from "./images/icon5.png"; ...@@ -191,14 +198,29 @@ import Icon5 from "./images/icon5.png";
// 基本信息 // 基本信息
const basicInfo = ref({ const basicInfo = ref({
img: InfoImg, // img: InfoImg,
country: "美国", // country: "美国",
time: "1948年", // time: "1948年",
position: "美国加利福尼亚州圣莫尼卡 ", // position: "美国加利福尼亚州圣莫尼卡 ",
type: "非营利性研究与分析机构 ", // type: "非营利性研究与分析机构 ",
num: "约1,700名员工 ", // num: "约1,700名员工 ",
money: "约3.5亿美元 " // money: "约3.5亿美元 "
}); });
// getThinkTankInfoBasic
const handleGetThinkTankInfoBasic = async () => {
try {
const res = await getThinkTankInfoBasic(router.currentRoute._value.params.id);
console.log("基本信息", res);
if (res.code === 200 && res.data) {
basicInfo.value = res.data
}
} catch (error) {
console.error("获取基本信息error", error);
}
};
// 全球分支机构 // 全球分支机构
const worldInfo = ref({ const worldInfo = ref({
position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿", position1: "圣莫尼卡（总部）、华盛顿特区、匹兹堡、波士顿",
...@@ -207,6 +229,41 @@ const worldInfo = ref({ ...@@ -207,6 +229,41 @@ const worldInfo = ref({
position4: "堪培拉 " position4: "堪培拉 "
}); });
// 全球分支机构
const handleGetThinkTankInfoBranch = async () => {
try {
const res = await getThinkTankInfoBranch(router.currentRoute._value.params.id);
console.log("全球分支机构", res);
if (res.code === 200 && res.data) {
// 创建一个对象来存储分组后的数据
const groupedData = {};
// 遍历数据，按 area 分组
res.data.forEach(item => {
if (!groupedData[item.area]) {
groupedData[item.area] = {
area: item.area,
city: []
};
}
groupedData[item.area].city.push(item.city);
});
// 将每个分组中的 city 转换为逗号分隔的字符串
const result = Object.values(groupedData).map(group => ({
area: group.area,
city: group.city.join(", ")
}));
worldInfo.value = result
}
} catch (error) {
console.error("获取全球分支机构error", error);
}
};
// 经费来源 // 经费来源
const box1LeftData = ref({ const box1LeftData = ref({
total: "4.358亿美元", total: "4.358亿美元",
...@@ -252,6 +309,41 @@ const box1ChartData = ref([ ...@@ -252,6 +309,41 @@ const box1ChartData = ref([
} }
]); ]);
const handleGetThinkTankFundsTotal = async () => {
try {
const res = await getThinkTankFundsTotal(router.currentRoute._value.params.id);
console.log("获取经费来源统计", res);
if (res.code === 200 && res.data) {
box1LeftData.value = res.data
}
} catch (error) {
console.error("获取经费来源统计error", error);
}
};
const handleGetThinkTankFundsSource = async () => {
try {
const res = await getThinkTankFundsSource(router.currentRoute._value.params.id);
console.log("获取经费来源", res);
if (res.code === 200 && res.data) {
let data = []
res.data.map(item => {
data.push({
name: item.institution,
value: item.amount,
})
})
box1ChartData.value = data
const box1Chart = getPieChart(box1ChartData.value);
setChart(box1Chart, "box1Chart");
}
} catch (error) {
console.error("获取经费来源error", error);
}
};
// 研究领域演变 // 研究领域演变
const timeLineList = ref([ const timeLineList = ref([
{ {
...@@ -276,7 +368,18 @@ const timeLineList = ref([ ...@@ -276,7 +368,18 @@ const timeLineList = ref([
} }
]); ]);
const handleGetThinkTankResearchAreae = async () => {
try {
const res = await getThinkTankResearchAreae(router.currentRoute._value.params.id);
console.log("研究领域演变", res);
if (res.code === 200 && res.data) {
timeLineList.value = res.data
}
} catch (error) {
console.error("获取研究领域演变error", error);
}
};
// 核心研究人员 // 核心研究人员
const handleBox3Chart = () => { const handleBox3Chart = () => {
// 将分类数据转换为树状图格式 // 将分类数据转换为树状图格式
...@@ -361,9 +464,26 @@ const box3RightData = ref([ ...@@ -361,9 +464,26 @@ const box3RightData = ref([
} }
]); ]);
const handleGetThinkPerson = async () => {
try {
const res = await getThinkTankPerson(router.currentRoute._value.params.id);
console.log("核心研究人员", res);
if (res.code === 200 && res.data) {
box3RightData.value = res.data
}
} catch (error) {
console.error("获取核心研究人员error", error);
}
};
onMounted(() => { onMounted(() => {
const box1Chart = getPieChart(box1ChartData.value); handleGetThinkTankInfoBasic()
setChart(box1Chart, "box1Chart"); handleGetThinkTankInfoBranch()
handleGetThinkTankFundsTotal()
handleGetThinkTankFundsSource()
handleGetThinkTankResearchAreae()
handleGetThinkPerson()
handleBox3Chart(); handleBox3Chart();
}); });
...@@ -375,17 +495,20 @@ onMounted(() => { ...@@ -375,17 +495,20 @@ onMounted(() => {
height: 100%; height: 100%;
display: flex; display: flex;
gap: 16px; gap: 16px;
.left { .left {
margin-top: 16px; margin-top: 16px;
width: 480px; width: 480px;
height: 796px; height: 100%;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1); border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.left-box-header { .left-box-header {
display: flex; display: flex;
.icon { .icon {
margin-top: 5px; margin-top: 5px;
width: 8px; width: 8px;
...@@ -393,6 +516,7 @@ onMounted(() => { ...@@ -393,6 +516,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: var(--color-main-active); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -404,26 +528,31 @@ onMounted(() => { ...@@ -404,26 +528,31 @@ onMounted(() => {
text-align: left; text-align: left;
} }
} }
.left-top { .left-top {
margin-top: 14px; margin-top: 14px;
height: 515px; height: 515px;
.img-box { .img-box {
width: 437px; width: 437px;
height: 204px; height: 204px;
margin: 0 auto; margin: 0 auto;
margin-top: 16px; margin-top: 16px;
margin-bottom: 22px; margin-bottom: 22px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.left-top-item { .left-top-item {
display: flex; display: flex;
margin-top: 12px; margin-top: 12px;
width: 332px; width: 332px;
height: 24px; height: 24px;
margin-left: 34px; margin-left: 34px;
.item-left { .item-left {
width: 88px; width: 88px;
height: 24px; height: 24px;
...@@ -435,6 +564,7 @@ onMounted(() => { ...@@ -435,6 +564,7 @@ onMounted(() => {
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
} }
.item-right { .item-right {
width: 240px; width: 240px;
height: 24px; height: 24px;
...@@ -448,14 +578,17 @@ onMounted(() => { ...@@ -448,14 +578,17 @@ onMounted(() => {
} }
} }
} }
.left-bottom { .left-bottom {
.left-bottom-main { .left-bottom-main {
margin-top: 4px; margin-top: 4px;
.left-bottom-item { .left-bottom-item {
display: flex; display: flex;
width: 354px; width: 354px;
margin-left: 34px; margin-left: 34px;
margin-top: 12px; margin-top: 12px;
.item-left { .item-left {
width: 88px; width: 88px;
height: 24px; height: 24px;
...@@ -467,6 +600,7 @@ onMounted(() => { ...@@ -467,6 +600,7 @@ onMounted(() => {
letter-spacing: 1px; letter-spacing: 1px;
text-align: left; text-align: left;
} }
.item-right { .item-right {
margin-left: 4px; margin-left: 4px;
width: 240px; width: 240px;
...@@ -482,9 +616,11 @@ onMounted(() => { ...@@ -482,9 +616,11 @@ onMounted(() => {
} }
} }
} }
.right { .right {
width: 1104px; width: 1104px;
height: 1245px; height: 1245px;
.box { .box {
width: 1104px; width: 1104px;
height: 390px; height: 390px;
...@@ -494,10 +630,12 @@ onMounted(() => { ...@@ -494,10 +630,12 @@ onMounted(() => {
border-radius: 10px; border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
.box-header { .box-header {
height: 56px; height: 56px;
display: flex; display: flex;
position: relative; position: relative;
.header-left { .header-left {
margin-top: 20px; margin-top: 20px;
width: 8px; width: 8px;
...@@ -505,6 +643,7 @@ onMounted(() => { ...@@ -505,6 +643,7 @@ onMounted(() => {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
background: var(--color-main-active); background: var(--color-main-active);
} }
.title { .title {
margin-left: 14px; margin-left: 14px;
margin-top: 20px; margin-top: 20px;
...@@ -516,6 +655,7 @@ onMounted(() => { ...@@ -516,6 +655,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
line-height: 16px; line-height: 16px;
} }
.header-right { .header-right {
position: absolute; position: absolute;
top: 14px; top: 14px;
...@@ -523,9 +663,11 @@ onMounted(() => { ...@@ -523,9 +663,11 @@ onMounted(() => {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
.icon { .icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -533,17 +675,21 @@ onMounted(() => { ...@@ -533,17 +675,21 @@ onMounted(() => {
} }
} }
} }
.box1-main { .box1-main {
display: flex; display: flex;
.box1-main-left { .box1-main-left {
width: 156px; width: 156px;
margin-left: 41px; margin-left: 41px;
margin-top: 26px; margin-top: 26px;
.card1 { .card1 {
width: 156px; width: 156px;
height: 72px; height: 72px;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 244, 255, 1), rgba(230, 244, 255, 0) 100%); background: linear-gradient(180deg, rgba(230, 244, 255, 1), rgba(230, 244, 255, 0) 100%);
.card-title { .card-title {
height: 24px; height: 24px;
margin-top: 8px; margin-top: 8px;
...@@ -556,6 +702,7 @@ onMounted(() => { ...@@ -556,6 +702,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.card-num { .card-num {
margin-top: 5px; margin-top: 5px;
margin-left: 19px; margin-left: 19px;
...@@ -569,12 +716,14 @@ onMounted(() => { ...@@ -569,12 +716,14 @@ onMounted(() => {
text-align: left; text-align: left;
} }
} }
.card2 { .card2 {
margin-top: 20px; margin-top: 20px;
width: 156px; width: 156px;
height: 72px; height: 72px;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(180deg, rgba(255, 241, 240, 1), rgba(255, 241, 240, 0) 100%); background: linear-gradient(180deg, rgba(255, 241, 240, 1), rgba(255, 241, 240, 0) 100%);
.card-title { .card-title {
height: 24px; height: 24px;
margin-top: 8px; margin-top: 8px;
...@@ -587,6 +736,7 @@ onMounted(() => { ...@@ -587,6 +736,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.card-num { .card-num {
margin-top: 5px; margin-top: 5px;
margin-left: 19px; margin-left: 19px;
...@@ -600,12 +750,14 @@ onMounted(() => { ...@@ -600,12 +750,14 @@ onMounted(() => {
text-align: left; text-align: left;
} }
} }
.card3 { .card3 {
margin-top: 20px; margin-top: 20px;
width: 156px; width: 156px;
height: 72px; height: 72px;
border-radius: 4px; border-radius: 4px;
background: linear-gradient(180deg, rgba(230, 255, 251, 1), rgba(230, 255, 251, 0) 100%); background: linear-gradient(180deg, rgba(230, 255, 251, 1), rgba(230, 255, 251, 0) 100%);
.card-title { .card-title {
height: 24px; height: 24px;
margin-top: 8px; margin-top: 8px;
...@@ -618,6 +770,7 @@ onMounted(() => { ...@@ -618,6 +770,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
} }
.card-num { .card-num {
margin-top: 5px; margin-top: 5px;
margin-left: 19px; margin-left: 19px;
...@@ -632,6 +785,7 @@ onMounted(() => { ...@@ -632,6 +785,7 @@ onMounted(() => {
} }
} }
} }
.box1-main-right { .box1-main-right {
margin-left: 38px; margin-left: 38px;
margin-top: 26px; margin-top: 26px;
...@@ -639,11 +793,13 @@ onMounted(() => { ...@@ -639,11 +793,13 @@ onMounted(() => {
height: 270px; height: 270px;
} }
} }
.box2-main { .box2-main {
height: 320px; height: 320px;
display: flex; display: flex;
position: relative; position: relative;
padding-left: 150px; padding-left: 150px;
.box2-arrow-left { .box2-arrow-left {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -651,11 +807,13 @@ onMounted(() => { ...@@ -651,11 +807,13 @@ onMounted(() => {
left: 0; left: 0;
top: 130px; top: 130px;
z-index: 999; z-index: 999;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.box2-arrow-right { .box2-arrow-right {
width: 24px; width: 24px;
height: 48px; height: 48px;
...@@ -663,6 +821,7 @@ onMounted(() => { ...@@ -663,6 +821,7 @@ onMounted(() => {
right: 0; right: 0;
top: 130px; top: 130px;
z-index: 999; z-index: 999;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -677,6 +836,7 @@ onMounted(() => { ...@@ -677,6 +836,7 @@ onMounted(() => {
width: 1100px; width: 1100px;
background: url("./images/line-bg.png") repeat; background: url("./images/line-bg.png") repeat;
} }
.box2-item { .box2-item {
margin-top: 4px; margin-top: 4px;
width: 300px; width: 300px;
...@@ -686,9 +846,11 @@ onMounted(() => { ...@@ -686,9 +846,11 @@ onMounted(() => {
padding-left: 13px; padding-left: 13px;
margin-left: -100px; margin-left: -100px;
border-left: 1px solid #0a57a6; border-left: 1px solid #0a57a6;
.box2-item-header { .box2-item-header {
display: flex; display: flex;
width: 240px; width: 240px;
.title { .title {
color: var(--color-main-active); color: var(--color-main-active);
height: 26px; height: 26px;
...@@ -697,6 +859,7 @@ onMounted(() => { ...@@ -697,6 +859,7 @@ onMounted(() => {
font-weight: 700; font-weight: 700;
} }
} }
.box2-item-content { .box2-item-content {
width: 210px; width: 210px;
min-height: 48px; min-height: 48px;
...@@ -711,28 +874,33 @@ onMounted(() => { ...@@ -711,28 +874,33 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
overflow: hidden; overflow: hidden;
} }
.point { .point {
position: absolute; position: absolute;
left: -8px; left: -8px;
bottom: -7px; bottom: -7px;
width: 15px; width: 15px;
height: 15px; height: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.pointFooter { .pointFooter {
position: absolute; position: absolute;
left: -8px; left: -8px;
top: -7px; top: -7px;
width: 15px; width: 15px;
height: 15px; height: 15px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.time { .time {
height: 24px; height: 24px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -748,6 +916,7 @@ onMounted(() => { ...@@ -748,6 +916,7 @@ onMounted(() => {
left: 0; left: 0;
} }
} }
.box2ItemFooter { .box2ItemFooter {
margin-top: 154px; margin-top: 154px;
margin-left: -100px; margin-left: -100px;
...@@ -758,35 +927,43 @@ onMounted(() => { ...@@ -758,35 +927,43 @@ onMounted(() => {
.box3-main { .box3-main {
display: flex; display: flex;
.box3-main-left { .box3-main-left {
width: 536px; width: 536px;
height: 326px; height: 326px;
margin-left: 10px; margin-left: 10px;
} }
.box3-main-right { .box3-main-right {
margin-left: 10px; margin-left: 10px;
width: 536px; width: 536px;
height: 326px; height: 326px;
.box3-right-item { .box3-right-item {
display: flex; display: flex;
width: 520px; width: 520px;
height: 64px; height: 64px;
align-items: center; align-items: center;
.icon { .icon {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin-left: 8px; margin-left: 8px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.info { .info {
width: 459px; width: 459px;
margin-left: 13px; margin-left: 13px;
.info-header { .info-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.name { .name {
height: 24px; height: 24px;
color: rgba(59, 65, 75, 1); color: rgba(59, 65, 75, 1);
...@@ -796,6 +973,7 @@ onMounted(() => { ...@@ -796,6 +973,7 @@ onMounted(() => {
line-height: 24px; line-height: 24px;
letter-spacing: 1px; letter-spacing: 1px;
} }
.position { .position {
height: 22px; height: 22px;
color: var(--color-main-active); color: var(--color-main-active);
...@@ -807,6 +985,7 @@ onMounted(() => { ...@@ -807,6 +985,7 @@ onMounted(() => {
text-align: right; text-align: right;
} }
} }
.info-footer { .info-footer {
height: 22px; height: 22px;
color: rgba(95, 101, 108, 1); color: rgba(95, 101, 108, 1);
...@@ -816,6 +995,12 @@ onMounted(() => { ...@@ -816,6 +995,12 @@ onMounted(() => {
line-height: 22px; line-height: 22px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
white-space: nowrap;
/* 禁止自动换行 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 显示省略号 */
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论