diff --git a/frontend/pc/index.html b/frontend/pc/index.html
index 1c85cbd01..729f6ea1f 100644
--- a/frontend/pc/index.html
+++ b/frontend/pc/index.html
@@ -35,6 +35,7 @@
             window.TAM_PROJECT_ID = "{{TAM_PROJECT_ID}}";
             window.DEFAULT_PROJECT = "{{DEFAULT_PROJECT}}";
             window.BK_PAAS_ESB_HOST = "{{BK_PAAS_ESB_HOST}}";
+            window.NOTICE_CENTER_SWITCH = "{{NOTICE_CENTER_SWITCH}}";
         </script>
         <script>
             var isMobileDevice = false;
diff --git a/frontend/pc/package.json b/frontend/pc/package.json
index ba3a7d08c..7b7c854af 100644
--- a/frontend/pc/package.json
+++ b/frontend/pc/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@blueking/bkcharts": "^2.0.6",
     "@blueking/bkui-form": "0.0.31",
+    "@blueking/notice-component-vue2": "^2.0.1",
     "@blueking/user-selector": "^1.0.5-beta.2",
     "@toast-ui/editor-plugin-code-syntax-highlight": "^1.0.0",
     "@toast-ui/vue-editor": "^2.4.0",
diff --git a/frontend/pc/src/App.vue b/frontend/pc/src/App.vue
index 859f53403..d3e3dcbbf 100644
--- a/frontend/pc/src/App.vue
+++ b/frontend/pc/src/App.vue
@@ -22,11 +22,11 @@
 
 <template>
   <div id="app" class="bk-app" @click="hiddenTree" v-bkloading="{ isLoading: loading }">
+    <notice-component v-if="showNotice && !$route.meta.iframe" :api-url="apiUrl" @show-alert-change="handleNoticeChange" />
     <template v-if="isShowView">
       <!-- has navigation-->
-      <navigation v-if="!$route.meta.iframe">
+      <navigation v-if="!$route.meta.iframe" :class="{ 'show-notice': showNotice }">
         <div
-          v-if="isShowView"
           v-bkloading="{ isLoading: localLoading }"
           class="bk-app-content">
           <permissionApply
@@ -42,6 +42,7 @@
       </navigation>
       <!-- no navigation-->
       <template v-else>
+        <!-- ddd -->
         <div
           v-if="isShowView"
           v-bkloading="{ isLoading: localLoading }"
@@ -62,15 +63,20 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
+  import NoticeComponent from '@blueking/notice-component-vue2';
+  import '@blueking/notice-component-vue2/dist/style.css';
   import bus from './utils/bus';
   import Navigation from './components/common/layout/Navigation.vue';
   import PermissionModal from '@/components/common/modal/PermissionModal.vue';
   import permissionApply from '@/components/common/layout/permissionApply.vue';
   import permission from '@/mixins/permission.js';
   import { errorHandler } from './utils/errorHandler';
+
   export default {
     name: 'app',
     components: {
+      NoticeComponent,
       Navigation,
       PermissionModal,
       permissionApply,
@@ -88,6 +94,7 @@
         isRouterAlive: true,
         permissinApplyShow: false,
         routerKey: +new Date(),
+        apiUrl: `//${window.location.host}/notice/announcements/`,
         permissionData: {
           type: 'project', // 无权限类型: project、other
           permission: [],
@@ -95,6 +102,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       routerTable() {
         return this.$store.state.tableList;
       },
@@ -319,6 +329,9 @@
           clearInterval(this.$store.state.deployOrder.intervalInfo.timeOut);
         }
       },
+      handleNoticeChange(isShow) {
+        this.$store.commit('setNoticeShow', isShow);
+      },
     },
   };
 </script>
