Skip to content

R
risk-monitor
提交 29532a44 authored 作者: 李智林's avatar 李智林
浏览文件
操作

最新ZM概览更新

上级 30768356
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 169 行增加 和 81 行删除
src/views/ZMOverView/commonTitle/comTitle.vue
浏览文件 @ 29532a44
...@@ -21,11 +21,12 @@ const props = defineProps({ ...@@ -21,11 +21,12 @@ const props = defineProps({
<style scoped lang="scss"> <style scoped lang="scss">
.com-title { .com-title {
width: 100%; width: 1601px;
height: 42px; height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 36px; // margin-bottom: 36px;
margin: 0 auto;
.cl1 { .cl1 {
width: 24px; width: 24px;
height: 30px; height: 30px;
......
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 29532a44
...@@ -47,7 +47,7 @@ const handleNavClick = name => { ...@@ -47,7 +47,7 @@ const handleNavClick = name => {
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
// width: 1601px; // width: 1601px;
width: 1666px; width: 1601px;
height: 2203px; height: 2203px;
margin: 0 auto; margin: 0 auto;
.main-nav { .main-nav {
......
src/views/ZMOverView/components/newRisk/WaveBall.vue
浏览文件 @ 29532a44
...@@ -70,10 +70,40 @@ const makeOption = () => { ...@@ -70,10 +70,40 @@ const makeOption = () => {
}, },
label: { label: {
show: true, show: true,
formatter: `${props.data.change}` + `${props.data.unit}`, formatter: function () {
fontSize: 24, const change = props.data.change;
color: `${props.color[5]}`, const unit = props.data.unit;
insideColor: `${props.color[5]}`, if (change === '无新增') {
return `{noChange|${change}}\n{b|共${props.data.count}${unit}}`
}
return `{num|${change}}{unit| ${unit}}\n{b|共${props.data.count}${unit}}`
},
rich: {
num: {
fontSize: 36,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [-4, 0, 8, 0]
},
noChange: {
fontSize: 24,
fontWeight: 'bold',
color: `${props.color[5]}`,
padding: [0, 0, 8, 0]
},
unit: {
fontSize: 18,
fontWeight: 'normal',
color: `${props.color[5]}`,
padding: [0, 0, 12, 0],
verticalAlign: 'bottom'
},
b: {
fontSize: 16,
color: `${props.color[5]}`,
opacity: 0.8
}
}
} }
}] }]
} }
......
src/views/ZMOverView/components/newRisk/index.vue
浏览文件 @ 29532a44
...@@ -11,7 +11,10 @@ ...@@ -11,7 +11,10 @@
<div class="stats"> <div class="stats">
<div v-for="value in sections[index].waveBall"> <div v-for="value in sections[index].waveBall">
<WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" /> <WaveBall :percent="value.percent" :data="value" :color="section.waterColor" :size="128" />
<div class="waveBall-text">{{ value.title }}</div> <div class="waveBall-text">
{{ value.title }}
<span v-if="value.change !== '无新增'" class="red-dot"></span>
</div>
</div> </div>
</div> </div>
<div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'"> <div class="bottm-box" :style="sections[index].waveBall.length === 2 ? 'width: 350px' : 'width:503px'">
...@@ -31,6 +34,9 @@ ...@@ -31,6 +34,9 @@
<div>风险信号</div> <div>风险信号</div>
<div class="num">12</div> <div class="num">12</div>
<div class="manage-btn" @click="handleToRiskManage">
风险信号管理 >
</div>
</div> </div>
<div style="display: flex"> <div style="display: flex">
<div class="risk-signals"> <div class="risk-signals">
...@@ -159,7 +165,7 @@ const sections = ref([ ...@@ -159,7 +165,7 @@ const sections = ref([
}, },
{ {
title: "对实体清单的更新及修订", title: "对实体清单的更新及修订",
date: "12-18", date: "12-19",
waveBall: [ waveBall: [
{ {
percent: 10, // 估算的百分比 percent: 10, // 估算的百分比
...@@ -179,6 +185,7 @@ const sections = ref([ ...@@ -179,6 +185,7 @@ const sections = ref([
}, },
{ {
title: "SDN清单更新", title: "SDN清单更新",
date: "12-15",
waveBall: [ waveBall: [
{ {
percent: 15, // 估算的百分比 percent: 15, // 估算的百分比
...@@ -198,7 +205,7 @@ const sections = ref([ ...@@ -198,7 +205,7 @@ const sections = ref([
}, },
{ {
title: "232调查：商用飞机和喷气发动机进口对国家安全的...", title: "232调查：商用飞机和喷气发动机进口对国家安全的...",
date: "12-18", date: "12-15",
waveBall: [ waveBall: [
{ {
percent: 3, // 估算的百分比 percent: 3, // 估算的百分比
...@@ -269,6 +276,12 @@ const handleCarouselChange = index => { ...@@ -269,6 +276,12 @@ const handleCarouselChange = index => {
} }
}; };
const handleToRiskManage = () => {
// 这里的路由路径请根据实际情况修改
// router.push('/riskSignalManage');
console.log('跳转到风险信号管理');
};
const handleSwithCurNews = name => { const handleSwithCurNews = name => {
if (name === "left") { if (name === "left") {
carouselRef.value.prev(); carouselRef.value.prev();
...@@ -290,12 +303,15 @@ onMounted(() => { ...@@ -290,12 +303,15 @@ onMounted(() => {
.policy-monitoring { .policy-monitoring {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
width: 1601px;
margin: 0 auto;
} }
.header { .header {
width: 1601px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 16px;
} }
.content { .content {
...@@ -327,7 +343,7 @@ onMounted(() => { ...@@ -327,7 +343,7 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center;
img { img {
/* 矢量 347 */ /* 矢量 347 */
width: 22px; width: 22px;
...@@ -357,6 +373,26 @@ onMounted(() => { ...@@ -357,6 +373,26 @@ onMounted(() => {
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
} }
.manage-btn {
margin-left: auto; /* 推到最右侧 */
margin-right: 16px; /* 适当的右边距 */
padding: 4px 12px;
border-radius: 20px;
background-color: rgba(206, 79, 81, 0.1);
border: 1px solid rgba(206, 79, 81, 0.1);
font-family: "Microsoft YaHei";
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgb(206, 79, 81);
cursor: pointer;
&:hover {
background-color: rgba(206, 79, 81, 0.2);
}
}
} }
} }
...@@ -373,7 +409,7 @@ onMounted(() => { ...@@ -373,7 +409,7 @@ onMounted(() => {
} }
.section-title { .section-title {
margin: 16px; margin: 8px 16px;
/* 容器 1559 */ /* 容器 1559 */
width: 125px; width: 125px;
height: 31px; height: 31px;
...@@ -383,9 +419,8 @@ onMounted(() => { ...@@ -383,9 +419,8 @@ onMounted(() => {
/* 容器 519 */ /* 容器 519 */
height: 210px; height: 210px;
display: flex; display: flex;
justify-content: left; justify-content: space-between;
margin-top: 10px; padding: 0 35px;
padding: 0 39px;
.waveBall-text { .waveBall-text {
margin-top: 17px; margin-top: 17px;
...@@ -398,6 +433,23 @@ onMounted(() => { ...@@ -398,6 +433,23 @@ onMounted(() => {
line-height: 26px; line-height: 26px;
letter-spacing: 0px; letter-spacing: 0px;
text-align: center; text-align: center;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.red-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgba(255, 77, 79, 1);
margin-left: 8px;
// 如果需要绝对定位，可以使用下面的样式，但在 flex 布局中 margin-left 更简单
// position: absolute;
// right: -14px;
// top: 50%;
// transform: translateY(-50%);
}
} }
} }
......
src/views/ZMOverView/index.vue
浏览文件 @ 29532a44
...@@ -22,18 +22,6 @@ ...@@ -22,18 +22,6 @@
</div> </div>
</div> </div>
</div> </div>
<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)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<div class="content-box"> <div class="content-box">
<!-- 导航栏 --> <!-- 导航栏 -->
<div class="content-nav"> <div class="content-nav">
...@@ -46,15 +34,29 @@ ...@@ -46,15 +34,29 @@
</div> </div>
</div> </div>
<!-- 最新风险动态 --> <!-- 最新风险动态 -->
<commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;"></commonTitle> <commonTitle id="risk-dynamic" title="最新风险动态" style="margin-top: 48px;margin-bottom: 36px;"></commonTitle>
<newRisk></newRisk> <newRisk></newRisk>
<!-- 最新科技要闻 --> <!-- 最新科技要闻 -->
<!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> --> <!-- <commonTitle id="tech-news" title="最新科技要闻" style="margin-top: 64px;"></commonTitle> -->
<!-- 美对华“四全”打压 --> <!-- 美对华“四全”打压 -->
<commonTitle id="us-pressure" title="美对华“四全”打压" style="margin-top: 64px;"></commonTitle> <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)"
>
<img :src="activeDate === item.type ? item.activeIcon : item.icon" alt="" />
<span>{{ item.name }}</span>
</div>
</div>
<commonTitle title="美对华“四全”打压" style="margin-bottom: 36px;"></commonTitle>
</div>
<fourSuppress></fourSuppress> <fourSuppress></fourSuppress>
<!-- 中美博弈概况 --> <!-- 中美博弈概况 -->
<commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;"></commonTitle> <commonTitle id="zm-overview" title="中美博弈概况" style="margin-top: 64px;margin-bottom: 36px;"></commonTitle>
<gameProfile></gameProfile> <gameProfile></gameProfile>
</div> </div>
</div> </div>
...@@ -141,55 +143,6 @@ const handleDateClick = (type) => { ...@@ -141,55 +143,6 @@ const handleDateClick = (type) => {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 291px;
left: 0;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
// transition: all 0.3s;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
.background-img { .background-img {
width: 100%; width: 100%;
height: 700px; height: 700px;
...@@ -286,6 +239,58 @@ const handleDateClick = (type) => { ...@@ -286,6 +239,58 @@ const handleDateClick = (type) => {
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
padding: 48px 160px; padding: 48px 160px;
.us-pressure-section {
position: relative;
margin-top: 64px;
.data-select {
width: 120px;
height: 144px;
position: absolute;
top: 80px;
left: -160px;
background-color: rgba(255, 255, 255, 0.65);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding: 2px 2px 2px 0px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
display: flex;
flex-direction: column;
justify-content: space-around;
z-index: 10;
.date-item {
display: flex;
align-items: center;
padding-left: 18px;
height: 46px;
cursor: pointer;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
img {
width: 18px;
height: 18px;
margin-right: 18px;
}
span {
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: rgb(95, 101, 108);
}
&.active {
background-color: rgba(231, 243, 255, 1);
span {
font-weight: 700;
color: rgb(5, 95, 194);
}
}
}
}
}
.content-nav { .content-nav {
.nav-title { .nav-title {
font-size: 48px; font-size: 48px;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论