diff --git a/src/assets/image/sp_dbbj.png b/src/assets/image/sp_dbbj.png
new file mode 100644
index 0000000..8aadffc
Binary files /dev/null and b/src/assets/image/sp_dbbj.png differ
diff --git a/src/assets/image/sp_icon_mngl.png b/src/assets/image/sp_icon_mngl.png
new file mode 100644
index 0000000..9fd3f62
Binary files /dev/null and b/src/assets/image/sp_icon_mngl.png differ
diff --git a/src/assets/image/sp_icon_sdgl.png b/src/assets/image/sp_icon_sdgl.png
new file mode 100644
index 0000000..45f1d28
Binary files /dev/null and b/src/assets/image/sp_icon_sdgl.png differ
diff --git a/src/assets/image/sp_icon_sdqhd.png b/src/assets/image/sp_icon_sdqhd.png
new file mode 100644
index 0000000..7c4abdd
Binary files /dev/null and b/src/assets/image/sp_icon_sdqhd.png differ
diff --git a/src/assets/image/sp_icon_sdqhx.png b/src/assets/image/sp_icon_sdqhx.png
new file mode 100644
index 0000000..05b4e60
Binary files /dev/null and b/src/assets/image/sp_icon_sdqhx.png differ
diff --git a/src/assets/image/sp_icon_tcdl.png b/src/assets/image/sp_icon_tcdl.png
new file mode 100644
index 0000000..f4fba34
Binary files /dev/null and b/src/assets/image/sp_icon_tcdl.png differ
diff --git a/src/assets/image/sp_icon_xtgl.png b/src/assets/image/sp_icon_xtgl.png
new file mode 100644
index 0000000..5318fe8
Binary files /dev/null and b/src/assets/image/sp_icon_xtgl.png differ
diff --git a/src/assets/image/sp_icon_yhgl.png b/src/assets/image/sp_icon_yhgl.png
new file mode 100644
index 0000000..04910fe
Binary files /dev/null and b/src/assets/image/sp_icon_yhgl.png differ
diff --git a/src/assets/image/sp_icon_zdgl.png b/src/assets/image/sp_icon_zdgl.png
new file mode 100644
index 0000000..c200ff4
Binary files /dev/null and b/src/assets/image/sp_icon_zdgl.png differ
diff --git a/src/assets/image/sp_icon_zdqh.png b/src/assets/image/sp_icon_zdqh.png
new file mode 100644
index 0000000..a880422
Binary files /dev/null and b/src/assets/image/sp_icon_zdqh.png differ
diff --git a/src/assets/image/sp_icon_zst.png b/src/assets/image/sp_icon_zst.png
new file mode 100644
index 0000000..015e9b5
Binary files /dev/null and b/src/assets/image/sp_icon_zst.png differ
diff --git a/src/assets/image/sp_icon_zyc.png b/src/assets/image/sp_icon_zyc.png
new file mode 100644
index 0000000..42bc47f
Binary files /dev/null and b/src/assets/image/sp_icon_zyc.png differ
diff --git a/src/assets/image/sp_tb.png b/src/assets/image/sp_tb.png
new file mode 100644
index 0000000..eae68aa
Binary files /dev/null and b/src/assets/image/sp_tb.png differ
diff --git a/src/assets/image/sp_yyc.png b/src/assets/image/sp_yyc.png
new file mode 100644
index 0000000..26ccc80
Binary files /dev/null and b/src/assets/image/sp_yyc.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 7fd49d1..80e7151 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -3,6 +3,9 @@
   padding: 0;
   list-style: none;
   box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  background-position: center;
 }
 
 a {
@@ -13,3 +16,143 @@ a {
 html, body, #app, .el-container, .el-aside, .el-main {
   height: 100%;
 }
+
+.box-top {
+  .manage-btn {
+    display: flex;
+    z-index: 2;
+    position: absolute;
+    top: 85px;
+    left: 30px;
+
+    .btn-box {
+      margin-left: 37px;
+      display: flex;
+      align-items: center;
+
+      > * {
+        font-size: 28px;
+        color: #FFFFFF;
+        line-height: 37px;
+      }
+
+      > div:first-child {
+        margin-right: 11px;
+        width: 60px;
+        height: 60px;
+      }
+    }
+  }
+
+  .tunnel-title {
+    width: 2330px;
+    height: 156px;
+    z-index: 2;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin-left: -1165px;
+    background-image: url('../../assets/image/sp_tb.png');
+  }
+
+  .top-right {
+    z-index: 2;
+    position: absolute;
+    top: 50px;
+    right: 70px;
+    font-size: 28px;
+    color: #FFFFFF;
+
+    .current-site {
+      display: flex;
+      align-items: center;
+
+      > span:first-child {
+        color: #F7B500;
+        margin-right: 20px;
+      }
+
+      .toggle {
+        width: 50px;
+        height: 50px;
+        background-image: url('../../assets/image/sp_icon_zdqh.png');
+      }
+    }
+
+    .current-user {
+      margin-top: 26px;
+      display: flex;
+      align-items: center;
+
+      > span:first-child {
+        color: #F7B500;
+        margin-right: 20px;
+      }
+
+      .logout {
+        margin-left: 27px;
+        width: 50px;
+        height: 50px;
+        background-image: url('../../assets/image/sp_icon_tcdl.png');
+      }
+    }
+  }
+}
+
+.switch-btn {
+  display: flex;
+  justify-content: space-between;
+  width: 1850px;
+  height: 146px;
+  z-index: 2;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  margin-left: -925px;
+  background-image: url('../../assets/image/sp_dbbj.png');
+
+  .arrow {
+    margin: 50px 0 0 263px;
+    width: 46px;
+    height: 54px;
+    background-image: url('../../assets/image/sp_icon_zst.png');
+  }
+
+  .btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    margin-top: 14px;
+    font-size: 26px;
+    color: #9FC3CD;
+
+    > * {
+      display: flex;
+      justify-content: center;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      background-position: center;
+    }
+
+    > div:nth-child(2) {
+      color: #FFFFFF;
+      padding-top: 7px;
+      width: 201px;
+      height: 62px;
+      background-image: url('../../assets/image/sp_icon_sdqhd.png');
+    }
+
+    > div:first-child, > div:last-child {
+      padding-top: 5px;
+      width: 158px;
+      height: 50px;
+      background-image: url('../../assets/image/sp_icon_sdqhx.png');
+    }
+  }
+
+  .right {
+    margin: 50px 263px 0 0;
+    transform: rotate(180deg);
+  }
+}
\ No newline at end of file