diff --git a/app/.vitepress/src/assets/banner-secondary.png b/app/.vitepress/src/assets/banner-secondary.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ad80ffd973cdb38116ece21ad7a6cb96bfa6ecb
Binary files /dev/null and b/app/.vitepress/src/assets/banner-secondary.png differ
diff --git a/app/.vitepress/src/assets/illustrations/404.png b/app/.vitepress/src/assets/illustrations/404.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89268c53b19b7a59843edbaf3267e3b3c034236
Binary files /dev/null and b/app/.vitepress/src/assets/illustrations/404.png differ
diff --git a/app/.vitepress/src/assets/illustrations/search.png b/app/.vitepress/src/assets/illustrations/search.png
new file mode 100644
index 0000000000000000000000000000000000000000..f104ab2b22a1b4347c7c409f1ee316d47f2eb295
Binary files /dev/null and b/app/.vitepress/src/assets/illustrations/search.png differ
diff --git a/app/.vitepress/src/components/AppBanner.vue b/app/.vitepress/src/components/AppBanner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00c4e48951dd705d2e077e711c28cecc45040718
--- /dev/null
+++ b/app/.vitepress/src/components/AppBanner.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, CSSProperties, defineProps } from 'vue';
+
+const props = defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+
+const rootStyle = computed(() => {
+  const result: CSSProperties = {};
+  if (props.backgroundImage) {
+    result.backgroundImage = `url(${props.backgroundImage})`;
+  }
+
+  if (props.backgroundColor) {
+    result.backgroundColor = props.backgroundColor;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div class="app-banner" :style="rootStyle">
+    <div class="wrap">
+      <h1>{{ title }}</h1>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-banner {
+  width: 100%;
+  min-height: 280px;
+  display: flex;
+  justify-content: space-between;
+  padding-top: 60px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: var(--o-color-brand);
+  .wrap {
+    max-width: 1504px;
+    padding: 0 44px;
+  }
+}
+</style>
diff --git a/app/.vitepress/src/components/BannerLevel2.vue b/app/.vitepress/src/components/BannerLevel2.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2742238f6533db4723037a214d80c94da32395c6
--- /dev/null
+++ b/app/.vitepress/src/components/BannerLevel2.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { computed, CSSProperties, defineProps } from 'vue';
+
+const props = defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  backgroundText: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+  illustration: {
+    type: String,
+    default: '',
+  },
+});
+
+const rootStyle = computed(() => {
+  const result: CSSProperties = {};
+  if (props.backgroundImage) {
+    result.backgroundImage = `url(${props.backgroundImage})`;
+  }
+
+  if (props.backgroundColor) {
+    result.backgroundColor = props.backgroundColor;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div class="banner-level2" :style="rootStyle">
+    <div class="wrap">
+      <div class="banner-text">
+        <p v-if="backgroundText" class="banner-text-bg">
+          {{ backgroundText }}
+        </p>
+        <h1 v-if="title" class="banner-title">{{ title }}</h1>
+        <p v-if="subtitle" class="banner-subtitle">{{ subtitle }}</p>
+      </div>
+      <div v-if="illustration" class="banner-illustration">
+        <img :src="illustration" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner-level2 {
+  width: 100%;
+  min-height: 280px;
+  padding-top: 50px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: var(--o-color-brand);
+  .wrap {
+    max-width: 1504px;
+    padding: 0 44px;
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    .banner-text {
+      position: relative;
+      padding-bottom: 20px;
+
+      .banner-text-bg {
+        position: absolute;
+        top: 10px;
+        color: #2e4fb0;
+        opacity: 0.8;
+        font-size: var(--o-font-size-h1);
+        line-height: var(--o-line-height-h1);
+        font-weight: bold;
+      }
+      .banner-title {
+        position: relative;
+        z-index: 1;
+        color: var(--o-color-text);
+        font-size: var(--o-font-size-h2);
+        line-height: var(--o-line-height-h2);
+        margin-top: var(--o-spacing-m);
+      }
+
+      .banner-subtitle {
+        position: relative;
+        z-index: 1;
+        color: var(--o-color-text);
+        font-size: var(--o-font-size-h6);
+        line-height: var(--o-line-height-h6);
+        margin-top: 6px;
+      }
+    }
+    .banner-illustration {
+    }
+  }
+}
+</style>
diff --git a/app/.vitepress/src/components/BannerLevel3.vue b/app/.vitepress/src/components/BannerLevel3.vue
new file mode 100644
index 0000000000000000000000000000000000000000..503f102f09ce949996d4a4cba44c611f44fa82d6
--- /dev/null
+++ b/app/.vitepress/src/components/BannerLevel3.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed, CSSProperties, defineProps } from 'vue';
+
+const props = defineProps({
+  backgroundImage: {
+    type: String,
+    default: '',
+  },
+  backgroundColor: {
+    type: String,
+    default: '',
+  },
+  backgroundText: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+});
+
+const rootStyle = computed(() => {
+  const result: CSSProperties = {};
+  if (props.backgroundImage) {
+    result.backgroundImage = `url(${props.backgroundImage})`;
+  }
+
+  if (props.backgroundColor) {
+    result.backgroundColor = props.backgroundColor;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div class="banner-level3" :style="rootStyle">
+    <div class="wrap">
+      <div class="banner-text">
+        <p v-if="backgroundText" class="banner-text-bg">
+          {{ backgroundText }}
+        </p>
+        <h1 v-if="title" class="banner-title">{{ title }}</h1>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.banner-level3 {
+  width: 100%;
+  min-height: 160px;
+  padding-top: 50px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: var(--o-color-brand);
+  .wrap {
+    max-width: 1504px;
+    padding: 0 44px;
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    .banner-text {
+      position: relative;
+      padding-bottom: 20px;
+
+      .banner-text-bg {
+        position: absolute;
+        color: #2e4fb0;
+        opacity: 0.8;
+        font-size: var(--o-font-size-h3);
+        line-height: var(--o-line-height-h3);
+        font-weight: bold;
+      }
+      .banner-title {
+        position: relative;
+        z-index: 1;
+        color: var(--o-color-text);
+        font-size: var(--o-font-size-h3);
+        line-height: var(--o-line-height-h3);
+        margin-top: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/app/.vitepress/src/shared/@types/interface.ts b/app/.vitepress/src/shared/@types/interface.ts
index 149822ca99bdfe0432e193e0a6e7fa1c2b56a913..2aecd104e18ed8baf51fb878118f5e435975af9d 100644
--- a/app/.vitepress/src/shared/@types/interface.ts
+++ b/app/.vitepress/src/shared/@types/interface.ts
@@ -1,4 +1,3 @@
-
 export interface NavItem {
   id: string;
   label: string;
diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index b86fe90e7f1be23a68b1496cac30ca2b2c9a91d0..ca16e0da44f2589c1b3c2d24e2a0f12c0b320dd5 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -1,42 +1,53 @@
 <script setup lang="ts">
-import { useData } from 'vitepress';
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { theme } = useData();
-const i18n = theme.value;
-const { t, locale } = useI18n();
-const home = computed(() => {
-  return { info: t('button1') };
-});
-
-const name = ref('');
-
-onMounted(() => {
-  window.addEventListener('click', () => {
-    locale.value = locale.value === 'zh' ? 'en' : 'zh';
-  });
-});
+import { ref } from 'vue';
+
+import BannerLevel2 from '@/components/BannerLevel2.vue';
+import BannerLevel3 from '@/components/BannerLevel3.vue';
+
+import banner from '@/assets/banner-secondary.png';
+import search from '@/assets/illustrations/search.png';
+
+const name = ref('zhangsan');
 </script>
+
 <template>
   <div class="demo">
-    <h1>{{ i18n.a }}</h1>
-    <h1>{{ home.info }}</h1>
-    <OButton>sss</OButton>
-    <!-- <ElInput /> -->
-    <h4>封装elementplus</h4>
+    <h4>BannerLevel2.vue</h4>
+    <BannerLevel2
+      :background-image="banner"
+      background-text="CONTENT"
+      title="SIG"
+      subtitle="SIG 就是 Special Interest Group 的缩写，openEuler 社区按照不同的 SIG 来组织"
+      :illustration="search"
+    />
+
+    <h4>BannerLevel3.vue</h4>
+    <BannerLevel3
+      :background-image="banner"
+      background-text="CONTENT"
+      title="下载"
+    />
+
+    <h4>OButton</h4>
+    <OButton>OButton</OButton>
+
+    <h4>封装elementplus OInput</h4>
     <OInput v-model="name"></OInput>
-    <h4>封装elementplus</h4>
-    <OCard header="b" shadow="hover"></OCard>
+
+    <h4>封装elementplus OCard</h4>
+    <OCard header="OCard" shadow="hover"></OCard>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .demo {
+  max-width: 1504px;
+  padding: 20px 44px;
   min-height: 800px;
 }
 
 h4 {
-  margin-top: 20px;
+  margin-top: 30px;
+  margin-bottom: 10px;
 }
 </style>
diff --git a/app/.vitepress/src/views/security/TheSafetyBulletin.vue b/app/.vitepress/src/views/security/TheSafetyBulletin.vue
index 82e1444864ad6ea5ce3f57648045ac73982ba1c4..d98f2e5f1bb7727b24f7a5ee3a73e880e31f329a 100644
--- a/app/.vitepress/src/views/security/TheSafetyBulletin.vue
+++ b/app/.vitepress/src/views/security/TheSafetyBulletin.vue
@@ -5,7 +5,7 @@ import type { TabsPaneContext } from 'element-plus';
 const activeName = ref('first');
 
 const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
+  alert(tab, event);
 };
 </script>