|
|
|
@ -1,11 +1,13 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-study">
|
|
|
|
|
<!-- <el-button style="background:url('../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png'); width: 143px;">全屏</el-button> -->
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" >
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" @click="fullScreen">
|
|
|
|
|
<div class="visualization">
|
|
|
|
|
|
|
|
|
|
<div class="visMain">
|
|
|
|
|
|
|
|
|
|
<div class="top">
|
|
|
|
|
<span class="linear-gradient-text">xxx学校人民币数字货币交易总览</span>
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/top.png">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="leftMain">
|
|
|
|
@ -16,19 +18,86 @@
|
|
|
|
|
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-2.png">
|
|
|
|
|
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-3.png">
|
|
|
|
|
<img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-4.png">
|
|
|
|
|
<div class="font1"><span class="font3">交易总次数</span><span class="font2">123321</span>次</div>
|
|
|
|
|
<div class="font4"><span class="font3">交易总次数</span><span class="font2">123321</span>次</div>
|
|
|
|
|
<div class="font1"><span class="font3">交易总次数</span><span class="font2">123321 </span>次</div>
|
|
|
|
|
<div class="font4"><span class="font3">交易总金额</span><span class="font2">123321-CNY</span></div>
|
|
|
|
|
<div class="font5"><span class="font3">发放红包总数量</span><span class="font2">123321 </span>个</div>
|
|
|
|
|
<div class="font6"><span class="font3">发放红包总金额</span><span class="font2">123321 </span>个</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<img style="width: 100%; position: absolute; top:350px;left:0px" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题2.pn.png">
|
|
|
|
|
<span class="leftText2">商业银行交易情况</span>
|
|
|
|
|
<div class="leftSmallWindow2">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框1.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框2.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框3.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框4.png">
|
|
|
|
|
<div class="fontFont1"><span class="fontFont2">商业银行数量</span><span><a>56</a>家</span></div>
|
|
|
|
|
<div class="fontFont3"><span class="fontFont2">用户数量</span><span><a>102</a>个</span></div>
|
|
|
|
|
<div class="fontFont4"><span class="fontFont2">兑换数字人民币金额</span><span><a>12021-CNY</a></span></div>
|
|
|
|
|
<div class="fontFont5"><span class="fontFont2">发送红包数量</span><span><a>12021-CNY</a></span></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="earth">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/边圈(做旋转).png">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="rightMain">
|
|
|
|
|
<img style="width: 100%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题3.pn.png">
|
|
|
|
|
<span class="leftText">企业交易情况</span>
|
|
|
|
|
<div class="leftSmallWindow3">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/企业用户数量.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/上架商品数量.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/兑换数字人民币金额.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/发放红包金额.png">
|
|
|
|
|
<div class="fontFont1"><span><a>56</a>家</span><span class="fontFont2">企业用户数量</span></div>
|
|
|
|
|
<div class="fontFont3"><span><a>102</a>个</span><span class="fontFont2">上架商品数量</span></div>
|
|
|
|
|
<div class="fontFont4"><span><a>12021-CNY</a></span><span class="fontFont2">兑换数字人民币金额</span></div>
|
|
|
|
|
<div class="fontFont5"><span><a>12021-CNY</a></span><span class="fontFont2">发送红包金额</span></div>
|
|
|
|
|
</div>
|
|
|
|
|
<img style="width: 100%; position: absolute; top:350px;left:0px" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题2.pn.png">
|
|
|
|
|
<span class="leftText2">商业银行交易情况</span>
|
|
|
|
|
<div class="leftSmallWindow4">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-1.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-2.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-3.png">
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-4.png">
|
|
|
|
|
<div class="fontFont6"><span class="fontFont2">个人用户数量</span><span><a>56</a>个</span></div>
|
|
|
|
|
<div class="fontFont7"><span class="fontFont2">兑换数字人民币金额</span><span><a>102</a>个</span></div>
|
|
|
|
|
<div class="fontFont8"><span class="fontFont2">消费中金额</span><span><a>12021-CNY</a></span></div>
|
|
|
|
|
<div class="fontFont9"><span class="fontFont2">领取红包金额</span><span><a>12021-CNY</a></span></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup>
|
|
|
|
|
import {toggleFullscreenContainer} from '@/utils/index.js'
|
|
|
|
|
|
|
|
|
|
const fullScreen=()=>{
|
|
|
|
|
toggleFullscreenContainer('.visMain')
|
|
|
|
|
document.addEventListener('fullscreenchange', exitFullscreenHandler);
|
|
|
|
|
document.addEventListener('webkitfullscreenchange', exitFullscreenHandler);
|
|
|
|
|
document.addEventListener('mozfullscreenchange', exitFullscreenHandler);
|
|
|
|
|
document.addEventListener('MSFullscreenChange', exitFullscreenHandler);
|
|
|
|
|
const element = document.querySelector('.earth');
|
|
|
|
|
element.style.width='673px'
|
|
|
|
|
element.style.height='675px'
|
|
|
|
|
element.style.marginTop='160px'
|
|
|
|
|
}
|
|
|
|
|
// 处理退出全屏的函数
|
|
|
|
|
function exitFullscreenHandler() {
|
|
|
|
|
if (!document.fullscreenElement && !document.mozFullScreenElement &&
|
|
|
|
|
!document.webkitFullscreenElement && !document.msFullscreenElement) {
|
|
|
|
|
// 退出全屏后执行的代码
|
|
|
|
|
// console.log('已退出全屏');
|
|
|
|
|
const element = document.querySelector('.earth');
|
|
|
|
|
element.style.width='502px'
|
|
|
|
|
element.style.height='504px'
|
|
|
|
|
element.style.marginTop='111px'
|
|
|
|
|
// 在这里可以添加你想要执行的操作
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scope>
|
|
|
|
@ -38,16 +107,197 @@
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
.visMain{
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 750px; /* 设置div的高度 */
|
|
|
|
|
width: 1554px; /* 设置div的宽度 */
|
|
|
|
|
// width: 1554px; /* 设置div的宽度 */
|
|
|
|
|
width: calc(100% - 10%);
|
|
|
|
|
margin: auto;
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/背景.png');
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
.rightMain{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 462px;
|
|
|
|
|
right: 24px;
|
|
|
|
|
top:94px;
|
|
|
|
|
.leftText{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 21%;
|
|
|
|
|
left: 22%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
font-family: '微软雅黑';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.leftText2{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 359px;
|
|
|
|
|
left: 26%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
font-family: '微软雅黑';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.leftSmallWindow3{
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 272px;
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
img{
|
|
|
|
|
margin-left: 31px;
|
|
|
|
|
height: 113px;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftSmallWindow4{
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 280px;
|
|
|
|
|
top: 367px;
|
|
|
|
|
margin-top: 18px;
|
|
|
|
|
img{
|
|
|
|
|
margin-left: 31px;
|
|
|
|
|
height: 122px;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont1{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 42px;
|
|
|
|
|
left: 107px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont6{
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 60px;
|
|
|
|
|
left: 83px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont2{
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
display: list-item;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.fontFont3{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 42px;
|
|
|
|
|
left: 328px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont7{
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 60px;
|
|
|
|
|
left: 281px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont4{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 172px;
|
|
|
|
|
left: 91px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont8{
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 201px;
|
|
|
|
|
left: 76px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont5{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 172px;
|
|
|
|
|
left: 320px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont9{
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 202px;
|
|
|
|
|
left: 292px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftMain{
|
|
|
|
|
position: absolute;
|
|
|
|
|
// height: 200px;
|
|
|
|
|
width: 462px;
|
|
|
|
|
left: 80px;
|
|
|
|
|
left: 21px;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
// border: 1px solid red;
|
|
|
|
|
.leftText{
|
|
|
|
@ -59,6 +309,94 @@
|
|
|
|
|
font-family: '微软雅黑';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.leftText2{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 359px;
|
|
|
|
|
left: 26%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
font-family: '微软雅黑';
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
}
|
|
|
|
|
.leftSmallWindow2{
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 275px;
|
|
|
|
|
top:350px;
|
|
|
|
|
margin-top: 32px;
|
|
|
|
|
img{
|
|
|
|
|
margin-left: 7px;
|
|
|
|
|
height: 114px;
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
.fontFont1{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 42px;
|
|
|
|
|
left: 83px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont2{
|
|
|
|
|
font-size: 16px !important;
|
|
|
|
|
display: list-item;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.fontFont3{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 42px;
|
|
|
|
|
left: 312px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont4{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 172px;
|
|
|
|
|
left: 83px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.fontFont5{
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 172px;
|
|
|
|
|
left: 312px;
|
|
|
|
|
a{
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
cursor: default;
|
|
|
|
|
font-family:'FZCYJ';
|
|
|
|
|
color: yellow;
|
|
|
|
|
font-size: 25px;
|
|
|
|
|
}
|
|
|
|
|
span{
|
|
|
|
|
font-size: 21px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.leftSmallWindow{
|
|
|
|
|
position: absolute;
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
|
|
|
|
@ -85,6 +423,24 @@
|
|
|
|
|
.font3{
|
|
|
|
|
margin-right: 90px;
|
|
|
|
|
}
|
|
|
|
|
.font4{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 74px;
|
|
|
|
|
left: 103px;
|
|
|
|
|
}
|
|
|
|
|
.font5{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 131px;
|
|
|
|
|
left: 103px;
|
|
|
|
|
}
|
|
|
|
|
.font6{
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 187px;
|
|
|
|
|
left: 103px;
|
|
|
|
|
}
|
|
|
|
|
// border: 1px solid black;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -118,4 +474,15 @@
|
|
|
|
|
100% {
|
|
|
|
|
transform: rotate(-360deg);
|
|
|
|
|
}}
|
|
|
|
|
.linear-gradient-text{
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
|
|
|
|
|
background: linear-gradient(180deg, #FF2052F6 16%, #FF5DDCF9 100%);
|
|
|
|
|
-webkit-background-clip: text;
|
|
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
|
|
}
|
|
|
|
|
</style>
|