Skip to content

R
risk-monitor
提交 e1629ecc authored 作者: hsx's avatar hsx
浏览文件
操作

feat:新闻模块

上级 97bf602f
显示空白字符变更
内嵌 并排
正在显示 包含 525 行增加 和 208 行删除
src/components/base/newsList/NewsItem2.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
<div class="news-item">
<el-space direction="vertical" class="flex-fill" alignment='flex-start'>
<common-text :lineLimit="1" class="text-bold" color="var(--text-primary-80-color)">{{
props.title
}}</common-text>
<common-text class="text-tip-2" color="var(--text-primary-65-color)">
{{ props.from }}
</common-text>
<el-space v-if="props.aeraTags">
<area-tag v-for="(tag, index) in props.aeraTags" :key="index" :tagName="tag" />
</el-space>
</el-space>
<img style="width: 122px; height: 82px" :src="props.img">
<!-- <img v-else style="width: 122px; height: 82px" :src="DefaultIconNews"> -->
</div>
</template>
<script setup>
import { ref } from 'vue'
import { ElSpace } from 'element-plus'
import AreaTag from '@/components/base/AreaTag/index.vue'
import DefaultIconNews from "@/assets/icons/default-icon-news.png";
import CommonText from '../texts/CommonText.vue';
const props = defineProps({
img: {
type: String,
default: 'img'
},
title: {
type: String,
default: "title"
},
from: {
type: String,
default: "from"
},
aeraTags: {
type: Array,
default: []
},
content: {
type: String,
default: "content"
},
});
const emit = defineEmits(['item-click', 'more-click']);
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.news-item {
display: flex;
margin-top: 10px;
}
</style>
\ No newline at end of file
src/components/base/texts/CommonText.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
<div class="common-text">
<slot></slot>
</div>
</template>
<script setup lang="js">
const props = defineProps({
color: {
type: String,
default: "#000"
},
lineLimit: {
type: Number,
default: null
}
});
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss';
.common-text {
color: v-bind(color);
@if('v-bind(lineLimit) !==null') {
@include common.text-ellipsis(v-bind(lineLimit));
}
}
</style>
src/router/common.js 0 → 100644
浏览文件 @ e1629ecc
import { useRouter } from "vue-router";
export function useGotoPage() {
const router = useRouter();
return (path, data, isNewTabs = true) => {
console.log('path', path);
if (isNewTabs) {
// 打开新页面
const url = new URL(window.location.origin + path);
if (data) {
Object.entries(data).forEach(([key, value]) => {
url.searchParams.append(key, value);
});
}
window.open(url.toString(), '_blank');
} else {
// 当前页面打开
router.push({ path, query: data });
}
}
}
\ No newline at end of file
src/router/modules/news.js
浏览文件 @ e1629ecc
const newsBrief = () => import('@/views/newsBrief/index.vue') const newsBrief = () => import('@/views/newsBrief/index.vue')
const ModeuleNews = () => import('@/views/newsBrief/ModeuleNews.vue')
const NewsDetial = () => import('@/views/newsBrief/NewsDetial.vue')
const NewsAnalysis = () => import('@/views/newsAnalysis/index.vue') const NewsAnalysis = () => import('@/views/newsAnalysis/index.vue')
const newsRoutes = [ const newsRoutes = [
...@@ -11,6 +13,25 @@ const newsRoutes = [ ...@@ -11,6 +13,25 @@ const newsRoutes = [
title: "新闻速览" title: "新闻速览"
} }
}, },
//新闻模块页面路由
{
path: "/newsModeule/:id",
name: "newsModeule",
component: ModeuleNews,
meta: {
title: "新闻模块"
}
},
//新闻详情页面路由
{
path: "/newsDetail/:id",
name: "newsDetail",
component: NewsDetial,
meta: {
title: "新闻详情"
}
},
// 新闻事件分析 // 新闻事件分析
{ {
...@@ -22,5 +43,21 @@ const newsRoutes = [ ...@@ -22,5 +43,21 @@ const newsRoutes = [
} }
} }
]; ];
import { useGotoPage } from "../common.js";
export function useGotoNewsBrief() {
const gotoPage = useGotoPage();
return (isNewTabs = true) => gotoPage("/newsBrief/", {}, isNewTabs)
}
export function useGotoNewsDetail() {
const gotoPage = useGotoPage();
return (id, isNewTabs = true) => gotoPage("/newsDetail/" + id, {}, isNewTabs)
}
export function useGotoNewsModule() {
const gotoPage = useGotoPage();
return (id, name, isNewTabs = true) =>
gotoPage("/newsModeule/" + id, { name }, isNewTabs)
}
export default newsRoutes; export default newsRoutes;
src/styles/common.scss
浏览文件 @ e1629ecc
...@@ -11,19 +11,19 @@ ...@@ -11,19 +11,19 @@
display: flex; display: flex;
} }
.flex-display-center{ .flex-display-center {
@extend .flex-display; @extend .flex-display;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-display-end{ .flex-display-end {
@extend .flex-display; @extend .flex-display;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
.flex-display-start{ .flex-display-start {
@extend .flex-display; @extend .flex-display;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
...@@ -37,6 +37,13 @@ ...@@ -37,6 +37,13 @@
width: 100%; width: 100%;
} }
.mouse-hover:hover {
cursor: pointer;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.082);
// margin-top: 1px;
// margin-left: 1px;
}
// 文本超出指定行数省略号显示 // 文本超出指定行数省略号显示
@mixin text-ellipsis($line-clamp) { @mixin text-ellipsis($line-clamp) {
overflow: hidden; overflow: hidden;
......
src/styles/components/CommonPage/index.vue
浏览文件 @ e1629ecc
...@@ -14,11 +14,29 @@ const span = 12 ...@@ -14,11 +14,29 @@ const span = 12
</template> </template>
`}} `}}
</pre> </pre>
<div class="common-padding">
<div class="background-as-card"> <div class="background-as-card">
<div v-for="item in [1, 2, 3, 4]" :key="item"> <div v-for="item in [1, 2, 3, 4]" :key="item">
{{ item }} {{ item }}
</div> </div>
</div> </div>
</div>
</el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/container.scss';\n<template>
<div class="common-page"></div>
</template>
`}}
</pre>
通用的页面容器，限定了页面宽度为1600px，居中显示
</el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/common.scss';\n<template>
<div class="mouse-hover"></div>
</template>
`}}
</pre>
<div class="mouse-hover">鼠标悬停</div>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
......
src/styles/components/RadioPage/index.vue
浏览文件 @ e1629ecc
...@@ -24,6 +24,19 @@ const span = 12 ...@@ -24,6 +24,19 @@ const span = 12
<el-radio-button :value="3">选项3</el-radio-button> <el-radio-button :value="3">选项3</el-radio-button>
</el-radio-group> </el-radio-group>
</el-col> </el-col>
<el-col :span="span">
<pre>{{ `import '@/styles/radio.scss';\n <template>
<el-radio-group class="radio-group-as-radius-btn">
</el-radio-group>
</template>
`}}
</pre>
<el-radio-group v-model="radio" class="radio-group-as-radius-btn">
<el-space>
<el-radio-button v-for="item in 3" :key="item" :value="item">选项{{ item }} ></el-radio-button>
</el-space>
</el-radio-group>
</el-col>
</el-row> </el-row>
</template> </template>
......
src/styles/components/TextPage/index.vue
浏览文件 @ e1629ecc
...@@ -3,6 +3,7 @@ import { ElSpace, ElRow, ElCol } from 'element-plus'; ...@@ -3,6 +3,7 @@ import { ElSpace, ElRow, ElCol } from 'element-plus';
import '@/styles/tabs.scss' import '@/styles/tabs.scss'
import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';
import AiTipPane from '@/components/base/panes/AiTipPane.vue'; import AiTipPane from '@/components/base/panes/AiTipPane.vue';
import CommonText from '@/components/base/texts/CommonText.vue';
const span = 12 const span = 12
</script> </script>
...@@ -10,20 +11,37 @@ const span = 12 ...@@ -10,20 +11,37 @@ const span = 12
<el-row class="layout-grid-line"> <el-row class="layout-grid-line">
<el-col :span="span"> <el-col :span="span">
<pre> <pre>
{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue'; {{ `import CommonText from '@/components/base/texts/CommonText.vue';
<template> <template>
<common-text>科技领域</common-text>
<common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
<common-text color="red" :lineLimit="1">科技领域</common-text>
</template>
`}}
</pre>
<el-space direction="vertical">
<common-text>科技领域</common-text>
<common-text class="text-title-1-show" color="var(--color-yellow-100)">科技领域</common-text>
<common-text color="red"
:lineLimit="1">超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。超出行数则省略号。</common-text>
</el-space>
</el-col>
<el-col :span="span">
<pre>{{ `import ColorPrefixTitle from '@/components/base/texts/ColorPrefixTitle.vue';\n <template>
<color-prefix-title>科技领域</color-prefix-title> <color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title> <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title> <color-prefix-title color="red">科技领域</color-prefix-title>
</template> </template>
`}} `}}
</pre> </pre>
<el-space direction="vertical"> <el-space direction="vertical">
<color-prefix-title>科技领域</color-prefix-title> <color-prefix-title>科技领域</color-prefix-title>
<color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title> <color-prefix-title color="var(--color-yellow-100)">科技领域</color-prefix-title>
<color-prefix-title color="red">科技领域</color-prefix-title> <color-prefix-title color="red">科技领域</color-prefix-title>
</el-space> </el-space>
</el-col> </el-col>
<el-col :span="span"> <el-col :span="span">
<pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template> <pre>{{ `import AiTipPane from '@/components/base/panes/AiTipPane.vue';\n<template>
<ai-tip-pane>huidadadadadasda</ai-tip-pane> <ai-tip-pane>huidadadadadasda</ai-tip-pane>
......
src/styles/container.scss
浏览文件 @ e1629ecc
...@@ -6,3 +6,14 @@ ...@@ -6,3 +6,14 @@
// width: 1600px; // width: 1600px;
align-items: center; align-items: center;
} }
//水平居中
.h-center {
//水平居中
margin: 0 auto;
display: block; // 强制设置为块级元素
}
.common-padding {
padding: 20px 24px;
}
\ No newline at end of file
src/styles/radio.scss
浏览文件 @ e1629ecc
...@@ -17,3 +17,34 @@ ...@@ -17,3 +17,34 @@
border-radius: 4px; border-radius: 4px;
} }
} }
.radio-group-as-radius-btn {
.el-radio-button {
--el-radio-button-checked-bg-color: transparent;
--el-radio-button-checked-border-color: transparent;
.el-radio-button__inner {
border-radius: 32px !important;
// height: 40px;
@extend .text-regular;
background-color: var(--bg-white-65);
border-color: var(--bg-white-100);
border-width: 1px;
color: var(--text-primary-65-color);
//垂直居中
// display: flex;
// justify-content: center;
}
}
.el-radio-button.is-active {
--el-radio-button-checked-text-color: var(--color-primary-100);
.el-radio-button__inner {
background-color: var(--color-primary-10) !important;
border-color: var(--color-primary-35) !important;
}
}
}
\ No newline at end of file
src/views/newsBrief/ModeuleNews.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
<el-space direction="vertical" class="full-width news-image-background">
<el-button class="float-btn" @click="gotoNewsBrief(false)"><el-icon>
<back />
</el-icon> 返回</el-button>
<el-space style="width: 993px;" direction="vertical" alignment="flex-start">
<div style="margin-top: 50px; margin-bottom: 24px; margin-left: 24px;">
<common-text class="text-title-0-show" color="var(--text-primary-90-color)">{{
moduleName
}}</common-text>
<common-text class="text-regular"
color="var(--text-primary-65-color)">基于情报价值评估预测算法，掌握全球重要潜在动向</common-text>
</div>
<el-space direction="vertical" fill alignment="flex-start" class="background-as-card common-padding">
<el-radio-group v-model="currentAreaId" class="radio-group-as-gap-btn">
<el-space direction="horizontal" wrap alignment="center">
<el-radio-button :label="''" @click="changeArea('')">全部</el-radio-button>
<el-radio-button v-for="(t, i) in AreaList" :key="i" :label="t.id" @click="changeArea(t.id)">{{
t.name }}
</el-radio-button>
</el-space>
</el-radio-group>
<el-divider style="margin: 10px 0px;"></el-divider>
<div class="">
<news-list :news="NewsData" />
</div>
</el-space>
</el-space>
</el-space>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from 'vue-router';
import '@/styles/container.scss';
import '@/styles/radio.scss';
import NewsList from "./NewsList.vue";
import { getAreaList, getHotNewsByArea } from "@/api/news/newsBrief";
import { ElSpace, ElDivider, ElRadioButton, ElRadioGroup, ElButton, ElIcon } from "element-plus";
import CommonText from "@/components/base/texts/CommonText.vue";
import AreaTag from "@/components/base/AreaTag/index.vue";
import { useGotoNewsBrief } from "@/router/modules/news";
const route = useRoute();
const gotoNewsBrief = useGotoNewsBrief();
const moduleId = ref(route.params.id);
const moduleName = ref(route.query.name ?? "");
const NewsData = ref([]);
const AreaList = ref([]);
const currentAreaId = ref("");
onMounted(async () => {
console.log(route.query.name, moduleId.value, moduleName.value);
const { data: areaList } = await getAreaList();
AreaList.value = areaList ?? [];
await changeArea("")
});
async function changeArea(id) {
const { data } = await getHotNewsByArea({
moduleId: moduleId.value,
industryId: id,
});
NewsData.value = data ?? [];
}
</script>
<style lang="scss" scoped>
@use '@/styles/common.scss' as *;
@import url("./style.css");
.float-btn {
position: absolute;
top: 24px;
left: 40px;
width: 92px;
height: 40px;
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 32px;
@extend .text-regular;
color: var(--text-primary-65-color);
}
</style>
\ No newline at end of file
src/views/newsBrief/NewsDetial.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
</template>
<script setup>
</script>
<style lang="scss" scoped>
@import url("./style.css");
</style>
\ No newline at end of file
src/views/newsBrief/NewsList.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
<el-space direction="vertical" fill class="full-width mouse-hover" v-for="(item, index) in props.news" :key="index">
<news-item2 :img="item.newsImage" :title="item.newsTitle" :from="`新闻来源：${item.newsOrg} 发表时间：${item.newsDate}`"
:aeraTags="item.industryList?.map(t => t.industryName)" @click="gotoNewsDetail(item.newsId)" />
<div class="divider"></div>
</el-space>
</template>
<script setup>
import NewsItem2 from '@/components/base/newsList/NewsItem2.vue';
import { useGotoNewsDetail } from '@/router/modules/news';
import { ElSpace } from 'element-plus';
const gotoNewsDetail = useGotoNewsDetail();
const props = defineProps({
news: {
type: Array,
default: () => []
}
})
</script>
<style lang="css" scoped>
.divider {
width: 100%;
height: 1px;
background: #eaecee;
}
</style>
\ No newline at end of file
src/views/newsBrief/NewsMain.vue 0 → 100644
浏览文件 @ e1629ecc
<template>
<el-space direction="vertical" class="full-width" :size=24>
<el-radio-group class="radio-group-as-radius-btn">
<el-space>
<el-radio-button v-for="item in moduleList" :key="item.moduleId" :value="item.moduleId"
@click="() => gotoNewsModule(item.moduleId, item.moduleName, false)">{{
item.moduleName
}} ></el-radio-button>
<!-- <el-radio-button value="nul"><img src="@/assets/icons/adjustment.png" /></el-radio-button> -->
</el-space>
</el-radio-group>
<el-space :size="16" alignment="flex-start">
<box-background width="712px" height="100%" title="今日要闻">
<template #header-icon>
<img src="@/assets/icons/Headlines-icon.svg" />
</template>
<div class="common-padding">
<news-list :news="HeadlinesData" />
</div>
</box-background>
<box-background width="712px" title="中美博弈专题">
<template #header-icon>
<img src="@/assets/icons/subject-icon.png" />
</template>
<el-space :size="16" direction="vertical" fill class="full-width common-padding">
<el-space v-for="(item, index) in subjectData.slice(0, 3)" :key="index" class="mouse-hover"
@click="() => gotoNewsDetail(item.newsId)" alignment="center">
<common-text class="text-bold"
:color="index === 0 ? 'var(--color-red-100)' : (index === 1 ? 'var(--color-orange-100)' : 'var(--text-primary-65-color)')">
{{ `${index + 1}` }}
</common-text>
<common-text class="text-bold" color="var(--text-primary-80-color)">{{
item.newsTitle
}}</common-text>
</el-space>
<el-space v-for="(item, index) in subjectData.slice(3)" :key="index" class="mouse-hover">
<common-text class="text-regular" color="var(--text-primary-80-color)">{{
"• " + item.newsTitle
}}</common-text>
</el-space>
</el-space>
</box-background>
</el-space>
</el-space>
</template>
<script setup>
import { ref, onMounted } from "vue";
import '@/styles/container.scss';
import '@/styles/radio.scss';
import { useGotoNewsModule, useGotoNewsDetail } from "@/router/modules/news";
import { getMoudleType, getTodayNews, getTodayNewByArea, getHotNewsByArea, getHotNews } from "@/api/news/newsBrief";
import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow, ElRadioButton, ElRadioGroup } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import BoxBackground from '@/components/base/boxBackground/overviewNormalBox.vue'
import NewsList from "./NewsList.vue";
//博弈专题新闻数据
const subjectData = ref([]);
// 今日要闻
const HeadlinesData = ref([
]);
const moduleList = ref([]);
const gotoNewsDetail = useGotoNewsDetail();
const gotoNewsModule = useGotoNewsModule();
onMounted(async () => {
await initData();
});
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) { }
};
async function updateToday() {
const { data: todayNews } = await getTodayNews();
HeadlinesData.value = todayNews ?? [];
}
async function updateHotNews() {
const { data: hotNews } = await getHotNews();
subjectData.value = hotNews ?? [];
}
async function initData() {
await handleGetModuleType();
await updateToday();
await updateHotNews();
}
</script>
<style lang="scss" scoped>
@import url("./style.css");
</style>
\ No newline at end of file
src/views/newsBrief/index.vue
浏览文件 @ e1629ecc
<template> <template>
<div class="newsBrief-page"> <el-scrollbar class="news-image-background">
<div v-if="showPage === 'home'"> <div class="common-page">
<div style="justify-content: space-between"> <el-space direction="vertical" class="full-width">
<div class="news-header">新闻速览</div> <div class="text-title-0-show" style="margin-top: 50px;">新闻速览</div>
<div class="input-box"> <search-box placeholder="请输入关键词" style="margin-top: 19px;margin-bottom: 42px;"></search-box>
<el-input placeholder="请输入关键词" :suffix-icon="searchInput" clearable style="width: 800px; height: 48px"> <news-main></news-main>
</el-input> <!-- <Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
</div> <Subject v-if="showPage === 'subject'" @back="changePage" /> -->
</el-space>
<div class="btn-box"> </div>
<div </el-scrollbar>
v-for="(item, index) in moduleList"
:key="index"
:class="moduleActiveId !== item.moduleId ? 'header-btn' : 'header-btn-select'"
@click="handleToWorldHot(item)"
@mouseenter="handleActiveModule(true, item)"
@mouseleave="handleActiveModule(false, item)"
>
<div class="btn-box-text">{{ item.moduleName }}</div>
<div class="btn-box-icon">
<img v-if="moduleActiveId === item.moduleId" src="@/assets/icons/btn-arrow-right-active.png" alt="" />
<img v-else src="@/assets/icons/btn-arrow-right.png" alt="" />
</div>
</div>
<div class="header-btn-more" v-if="moduleList.length">
<img src="@/assets/icons/adjustment.png" />
</div>
</div>
</div>
<div class="main">
<div class="box">
<div class="box-header">
<div class="box-header-img">
<img src="@/assets/icons/Headlines-icon.svg" />
</div>
<div class="box-header-title" @click="changePage('headlines')">今日要闻 ></div>
</div>
<div class="divider"></div>
<div v-for="(item, index) in HeadlinesData" :key="index">
<div class="box1-item">
<div class="box1-item-left">
<div class="box1-item-title">
{{ item.title }}
</div>
<div class="box1-item-content">
<div class="source">新闻来源： {{ item.from }}</div>
<div class="time">发表时间：{{ item.time }}</div>
</div>
<div class="tag-box">
<div v-for="(tag, index) in item.tag" :key="index" class="tag">
{{ tag }}
</div>
</div>
</div>
<div style="margin-left: auto; padding: 10px">
<img :src="item.image" />
</div>
</div>
<div class="divider"></div>
</div>
</div>
<div class="box">
<div class="box-header">
<div class="box-header-img"><img src="@/assets/icons/subject-icon.png" /></div>
<div class="box-header-title">中美博弈专题</div>
</div>
<div class="divider"></div>
<div v-for="(item, index) in subjectData" :key="index">
<div class="subject-line">
<div style="display: flex; align-items: center">
<div
class="subject-line-id"
:class="{
subjectLineId1: index === 0,
subjectLineId2: index === 1,
subjectLineId3: index === 2
}"
>
{{ index <= 2 ? index + 1 : "•" }}
</div>
<div class="text" :class="{ textTop: index < 3 }">
{{ item.newsTitle }}
</div>
</div>
<img v-if="item.hot" :src="`src/assets/icons/arrow-0.png`" />
<img v-else :src="`src/assets/icons/arrow-1.png`" />
</div>
</div>
</div>
</div>
</div>
<Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
<Subject v-if="showPage === 'subject'" @back="changePage" />
</div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { getMoudleType, getTodayNews, getHotNews } from "@/api/news/newsBrief"; import '@/styles/container.scss';
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import Headlines from "./Headlines.vue"; import Headlines from "./Headlines.vue";
import Subject from "./Subject.vue"; import Subject from "./Subject.vue";
// import style from './style.css' import { ElInput, ElSpace, ElImage, ElDivider, ElCol, ElRow } from "element-plus";
import AreaTag from '@/components/base/AreaTag/index.vue'
import CommonText from "@/components/base/texts/CommonText.vue";
import NewsMain from "./NewsMain.vue";
import SearchBox from "@/components/base/SearchBox/index.vue";
const route = useRoute();
//顶部数据搜索 //顶部数据搜索
const searchInput = ref(""); const searchInput = ref("");
const moduleList = ref([]);
const moduleActiveId = ref("");
const handleGetModuleType = async () => {
try {
const res = await getMoudleType();
console.log("模块类别", res);
if (res.code === 200 && res.data) {
moduleList.value = res.data;
}
} catch (error) {}
};
// 今日要闻
const HeadlinesData = ref([
{
title: "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
from: "人民网",
time: "2025-10-05",
tag: ["以色列", "美国"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "IMF上调中东和北非地区经济增长预期",
from: "CNN",
time: "2025-10-05",
tag: ["经济", "中东", "IMF"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
from: "人民网",
time: "2025-10-05",
tag: ["日本", "访华"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "韩日因独岛主权争议暂停本月联合搜救演习",
from: "凤凰网",
time: "2025-10-05",
tag: ["独岛", "联合军演", "韩国", "日本"],
image: "/testData/HeadlinesData-img.png"
},
{
title: "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
from: "央视网",
time: "2025-10-05",
tag: ["美国", "航母", "加勒比海"],
image: "/testData/HeadlinesData-img.png"
}
]);
const handleGetTodayNews = async () => {
try {
const res = await getTodayNews();
console.log("今日要闻", res);
if (res.code === 200 && res.data) {
} else {
HeadlinesData.value = [];
}
} catch (error) {
HeadlinesData.value = [];
}
};
//当前页面显示 //当前页面显示
const showPage = ref("home"); const showPage = ref("home");
...@@ -178,54 +38,23 @@ const changePage = page => { ...@@ -178,54 +38,23 @@ const changePage = page => {
console.log(page); console.log(page);
showPage.value = page; showPage.value = page;
}; };
//博弈专题新闻数据
const subjectData = ref([
// { id: 1, text: "乌克兰与法国签署意向书 将获 100 架“阵风”战机及多套防空系统", arrow: 0 },
// { id: 2, text: "安理会通过涉加沙决议 建立和平委员会作为过渡行政机构", arrow: 1 },
// { id: 3, text: "日本首相高市早苗涉台及修“无核三原则”言论遭多方强烈反对", arrow: 1 },
// { id: 4, text: "美“福特”号航母打击群进入加勒比海 委方谴责其意图策动政权更迭", arrow: 1 },
// { id: 5, text: "BBC回应特朗普10亿-50亿美元索赔诉讼 称诽谤指控无依据", arrow: 1 },
// { id: 6, text: "俄军打击乌142个区域设施 乌军击落或压制91架俄无人机", arrow: 1 },
]);
const handleGetHotNews = async () => {
try {
const res = await getHotNews();
console.log("中美博弈专题", res);
if (res.code === 200 && res.data) {
subjectData.value = res.data;
} else {
subjectData.value = [];
}
} catch (error) {
subjectData.value = [];
}
};
const handleActiveModule = (isIn, module) => {
moduleActiveId.value = isIn ? module.moduleId : "";
};
const handleToWorldHot = () => {
showPage.value = "subject";
moduleActiveId.value = "";
};
onMounted(() => {
handleGetModuleType();
handleGetTodayNews();
handleGetHotNews();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url("./style.css"); @import url("./style.css");
.newsBrief-page { .search-container {
height: 100%; margin: 0 auto;
background: url("@/assets/images/background.png") no-repeat; }
background-position: center -100px;
background-size: 100% 100%; .search-input {
padding-top: 50px; width: 800px;
overflow: hidden; height: 48px;
overflow-y: auto;
//水平居中
margin: 0 auto;
display: block; // 强制设置为块级元素
} }
</style> </style>
src/views/newsBrief/style.css
浏览文件 @ e1629ecc
.news-image-background {
height: 100%;
background-image: url("./assets/images/概览页顶端背景.png");
background-position: center -100px;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
overflow-y: auto;
}
.news-header { .news-header {
color: rgba(34, 41, 52, 1); color: rgba(34, 41, 52, 1);
font-family: YouSheBiaoTiHei; font-family: YouSheBiaoTiHei;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论