Skip to content

R
risk-monitor
提交 b1e8b7ab authored 作者: 李郝虎's avatar 李郝虎
浏览文件
操作

feat:封装新闻资讯组件，部分页面替换新闻资讯组件

上级 340f15da
显示空白字符变更
内嵌 并排
正在显示 包含 256 行增加 和 88 行删除
src/components/NewsList.vue 0 → 100644
浏览文件 @ b1e8b7ab
<template>
<div class="news-box">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="@/assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div class="box3-item" v-for="(news, index) in list" :key="index" @click="handleClickToNewsDetail(news)">
<div class="left">
<img
:src="getProxyUrl(news.newsImage) || defaultImg"
alt=""
referrerpolicy="no-referrer"
@error="e => (e.target.src = News1)"
/>
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} {{ news.newsOrg ? "-" + news.newsOrg : "" }}
</div>
</div>
<div class="right-footer">{{ news.newsContent }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import router from "@/router/index";
import News1 from "@/assets/images/news1.png"; // 错误图片
import defaultNew from "@/assets/images/default-icon-news.png"; // 默认图片
let { list } = defineProps({
list: {
type: Array,
default: () => []
},
defaultImg: {
type: String,
default: defaultNew
}
});
// 处理图片代理
const getProxyUrl = url => {
if (!url) return "";
const urlStr = String(url);
// 排除非 http 开头（相对路径）、已经是代理链接、或者是本地链接
if (
!urlStr.startsWith("http") ||
urlStr.includes("images.weserv.nl") ||
urlStr.includes("localhost") ||
urlStr.includes("127.0.0.1")
) {
return url;
}
// 移除协议头 http:// 或 https://
const cleanUrl = urlStr.replace(/^https?:\/\//i, "");
return `https://images.weserv.nl/?url=${encodeURIComponent(cleanUrl)}`;
};
const handleClickToNewsDetail = news => {
const route = router.resolve({
path: "/newsAnalysis",
query: {
newsId: news.newsId
}
});
window.open(route.href, "_blank");
};
// 查看更多新闻资讯
const handleToMoreNews = () => {
const route = router.resolve("/newsBrief");
window.open(route.href, "_blank");
};
</script>
<style lang="scss" scoped>
.news-box {
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-left: 21px;
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 11px;
margin-left: 20px;
height: 26px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding: 6px 0;
.box3-item {
display: flex;
height: 77px;
width: 749px;
margin-left: 21px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.left {
width: 72px;
height: 48px;
margin-top: 15px;
img {
width: 100%;
height: 100%;
border-radius: 4px;
}
}
.right {
width: 657px;
margin-left: 20px;
.right-top {
width: 657px;
display: flex;
justify-content: space-between;
&:hover {
text-decoration: underline;
color: var(--color-main-active);
.title {
color: var(--color-main-active);
}
}
.title {
margin-top: 13px;
width: 500px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time {
width: 157px;
text-align: right;
height: 22px;
margin-top: 19px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.right-footer {
width: 657px;
height: 24px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
</style>
src/views/bill/billHome/index.vue
浏览文件 @ b1e8b7ab
......@@ -267,46 +267,7 @@
</div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div
class="box3-item"
v-for="(news, index) in newsList.slice(0, 5)"
:key="index"
@click="handleClickToNewsDetail(news)"
>
<div class="left">
<img
:src="getProxyUrl(news.newsImage) || defaultNew"
alt=""
referrerpolicy="no-referrer"
@error="e => (e.target.src = News1)"
/>
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.newsTitle }}</div>
<div class="time">
{{ news.newsDate ? news.newsDate.slice(5) : "" }} - {{ news.newsOrg }}
</div>
</div>
<div class="right-footer">{{ news.newsContent }}</div>
<!-- <CommonPrompt :content="news.newsContent">
<div class="right-footer">{{ news.newsContent }}</div>
</CommonPrompt> -->
</div>
</div>
</div>
</div>
<NewsList :list="newsList.slice(0, 5)"/>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
......@@ -1115,7 +1076,7 @@ const handleGetNews = async () => {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200) {
newsList.value = res.data;
newsList.value = res.data||[];
}
} catch (error) {}
};
......
src/views/decree/decreeHome/index.vue
浏览文件 @ b1e8b7ab
......@@ -211,41 +211,8 @@
</div>
<DivideHeader id="position2" class="divide2" :titleText="'资讯要闻'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="@/assets/images/box-header-icon/news-icon.png" alt="" />
</div>
<div class="box3-header-title">{{ "新闻资讯" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
</div>
<div class="box3-main">
<div
class="box3-item"
v-for="(news, index) in newsList"
:key="index"
@click="handleToNewsAnalysis(news)"
>
<div class="left">
<img :src="news.img ? news.img : DefaultIconNews" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="title">{{ news.title }}</div>
<div class="time">{{ news.from }}</div>
</div>
<div class="right-footer">{{ news.content }}</div>
<!-- <el-popover effect="dark" :width="1000" :content="news.content" placement="top-start">
<template #reference>
<div class="right-footer">{{ news.content }}</div>
</template>
</el-popover> -->
</div>
</div>
</div>
</div>
<NewsList :list="newsList.slice(0, 5)"/>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
......@@ -818,15 +785,16 @@ const handleGetNews = async () => {
const res = await getNews(params);
console.log("新闻资讯", res);
if (res.code === 200 && res.data) {
newsList.value = res.data.map(item => {
return {
newsId: item.newsId,
img: item.newsImage,
title: item.newsTitle,
content: item.newsContent,
from: item.newsDate + " · " + item.newsOrg
};
});
newsList.value = res.data||[]
// newsList.value = res.data.map(item => {
// return {
// newsId: item.newsId,
// img: item.newsImage,
// title: item.newsTitle,
// content: item.newsContent,
// from: item.newsDate + " · " + item.newsOrg
// };
// });
}
} catch (error) {
console.error("新闻资讯error", error);
......
src/views/exportControl/index.vue
浏览文件 @ b1e8b7ab
......@@ -184,7 +184,8 @@
<el-row :gutter="15" style="width: 1600px; margin: 0 auto; height: 528px; margin-top: 64px">
<CustomTitle id="position2" title="资讯要闻" />
<el-col :span="12">
<custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<NewsList :list="newsList.slice(0, 5)" :defaultImg="newsImg" />
<!-- <custom-container title="新闻资讯" :titleIcon="newsIcon" height="450px">
<template #header-right>
<el-button type="primary" link @click="handleToMoreNews">
{{ "更多 +" }}
......@@ -196,7 +197,7 @@
<NewsList :list-data="newsList" @item-click="item => handleNewsInfoClick(item)" />
</div>
</template>
</custom-container>
</custom-container> -->
</el-col>
<el-col :span="12">
<custom-container title="社交媒体" :titleIcon="dialogIcon" height="450px">
......@@ -671,7 +672,9 @@ import CustomContainer from "@/components/Container/index.vue";
import ClickableCard from "./components/link.vue";
import InfoCard from "./components/info.vue";
import CustomTitle from "./components/title.vue";
import NewsList from "./components/news.vue";
// import NewsList from "./components/news.vue";
import newsImg from "@/assets/images/news-img.png";
import MessageBubble from "./components/dialog.vue";
import CommonPrompt from "./commonPrompt/index.vue";
import RuleSubsidiaryDialog from "./components/RuleSubsidiaryDialog.vue";
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论