diff --git a/package.json b/package.json
index 846cac7..480e527 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
     "pinia": "2.0.22",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "vue3-count-to": "^1.1.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",
diff --git a/src/api/user.js b/src/api/user.js
index e9d22aa..3bb8b7b 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -167,4 +167,48 @@ export const getBalance = (query) => {
         method: 'get',
         params:query
       })
+}
+
+
+
+
+
+
+
+
+
+
+
+// ---------------------------------------------------------------------央行可视化
+// 交易总览
+export const getTransactionOverview = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionOverview',
+        method: 'get',
+        params:query
+      })
+}
+// 获取交易区块
+export const getTransactionBlock = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBlockList',
+        method: 'get',
+        params:query
+      })
+}
+// 获取交易广播
+export const getTransactionBroadcast = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBroadcastList',
+        method: 'get',
+        params:query
+      })
+}
+//查看广播详情
+export const getBroadcastDetails = (query) => {
+    return request({
+        url: 'api/stu/centralBank/getTransactionBroadcastList',
+        method: 'get',
+        params:query
+      })
 }
\ No newline at end of file
diff --git a/src/assets/images/1110.zip b/src/assets/images/1110.zip
new file mode 100644
index 0000000..a745786
Binary files /dev/null and b/src/assets/images/1110.zip differ
diff --git a/src/assets/images/1110/按钮1-高亮.png b/src/assets/images/1110/按钮1-高亮.png
new file mode 100644
index 0000000..db2d0c5
Binary files /dev/null and b/src/assets/images/1110/按钮1-高亮.png differ
diff --git a/src/assets/images/1110/按钮1.png b/src/assets/images/1110/按钮1.png
new file mode 100644
index 0000000..40b40b5
Binary files /dev/null and b/src/assets/images/1110/按钮1.png differ
diff --git a/src/assets/images/1110/按钮2-高亮.png b/src/assets/images/1110/按钮2-高亮.png
new file mode 100644
index 0000000..781480d
Binary files /dev/null and b/src/assets/images/1110/按钮2-高亮.png differ
diff --git a/src/assets/images/1110/按钮2.png b/src/assets/images/1110/按钮2.png
new file mode 100644
index 0000000..59ffc69
Binary files /dev/null and b/src/assets/images/1110/按钮2.png differ
diff --git a/src/assets/images/1110/按钮3-高亮.png b/src/assets/images/1110/按钮3-高亮.png
new file mode 100644
index 0000000..c44d36d
Binary files /dev/null and b/src/assets/images/1110/按钮3-高亮.png differ
diff --git a/src/assets/images/1110/按钮3.png b/src/assets/images/1110/按钮3.png
new file mode 100644
index 0000000..4cf9878
Binary files /dev/null and b/src/assets/images/1110/按钮3.png differ
diff --git a/src/assets/images/1110/按钮4-高亮.png b/src/assets/images/1110/按钮4-高亮.png
new file mode 100644
index 0000000..05868d4
Binary files /dev/null and b/src/assets/images/1110/按钮4-高亮.png differ
diff --git a/src/assets/images/1110/按钮4.png b/src/assets/images/1110/按钮4.png
new file mode 100644
index 0000000..0d4fe7d
Binary files /dev/null and b/src/assets/images/1110/按钮4.png differ
diff --git a/src/assets/images/__MACOSX/1110/._按钮1-高亮.png b/src/assets/images/__MACOSX/1110/._按钮1-高亮.png
new file mode 100644
index 0000000..295db01
Binary files /dev/null and b/src/assets/images/__MACOSX/1110/._按钮1-高亮.png differ
diff --git a/src/assets/images/切图.zip b/src/assets/images/切图.zip
new file mode 100644
index 0000000..bc09f7a
Binary files /dev/null and b/src/assets/images/切图.zip differ
diff --git a/src/main.js b/src/main.js
index f349872..034bfcd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -42,7 +42,7 @@ import ImagePreview from "@/components/ImagePreview"
 import TreeSelect from '@/components/TreeSelect'
 // 字典标签组件
 import DictTag from '@/components/DictTag'
-
+import countTo from 'vue3-count-to';
 const app = createApp(App)
 
 // 全局方法挂载
@@ -66,6 +66,7 @@ app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 
 app.use(router)
+app.use(countTo)
 app.use(store)
 app.use(plugins)
 app.use(elementIcons)
