diff --git a/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html b/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
index 60f051e..3071979 100644
--- a/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
+++ b/ruoyi-admin/src/main/resources/templates/system/trainnum/trainnum.html
@@ -3,49 +3,184 @@
 <head>
     <th:block th:include="include :: header('涉密人员培训列表')" />
 </head>
+<style>
+    .count_box{
+        width: 95%;
+        height: 95%;
+        margin: 0 auto;
+    }
+    .count_top{
+        width: 100%;
+        height: 30%;
+    }
+    .count_top ul{
+        width: 100%;
+        height: 100%;
+        list-style: none;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0;
+    }
+    .count_top ul li{
+        width: 289px;
+        height: 168px;
+        background-color: white;
+        border-radius: 10px;
+        box-shadow: -4px 4px 4px #d5d5d5;
+        position: relative;
+        overflow: hidden;
+    }
+    .yuan{
+        width: 300px;
+        height: 300px;
+        display: inline-block;
+        position: absolute;
+        bottom: -163px;
+        right: -146px;
+        border-radius: 50%;
+    }
+    .count_top ul li:nth-child(1) .yuan{
+        background-color: #e2f0ff;
+    }
+    .count_top ul li:nth-child(2) .yuan{
+        background-color: #ffe7e9;
+    }
+    .count_top ul li:nth-child(3) .yuan{
+        background-color: #e3f7ef;
+    }
+    .count_top ul li:nth-child(4) .yuan{
+        background-color: #f3f7e3;
+    }
+    .count_top ul li i{
+        font-size: 33px;
+        position: absolute;
+        top: 72%;
+        left: 82%;
+        transform: translate(-50%,-50%);
+    }
+    .count_top ul li .textList{
+        position: absolute;
+        width: 80%;
+        height: 117px;
+        top: 18%;
+        left: 13px;
+    }
+    .textList p{
+        color: rgba(85, 90, 105, 0.79);
+    }
+    .textList p:nth-of-type(1) {
+        font-size: 33px;
+    }
+
+    .textList p:nth-of-type(2) {
+        font-size: 24px;
+    }
+    .count_bottom{
+        width: 100%;
+        height: 70%;
+        background-color: white;
+        border-radius: 10px;
+    }
+</style>
 <body class="gray-bg">
-<div class="container-div">
+<div class="container-div" id="app">
     <div class="row">
-        <div class="col-sm-12 search-collapse">
-            <form id="formId">
-                <div class="select-list">
-                    <ul>
-                        <li>
-                            <label>人员名称：</label>
-                            <input type="text" name="trainName"/>
-                        </li>
-                        <li>
-                            <label>所属地市：</label>
-                            <input type="text" name="AREAID"/>
-                        </li>
-                        <li>
-                            <label>培训日期：</label>
-                            <input type="text" class="time-input" placeholder="请选择培训日期" name="trainDate"/>
-                        </li>
+        <div class="count_box">
+            <div class="count_top">
+                <ul>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.total}}
+                            </p>
+                            <p>
+                                培训次数
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-clipboard" style="color: #0078ff"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.shtg}}
+                            </p>
+                            <p>
+                                审核通过
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-newspaper-o" style="color: #ff313c"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.shwtg}}
+                            </p>
+                            <p>
+                                审核未通过
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-pie-chart" style="color: #12b975"></i>
+                    </li>
+                    <li>
+                        <div class="textList">
+                            <p>
+                                {{countList.dsh}}
+                            </p>
+                            <p>
+                                待审核
+                            </p>
+                        </div>
+                        <span class="yuan"></span>
+                        <i class="fa fa-hourglass-2" style="color: #12b975"></i>
+                    </li>
+                </ul>
+            </div>
+            <div class="count_bottom">
+                <div class="col-sm-12 search-collapse">
+                    <form id="formId">
+                        <div class="select-list">
+                            <ul>
+                                <li>
+                                    <label>人员名称：</label>
+                                    <input type="text" name="trainName"/>
+                                </li>
+                                <li>
+                                    <label>所属地市：</label>
+                                    <input type="text" name="AREAID"/>
+                                </li>
+                                <li>
+                                    <label>培训日期：</label>
+                                    <input type="text" class="time-input" placeholder="请选择培训日期" name="trainDate"/>
+                                </li>
 
-                        <li>
-                            <label>培训状态：</label>
-                            <select name="trainState" th:with="type=${@dict.getType('sys_examine_state')}">
-                                <option value="">所有</option>
-                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
-                            </select>
-                        </li>
-                        <li>
-                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
-                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
-                        </li>
-                    </ul>
+                                <li>
+                                    <label>培训状态：</label>
+                                    <select name="trainState" th:with="type=${@dict.getType('sys_examine_state')}">
+                                        <option value="">所有</option>
+                                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
+                                    </select>
+                                </li>
+                                <li>
+                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
+                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
+                                </li>
+                            </ul>
+                        </div>
+                    </form>
                 </div>
-            </form>
-        </div>
-
-        <div class="btn-group-sm" id="toolbar" role="group">
-            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:trainnum:export">
-                <i class="fa fa-download"></i> 导出
-            </a>
-        </div>
-        <div class="col-sm-12 select-table table-striped">
-            <table id="bootstrap-table"></table>
+                <div class="btn-group-sm" id="toolbar" role="group">
+                    <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:trainnum:export">
+                        <i class="fa fa-download"></i> 导出
+                    </a>
+                </div>
+                <div class="col-sm-12 select-table table-striped" style="min-height: 76%;">
+                    <table id="bootstrap-table"></table>
+                </div>
+            </div>
         </div>
     </div>
 </div>
@@ -157,6 +292,28 @@
         var url = prefix + '/examine/' + id;
         $.modal.open("涉密人员培训审核", url);
     }
+    var app = new Vue({
+        el: '#app',
+        data: {
+            countList:[],
+            tableData: [],
+        },
+        created(){
+            this.init()
+        },
+        methods:{
+            init(){
+                axios.post(prefix + '/countList').then(response => {
+                    console.log(response)
+                    this.countList = response.data.data
+                })
+            },
+            handleEdit(index,row){
+                var url = prefix + '/examnum/' + row.examId
+                $.modal.openTab("考试明细", url);
+            }
+        }
+    })
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>
