diff --git a/src/assets/images/site/zdgl_bj.png b/src/assets/images/site/zdgl_bj.png
new file mode 100644
index 0000000..4dba7f0
Binary files /dev/null and b/src/assets/images/site/zdgl_bj.png differ
diff --git a/src/assets/images/site/zdgl_icon_bj.png b/src/assets/images/site/zdgl_icon_bj.png
new file mode 100644
index 0000000..1be9605
Binary files /dev/null and b/src/assets/images/site/zdgl_icon_bj.png differ
diff --git a/src/assets/images/site/zdgl_icon_fh.png b/src/assets/images/site/zdgl_icon_fh.png
new file mode 100644
index 0000000..60424a1
Binary files /dev/null and b/src/assets/images/site/zdgl_icon_fh.png differ
diff --git a/src/assets/images/site/zdgl_icon_tjz.png b/src/assets/images/site/zdgl_icon_tjz.png
new file mode 100644
index 0000000..db79d1c
Binary files /dev/null and b/src/assets/images/site/zdgl_icon_tjz.png differ
diff --git a/src/assets/images/site/zdgl_zd.png b/src/assets/images/site/zdgl_zd.png
new file mode 100644
index 0000000..57d384c
Binary files /dev/null and b/src/assets/images/site/zdgl_zd.png differ
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 4cdb863..433d87b 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -16,7 +16,16 @@ a {
 html, body, #app, .el-container, .el-aside, .el-main {
   height: 100%;
 }
-
+.tunnel-title {
+  width: 2330px;
+  height: 156px;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  margin-left: -1165px;
+  background-image: url('../images/topAndDown/sp_tb.png');
+}
 .box-top {
   .manage-btn {
     display: flex;
@@ -49,17 +58,6 @@ html, body, #app, .el-container, .el-aside, .el-main {
     }
   }
 
