tianzeOrg
/
tz-BlockChainFinance_ui
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'屏''

Browse Source
pull/1/head
方佳 博 1 year ago
parent 3c0ba5f156
commit 5e07483176
4 changed files with 376 additions and 9 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/fonts/DS-Digital.ttf
View File

Binary file not shown.

2
src/assets/fonts/font.css
Unescape Escape View File

@ -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;
}

2
src/layout/components/Navbar.vue
Unescape Escape View File

@ -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">

377
src/views/visual/components/transaction.vue
Unescape Escape View File

@ -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>
Write Preview
Loading…
Cancel
Save