Merge pull request '邓洁 : 首页上下方样式' (#49) from dj into master

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/49

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);
+  }
+}