kdofficial/src/components/ExampleItem.vue

<template>
<div id="passageroot" class="pageroot">
  <div id="passagebanner" class="pagebanner">
    <img :src="`http://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">
        <span class="banner2">{{this.psginfo.brandname_cn}}<br /></span>
        <span class="banner1">{{this.psginfo.projectname_cn}}</span>
      </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="`http://cms.yangprivate.site${item.formats.medium.url}`" alt="" />
    </div>
  </div>
</div>
</template>

<script>
import axios from 'axios';
export default {
  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";

#bannercontentfill{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#bannerimg{
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

#passagebanner{
  position: relative;
  @include media-breakpoint-between(xs, md) {
    background-image: url('/ExamplesRes/Examplesbanner_wep.png');
  }

  @include media-breakpoint-up(md) {
    background-image: url('/ExamplesRes/Examplesbanner.png');
  }
}

#imglist{
  display: flex;
  flex-direction: column;
  position: relative;
  height: auto;
  overflow:visible;
  @include media-breakpoint-between(xs, md) {
    margin-left: 32px;
    margin-right: 32px;
    margin-top: 32px;
    margin-bottom: 65px;
    //gap: 3px;
  }
  @include media-breakpoint-between(md,xxl){
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 80px;
    margin-bottom: 199px;
    //gap: 16px;
  }
  @include media-breakpoint-up(xxl) {
    margin-left: 256px;
    margin-right: 256px;
    margin-top: 80px;
    margin-bottom: 199px;
    //gap: 16px;
  }
}
.imglistitem img{
  width: 100%;
  height: auto;
  display: block;
}
</style>