Skip to content

R
risk-monitor
提交 561297c2 authored 作者: 朱政's avatar 朱政
浏览文件
操作

报告分析-核心观点、风险提示

上级 3766c4e2
隐藏空白字符变更
内嵌 并排
正在显示 包含 690 行增加 和 619 行删除
src/api/thinkTank/overview.js
浏览文件 @ 561297c2
...@@ -258,6 +258,21 @@ export function getThinkTankReportContent(params) { ...@@ -258,6 +258,21 @@ export function getThinkTankReportContent(params) {
}) })
} }
// 获取报告核心论点（支持关键字搜索）
export function getThinkTankReportViewpoint(params) {
const { reportId, currentPage, pageSize, keyword = '', orgIds = '' } = params
return request({
method: 'GET',
url: `/api/thinkTankReport/viewpoint/${reportId}`,
params: {
currentPage,
pageSize,
keyword,
orgIds,
}
})
}
//获取涉及科技领域 //获取涉及科技领域
export function getThinkTankReportIndustry(params) { export function getThinkTankReportIndustry(params) {
return request({ return request({
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 561297c2
<template> <template>
<div class="wrap"> <div class="wrap">
<div class="left"> <div class="top">
<div class="box1"> <WarningPane :warnningLevel="riskSignal?.level" :warnningContent="riskSignal?.content">
<!-- <div class="box-header"> </WarningPane>
</div>
<div class="bottom-row">
<div class="left">
<div class="box1">
<!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">内容摘要</div> <div class="title">内容摘要</div>
<div class="header-right"> <div class="header-right">
...@@ -17,44 +22,44 @@ ...@@ -17,44 +22,44 @@
<div class="box1-main"> <div class="box1-main">
{{ box1Data }} {{ box1Data }}
</div> --> </div> -->
<AnalysisBox title="基本信息" :showAllBtn="true"> <AnalysisBox title="基本信息" :showAllBtn="true">
<div class="box1-main"> <div class="box1-main">
<div class="text-box"> <div class="text-box">
<div class="time"> <div class="time">
<div class="time-title">发布时间:</div> <div class="time-title">发布时间:</div>
<div class="time-content">{{ publishTime }}</div> <div class="time-content">{{ publishTime }}</div>
</div> </div>
<div class="topic"> <div class="topic">
<div class="topic-title">报告主题:</div> <div class="topic-title">报告主题:</div>
<div class="topic-content">{{ reportTopic }}</div> <div class="topic-content">{{ reportTopic }}</div>
</div> </div>
<div class="author"> <div class="author">
<div class="author-title">报告作者:</div> <div class="author-title">报告作者:</div>
<div class="author-content"> <div class="author-content">
<template v-if="Array.isArray(reportAuthors) && reportAuthors.length"> <template v-if="Array.isArray(reportAuthors) && reportAuthors.length">
<span v-for="(author, idx) in reportAuthors" :key="idx"> <span v-for="(author, idx) in reportAuthors" :key="idx">
{{ author.name }} {{ author.name }}
<span v-if="idx < reportAuthors.length - 1">、</span> <span v-if="idx < reportAuthors.length - 1">、</span>
</span> </span>
</template> </template>
</div>
</div> </div>
</div> </div>
</div> <div class="author-box" v-for="(author, idx) in reportAuthors" :key="idx"
<div class="author-box" v-for="(author, idx) in reportAuthors" :key="idx" v-if="Array.isArray(reportAuthors) && reportAuthors.length">
v-if="Array.isArray(reportAuthors) && reportAuthors.length"> <div class="author-item">
<div class="author-item"> <div class="image"><img :src="author.avatar" :alt="reportAuthors[0].name" /></div>
<div class="image"><img :src="author.avatar" :alt="reportAuthors[0].name" /></div> <div class="author-text">
<div class="author-text"> <div class="author-name">{{ author.name }}</div>
<div class="author-name">{{ author.name }}</div> <div class="author-position">{{ author.job }}</div>
<div class="author-position">{{ author.job }}</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </AnalysisBox>
</AnalysisBox> </div>
</div> <div class="box2">
<div class="box2"> <!-- <div class="box-header">
<!-- <div class="box-header">
<div class="header-left"></div> <div class="header-left"></div>
<div class="title">涉及科技领域</div> <div class="title">涉及科技领域</div>
<div class="header-right"> <div class="header-right">
...@@ -69,97 +74,117 @@ ...@@ -69,97 +74,117 @@
<div class="box2-main"> <div class="box2-main">
<div class="box2-content" id="box2Chart"></div> <div class="box2-content" id="box2Chart"></div>
</div> --> </div> -->
<AnalysisBox title="相关报告" :showAllBtn="true"> <AnalysisBox title="相关报告" :showAllBtn="true">
<div class="box2-main"> <div class="box2-main">
<div class="box2-item" v-for="(report, idx) in reportList" :key="idx"> <div class="box2-item" v-for="(report, idx) in reportList" :key="idx">
<div class="box2-item-content"> <div class="box2-item-content">
<div class="left"><img :src="report.image" alt="" /></div> <div class="left"><img :src="report.image" alt="" /></div>
<div class="right-content"> <div class="right-content">
<div class="report-title">{{ report.name }}</div> <div class="report-title">{{ report.name }}</div>
<div class="report-footer"> <div class="report-footer">
<div class="report-time">{{ report.postDate }}</div> <div class="report-time">{{ report.postDate }}</div>
<div class="report-footer-right"> <div class="report-footer-right">
<div class="footer-image"> <div class="footer-image">
<img :src="report.thinktankLogo" alt="" /> <img :src="report.thinktankLogo" alt="" />
</div>
<div class="think-name">{{ report.thinktankName }}</div>
</div> </div>
<div class="think-name">{{ report.thinktankName }}</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="box2-btn">
<div class="box2-btn"> <div class="btn-text">
<div class="btn-text"> 多智库报告观点汇聚分析
多智库报告观点汇聚分析 </div>
</div> <div class="btn-image">
<div class="btn-image"> <img src="../images/btn-right.png" alt="">
<img src="../images/btn-right.png" alt=""> </div>
</div> </div>
</div> </AnalysisBox>
</AnalysisBox> </div>
</div> </div>
</div> <div class="right">
<div class="right"> <div class="box3">
<div class="box3"> <AnalysisBox title="报告摘要" :showAllBtn="true">
<AnalysisBox title="报告摘要" :showAllBtn="true"> <div class="box3-main">
<div class="box3-main"> <div class="box3-top">
<div class="box3-top"> <div class="top-title">
<div class="top-title"> <div class="title-image">
<div class="title-image"> <img src="../images/title-image.png" alt="" />
<img src="../images/title-image.png" alt="" /> </div>
</div> </div>
</div> </div>
<div class="box3-text"> {{ box1Data }}</div>
</div> </div>
<div class="box3-text"> {{ box1Data }}</div> </AnalysisBox>
</div> </div>
</AnalysisBox> <div class="box4">
</div> <AnalysisBox title="核心论点" :showAllBtn="true">
<div class="box4"> <div class="search-box">
<AnalysisBox title="核心论点" :showAllBtn="true"> <el-input placeholder="搜索观点" v-model="searchOpinions" style="width: 180px"
<div class="box4-main"> @keyup.enter="handleSearchOpinions" />
<div class="box4-main-main"> <div class="icon">
<div class="box4-item" v-for="(item, index) in majorOpinions" :key="index"> <img src="../images/Line_Search.png" alt="" @click="handleSearchOpinions" />
<div class="left"> </div>
{{ index + 1 }} </div>
</div> <div class="box4-main">
<div class="center"> <div class="box4-main-main">
<div class="title">{{ item.content }}</div> <div class="box4-item" v-for="(item, index) in filteredOpinions" :key="index">
<div> <div class="top-row">
<img src="../images/image-open.png" alt="" class="center-image" <div class="left">
@click="handleOpenReportOriginal(item)" /> {{ index + 1 }}
</div>
<div class="center">
<div class="title">{{ item.titleZh }}</div>
<div>
<img src="../images/image-open.png" alt="" class="center-image"
@click="handleOpenReportOriginal(item)" />
</div>
<div>
<img v-if="expandedIndex !== index" src="../images/image-down.png" alt="" class="center-image"
@click="toggleOpinion(index)" />
<img v-else src="../images/image-up.png" alt="" class="center-image"
@click="toggleOpinion(index)" />
</div>
</div>
</div> </div>
<!-- <div class="desc">{{ item.econtent }}</div> --> <div v-if="expandedIndex === index" class="desc">
</div> {{ item.contentZh }}
<!-- <div class="right"> --> </div>
<!-- <div class="tag" v-for="(val, idx) in item.hylyList" :key="idx"> <!-- <div class="right"> -->
<!-- <div class="tag" v-for="(val, idx) in item.hylyList" :key="idx">
{{ val }} {{ val }}
</div> </div>
<div class="tag" v-for="(val, idx) in item.serialNum" :key="idx"> <div class="tag" v-for="(val, idx) in item.serialNum" :key="idx">
{{ val }} {{ val }}
</div> --> </div> -->
<!-- <AreaTag v-for="(val, idx) in item.hylyList" :key="idx" :tagName="val"></AreaTag> <!-- <AreaTag v-for="(val, idx) in item.hylyList" :key="idx" :tagName="val"></AreaTag>
</div> --> </div> -->
<!-- <div class="more"> <!-- <div class="more">
<img src="@/assets/icons/open.png" alt="" /> <img src="@/assets/icons/open.png" alt="" />
</div> --> </div> -->
</div>
</div> </div>
</div> <div class="box4-main-footer">
<div class="box4-main-footer"> <div class="info">共{{ opinionsTotal }}条核心论点</div>
<div class="info">共{{ total }}条核心论点</div> <div class="page-box">
<div class="page-box"> <el-pagination :page-size="pageSize" background layout="prev, pager, next" :total="opinionsTotal"
<el-pagination :page-size="12" background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange" :current-page="currentPage" />
@current-change="handleCurrentChange" :current-page="currentPage" /> </div>
</div> </div>
</div> </div>
</div> </AnalysisBox>
</AnalysisBox> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import WarningPane from "@/components/base/WarningPane/index.vue"
import SearchContainer from "@/components/SearchContainer.vue";
import { ref, onMounted, computed, defineProps } from "vue"; import { ref, onMounted, computed, defineProps } from "vue";
import setChart from "@/utils/setChart"; import setChart from "@/utils/setChart";
import getWordCloudChart from "./utils/worldCloudChart"; import getWordCloudChart from "./utils/worldCloudChart";
...@@ -167,7 +192,8 @@ import { ...@@ -167,7 +192,8 @@ import {
getThinkTankReportAbstract, getThinkTankReportAbstract,
getThinkTankReportContent, getThinkTankReportContent,
getThinkTankReportIndustry, getThinkTankReportIndustry,
getThinkTankReportIndustryCloud getThinkTankReportIndustryCloud,
getThinkTankReportViewpoint
} from "@/api/thinkTank/overview"; } from "@/api/thinkTank/overview";
import { getChartAnalysis } from "@/api/aiAnalysis/index"; import { getChartAnalysis } from "@/api/aiAnalysis/index";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
...@@ -185,6 +211,28 @@ const props = defineProps({ ...@@ -185,6 +211,28 @@ const props = defineProps({
} }
}); });
const searchOpinions = ref('');
const handleSearchOpinions = () => {
currentPage.value = 1;
handleGetThinkTankReportViewpoint();
};
// 当前展开的核心论点下标（同一时刻只展开一条）
const expandedIndex = ref(null);
const filteredOpinions = computed(() => majorOpinions.value);
const opinionsTotal = computed(() => total.value);
const toggleOpinion = index => {
if (expandedIndex.value === index) {
expandedIndex.value = null;
} else {
expandedIndex.value = index;
}
};
const publishTime = computed(() => { const publishTime = computed(() => {
const info = props.thinkInfo || {}; const info = props.thinkInfo || {};
// 优先用 times，其次用 reportTime 的日期部分 // 优先用 times，其次用 reportTime 的日期部分
...@@ -207,6 +255,11 @@ const reportAuthors = computed(() => { ...@@ -207,6 +255,11 @@ const reportAuthors = computed(() => {
} }
return []; return [];
}); });
const riskSignal = computed(() => {
const info = props.thinkInfo || {};
return info.riskSignal;
});
// 内容摘要 // 内容摘要
...@@ -362,22 +415,27 @@ const pageSize = ref(10); ...@@ -362,22 +415,27 @@ const pageSize = ref(10);
const total = ref(0); const total = ref(0);
const handleCurrentChange = page => { const handleCurrentChange = page => {
currentPage.value = page; currentPage.value = page;
handleGetThinkTankReportContent(); handleGetThinkTankReportViewpoint();
}; };
//获取报告主要观点
const handleGetThinkTankReportContent = async () => { // 获取报告核心论点（支持搜索）
const handleGetThinkTankReportViewpoint = async () => {
try { try {
const params = { const params = {
id: router.currentRoute._value.params.id, reportId: router.currentRoute._value.params.id,
currentPage: currentPage.value - 1, currentPage: currentPage.value - 1,
pageSize: pageSize.value pageSize: pageSize.value,
keyword: (searchOpinions.value || "").trim(),
orgIds: ""
}; };
const res = await getThinkTankReportContent(params); const res = await getThinkTankReportViewpoint(params);
console.log("主要观点", res.data); console.log("核心论点", res.data);
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
majorOpinions.value = res.data.content || []; majorOpinions.value = res.data.content || [];
handleGetBox3AnalysisContent(majorOpinions.value);
total.value = res.data.totalElements || 0; total.value = res.data.totalElements || 0;
// 重置展开状态
expandedIndex.value = null;
} }
} catch (error) { } catch (error) {
console.error("获取主要观点error", error); console.error("获取主要观点error", error);
...@@ -396,7 +454,7 @@ const handleGetBox3AnalysisContent = async textJson => { ...@@ -396,7 +454,7 @@ const handleGetBox3AnalysisContent = async textJson => {
onMounted(() => { onMounted(() => {
handleGetThinkTankReportAbstract(); handleGetThinkTankReportAbstract();
handleGetThinkTankReportContent(); handleGetThinkTankReportViewpoint();
handleGetThinkTankReportIndustry(); handleGetThinkTankReportIndustry();
handleGetThinkTankReportIndustryCloud(); handleGetThinkTankReportIndustryCloud();
...@@ -409,661 +467,659 @@ onMounted(() => { ...@@ -409,661 +467,659 @@ onMounted(() => {
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
padding-bottom: 16px; padding-bottom: 16px;
flex-direction: column;
.box-header { .top {
margin-top: 16px;
width: 100%; width: 100%;
height: 50px; height: 100%;
justify-content: center;
display: flex; display: flex;
position: relative; }
.header-left {
margin-top: 18px;
width: 8px;
height: 20px;
border-radius: 0 4px 4px 0;
background: var(--color-main-active);
}
.title { .bottom-row {
margin-left: 14px;
margin-top: 14px;
height: 26px;
line-height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
}
.header-btn-box { flex-direction: row;
position: absolute; justify-content: center;
top: 15px; display: flex;
right: 83px; gap: 16px;
display: flex;
justify-content: flex-end;
gap: 8px;
.btn {
height: 28px;
padding: 0 8px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.btnActive {
color: var(--color-main-active);
border: 1px solid var(--color-main-active);
}
}
.header-right { .left {
position: absolute; gap: 16px;
top: 14px;
right: 12px;
display: flex; display: flex;
justify-content: flex-end; flex-direction: column;
gap: 4px;
.icon {
width: 28px;
height: 28px;
img { .box1 {
width: 100%; margin-top: 17px;
height: 100%;
}
}
}
}
.left {
gap: 16px;
display: flex;
flex-direction: column;
.box1 {
margin-top: 17px;
width: 480px;
height: 486px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box1-main {
width: 480px; width: 480px;
height: 438px; height: 486px;
.text-box { // border: 1px solid rgba(234, 236, 238, 1);
width: 437px; // border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
margin-left: 22px; // background: rgba(255, 255, 255, 1);
margin-top: 8px; .box1-main {
gap: 12px; width: 480px;
display: flex; height: 438px;
flex-direction: column;
.text-box {
.time { width: 437px;
height: 24px;
margin-left: 22px;
margin-top: 8px;
gap: 12px;
display: flex; display: flex;
gap: 4px; flex-direction: column;
.time-title {
width: 88px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.time-content {
width: 345px; .time {
font-family: "Source Han Sans CN"; height: 24px;
font-weight: 400; display: flex;
font-size: 16px; gap: 4px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
.topic {
display: flex;
gap: 4px;
.topic-title {
width: 88px;
font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
.time-title {
width: 88px;
} font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.topic-content { .time-content {
width: 345px; width: 345px;
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
}
} }
}
.author {
height: 24px;
display: flex;
gap: 4px;
.author-title {
width: 88px;
font-family: "Source Han Sans CN"; .topic {
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
}
.author-content { display: flex;
gap: 4px;
width: 345px; .topic-title {
font-family: "Source Han Sans CN"; width: 88px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
}
}
}
.author-box { font-family: "Source Han Sans CN";
width: 437px; font-weight: 700;
height: 220px; font-size: 16px;
margin-top: 34px; line-height: 24px;
margin-left: 18px; letter-spacing: 1px;
text-align: left;
color: rgb(59, 65, 75);
.author-item {
width: 213px;
height: 49px;
display: flex;
gap: 11px;
.image { }
width: 42px;
height: 42px;
margin-top: 3px;
margin-left: 3px;
display: inline-block;
.topic-content {
img { width: 345px;
width: 100%; font-family: "Source Han Sans CN";
height: 100%; font-weight: 400;
border-radius: 50%; font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
color: rgb(59, 65, 75);
} }
} }
.author-text { .author {
width: 154px; height: 24px;
height: 49px; display: flex;
gap: 4px;
.author-title {
width: 88px;
.author-name {
width: 154px;
height: 24px;
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
letter-spacing: 0; letter-spacing: 1px;
text-align: left; text-align: left;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
.author-position { .author-content {
width: 154px;
height: 22px; width: 345px;
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0; letter-spacing: 0px;
text-align: left; text-align: left;
color: rgb(95, 101, 108); color: rgb(59, 65, 75);
} }
} }
} }
} .author-box {
} width: 437px;
height: 220px;
margin-top: 34px;
} margin-left: 18px;
.box2 { .author-item {
width: 213px;
height: 49px;
display: flex;
gap: 11px;
width: 480px; .image {
height: 648px; width: 42px;
// border: 1px solid rgba(234, 236, 238, 1); height: 42px;
// border-radius: 10px; margin-top: 3px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); margin-left: 3px;
// background: rgba(255, 255, 255, 1); display: inline-block;
.box2-main {
width: 436px;
margin-top: 5px;
margin-left: 23px;
.box2-item { img {
height: 103px; width: 100%;
width: 100%; height: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1); border-radius: 50%;
border-top: 1px solid rgba(234, 236, 238, 1); }
}
.box2-item-content { .author-text {
width: 100%; width: 154px;
height: 90px; height: 49px;
margin-top: 7px;
display: flex;
.left { .author-name {
width: 56px; width: 154px;
height: 74px; height: 24px;
margin-top: 8px; font-family: "Source Han Sans CN";
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0;
text-align: left;
color: rgb(59, 65, 75);
}
img { .author-position {
width: 100%; width: 154px;
height: 100%; height: 22px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 22px;
letter-spacing: 0;
text-align: left;
color: rgb(95, 101, 108);
}
} }
} }
.right-content { }
margin-left: 13px; }
width: 365px;
height: 76px;
}
.box2 {
width: 480px;
height: 648px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box2-main {
width: 436px;
margin-top: 5px;
margin-left: 23px;
.box2-item {
height: 103px;
width: 100%;
border-bottom: 1px solid rgba(234, 236, 238, 1);
border-top: 1px solid rgba(234, 236, 238, 1);
.box2-item-content {
width: 100%;
height: 90px;
margin-top: 7px; margin-top: 7px;
display: flex;
.report-title { .left {
height: 48px; width: 56px;
font-family: "Source Han Sans CN"; height: 74px;
font-weight: 700; margin-top: 8px;
font-size: 16px;
line-height: 24px; img {
letter-spacing: 0; width: 100%;
text-align: left; height: 100%;
}
} }
.report-footer { .right-content {
margin-top: 4px; margin-left: 13px;
height: 22px; width: 365px;
justify-content: space-between; height: 76px;
display: flex; margin-top: 7px;
.report-time { .report-title {
height: 22px; height: 48px;
width: 97px;
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 700;
font-size: 14px; font-size: 16px;
line-height: 22px; line-height: 24px;
letter-spacing: 0; letter-spacing: 0;
text-align: left; text-align: left;
color: rgb(95, 101, 108);
} }
.report-footer-right { .report-footer {
margin-top: 4px;
height: 22px; height: 22px;
justify-content: space-between;
display: flex; display: flex;
gap: 6px;
.footer-image { .report-time {
width: 16px; height: 22px;
height: 16px; width: 97px;
margin-top: 3px; font-family: "Source Han Sans CN";
font-weight: 400;
img { font-size: 14px;
width: 100%; line-height: 22px;
height: 100%; letter-spacing: 0;
} text-align: left;
color: rgb(95, 101, 108);
} }
.think-name { .report-footer-right {
height: 22px; height: 22px;
display: flex;
gap: 6px;
.footer-image {
width: 16px;
height: 16px;
margin-top: 3px;
img {
width: 100%;
height: 100%;
}
}
.think-name {
height: 22px;
}
} }
} }
} }
} }
} }
} }
}
.box2-btn { .box2-btn {
margin-top: 16px; margin-top: 16px;
margin-left: 23px; margin-left: 23px;
width: 436px; width: 436px;
height: 36px; height: 36px;
background-color: rgb(5, 95, 194); background-color: rgb(5, 95, 194);
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
.btn-text { .btn-text {
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-family: "Source Han Sans CN"; font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
letter-spacing: 0; letter-spacing: 0;
margin-left: 120px; margin-left: 120px;
margin-top: 7px; margin-top: 7px;
} }
.btn-image { .btn-image {
width: 13px; width: 13px;
height: 8px; height: 8px;
margin-left: 8px; margin-left: 8px;
display: inline-block; display: inline-block;
margin-top: 14px; margin-top: 14px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
}
} }
} }
} }
} }
}
.right { .right {
margin-top: 17px; margin-top: 17px;
gap: 16px; gap: 16px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.box3 {
width: 1103px;
height: 545px;
// border: 1px solid rgba(234, 236, 238, 1); .box3 {
// border-radius: 10px; width: 1103px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); height: 545px;
// background: rgba(255, 255, 255, 1);
.box3-main {
width: 1058px;
height: 466px;
margin-top: 3px;
margin-left: 22px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
.box3-main {
width: 1058px;
height: 466px;
margin-top: 3px;
margin-left: 22px;
.box3-top {
width: 1058px;
height: 48px;
background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
display: flex;
.top-title { .box3-top {
width: 1010px; width: 1058px;
height: 32px; height: 48px;
margin-left: 24px; background: linear-gradient(rgb(137, 193, 255, 0.1), rgb(255, 255, 255));
margin-top: 16px; display: flex;
.title-image { .top-title {
width: 199px; width: 1010px;
height: 32px; height: 32px;
margin-left: 24px;
margin-top: 16px;
.title-image {
width: 199px;
height: 32px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
} }
}
}
.box3-text {
width: 1006px;
margin-top: 24px;
margin-left: 26px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
text-justify: inter-ideograph;
}
} }
.box3-text {
width: 1006px;
margin-top: 24px;
margin-left: 26px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
text-justify: inter-ideograph;
}
} }
.box4 {
width: 1103px;
height: 965px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
position: relative;
} .search-box {
display: flex;
width: 180px;
height: 32px;
box-sizing: border-box;
border: 1px solid rgba(230, 231, 232, 1);
border-radius: 4px;
background: rgba(255, 255, 255, 1);
position: relative;
margin-top: 3px;
margin-bottom: 16px;
margin-left: 23px;
.icon {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
right: 8px;
top: 8px;
.box4 {
width: 1103px;
height: 965px;
// border: 1px solid rgba(234, 236, 238, 1);
// border-radius: 10px;
// box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
// background: rgba(255, 255, 255, 1);
position: relative;
.box4-main {
width: 1057px;
margin: 0 auto;
.box4-main-main {
height: 767px;
overflow: hidden;
.box4-item {
width: 1057px;
height: 72px;
box-sizing: border-box;
border-radius: 4px;
display: flex; display: flex;
position: relative; justify-content: flex-end;
.left { img {
margin-top: 24px; width: 100%;
margin-left: 15px; height: 100%;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 24px;
text-align: center;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
letter-spacing: 0px;
} }
}
}
.box4-main {
width: 1057px;
margin: 0 auto;
.center { .box4-main-main {
height: 64px; height: 767px;
width: 910px; overflow: hidden;
margin-left: 13px;
.box4-item {
width: 1057px;
box-sizing: border-box;
border-radius: 4px;
display: flex; display: flex;
align-items: center; flex-direction: column;
// overflow: hidden; position: relative;
// text-overflow: ellipsis;
// white-space: nowrap; .top-row {
display: flex;
.title { align-items: flex-start;
margin-top: 12px; }
width: 918px;
// height: 55px; .left {
color: rgba(59, 65, 75, 1); margin-top: 24px;
margin-left: 15px;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 24px;
text-align: center;
background: rgba(231, 243, 255, 1);
color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 16px; font-size: 12px;
font-weight: 700; font-weight: 400;
line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; }
overflow: hidden;
.center {
min-height: 64px;
margin-left: 13px;
display: flex;
align-items: center;
// overflow: hidden;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.center-image { .title {
width: 16px; margin-top: 12px;
height: 24px; width: 918px;
margin-top: 12px; // height: 55px;
margin-left: 18px; color: rgba(59, 65, 75, 1);
} font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
text-align: left;
overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.center-image {
width: 16px;
height: 24px;
margin-top: 12px;
margin-left: 18px;
}
}
.right { }
margin-top: 26px;
width: 180px;
height: 22px;
display: flex;
margin-top: 26px;
margin-left: 20px;
height: 22px; .right {
display: flex; margin-top: 26px;
gap: 4px; width: 180px;
height: 22px;
display: flex;
margin-top: 26px;
margin-left: 20px;
.tag {
height: 22px; height: 22px;
padding: 0 8px; display: flex;
box-sizing: border-box; gap: 4px;
border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px; .tag {
background: rgba(246, 255, 237, 1); height: 22px;
color: rgba(82, 196, 26, 1); padding: 0 8px;
font-family: Microsoft YaHei; box-sizing: border-box;
font-size: 14px; border: 1px solid rgba(217, 247, 190, 1);
border-radius: 4px;
background: rgba(246, 255, 237, 1);
color: rgba(82, 196, 26, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
}
.more {
width: 16px;
height: 16px;
position: absolute;
top: 28px;
right: 20px;
img {
width: 100%;
height: 100%;
}
}
.desc {
width: 950px;
margin-top: 22px;
margin-left: 52px; // 24(left) + 13(center margin) + 一点间距
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-weight: 400; font-weight: 400;
line-height: 20px; /* Regular 常规 */
font-size: 16px;
line-height: 30px;
letter-spacing: 0px;
text-align: justify;
/* 两端对齐 */
} }
} }
.more { .box4-item {
width: 16px; border-bottom: 1px solid rgba(234, 236, 238, 1);
height: 16px; border-top: 1px solid rgba(234, 236, 238, 1);
position: absolute;
top: 28px;
right: 20px;
img {
width: 100%;
height: 100%;
}
} }
} }
.box4-item { .box4-main-footer {
border-bottom: 1px solid rgba(234, 236, 238, 1); height: 80px;
border-top: 1px solid rgba(234, 236, 238, 1); display: flex;
justify-content: space-between;
padding: 30px 5px;
.info {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0px;
text-align: left;
}
} }
} }
.box4-main-footer { .box4-footer {
height: 80px; position: absolute;
left: 22px;
bottom: 19px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex; display: flex;
justify-content: space-between; align-items: center;
padding: 30px 5px; justify-content: center;
gap: 13px;
.info { .footer-left {
color: rgba(132, 136, 142, 1); width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.footer-center {
width: 964px;
height: 48px;
color: var(--color-main-active);
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
font-size: 14px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 18px; line-height: 24px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: justify;
}
}
}
.box4-footer {
position: absolute;
left: 22px;
bottom: 19px;
width: 1057px;
height: 64px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 250, 255, 1);
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
.footer-left {
width: 19px;
height: 20px;
img {
width: 100%;
height: 100%;
} }
}
.footer-center { .footer-right {
width: 964px; width: 24px;
height: 48px; height: 24px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.footer-right {
width: 24px;
height: 24px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
}
} }
} }
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论