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