diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index d97f3f34..346c6eaa 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -15,7 +15,7 @@
     <div class="details-pageconetent-left" v-else-if="Cardsname === '基础设施'">
       <detailsPageInfrastructureTree v-if="flag == '1'" />
     </div>
-    <div class="top" v-if="Cardsname != '基础设施'">
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="resultListSearchInput-father">
         <div class="resultListSearchInput-son">
           模糊搜索
@@ -79,7 +79,7 @@
       <div class="top-content-father" :key="listKey">
         <template
           v-if="
-            Cardsname == '组件服务' ||Cardsname == '知识库' ||
+            Cardsname == '组件服务' ||
             Cardsname == '应用资源' ||
             Cardsname == ''
           "
@@ -278,6 +278,10 @@
           </span>
         </div>
       </div>
+      <KnowledgeBase
+        :resourceList="resourceList"
+        :resourceTotal="resourceTotal"
+      ></KnowledgeBase>
     </div>
     <!--客户反馈：能力集市-问答机器人属于互联网链接，先注释掉，不要删除。写一下注释，方便后面要放开的时候一下子找到。-->
     <!-- <div class="talk-monitor" @click="openMonitor">
@@ -313,7 +317,7 @@
     <div class="details-pageconetent-left" style="left: 0.16rem" v-else>
       <detailsPageInfrastructureTreeXha v-show="showFlag" />
     </div>
-    <div class="top" v-if="Cardsname != '基础设施'">
+    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
       <div class="top-title">
         <div
           v-for="item in titleName"
@@ -1002,7 +1006,6 @@
           paramsGetResources,
           flag
         )
-
         getAppResources()
       }
       //跳转链接
@@ -1163,10 +1166,8 @@
           }
           console.log('selectSubType------------>', selectSubType)
           console.log('ListContent.records------------>', ListContent.records)
-
           ListContent.records.forEach((val) => {
             console.log('val-----ddd------->', val)
-
             if (!val) {
               return
             }
@@ -1198,7 +1199,6 @@
               }
             }
           })
-
           // 智能算法-特殊处理
           if (whoShow1.value.itShowXiHaiAn) {
             if (!storageSearchInfo) {
@@ -1337,7 +1337,6 @@
           globalData.data = []
         }
         select = router.currentRoute.value.query.select
-
         if (
           (select == '应用资源' &&
             (paramsGetResources.orderField == '' ||
@@ -1645,7 +1644,6 @@
           val.createTime = val.createTime.split('.')[0]
           val.createDate = val.createTime // 发布时间
         })
-
         console.log('接口数据', data)
         resourceList.data = data || []
         console.log('接口数据2', resourceList.data)
@@ -1816,7 +1814,6 @@
             listKey.value++
           }
         }
-
         // 如果有搜索条件但是没有类型 全局搜索
         if (str && !router.currentRoute.value.query.select) {
           globalSearch()
@@ -2025,11 +2022,9 @@
     font-family: 'webfont';
     src: url('~@/assets/capacitySquare/webfont.ttf');
   }
-
   .resultListSearchInput-father {
     background: #f3f5f9;
     padding: 0.2rem;
-
     .resultListSearchInput-son {
       background: #fff;
       padding: 0.2rem 0.2rem 0rem 0.3rem;
@@ -2050,17 +2045,14 @@
       }
     }
   }
-
   .resultListSearchInput {
     margin-left: 0.1rem;
-
     :deep(.ant-input) {
       width: 4rem;
       height: 0.32rem;
       background: #fff;
       border-radius: 0.02rem;
     }
-
     :deep(.ant-input-search-button) {
       width: 0.8rem;
       height: 0.32rem;
@@ -2072,12 +2064,10 @@
       line-height: 0.32rem;
       margin-left: 0.1rem;
     }
-
     :deep(.ant-input-group-addon) {
       left: 0 !important;
     }
   }
-
   .button-reset {
     border: 0;
     outline: none;
@@ -2094,7 +2084,6 @@
     margin-left: 2.5rem;
     cursor: pointer;
   }
