diff --git a/src/components/Examples.vue b/src/components/Examples.vue
index a733543..2cf97cb 100644
--- a/src/components/Examples.vue
+++ b/src/components/Examples.vue
@@ -1,3 +1,7 @@
+<script setup>
+import ExamplesContent from './ExamplesContent.vue';
+</script>
+
 <template>
   <div class="pageroot" id="examplesprocessroot">
     <div id="examplesprocessbanner" class="pagebanner">
@@ -6,45 +10,7 @@
         <span class="banner2">实现业务增长和竞争力提升</span>
       </div>
     </div>
-    <div v-if="this.error==null" id="examplelist">
-      <div id="typegrid">
-        <router-link to="/Examples" 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 id="listmain">
-        <a
-            v-for="item in titles"
-            :key="item.id"
-            :href="`/ExampleItem?id=${item.id}`"
-        >
-        <div class="listblock">
-          <img :src="`http://cms.yangprivate.site${item.headimage.formats.large.url}`" alt="" />
-          <div class="itemtext">
-            <span class="upspan">
-              {{item.brandname_cn}}
-            </span>
-            <span class="downspan">
-              {{item.projectname_cn}}
-            </span>
-          </div>
-        </div>
-        </a>
-      </div>
-    </div>
+    <ExamplesContent></ExamplesContent>
   </div>
 </template>
 
diff --git a/src/components/ExamplesContent.vue b/src/components/ExamplesContent.vue
index 7debef8..720162d 100644
--- a/src/components/ExamplesContent.vue
+++ b/src/components/ExamplesContent.vue
@@ -1,14 +1,286 @@
 <template>
-<div class="pageroot" style="background-color: white;"></div>
+<!--<div class="pageroot" style="background-color: white;">-->
+  <div v-if="this.error==null" id="examplelist">
+    <div id="typegrid">
+      <router-link to="/Examples" 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 id="listmain">
+      <a
+          v-for="item in titles"
+          :key="item.id"
+          :href="`/ExampleItem?id=${item.id}`"
+      >
+        <div class="listblock">
+          <img :src="`http://cms.yangprivate.site${item.headimage.formats.large.url}`" alt="" />
+          <div class="itemtext">
+            <span class="upspan">
+              {{item.brandname_cn}}
+            </span>
+            <span class="downspan">
+              {{item.projectname_cn}}
+            </span>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+<!--</div>-->
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
-  name: "ExamplesContent"
+  name: "ExamplesContent",
+  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;
+          });
+    },
+    fetch_items:function(){
+      this.isLoading=true;
+      this.error=null;
+      const params = new URLSearchParams(window.location.search);
+      const type = params.get('type');
+      let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage';
+      if(type){
+        reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage&filters[example_type]='+type;
+      }
+      if (this.$route.name != 'Examples'){
+        let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage&pagination[page]=1&pagination[pageSize]=5';
+      }
+      axios.get(reqarg)
+          .then(response =>{
+            const resp = response.data;
+            if (resp && Array.isArray(resp.data)) {
+              this.titles = resp.data;
+              if(this.titles.length==0){
+                this.error = "返回的 JSON 对象中不存在 'data' 数组";
+              }
+            } else {
+              this.error = "返回的 JSON 对象中不存在 'data' 数组";
+            }
+          })
+          .catch(err => {
+            console.error(err);
+            this.error = '请求失败，请稍后重试';
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+    }
+  },
+  mounted() {
+    this.fetch_types();
+    this.fetch_items();
+  }
 }
 </script>
 
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
+#listmain{
+  display: grid;
+  @include media-breakpoint-between(xs, md) {
+    margin-top: 48px;
+    grid-template-columns: repeat(1,1fr);
+    gap: 12px;
+  }
+  @include media-breakpoint-up(md) {
+    margin-top: 72px;
+    grid-template-columns: repeat(2,1fr);
+    gap: 24px;
+  }
 
+  @include media-breakpoint-between(xs, md) {
+    margin-left: 32px;
+    margin-right: 32px;
+  }
+  @include media-breakpoint-between(md,xxl){
+    margin-left: 100px;
+    margin-right: 100px;
+  }
+  @include media-breakpoint-up(xxl) {
+    margin-left: 256px;
+    margin-right: 256px;
+  }
+}
+.listblock{
+  position: relative;
+  aspect-ratio: 1.563;
+  @include media-breakpoint-up(md) {
+  }
+}
+.listblock img {
+  z-index: 0;
+  @include media-breakpoint-between(xs, md){
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+  @include media-breakpoint-up(md) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+    display: block;
+  }
+}
+
+#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;
+  }
+  margin-left: 0;
+  margin-right: 0;
+}
+
+#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;
+  }
+
+  @include media-breakpoint-between(xs, md) {
+    margin-left: 32px;
+    margin-right: 32px;
+  }
+  @include media-breakpoint-between(md,xxl){
+    margin-left: 100px;
+    margin-right: 100px;
+  }
+  @include media-breakpoint-up(xxl) {
+    margin-left: 256px;
+    margin-right: 256px;
+  }
+}
+
+.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;
+}
+
+.itemtext{
+  position: absolute;
+  margin-left: 20px;
+  left:0;
+  margin-right: auto;
+  margin-bottom: 20px;
+  bottom: 0;
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 2;
+}
+.upspan{
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 24px;
+  font-family: PingFangSC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 33px;
+}
+.downspan{
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+  font-size: 16px;
+  font-family: PingFangSC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 22px;
+  margin-top: 2px;
+}
 </style>