diff --git a/src/assets/images/tunnel/device.png b/src/assets/images/tunnel/device.png
new file mode 100644
index 0000000..317689f
Binary files /dev/null and b/src/assets/images/tunnel/device.png differ
diff --git a/src/assets/images/tunnel/sd_bj.png b/src/assets/images/tunnel/sd_bj.png
new file mode 100644
index 0000000..7ad3210
Binary files /dev/null and b/src/assets/images/tunnel/sd_bj.png differ
diff --git a/src/assets/images/tunnel/sdgl_sdt.png b/src/assets/images/tunnel/sdgl_sdt.png
new file mode 100644
index 0000000..daf630a
Binary files /dev/null and b/src/assets/images/tunnel/sdgl_sdt.png differ
diff --git a/src/assets/images/tunnel/sp_icon_yc.png b/src/assets/images/tunnel/sp_icon_yc.png
new file mode 100644
index 0000000..cf00b6c
Binary files /dev/null and b/src/assets/images/tunnel/sp_icon_yc.png differ
diff --git a/src/assets/images/tunnel/white-state-icon.png b/src/assets/images/tunnel/white-state-icon.png
new file mode 100644
index 0000000..0bf15cd
Binary files /dev/null and b/src/assets/images/tunnel/white-state-icon.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 32e6ed5..adc128a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -40,6 +40,24 @@ const routes = [
       title: 'site',
       breadcrumb: true
     }
+  },
+  {
+    path: '/tunnel',
+    name: 'tunnel',
+    component: () => import('@/views/tunnel-manage/index.vue'),
+    meta: {
+      title: 'tunnel',
+      breadcrumb: true
+    }
+  },
+  {
+    path: '/device',
+    name: 'device',
+    component: () => import('@/views/device-manage/index.vue'),
+    meta: {
+      title: 'device',
+      breadcrumb: true
+    }
   }
 ];
 
diff --git a/src/views/device-manage/index.vue b/src/views/device-manage/index.vue
new file mode 100644
index 0000000..d7dfcad
--- /dev/null
+++ b/src/views/device-manage/index.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.push('/')">
+        <div class="back-icon"></div>
+        <span>返回</span>
+      </div>
+      <div class="tunnel-title"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const router = useRouter()
+</script>
+
+<style scoped lang="scss">
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/site/index.vue b/src/views/site/index.vue
index aa73c89..2578366 100644
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -32,32 +32,31 @@
                 <div>施工长度{{ item.constructionLength }}米</div>
                 <div>实现长度{{ item.implementationLength }}公里</div>
               </div>
-              <div class="tunnel-add">
+              <div class="tunnel-add" @click="goToAddTunnel">
                 <div class="add-icon"></div>
               </div>
             </div>
-            <div class="more">
+            <div class="more" @click="router.push('/tunnel')">
               更多
               <div class="icon"></div>
             </div>
           </div>
         </div>
-        <div class="edit-btn" @click="isVisited=true">
+        <div class="edit-btn" @click="handleEdit">
           <div class="edit-icon"></div>
           <div>站点编辑</div>
         </div>
       </div>
-      <div class="site-box add-box" @click="isVisited=true">
+      <div class="site-box add-box" @click="handleAdd">
         <div class="add-icon"></div>
         <div style="cursor: pointer">添加站点</div>
       </div>
     </div>
-    <el-dialog v-model="isVisited" width="958px">
+    <el-dialog v-model="isVisited" width="1958px">
       <div class="siteId">
-        <span>站点id：{{ siteId }}</span>
-        <span>站点管理员id：{{ siteManageId }}</span>
+        <span>{{title}}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="116px">
+      <el-form :model="form" :label-position="right" label-width="168px">
         <el-form-item label="站点地址">
           <el-input v-model="form.address" placeholder="请输入站点地址"/>
         </el-form-item>
@@ -65,7 +64,7 @@
           <el-input v-model="form.name" placeholder="请输入站点名称"/>
         </el-form-item>
         <el-form-item label="站点描述">
-          <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入站点信息"/>
+          <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }" placeholder="请输入站点信息"/>
         </el-form-item>
         <el-form-item label="备注">
           <el-input v-model="form.remark" placeholder="请输入备注"/>
@@ -111,24 +110,11 @@ const siteList = ref([
     sortTunnel: '一号隧道',
     constructionLength: 500,
     implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
+  }
 ])
 const siteId = ref('iu78686')
 const siteManageId = ref('j98h0')