-  .tunnel-title {
-    width: 2330px;
-    height: 156px;
-    z-index: 2;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    margin-left: -1165px;
-    background-image: url('../images/topAndDown/sp_tb.png');
-  }
-
   .top-right {
     z-index: 2;
     position: absolute;
diff --git a/src/components/content/badGasInfo/childComps/GasInfoItem.vue b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
index 8145c3e..3023113 100644
--- a/src/components/content/badGasInfo/childComps/GasInfoItem.vue
+++ b/src/components/content/badGasInfo/childComps/GasInfoItem.vue
@@ -135,13 +135,14 @@ function setPoint() {
   .point::after {
     content: "";
     display: block;
-    height: 22px;
-    width: 4px;
-    background: white;
+    height: 20px;
+    width: 2px;
+    background: #7EDFEC;
     position: absolute;
-    bottom: 0px;
+    bottom: 2px;
     left: 50%;
     transform: translateX(-50%);
+    box-shadow: 0 0 10px #7EDFEC;
   }
   .info {
     width: 200px;
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index d5667fe..f3e858b 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -1,15 +1,338 @@
 <template>
   <div class="site-bgc">
+    <div class="box-top">
+      <div class="back-tunnel">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-title"></div>
+      <div class="all-del-btn">
+        <div class="all-btn">
+          全选
+        </div>
+        <div class="all-btn">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content">
+      <div class="site-box" v-for="item in siteList">
+        <div class="top">
+          <span>站点名称：{{ item.siteName }}</span>
+          <div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
+        </div>
+        <div class="box-center">
+          <div class="left-img"></div>
+          <div class="right-tunnel">
+            <div>隧道数量：{{ item.num }}条</div>
+            <div>
+              <div class="tunnel">
+                <div>{{ item.sortTunnel }}</div>
+                <div class="tunnel-icon"></div>
+                <div>施工长度{{ item.constructionLength }}米</div>
+                <div>实现长度{{ item.implementationLength }}公里</div>
+              </div>
+              <div class="tunnel-add">
+                <div class="add-icon"></div>
+              </div>
+            </div>
+            <div class="more">
+              更多
+              <div class="icon"></div>
+            </div>
+          </div>
+        </div>
+        <div class="edit-btn">
+          <div class="edit-icon"></div>
+          <div @click="isVisited=true">站点编辑</div>
+        </div>
+      </div>
+      <div class="site-box add-box">
+        <div class="add-icon"></div>
+        <div>添加站点</div>
+      </div>
+    </div>
+    <el-dialog v-model="isVisited" width="958px">
+      <div class="siteId">
+        <span>站点id：iu78686</span>
+        <span>站点管理员id：j98h0</span>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
+import {ref} from "vue";
+
+const siteList = ref([
+  {
+    siteName: '松江站',
+    num: 1,
+    sortTunnel: '一号隧道',
+    constructionLength: 500,
+    implementationLength: 10
+  }
+])
+const isClick = ref(false);
+const isVisited = ref(false);
+const handleClickSite = () => {
+  isClick.value = !isClick.value
+}
 </script>
 
 <style scoped lang="scss">
-.site-bgc{
-  width: 100%;
-  height:100%;
-  background-image: url('@/assets/images/site/zdgl_dbj.png');
+.siteId{
+  font-size: 30px;
+  color: #FFFFFF;
+  >span:first-child{
+    margin-right: 70px;
+  }
 }
-</style>
\ No newline at end of file
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 50px 60px;
+  box-sizing: border-box;
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+.site-bgc {
+  padding-top: 85px;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/site/zdgl_dbj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 168px;
+      height: 60px;
+      line-height: 60px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 28px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 33px;
+        width: 26px;
+        height: 26px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .all-btn {
+        padding-left: 56px;
+        width: 168px;
+        height: 60px;
+        line-height: 60px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 28px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .box-content {
+    display: flex;
+    margin-top: 142px;
+    padding-left: 67px;
+
+    .add-box {
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 32px;
+      display: flex;
+      flex-direction: column;
+      //justify-content: center;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 160px;
+        margin-bottom: 107px;
+        width: 320px;
+        height: 320px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      margin-right: 119px;
+      padding: 31px 43px;
+      width: 1158px;
+      height: 718px;
+      background-image: url('@/assets/images/site/zdgl_bj.png');
+      box-sizing: border-box;
+      position: relative;
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 32px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 42px;
+
+        > div:last-child {
+          cursor: pointer;
+          width: 30px;
+          height: 30px;
+          border: 2px solid #05FEFF;
+          border-radius: 25px;
+          position: relative;
+
+          .clickColor {
+            position: absolute;
+            top: 5.5px;
+            left: 5.5px;
+            width: 16px;
+            height: 16px;
+            background-color: #05FEFF;
+            border-radius: 25px;
+          }
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        .left-img {
+          margin-top: 50px;
+          margin-right: 60px;
+          width: 480px;
+          height: 350px;
+          background-image: url('@/assets/images/site/zdgl_zd.png');
+        }
+
+        .right-tunnel {
+          position: relative;
+
+          > div:first-child {
+            font-size: 32px;
+            font-family: MicrosoftYaHei;
+            color: #FFFFFF;
+            line-height: 42px;
+          }
+
+          > div:nth-child(2) {
+            display: flex;
+            margin-top: 29px;
+
+            .tunnel {
+              width: 256px;
+              height: 310px;
+              background: #3FBED1;
+              border-radius: 16px;
+              display: flex;
+              flex-direction: column;
+              //justify-content: center;
+              align-items: center;
+              color: #FFFFFF;
+
+              > div:first-child {
+                width: 112px;
+                height: 37px;
+                font-size: 28px;
+                line-height: 37px;
+                margin-top: 20px;
+              }
+
+              > div:nth-child(3) {
+                margin-bottom: 18px;
+              }
+
+              > div:nth-child(3), > div:nth-child(4) {
+                font-size: 26px;
+              }
+
+              .tunnel-icon {
+                width: 62px;
+                height: 64px;
+                background: #FFFFFF;
+                margin: 30px 0 40px 0;
+              }
+            }
+
+            .tunnel-add {
+              margin-left: 20px;
+              width: 256px;
+              height: 310px;
+              background: #1891A3;
+              border-radius: 16px;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+
+              .add-icon {
+                width: 112px;
+                height: 112px;
+                background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+              }
+            }
+          }
+
+          .more {
+            margin-top: 20px;
+
+            display: flex;
+            align-items: center;
+            position: absolute;
+            right: 0;
+            font-weight: bold;
+            color: #35C5CC;
+            font-size: 28px;
+
+            .icon {
+              margin-left: 19px;
+              transform: rotate(180deg);
+              width: 26px;
+              height: 26px;
+              background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+            }
+          }
+        }
+      }
+
+      .edit-btn {
+        cursor: pointer;
+        margin-top: 147px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 32px;
+        color: #60DDDE;
+        line-height: 42px;
+
+        .edit-icon {
+          width: 30px;
+          height: 32px;
+          background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+          margin-right: 16px;
+        }
+      }
+    }
+
+
+  }
+}
+
+</style>