|
|
@ -1,16 +1,34 @@
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
import {toggleFullscreenContainer} from '@/utils/index.js'
|
|
|
|
|
|
|
|
const fullScreen=()=>{
|
|
|
|
|
|
|
|
toggleFullscreenContainer('.nodeBody')
|
|
|
|
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="app-study">
|
|
|
|
<div class="app-study">
|
|
|
|
<div>
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" @click="fullScreen">
|
|
|
|
|
|
|
|
<div class="nodeBody">
|
|
|
|
|
|
|
|
<div class="nodeBody1">
|
|
|
|
|
|
|
|
<div class="nodeTop">
|
|
|
|
|
|
|
|
<!-- <img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png"> -->
|
|
|
|
|
|
|
|
<div class="imgAnimation1"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation2"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation3"></div>
|
|
|
|
|
|
|
|
<!-- <img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png">
|
|
|
|
|
|
|
|
<img src="../../../assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png"> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nodeMiddle">
|
|
|
|
|
|
|
|
<div class="imgAnimation1"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation2"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation3"></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nodeFoot">
|
|
|
|
|
|
|
|
<div class="imgAnimation1"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation2"></div>
|
|
|
|
|
|
|
|
<div class="imgAnimation3"></div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!--<el-row>
|
|
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
|
|
<img src="../../assets/images/32.png" alt="" />
|
|
|
|
|
|
|
|
<span>操作记录和成绩</span>
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row> -->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
<style lang='scss' scoped>
|
|
|
@ -20,11 +38,9 @@
|
|
|
|
// border: 1px solid #238AFF;
|
|
|
|
// border: 1px solid #238AFF;
|
|
|
|
// border-radius: 5px;
|
|
|
|
// border-radius: 5px;
|
|
|
|
div{
|
|
|
|
div{
|
|
|
|
margin-top: -90px;
|
|
|
|
|
|
|
|
margin-left: -130px;
|
|
|
|
|
|
|
|
height: 995px;
|
|
|
|
height: 995px;
|
|
|
|
background: url('../../../assets/images/交易节点.png' ) no-repeat !important;
|
|
|
|
// background: url('../../../assets/images/交易节点.png' ) no-repeat !important;
|
|
|
|
background-size: 102% 100% !important;
|
|
|
|
// background-size: 102% 100% !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.el-col-24 {
|
|
|
|
.el-col-24 {
|
|
|
|
height: 69px;
|
|
|
|
height: 69px;
|
|
|
@ -38,5 +54,121 @@
|
|
|
|
color: #ffff;
|
|
|
|
color: #ffff;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nodeBody{
|
|
|
|
|
|
|
|
.nodeBody1{
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: 946px;
|
|
|
|
|
|
|
|
height: 1200px;
|
|
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
width: 946px;
|
|
|
|
|
|
|
|
height: 1200px;
|
|
|
|
|
|
|
|
margin: auto;
|
|
|
|
|
|
|
|
margin-top: 30px;
|
|
|
|
|
|
|
|
.nodeTop{
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
height: 442px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/一层.png') no-repeat;
|
|
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
|
|
// background-size: 100% 100%;
|
|
|
|
|
|
|
|
.imgAnimation1{
|
|
|
|
|
|
|
|
width:100px;
|
|
|
|
|
|
|
|
height: 107px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 277px;
|
|
|
|
|
|
|
|
top: 105px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png') no-repeat;
|
|
|
|
|
|
|
|
// animation: gif 5s infinite;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
// @keyframes gif {
|
|
|
|
|
|
|
|
// 0% {
|
|
|
|
|
|
|
|
// background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-1箭头.png');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 50% {
|
|
|
|
|
|
|
|
// background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// 100% {
|
|
|
|
|
|
|
|
// background-image: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png');
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
.imgAnimation2 {
|
|
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
|
|
height: 65px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-2箭头.png') no-repeat;
|
|
|
|
|
|
|
|
left: 466px;
|
|
|
|
|
|
|
|
top: 186px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgAnimation3 {
|
|
|
|
|
|
|
|
width: 98px;
|
|
|
|
|
|
|
|
height: 108px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/1-3箭头.png') no-repeat;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 572px;
|
|
|
|
|
|
|
|
top: 103px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.nodeMiddle{
|
|
|
|
|
|
|
|
height: 277px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/二层.png') no-repeat;
|
|
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
|
|
.imgAnimation1{
|
|
|
|
|
|
|
|
width: 79px;
|
|
|
|
|
|
|
|
height: 90px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-1箭头.png') no-repeat;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 204px;
|
|
|
|
|
|
|
|
top: 343px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgAnimation2 {
|
|
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
|
|
height: 102px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-2箭头.png') no-repeat;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 466px;
|
|
|
|
|
|
|
|
top: 390px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgAnimation3 {
|
|
|
|
|
|
|
|
width: 79px;
|
|
|
|
|
|
|
|
height: 90px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/2-3箭头.png') no-repeat;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 665px;
|
|
|
|
|
|
|
|
top: 344px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.nodeFoot{
|
|
|
|
|
|
|
|
height: 250px;
|
|
|
|
|
|
|
|
margin-top: -96px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/三层.png') no-repeat;
|
|
|
|
|
|
|
|
background-position: center;
|
|
|
|
|
|
|
|
.imgAnimation1 {
|
|
|
|
|
|
|
|
width: 115px;
|
|
|
|
|
|
|
|
height: 235px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-1箭头.png') no-repeat;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 43px;
|
|
|
|
|
|
|
|
top: 454px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgAnimation2 {
|
|
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
|
|
height: 102px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 466px;
|
|
|
|
|
|
|
|
top: 625px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-2箭头.png') no-repeat;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgAnimation3 {
|
|
|
|
|
|
|
|
width: 115px;
|
|
|
|
|
|
|
|
height: 235px;
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
left: 789px;
|
|
|
|
|
|
|
|
background: url('../../../assets/images/央行可视化监控中心-切图/交易节点/3-3箭头.png') no-repeat;
|
|
|
|
|
|
|
|
top: 454px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|