diff --git a/.gitignore b/.gitignore
index 38adffa..173ff57 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+/.vs/
+/.vscode/
diff --git a/src/components/ExampleItem.vue b/src/components/ExampleItem.vue
new file mode 100644
index 0000000..c399b34
--- /dev/null
+++ b/src/components/ExampleItem.vue
@@ -0,0 +1,14 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "ExampleItem"
+}
+</script>
+
+<style scoped lang="scss">
+@import "src/publicstyle.scss";
+
+</style>
diff --git a/src/components/Examples.vue b/src/components/Examples.vue
index 19b25cf..284c49e 100644
--- a/src/components/Examples.vue
+++ b/src/components/Examples.vue
@@ -6,17 +6,69 @@
         <span class="banner2">实现业务增长和竞争力提升</span>
       </div>
     </div>
-    <div class="pageroot" style="padding-bottom: 20px">
-      <div class="normalcontentdiv">
-        <div class="normalcontenttext">敬请期待……</div>
+    <div v-if="this.error==null" id="examplelist">
+      <div id="typegrid">
+        <router-link to="/Examples"
+                     :style="$route.fullPath === `/Examples` ? { color: 'red' } : {}" style="text-decoration: none;">
+          <div class="typebar"
+               :class="{
+                active: (!$route.query.type || $route.query.type === '')}">
+            全部
+          </div>
+        </router-link>
+        <router-link v-for="(item, index) in this.types"
+                     :key="index":to="`/Examples?type=${item}`"
+           style="text-decoration: none;">
+          <div class="typebar"
+               :class="{ active: $route.fullPath === `/Examples?type=${item}` }">{{item}}</div>
+        </router-link>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
-  name: "Examples"
+  name: "Examples",
+  data(){
+    return{
+      types:[],
+      titles:[],
+      error:null,
+      isLoading: false
+    }
+  },
+  methods:{
+    fetch_types:function (){
+      this.isLoading = true;
+      this.error = null;
+      axios.get('/api/examples/distinct?field=example_type')
+          .then(response => {
+            const resp = response.data;
+            if (Array.isArray(resp)) {
+              this.types = resp;
+              if (this.types.length === 0) {
+                this.error = "返回的数组为空";
+              }
+            } else {
+              this.error = "返回的数据不是数组";
+              this.types = [];
+            }
+          })
+          .catch(err => {
+            console.error(err);
+            this.error = '请求失败，请稍后重试';
+            this.types = [];
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    }
+  },
+  mounted() {
+    this.fetch_types();
+  }
 }
 </script>
 
@@ -33,4 +85,77 @@ export default {
   }
 }
 
+#examplelist{
+  width: 100%;
+  background-color: white;
+  @include media-breakpoint-between(xs, md) {
+    padding-top: 64px;
+    padding-bottom: 32px;
+  }
+
+  @include media-breakpoint-up(md) {
+    padding-top: 80px;
+    padding-bottom: 77px;
+  }
+
+  @include media-breakpoint-between(xs, md) {
+    padding-left: 32px;
+    padding-right: 32px;
+  }
+  @include media-breakpoint-between(md,xxl){
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+  @include media-breakpoint-up(xxl) {
+    padding-left: 256px;
+    padding-right: 256px;
+  }
+}
+
+#typegrid {
+  display: grid;
+
+  @include media-breakpoint-between(xs, md) {
+    grid-template-columns: repeat(3,1fr) !important;
+    gap: 12px;
+  }
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: repeat(4,minmax(0,300px)) !important;
+    gap: 32px;
+  }
+}
+
+.typebar{
+  border: 1px solid #000000;//边框
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: black;
+  background-color: white;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  overflow-wrap: break-word;
+  text-align: left;
+  transition: background 0.5s, color 0.5s; /* 0.5秒渐变 */
+
+  @include media-breakpoint-between(xs, md) {
+    height: 44px;
+  }
+
+  @include media-breakpoint-up(md) {
+    height: 74px;
+    font-size: 24px;
+    //line-height: 48px;
+  }
+}
+.typebar:hover{
+  background-color: black;
+  color: white;
+}
+.typebar.active {
+  /* 选中高亮样式 */
+  background-color: black;
+  color: white;
+}
 </style>
diff --git a/src/components/Homepage.vue b/src/components/Homepage.vue
index bf3801b..5d38826 100644
--- a/src/components/Homepage.vue
+++ b/src/components/Homepage.vue
@@ -39,7 +39,7 @@ import Partners from './Tools/Partners.vue'
     </div>
     <div id="fwfwlogos">
       <div class="fwfwlogodiv" id="fwfwlogo01">
-        <div class="fwfwlogoimdiv">
+        <div class="border: 1px solid #000000;">
           <img src="/HomepageRes/fwfw/cptycx.png"/>
         </div>
         <div class="fwfwitemcontent">
diff --git a/vite.config.js b/vite.config.js
index fb2de3a..aab632f 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
   plugins: [vue()],
   server: {
     host: '0.0.0.0',
-    port: 8991
+    port: 3992
   },
   resolve: {
     alias: {