From 5e07483176202914e01c71bcb80ee6580c77c90c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=B9=E4=BD=B3=20=E5=8D=9A?=
 <12742597+fang-jiabo@user.noreply.gitee.com>
Date: Wed, 8 Nov 2023 14:57:38 +0800
Subject: [PATCH] =?UTF-8?q?'=E5=B1=8F''?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/fonts/DS-Digital.ttf             | Bin 0 -> 24448 bytes
 src/assets/fonts/font.css                   |   2 +-
 src/layout/components/Navbar.vue            |   2 +-
 src/views/visual/components/transaction.vue | 381 +++++++++++++++++++-
 4 files changed, 376 insertions(+), 9 deletions(-)
 create mode 100644 src/assets/fonts/DS-Digital.ttf

diff --git a/src/assets/fonts/DS-Digital.ttf b/src/assets/fonts/DS-Digital.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..09258773c7219ad9e60b92b918e3c50b58f43c9e
GIT binary patch
literal 24448
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

literal 0
HcmV?d00001

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