From d06bf47f45fe15da8e01be2bd29e85d590044999 Mon Sep 17 00:00:00 2001
From: zhcnyuyang <yyydm@qq.com>
Date: Sun, 11 May 2025 15:32:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E7=BB=88=E4=B8=8A=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ExampleItem.vue | 88 +++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/src/components/ExampleItem.vue b/src/components/ExampleItem.vue
index 61e1ba1..9f8aa40 100644
--- a/src/components/ExampleItem.vue
+++ b/src/components/ExampleItem.vue
@@ -1,10 +1,10 @@
-<script setup>
-import { useBootstrapBreakpoint } from './useBreakpoint.js';
-const { breakpoint } = useBootstrapBreakpoint();
-</script>
+<!--<script setup>-->
+<!--import { useBootstrapBreakpoint } from './useBreakpoint.js';-->
+<!--const { breakpoint } = useBootstrapBreakpoint();-->
+<!--</script>-->
 
 <template>
-<div id="passageroot" class="pageroot">
+<div id="passageroot" class="pageroot" v-if="psginfo">
   <div id="passagebanner" class="pagebanner">
     <img :src="`http://cms.yangprivate.site${psginfo.headimage.formats.large.url}`"
          alt="" id="bannerimg"/>
@@ -19,14 +19,23 @@ const { breakpoint } = useBootstrapBreakpoint();
                     margin-top:
                     auto;bottom: 0;
                     color: darkgray">
-          <div v-if="breakpoint==='xs'||breakpoint==='sm'" id="wepbar">
-
-          </div>
-          <div v-else id="pcbar">
+<!--          <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>
-            &nbsp;
             <span class="engproject">
               {{this.psginfo.projectname_en}}
             </span>
@@ -88,13 +97,8 @@ export default {
                 this.error = "返回的 JSON 对象中不存在 'data' 数组";
               }else{
                 this.psginfo=this.psginfos[0];
-                let bannerpath=this.cmsroot+this.psginfo.headimage.formats.large.url;
-                // let bannerpath=this.psginfo.headimage.formats.large.url;
-                if(bannerpath!=null)
-                {
-                  console.log('bannerpath:', bannerpath);
-                  document.getElementById('passagebanner').style.backgroundImage = "url('" + bannerpath + "')";
-                }
+                let newtitle=this.psginfo.brandname_cn+this.psginfo.projectname_cn+'-开动文化科技（北京）有限公司';
+                document.title=newtitle;
               }
             } else {
               this.error = "返回的 JSON 对象中不存在 'data' 数组";
@@ -123,15 +127,8 @@ export default {
     this.fetchpsginfos();
   },
   mounted() {
-    let bannerpath=this.cmsroot+this.psginfo.headimage.formats.large.url;
-    // let bannerpath=this.psginfo.headimage.formats.large.url;
-    if(bannerpath!=null)
-    {
-      console.log('bannerpath:', bannerpath);
-      document.getElementById('passagebanner').style.backgroundImage = "url('" + bannerpath + "')";
-    }
-    let newtitle=this.psginfo.brandname_cn+this.psginfo.projectname_cn+'-开动文化科技（北京）有限公司';
-    document.title=newtitle;
+    // let newtitle=this.psginfo.brandname_cn+this.psginfo.projectname_cn+'-开动文化科技（北京）有限公司';
+    // document.title=newtitle;
   }
 }
 </script>
@@ -148,22 +145,35 @@ export default {
 }
 
 #wepbar{
-  display: flex;
-  flex-direction: column;
+
 }
 
 #pcbar{
-  display: flex;
-  flex-direction: row;
-  span{
-    overflow-wrap: break-word;
-    color: rgba(255, 255, 255, 1);
-    font-size: 36px;
-    font-family: DINPro-Light;
-    font-weight: 300;
-    text-align: left;
-    white-space: nowrap;
-    line-height: 40px;
+  @include media-breakpoint-between(xs, md) {
+    display: flex;
+    flex-direction: column;
+    span{
+      overflow-wrap: break-word;
+      font-size: 16px;
+      font-family: DINPro-Light;
+      font-weight: 300;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 20px;
+    }
+  }
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-direction: column;
+    span {
+      overflow-wrap: break-word;
+      font-size: 36px;
+      font-family: DINPro-Light;
+      font-weight: 300;
+      text-align: left;
+      white-space: nowrap;
+      line-height: 40px;
+    }
   }
 }