kdofficial/src/components/ExamplesContent.vue

<template>
<!--<div class="pageroot" style="background-color: white;">-->
  <div v-if="this.error==null" id="examplelist">
    <div id="typegrid">
      <a href="/Examples" style="text-decoration: none;">
        <div class="typebar"
             :class="{
                active: (!$route.query.type || $route.query.type === '')}">
          全部
        </div>
      </a>
      <a v-for="(item, index) in this.types"
                   :key="index":href="`/Examples?type=${item}`"
                   style="text-decoration: none;">
        <div class="typebar"
             :class="{ active: ($route.query.type === item)}">
          {{item}}
        </div>
      </a>
    </div>
    <!--列表-->
    <div id="listmain">
      <a
          v-for="item in titles"
          :key="item.id"
          :href="`/ExampleItem?id=${item.id}`"
      >
        <div class="listblock">
          <img :src="`https://cms.yangprivate.site${item.headimage.formats.thumbnail.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",
  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');
      console.log('type!',type);
      let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage&sort=createdAt:desc';
      if(type){
        console.log('type!',type);
        reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage&filters[example_type]='+type+'&sort=createdAt:desc';
      }
      if (this.$route.name != 'Examples'){
        let reqarg='/api/examples?fields=id,brandname_cn,projectname_cn&populate=headimage&pagination[page]=1&pagination[pageSize]=5&sort=createdAt:desc';
      }
      axios.get(reqarg)
          .then(response =>{
            const resp = response.data;
            if(resp.meta.pagination.pageCount==0){
              window.location.href = '/Examples';
              console.log('turn');
            }
            if (resp && Array.isArray(resp.data)) {
              this.titles = resp.data;
              console.log('reqarg',reqarg);
              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;

  @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>