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