Skip to content

R
risk-monitor
提交 4b6726c0 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

新闻速览页面

上级 635c86d8
显示空白字符变更
内嵌 并排
正在显示 包含 631 行增加 和 8 行删除
public/icon/arrow-up.svg 0 → 100644
浏览文件 @ 4b6726c0
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="arrow-up" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="Union" d="M7.33343 13.0027L7.33343 5.27885L4.33343 8.27885L3.39062 7.33604L8.0001 2.72656L12.6096 7.33604L11.6668 8.27885L8.66677 5.27885L8.66677 13.0027L7.33343 13.0027Z" fill="rgb(248,52,52)" fill-rule="evenodd" />
</svg>
src/App.vue
浏览文件 @ 4b6726c0
......@@ -17,9 +17,13 @@
<div class="nav-menu">
<el-dropdown @command="handleHomeCommand" class="home-dropdown">
<div class="nav-link dropdown-trigger">
<el-icon><House /></el-icon>
<el-icon>
<House />
</el-icon>
<span>首页</span>
<el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
<el-icon class="dropdown-arrow">
<ArrowDown />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
......@@ -32,19 +36,27 @@
</template>
</el-dropdown>
<div class="nav-link">
<el-icon><User /></el-icon>
<el-icon>
<User />
</el-icon>
<span>国家</span>
</div>
<div class="nav-link">
<el-icon><Location /></el-icon>
<el-icon>
<Location />
</el-icon>
<span>领域</span>
</div>
<div class="nav-link">
<el-icon><Document /></el-icon>
<el-icon>
<Document />
</el-icon>
<span>要素</span>
</div>
<div class="nav-link">
<el-icon><Bell /></el-icon>
<el-icon>
<Bell />
</el-icon>
<span>事件</span>
</div>
</div>
......@@ -157,15 +169,18 @@ body {
height: 984px;
position: relative;
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
position: absolute;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
img {
width: 100%;
height: 100%;
......@@ -187,6 +202,7 @@ body {
font-weight: 700;
line-height: 42px;
}
.text-en {
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
......@@ -248,22 +264,27 @@ body {
color: #333;
position: absolute;
right: 159px;
.email {
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.avator {
width: 32px;
height: 32px;
img {
width: 100%;
height: 100%;
}
}
.user {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
......@@ -275,19 +296,23 @@ body {
.wrapper {
position: relative;
.ai-btn {
position: absolute;
top: 50%;
right: 46px;
cursor: pointer;
.icon {
width: 96px;
height: 96px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(59, 65, 75, 1);
......@@ -298,6 +323,7 @@ body {
text-align: center;
}
}
.ai-dialog {
position: absolute;
right: 100px;
......@@ -316,6 +342,7 @@ body {
.el-main {
padding: 0;
height: calc(100vh - 96px);
overflow: hidden;
background-color: rgba(246, 251, 255, 1);
}
</style>
src/assets/fonts/font.css 0 → 100644
浏览文件 @ 4b6726c0
/* 声明字体 */
@font-face {
font-family: "YouSheBiaoTiHei";
src: url("./YouSheBiaoTiHei.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap; /* 性能优化：先显示备用字体 */
}
/* 全局一次性应用（可选） */
body {
font-family: "YouSheBiaoTiHei", sans-serif;
}
src/assets/icons/Headlines-icon.svg 0 → 100644
浏览文件 @ 4b6726c0
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.000000" height="16.000000" fill="none" customFrame="#000000">
<rect id="form-filled" width="16.000000" height="16.000000" x="0.000000" y="0.000000" />
<path id="Union" d="M14.6667 1.33594L1.33337 1.33594L1.33337 4.66927L14.6667 4.66927L14.6667 1.33594ZM14.6667 6.0026L1.33337 6.0026L1.33337 14.6693L14.6667 14.6693L14.6667 6.0026ZM12 8.33594L12 9.66927L4.00004 9.66927L4.00004 8.33594L12 8.33594ZM9.33337 11.0026L9.33337 12.3359L4.00004 12.3359L4.00004 11.0026L9.33337 11.0026Z" fill="rgb(5,95,194)" fill-opacity="0.800000012" fill-rule="evenodd" />
</svg>
src/main.js
浏览文件 @ 4b6726c0
......@@ -9,6 +9,7 @@ import { withFallbackImage } from "./utils";
import "./styles/scrollbar.css";
import "./styles/elui.css";
import "./styles/main.css";
import '@/assets/fonts/font.css'
const app = createApp(App);
......
src/router/index.js
浏览文件 @ 4b6726c0
......@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from "vue-router";
//中美博弈概览
import overView from "@/views/overView/index.vue";
//新闻速览
import newsBrief from "@/views/newsBrief/index.vue"
// 智库相关
import thinkTank from "../views/thinkTank/index.vue";
import ThinkTankDetail from "@/views/thinkTank/ThinkTankDetail/index.vue";
......@@ -80,10 +82,18 @@ const routes = [
name: "overView",
component: overView,
meta: {
title: "法案首页"
title: "中美博弈概览"
}
},
//新闻速览页面路由
{
path: "/newsBrief",
name: "newsBrief",
component: newsBrief,
meta: {
title: "新闻速览"
}
},
// 智库系统的主要路由
{
path: "/thinkTank",
......
src/views/newsBrief/Headlines.vue 0 → 100644
浏览文件 @ 4b6726c0
<template>
<div class="header-btn" style="width: 100px;display: flex;" @click="back">
<img :src="`src/assets/icons/arrow-left.png`" style="width: 24px;height: 24px;" /> 返回
</div>
<div style="width: 100%;height: 100%;padding:0 20% ">
<div>
<div class=" news-header" style="text-align: left;">
今日要闻
</div>
<div class="content" style="margin-bottom: 20px;">
基于情报价值评估预测算法，掌握全球重要潜在动向
</div>
</div>
<div class="box" style="width: 100%;height: 90%;">
<div class="box-header" style="height: 5vh;">
<div style="display: flex; justify-content: center; ">
<div v-for="item in btnList" :class="btnSelect !== item ? 'header-btn-gray' : 'header-btn-select'"
@click="changeBtn(item)">
{{ item }} >
</div>
</div>
</div>
<div class="divider"></div>
<div v-for="item in HeadlinesData">
<div style="display: flex;">
<div>
<div class="title-blob">
{{ item.title }}
</div>
<div class="content">
新闻来源： {{ item.from }} 发表时间：{{ item.time }}
</div>
<div style="display: flex;">
<div v-for="tag in item.tag" 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>
</template>
<script setup>
import { ref } from "vue";
const btnList = ref(["全部", "军事", "政治", "经济", "敌我"])
const btnSelect = ref('新闻纵览')
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',
}
])
function changeBtn(btn) {
btnSelect.value = btn
}
const emit = defineEmits(["back"]);
function back() {
emit('back', 'home')
}
</script>
<style scoped>
@import url('./style.css');
.newsBrief-page {
max-width: 100vw;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 5vh 10vw 20vh 10vw;
background: url('@/assets/images/background.png') no-repeat;
background-position: center -100px;
background-size: 100% 100%;
min-height: 100vh;
}
</style>
src/views/newsBrief/Subject.vue 0 → 100644
浏览文件 @ 4b6726c0
<template>
<div class="header-btn" style="width: 100px;display: flex;" @click="back">
<img :src="`src/assets/icons/arrow-left.png`" style="width: 24px;height: 24px;" /> 返回
</div>
<div style="width: 100%;height: 100%;padding:0 20% ">
<div>
<div class=" news-header" style="text-align: left;">
中美博弈专题
</div>
<div class="content" style="margin-bottom: 20px;">
汇聚全球资讯，呈现全球动态，掌握时事脉搏
</div>
</div>
<div class="box" style="width: 100%;height: 90%;">
<div class="box-header" style="height: 5vh;">
<div style="display: flex; justify-content: center; ">
<div v-for="item in btnList" :class="btnSelect !== item ? 'header-btn-gray' : 'header-btn-select'"
@click="changeBtn(item)">
{{ item }} >
</div>
</div>
</div>
<div class="divider"></div>
<div v-for="item in HeadlinesData">
<div style="display: flex;">
<div>
<div class="title-blob">
{{ item.title }}
</div>
<div class="content">
新闻来源： {{ item.from }} 发表时间：{{ item.time }}
</div>
<div style="display: flex;">
<div v-for="tag in item.tag" class="tag">
{{ tag }}
</div>
</div>
</div>
<div style="margin-left: auto;padding: 10px;">
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
</div>
</div>
<div class="divider">
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
// const props = defineProps({
// type: {
// type: String,
// default: 'home'
// }
// })
const btnList = ref(["全部", "军事", "政治", "经济", "敌我"])
const btnSelect = ref('新闻纵览')
const HeadlinesData = ref([
{
"title": "黎巴嫩真主党指责美国破坏黎稳定 谴责以色列“蓄意挑衅”",
"from": "人民网",
"time": "2025-10-05",
"tag": ["以色列", "美国"],
"arrow": '0',
},
{
"title": "IMF上调中东和北非地区经济增长预期",
"from": "CNN",
"time": "2025-10-05",
"tag": ["经济", "中东", "IMF"],
"arrow": '1',
},
{
"title": "日本外务省亚洲大洋洲局局长金井正彰启程访华 预计18日与中方会面",
"from": "人民网",
"time": "2025-10-05",
"tag": ["日本", "访华"],
"arrow": '1',
},
{
"title": "韩日因独岛主权争议暂停本月联合搜救演习",
"from": "凤凰网",
"time": "2025-10-05",
"tag": ["独岛", "联合军演", "韩国", "日本"],
"arrow": '0',
},
{
"title": "美“福特”号航母抵达加勒比海 于委内瑞拉附近展开大规模军事集结",
"from": "央视网",
"time": "2025-10-05",
"tag": ["美国", "航母", "加勒比海"],
"arrow": '0',
}
])
function changeBtn(btn) {
btnSelect.value = btn
}
const emit = defineEmits(["back"]);
function back() {
emit('back', 'home')
}
</script>
<style scoped>
@import url('./style.css');
.newsBrief-page {
max-width: 100vw;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 5vh 10vw 20vh 10vw;
background: url('@/assets/images/background.png') no-repeat;
background-position: center -100px;
background-size: 100% 100%;
min-height: 100vh;
}
</style>
src/views/newsBrief/index.vue 0 → 100644
浏览文件 @ 4b6726c0
<template>
<div class="newsBrief-page">
<div v-if="showPage === 'home'">
<div style="justify-content: space-between;">
<div class="news-header">
新闻速览
</div>
<div style="display: flex;padding: 3vh;justify-content: center; ">
<el-input placeholder="请输入关键词" :suffix-icon="searchInput" clearable style="width: 60vw;height: 5vh;">
</el-input>
</div>
<div style="display: flex;padding: 3vh;justify-content: center; ">
<div v-for="item in btnList" :class="btnSelect !== item ? 'header-btn' : 'header-btn-select'"
@click="changeBtn(item)">
{{ item }} >
</div>
<div class="header-btn-more">
<img src="@/assets/icons/adjustment.png" />
</div>
</div>
</div>
<div style="display: flex;">
<div class="box">
<div class="box-header">
<img class="box-header-img" src="@/assets/icons/Headlines-icon.svg"></img>
<div style="cursor: pointer;" @click="changePage('headlines')">
今日要闻 >
</div>
</div>
<div class="divider"></div>
<div v-for="item in HeadlinesData">
<div style="display: flex;">
<div>
<div class="title-blob">
{{ item.title }}
</div>
<div class="content">
新闻来源： {{ item.from }} 发表时间：{{ item.time }}
</div>
<div style="display: flex;">
<div v-for="tag in item.tag" 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" style=" margin-left: 4%;">
<div class="box-header">
<img class="box-header-img" src="@/assets/icons/subject-icon.png"></img>
<div style="cursor: pointer;" @click="changePage('subject')">
中美博弈专题
</div>
</div>
<div class="divider">
</div>
<div v-for="(item, index) in subjectData">
<div class="subject-line">
<!-- 左侧：序号 + 文字 -->
<div style="display: flex; align-items: center;">
<div :style="{
color:
index === 0 ? '#CF4F51'
: index === 1 ? '#FF964D'
: index === 2 ? '#E8BD0D'
: '#3B414B'
}">
{{ index <= 2 ? index + 1 : "." }} </div>
<div
style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 32vw ;margin-left: 20px;"
:class="index <= 2 ? 'title-blob' : 'content'">{{ item.text }}
</div>
</div>
<!-- 右侧：箭头 -->
<img :src="`src/assets/icons/arrow-${item.arrow}.png`" />
</div>
</div>
</div>
</div>
</div>
<Headlines v-if="showPage === 'headlines'" @type="showPage" @back="changePage" />
<Subject v-if="showPage === 'subject'" @back="changePage" />
</div>
</template>
<script setup>
import { ref } from "vue";
import Headlines from './Headlines.vue'
import Subject from './Subject.vue'
// import style from './style.css'
//顶部数据搜索
const searchInput = ref('')
const btnList = ref(["新闻纵览", "焦点新闻", "全球热点", "军事热点", "台湾动向", "美国政治", "亚洲局势", "东亚动态"])
const btnSelect = ref('新闻纵览')
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',
}
])
function changeBtn(btn) {
btnSelect.value = btn
}
//当前页面显示
const showPage = ref('home')
function changePage(page) {
console.log(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 },
{ id: 7, text: "中国女法官张玲玲以第一高票当选联合国上诉法庭法官", arrow: 0 },
{ id: 8, text: "美股三大股指17日收盘普跌 比特币跌破92000美元", arrow: 1 },
{ id: 9, text: "高盛大幅下调2026年布伦特和WTI原油价格预测", arrow: 1 },
{ id: 10, text: "2026米兰冬奥会火炬传递完整路线公布 将穿越意大利全部20个大区", arrow: 1 },
{ id: 11, text: "特朗普宣称若重掌白宫将推动美国开展自1992年以来首次核试验", arrow: 1 },
{ id: 12, text: "欧盟发布2025年秋季经济预测 欧元区今年GDP预计增长1.3%", arrow: 1 }
])
</script>
<style scoped>
@import url('./style.css');
.newsBrief-page {
max-width: 100vw;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 5vh 10vw 20vh 10vw;
background: url('@/assets/images/background.png') no-repeat;
background-position: center -100px;
background-size: 100% 100%;
min-height: 100vh;
}
</style>
src/views/newsBrief/style.css 0 → 100644
浏览文件 @ 4b6726c0
/* 分割线 */
/* 左右横线 + 中间文字 */
.news-header {
color: rgba(34, 41, 52, 1);
font-family: "YouSheBiaoTiHei", sans-serif;
font-size: 46px;
font-weight: 400;
line-height: 60px;
letter-spacing: 0px;
text-align: center;
}
.header-btn {
cursor: pointer;
padding: 2px 20px;
box-sizing: border-box;
margin: 5px;
border: 1px solid rgba(255, 255, 255, 1);
border-radius: 32px;
background: rgba(255, 255, 255, 0.8);
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.header-btn-gray {
cursor: pointer;
padding: 2px 20px;
box-sizing: border-box;
margin: 5px;
border: 1px solid rgba(32, 33, 35, 0.07);
border-radius: 32px;
background: rgba(32, 33, 35, 0.07);
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.header-btn-select {
cursor: pointer;
padding: 2px 20px;
margin: 5px;
box-sizing: border-box;
border: 1px solid rgba(174, 214, 255, 1);
border-radius: 32px;
background: rgba(231, 243, 255, 1);
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: center;
}
.header-btn-more {
cursor: pointer;
width: 34px;
height: 34px;
margin: 5px;
box-sizing: border-box;
border: 1px solid, rgba(255, 255, 255, 1);
border-radius: 32px;
background: rgba(255, 255, 255, 0.8);
display: flex; /* 开启 flex */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.box {
width: 48%;
height: 55vh;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.8);
padding: 1vw;
.box-header {
height: 4vh;
display: flex;
text-align: left;
font-size: 24px;
font-weight: 700;
align-items: center;
.box-header-img {
height: 24px;
width: 24px;
margin: 0 5px;
}
}
.title-blob {
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: left;
}
.tag {
margin: 2px;
padding: 2px 8px 2px 8px;
border-radius: 4px;
background: rgba(223, 226, 231, 0.41);
color: rgba(132, 136, 142, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
}
.content {
color: rgba(132, 136, 142, 1);
font-size: 14px;
font-weight: 400;
line-height: 22px;
letter-spacing: 0px;
text-align: left;
}
.divider {
width: 100%;
height: 1px;
background: #eaecee;
}
.subject-line {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 2.7vh;
margin: 1vh 0;
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论