diff --git a/src/components/ExampleItem.vue b/src/components/ExampleItem.vue
index 46cbad8..4dcf29c 100644
--- a/src/components/ExampleItem.vue
+++ b/src/components/ExampleItem.vue
@@ -1,73 +1,6 @@
-<!--<script setup>-->
-<!--import { useBootstrapBreakpoint } from './useBreakpoint.js';-->
-<!--const { breakpoint } = useBootstrapBreakpoint();-->
-<!--</script>-->
-
-<template>
-<div id="passageroot" class="pageroot" v-if="psginfo">
-  <div id="passagebanner" class="pagebanner">
-    <img :src="`https://cms.yangprivate.site${psginfo.headimage.formats.large.url}`"
-         alt="" id="bannerimg"/>
-    <div id="bannercontentfill"
-         style="width: 100%;height: 100%;
-         background-color: rgba(0,0,0,0.5);">
-      <div class="bannercontent" id="currentbanner">
-        <span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
-        <span class="banner1">{{this.psginfo.projectname_cn}}</span>
-        <div style="margin-bottom: 0;
-                    width: 100%;
-                    margin-top:
-                    auto;bottom: 0;
-                    color: darkgray">
-<!--          <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="wepbar">-->
-<!--            <span class="engtitle">-->
-<!--              <strong>{{this.psginfo.brandname_en}}</strong>-->
-<!--            </span>-->
-<!--            <span class="engproject">-->
-<!--              {{this.psginfo.projectname_en}}-->
-<!--            </span>-->
-<!--            <span style="width: 100%"></span>-->
-<!--            <span class="code">-->
-<!--              {{this.psginfo.projectcode}}-->
-<!--            </span>-->
-<!--          </div>-->
-          <br/>
-          <div id="pcbar">
-            <span class="engtitle">
-              <strong>{{this.psginfo.brandname_en}}</strong>
-            </span>
-            <span class="engproject">
-              {{this.psginfo.projectname_en}}
-            </span>
-            <span style="width: 100%"></span>
-            <span class="code">
-              {{this.psginfo.projectcode}}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="normalcontentdiv">
-    <span class="normalcontenttitle">
-      项目概况
-    </span>
-    <span class="normalcontenttext">
-      {{psginfo.content}}
-    </span>
-  </div>
-  <div id="imglist">
-    <div v-for="(item, index) in psginfo.images" :key="index"
-         class="imglistitem"
-          style="width: 100%; height: auto;">
-      <img :src="`https://cms.yangprivate.site${item.formats.medium.url}`" alt="" />
-    </div>
-  </div>
-</div>
-</template>
-
 <script>
 import axios from 'axios';
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
 export default {
   name: "ExampleItem",
   data(){
@@ -79,6 +12,12 @@ export default {
       cmsroot: 'https://cms.yangprivate.site'
     }
   },
+  setup() {
+    // 在setup中使用组合式API
+    const { breakpoint } = useBootstrapBreakpoint();
+
+    return { breakpoint }; // 返回breakpoint使其成为组件实例的一部分
+  },
   methods:{
     fetchpsginfos:function (){
       this.isLoading=true;
@@ -133,6 +72,59 @@ export default {
 }
 </script>
 
+<template>
+  <div id="passageroot" class="pageroot" v-if="psginfo">
+    <div id="passagebanner" class="pagebanner">
+      <img :src="`https://cms.yangprivate.site${psginfo.mobileheadimage.formats.large.url}`"
+           v-if="breakpoint==='xs'||breakpoint==='sm'"   alt="" id="bannerimg"/>
+      <img :src="`https://cms.yangprivate.site${psginfo.headimage.formats.large.url}`"
+           v-else  alt="" id="bannerimg"/>
+      <div id="bannercontentfill"
+           style="width: 100%;height: 100%;
+         background-color: rgba(0,0,0,0.5);">
+        <div class="bannercontent" id="currentbanner">
+          <span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
+          <span class="banner1">{{this.psginfo.projectname_cn}}</span>
+          <div style="margin-bottom: 0;
+                    width: 100%;
+                    margin-top:
+                    auto;bottom: 0;
+                    color: darkgray">
+            <br/>
+            <div id="pcbar">
+            <span class="engtitle">
+              <strong>{{this.psginfo.brandname_en}}</strong>
+            </span>
+              <span class="engproject">
+              {{this.psginfo.projectname_en}}
+            </span>
+              <span style="width: 100%"></span>
+              <span class="code">
+              {{this.psginfo.projectcode}}
+            </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="normalcontentdiv">
+    <span class="normalcontenttitle">
+      项目概况
+    </span>
+      <span class="normalcontenttext">
+      {{psginfo.content}}
+    </span>
+    </div>
+    <div id="imglist">
+      <div v-for="(item, index) in psginfo.images" :key="index"
+           class="imglistitem"
+           style="width: 100%; height: auto;">
+        <img :src="`https://cms.yangprivate.site${item.formats.medium.url}`" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
 <style scoped lang="scss">
 @import "src/publicstyle.scss";