diff --git a/src/utils/auth.js b/src/utils/auth.js
index dd53c5b..e31d7ee 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -31,7 +31,6 @@ export function getToken() {
 export function setToken(token) {
   return Cookies.set(TokenKey, token)
 }
-
 export function removeToken() {
   return Cookies.remove(TokenKey)
 }
diff --git a/src/utils/request.js b/src/utils/request.js
index f3119ab..3836a27 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -22,7 +22,6 @@ const service = axios.create({
   // 超时
   timeout: 60000
 })
-
 // request拦截器
 service.interceptors.request.use(config => {
   // 是否需要设置 token
diff --git a/src/views/enterprise/deal/deal.vue b/src/views/enterprise/deal/deal.vue
index d2c9330..4082209 100644
--- a/src/views/enterprise/deal/deal.vue
+++ b/src/views/enterprise/deal/deal.vue
@@ -2,6 +2,7 @@
 import * as  enterpriseUser from '@/api/enterpriseUser';
 import useUserStore from '@/store/modules/user';
 const userStore = useUserStore();
+import {getSchoolId} from "@/utils/auth.js"
 // 验证
 const dialogVisible = ref(false);
 // 解密
@@ -45,6 +46,7 @@ const transactionParams=reactive({
 // 上链广播parasm
 const broadcastParams=reactive({
   userId:userStore.userId,
+  schoolId:getSchoolId(),
   index:1,
   size:5
 })
@@ -139,15 +141,15 @@ getTransaction()
             </template>
           </el-table-column>
         </el-table>
-        <pagination
+      
+      </div>
+      <pagination
        v-show="broadcastTotal>0"
       :total="broadcastTotal"
       v-model:page="broadcastParams.index"
       v-model:limit="broadcastParams.size"
       @pagination="getBroadcast"
            />
-      </div>
-   
       <el-dialog
     v-model="dialogVisible"
     title="查看数字货币"
@@ -187,7 +189,6 @@ getTransaction()
   </el-form>
     <template #footer>
       <span class="dialog-footer">
-       
         <el-button type="primary" @click="decodeVisible = false">数字签名 生成数字货币</el-button>
       </span>
     </template>
diff --git a/src/views/enterprise/index.vue b/src/views/enterprise/index.vue
index cb9bbb6..23b8f29 100644
--- a/src/views/enterprise/index.vue
+++ b/src/views/enterprise/index.vue
@@ -15,10 +15,34 @@ const  go = (idx) => {
 <template>
   <div class="app-central">
     <div class="central-bank-title">
-      <div @click.native="go(1)"><span>钱包管理</span></div>
-      <div @click.native="go(2)"><span>交易数据</span></div>
-      <div @click.native="go(3)"><span>公司经营</span></div>
-      <div @click.native="go(4)"><span>智能合约模拟</span></div>
+      <div @click.native="go(1)">
+        <span class="line"></span>
+        <span class="line"></span>
+        <span class="line"></span>
+        <span class="line"></span> 
+        <span class="content">钱包管理</span>
+      </div>
+      <div @click.native="go(2)">
+        <span class="lines"></span>
+        <span class="lines"></span>
+        <span class="lines"></span>
+        <span class="lines"></span> 
+        <span class="content">交易数据</span>
+      </div>
+      <div @click.native="go(3)">
+        <span class="line1"></span>
+        <span class="line1"></span>
+        <span class="line1"></span>
+        <span class="line1"></span> 
+        <span class="content">公司经营</span>
+      </div>
+      <div @click.native="go(4)">
+        <span class="line2"></span>
+        <span class="line2"></span>
+        <span class="line2"></span>
+        <span class="line2"></span> 
+        <span class="content">智能合约模拟</span>
+      </div>
     </div>
     <div class="central-ban-information">
        <wallet v-if="tabsid == 1"></wallet>
@@ -45,16 +69,404 @@ const  go = (idx) => {
       background: url("../../assets/images/企业用户-切图/钱包管理/导航1-1.png") no-repeat;
       background-size: 100% 100%;
       margin-right: 20px;
-      text-align: center;
-      line-height: 51px;
+      // text-align: center;
+      // line-height: 51px;
       font-size: 14px;
       cursor: pointer;
       user-select: none;
-      span{
+      position: relative;
+            /* 超出隐藏需要加上 */
+      overflow: hidden;
+      // span{
+      //   display: inline-block;
+      //   width: 100%;
+      // }
+      // 点击效果
+      .line{
+        position: absolute;
+      }
+      .content{
         display: inline-block;
-        width: 100%;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
       }
-      // 点击效果
+      .line:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #3694ef);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#3694ef);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #3694ef);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #3a86ff);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+
+        .lines{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .lines:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #f4d048);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .lines:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#f4d048);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .lines:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #f4d048);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .lines:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #f4d048);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+        .line1{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .line1:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #9475e3);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line1:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#9475e3);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line1:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #9475e3);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line1:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #9475e3);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
+        .line2{
+        position: absolute;
+      }
+      .content{
+        display: inline-block;
+        width: 233px;
+        height: 51px;
+        text-align: center;
+        line-height: 51px;
+      }
+      .line2:nth-child(1) {
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 3px;
+            /* 加上渐变效果，方可形成拖尾效果 */
+            background: linear-gradient(90deg, transparent, #7ac2a2);
+            animation: animate1 8s linear infinite;
+        }
+
+        /* 分别控制其上下左右的定位距离，从而形成线条跟随效果 */
+        @keyframes animate1 {
+            0% {
+                left: -100%;
+            }
+
+            50%,
+            100% {
+                left: 100%;
+            }
+        }
+
+        .line2:nth-child(2) {
+            top: -100%;
+            right: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(180deg, transparent,#7ac2a2);
+            animation: animate2 8s linear infinite;
+            /* 注意要加上延时触发动画效果，这样线条才会依次触发 */
+            animation-delay: 2s;
+        }
+
+        @keyframes animate2 {
+            0% {
+                top: -100%;
+            }
+
+            50%,
+            100% {
+                top: 100%;
+            }
+        }
+
+        .line2:nth-child(3) {
+            bottom: 0;
+            right: 0;
+            width: 100%;
+            background: linear-gradient(270deg, transparent, #7ac2a2);
+            animation: animate3 8s linear infinite;
+            animation-delay: 4s;
+        }
+
+        @keyframes animate3 {
+            0% {
+                right: -100%;
+                height: 3px;
+            }
+
+            50%,
+            100% {
+                height: 2px;
+                right: 100%;
+            }
+        }
+
+        .line2:nth-child(4) {
+            bottom: -100%;
+            left: 0;
+            width: 3px;
+            height: 100%;
+            background: linear-gradient(360deg, transparent, #7ac2a2);
+            animation: animate4 8s linear infinite;
+            animation-delay: 6s;
+        }
+
+        @keyframes animate4 {
+            0% {
+                bottom: -100%;
+            }
+
+            50%,
+            100% {
+                bottom: 100%;
+            }
+        }
       &:hover{
             transform: scale(1.01);
             transition: transform 0.3s, opacity 0.3s; 
@@ -62,9 +474,7 @@ const  go = (idx) => {
     }
     div:nth-child(2) {
         background: url("../../assets/images/企业用户-切图/钱包管理/导航2-1.png") no-repeat;
-    span{
-        padding-left: 25px;
-    }
+   
     }
     div:nth-child(3) {
         background: url("../../assets/images/企业用户-切图/钱包管理/导航3-1.png") no-repeat;
diff --git a/src/views/index.vue b/src/views/index.vue
index c1a66dd..65dc036 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -69,7 +69,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   width: 100%;
   height: calc(100vh - 50px);
@@ -95,6 +95,13 @@ img {
     top: 8px;
     width: 900px;
     height: 423px;
+    /*动画效果 */
+    animation: rotate 2s linear infinite;
+    //hover
+    &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
 
 .sy {
@@ -104,8 +111,13 @@ img {
     top: 8px;
     width: 482px;
     height: 373px;
+    animation: rotate 2s linear infinite;
+      //hover
+      &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
-
 .qy {
   /* left: 192px;
   top: 585px; */
@@ -113,8 +125,13 @@ img {
     top: 485px;
     width: 500px;
     height: 370px;
+    animation: rotate 2s linear infinite;
+//hover
+    &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
-
 .gr {
   /* left: 1217px;
   top: 578px; */
@@ -122,6 +139,12 @@ img {
     top: 468px;
     width: 538px;
     height: 405px;
+    animation: rotate 2s linear infinite;
+      //hover
+      &:hover{
+            transform: scale(1);
+            animation: none;
+        }
 }
 
 .jt1 {
@@ -340,4 +363,15 @@ img {
   left: 1534px;
     top: 745px;
 }
+@keyframes rotate{
+  0%{
+    transform: scale(1);
+  }
+  50%{
+    transform: scale(0.9);
+  }
+  100%{
+    transform: scale(1.01);
+  }
+}
 </style>
diff --git a/src/views/individual/consumermall/consumermall.vue b/src/views/individual/consumermall/consumermall.vue
index 766e3f9..635651f 100644
--- a/src/views/individual/consumermall/consumermall.vue
+++ b/src/views/individual/consumermall/consumermall.vue
@@ -547,7 +547,6 @@ getRedPacket()
         <el-input  class="text-input"  v-model="buyCommodityParams.redPacket" @input="handleInput" :disabled="true"/>
         <el-button link  type="warning" @click="selectRedPacket">选择</el-button>
         </div>
-  
     </el-form-item>
     <el-form-item label="选择金额合计">
       <span style="color: #ffff !important;display: block;">{{ sum1 }}</span>
@@ -584,7 +583,7 @@ getRedPacket()
     //   flex-wrap: wrap;
  
         .red_packet_item{
-             display: inline-block;
+            display: inline-block;
              width: 232px;
              height: 283px;
              border-radius: 10px;
diff --git a/src/views/individual/detail/detail.vue b/src/views/individual/detail/detail.vue
index 5d072dc..a008cca 100644
--- a/src/views/individual/detail/detail.vue
+++ b/src/views/individual/detail/detail.vue
@@ -2,6 +2,7 @@
 import * as  enterpriseUser from '@/api/enterpriseUser';
 import * as user from '@/api/user'
 import useUserStore from "@/store/modules/user";
+import {getSchoolId} from "@/utils/auth.js"
 const userStore = useUserStore();
 // 验证
 const dialogVisible = ref(false);
@@ -45,6 +46,7 @@ const IndividualParams=reactive({
 })
 const broadcastParams=reactive({
   userId:userStore.userId,
+  schoolId:getSchoolId(),
   index:1,
   size:5
 })
@@ -140,14 +142,14 @@ getIndividual()
             </template>
           </el-table-column> -->
         </el-table>
-        <pagination
+      </div>
+      <pagination
        v-show="broadcastTotal>0"
       :total="broadcastTotal"
       v-model:page="broadcastParams.index"
       v-model:limit="broadcastParams.size"
       @pagination="getBroadcast"
            />
-      </div>
       <el-dialog
     v-model="dialogVisible"
     title="查看数字货币"
diff --git a/src/views/study/index.vue b/src/views/study/index.vue
index 75867c9..e8b3cff 100644
--- a/src/views/study/index.vue
+++ b/src/views/study/index.vue
@@ -120,7 +120,8 @@
 </template>
 
 <script setup>
-import {getToken} from "@/utils/auth.js"
+
+import {getToken ,getSchoolId} from "@/utils/auth.js"
 import useUserStore from "@/store/modules/user";
 const userStore = useUserStore();
 import * as controller from "@/api/controller.js"
@@ -460,7 +461,7 @@ const checkComment=(test)=>{
 }
 // 获取操作记录和成绩
 const getRecord=()=>{
-  controller.getScore({schoolId:userStore.schoolid,userId:userStore.userId}).then((res) => {
+  controller.getScore({schoolId:getSchoolId(),userId:userStore.userId}).then((res) => {
     // 中央银行
     tabaData[0].actual=res.data.totalDigitalCurrencyExchangeAmount
     tabaData[1].actual=res.data.centralBankDigitalCurrencyDeliveryCount
diff --git a/src/views/visual/components/transaction-block.vue b/src/views/visual/components/transaction-block.vue
index 2c36208..2c942d7 100644
--- a/src/views/visual/components/transaction-block.vue
+++ b/src/views/visual/components/transaction-block.vue
@@ -9,62 +9,91 @@
       <div class="block-conter-header">
         <div class="conter-header">
           <div class="header-item">
-            <span>111111</span>
+             <span>节点数</span><br>
+             <span style="color: #FFDE00;">{{ nodeNumber }}</span>
           </div>
         </div>
         <div class="conter-header">
-          <span>1</span>
+          <div class="header-item">
+             <span>链高度</span><br>
+             <span style="color: #FFDE00;">{{ chainHeight }}</span>
+          </div>
         </div>
       </div>
       <div class="block-conter-content">
         <el-scrollbar :height="height" always >
-        <div v-for="item in 30" :key="item" class="block-item">
+        <div v-for="item in transactionBlockData" :key="item" class="block-item">
           <div class="block-item-title">
             <span>区块链</span>
           </div>
           <div class="block-item-content">
-            <p>区块哈希：535bd60b1666b1b…</p>
-            <p>时间戳：535bd60b1666b1b…</p>
-            <p>前一区块哈希：000000000000…</p>
+            <p>区块哈希：{{ item.blockHash }}</p>
+            <p>时间戳：{{ item.timestamp }}</p>
+            <p>前一区块哈希：{{ item.previousBlock }}</p>
           </div>
           <div class="block-item-footer">
-            <span>交易数据：da014f8832082bc6…</span>
+            <span>交易数据：{{ item.transactionCode }}</span>
           </div>
         </div>
         </el-scrollbar>
-      </div>
+     </div>
     </div>
   </div>
 </template>
 <script setup>
+import {getTransactionBlock} from '@/api/user.js'
 import {toggleFullscreenContainer} from '@/utils/index.js'
-const height = ref(600)
+import { getSchoolId } from '../../../utils/auth';
+const height = ref(600) 
+// 节点数
+const nodeNumber = ref(0)
+// 链高度
+const chainHeight = ref(0)
 // 全屏函数
 const toggleFullscreen = () => {
   height.value =950
   toggleFullscreenContainer('.deal-block-conter')
-
 }
-// 监测退出全屏
-
-// 如何监听退出全屏
-
+// 获取交易区块
+// 存储交易区块数据
+const transactionBlockData = ref(null)
+const getTransactionBlockData =  () => {
+  getTransactionBlock({schoolId:getSchoolId(),index:1,size:100}).then(res => {
+    transactionBlockData.value=res.data.list
+    nodeNumber.value=res.data.size
+    chainHeight.value=res.data.pageNum
+  })
+}
+// 十秒发一次请求
+ const time =setInterval(() => {
+  getTransactionBlockData()
+}, 10000);
+onMounted(() => {
+  getTransactionBlockData()
+})
+// 离开页面销毁
+onUnmounted(() => {
+  clearInterval(time)
+})
 </script>
 <style lang="scss" scoped>
 .app-deal-block {
   padding: 20px;
+  .el-col-24{
   .el-button {
-    padding: 0 50px;
-    border: 2px solid #25f4f9;
+  padding: 0 50px;
+  border: 2px solid #25f4f9;
+  background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+  box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
+  border-radius: 8px;
+  &:hover {
     background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
-    box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
-    border-radius: 8px;
-    &:hover {
-      background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
-      border-color: #ffffff;
-      color: #fff;
-    }
+    border-color: #ffffff;
+    color: #fff;
   }
+}
+}
+
   .deal-block-conter {
     margin-top: 20px;
     background: #091c6d;
@@ -80,19 +109,21 @@ const toggleFullscreen = () => {
         background: url("../../../assets/images/node1.png") no-repeat;
         background-size: 100% 100%;
         text-align: center;
-        line-height: 58px;
         .header-item {
-          padding-left: 66px;
           height: 58px !important;
-          display: flex;
-          flex-direction: column;
+          padding: 9px 0 9px 130px;
+          text-align: left;
+          span{
+            font-size: 12px;
+          }
         }
       }
+      .conter-header:nth-child(2) {
+        background: url("../../../assets/images/node2.png") no-repeat;
+      }
     }
     .block-conter-content {
       width: 100%;
-      // display: grid;
-      // grid-template-columns: repeat(4, 1fr);
       .block-item {
         display: inline-block;
         width: 242px;
diff --git a/src/views/visual/components/transaction-broadcast.vue b/src/views/visual/components/transaction-broadcast.vue
index 3e6d55d..de6e1ea 100644
--- a/src/views/visual/components/transaction-broadcast.vue
+++ b/src/views/visual/components/transaction-broadcast.vue
@@ -8,27 +8,107 @@
     </el-row>
     <div class="el-tab" style="width: 60%">
       <el-table :data="IndividualAssetsData" style="width: 100%" stripe>
-        <el-table-column align="center"  prop="username" label="交易编码/信息摘要">
+        <el-table-column
+          align="center"
+          prop="transactionCode"
+          label="交易编码/信息摘要"
+          width="300"
+        >
         </el-table-column>
-        <el-table-column align="center" prop="bankName" label="广播节点 ">
+        <el-table-column
+          align="center"
+          prop="broadcastNode"
+          label="广播节点 "
+          width="300"
+        >
         </el-table-column>
-        <el-table-column align="center" prop="bankAccount" label="时间戳">
+        <el-table-column align="center" prop="timestamp" label="时间戳">
+          <template #default="scope">
+            <span>{{
+              parseTime(scope.row.timestamp, "{y}-{m}-{d} {h}:{i}:{s}")
+            }}</span>
+          </template>
         </el-table-column>
         <el-table-column align="center" prop="rmbBalance" label="操作">
+          <template #default="scope">
+            <el-button type="primary" link @click="checkDetails(scope.row)"
+              >哈希值详情</el-button
+            >
+          </template>
         </el-table-column>
       </el-table>
     </div>
-    <!-- <pagination
+    <pagination
        v-show="total1>0"
       :total="total1"
       v-model:page="params1.index"
       v-model:limit="params1.size"
-      @pagination="getDigital"
-           /> -->
+      @pagination="getIndividualAssets"
+           />
+    <el-dialog v-model="QuotaVisible" title="区块哈希" width="34%" draggable>
+      <div class="overview">
+        <div class="overview-title">
+          <span>区块总览</span>
+        </div>
+        <div class="overview-content" >
+          <p>区块类型：{{ detailsData.blockType }}</p>
+          <p>区块哈希：{{ truncate(detailsData.blockHash ,55) }}</p>
+          <p>打包人：{{  detailsData.packager}}</p>
+          <p>交易数量：{{ detailsData.transactionAmount }}</p>
+          <p>时间戳：{{  detailsData.timestamp}}</p>
+          <p>上一区块：{{ detailsData.previousBlock }}</p>
+        </div>
+      </div>
+      <div class="overview" style="margin:30px 0px;">
+        <div class="overview-title">
+          <span>交易总览</span>
+        </div>
+        <div class="overview-content">
+          <p>交易哈希：{{truncate(detailsData.blockHash ,55) }}</p>
+          <p>交易结果：{{ detailsData.transactionResult=="true" ? '成功' :'失败' }}</p>
+          <p>时间：{{   parseTime(detailsData.timestamp, "{y}-{m}-{d} {h}:{i}:{s}") }}</p>
+          <p>发送方：{{ detailsData.sender }}</p>
+          <p>接收方：{{ detailsData.receiver }}</p>
+      
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 <script setup>
-
+import { getSchoolId } from "../../../utils/auth";
+import { getTransactionBroadcast,getBroadcastDetails } from "@/api/user.js";
+import {truncate} from '@/utils/index.js'
+const QuotaVisible = ref(false);
+//获取交易广播params
+const params1 = reactive({
+  index: 1,
+  size: 100,
+  schoolId: getSchoolId(),
+});
+const total1=ref(0)
+const IndividualAssetsData = ref(null);
+// 存储详情
+const detailsData = ref({});
+const getIndividualAssets = () => {
+  getTransactionBroadcast(params1).then((res) => {
+    IndividualAssetsData.value = res.data.list;
+    total1.value=res.data.total
+  });
+};
+// 查看详情
+const checkDetails = (id) => {
+  QuotaVisible.value = true;
+  getBroadcastDetails({
+    schoolId: id.schoolId,
+    index: 1,
+    size: 100,
+  }).then(res => {
+  //取出数组中的对象
+  detailsData.value = res.data.list[0]
+  })
+};
+getIndividualAssets();
 </script>
 <style lang="scss" scoped>
 .app-deal-broadcast {
@@ -54,4 +134,67 @@
     }
   }
 }
+:deep(.el-dialog) {
+  margin-top: 10% !important;
+  background: url("../../../assets/images/dialogimg.png") no-repeat !important ;
+  background-size: 100% 100% !important;
+
+  .el-dialog__header {
+    padding: 0px;
+    display: flex;
+    justify-content: center;
+
+    .el-dialog__headerbtn {
+      .el-dialog__close {
+        // background-color: pink !important;
+        // 插入照片上去
+        background: url("../../../assets/images/x.png") no-repeat !important ;
+        background-size: 100% 100% !important;
+        width: 28px;
+        height: 28px;
+        margin-right: 15px;
+        cursor: pointer;
+      }
+    }
+    .el-dialog__title {
+      margin-top: -20px;
+      text-align: center;
+      width: 216px;
+      height: 59px;
+      line-height: 59px;
+      background: url("../../../assets/images/中央银行-切图/验证+解密弹窗-切图/弹窗标题.png")
+        no-repeat !important ;
+      background-size: 100% 100% !important;
+      color: #ffffff;
+    }
+  }
+  .el-dialog__body {
+    padding: 30px 60px;
+    .overview {
+      width: 100%;
+    
+      background: #305897;
+      .overview-title {
+        height: 40px;
+        background: #13b7da;
+        padding: 0px 20px;
+        line-height: 40px;
+        span {
+          font-size: 15px;
+          font-family: Source Han Sans CN;
+          font-weight: 500;
+          color: #ffffff;
+        }
+      }
+      .overview-content{
+        padding: 0px 20px;
+        overflow: hidden;
+        p{
+          color: #ffffff;
+          // font-size: 15px;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/visual/components/transaction.vue b/src/views/visual/components/transaction.vue
index b0b7f1f..9000715 100644
--- a/src/views/visual/components/transaction.vue
+++ b/src/views/visual/components/transaction.vue
@@ -1,488 +1,671 @@
 <template>
-<div class="app-study">
-  <!-- <el-button style="background:url('../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png'); width: 143px;">全屏</el-button> -->
-  <img src="../../../assets/images/央行可视化监控中心-切图/央行可视化监控中心/全屏.png" @click="fullScreen">
-   <div class="visualization">
-   
-     <div class="visMain">
-  
+  <div class="app-study">
+    <el-row>
+      <el-col :span="24">
+        <el-button type="primary" @click="fullScreen">全屏</el-button>
+      </el-col>
+    </el-row>
+    <div class="visualization">
+      <div class="visMain">
         <div class="top">
-          <span class="linear-gradient-text">xxx学校人民币数字货币交易总览</span>
-          <img src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/top.png">
+          <span class="linear-gradient-text">{{transactionOverview.schoolName}}人民币数字货币交易总览</span>
         </div>
-        <div class="leftMain">
-          <img style="width: 100%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题1.pn.png">
-          <span class="leftText">交易总览</span>
-          <div class="leftSmallWindow">
-            <img style="width: 97%;" src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-1.png">
-            <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-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 class="main">
+          <div class="leftMain">
+            <div class="Trading">
+              <p class="leftText">
+                <span>交易总览</span>
+              </p>
+              <div class="leftConter">
+                <p>
+                  <span class="conter">交易总次数</span>
+                  <span class="textright">
+                    <CountTo 
+                    ref="countToref"
+                     :startVal="0"
+                     :endVal="transactionOverview.totalTransactionAmount"
+                     :duration="4000"
+                     ></CountTo>
+                   
+                   </span>次
+                </p>
+                <p>
+                  <span class="conter">交易总金额</span>
+                  <span class="textright">
+                    <CountTo 
+                    ref="countToref"
+                     :startVal="0"
+                     :endVal="transactionOverview.totalTransactionAmount"
+                     :duration="4000"
+                     ></CountTo>e-CNY</span>
+                </p>
+                <p>
+                  <span class="conter">发放红包总数量</span>
+                  <span class="textright">
+                    <CountTo 
+                    ref="countToref"
+                     :startVal="0"
+                     :endVal="transactionOverview.totalNumberOfRedPacket"
+                     :duration="4000"
+                     ></CountTo>
+                   </span>次
+                </p>
+                <p>
+                  <span class="conter">发放红包总金额</span>
+                  <span class="textright">
+                    <CountTo 
+                    ref="countToref"
+                     :startVal="0"
+                     :endVal="transactionOverview.totalRedPacketAmount"
+                     :duration="4000"
+                     ></CountTo>e-CNY</span>
+                </p>
+              </div>
+            </div>
+            <div class="condition">
+              <p class="leftText">
+                <span>商业银行交易情况</span>
+              </p>
+              <div class="conditionConter">
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span class="textright">
+                      <CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.bankCount"
+                     :duration="3000"
+                     ></CountTo>
+                    <span style="color: #ffffff">家</span></span>
+                    <span>商业银行数量</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span>
+                      <CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.bankUserCount"
+                     :duration="3000"
+                     ></CountTo><span style="color: #ffffff">个</span></span>
+                    <span>用户数量</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span> <CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.bankCurrencyAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                    <span>兑换数字人民币金额</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span> <CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.bankRedPacketAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                    <span>发放红包金额</span>
+                  </div>
+                </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 class="earth">
+            <div class="conten">
+              <img
+                src="../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/边圈（做旋转）.png"
+              />
+            </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 class="rightMain">
+            <div class="condition">
+              <p class="leftText">
+                <span>企业交易情况</span>
+              </p>
+              <div class="conditionConter">
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span ><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.businessUserCount"
+                     :duration="3000"
+                     ></CountTo><span style="color: #ffffff">个</span></span>
+                    <span>企业用户数量</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.businessProductCount"
+                     :duration="3000"
+                     ></CountTo> <span style="color: #ffffff">个</span></span>
+                    <span>上架商品数量</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.businessCurrencyAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                    <span>兑换数字人民币金额</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.businessRedPacketAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                    <span>发放红包金额</span>
+                  </div>
+                </span>
+              </div>
+            </div>
+            <div class="usercondition">
+              <p class="leftText">
+                <span>个人交易情况</span>
+              </p>
+              <div class="userconditionConter">
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span>个人用户数量</span>
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.personUserCount"
+                     :duration="3000"
+                     ></CountTo>
+                    个</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span>兑换数字人民币金额</span>
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.personCurrencyAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span>消费总金额</span>
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.personConsumptionAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                  </div>
+                </span>
+                <span class="conditioncontent">
+                  <div class="font">
+                    <span>领取红包金额</span>
+                    <span><CountTo 
+                     :startVal="0"
+                     :endVal="transactionOverview.personRedPacketAmount"
+                     :duration="3000"
+                     ></CountTo>e-CNY</span>
+                  </div>
+                </span>
+              </div>
+            </div>
           </div>
-          
         </div>
-     </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'
-  }
-  // 处理退出全屏的函数
+import { getSchoolId } from '../../../utils/auth';
+import { CountTo } from 'vue3-count-to';
+import { toggleFullscreenContainer } from "@/utils/index.js";
+import {getTransactionOverview} from '@/api/user'
+// 存储交易总览
+const transactionOverview = ref({});
+const fullScreen = () => {
+  toggleFullscreenContainer(".visMain");
+  // window.resizeTo(1920, 1080);
+  document.addEventListener("fullscreenchange", exitFullscreenHandler);
+  document.addEventListener("webkitfullscreenchange", exitFullscreenHandler);
+  document.addEventListener("mozfullscreenchange", exitFullscreenHandler);
+  document.addEventListener("MSFullscreenChange", exitFullscreenHandler);
+  const element = document.querySelector(".earth");
+  const conten = document.querySelector(".conten");
+  conten.style.margin = "0";
+  element.style.height = "100vh";
+};
+// 处理退出全屏的函数
 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'
-    // 在这里可以添加你想要执行的操作
+  if (
+    !document.fullscreenElement &&
+    !document.mozFullScreenElement &&
+    !document.webkitFullscreenElement &&
+    !document.msFullscreenElement
+  ) {
+    const conten = document.querySelector(".conten");
+    console.log("已退出全屏", conten);
+    conten.style.margin = "auto";
+    conten.style.marginTop = "111px";
+    const p = document.querySelectorAll(".leftConter p");
+    for (let i = 0; i < p.length; i++) {
+      p[i].style.height = "40px";
+    }
+    const Trading = document.querySelector(".Trading");
+    const condition = document.querySelector(".condition");
+    const leftText = document.querySelectorAll(".leftText");
+    const conditioncontent = document.querySelectorAll(".conditioncontent");
+    const font = document.querySelectorAll(".conditioncontent .font");
+    Trading.style.marginBottom = "0px";
+    condition.style.marginBottom = "0px";
+    for (let i = 0; i < leftText.length; i++) {
+      leftText[i].style.marginBottom = "10px";
+    }
+    for (let i = 0; i < conditioncontent.length; i++) {
+      conditioncontent[i].style.height = "115px";
+      font[i].style.marginTop = "15px";
+    }
+  } else {
+    const p = document.querySelectorAll(".leftConter p");
+    for (let i = 0; i < p.length; i++) {
+      p[i].style.height = "49px";
+    }
+    const Trading = document.querySelector(".Trading");
+    const condition = document.querySelector(".condition");
+    const leftText = document.querySelectorAll(".leftText");
+    const conditioncontent = document.querySelectorAll(".conditioncontent");
+    const font = document.querySelectorAll(".conditioncontent .font");
+    Trading.style.marginBottom = "60px";
+    condition.style.marginBottom = "30px";
+    for (let i = 0; i < leftText.length; i++) {
+      leftText[i].style.marginBottom = "60px";
+    }
+    for (let i = 0; i < conditioncontent.length; i++) {
+      conditioncontent[i].style.height = "149px";
+      font[i].style.marginTop = "30px";
+    }
+    conten.style.margin = "0";
+    conten.style.marginTop = "0";
   }
 }
-</script>
+// 获取交易总览数据
+const getTransactionOverviewData = () => {
+  getTransactionOverview({schoolId:getSchoolId()}).then(res=>{
+    transactionOverview.value=res.data
+    console.log(transactionOverview.value,'人民币数字货币交易总览');
+  })
+}
+// 十秒发一次请求
+const time=setInterval(() => {
+  getTransactionOverviewData()
+}, 10000);
+// 页面销毁时清除定时器
+// 页面加载完毕
+const countToref = ref(null);
+onMounted(() => {
+  getTransactionOverviewData()
+});
+onBeforeUnmount(() => {
+  clearInterval(time);
+});
 
+</script>
 <style lang="scss" scope>
-@import '../../../assets/fonts/font.css';
-.visualization{
+@import "../../../assets/fonts/font.css";
+.app-study {
+  padding: 20px;
+}
+.el-col-24{
+  .el-button {
+  padding: 0 50px;
+  border: 2px solid #25f4f9;
+  background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+  box-shadow: 0px 5px 6px 0px rgba(0, 48, 255, 0.77);
+  border-radius: 8px;
+  &:hover {
+    background: linear-gradient(0deg, #0654b5 0%, #003155 50%, #2cd1e4 100%);
+    border-color: #ffffff;
+    color: #fff;
+  }
+}
+}
+.visualization {
   height: 760px;
   display: flex;
   position: relative;
-  .visMain{
+  margin-top: 10px;
+  .visMain {
     position: relative;
-  height: 750px; /* 设置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: 21px;
-    margin-top: 20px;
-    // border: 1px solid red;
-    .leftText{
-      position: absolute;
-    top: 21%;
-    left: 18%;
-    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;
-    }
-    .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;
+    height: 100%; /* 设置div的高度 */
+    // width: 1554px; /* 设置div的宽度 */
+    width: calc(100% - 5%);
+    margin: auto;
+    background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/背景.png");
+    background-size: 100% 100%;
+    // transform: scale(0.8);
+    .main {
+      display: flex;
+      .leftMain {
+        // 靠左
+        width: calc(100% - 70%);
+        padding-left: 20px;
+        .Trading,
+        .condition {
+          // padding: 0px 10[x];
+          //  transform: scale(0.9);
+          .leftText {
+            display: block;
+            width: 100%;
+            height: 50px;
+            background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题1.pn.png")
+              no-repeat;
+            background-size: 100% 100%;
+            // margin-bottom: 57px;
+            span {
+              margin-left: 50px;
+              font-size: 24px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #ffffff;
+            }
+          }
+          .leftConter {
+            padding: 7px 10px;
+            background: linear-gradient(
+              0deg,
+              #01317c 0%,
+              rgba(3, 6, 49, 0) 100%
+            );
+            p {
+              display: flex;
+              align-items: center;
+              height: 40px;
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-1.png")
+                no-repeat;
+              background-size: 100% 100%;
+              .conter {
+                display: block;
+                width: 140px;
+                margin-left: 116px;
+                font-size: 20px;
+                font-family: Source Han Sans CN;
+                font-weight: 400;
+                color: #ffffff;
+                margin-right: 40px;
+              }
+              .textright {
+                font-size: 26px;
+                font-family: "FZCYJ";
+                font-weight: 400;
+                color: #fff000;
+              }
+            }
+            p:nth-child(2) {
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-2.png")
+                no-repeat;
+              background-size: 100% 100%;
+            }
+            p:nth-child(3) {
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-3.png")
+                no-repeat;
+              background-size: 100% 100%;
+            }
+            p:nth-child(4) {
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/1-4.png")
+                no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+          .conditionConter {
+            display: flex;
+            flex-wrap: wrap;
+
+            // padding: 0px 10px;
+
+            .conditioncontent {
+              display: inline-block;
+              width:47%;
+              height: 115px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              // line-height: 129px;
+              // flex: 1; /* 这里的数字可以根据你的需要进行调整 */
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框1.png")
+                no-repeat;
+              background-size: 100% 100%;
+              margin-right: 10px;
+              margin-bottom: 15px;
+              .font {
+                width: 136px;
+                display: flex;
+                // flex-wrap: wrap;
+                flex-direction: column;
+                margin-left: 80px;
+                span:nth-child(1) {
+                  font-size: 22px;
+                  font-family: "FZCYJ";
+                  font-weight: 400;
+                  color: #fff000;
+                }
+                span:nth-child(2) {
+                  margin-top: 10px;
+                  font-size: 14px;
+                  font-family: Source Han Sans CN;
+                  font-weight: bold;
+                  color: #ffffff;
+                }
+              }
+            }
+            .conditioncontent:nth-child(2){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(3){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框3.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(4){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/8边框4.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
         }
       }
-      .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;
-        }
+      .earth {
+        flex: 1;
       }
-      .fontFont5{
-        position: absolute;
-        top: 172px;
-        left: 312px;
-        a{
-          text-decoration: none;
-          cursor: default;
-          font-family:'FZCYJ';
-          color: yellow;
-          font-size: 25px;
+      .rightMain {
+        // 靠右
+        width: calc(100% - 70%);
+        padding-right: 20px;
+        .condition ,.usercondition{
+          // padding: 0px 10[x];
+          //  transform: scale(0.9);
+          .leftText {
+            display: block;
+            width: 100%;
+            height: 50px;
+            background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小标题1.pn.png")
+              no-repeat;
+            background-size: 100% 100%;
+            // margin-bottom: 57px;
+            span {
+              margin-left: 50px;
+              font-size: 24px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #ffffff;
+            }
+          }
+          .conditionConter {
+            display: flex;
+            flex-wrap: wrap;
+            // padding: 0px 10px;
+            .conditioncontent {
+              display: inline-block;
+              width:47%;
+              height: 112px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              // line-height: 129px;
+              // flex: 1; /* 这里的数字可以根据你的需要进行调整 */
+              background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/企业用户数量.png")
+                no-repeat;
+              background-size: 100% 100%;
+              margin-right: 10px;
+              margin-bottom: 15px;
+              .font {
+                width: 136px;
+                display: flex;
+                // flex-wrap: wrap;
+                flex-direction: column;
+                margin-left: 80px;
+                span:nth-child(1) {
+                  font-size: 22px;
+                  font-family: "FZCYJ";
+                  font-weight: 400;
+                  color: #fff000;
+                }
+                span:nth-child(2) {
+                  margin-top: 10px;
+                  font-size: 14px;
+                  font-family: Source Han Sans CN;
+                  font-weight: bold;
+                  color: #ffffff;
+                }
+              }
+            }
+            .conditioncontent:nth-child(2){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/上架商品数量.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(3){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/兑换数字人民币金额.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(4){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/发放红包金额.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
         }
-        span{
-          font-size: 21px;
-        }
-      }
-    }
-    .leftSmallWindow{
-      position: absolute;
-      background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/小框背景.png');
-      width: 100%;
-      height: 253px;
-      margin-top: 32px;
-      img{
-        margin-left: 7px;
-        height: 40px;
-    margin-top: 12px;
+        .usercondition{
+          .userconditionConter{
+            .conditioncontent{
+              display: inline-block;
+              width:47%;
+              height: 111px;
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-1.png') no-repeat;
+              background-size: 100% 100%;
+              margin-right: 10px;
+              margin-bottom: 20px;
 
+              .font{
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              width:100%;
+              height: 111px;
+              margin-top: 15px;
+              span:nth-child(1){
+                font-size: 14px;
+                 font-family: Source Han Sans CN;
+                 font-weight: bold;
+                 color: #FFFFFF;
+              }
+              span:nth-child(2){
+                  span{
+                    font-size: 22px;
+                  font-family: "FZCYJ" ;
+                  font-weight: 400;
+                  color: #fff000 !important;
+                  }
+                }
+              }
+            }
+            .conditioncontent:nth-child(2){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-2.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(3){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-3.png') no-repeat;
+              background-size: 100% 100%;
+            }
+            .conditioncontent:nth-child(4){
+              background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/4-4.png') no-repeat;
+              background-size: 100% 100%;
+            }
+          }
+        }
       }
-      .font2{
-        font-family: 'FZCYJ';
-        font-size: 25px;
-        color: yellow;
-      }
-      .font1{
-        font-size: 16px;
-        position: absolute;
-        top: 18px;
-        left: 103px;
-      }
-      .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;
     }
   }
-  .top{
-    img{
+  .top {
+    background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/top.png")
+      no-repeat;
+    background-size: 100% 100%;
+    height: 70px;
+    img {
       width: 100%;
     }
   }
-    .earth{
-      position: relative;
+  .earth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    // height: calc();
+    .conten {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 502px;
       height: 504px;
       margin: auto;
       margin-top: 111px;
-      background: url('../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/地球.png') no-repeat;
-      background-size: 95% 95%; 
+      background: url("../../../assets/images/央行可视化监控中心-切图/XXX学校人民币数字货币交易总览/地球.png")
+        no-repeat;
+      background-size: 95% 95%;
       background-position: center;
       animation: rotate 45s linear infinite;
-      img{
+      img {
         animation: rotate2 40s linear infinite;
         width: 100%;
+        transform: scale();
       }
     }
   }
 }
 @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }}
-    @keyframes rotate2 {
-    100% {
-      transform: rotate(-360deg);
-    }}
-    .linear-gradient-text{
-      display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 24px;
-    color: #ffffff;
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes rotate2 {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+.linear-gradient-text {
+  line-height: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 33px;
+  color: #ffffff;
   text-shadow: 0px 0px 7px rgba(52, 255, 204, 0.1);
-  background: linear-gradient(180deg, #FF2052F6 16%, #FF5DDCF9 100%);
+  background: linear-gradient(to bottom, #3127ff, #00e8ff);
+  font-weight: 600;
+  // background: linear-gradient(180deg, #FF2052F6 16%, #FF5DDCF9 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-    }
-</style>
\ No newline at end of file
+}
+</style>
diff --git a/src/views/visual/index.vue b/src/views/visual/index.vue
index 3d0d7bc..288bf88 100644
--- a/src/views/visual/index.vue
+++ b/src/views/visual/index.vue
@@ -23,10 +23,10 @@ const  go = (idx) => {
       <div @click.native="go(5)">Merkle</div>
     </div>
     <div class="central-ban-information">
-     <transaction v-show="isDeployed == 1"></transaction>
-     <transaction-node v-show="isDeployed == 2"></transaction-node>
-     <transactionBlock v-show="isDeployed == 3"></transactionBlock>
-     <transactionBroadcast v-show="isDeployed == 4"></transactionBroadcast>
+     <transaction v-if="isDeployed == 1"></transaction>
+     <transaction-node v-if="isDeployed == 2"></transaction-node>
+     <transactionBlock v-if="isDeployed == 3"></transactionBlock>
+     <transactionBroadcast v-if="isDeployed == 4"></transactionBroadcast>
      <merkle v-if="isDeployed == 5"></merkle>
     </div>
   </div>