-
   .details-pageconetent {
     height: 100%;
     width: 100%;
@@ -2104,7 +2093,6 @@
     margin-top: 0.67rem;
     position: relative;
     background: rgba(245, 243, 243, 0.3);
-
     .details-pageconetent-left {
       // max-height: 8.5rem;
       height: 100%;
@@ -2118,7 +2106,6 @@
       margin-right: 0.17rem;
       overflow: auto;
     }
-
     .top {
       min-height: 7.2rem;
       position: relative;
@@ -2130,33 +2117,26 @@
       justify-content: left;
       margin-left: 2.5rem;
       background: #f3f5f9;
-
       .pagination {
         background: #f3f5f9;
         padding-bottom: 0.6rem;
       }
-
       .jichusheshi {
         height: 4.45rem;
-
         .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 {
             }
-
             .title {
               margin-left: 0.1rem;
               font-weight: 600;
@@ -2164,44 +2144,35 @@
               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;
         }
-
         .shipin {
           width: 100%;
-
           .shipin-title {
             display: flex;
             align-items: center;
-
             .tupian {
             }
-
             .title {
               margin-left: 0.1rem;
               font-weight: 600;
@@ -2209,58 +2180,47 @@
               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 {
         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 {
             }
-
             .title {
               margin-left: 0.1rem;
               font-weight: 600;
@@ -2268,35 +2228,29 @@
               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;
@@ -2304,7 +2258,6 @@
         margin-bottom: 0.2rem;
         padding-bottom: 0.4rem;
       }
-
       .top-title {
         display: flex;
         justify-content: space-around;
@@ -2314,47 +2267,39 @@
         color: #000000;
         line-height: 0.34rem;
         margin-bottom: 0.2rem;
-
         .photo {
           display: inline-block;
           height: 0.44rem;
           width: 0.44rem;
           margin-right: 0.1rem;
         }
-
         div {
           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: 100%;
         padding: 0 0.2rem 0.2rem 0.2rem;
         background: #f3f5f9;
         margin-bottom: 0.2rem;
-
         .top-content-son {
           background: #fff;
           padding: 0.2rem 0;
         }
-
         .top-content {
           display: flex;
           margin-top: 0rem;
-
           span:nth-child(1) {
             display: inline-block;
             position: relative;
@@ -2363,7 +2308,6 @@
             text-align: center;
             vertical-align: middle;
           }
-
           .leixingsumfather {
             margin-left: -13px;
             width: 9.4rem;
@@ -2371,17 +2315,14 @@
             height: 0.3014rem;
             overflow: hidden;
           }
-
           .leixingsumfather2 {
             width: 9.2rem;
           }
-
           .leixingsum {
             display: inline-block;
             cursor: pointer;
             text-align: center;
             margin-top: 0.05rem;
-
             .ant-tag-checkable {
               width: 1rem;
               height: 0.25rem;
@@ -2399,13 +2340,11 @@
               text-align: center;
               line-height: 0.14rem;
             }
-
             :deep(.ant-tag-checkable-checked) {
               margin-left: 0.15rem;
               margin-right: 0.15rem;
               text-align: center;
             }
-
             .ant-tag-checkable:active,
             .ant-tag-checkable-checked {
               // width: 0.85rem;
@@ -2417,7 +2356,6 @@
               border-radius: 0.16rem;
             }
           }
-
           .active {
             font-family: Alibaba PuHuiTi;
             font-weight: 500;
@@ -2425,38 +2363,32 @@
             color: #ffffff;
           }
         }
-
         .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;
@@ -2465,7 +2397,6 @@
       background-size: cover;
     }
   }
-
   .abilitySquare {
     width: 0.7rem;
     height: 0.7rem;
@@ -2481,11 +2412,9 @@
     right: 0.1rem;
     cursor: pointer;
     background: #e3edfc;
-
     p {
       margin: 0;
     }
-
     p:nth-child(1) {
       height: 0.35rem;
       width: 0.36rem;
@@ -2493,7 +2422,6 @@
       background-size: 100% 100%;
       background-position: center;
     }
-
     ul {
       background: #ffffff;
       font-family: webfont;
@@ -2506,7 +2434,6 @@
       left: -0.62rem;
       padding: 0;
       margin: 0;
-
       li {
         list-style: none;
         color: #0061ec;
@@ -2515,24 +2442,20 @@
         padding-left: 0.4rem;
         border-bottom: 0.01rem solid #dfd9d9;
       }
-
       li:nth-of-type(1) {
         background: url('~@/assets/home/appIcon.png') no-repeat;
         background-position: 0.18rem center;
       }
-
       li:nth-of-type(2) {
         background: url('~@/assets/home/AiIcon.png') no-repeat;
         background-position: 0.18rem center;
       }
-
       li:nth-of-type(3) {
         border-bottom: none;
         background: url('~@/assets/home/GisIcon.png') no-repeat;
         background-position: 0.18rem center;
       }
     }
-
     ul::after {
       content: '';
       position: absolute;
@@ -2543,7 +2466,6 @@
       border: 0.13rem solid;
       border-color: #fff transparent transparent transparent;
     }
-
     ul::before {
       content: '';
       position: absolute;
@@ -2554,30 +2476,25 @@
       border: 0.13rem solid;
       border-color: #dfd9d9 transparent transparent transparent;
     }
-
     @keyframes ulShowTime {
       0% {
         transform: scale(0);
       }
-
       100% {
         transform: scale(0);
       }
     }
   }
-
   .top-content-father {
     width: 10.87rem;
     padding-left: 0.2rem;
-
     .top-content {
       display: flex;
       margin-top: 0.23rem;
-
       span:nth-child(1) {
         display: inline-block;
         position: relative;
-        width: 0.9rem;
+        width: 0.68rem;
         font-weight: 600;
         white-space: normal;
         text-align: center;
@@ -2585,21 +2502,18 @@
         font-size: 0.16rem;
         margin-left: 0.3rem;
       }
-
       .leixingsumfather {
         width: 7.7rem;
         display: inline-block;
         height: 0.3014rem;
         overflow: hidden;
       }
-
       .leixingsum {
         // width: 1rem;
         display: inline-block;
         cursor: pointer;
         text-align: center;
         margin-top: 0.05rem;
-
         .ant-tag-checkable {
           width: 1rem;
           height: 0.25rem;
@@ -2617,13 +2531,11 @@
           text-align: center;
           line-height: 0.14rem;
         }
-
         :deep(.ant-tag-checkable-checked) {
           margin-left: 0.15rem;
           margin-right: 0.15rem;
           text-align: center;
         }
-
         .ant-tag-checkable:active,
         .ant-tag-checkable-checked {
           width: 0.85rem;
@@ -2634,7 +2546,6 @@
           border-radius: 0.16rem;
         }
       }
-
       .active {
         font-family: Alibaba PuHuiTi;
         font-weight: 500;
@@ -2642,12 +2553,10 @@
         color: #ffffff;
       }
     }
-
     .top-content:nth-child(1) {
       margin-top: 0.41rem !important;
     }
   }
-
   :deep(.ant-card-grid) {
     overflow: hidden;
     white-space: nowrap;
diff --git a/front/src/views/home/details.vue b/front/src/views/home/details.vue
index 69315a07..15879f72 100644
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-14 09:43:49
- * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-20 18:44:52
+ * @LastEditors: hisense.wuhongjian
+ * @LastEditTime: 2022-12-09 17:31:52
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -12,103 +12,133 @@
       <detail-back></detail-back>
       <div class="detail-content">
         <details-view v-if="showView === 'details-view'"></details-view>
-        <algorithm-details v-if="showView === 'algorithm-details'"></algorithm-details>
-        <application-details v-else-if="showView === 'application-details'"></application-details>
-        <developer-components v-else-if="showView === 'development-of-component'"></developer-components>
-        <business-details v-else-if="showView === 'business-details'"></business-details>
+        <algorithm-details
+          v-if="showView === 'algorithm-details'"
+        ></algorithm-details>
+        <application-details
+          v-else-if="showView === 'application-details'"
+        ></application-details>
+        <developer-components
+          v-else-if="showView === 'development-of-component'"
+        ></developer-components>
+        <business-details
+          v-else-if="showView === 'business-details'"
+        ></business-details>
         <layer-service v-else-if="showView === 'layer-service'"></layer-service>
-        <governance-model v-else-if="showView === 'governance-model'"></governance-model>
-        <standard-doc v-else-if="showView === 'standard-doc'"></standard-doc>
       </div>
       <home-footer></home-footer>
-
     </div>
   </div>
 </template>
-
 <script>
-import HomeHeader from '@/views/home/components/header'
-import { defineComponent, reactive, ref } from 'vue'
-import DetailsView from './components/DetailsView.vue'
-import HomeFooter from '@/views/newHome/components/Footer'
-// import Standard from "@/views/detailsAll/StandardDoc "
-import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
-import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
-import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
-import BusinessDetails from '@/views/detailsAll/BusinessDetails'
-import LayerService from '@/views/detailsAll/LayerService'
-import GovernanceModel from '@/views/detailsAll/GovernanceModel'
-import StandardDoc from '@/views/detailsAll/StandardDoc'
-import detailBack from '@/views/home/detailBack.vue'
-import { selectOne } from '@/api/home'
-import { useRouter } from 'vue-router'
-export default defineComponent({
-  name: '',
-  props: {},
-  components: {
-    HomeHeader,
-    DetailsView,
-    HomeFooter,
-    AlgorithmDetails,
-    ApplicationDetails,
-    DeveloperComponents,
-    BusinessDetails,
-    LayerService,
-    detailBack,
-    StandardDoc,
-    GovernanceModel,
-
-  },
-  setup() {
-    const formState = reactive({
-      applyRequire: '',
-      applyDept: '',
-      applyName: '',
-      applyPurpose: '',
-      applySystem: '',
-    })
-
-    const options = ref([
-      {
-        value: '政法委',
-        label: '政法委',
-      },
-      {
-        value: '公安局',
-        label: '公安局',
-      },
-      {
-        value: '卫健委',
-        label: '卫健委',
-      },
-      {
-        value: '城市管理局',
-        label: '城市管理局',
-      },
-      {
-        value: '生态环境局',
-        label: '生态环境局',
-      },
-      {
-        value: '交通运输局',
-        label: '交通运输局',
-      },
-    ])
-    const router = useRouter()
-    const id = router.currentRoute.value.query.id
-    const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-    let showView = ref('')
-    const targetFlag = ref(true)
-    const init = () => {
-      debugger
-      if (id) {
-        selectOne(id).then((res) => {
-          if (res.data.data.type == '组件服务') {
-            let detection = res.data.data.infoList.filter(
+  import HomeHeader from '@/views/home/components/header'
+  import { defineComponent, reactive, ref } from 'vue'
+  import DetailsView from './components/DetailsView.vue'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import AlgorithmDetails from '@/views/detailsAll/AlgorithmDetails'
+  import ApplicationDetails from '@/views/detailsAll/ApplicationDetails'
+  import DeveloperComponents from '@/views/detailsAll/DeveloperComponents'
+  import BusinessDetails from '@/views/detailsAll/BusinessDetails'
+  import LayerService from '@/views/detailsAll/LayerService'
+  import detailBack from '@/views/home/detailBack.vue'
+  import { selectOne } from '@/api/home'
+  import { useRouter } from 'vue-router'
+  export default defineComponent({
+    name: '',
+    props: {},
+    components: {
+      HomeHeader,
+      DetailsView,
+      HomeFooter,
+      AlgorithmDetails,
+      ApplicationDetails,
+      DeveloperComponents,
+      BusinessDetails,
+      LayerService,
+      detailBack,
+    },
+    setup() {
+      const formState = reactive({
+        applyRequire: '',
+        applyDept: '',
+        applyName: '',
+        applyPurpose: '',
+        applySystem: '',
+      })
+      const options = ref([
+        {
+          value: '政法委',
+          label: '政法委',
+        },
+        {
+          value: '公安局',
+          label: '公安局',
+        },
+        {
+          value: '卫健委',
+          label: '卫健委',
+        },
+        {
+          value: '城市管理局',
+          label: '城市管理局',
+        },
+        {
+          value: '生态环境局',
+          label: '生态环境局',
+        },
+        {
+          value: '交通运输局',
+          label: '交通运输局',
+        },
+      ])
+      const router = useRouter()
+      const id = router.currentRoute.value.query.id
+      const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+      let showView = ref('')
+      const targetFlag = ref(true)
+      const init = () => {
+        if (id) {
+          selectOne(id).then((res) => {
+            if (res.data.data.type == '组件服务') {
+              let detection = res.data.data.infoList.filter(
+                (item) => item.attrType === '组件类型'
+              )[0]
+              if (detection) {
+                res.data.data.infoList.map((item) => {
+                  if (item.attrType == '组件类型') {
+                    switch (item.attrValue) {
+                      case '智能算法':
+                        showView.value = 'algorithm-details'
+                        break
+                      case '开发组件':
+                        showView.value = 'development-of-component'
+                        break
+                      case '业务组件':
+                        showView.value = 'business-details'
+                        break
+                      case '图层服务':
+                        showView.value = 'layer-service'
+                        break
+                      default:
+                        break
+                    }
+                  }
+                })
+              } else {
+                showView.value = 'algorithm-details'
+              }
+            } else {
+              showView.value = 'application-details'
+            }
+          })
+        } else if (obj) {
+          console.log('obj============>', obj)
+          if (obj.type == '组件服务') {
+            let detection = obj.infoList.filter(
               (item) => item.attrType === '组件类型'
             )[0]
             if (detection) {
-              res.data.data.infoList.map((item) => {
+              obj.infoList.map((item) => {
                 if (item.attrType == '组件类型') {
                   switch (item.attrValue) {
                     case '智能算法':
@@ -131,121 +161,38 @@ export default defineComponent({
             } else {
               showView.value = 'algorithm-details'
             }
-          } else if (res.data.data.type == '知识库') {
-            let detection = res.data.data.infoList.find((item) => item.attrType === '知识库类型')
-            console.log('detection---ww--------->', detection);
-            if (detection) {
-              res.data.data.infoList.map((item) => {
-                if (item.attrType == '知识库类型') {
-                  switch (item.attrValue) {
-                    case '数据标准':
-                      showView.value = 'standard-doc'
-                      break
-                    case '治理模型':
-                      showView.value = 'governance-model'
-                      break
-                    default:
-                      showView.value = 'standard-doc'
-                      break
-                  }
-                }
-              })
-            } else {
-              showView.value = 'standard-doc'
-            }
           } else {
-            showView.value = 'standard-doc'
+            showView.value = 'application-details'
           }
-        })
-      } else if (obj) {
-        console.log('obj============>', obj)
-        if (obj.type == '组件服务') {
-          let detection = obj.infoList.filter(
-            (item) => item.attrType === '组件类型'
-          )[0]
-          if (detection) {
-            obj.infoList.map((item) => {
-              if (item.attrType == '组件类型') {
-                switch (item.attrValue) {
-                  case '智能算法':
-                    showView.value = 'algorithm-details'
-                    break
-                  case '开发组件':
-                    showView.value = 'development-of-component'
-                    break
-                  case '业务组件':
-                    showView.value = 'business-details'
-                    break
-                  case '图层服务':
-                    showView.value = 'layer-service'
-                    break
-                  default:
-                    break
-                }
-              }
-            })
-          } else {
-            showView.value = 'algorithm-details'
-          }
-        } else if (obj.type == '知识库') {
-          let detection = obj.infoList.filter(
-            (item) => item.attrType === '知识库类型'
-          )[0]
-          if (detection) {
-            obj.infoList.map((item) => {
-              if (item.attrType == '知识库类型') {
-                switch (item.attrValue) {
-                  case '数据标准':
-                    showView.value = 'standard-doc'
-                    break
-                  case '治理模型':
-                    showView.value = 'governance-model'
-                    break
-                  default:
-                    break
-                }
-              }
-            })
-          } else {
-            showView.value = 'standard-doc'
-          }
-        } else {
-          showView.value = 'standard-doc'
         }
       }
-    }
-    init()
+      init()
 
-    return {
-      formState,
-      options,
-      showView,
-      targetFlag,
-      init,
-      router,
-      id,
-    }
-  },
-})
+      return {
+        formState,
+        options,
+        showView,
+        targetFlag,
+        init,
+        router,
+        id,
+      }
+    },
+  })
 </script>
-
-<style scoped lang="less">
-
-</style>
+<style scoped lang="less"></style>
 <style>
-html,
-body {
-  height: unset;
-}
-
-#apply-container {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.detail-content {
-  margin-top: 90px;
-}
+  html,
+  body {
+    height: unset;
+  }
+  #apply-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .detail-content {
+    margin-top: 90px;
+  }
 </style>