@@ -338,6 +351,18 @@
         width: 100%;
         .bk-navigation {
             min-width: 1366px;
+            &.show-notice {
+              height: calc(100vh - 40px);
+            //   overflow: hidden;
+              .bk-navigation-wrapper {
+                .container-content {
+                  max-height: calc(100vh - 92px) !important;
+                }
+                .nav-slider-list {
+                  height: calc(100vh - 148px) !important;
+                }
+              }
+            }
             .navigation-container {
                 max-width: unset!important;
             }
diff --git a/frontend/pc/src/store/index.js b/frontend/pc/src/store/index.js
index f3d7efbf7..808412e3e 100644
--- a/frontend/pc/src/store/index.js
+++ b/frontend/pc/src/store/index.js
@@ -123,6 +123,7 @@ export default new Vuex.Store({
   // 公共 store
   state: {
     language: "zh-cn",
+    showNotice: window.NOTICE_CENTER_SWITCH === 'on',
     // 任务执行后刷新任务记录列表
     taskHistoryRefresh: false,
     // 缓存人员选择器数据
@@ -272,6 +273,9 @@ export default new Vuex.Store({
     setLanguage(state, value) {
       state.language = value;
     },
+    setNoticeShow(state, value) {
+      state.showNotice = value;
+    },
     /**
      * 更新当前用户 user
      *
diff --git a/frontend/pc/src/views/home/index.vue b/frontend/pc/src/views/home/index.vue
index 5941f1966..a3ceb684e 100644
--- a/frontend/pc/src/views/home/index.vue
+++ b/frontend/pc/src/views/home/index.vue
@@ -22,7 +22,7 @@
 
 <template>
   <div class="home-page-wrapper">
-    <div class="home-page-view">
+    <div :class="['home-page-view', { 'show-notice': showNotice }]">
       <div class="home-background">
         <p class="welcome-tips">Hi，{{ userName }}，{{ $t(`m.home['欢迎使用流程服务！']`) }}</p>
       </div>
@@ -35,6 +35,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import ServiceList from './serviceList.vue';
   // import TicketTable from './ticketTable.vue';
   import CopyrightFooter from '@/components/common/layout/CopyrightFooter.vue';
@@ -51,11 +52,22 @@
         userName: window.username || '--',
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
   };
 </script>
 <style lang="scss" scoped>
     .home-page-view {
         min-height: calc(100vh - 52px);
+        &.show-notice {
+            min-height: calc(100vh - 92px);
+            .main-content {
+                min-height: calc(100vh - 287px);
+            }
+        }
     }
     .home-background {
         height: 160px;
diff --git a/frontend/pc/src/views/operation/home.vue b/frontend/pc/src/views/operation/home.vue
index 5e92aa7bb..db35879ac 100644
--- a/frontend/pc/src/views/operation/home.vue
+++ b/frontend/pc/src/views/operation/home.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="operation-home" ref="operationHome">
+  <div :class="['operation-home', { 'show-notice': showNotice }]" ref="operationHome">
     <div class="date-selector" :class="{ 'selector-fixed': isDateSelectorFixed }">
       <bk-date-picker
         type="daterange"
@@ -193,6 +193,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import dayjs from 'dayjs';
   import throttle from 'lodash/throttle';
   import SummaryCard from './components/summaryCard.vue';
@@ -492,6 +493,11 @@
         },
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
     created() {
       this.getSummaryData();
       this.getDetailData();
@@ -836,7 +842,8 @@
         this.getDetailData();
       },
       scrollHandler(e) {
-        this.isDateSelectorFixed = e.target.scrollTop > 150;
+        const gap = this.showNotice ? 110 : 150;
+        this.isDateSelectorFixed = e.target.scrollTop > gap;
       },
       handleServiceSearch(val) {
         this.serviceSearchStr = val || undefined;
@@ -913,6 +920,11 @@
     .operation-home {
         position: relative;
         padding: 20px 20px 60px;
+        &.show-notice {
+          .date-selector.selector-fixed {
+              top: 92px;
+          }
+        }
     }
     .date-selector {
         position: absolute;
diff --git a/frontend/pc/src/views/operation/service.vue b/frontend/pc/src/views/operation/service.vue
index 63455b9cd..3dfd9ea63 100644
--- a/frontend/pc/src/views/operation/service.vue
+++ b/frontend/pc/src/views/operation/service.vue
@@ -44,7 +44,7 @@
         </bk-select>
       </div>
     </div>
-    <div class="section-content">
+    <div :class="['section-content', { 'show-notice': showNotice }]">
       <div class="date-selector" :class="{ 'selector-fixed': isDateSelectorFixed }">
         <bk-date-picker
           type="daterange"
@@ -119,6 +119,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import dayjs from 'dayjs';
   import throttle from 'lodash/throttle';
   import SummaryCard from './components/summaryCard.vue';
@@ -295,6 +296,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       serviceName() {
         const service = this.serviceList.find(item => item.id === this.serviceId);
         return service ? service.name : '--';
@@ -454,7 +458,8 @@
         this.getDetailData();
       },
       scrollHandler(e) {
-        this.isDateSelectorFixed = e.target.scrollTop > 150;
+        const gap = this.showNotice ? 110 : 150;
+        this.isDateSelectorFixed = e.target.scrollTop > gap;
       },
       onAddedTicketDimensionChange(val) {
         this.addedTicketChartDismension = val;
@@ -514,7 +519,13 @@
         position: relative;
         height: calc(100vh - 104px );
         padding: 20px 20px 60px;
-        overflow: auto
+        overflow: auto;
+        &.show-notice {
+          height: calc(100vh - 144px );
+          .date-selector.selector-fixed {
+            top: 102px;
+          }
+        }
     }
     .date-selector {
         position: absolute;
diff --git a/frontend/pc/src/views/project/index.vue b/frontend/pc/src/views/project/index.vue
index f8dc14b4a..57de0bcd2 100644
--- a/frontend/pc/src/views/project/index.vue
+++ b/frontend/pc/src/views/project/index.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="project-page" v-bkloading="{ isLoading: projectDetailLoading }">
+  <div :class="['project-page', { 'show-notice': showNotice }]" v-bkloading="{ isLoading: projectDetailLoading }">
     <router-view v-if="$store.state.project.id && !projectDetailLoading"></router-view>
   </div>
 </template>
@@ -41,6 +41,7 @@
     computed: {
       ...mapState({
         projectListLoading: state => state.project.projectListLoading,
+        showNotice: state => state.showNotice,
       }),
     },
     watch: {
@@ -96,5 +97,8 @@
 <style lang="scss" scoped>
     .project-page {
         height: calc(100vh - 52px);
+        &.show-notice {
+            height: calc(100vh - 92px);
+        }
     }
 </style>
diff --git a/frontend/pc/src/views/service/editService/ServiceFormStep.vue b/frontend/pc/src/views/service/editService/ServiceFormStep.vue
index 089784044..f4152a462 100644
--- a/frontend/pc/src/views/service/editService/ServiceFormStep.vue
+++ b/frontend/pc/src/views/service/editService/ServiceFormStep.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="service-form" :class="{ 'hide-field-option': !showFieldOption }">
+  <div class="service-form" :class="{ 'show-notice': showNotice, 'hide-field-option': !showFieldOption }">
     <!-- 字段选择 -->
     <div :class="['field-option', isShowField ? 'field-hide' : '']">
       <div style="overflow: hidden; height: 100%;">
@@ -184,6 +184,7 @@
 </template>
 
 <script>
+  import { mapState } from 'vuex';
   import { errorHandler } from '../../../utils/errorHandler.js';
   import commonMix from '../../commonMix/common.js';
   import { deepClone } from '../../../utils/util.js';
@@ -292,6 +293,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       catalogDisplayName() {
         return this.serviceInfo.bounded_catalogs ? this.serviceInfo.bounded_catalogs.join('/') : '';
       },
@@ -844,6 +848,12 @@
             width: 100%;
         }
     }
+    &.show-notice {
+        height: calc(100vh - 204px);
+        .field-option {
+            height: calc(100vh - 204px);
+        }
+    }
     .field-hide {
         border-right: 0px solid #dde4eb !important;
         width: 0 !important;
diff --git a/frontend/pc/src/views/service/editService/index.vue b/frontend/pc/src/views/service/editService/index.vue
index 8e5029567..3c777b213 100644
--- a/frontend/pc/src/views/service/editService/index.vue
+++ b/frontend/pc/src/views/service/editService/index.vue
@@ -46,7 +46,7 @@
                 @step-changed="onStepChange">
             </bk-steps>
         </div> -->
-    <div :class="['steps-content', { 'steps-content-height': isShowNodeConfig }]" v-bkloading="{ isLoading: serviceLoading || flowInfoLoading }">
+    <div :class="['steps-content', { 'show-notice': showNotice, 'steps-content-height': isShowNodeConfig }]" v-bkloading="{ isLoading: serviceLoading || flowInfoLoading }">
       <template v-if="!serviceLoading && !flowInfoLoading">
         <service-form-step v-if="currStep === 1"
           ref="serviceFormStep"
@@ -93,6 +93,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import NavTitle from '@/components/common/layout/NavTitle';
   import ServiceFormStep from './ServiceFormStep.vue';
   import ServiceProcessStep from './ServiceProcessStep.vue';
@@ -132,6 +133,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       currStep() {
         const routeMap = ['basic', 'process', 'setting'];
         const index = routeMap.indexOf(this.step);
@@ -338,6 +342,9 @@
     height: calc(100vh - 164px);
     overflow: auto;
     @include scroller;
+    &.show-notice {
+        height: calc(100vh - 204px);
+    }
 }
 .steps-content-height {
     height: calc(100vh - 165px);
diff --git a/frontend/pc/src/views/service/serviceList.vue b/frontend/pc/src/views/service/serviceList.vue
index a9ac197bf..311a836a0 100644
--- a/frontend/pc/src/views/service/serviceList.vue
+++ b/frontend/pc/src/views/service/serviceList.vue
@@ -23,7 +23,7 @@
 <template>
   <div>
     <nav-title :title-name="$t(`m.serviceConfig['服务']`)"></nav-title>
-    <div class="page-content">
+    <div :class="['page-content', { 'show-notice': showNotice }]">
       <!-- btn -->
       <div :class="['service-left', isHiddenDirectory ? 'hide' : '']">
         <tree-info ref="dirTree" :tree-info="treeInfo" :dir-list="dirList"></tree-info>
@@ -395,6 +395,7 @@
 
 <script>
   import axios from 'axios';
+  import { mapState } from 'vuex';
   import NavTitle from '@/components/common/layout/NavTitle';
   import searchInfo from '../commonComponent/searchInfo/searchInfo.vue';
   import permission from '@/mixins/permission.js';
@@ -560,6 +561,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       openFunction() {
         return this.$store.state.openFunction;
       },
@@ -1156,6 +1160,9 @@
     height: calc(100vh - 104px);
     overflow: auto;
     @include scroller;
+    &.show-notice {
+        height: calc(100vh - 144px);
+    }
     .service-left {
         position: relative;
         height: 100%;
diff --git a/frontend/pc/src/views/service/sla/index.vue b/frontend/pc/src/views/service/sla/index.vue
index 0aca59aab..d58d93477 100644
--- a/frontend/pc/src/views/service/sla/index.vue
+++ b/frontend/pc/src/views/service/sla/index.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="project-sla-agreement">
+  <div :class="['project-sla-agreement', { 'show-notice': showNotice }]">
     <!-- title -->
     <div class="is-title">
       <p class="bk-come-back" @click="goToServiceList">
@@ -214,6 +214,7 @@
 
 <script>
   import axios from 'axios';
+  import { mapState } from 'vuex';
   import secondFlow from './slaJsflowCanvas/secondFlow.vue';
   import commonMix from '../../commonMix/common.js';
   import { ProcessTools } from '@/utils/process.js';
@@ -287,6 +288,9 @@
       };
     },
     computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
       getTransitionLines() {
         return {
           from_state: this.agreementEditData.start_node_id,
@@ -599,6 +603,9 @@
 
     .project-sla-agreement {
         height: calc(100vh - 52px);
+        &.show-notice {
+            height: calc(100vh - 92px);
+        }
     }
     .bk-loading /deep/.bk-spin-loading {
         width: 16px;
diff --git a/frontend/pc/src/views/ticket/CreateTicket.vue b/frontend/pc/src/views/ticket/CreateTicket.vue
index b93c0cb72..9c799e387 100644
--- a/frontend/pc/src/views/ticket/CreateTicket.vue
+++ b/frontend/pc/src/views/ticket/CreateTicket.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="create-ticket-page">
+  <div :class="['create-ticket-page', { 'show-notice': showNotice }]">
     <nav-title :show-icon="true"
       :title-name="$t(`m.navigation['提单']`)"
       @goBack="onBackIconClick">
@@ -162,6 +162,7 @@
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import NavTitle from '@/components/common/layout/NavTitle';
   import apiFieldsWatchMixin from '@/views/commonMix/api_fields_watch.js';
   import FieldInfo from '@/views/managePage/billCom/fieldInfo.vue';
@@ -210,6 +211,11 @@
         isShowTemplateList: false,
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
     watch: {
       '$route'() {
         this.reload();
@@ -553,6 +559,13 @@
 </script>
 <style lang="scss" scoped>
 @import '../../scss/mixins/scroller.scss';
+.create-ticket-page {
+    &.show-notice {
+        .create-ticket-body {
+            height: calc(100vh - 148px);
+        }
+    }
+}
 .create-ticket-body {
     margin: 2px 0;
     padding: 20px;
diff --git a/frontend/pc/src/views/ticket/allTicket/index.vue b/frontend/pc/src/views/ticket/allTicket/index.vue
index 223853ee9..f187742f8 100644
--- a/frontend/pc/src/views/ticket/allTicket/index.vue
+++ b/frontend/pc/src/views/ticket/allTicket/index.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-  <div class="all-ticket-page">
+  <div :class="['all-ticket-page', { 'show-notice': showNotice }]">
     <div class="ticket-tab">
       <nav-title :title-name="titleName"></nav-title>
       <div class="ticket-content">
@@ -73,6 +73,7 @@
 </template>
 <!-- 自定义tab 选择服务目录是只能选择下级目录 -->
 <script>
+  import { mapState } from 'vuex';
   import NavTitle from '@/components/common/layout/NavTitle';
   import AdvancedSearch from '@/components/form/advancedSearch/NewAdvancedSearch';
   import TableContent from './tableContent';
@@ -203,6 +204,11 @@
         listError: false,
       };
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
     created() {
       this.initData();
     },
@@ -353,6 +359,11 @@
 .all-ticket-page {
   height: 100%;
   background: #fafbfd;
+  &.show-notice {
+    .ticket-content {
+      height: calc(100vh - 186px);
+    }
+  }
   /deep/ .bk-tab-section {
     padding: 0;
     background-color: #f5f7fa;
diff --git a/frontend/pc/src/views/workbench/AllTicket.vue b/frontend/pc/src/views/workbench/AllTicket.vue
index a026522d7..b29fcd5a4 100644
--- a/frontend/pc/src/views/workbench/AllTicket.vue
+++ b/frontend/pc/src/views/workbench/AllTicket.vue
@@ -21,11 +21,12 @@
   -->
 
 <template>
-  <div class="all-ticket-page">
+  <div :class="['all-ticket-page', { 'show-notice': showNotice }]">
     <all-ticket-list from="allUserTicket"></all-ticket-list>
   </div>
 </template>
 <script>
+  import { mapState } from 'vuex';
   import AllTicketList from '../ticket/allTicket/index';
 
   export default {
@@ -33,10 +34,18 @@
     components: {
       AllTicketList,
     },
+    computed: {
+      ...mapState({
+        showNotice: state => state.showNotice,
+      }),
+    },
   };
 </script>
 <style lang="scss" scoped>
     .all-ticket-page {
         height: calc(100vh - 52px);
+        &.show-notice {
+            height: calc(100vh - 92px);
+        }
     }
 </style>