Skip to content

R
risk-monitor
提交 26d5da4e authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

feat:update

上级 c84a594d b841823f
隐藏空白字符变更
内嵌 并排
正在显示 包含 845 行增加 和 670 行删除
src/api/thinkTank/overview.js
浏览文件 @ 26d5da4e
...@@ -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/components/base/newsList/NewsItem.vue
浏览文件 @ 26d5da4e
<template> <template>
<el-space alignment="flex-start" :size="10"> <el-space alignment="flex-start" :size="10">
<img :width="97" :height="72" :src="news ?? DefaultIconNews" alt="" /> <img :width="97" :height="72" :src="img ?? DefaultIconNews" alt="" />
<el-space direction="vertical" alignment="flex-start" :size="0" fill> <el-space direction="vertical" alignment="flex-start" :size="0" fill>
<div class="full-width flex-display"> <div class="full-width flex-display">
<common-text :line-limit="1" class="text-title-3-bold text-hover flex-fill" <common-text :line-limit="1" class="text-title-3-bold text-hover flex-fill"
...@@ -26,7 +26,7 @@ import CommonText from "../texts/CommonText.vue"; ...@@ -26,7 +26,7 @@ import CommonText from "../texts/CommonText.vue";
const props = defineProps({ const props = defineProps({
img: { img: {
type: String, type: String,
default: '' default: null,
}, },
title: { title: {
type: String, type: String,
......
src/components/base/newsList/NewsItemMini.vue
浏览文件 @ 26d5da4e
<template> <template>
<el-space alignment="flex-start" :size="10"> <el-space alignment="flex-start" :size="10">
<img :width="64" :height="52" :src="news ?? DefaultIconNews" alt="" /> <img :width="64" :height="52" :src="img ?? DefaultIconNews" alt="" />
<el-space direction="vertical" alignment="flex-start" :size="0"> <el-space direction="vertical" alignment="flex-start" :size="0">
<common-text :line-limit="1" class="text-regular text-hover" color="var(--text-primary-80-color)"> <common-text :line-limit="1" class="text-regular text-hover" color="var(--text-primary-80-color)">
{{ title }} {{ title }}
...@@ -20,7 +20,7 @@ import CommonText from "../texts/CommonText.vue"; ...@@ -20,7 +20,7 @@ import CommonText from "../texts/CommonText.vue";
const props = defineProps({ const props = defineProps({
img: { img: {
type: String, type: String,
default: '' default: null
}, },
title: { title: {
type: String, type: String,
......
src/components/base/newsList/NewsItemWithTag.vue
浏览文件 @ 26d5da4e
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<area-tag v-for="(tag, index) in props.aeraTags" :key="index" :tagName="tag" /> <area-tag v-for="(tag, index) in props.aeraTags" :key="index" :tagName="tag" />
</el-space> </el-space>
</el-space> </el-space>
<img style="width: 122px; height: 82px" :src="props.img"> <img style="width: 122px; height: 82px" :src="props.img ? props.img : DefaultIconNews">
</div> </div>
</template> </template>
...@@ -26,7 +26,7 @@ const props = defineProps({ ...@@ -26,7 +26,7 @@ const props = defineProps({
img: { img: {
type: String, type: String,
default: 'img' default: null
}, },
title: { title: {
type: String, type: String,
......
src/components/base/texts/IntelligentEntityText.vue
浏览文件 @ 26d5da4e
...@@ -121,5 +121,6 @@ onMounted(processText) ...@@ -121,5 +121,6 @@ onMounted(processText)
.p-regular-rereg { .p-regular-rereg {
text-indent: 2em; text-indent: 2em;
margin: 4px 0;
} }
</style> </style>
\ No newline at end of file
src/components/base/texts/TextTranslatePane.vue
浏览文件 @ 26d5da4e
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<el-button v-if="showMoreVisible" @click="() => { showMore = !showMore; updateText() }"> <el-button v-if="showMoreVisible" @click="() => { showMore = !showMore; updateText() }">
{{ showMore ? '收起' : '展开' }} {{ showMore ? '收起' : '展开' }}
<el-icon> <el-icon>
<arrow-down v-if="showMore" /> <arrow-up v-if="showMore" />
<arrow-up v-else /> <arrow-down v-else />
</el-icon> </el-icon>
</el-button> </el-button>
</div> </div>
......
src/router/common.js
浏览文件 @ 26d5da4e
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
export function useGotoPage() { export function useGotoPage() {
const router = useRouter(); const router = useRouter();
return (path, data, isNewTabs = true) => { return (path, data, isNewTabs = true) => {
console.log('path', path); console.log("path", path);
if (isNewTabs) { if (isNewTabs) {
// 打开新页面 // 打开新页面
const url = new URL(window.location.origin + path); const url = new URL(window.location.origin + path);
if (data) { if (data) {
Object.entries(data).forEach(([key, value]) => { Object.entries(data).forEach(([key, value]) => {
url.searchParams.append(key, value); url.searchParams.append(key, value);
}); });
} }
window.open(url.toString(), '_blank'); window.open(url.toString(), "_blank");
} else { } else {
// 当前页面打开 // 当前页面打开
router.push({ path, query: data }); router.push({ path, query: data });
} }
} };
} }
\ No newline at end of file // 滚动到指定元素
export function scrollToElement(elementId) {
document.getElementById(elementId).scrollIntoView({
behavior: "smooth", // 平滑滚动
block: "start" // 滚动到元素顶部
});
}
src/styles/components/ActionButton/index.vue
浏览文件 @ 26d5da4e
...@@ -48,14 +48,15 @@ ...@@ -48,14 +48,15 @@
<script setup> <script setup>
import '@/styles/common.scss' import '@/styles/common.scss'
import LeftBtn from '@/components/base/PageBtn/LeftBtn.vue' import LeftBtn from '@/components/base/pageBtn/leftBtn.vue'
import RightBtn from '@/components/base/PageBtn/RightBtn.vue' import RightBtn from '@/components/base/pageBtn/rightBtn.vue'
const span = 12 const span = 12
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.button-box { .button-box {
margin-left: 40px;; margin-left: 40px;
;
display: flex; display: flex;
gap: 8px gap: 8px
} }
......
src/styles/components/News/index.vue 0 → 100644
浏览文件 @ 26d5da4e
<script setup lang="ts">
import { ElRow, ElCol } from 'element-plus';
import '@/styles/common.scss'
import NewsItemMini from '@/components/base/newsList/NewsItemMini.vue'
import NewsItem from '@/components/base/newsList/NewsItem.vue'
import NewsItemWithTag from '@/components/base/newsList/NewsItemWithTag.vue'
const span = 12
const news = {
title: '新闻标题-老长了老长了老长了老长了老长了老长长了老长了',
content: '新闻内容-老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了老长了',
from: "2025.1.1 · 来源：中国",
aeraTags: ['人工智能', '深海']
}
</script>
<template>
<el-row class="wrapper layout-grid-line">
<el-col :span="span">
<pre>
{{ `import NewsItem from '@/components/base/newsList/NewsItem.vue'` }}
</pre>
<news-item class="common-padding" :title="news.title" :content="news.content" :from="news.from"></news-item>
</el-col>
<el-col :span="span">
<pre>
{{ `import NewsItemMini from '@/components/base/newsList/NewsItemMini.vue'` }}
</pre>
<news-item-mini class="common-padding" :title="news.title" :content="news.content"
:from="news.from"></news-item-mini>
</el-col>
<el-col :span="span">
<pre>
{{ `import NewsItemWithTag from '@/components/base/newsList/NewsItemWithTag.vue'` }}
</pre>
<news-item-with-tag class="common-padding" :title="news.title" :content="news.content" :from="news.from"
:aeraTags="news.aeraTags"></news-item-with-tag>
</el-col>
</el-row>
</template>
<style lang="scss" scoped></style>
\ No newline at end of file
src/styles/components/RadioPage/index.vue
浏览文件 @ 26d5da4e
<script setup lang="ts"> <script setup lang="ts">
import { ElRadioGroup, ElRadioButton, ElRow, ElCol } from 'element-plus'; import { ElRadioGroup, ElRadioButton, ElRow, ElCol, ElSpace } from 'element-plus';
import { ref } from 'vue'; import { ref } from 'vue';
import '@/styles/radio.scss'; import '@/styles/radio.scss';
...@@ -13,16 +13,36 @@ const span = 12 ...@@ -13,16 +13,36 @@ const span = 12
<pre> <pre>
{{ `import '@/styles/radio.scss'; {{ `import '@/styles/radio.scss';
<template> <template>
<el-radio-group class="radio-group-as-gap-btn"> <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
<el-radio-button :value="1">选项1</el-radio-button>
<el-radio-button :value="2">选项2</el-radio-button>
<el-radio-button :value="3">选项3</el-radio-button>
</el-radio-group>
<el-radio-group v-model="radio" class="radio-group-as-gap-btn">
<el-space :size="24">
<el-radio-button :value="1">选项1</el-radio-button>
<el-radio-button :value="2">选项2</el-radio-button>
<el-radio-button :value="3">选项3</el-radio-button>
</el-space>
</el-radio-group> </el-radio-group>
</template> </template>
`}} `}}
</pre> </pre>
<el-radio-group v-model="radio" class="radio-group-as-gap-btn"> <el-space direction="vertical" fill>
<el-radio-button :value="1">选项1</el-radio-button> <el-radio-group v-model="radio" class="radio-group-as-gap-btn">
<el-radio-button :value="2">选项2</el-radio-button> <el-radio-button :value="1">选项1</el-radio-button>
<el-radio-button :value="3">选项3</el-radio-button> <el-radio-button :value="2">选项2</el-radio-button>
</el-radio-group> <el-radio-button :value="3">选项3</el-radio-button>
</el-radio-group>
<el-radio-group v-model="radio" class="radio-group-as-gap-btn">
<el-space :size="24">
<el-radio-button :value="1">选项1</el-radio-button>
<el-radio-button :value="2">选项2</el-radio-button>
<el-radio-button :value="3">选项3</el-radio-button>
</el-space>
</el-radio-group>
</el-space>
</el-col> </el-col>
<el-col :span="span"> <el-col :span="span">
<pre>{{ `import '@/styles/radio.scss';\n <template> <pre>{{ `import '@/styles/radio.scss';\n <template>
......
src/styles/components/index.vue
浏览文件 @ 26d5da4e
...@@ -28,6 +28,9 @@ ...@@ -28,6 +28,9 @@
<el-tab-pane label="人物" lazy> <el-tab-pane label="人物" lazy>
<people-page /> <people-page />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="新闻" lazy>
<news-page />
</el-tab-pane>
<el-tab-pane label="预警面板" lazy> <el-tab-pane label="预警面板" lazy>
<WarnningPane /> <WarnningPane />
</el-tab-pane> </el-tab-pane>
...@@ -71,6 +74,7 @@ import GraphTreeChart from './GraphTreeChart/index.vue' ...@@ -71,6 +74,7 @@ import GraphTreeChart from './GraphTreeChart/index.vue'
import AreaTag from './AreaTag/index.vue' import AreaTag from './AreaTag/index.vue'
import ActionButton from './ActionButton/index.vue' import ActionButton from './ActionButton/index.vue'
import WordCloudChart from './WordCloudChart/index.vue' import WordCloudChart from './WordCloudChart/index.vue'
import NewsPage from './News/index.vue'
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
src/styles/container.scss
浏览文件 @ 26d5da4e
...@@ -16,4 +16,12 @@ ...@@ -16,4 +16,12 @@
.common-padding { .common-padding {
padding: 20px 24px; padding: 20px 24px;
}
.common-padding-h {
padding: 0px 24px;
}
.common-padding-v {
padding: 20px 0px;
} }
\ No newline at end of file
src/views/newsBrief/ModeuleNews.vue
浏览文件 @ 26d5da4e
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
<back /> <back />
</el-icon> 返回</el-button> </el-icon> 返回</el-button>
<el-space style="width: 993px;" direction="vertical" alignment="flex-start"> <el-space style="width: 993px;" direction="vertical" alignment="flex-start">
<div style="margin-top: 50px; margin-bottom: 24px; margin-left: 24px;"> <div id="ref-news-list" style="margin-top: 50px; margin-bottom: 24px; margin-left: 24px;">
<common-text class="text-title-0-show" color="var(--text-primary-90-color)">{{ <common-text class="text-title-0-show" color="var(--text-primary-90-color)">{{
moduleName moduleName
}}</common-text> }}</common-text>
<common-text class="text-regular" <common-text class="text-regular"
color="var(--text-primary-65-color)">基于情报价值评估预测算法，掌握全球重要潜在动向</common-text> color="var(--text-primary-65-color)">基于情报价值评估预测算法，掌握全球重要潜在动向</common-text>
</div> </div>
...@@ -21,9 +21,12 @@ ...@@ -21,9 +21,12 @@
</el-space> </el-space>
</el-radio-group> </el-radio-group>
<el-divider style="margin: 10px 0px;"></el-divider> <el-divider style="margin: 10px 0px;"></el-divider>
<div class=""> <div v-if="NewsData?.content?.length > 0">
<news-list :news="NewsData" /> <news-list :news="NewsData.content" />
</div> </div>
<el-empty v-else></el-empty>
<el-pagination background layout="total, ->, prev, pager, next" :current-page="modulePage"
:total="NewsData?.totalElements ?? 0" v-on:current-change="onCurrentChange" />
</el-space> </el-space>
</el-space> </el-space>
</el-space> </el-space>
...@@ -36,32 +39,44 @@ import '@/styles/container.scss'; ...@@ -36,32 +39,44 @@ import '@/styles/container.scss';
import '@/styles/radio.scss'; import '@/styles/radio.scss';
import NewsList from "./NewsList.vue"; import NewsList from "./NewsList.vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief"; import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon } from "element-plus"; import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon, ElEmpty, ElPagination } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue"; import CommonText from "@/components/base/texts/CommonText.vue";
import { useGotoNewsBrief } from "@/router/modules/news"; import { useGotoNewsBrief } from "@/router/modules/news";
import { scrollToElement } from "@/router/common";
import { number } from "echarts";
const route = useRoute(); const route = useRoute();
const gotoNewsBrief = useGotoNewsBrief(); const gotoNewsBrief = useGotoNewsBrief();
const moduleId = ref(route.params.id); const moduleId = ref(route.params.id);
const moduleName = ref(route.query.name ?? ""); const moduleName = ref(route.query.name ?? "");
const NewsData = ref([]); const modulePage = ref(1);
const NewsData = ref({});
const AreaList = ref([]); const AreaList = ref([]);
const currentAreaId = ref(""); const currentAreaId = ref("");
onMounted(async () => { onMounted(async () => {
console.log(route.query.name, moduleId.value, moduleName.value); console.log(route.query.name, moduleId.value, moduleName.value);
const { data: areaList } = await getAreaList(); const { data: areaList } = await getAreaList();
AreaList.value = areaList ?? []; AreaList.value = areaList ?? [];
await changeArea("") await updateDate("")
}); });
async function changeArea(id) { const onCurrentChange = async e => {
await updateDate(currentAreaId.value, e - 1)
scrollToElement("ref-news-list");
}
async function updateDate(id, page = 0) {
const { data } = await getHotNewsByArea({ const { data } = await getHotNewsByArea({
moduleId: moduleId.value, moduleId: moduleId.value,
industryId: id ? id : null, industryId: id ? id : null,
currentPage: page,
}); });
data?.forEach(item => { data?.content?.forEach(item => {
item.newsImage = item.coverUrl ?? "" item.newsImage = item.coverUrl ?? ""
}) })
NewsData.value = data ?? []; NewsData.value = data ?? [];
modulePage.value = (data?.number ?? 0) + 1;
}
async function changeArea(id) {
await updateDate(id, 0)
} }
</script> </script>
......
src/views/newsBrief/NewsDetial.vue
浏览文件 @ 26d5da4e
...@@ -41,22 +41,27 @@ ...@@ -41,22 +41,27 @@
译文 译文
</el-button> </el-button>
</div> </div>
<text-translate-pane class="common-padding" :texts-raw="textEns" :texts-translate="textZns" <text-translate-pane class="common-padding-h" :texts-raw="textEns" :texts-translate="textZns"
:text-entities="textEntities" :is-open-translation="isOpenTranslation" :text-entities="textEntities" :is-open-translation="isOpenTranslation"
:is-highlight-entity="isHightLightEntity"> :is-highlight-entity="isHightLightEntity">
</text-translate-pane> </text-translate-pane>
<div>
<img v-if="newsDetail.coverUrl" class="common-padding" :src="newsDetail.coverUrl" :width="320"
:height="240" />
</div>
</el-space> </el-space>
<el-space direction="vertical" class="background-as-card relation-news-box" alignment="flex-start"> <el-space direction="vertical" class="background-as-card relation-news-box" fill>
<el-space style="margin-top: 10px;"> <el-space style="margin-top: 10px;">
<color-prefix-title height="20px"> <color-prefix-title height="20px">
<div class="text-title-2-bold">相关新闻</div> <div class="text-title-2-bold">相关新闻</div>
</color-prefix-title> </color-prefix-title>
</el-space> </el-space>
<el-space direction="vertical" fill class="common-padding"> <el-space v-if="relationNews?.length > 0" direction="vertical" fill class="common-padding">
<news-item-mini v-for="item in relationNews" :key="item.newsId" :news="item" :img="item.newsImage" <news-item-mini v-for="item in relationNews" :key="item.newsId" :news="item" :img="item.newsImage"
:title="item.newsTitle" :from="`${item.newsDate} · ${item.newsOrg}`" :title="item.newsTitle" :from="`${item.newsDate} · ${item.newsOrg}`"
@click="gotoNewsDetail(item.newsId)" /> @click="gotoNewsDetail(item.newsId)" />
</el-space> </el-space>
<el-empty v-else style=""></el-empty>
</el-space> </el-space>
</div> </div>
</el-scrollbar> </el-scrollbar>
...@@ -67,7 +72,7 @@ import '@/styles/container.scss'; ...@@ -67,7 +72,7 @@ import '@/styles/container.scss';
import '@/styles/common.scss'; import '@/styles/common.scss';
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ElSpace, ElButton, ElScrollbar, ElSwitch } from "element-plus"; import { ElSpace, ElButton, ElScrollbar, ElSwitch, ElEmpty, ElImage } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue"; import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue"; import AreaTag from "@/components/base/AreaTag/index.vue";
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
......
src/views/thinkTank/ReportDetail/reportAnalysis/index.vue
浏览文件 @ 26d5da4e
<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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论