案例页面完成

src/components/ExampleItem.vue

@@ -1,25 +1,101 @@
 <template>
 <div id="passageroot" class="pageroot">
-  <div class="pagebanner" id="passagebanner">
+  <div id="passagebanner" class="pagebanner">
-    <div id="bannercontent"
+    <div id="bannercontentfill" class="pagebanner"
          style="width: 100%;height: 100%;
          background-color: rgba(0,0,0,0.5);">
-
+      <div class="bannercontent">
+        <span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
+        <span class="banner1">{{this.psginfo.projectname_cn}}</span>
+      </div>
     </div>
   </div>
 </div>
 </template>
 
 <script>
+import axios from 'axios';
 export default {
-  name: "ExampleItem"
+  name: "ExampleItem",
+  data(){
+    return{
+      psginfos:[],
+      psginfo:null,
+      error:null,
+      isLoading: false,
+      cmsroot: 'http://cms.yangprivate.site'
+    }
+  },
+  methods:{
+    fetchpsginfos:function (){
+      this.isLoading=true;
+      this.error=null;
+      const params = new URLSearchParams(window.location.search);
+      const pageid = params.get('id');
+      axios.get('/api/examples?populate=*&filters[id]='+pageid)
+          .then(response =>{
+            const resp = response.data;
+            if(resp.meta.pagination.total==0){
+              window.location.href = '/Err404';
+            }
+            if (resp && Array.isArray(resp.data)) {
+              this.psginfos = resp.data;
+              if(this.psginfos.length==0){
+                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 + "')";
+                }
+              }
+            } else {
+              this.error = "返回的 JSON 对象中不存在 'data' 数组";
+            }
+          })
+          .catch(err => {
+            this.error = '请求失败，请稍后重试';
+          })
+          .finally(() => {
+            this.isLoading = false;
+          });
+      if(this.error!=null){
+        window.location.href = '/Err404';
+      }else{
+
+      }
+    }
+  },
+  created() {
+    // 获取 id 参数
+    const params = new URLSearchParams(window.location.search);
+    const id = params.get('id');
+    if (!id) {
+      window.location.href = '/Err404';
+    }
+    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;
+  }
 }
 </script>
 
 <style scoped lang="scss">
 @import "src/publicstyle.scss";
 
-#passageroot{
+#passagebanner{
   @include media-breakpoint-between(xs, md) {
     background-image: url('/ExamplesRes/Examplesbanner_wep.png');
   }

src/components/Examples.vue

@@ -8,8 +8,7 @@
     </div>
     <div v-if="this.error==null" id="examplelist">
       <div id="typegrid">
-        <router-link to="/Examples"
+        <router-link to="/Examples" style="text-decoration: none;">
-                     :style="$route.fullPath === `/Examples` ? { color: 'red' } : {}" style="text-decoration: none;">
           <div class="typebar"
                :class="{
                 active: (!$route.query.type || $route.query.type === '')}">
@@ -20,9 +19,31 @@
                      :key="index":to="`/Examples?type=${item}`"
            style="text-decoration: none;">
           <div class="typebar"
-               :class="{ active: $route.fullPath === `/Examples?type=${item}` }">{{item}}</div>
+               :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>
@@ -64,10 +85,40 @@ export default {
           .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;
+      }
+      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>
@@ -85,8 +136,58 @@ export default {
   }
 }
 
+#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%;
+  //width: 100%;
   background-color: white;
   @include media-breakpoint-between(xs, md) {
     padding-top: 64px;
@@ -97,19 +198,8 @@ export default {
     padding-top: 80px;
     padding-bottom: 77px;
   }
-
+  margin-left: 0;
-  @include media-breakpoint-between(xs, md) {
+  margin-right: 0;
-    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 {
@@ -124,6 +214,19 @@ export default {
     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{
@@ -158,4 +261,39 @@ export default {
   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>

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="border: 1px solid #000000;">
+        <div class="fwfwlogoimdiv">
           <img src="/HomepageRes/fwfw/cptycx.png"/>
         </div>
         <div class="fwfwitemcontent">