diff --git a/public/index.html b/public/index.html
index dae6298..5f0bb77 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script type="text/javascript" src="../stactic/webrtcstreamer.js"></script>
-    <script type="text/javascript" src="../stactic/adapter.min.js"></script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>国网南京雨花供电营业厅</title>
   </head>
diff --git a/src/App.vue b/src/App.vue
index cb7733c..f1905bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,23 @@
 <template>
   <div id="app">
-    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
-    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
-     <router-view /> 
+    <div class="top">
+      <div class="topLeft">
+        <div style="color:rgb(56,171,192)">
+          2023-02-09
+        </div>
+        |
+        <div>
+         2:37:05
+        </div>
+      </div>
+      <div class="topCenter">
+        国网南京雨花供电营业厅
+      </div>
+      <div class="topRight"></div>
+    </div>
+    <div class="main">
+      <router-view /> 
+    </div>
   </div>
 </template>
 
@@ -16,16 +31,51 @@ export default {
 </script>
 
 <style>
+@import "./assets/index.css";
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
-  /* margin-top: 60px; */
+  /* background: url("./assets/images/bj1.png") no-repeat; */
+  /* background-size: 100% 100%; */
+  background: #040f26;
 }
  body{
-              margin: 0;
-              padding: 0;
-          }
+      margin: 0;
+      padding: 0;
+  }
+</style>
+<style lang="less" scoped>
+.top{
+  width: 100%;
+  height: 9.6%;
+  display: flex;
+  justify-content: space-between;
+  .topLeft{
+    width: 11%;
+    height: 55%;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    justify-content: space-evenly;
+    font-size: 20px;
+  }
+  .topCenter{
+    width: 76%;
+    height: 100%;
+    background: url("./assets/images/topBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .topRight{
+    width: 11%;
+    height: 100%;
+    border: 1px solid blue;
+  }
+}
+.main{
+  height: calc(100% - 9.6%);
+  width: 100%;
+}
 </style>
diff --git a/src/assets/images/topBg.png b/src/assets/images/topBg.png
new file mode 100644
index 0000000..fb6a5d3
Binary files /dev/null and b/src/assets/images/topBg.png differ
diff --git a/src/assets/index.css b/src/assets/index.css
new file mode 100644
index 0000000..cee9e3d
--- /dev/null
+++ b/src/assets/index.css
@@ -0,0 +1,159 @@
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+* {
+  font-family: "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  user-select: none;
+}
+
+html,
+body,
+ul,
+li,
+ol,
+dl,
+dd,
+dt,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+form,
+fieldset,
+legend,
+img {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset,
+img,
+input,
+button,
+textarea {
+  border: none;
+  padding: 0;
+  margin: 0;
+  outline-style: none;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+input {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+select,
+input {
+  vertical-align: middle;
+}
+
+select,
+input,
+textarea {
+  font-size: 12px;
+  margin: 0;
+}
+
+textarea {
+  resize: none;
+}
+
+/*防止拖动*/
+
+img {
+  border: 0;
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+/*  去掉图片低测默认的3像素空白缝隙*/
+table {
+  border-collapse: collapse;
+}
+
+.clearfix:before,
+.clearfix:after {
+  content: "";
+  display: table;
+}
+
+.clearfix:after {
+  clear: both;
+}
+
+.clearfix {
+  *zoom: 1;
+  /*IE/7/6*/
+}
+
+a {
+  color: #666;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-decoration: none;
+  font-weight: normal;
+  font-size: 100%;
+}
+
+s,
+i,
+em {
+  font-style: normal;
+  text-decoration: none;
+}
+
+/* IE 浏览器 */
+.scrollbar-body {
+  /*三角箭头的颜色*/
+  scrollbar-arrow-color: #0581ab;
+  /*滚动条滑块按钮的颜色*/
+  scrollbar-face-color: #0581ab;
+  /*滚动条整体颜色*/
+  scrollbar-highlight-color: #0a393f;
+  /*滚动条阴影*/
+  scrollbar-shadow-color: #0099dd;
+  /*滚动条轨道颜色*/
+  scrollbar-track-color: #0a393f;
+  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
+  scrollbar-3dlight-color: #0099dd;
+  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
+  scrollbar-darkshadow-color: #0099dd;
+  /*滚动条基准颜色*/
+  scrollbar-base-color: #0581ab;
+}
+
+.scrollbar-body {
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.scrollbar-body::-webkit-scrollbar {
+  width: 0.36vw;
+  background-color: rgba(51, 238, 255, 0.2);
+}
+
+.scrollbar-body::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 192, 255, 0.51);
+  border-radius: 0.18vw;
+}
diff --git a/src/main.js b/src/main.js
index a382405..142eda8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,7 +9,15 @@ import Plugin from 'v-fit-columns';
 Vue.use(Plugin);
 import * as echarts from 'echarts'
 Vue.prototype.$echarts = echarts
-import * as Three from 'three'
+
+import moment from 'moment'
+//定义一个全局过滤器实现日期格式化
+Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
+  // 使用momentjs这个日期格式化类库实现日期的格式化功能
+  return moment(input).format(fmtstring);
+});
+Vue.prototype.$moment = moment
+
 Vue.config.productionTip = false
 new Vue({
   router,