From f2671b729d0f58ea2d1f7d55cff8fc5316ce56a7 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Fri, 24 Jun 2022 17:04:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E8=AE=BE=E6=96=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/DetailsPageconetent.vue | 885 ++++++++++---------
 front/src/views/home/infrastructurePage.vue  |   5 +
 2 files changed, 460 insertions(+), 430 deletions(-)
 create mode 100644 front/src/views/home/infrastructurePage.vue

diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index 114bc67e..d1a15f06 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -6,7 +6,7 @@
     <div class="details-pageconetent-left">
       <detailsPageconetentTree />
     </div>
-    <div class="top" v-if="Cardsname != '知识库'">
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -144,6 +144,28 @@
         <a-empty />
       </div>
     </div>
+    <div class="top" v-else-if="Cardsname === '基础设施'">
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+      <div class="">
+        <infrastructure-page></infrastructure-page>
+      </div>
+    </div>
     <div class="top" v-else>
       <div class="top-title">
         <div
@@ -657,6 +679,8 @@
   // import VideoSurveillance from '@/views/home/videoSurveillance'
   // 数据资源引用
   import DetailsPageResource from '@/views/home/components/DetailsPageResource.vue'
+  // 基础设施引用
+  import InfrastructurePage from './infrastructurePage.vue'
   export default defineComponent({
     setup() {
       // const store = useStore()
@@ -1294,6 +1318,7 @@
       // VideoCameraOutlined,
       // VideoSurveillance,
       DetailsPageResource,
+      InfrastructurePage,
     },
     beforeUnmount() {
       mybus.off('selectCardsitem')
@@ -1306,474 +1331,474 @@
   })
 </script>
 <style lang="less" scoped>
-  .resultListSearchInput-father {
-    background: #f3f5f9;
-    padding-left: 0.2rem;
-    padding-top: 0.2rem;
-    .resultListSearchInput-son {
-      background: #fff;
-      padding: 0.2rem 0.2rem 0rem 0.3rem;
-      margin-right: 0.2rem;
-      .hengxian {
-        width: 100%;
-        height: 0.01rem;
-        background: rgba(150, 144, 144, 0.3);
-        margin-top: 0.2rem;
-      }
+.resultListSearchInput-father {
+  background: #f3f5f9;
+  padding-left: 0.2rem;
+  padding-top: 0.2rem;
+  .resultListSearchInput-son {
+    background: #fff;
+    padding: 0.2rem 0.2rem 0rem 0.3rem;
+    margin-right: 0.2rem;
+    .hengxian {
+      width: 100%;
+      height: 0.01rem;
+      background: rgba(150, 144, 144, 0.3);
+      margin-top: 0.2rem;
     }
   }
-  .resultListSearchInput {
-    margin-left: 0.1rem;
-    :deep(.ant-input) {
-      width: 4rem;
-      height: 0.36rem;
-      background: #fff;
-      border-radius: 0.04rem;
-    }
-    :deep(.ant-input-search-button) {
-      width: 0.8rem;
-      height: 0.36rem;
-      background: #0087ff;
-      border-radius: 0.04rem !important;
-      font-size: 0.14rem;
-      font-weight: 400;
-      color: #fff;
-      line-height: 0.34rem;
-      margin-left: 0.1rem;
-    }
-    :deep(.ant-input-group-addon) {
-      left: 0 !important;
-    }
+}
+.resultListSearchInput {
+  margin-left: 0.1rem;
+  :deep(.ant-input) {
+    width: 4rem;
+    height: 0.36rem;
+    background: #fff;
+    border-radius: 0.04rem;
   }
-  .button-reset {
-    border: 0;
-    outline: none;
+  :deep(.ant-input-search-button) {
     width: 0.8rem;
     height: 0.36rem;
-    background: #e1edfa;
-    border-radius: 0.04rem;
+    background: #0087ff;
+    border-radius: 0.04rem !important;
     font-size: 0.14rem;
     font-weight: 400;
-    color: #0087ff;
+    color: #fff;
     line-height: 0.34rem;
-    margin-left: 2.5rem;
-    cursor: pointer;
+    margin-left: 0.1rem;
   }
-  .details-pageconetent {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    // flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0.67rem;
+  :deep(.ant-input-group-addon) {
+    left: 0 !important;
+  }
+}
+.button-reset {
+  border: 0;
+  outline: none;
+  width: 0.8rem;
+  height: 0.36rem;
+  background: #e1edfa;
+  border-radius: 0.04rem;
+  font-size: 0.14rem;
+  font-weight: 400;
+  color: #0087ff;
+  line-height: 0.34rem;
+  margin-left: 2.5rem;
+  cursor: pointer;
+}
+.details-pageconetent {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  // flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 0.67rem;
+  position: relative;
+  background: rgba(245, 243, 243, 0.3);
+  .details-pageconetent-left {
+    max-height: 6.9rem;
+    position: absolute;
+    width: 2.5rem;
+    top: 0.17rem;
+    left: 2.5rem;
+    margin-right: 0.17rem;
+    overflow: auto;
+  }
+  .top {
+    min-height: 7.2rem;
     position: relative;
-    background: rgba(245, 243, 243, 0.3);
-    .details-pageconetent-left {
-      max-height: 6.9rem;
-      position: absolute;
-      width: 2.5rem;
-      top: 0.17rem;
-      left: 2.5rem;
-      margin-right: 0.17rem;
-      overflow: auto;
+    width: 10.87rem;
+    display: flex;
+    padding-top: 0.2rem;
+    flex-direction: column;
+    // align-items: center;
+    font-size: 0.16rem;
+    justify-content: left;
+    margin-left: 2.5rem;
+    .pagination {
+      background: #f3f5f9;
+      padding-bottom: 0.6rem;
     }
-    .top {
-      min-height: 7.2rem;
-      position: relative;
-      width: 10.87rem;
-      display: flex;
-      padding-top: 0.2rem;
-      flex-direction: column;
-      // align-items: center;
-      font-size: 0.16rem;
-      justify-content: left;
-      margin-left: 2.5rem;
-      .pagination {
-        background: #f3f5f9;
-        padding-bottom: 0.6rem;
-      }
-      .jichusheshi {
-        // display: flex;
-        // flex-direction: column;
-        // justify-content: center;
-        // padding-top: .4rem;
-        height: 4.45rem;
-        // overflow: hidden;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .89rem;
-              // height: .74rem;
-              // background: url('~@/assets/home/yunziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
+    .jichusheshi {
+      // display: flex;
+      // flex-direction: column;
+      // justify-content: center;
+      // padding-top: .4rem;
+      height: 4.45rem;
+      // overflow: hidden;
+      .yunziyuan {
+        width: 100%;
+        position: relative;
+        .shuoming {
+          position: absolute;
+          right: 0.2rem;
+          top: 0.15rem;
+          font-size: 0.12rem;
         }
-        .yunziyuan > div {
-          margin-bottom: 0.1rem;
-        }
-        .shipin {
-          width: 100%;
-          .shipin-title {
-            display: flex;
-            align-items: center;
-            .tupian {
-              // width: .56rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shipin.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            div {
-              margin-right: 0.6rem;
-            }
-            .shuzi {
-              font-weight: 600;
-            }
-          }
-        }
-        .shipin > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .jichusheshi > div {
-        // background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .shujuziyuan {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-top: 0.4rem;
-        .yunziyuan {
-          width: 100%;
-          position: relative;
-          .shuoming {
-            position: absolute;
-            right: 0.2rem;
-            top: 0.15rem;
-            font-size: 0.12rem;
-          }
-          .yunziyuan-title {
-            display: flex;
-            align-items: center;
-            margin-left: 0.2rem;
-            .tupian {
-              // width: .51rem;
-              // height: .5rem;
-              // background: url('~@/assets/home/shujuziyuan.png');
-            }
-            .title {
-              margin-left: 0.1rem;
-              font-weight: 600;
-              text-decoration: underline;
-              cursor: pointer;
-            }
-          }
-          .fenlei {
-            display: flex;
-            margin-left: 0.2rem;
-            margin-right: 0.3rem;
-            justify-content: space-between;
-          }
-          .keyongziyuan {
-            display: flex;
-            justify-content: space-between;
-            margin-left: 0.3rem;
-            margin-right: 0.3rem;
-            div {
-              display: flex;
-              div:last-child {
-                font-weight: 600;
-              }
-            }
-          }
-        }
-        .yunziyuan > div {
-          margin-bottom: 0.1rem;
-        }
-      }
-      .shujuziyuan > div {
-        background: #eaf4ff;
-        padding-top: 0.1rem;
-        border-radius: 0.04rem;
-        margin-bottom: 0.2rem;
-        padding-bottom: 0.4rem;
-      }
-      .top-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        font-size: 0.2rem;
-        font-family: 'Alibaba PuHuiTi';
-        color: #000000;
-        line-height: 0.34rem;
-        .photo {
-          display: inline-block;
-          height: 0.44rem;
-          width: 0.44rem;
-          margin-right: 0.1rem;
-        }
-        div {
-          margin: 0 0.2rem;
-          padding: 0 0.1rem;
-          cursor: pointer;
+        .yunziyuan-title {
           display: flex;
           align-items: center;
+          .tupian {
+            // width: .89rem;
+            // height: .74rem;
+            // background: url('~@/assets/home/yunziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
         }
-        div:hover {
-          color: #0087ff;
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
         }
-        .sel {
-          font-weight: 600;
-          color: #0087ff;
-          border-bottom: 0.02rem solid #0087ff;
+        .keyongziyuan {
+          display: flex;
+          justify-content: space-between;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
+            }
+          }
         }
       }
-      .top-content-father {
-        width: 10.87rem;
-        padding-left: 0.2rem;
-        // margin-bottom: .2rem;
-        background: #f3f5f9;
-        .top-content-son {
-          background: #fff;
-          margin: 0rem 0.2rem 0.2rem 0rem;
-          padding-top: 0.2rem;
-          padding-bottom: 0.2rem;
-        }
-        .top-content {
+      .yunziyuan > div {
+        margin-bottom: 0.1rem;
+      }
+      .shipin {
+        width: 100%;
+        .shipin-title {
           display: flex;
-          margin-top: 0rem;
-          span:nth-child(1) {
-            display: inline-block;
-            position: relative;
-            // width: .7rem;
-            line-height: 0.3614rem;
-            white-space: normal;
-            text-align: center;
-            vertical-align: middle;
+          align-items: center;
+          .tupian {
+            // width: .56rem;
+            // height: .5rem;
+            // background: url('~@/assets/home/shipin.png');
           }
-          // .top-content-title {
-          //   top: -0.2rem;
-          // }
-          .leixingsumfather {
-            width: 8.1rem;
-            display: inline-block;
-            height: 0.3014rem;
-            overflow: hidden;
-            // width: 7.18rem;
-          }
-          .leixingsumfather2 {
-            width: 9.2rem;
-          }
-          .leixingsum {
-            display: inline-block;
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
             cursor: pointer;
-            text-align: center;
-            margin-top: 0.05rem;
-            // margin-bottom: .1rem;
-            .ant-tag-checkable {
-              width: 0.83rem;
-              height: 0.25rem;
-              display: flex;
-              justify-content: center;
-              align-items: center;
-              padding-left: 0.05rem;
-              padding-right: 0.05rem;
-              float: left;
-              margin: 0 0.15rem;
-              font-family: 'AlibabaPuHuiTiR';
-              font-size: 0.14rem;
-              color: #333333;
-              font-weight: 500;
-              text-align: center;
-              line-height: 0.14rem;
-            }
-            :deep(.ant-tag-checkable-checked) {
-              // width: .67rem;
-              margin-left: 0.15rem;
-              margin-right: 0.15rem;
-              text-align: center;
-            }
-            .ant-tag-checkable:active,
-            .ant-tag-checkable-checked {
-              width: 0.85rem;
-              font-family: 'Alibaba PuHuiTi';
-              font-weight: 500;
-              background-color: #0087ff;
-              color: #ffffff;
-              border-radius: 0.16rem;
+          }
+        }
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          div {
+            margin-right: 0.6rem;
+          }
+          .shuzi {
+            font-weight: 600;
+          }
+        }
+      }
+      .shipin > div {
+        margin-bottom: 0.1rem;
+      }
+    }
+    .jichusheshi > div {
+      // background: #eaf4ff;
+      padding-top: 0.1rem;
+      border-radius: 0.04rem;
+      margin-bottom: 0.2rem;
+      padding-bottom: 0.4rem;
+    }
+    .shujuziyuan {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding-top: 0.4rem;
+      .yunziyuan {
+        width: 100%;
+        position: relative;
+        .shuoming {
+          position: absolute;
+          right: 0.2rem;
+          top: 0.15rem;
+          font-size: 0.12rem;
+        }
+        .yunziyuan-title {
+          display: flex;
+          align-items: center;
+          margin-left: 0.2rem;
+          .tupian {
+            // width: .51rem;
+            // height: .5rem;
+            // background: url('~@/assets/home/shujuziyuan.png');
+          }
+          .title {
+            margin-left: 0.1rem;
+            font-weight: 600;
+            text-decoration: underline;
+            cursor: pointer;
+          }
+        }
+        .fenlei {
+          display: flex;
+          margin-left: 0.2rem;
+          margin-right: 0.3rem;
+          justify-content: space-between;
+        }
+        .keyongziyuan {
+          display: flex;
+          justify-content: space-between;
+          margin-left: 0.3rem;
+          margin-right: 0.3rem;
+          div {
+            display: flex;
+            div:last-child {
+              font-weight: 600;
             }
           }
-          .active {
-            font-family: Alibaba PuHuiTi;
+        }
+      }
+      .yunziyuan > div {
+        margin-bottom: 0.1rem;
+      }
+    }
+    .shujuziyuan > div {
+      background: #eaf4ff;
+      padding-top: 0.1rem;
+      border-radius: 0.04rem;
+      margin-bottom: 0.2rem;
+      padding-bottom: 0.4rem;
+    }
+    .top-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.2rem;
+      font-family: 'Alibaba PuHuiTi';
+      color: #000000;
+      line-height: 0.34rem;
+      .photo {
+        display: inline-block;
+        height: 0.44rem;
+        width: 0.44rem;
+        margin-right: 0.1rem;
+      }
+      div {
+        margin: 0 0.2rem;
+        padding: 0 0.1rem;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+      }
+      div:hover {
+        color: #0087ff;
+      }
+      .sel {
+        font-weight: 600;
+        color: #0087ff;
+        border-bottom: 0.02rem solid #0087ff;
+      }
+    }
+    .top-content-father {
+      width: 10.87rem;
+      padding-left: 0.2rem;
+      // margin-bottom: .2rem;
+      background: #f3f5f9;
+      .top-content-son {
+        background: #fff;
+        margin: 0rem 0.2rem 0.2rem 0rem;
+        padding-top: 0.2rem;
+        padding-bottom: 0.2rem;
+      }
+      .top-content {
+        display: flex;
+        margin-top: 0rem;
+        span:nth-child(1) {
+          display: inline-block;
+          position: relative;
+          // width: .7rem;
+          line-height: 0.3614rem;
+          white-space: normal;
+          text-align: center;
+          vertical-align: middle;
+        }
+        // .top-content-title {
+        //   top: -0.2rem;
+        // }
+        .leixingsumfather {
+          width: 8.1rem;
+          display: inline-block;
+          height: 0.3014rem;
+          overflow: hidden;
+          // width: 7.18rem;
+        }
+        .leixingsumfather2 {
+          width: 9.2rem;
+        }
+        .leixingsum {
+          display: inline-block;
+          cursor: pointer;
+          text-align: center;
+          margin-top: 0.05rem;
+          // margin-bottom: .1rem;
+          .ant-tag-checkable {
+            width: 0.83rem;
+            height: 0.25rem;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-left: 0.05rem;
+            padding-right: 0.05rem;
+            float: left;
+            margin: 0 0.15rem;
+            font-family: 'AlibabaPuHuiTiR';
+            font-size: 0.14rem;
+            color: #333333;
+            font-weight: 500;
+            text-align: center;
+            line-height: 0.14rem;
+          }
+          :deep(.ant-tag-checkable-checked) {
+            // width: .67rem;
+            margin-left: 0.15rem;
+            margin-right: 0.15rem;
+            text-align: center;
+          }
+          .ant-tag-checkable:active,
+          .ant-tag-checkable-checked {
+            width: 0.85rem;
+            font-family: 'Alibaba PuHuiTi';
             font-weight: 500;
             background-color: #0087ff;
             color: #ffffff;
+            border-radius: 0.16rem;
           }
         }
-        .top-content:nth-child(1) {
-          margin-top: 0rem !important;
-        }
-      }
-    }
-  }
-  .shrinkTag {
-    width: 0.5rem;
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    margin-bottom: 0.05rem;
-    span {
-      cursor: pointer;
-    }
-  }
-  .shrink {
-    height: unset !important;
-    overflow: unset !important;
-  }
-  .talk-monitor {
-    position: fixed;
-    bottom: 0.5rem;
-    right: 0.1rem;
-    z-index: 9999;
-    cursor: pointer;
-    i {
-      width: 0.64rem;
-      height: 0.64rem;
-      display: inline-block;
-      background: url('~@/assets/home/icon-talk.png');
-      background-size: cover;
-    }
-  }
-  .top-content-father {
-    width: 10.87rem;
-    padding-left: 0.2rem;
-    // margin-bottom: .2rem;
-    .top-content {
-      display: flex;
-      margin-top: 0.23rem;
-      span:nth-child(1) {
-        display: inline-block;
-        position: relative;
-        width: 0.68rem;
-        font-weight: 600;
-        white-space: normal;
-        text-align: center;
-        vertical-align: middle;
-        font-size: 0.16rem;
-        margin-left: 0.3rem;
-      }
-      // .top-content-title {
-      //   top: -0.2rem;
-      // }
-      .leixingsumfather {
-        width: 7.7rem;
-        display: inline-block;
-        height: 0.3014rem;
-        overflow: hidden;
-        // width: 7.18rem;
-      }
-      .leixingsum {
-        width: 0.93rem;
-        display: inline-block;
-        cursor: pointer;
-        text-align: center;
-        margin-top: 0.05rem;
-        // margin-bottom: .1rem;
-        .ant-tag-checkable {
-          width: 0.85rem;
-          height: 0.25rem;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding-left: 0.05rem;
-          padding-right: 0.05rem;
-          float: left;
-          margin: 0 0.15rem;
-          font-family: 'AlibabaPuHuiTiR';
-          font-size: 0.14rem;
-          color: #333333;
-          font-weight: 500;
-          text-align: center;
-          line-height: 0.14rem;
-        }
-        :deep(.ant-tag-checkable-checked) {
-          // width: .67rem;
-          margin-left: 0.15rem;
-          margin-right: 0.15rem;
-          text-align: center;
-        }
-        .ant-tag-checkable:active,
-        .ant-tag-checkable-checked {
-          width: 0.85rem;
-          font-family: 'Alibaba PuHuiTi';
+        .active {
+          font-family: Alibaba PuHuiTi;
           font-weight: 500;
           background-color: #0087ff;
           color: #ffffff;
-          border-radius: 0.16rem;
         }
       }
-      .active {
-        font-family: Alibaba PuHuiTi;
+      .top-content:nth-child(1) {
+        margin-top: 0rem !important;
+      }
+    }
+  }
+}
+.shrinkTag {
+  width: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin-bottom: 0.05rem;
+  span {
+    cursor: pointer;
+  }
+}
+.shrink {
+  height: unset !important;
+  overflow: unset !important;
+}
+.talk-monitor {
+  position: fixed;
+  bottom: 0.5rem;
+  right: 0.1rem;
+  z-index: 9999;
+  cursor: pointer;
+  i {
+    width: 0.64rem;
+    height: 0.64rem;
+    display: inline-block;
+    background: url('~@/assets/home/icon-talk.png');
+    background-size: cover;
+  }
+}
+.top-content-father {
+  width: 10.87rem;
+  padding-left: 0.2rem;
+  // margin-bottom: .2rem;
+  .top-content {
+    display: flex;
+    margin-top: 0.23rem;
+    span:nth-child(1) {
+      display: inline-block;
+      position: relative;
+      width: 0.68rem;
+      font-weight: 600;
+      white-space: normal;
+      text-align: center;
+      vertical-align: middle;
+      font-size: 0.16rem;
+      margin-left: 0.3rem;
+    }
+    // .top-content-title {
+    //   top: -0.2rem;
+    // }
+    .leixingsumfather {
+      width: 7.7rem;
+      display: inline-block;
+      height: 0.3014rem;
+      overflow: hidden;
+      // width: 7.18rem;
+    }
+    .leixingsum {
+      width: 0.93rem;
+      display: inline-block;
+      cursor: pointer;
+      text-align: center;
+      margin-top: 0.05rem;
+      // margin-bottom: .1rem;
+      .ant-tag-checkable {
+        width: 0.85rem;
+        height: 0.25rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 0.05rem;
+        padding-right: 0.05rem;
+        float: left;
+        margin: 0 0.15rem;
+        font-family: 'AlibabaPuHuiTiR';
+        font-size: 0.14rem;
+        color: #333333;
+        font-weight: 500;
+        text-align: center;
+        line-height: 0.14rem;
+      }
+      :deep(.ant-tag-checkable-checked) {
+        // width: .67rem;
+        margin-left: 0.15rem;
+        margin-right: 0.15rem;
+        text-align: center;
+      }
+      .ant-tag-checkable:active,
+      .ant-tag-checkable-checked {
+        width: 0.85rem;
+        font-family: 'Alibaba PuHuiTi';
         font-weight: 500;
         background-color: #0087ff;
         color: #ffffff;
+        border-radius: 0.16rem;
       }
     }
-    .top-content:nth-child(1) {
-      margin-top: 0.41rem !important;
+    .active {
+      font-family: Alibaba PuHuiTi;
+      font-weight: 500;
+      background-color: #0087ff;
+      color: #ffffff;
     }
   }
-  :deep(.ant-card-grid) {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
+  .top-content:nth-child(1) {
+    margin-top: 0.41rem !important;
   }
+}
+:deep(.ant-card-grid) {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+}
 </style>
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
new file mode 100644
index 00000000..1249bb3e
--- /dev/null
+++ b/front/src/views/home/infrastructurePage.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>1234567890</div>
+</template>
+<script></script>
+<style lang="less" scoped></style>