Skip to content

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

新增概览页背景组件OverviewMainBox和OverviewNormalBox

上级 f9b8785b
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 194 行增加 和 516 行删除
src/App.vue
浏览文件 @ ea247107
......@@ -2,85 +2,11 @@
<div id="app">
<div class="pro-wrapper">
<div class="home-page">
<!-- <div class="navbar">
<div class="nav-content">
<div class="nav-left">
<div class="icon">
<img src="@/assets/icons/overview/logo.png" alt="" />
</div>
<div class="title-box">
<div class="title" v-for="(item, index) in homeTitleList" :key="index"
@mouseenter="handleShowMenu(index, true)" @mouseleave="handleShowMenu(index, false)"
@click="handleClickTitle(item)">
<div class="text" :class="{ textActive: homeActiveTitleIndex === index }">
{{ item.name }}
</div>
<div class="bottom-line" v-if="homeActiveTitleIndex === index"></div>
</div>
</div>
</div>
<div class="nav-right">
<div class="search-box">
<div class="input"><el-input type="text" v-model="searchText" @keyup.enter="handleSearch" /></div>
<div class="icon" @click="handleSearch">
<img src="@/assets/icons/overview/search.png" alt="" />
</div>
</div>
<div class="info-box" @click="handleClickToolBox">
<div class="mail">
<img src="@/assets/icons/overview/mail.png" alt="" />
</div>
<div class="user">
<img src="@/assets/icons/overview/user.png" alt="" />
</div>
<div class="name">{{ "管理员" }}</div>
</div>
</div>
<div class="menu-box" v-if="isShowMenu" @mouseenter="handleHoverMenu(true)"
@mouseleave="handleHoverMenu(false)">
<div class="menu-content">
<div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleToModule(item)">
<div class="icon">
<img :src="item.icon" alt="" />
</div>
<div class="title">{{ item.title }}</div>
</div>
</div>
</div>
</div>
</div> -->
<ModuleHeader/>
<div class="main-container">
<router-view />
</div>
</div>
<!-- <div class="content-page" v-if="!isCurrentOverview">
<div class="navbar">
<div class="nav-brand">
<div class="brand-icon">
<img src="@/assets/icons/header-logo.png" alt="" />
</div>
<div class="brand-text" @click="handleToHome">
<div class="text-ch">某方向风险监测预警系统</div>
</div>
</div>
<div class="user-info">
<div class="email">
<img src="@/assets/icons/header-icon.png" alt="" />
</div>
<div class="avator">
<img src="@/assets/icons/header-avator.png" alt="" />
</div>
<span class="user">管理员</span>
</div>
</div>
<div class="main-container">
<router-view />
</div>
</div> -->
<div class="right-btn" @click="handleClickToolBox">
<div class="item">
<div class="icon">
......@@ -127,10 +53,8 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { Monitor, House, User, Location, Document, Bell, Message, ArrowDown } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import Breadcrumb from "@/components/BreadCrumb/index.vue";
import AiBox from "./components/AiBox.vue";
import { getPersonType } from "@/api/common/index";
// import { useDraggable } from "@vueuse/core";
......
src/components/base/boxBackground/overviewMainBox.vue 0 → 100644
浏览文件 @ ea247107
<template>
<div class="overview-main-box-wrapper"
:style="{ width: width ? width : '1064px', height: height ? height : '450px' }">
<div class="overview-main-box-header">
<div class="header-left">
<div class="header-icon">
<slot name="headerIcon"></slot>
</div>
<div class="header-title">{{ title }}</div>
</div>
<div class="header-right" @click="handleClickToDetail()">
{{ "查看详情 >" }}
</div>
</div>
<div class="wrapper-main">
<slot></slot>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
const emit = defineEmits(['toDetail'])
const props = defineProps({
title: {
type: String,
default: ''
},
width: {
type: String,
default: ''
},
height: {
type: String,
default: ''
}
})
const handleClickToDetail = () => {
emit('toDetail')
}
</script>
<style lang="scss" scoped>
.overview-main-box-wrapper {
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;
.overview-main-box-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
box-sizing: border-box;
.header-left {
display: flex;
.header-icon {
width: 18px;
height: 18px;
margin-top: 13.7px;
margin-left: 18.7px;
}
.header-title {
margin-left: 21px;
height: 48px;
padding: 0 16px;
background: var(--color-main-active);
color: #fff;
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 48px;
text-align: center;
}
}
.header-right {
margin-right: 27px;
margin-top: 12px;
height: 24px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.wrapper-main {
height: calc(100% - 48px);
overflow: hidden;
// position: relative;
}
}
</style>
src/components/base/boxBackground/overviewBox.vue → src/components/base/boxBackground/overviewNormalBox.vue
浏览文件 @ ea247107
<template>
<div class="overview-box-wrapper" :style="{ width: width ? width : '640px', height: height ? height : '415px' }">
<div class="wrapper-header">
<div class="header-icon"></div>
<div class="header-title">{{ title }}</div>
<div class="overview-normal-box-wrapper"
:style="{ width: width ? width : '1064px', height: height ? height : '460px' }">
<div class="overview-normal-box-header">
<div class="header-left">
<div class="header-icon">
<slot name="headerIcon"></slot>
</div>
<div class="header-title">{{ title }}</div>
</div>
<div class="header-right">
<slot name="headerRight"></slot>
</div>
</div>
<div class="wrapper-main">
......@@ -32,69 +38,53 @@ const props = defineProps({
})
</script>
<style lang="scss" scoped>
.overview-box-wrapper {
.overview-normal-box-wrapper {
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;
.wrapper-header {
height: 45px;
.overview-normal-box-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
box-sizing: border-box;
.header-left {
display: flex;
.header-icon {
margin-top: 18px;
width: 8px;
height: 20px;
background: var(--color-main-active);
border-radius: 0 4px 4px 0;
}
.header-icon {
width: 24px;
height: 24px;
margin-top: 12px;
margin-left: 20px;
}
.header-title {
margin-left: 14px;
margin-top: 14px;
height: 26px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-style: Bold;
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
.header-title {
margin-left: 16px;
height: 48px;
color: var(--color-main-active);
font-family: Source Han Sans CN;
font-size: 20px;
font-weight: 700;
line-height: 48px;
text-align: center;
}
}
.header-right {
position: absolute;
top: 14px;
right: 12px;
height: 28px;
display: flex;
justify-content: flex-end;
gap: 4px;
.header-right-btn {
width: 28px;
height: 28px;
img {
width: 100%;
height: 100%;
}
}
height: 48px;
margin-right: 28px;
}
}
.wrapper-main {
height: calc(100% - 45px);
height: calc(100% - 48px);
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
padding: 5px 10px;
}
}
</style>
src/components/dialog/dialog.vue deleted 100644 → 0
浏览文件 @ f9b8785b
<template>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./image1.png" alt="" />
</div>
<div class="header-title">{{ "社交媒体" }}</div>
<div class="more" @click="handleToMoreNews">{{ "更多 +" }}</div>
</div>
<div class="box4-main">
<div class="message-bubble" v-for="(item, index) in messageList" :key="index" @click="handleClickPerson(item)">
<div class="avatar-container">
<img :src="item[props.imageUrl] || avatarUser" :alt="item[props.name]" class="avatar" />
<div class="avatar-containerOne" v-if="isRepublicanParty"><img src="./image2.png" alt=""
class="avatar-imageOne" /></div>
<div class="avatar-containerTwo" v-if="isUnitedStatesSenate"><img src="./image3.png" alt=""
class="avatar-imageTwo" /></div>
</div>
<div class="bubble-container">
<div class="bubble">
<div class="bubble-header">
<span class="name">{{ item[props.name] }}</span>
<span class="meta">{{ item[props.time] }} · {{ item[props.source] }}</span>
</div>
<div class="bubble-content">
{{ item[props.content] }}
</div>
<div class="triangle"></div>
</div>
</div>
</div>
<!-- <MessageBubble v-for="(item, index) in messageList" @click="handleClickPsserson(item)"
@info-click="handleMediaClick(item)" :key="index" :avatar="item.img ? item.img : DefaultIcon1" :name="item.name"
:time="item.time" :source="item.source" :content="item.content" /> -->
<!-- <div class="box4-main-item" v-for="(item, index) in messageList" :key="index">
<div class="left" @click="handleClickPerson(item)">
<img :src="item.img ? item.img : DefaultIcon1" alt="" />
</div>
<div class="right">
<div class="right-top">
<div class="name">{{ item.name }}</div>
<div class="time">{{ item.time }}</div>
</div>
<div class="content">{{ item.content }}</div>
</div>
</div> -->
</div>
</div>
</template>
<script setup>
import { computed } from 'vue';
import avatarUser from "@/assets/images/avatar_user.png";
const emit = defineEmits(["click", "info-click"]);
const props = defineProps({
isRepublicanParty: {
type: Boolean,
default: false
},
isUnitedStatesSenate: {
type: Boolean,
default: false
},
messageList: {
type: Array,
default: () => []
},
imageUrl: {
type: String,
default: "imageUrl"
},
name: {
type: String,
default: "name"
},
time: {
type: String,
default: "time"
},
source: {
type: String,
default: "source"
},
content: {
type: String,
default:
"content"
}
});
const formattedTime = computed((index) => {
const date = new Date(index);
if (isNaN(date.getTime())) {
return index; // 如果不是有效日期，返回原值
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate());
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
// return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
return `${month}月${day}日 ${hours}:${minutes}`;
});
const handleClickPerson = (item) => {
emit("person-click", item);
};
const handleInfoClick = (item) => {
emit("info-click", item);
};
const handleToMoreNews = (item) => {
emit("more-click", item);
};
</script>
<style scoped>
.box4 {
margin-left: 20px;
width: 792px;
height: 450px;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
border: 1px solid rgb(234, 236, 238);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgb(234, 236, 238);
display: flex;
box-sizing: border-box;
position: relative;
.header-icon {
margin-left: 18px;
margin-top: 14px;
width: 24px;
height: 24px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
width: 80px;
margin-top: 11px;
margin-left: 18px;
height: 26px;
color: rgb(5, 95, 194);
font-family: "Source Han Sans CN";
font-size: 20px;
font-weight: 700;
line-height: 26px;
letter-spacing: 0px;
}
.more {
width: 45px;
height: 24px;
position: absolute;
top: 12px;
right: 27px;
color: rgb(5, 95, 194);
font-family: 'Source Han Sans CN';
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
text-align: right;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 8px;
padding-left: 21px;
padding-top: 23px;
.message-bubble {
display: flex;
max-width: 740px;
margin-bottom: 15px;
.avatar-container {
flex-shrink: 0;
flex-grow: 0;
flex: 0;
width: 42px;
height: 42px;
margin-right: 14.5px;
cursor: pointer;
position: relative;
.avatar-containerOne,
.avatar-containerTwo {
display: inline-block;
position: absolute;
}
.avatar-containerOne {
left: 2px;
top: 29px;
.avatar-imageOne {
width: 20px;
height: 20px;
}
}
.avatar-containerTwo {
right: 2px;
top: 29px;
.avatar-imageTwo {
width: 20px;
height: 20px;
}
}
.avatar {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: cover;
}
}
.bubble-container {
flex: 1;
position: relative;
.bubble {
background-color: rgba(246, 250, 255, 1);
border-radius: 12px;
padding: 12px 12px;
position: relative;
border: 1px solid rgba(231, 243, 255, 1);
/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
.bubble-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
.name {
color: rgb(59, 65, 75);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.meta {
color: rgb(95, 101, 108);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0px;
text-align: right;
}
}
.bubble-content {
color: rgba(59, 65, 75, 1);
font-family: "Source Han Sans CN";
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
}
.triangle {
position: absolute;
left: -9px;
/* 向左偏移1px，给描边留出空间 */
top: 15px;
width: 0;
height: 0;
/* 外层：描边颜色的三角形（比内层大1px） */
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid rgb(231, 243, 255);
}
/* 内层：原有颜色的三角形，覆盖在外层上面，模拟描边效果 */
.triangle::after {
content: '';
position: absolute;
top: -8px;
/* 向上偏移1px，对齐中心 */
left: 1px;
/* 向右偏移1px，露出外层的描边 */
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid rgba(246, 250, 255, 1);
}
}
}
}
}
}
/* 响应式设计 */
@media (max-width: 768px) {
.message-bubble {
max-width: 100%;
}
.bubble-header {
flex-direction: column;
align-items: flex-start;
}
.meta {
margin-top: 4px;
}
}
</style>
src/main.js
浏览文件 @ ea247107
......@@ -15,7 +15,8 @@ import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import AreaTag from '@/components/base/areaTag/AreaTag.vue'
import leftBtn from "@/components/base/pageBtn/leftBtn.vue";
import rightBtn from "@/components/base/pageBtn/rightBtn.vue";
import OverviewBox from '@/components/base/boxBackground/overviewBox.vue'
import OverviewMainBox from "@/components/base/boxBackground/overviewMainBox.vue";
import OverviewNormalBox from "@/components/base/boxBackground/overviewNormalBox.vue";
import AnalysisBox from '@/components/base/boxBackground/analysisBox.vue'
import NewsList from '@/components/base/newsList/NewsList.vue'
import ModuleHeader from '@/components/base/moduleHeader/index.vue'
......@@ -42,7 +43,8 @@ app.component("CardTitle", CardTitle);
app.component('AreaTag', AreaTag) // 领域标签
app.component('leftBtn', leftBtn) // 向左按钮
app.component('rightBtn', rightBtn) // 向右按钮
app.component('OverviewBox', OverviewBox) // 概览页模块背景
app.component('OverviewMainBox', OverviewMainBox) // 概览页最新动态背景盒子
app.component('OverviewNormalBox', OverviewNormalBox) // 概览页一版模块背景盒子
app.component('AnalysisBox', AnalysisBox) // 分析页模块背景
app.component('ModuleHeader', ModuleHeader) // 模块头部
app.component('RiskSignal', RiskSignal) // 风险信号
......
src/views/ZMOverView/index.vue
浏览文件 @ ea247107
<!--ZM博弈概览页-->
<template>
<div class="home-wrapper">
<img :src="background" alt="" class="background-img" />
<!-- <div class="home-header">
<div class="header-left">
<HeaderMenu></HeaderMenu>
......@@ -23,6 +23,7 @@
</div>
</div> -->
<div class="content-box">
<div class="home-top-bg"></div>
<!-- 导航栏 -->
<div class="content-nav">
<div class="nav-title">中美科技博弈概览</div>
......@@ -41,13 +42,8 @@
<!-- 美对华“四全”打压 -->
<div id="us-pressure" class="us-pressure-section">
<div class="data-select">
<div
v-for="item in dateList"
:key="item.type"
class="date-item"
:class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)"
>
<div v-for="item in dateList" :key="item.type" class="date-item" :class="{ active: activeDate === item.type }"
@click="handleDateClick(item.type)">
<!-- <img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" /> -->
<span>{{ item.name }}</span>
</div>
......@@ -168,6 +164,7 @@ const handleDateClick = type => {
margin: 0;
padding: 0;
}
.home-wrapper {
width: 100%;
height: 100vh;
......@@ -175,13 +172,13 @@ const handleDateClick = type => {
flex-direction: column;
overflow: hidden;
position: relative;
.background-img {
width: 100%;
height: 700px;
position: absolute;
left: 0;
z-index: -1;
}
// .background-img {
// width: 100%;
// height: 700px;
// position: absolute;
// left: 0;
// z-index: -1;
// }
// .home-header {
// height: 64px;
// flex-shrink: 0;
......@@ -268,11 +265,26 @@ const handleDateClick = type => {
.content-box {
flex: 1;
width: 100%;
height: 100%;
overflow-y: auto;
padding-top: 48px;
position: relative;
.home-top-bg {
background:
url("./assets/images/background.png"), linear-gradient(180deg, rgba(229, 241, 254, 1) 0%, rgba(246, 251, 255, 0) 30%);
background-size: 100% 100%;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -64px;
}
.us-pressure-section {
position: relative;
margin-top: 64px;
.data-select {
width: 108px;
height: 192px;
......@@ -297,6 +309,7 @@ const handleDateClick = type => {
cursor: pointer;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
&:hover {
background: var(--color-bg-hover);
// span{
......@@ -320,6 +333,7 @@ const handleDateClick = type => {
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
......@@ -328,6 +342,7 @@ const handleDateClick = type => {
}
}
}
.content-nav {
.nav-title {
font-size: 48px;
......@@ -377,11 +392,13 @@ const handleDateClick = type => {
}
}
}
.bottom-info {
width: 100%;
height: 176px;
margin-bottom: 80px;
background-color: rgb(247, 248, 249);
.info-item {
width: 1601px;
height: 176px;
......@@ -389,14 +406,17 @@ const handleDateClick = type => {
display: flex;
justify-content: space-between;
align-items: center;
.info-item-left {
display: flex;
align-items: center;
img {
width: 134px;
height: 91px;
margin-right: 27px;
}
.info-item-left-content {
font-size: 16px;
font-weight: 400;
......@@ -405,11 +425,13 @@ const handleDateClick = type => {
font-family: Microsoft YaHei;
}
}
.info-item-right {
display: flex;
align-items: center;
position: relative;
height: 60px;
.text2 {
left: 60px;
position: absolute;
......@@ -425,6 +447,7 @@ const handleDateClick = type => {
letter-spacing: 0px;
text-align: center;
}
.text3 {
left: 385px;
top: 12px;
......@@ -441,11 +464,13 @@ const handleDateClick = type => {
letter-spacing: 0px;
text-align: center;
}
.img1 {
width: 300px;
height: 48.8px;
margin-right: 24px;
}
.img2 {
width: 300px;
height: 43.5px;
......
src/views/bill/billHome/index.vue
浏览文件 @ ea247107
<template>
<div class="home-wrapper">
<!-- <div class="search-header" v-show="false">
<div class="search-header" v-show="false">
<div class="search-header-container">
<div class="home-content-header-center">
<el-input v-model="searchBillText" @keyup.enter="handleSearch" style="width: 680px; height: 100%"
......@@ -39,11 +39,9 @@
</div>
</div>
</div>
</div> -->
<!-- <div class="home-main" :class="{ scrollHomeBox: isShow }" ref="containerRef"> -->
<div class="home-main" ref="containerRef">
</div>
<div class="home-main" :class="{ scrollHomeBox: isShow }" ref="containerRef">
<div class="home-top-bg"></div>
<div class="home-content">
<div class="home-content-header">
<div class="home-content-header-center" v-show="!isShow">
......@@ -1635,6 +1633,7 @@ onUnmounted(() => {
height: 100%;
position: relative;
overflow-y: hidden;
.search-header {
width: 100%;
// height: 144px;
......@@ -1774,15 +1773,6 @@ onUnmounted(() => {
// background-size: 100% 100%;
overflow-y: auto;
.home-header {
height: 64px;
background: url("./assets/images/header-bg.png");
box-sizing: border-box;
padding: 0 160px;
display: flex;
justify-content: space-between;
}
.home-content {
width: 1600px;
margin: 0 auto;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论