diff --git a/src/assets/fonts/DS-Digital.ttf b/src/assets/fonts/DS-Digital.ttf
new file mode 100644
index 0000000..0925877
Binary files /dev/null and b/src/assets/fonts/DS-Digital.ttf differ
diff --git a/src/assets/fonts/font.css b/src/assets/fonts/font.css
index a86da0b..de006a4 100644
--- a/src/assets/fonts/font.css
+++ b/src/assets/fonts/font.css
@@ -1,6 +1,6 @@
@font-face {
font-family: 'FZCYJ';
- src: url('./DS-DIGI.TTF');
+ src: url('./DS-Digital.ttf');
font-weight: normal;
font-style: normal;
}
\ No newline at end of file
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d741b45..cc2c55f 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -25,7 +25,7 @@
<!-- <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
- <!-- <el-dropdown-item command="setLayout">
+ <el-dropdown-item command="setLayout">
<span>布局设置</span>
</el-dropdown-item> -->
<el-dropdown-item divided command="logout">
diff --git a/src/views/visual/components/transaction.vue b/src/views/visual/components/transaction.vue
index dc7172e..b0b7f1f 100644
--- a/src/views/visual/components/transaction.vue
+++ b/src/views/visual/components/transaction.vue
@@ -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>
- </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>
\ No newline at end of file