+const title=ref('新增站点')
 const isClick = ref(false);
 const isVisited = ref(false);
 const form = ref({
@@ -140,17 +126,26 @@ const form = ref({
 const handleClickSite = () => {
   isClick.value = !isClick.value
 }
+const goToAddTunnel=()=>{
+  router.push('/tunnel')
+}
+const handleEdit=()=>{
+  title.value='编辑站点'
+  isVisited.value=true
+}
+const handleAdd=()=>{
+  title.value='新增站点'
+  isVisited.value=true
+}
 </script>
 
 <style scoped lang="scss">
 .siteId {
-  font-size: 30px;
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
   color: #FFFFFF;
-  margin-bottom: 48px;
-
-  > span:first-child {
-    margin-right: 70px;
-  }
 }
 
 .btns {
@@ -160,36 +155,49 @@ const handleClickSite = () => {
 
   .cancel-btn {
     cursor: pointer;
-    width: 190px;
-    height: 60px;
+    width: 220px;
+    height: 80px;
     border-radius: 11px;
     border: 2px solid #08B7B8;
     color: #08B7B8;
-    line-height: 60px;
+    line-height: 80px;
     padding-left: 67px;
-    font-size: 28px;
+    font-size: 38px;
     box-sizing: border-box;
   }
 
   .sure-btn {
     cursor: pointer;
-    width: 190px;
-    height: 60px;
-    line-height: 60px;
+    width: 220px;
+    height: 80px;
+    line-height: 80px;
     background: #08B7B8;
     border-radius: 11px;
     color: #FFFFFF;
-    font-size: 28px;
+    font-size: 38px;
     padding-left: 67px;
   }
 }
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
 
 :deep(.el-form-item) {
   margin-top: 40px;
 }
 
 :deep(.el-form-item__label) {
-  font-size: 26px;
+  font-size: 38px;
   font-family: MicrosoftYaHei;
   color: #FFFFFF;
   margin-right: 12px;
@@ -197,15 +205,16 @@ const handleClickSite = () => {
 }
 
 :deep(.el-input) {
-  height: 50px;
+  height: 75px;
 
   .el-input__wrapper {
     background-color: transparent;
     border: 1px solid #08B7B8;
 
     .el-input__inner {
+      height: auto;
       color: #fff;
-      font-size: 26px;
+      font-size: 38px;
     }
   }
 }
@@ -213,24 +222,10 @@ const handleClickSite = () => {
 :deep(.el-textarea__inner) {
   background-color: transparent;
   border: 1px solid #08B7B8;
-  //min-height: 50px!important;
   color: #fff;
-  font-size: 26px;
+  font-size: 38px;
 }
 
-:deep(.el-dialog) {
-  border: 2px solid #05FEFF;
-  background: #0D6578;
-  border-radius: 20px;
-  padding: 30px 40px;
-  box-sizing: border-box;
-  margin: 588px auto 0 auto;
-
-  .el-dialog__header {
-    padding: 0;
-    display: none;
-  }
-}
 
 .site-bgc {
   padding: 85px 0 0 0;
@@ -247,19 +242,19 @@ const handleClickSite = () => {
       margin: 0 0 0 70px;
       display: flex;
       align-items: center;
-      width: 168px;
-      height: 60px;
-      line-height: 60px;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
       border-radius: 11px;
       border: 2px solid #08B7B8;
-      font-size: 28px;
+      font-size: 38px;
       color: #FFFFFF;
 
       .back-icon {
         margin-right: 20px;
-        margin-left: 33px;
-        width: 26px;
-        height: 26px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
         background-image: url('@/assets/images/site/zdgl_icon_fh.png');
       }
     }
@@ -276,14 +271,14 @@ const handleClickSite = () => {
 
       .all-btn {
         cursor: pointer;
-        padding-left: 56px;
-        width: 168px;
-        height: 60px;
-        line-height: 60px;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
         border-radius: 11px;
         border: 2px solid #08B7B8;
         color: #FFFFFF;
-        font-size: 28px;
+        font-size: 38px;
 
         &:last-child {
           margin-left: 40px;
@@ -304,7 +299,7 @@ const handleClickSite = () => {
       cursor: pointer;
       font-weight: bold;
       color: #60DDDE;
-      font-size: 32px;
+      font-size: 38px;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -322,8 +317,8 @@ const handleClickSite = () => {
       margin-top: 122px;
       //margin-right: 122px;
       padding: 40px 50px;
-      width: 1158px;
-      height: 718px;
+      width: 1250px;
+      height: 750px;
       background-image: url('@/assets/images/site/zdgl_bj.png');
       //box-sizing: border-box;
       position: relative;
@@ -335,25 +330,25 @@ const handleClickSite = () => {
       .top {
         display: flex;
         justify-content: space-between;
-        font-size: 32px;
+        font-size: 45px;
         font-weight: bold;
         color: #FFFFFF;
         line-height: 42px;
 
         > div:last-child {
           cursor: pointer;
-          width: 30px;
-          height: 30px;
+          width: 40px;
+          height: 40px;
           border: 2px solid #05FEFF;
           border-radius: 25px;
           position: relative;
 
           .clickColor {
             position: absolute;
-            top: 5.5px;
-            left: 5.5px;
-            width: 16px;
-            height: 16px;
+            top: 7px;
+            left: 6.5px;
+            width: 25px;
+            height: 25px;
             background-color: #05FEFF;
             border-radius: 25px;
           }
@@ -366,8 +361,8 @@ const handleClickSite = () => {
         .left-img {
           margin-top: 50px;
           margin-right: 60px;
-          width: 480px;
-          height: 350px;
+          width: 500px;
+          height: 370px;
           background-image: url('@/assets/images/site/zdgl_zd.png');
         }
 
@@ -375,7 +370,7 @@ const handleClickSite = () => {
           position: relative;
 
           > div:first-child {
-            font-size: 32px;
+            font-size: 38px;
             font-family: MicrosoftYaHei;
             color: #FFFFFF;
             line-height: 42px;
@@ -386,21 +381,18 @@ const handleClickSite = () => {
             margin-top: 29px;
 
             .tunnel {
-              width: 256px;
-              height: 310px;
+              width: 280px;
+              height: 350px;
               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;
+                font-size: 32px;
                 margin-top: 20px;
               }
 
@@ -409,21 +401,21 @@ const handleClickSite = () => {
               }
 
               > div:nth-child(3), > div:nth-child(4) {
-                font-size: 26px;
+                font-size: 32px;
               }
 
               .tunnel-icon {
-                width: 62px;
-                height: 64px;
+                width: 82px;
+                height: 84px;
                 background-image: url('@/assets/images/site/zdgl_icon_sd.png');
-                margin: 30px 0 40px 0;
+                margin: 30px 0 30px 0;
               }
             }
 
             .tunnel-add {
               margin-left: 20px;
-              width: 256px;
-              height: 310px;
+              width: 280px;
+              height: 350px;
               background: #1891A3;
               border-radius: 16px;
               display: flex;
@@ -432,8 +424,8 @@ const handleClickSite = () => {
 
               .add-icon {
                 cursor: pointer;
-                width: 112px;
-                height: 112px;
+                width: 122px;
+                height: 122px;
                 background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
               }
             }
@@ -448,13 +440,13 @@ const handleClickSite = () => {
             right: 0;
             font-weight: bold;
             color: #35C5CC;
-            font-size: 28px;
+            font-size: 38px;
 
             .icon {
               margin-left: 19px;
               transform: rotate(180deg);
-              width: 26px;
-              height: 26px;
+              width: 33px;
+              height: 33px;
               background-image: url('@/assets/images/site/zdgl_icon_fh.png');
             }
           }
@@ -462,35 +454,34 @@ const handleClickSite = () => {
       }
 
       .edit-btn {
-        width: 174px;
         cursor: pointer;
-        margin-top: 147px;
+        margin-top: 117px;
         display: flex;
         align-items: center;
-        font-size: 32px;
+        font-size: 40px;
         color: #60DDDE;
-        line-height: 42px;
         margin-left: 492px;
 
         .edit-icon {
-          width: 30px;
-          height: 32px;
+          width: 42px;
+          height: 44px;
           background-image: url('@/assets/images/site/zdgl_icon_bj.png');
           margin-right: 16px;
         }
       }
     }
-
-
   }
 
   .pagination {
-    margin-top: 120px;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    bottom: 80px;
     display: flex;
-    justify-content: center;
     align-items: center;
     color: #60DDDE;
-    font-size: 32px;
+    font-size: 38px;
+    font-weight: bold;
 
     > span:first-child {
       margin-right: 60px;
@@ -502,7 +493,7 @@ const handleClickSite = () => {
 
     :deep(.btn-prev) {
       background-color: transparent;
-      font-size: 32px;
+      font-size: 38px;
       font-family: MicrosoftYaHei, MicrosoftYaHei;
       font-weight: bold;
       color: #60DDDE;
@@ -511,7 +502,7 @@ const handleClickSite = () => {
 
     :deep(.btn-next) {
       background-color: transparent;
-      font-size: 32px;
+      font-size: 38px;
       font-family: MicrosoftYaHei, MicrosoftYaHei;
       font-weight: bold;
       color: #60DDDE;
@@ -519,12 +510,12 @@ const handleClickSite = () => {
     }
 
     :deep(.el-pager li.is-active ) {
-      width: 60px;
-      height: 60px;
+      width: 70px;
+      height: 70px;
       background: #60DDDE;
       border-radius: 50%;
       color: #071F40;
-      font-size: 32px;
+      font-size: 38px;
       font-family: MicrosoftYaHei, MicrosoftYaHei;
       font-weight: bold;
     }
@@ -534,12 +525,12 @@ const handleClickSite = () => {
     }
 
     :deep(.el-pager li:not(.is-active) ) {
-      width: 60px;
-      height: 60px;
+      width: 70px;
+      height: 70px;
       border: 1px solid #60DDDE;
       border-radius: 50%;
       background-color: transparent;
-      font-size: 32px;
+      font-size: 38px;
       font-family: MicrosoftYaHei, MicrosoftYaHei;
       font-weight: bold;
       color: #60DDDE;
diff --git a/src/views/tunnel-manage/index.vue b/src/views/tunnel-manage/index.vue
new file mode 100644
index 0000000..4c6749c
--- /dev/null
+++ b/src/views/tunnel-manage/index.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="tunnel-bgc">
+    <div class="box-top">
+      <div class="back-tunnel" @click="router.push('/')">
+        <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 del-btn">
+          删除
+        </div>
+      </div>
+    </div>
+    <div class="box-content">
+      <div class="site-box" v-for="item in siteList" :key="item.tunnelId">
+        <div class="top">
+          <span>{{ item.tunnelName }}</span>
+          <span>施工长度500米 隧道长度10公里</span>
+          <div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
+        </div>
+        <div class="box-center">
+          <div>
+            <div class="left-img"></div>
+            <div>
+              <div class="edit-btn" @click="handleEdit">
+                <div class="edit-icon"></div>
+                <div>隧道编辑</div>
+              </div>
+              <div class="edit-btn" @click="handleEditDevice">
+                <div class="edit-icon-two"></div>
+                <div>设备管理</div>
+              </div>
+            </div>
+          </div>
+          <div class="tunnel-right">
+            <div>
+              <div class="fan-icon"></div>
+              <span>风机异常</span>
+            </div>
+            <div class="icons-block">
+              <div v-for="item in iconsList" :key="item.icon" class="icon-text">
+                <div :style="{ backgroundImage: 'url(' +getImageUrl(item.icon)+')' }" class="icon"></div>
+                <span>{{ item.name }}：{{ item.num }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="site-box add-box" @click="handleAdd">
+        <div class="add-icon"></div>
+        <div style="cursor: pointer">添加隧道</div>
+      </div>
+    </div>
+    <el-dialog v-model="isVisited" width="1958px">
+      <div class="siteId">
+        <span>{{ title }}</span>
+      </div>
+      <el-form :model="form" :label-position="right" label-width="168px">
+        <el-form-item label="隧道名称">
+          <el-input v-model="form.name" placeholder="请输入隧道名称"/>
+        </el-form-item>
+      </el-form>
+      <div class="btns">
+        <div class="cancel-btn" @click="isVisited=false">
+          取消
+        </div>
+        <div class="sure-btn">
+          确定
+        </div>
+      </div>
+    </el-dialog>
+    <div class="pagination">
+      <span>首页</span>
+      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <span>尾页</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const router = useRouter()
+const siteList = ref([
+  {
+    tunnelName: '一号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '二号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+  {
+    tunnelName: '三号隧道',
+    num: 1,
+    constructionLength: 500,
+    implementationLength: 10
+  },
+
+
+])
+const iconsList = ref([
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: '无'
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: '无'
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+  {
+    icon: 'white-state-icon.png',
+    name: '风机',
+    num: 2
+  },
+])
+const title = ref('新增隧道')
+const isVisited = ref(false);
+const form = ref({
+  address: '',
+  name: '',
+  desc: '',
+  remark: ''
+});
+const handleEdit = () => {
+  title.value = '编辑隧道'
+  isVisited.value = true
+}
+const handleEditDevice = () => {
+  router.push('/device')
+}
+
+const handleAdd = () => {
+  title.value = '新增隧道'
+  isVisited.value = true
+}
+const getImageUrl = (name) => {
+  return new URL(`../../assets/images/tunnel/${name}`, import.meta.url).href
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.el-dialog) {
+  border: 2px solid #05FEFF;
+  background: #0D6578;
+  border-radius: 20px;
+  padding: 30px 40px;
+  box-sizing: border-box;
+  margin: 458px auto 0 auto;
+
+  .el-dialog__header {
+    padding: 0;
+    display: none;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-top: 40px;
+}
+
+:deep(.el-form-item__label) {
+  font-size: 38px;
+  font-family: MicrosoftYaHei;
+  color: #FFFFFF;
+  margin-right: 12px;
+  line-height: 50px;
+}
+
+:deep(.el-input) {
+  height: 75px;
+
+  .el-input__wrapper {
+    background-color: transparent;
+    border: 1px solid #08B7B8;
+
+    .el-input__inner {
+      height: auto;
+      color: #fff;
+      font-size: 38px;
+    }
+  }
+}
+
+.siteId {
+  display: flex;
+  justify-content: center;
+  margin: 0 0 60px 0;
+  font-size: 50px;
+  color: #FFFFFF;
+}
+
+.btns {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 80px;
+
+  .cancel-btn {
+    cursor: pointer;
+    width: 220px;
+    height: 80px;
+    border-radius: 11px;
+    border: 2px solid #08B7B8;
+    color: #08B7B8;
+    line-height: 80px;
+    padding-left: 67px;
+    font-size: 38px;
+    box-sizing: border-box;
+  }
+
+  .sure-btn {
+    cursor: pointer;
+    width: 220px;
+    height: 80px;
+    line-height: 80px;
+    background: #08B7B8;
+    border-radius: 11px;
+    color: #FFFFFF;
+    font-size: 38px;
+    padding-left: 67px;
+  }
+}
+
+.tunnel-bgc {
+  padding: 85px 0 0 0;
+  width: 100%;
+  height: 100%;
+  background-image: url('@/assets/images/tunnel/sd_bj.png');
+
+  .box-top {
+    display: flex;
+    justify-content: space-between;
+
+    .back-tunnel {
+      cursor: pointer;
+      margin: 0 0 0 70px;
+      display: flex;
+      align-items: center;
+      width: 178px;
+      height: 70px;
+      line-height: 70px;
+      border-radius: 11px;
+      border: 2px solid #08B7B8;
+      font-size: 38px;
+      color: #FFFFFF;
+
+      .back-icon {
+        margin-right: 20px;
+        margin-left: 23px;
+        width: 33px;
+        height: 33px;
+        background-image: url('@/assets/images/site/zdgl_icon_fh.png');
+      }
+    }
+
+    .all-del-btn {
+      display: flex;
+
+      .del-btn {
+        width: 168px;
+        height: 60px;
+        background: #08B7B8;
+        border-radius: 11px;
+      }
+
+      .all-btn {
+        cursor: pointer;
+        padding-left: 53px;
+        width: 178px;
+        height: 70px;
+        line-height: 70px;
+        border-radius: 11px;
+        border: 2px solid #08B7B8;
+        color: #FFFFFF;
+        font-size: 38px;
+
+        &:last-child {
+          margin-left: 40px;
+          margin-right: 70px;
+        }
+      }
+    }
+  }
+
+  .box-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 100px;
+    padding-right: 100px;
+    justify-content: space-between;
+
+    .add-box {
+      cursor: pointer;
+      font-weight: bold;
+      color: #60DDDE;
+      font-size: 38px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .add-icon {
+        margin-top: 110px;
+        margin-bottom: 87px;
+        width: 220px;
+        height: 220px;
+        background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
+      }
+    }
+
+    .site-box {
+      margin-top: 50px;
+      //margin-right: 122px;
+      padding: 40px 50px;
+      width: 981px;
+      height: 550px;
+      background-image: url('@/assets/images/site/zdgl_bj.png');
+      //box-sizing: border-box;
+      position: relative;
+
+      &:nth-child(3) {
+        margin-right: 0;
+      }
+
+      .top {
+        display: flex;
+        justify-content: space-between;
+        font-size: 45px;
+        font-weight: bold;
+        color: #FFFFFF;
+        line-height: 42px;
+
+        > span:nth-child(2) {
+          font-size: 38px;
+          color: #5CE4F2;
+        }
+
+        > div:last-child {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border: 2px solid #05FEFF;
+          border-radius: 25px;
+          position: relative;
+
+          .clickColor {
+            position: absolute;
+            top: 7px;
+            left: 6.5px;
+            width: 25px;
+            height: 25px;
+            background-color: #05FEFF;
+            border-radius: 25px;
+          }
+        }
+      }
+
+      .box-center {
+        display: flex;
+
+        //flex-direction: column;
+        > div:first-child {
+
+          > div:nth-child(2) {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-right: 50px;
+          }
+        }
+
+        .left-img {
+          margin-top: 110px;
+          margin-right: 100px;
+          width: 340px;
+          height: 148px;
+          background-image: url('@/assets/images/tunnel/sdgl_sdt.png');
+        }
+
+        .edit-btn {
+          cursor: pointer;
+          margin-top: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          font-size: 36px;
+          color: #60DDDE;
+          //margin-left: 175px;
+
+          .edit-icon {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/site/zdgl_icon_bj.png');
+            margin-right: 10px;
+          }
+
+          .edit-icon-two {
+            width: 32px;
+            height: 34px;
+            background-image: url('@/assets/images/tunnel/device.png');
+            margin-right: 10px;
+          }
+        }
+
+        .tunnel-right {
+          padding-top: 40px;
+
+          > div:first-child {
+            display: flex;
+            align-items: center;
+            font-size: 36px;
+            color: #FB3838;
+
+            .fan-icon {
+              margin-right: 10px;
+              width: 32px;
+              height: 32px;
+              background-image: url('@/assets/images/tunnel/sp_icon_yc.png');
+            }
+          }
+
+          .icons-block {
+            margin-top: 30px;
+            display: flex;
+            flex-wrap: wrap;
+
+            .icon-text {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              color: #FFFFFF;
+              font-size: 36px;
+              margin-right: 62px;
+              margin-bottom: 30px;
+
+              &:nth-child(2n) {
+                margin-right: 0;
+              }
+
+              .icon {
+                width: 32px;
+                height: 32px;
+                margin-right: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    bottom: 50px;
+    color: #60DDDE;
+    font-size: 38px;
+    font-weight: bold;
+
+    > span:first-child {
+      margin-right: 60px;
+    }
+
+    > span:last-child {
+      margin-left: 71px;
+    }
+
+    :deep(.btn-prev) {
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-right: 20px;
+    }
+
+    :deep(.btn-next) {
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+      margin-left: 30px;
+    }
+
+    :deep(.el-pager li.is-active ) {
+      width: 70px;
+      height: 70px;
+      background: #60DDDE;
+      border-radius: 50%;
+      color: #071F40;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+    }
+
+    :deep(.el-pager li) {
+      margin-left: 40px;
+    }
+
+    :deep(.el-pager li:not(.is-active) ) {
+      width: 70px;
+      height: 70px;
+      border: 1px solid #60DDDE;
+      border-radius: 50%;
+      background-color: transparent;
+      font-size: 38px;
+      font-family: MicrosoftYaHei, MicrosoftYaHei;
+      font-weight: bold;
+      color: #60DDDE;
+    }
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/tunnel/index.vue b/src/views/tunnel/index.vue
index 6fd9d9f..989d1df 100644
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -102,7 +102,7 @@ import { getLargeScreen } from "@/api/largeScreen";
 
 const authStore = useAuthStore();
 const router = useRouter();
-const selectIndex = ref(1);
+const selectIndex = ref(-1);
 const showFan = ref(false);
 const drawerLeft = ref(true);
 const drawerRight = ref(true);
@@ -167,6 +167,8 @@ const manageSelect = (index) => {
   console.log("首页点击-", index);
   if (index === 0) {
     router.push("/site");
+  }else if (index === 1){
+    router.push("/tunnel");
   }
 };
 const closeLeft = () => {