|
|
@@ -52,7 +52,22 @@
|
|
|
<template v-for="(item, index) in HrefMapper">
|
|
|
<div class="screen-href-block">
|
|
|
<div class="screen-href-block-head">
|
|
|
- <img src="../common/img/bottom-label.png"/>{{item.label}}<img src="../common/img/bottom-icon.png"/>
|
|
|
+ <img src="../common/img/bottom-label.png"/>{{item.label}}
|
|
|
+ <div class="more">
|
|
|
+ <el-popover v-if="item.children?.length > 6" placement="top" :teleported="false" popper-class="more-menu-popover">
|
|
|
+ <template #reference>
|
|
|
+ <div class="__hover" >查看更多》</div>
|
|
|
+ </template>
|
|
|
+ <div class="more-menu-list">
|
|
|
+ <template v-for="(h, hI) in item.children.filter((v, i) => i > 5)">
|
|
|
+ <div class="more-menu-item" @click="toHref(h)">
|
|
|
+ {{h.label}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ <img src="../common/img/bottom-icon.png"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="screen-href-block-content">
|
|
|
<template v-for="(h, hI) in item.children">
|
|
|
@@ -79,112 +94,112 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="screen-item screen-item-tszhqk">
|
|
|
- <div class="si-head">
|
|
|
- <div>态势综合情况</div>
|
|
|
- </div>
|
|
|
- <div class="si-content">
|
|
|
- <img class="hainan" src="./img/hainan.png"/>
|
|
|
- <div class="list">
|
|
|
- <div class="item">
|
|
|
- <div class="line"/>
|
|
|
- <div class="right">
|
|
|
- <div class="title">实时用户数
|
|
|
- <el-popover
|
|
|
- placement="top"
|
|
|
- trigger="hover"
|
|
|
- :width="230"
|
|
|
- content="数据来源：网信办手机信令统计"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="./img/tooltips.png"/>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <CountTo :startVal="tszhqk.ssyhs.startVal" :endVal="tszhqk.ssyhs.endVal" :duration="1500"></CountTo>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="line"/>
|
|
|
- <div class="right">
|
|
|
- <div class="title">流动用户数<el-popover
|
|
|
- placement="top"
|
|
|
- trigger="hover"
|
|
|
- :width="230"
|
|
|
- content="数据来源：网信办手机信令统计"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="./img/tooltips.png"/>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <CountTo :startVal="tszhqk.ldyhs.startVal" :endVal="tszhqk.ldyhs.endVal" :duration="1500"></CountTo>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="line"/>
|
|
|
- <div class="right">
|
|
|
- <div class="title">旅游用户数<el-popover
|
|
|
- placement="top"
|
|
|
- trigger="hover"
|
|
|
- :width="230"
|
|
|
- content="数据来源：网信办手机信令统计"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="./img/tooltips.png"/>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <CountTo :startVal="tszhqk.lyyhs.startVal" :endVal="tszhqk.lyyhs.endVal" :duration="1500"></CountTo>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="line"/>
|
|
|
- <div class="right">
|
|
|
- <div class="title">过境用户数<el-popover
|
|
|
- placement="top"
|
|
|
- trigger="hover"
|
|
|
- :width="230"
|
|
|
- content="数据来源：网信办手机信令统计"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="./img/tooltips.png"/>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <CountTo :startVal="tszhqk.gjyhs.startVal" :endVal="tszhqk.gjyhs.endVal" :duration="1500"></CountTo>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <div class="line"/>
|
|
|
- <div class="right">
|
|
|
- <div class="title">境外用户数<el-popover
|
|
|
- placement="top"
|
|
|
- trigger="hover"
|
|
|
- :width="230"
|
|
|
- content="数据来源：网信办手机信令统计"
|
|
|
- >
|
|
|
- <template #reference>
|
|
|
- <img src="./img/tooltips.png"/>
|
|
|
- </template>
|
|
|
- </el-popover>
|
|
|
- </div>
|
|
|
- <div class="count">
|
|
|
- <CountTo :startVal="tszhqk.jwyhs.startVal" :endVal="tszhqk.jwyhs.endVal" :duration="1500"></CountTo>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+<!-- <div class="screen-item screen-item-tszhqk">-->
|
|
|
+<!-- <div class="si-head">-->
|
|
|
+<!-- <div>态势综合情况</div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="si-content">-->
|
|
|
+<!-- <img class="hainan" src="./img/hainan.png"/>-->
|
|
|
+<!-- <div class="list">-->
|
|
|
+<!-- <div class="item">-->
|
|
|
+<!-- <div class="line"/>-->
|
|
|
+<!-- <div class="right">-->
|
|
|
+<!-- <div class="title">实时用户数-->
|
|
|
+<!-- <el-popover-->
|
|
|
+<!-- placement="top"-->
|
|
|
+<!-- trigger="hover"-->
|
|
|
+<!-- :width="230"-->
|
|
|
+<!-- content="数据来源：网信办手机信令统计"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #reference>-->
|
|
|
+<!-- <img src="./img/tooltips.png"/>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="count">-->
|
|
|
+<!-- <CountTo :startVal="tszhqk.ssyhs.startVal" :endVal="tszhqk.ssyhs.endVal" :duration="1500"></CountTo>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="item">-->
|
|
|
+<!-- <div class="line"/>-->
|
|
|
+<!-- <div class="right">-->
|
|
|
+<!-- <div class="title">流动用户数<el-popover-->
|
|
|
+<!-- placement="top"-->
|
|
|
+<!-- trigger="hover"-->
|
|
|
+<!-- :width="230"-->
|
|
|
+<!-- content="数据来源：网信办手机信令统计"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #reference>-->
|
|
|
+<!-- <img src="./img/tooltips.png"/>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="count">-->
|
|
|
+<!-- <CountTo :startVal="tszhqk.ldyhs.startVal" :endVal="tszhqk.ldyhs.endVal" :duration="1500"></CountTo>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="item">-->
|
|
|
+<!-- <div class="line"/>-->
|
|
|
+<!-- <div class="right">-->
|
|
|
+<!-- <div class="title">旅游用户数<el-popover-->
|
|
|
+<!-- placement="top"-->
|
|
|
+<!-- trigger="hover"-->
|
|
|
+<!-- :width="230"-->
|
|
|
+<!-- content="数据来源：网信办手机信令统计"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #reference>-->
|
|
|
+<!-- <img src="./img/tooltips.png"/>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="count">-->
|
|
|
+<!-- <CountTo :startVal="tszhqk.lyyhs.startVal" :endVal="tszhqk.lyyhs.endVal" :duration="1500"></CountTo>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="item">-->
|
|
|
+<!-- <div class="line"/>-->
|
|
|
+<!-- <div class="right">-->
|
|
|
+<!-- <div class="title">过境用户数<el-popover-->
|
|
|
+<!-- placement="top"-->
|
|
|
+<!-- trigger="hover"-->
|
|
|
+<!-- :width="230"-->
|
|
|
+<!-- content="数据来源：网信办手机信令统计"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #reference>-->
|
|
|
+<!-- <img src="./img/tooltips.png"/>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="count">-->
|
|
|
+<!-- <CountTo :startVal="tszhqk.gjyhs.startVal" :endVal="tszhqk.gjyhs.endVal" :duration="1500"></CountTo>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="item">-->
|
|
|
+<!-- <div class="line"/>-->
|
|
|
+<!-- <div class="right">-->
|
|
|
+<!-- <div class="title">境外用户数<el-popover-->
|
|
|
+<!-- placement="top"-->
|
|
|
+<!-- trigger="hover"-->
|
|
|
+<!-- :width="230"-->
|
|
|
+<!-- content="数据来源：网信办手机信令统计"-->
|
|
|
+<!-- >-->
|
|
|
+<!-- <template #reference>-->
|
|
|
+<!-- <img src="./img/tooltips.png"/>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- </el-popover>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- <div class="count">-->
|
|
|
+<!-- <CountTo :startVal="tszhqk.jwyhs.startVal" :endVal="tszhqk.jwyhs.endVal" :duration="1500"></CountTo>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </div>-->
|
|
|
<div class="screen-item screen-item-spzyqk">
|
|
|
<div class="si-head">
|
|
|
<div>视频资源情况</div>
|
|
|
@@ -277,6 +292,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="bottom-url">
|
|
|
+ <div class="bu-zw __hover">海事专网</div>
|
|
|
+ <div class="bu-zw __hover">融办专网</div>
|
|
|
+ <div class="bu-zwxt __hover">专网系统</div>
|
|
|
+ <div class="bu-zw __hover">边检专网</div>
|
|
|
+ <div class="bu-zw __hover">打私专网</div>
|
|
|
+ </div>
|
|
|
<div v-show="showInfo" class="info-dialog" ref="ref_infoDialog">
|
|
|
<template v-for="(item, index) in InfoMapper">
|
|
|
<div class="info-dialog-block animate__animated">
|
|
|
@@ -348,28 +370,28 @@ export default defineComponent({
|
|
|
infoInput: '',
|
|
|
LogoIcon: logoIcon,
|
|
|
showMessage: false,
|
|
|
- tszhqk: {
|
|
|
- ssyhs: {
|
|
|
- startVal: 0,
|
|
|
- endVal: 0
|
|
|
- },
|
|
|
- ldyhs: {
|
|
|
- startVal: 0,
|
|
|
- endVal: 0
|
|
|
- },
|
|
|
- lyyhs: {
|
|
|
- startVal: 0,
|
|
|
- endVal: 0
|
|
|
- },
|
|
|
- gjyhs: {
|
|
|
- startVal: 0,
|
|
|
- endVal: 0
|
|
|
- },
|
|
|
- jwyhs: {
|
|
|
- startVal: 0,
|
|
|
- endVal: 0
|
|
|
- },
|
|
|
- },
|
|
|
+ // tszhqk: {
|
|
|
+ // ssyhs: {
|
|
|
+ // startVal: 0,
|
|
|
+ // endVal: 0
|
|
|
+ // },
|
|
|
+ // ldyhs: {
|
|
|
+ // startVal: 0,
|
|
|
+ // endVal: 0
|
|
|
+ // },
|
|
|
+ // lyyhs: {
|
|
|
+ // startVal: 0,
|
|
|
+ // endVal: 0
|
|
|
+ // },
|
|
|
+ // gjyhs: {
|
|
|
+ // startVal: 0,
|
|
|
+ // endVal: 0
|
|
|
+ // },
|
|
|
+ // jwyhs: {
|
|
|
+ // startVal: 0,
|
|
|
+ // endVal: 0
|
|
|
+ // },
|
|
|
+ // },
|
|
|
videoList: <any>[],
|
|
|
sjzycqk: {
|
|
|
sjcczl: 0,
|
|
|
@@ -518,7 +540,7 @@ export default defineComponent({
|
|
|
})
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
- initTSZHQK()
|
|
|
+ // initTSZHQK()
|
|
|
initVideo()
|
|
|
initSJZYCQK()
|
|
|
initSPJXZS()
|
|
|
@@ -715,7 +737,7 @@ export default defineComponent({
|
|
|
opacity: 0.8;
|
|
|
width: 100%;
|
|
|
height: $screenHrefHeight;
|
|
|
- z-index: 2;
|
|
|
+ z-index: 3;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
@@ -741,8 +763,44 @@ export default defineComponent({
|
|
|
&:first-child {
|
|
|
margin: 0 11px 0 17px;
|
|
|
}
|
|
|
- &:last-child {
|
|
|
- margin: 0 1px 0 auto;
|
|
|
+ }
|
|
|
+ .more {
|
|
|
+ margin: 0 1px 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ >div {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: FZLanTingHeiS-DB-GB;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #82D6FF;
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.more-menu-popover) {
|
|
|
+ background: #0a369f;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ width: auto !important;
|
|
|
+ min-width: 0;
|
|
|
+ .el-popper__arrow::before {
|
|
|
+ background: #0a369f;
|
|
|
+ border-color: #0a369f;
|
|
|
+ }
|
|
|
+ .more-menu-list {
|
|
|
+ .s-item {
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1.2;
|
|
|
+ user-select: none;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -854,14 +912,16 @@ export default defineComponent({
|
|
|
}
|
|
|
.screen-item-sjzycqk {
|
|
|
right: 30px;
|
|
|
- top: 343px;
|
|
|
+ top: 189px;
|
|
|
.si-content {
|
|
|
background-color: transparent;
|
|
|
.slc-item {
|
|
|
- margin-top: 10px;
|
|
|
- background: url("./img/left_bg-2.png");
|
|
|
+ margin-top: 14px;
|
|
|
+ background-image: url("./img/left_bg-2.png");
|
|
|
+ background-size: 100%;
|
|
|
+ background-repeat: round;
|
|
|
width: 404px;
|
|
|
- height: 83px;
|
|
|
+ height: 110px;
|
|
|
position: relative;
|
|
|
&:first-child {
|
|
|
margin-top: 0;
|
|
|
@@ -869,12 +929,15 @@ export default defineComponent({
|
|
|
.slc-item-icon {
|
|
|
position: absolute;
|
|
|
left: 15px;
|
|
|
+ top: 11px;
|
|
|
+ width: 78px;
|
|
|
+ height: 89px;
|
|
|
}
|
|
|
.slc-item-title {
|
|
|
background: url("./img/left_bg-3.png");
|
|
|
width: 276px;
|
|
|
height: 24px;
|
|
|
- top: 12px;
|
|
|
+ top: 25px;
|
|
|
left: 78px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -897,9 +960,9 @@ export default defineComponent({
|
|
|
.slc-item-count {
|
|
|
position: absolute;
|
|
|
right: 106px;
|
|
|
- bottom: 8px;
|
|
|
- font-size: 30px;
|
|
|
- font-family: fantasy;
|
|
|
+ bottom: 16px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: fzcqjt;
|
|
|
font-weight: 400;
|
|
|
color: #32DCFB;
|
|
|
letter-spacing: 3px;
|
|
|
@@ -975,10 +1038,10 @@ export default defineComponent({
|
|
|
}
|
|
|
.screen-item-spzyqk {
|
|
|
right: 443px;
|
|
|
- top: 343px;
|
|
|
+ top: 189px;
|
|
|
.si-content {
|
|
|
width: 402px;
|
|
|
- height: 152px;
|
|
|
+ height: 206px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
.video-img {
|
|
|
@@ -993,6 +1056,9 @@ export default defineComponent({
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: end;
|
|
|
+ &:last-child {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
.title {
|
|
|
font-size: 20px;
|
|
|
font-family: Microsoft YaHei;
|
|
|
@@ -1006,7 +1072,7 @@ export default defineComponent({
|
|
|
}
|
|
|
.count {
|
|
|
font-size: 30px;
|
|
|
- font-family: fantasy;
|
|
|
+ font-family: fzcqjt;
|
|
|
font-weight: 400;
|
|
|
color: #32DCFB;
|
|
|
letter-spacing: 3px;
|
|
|
@@ -1018,7 +1084,7 @@ export default defineComponent({
|
|
|
}
|
|
|
.screen-item-yjtjqk {
|
|
|
right: 443px;
|
|
|
- top: 558px;
|
|
|
+ top: 467px;
|
|
|
.si-head {
|
|
|
width: 402px;
|
|
|
.jjsy {
|
|
|
@@ -1035,14 +1101,14 @@ export default defineComponent({
|
|
|
}
|
|
|
.si-content {
|
|
|
width: 402px;
|
|
|
- height: 240px;
|
|
|
+ height: 328px;
|
|
|
position: relative;
|
|
|
.total {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- margin-top: 15px;
|
|
|
+ margin-top: 28px;
|
|
|
.title {
|
|
|
padding: 0 4px;
|
|
|
font-size: 16px;
|
|
|
@@ -1073,8 +1139,10 @@ export default defineComponent({
|
|
|
}
|
|
|
.jinzita {
|
|
|
position: absolute;
|
|
|
- top: 94px;
|
|
|
+ top: 112px;
|
|
|
left: 25px;
|
|
|
+ width: 345px;
|
|
|
+ height: 197px;
|
|
|
}
|
|
|
.item {
|
|
|
position: absolute;
|
|
|
@@ -1094,22 +1162,22 @@ export default defineComponent({
|
|
|
color: #01FFF6;
|
|
|
}
|
|
|
&.item-ffld {
|
|
|
- top: 74px;
|
|
|
+ top: 92px;
|
|
|
right: 235px;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
&.item-cqzl {
|
|
|
- top: 100px;
|
|
|
+ top: 140px;
|
|
|
left: 259px;
|
|
|
}
|
|
|
&.item-bbbzs {
|
|
|
- top: 132px;
|
|
|
+ top: 178px;
|
|
|
right: 270px;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
&.item-qt {
|
|
|
- top: 157px;
|
|
|
- left: 291px;
|
|
|
+ top: 223px;
|
|
|
+ left: 302px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1220,5 +1288,44 @@ export default defineComponent({
|
|
|
height: calc(100% - #{$screenInfoHeight} - #{$screenHrefHeight});
|
|
|
top: $screenInfoHeight;
|
|
|
}
|
|
|
+ .bottom-url {
|
|
|
+ background-image: url("./img/bottom-url.png");
|
|
|
+ width: 1112px;
|
|
|
+ height: 92px;
|
|
|
+ bottom: $screenHrefHeight;
|
|
|
+ z-index: 2;
|
|
|
+ left: calc((100% - 1112px) / 2);
|
|
|
+ position: absolute;
|
|
|
+ .bu-zw {
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: FZLanTingHeiS-DB-GB;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #82D6FF;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ opacity: 0.6;
|
|
|
+ &:nth-child(1) {
|
|
|
+ left: 108px;
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ left: 280px;
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ left: 737px;
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ left: 908px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bu-zwxt {
|
|
|
+ font-size: 22px;
|
|
|
+ font-family: FZLanTingHeiS-DB-GB;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #82D6FF;
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ left: 506px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
CzRger
