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