ShowEasyFrontEnd/FrontEnd/components/home/ExhibitionStrategy.vue

<template>
    <section class="xl:tw-max-w-[1246px] xl:tw-mx-auto col-span-4-bg tw-px-[30px] xl:tw-px-[60px] tw-py-[50px] md:tw-py-[70px]">
      <div class="tw-flex tw-justify-center tw-w-full tw-leading-10 tw-pb-[50px]">
        <img class="tw-h-[32px] tw-w-[32px] md:tw-h-[42px] xl:tw-h-[48px] md:tw-w-[42px] xl:tw-w-[48px]" :src="require('~/assets/img/edit.png')">
        <div class="tw-text-xl md:tw-text-3xl xl:tw-text-4xl tw-text-center tw-pt-[3px] tw-font-black xl:tw-font-black md:tw-font-black">{{ $t("Blog") }}</div>
      </div>
      <div class="tw-grid tw-grid-cols-1 tw-gap-[30px] md:tw-gap-[40px] xl:tw-grid-cols-2 xl:tw-mx-auto">
        <div class="tw-flex tw-justify-center">
          <div class="tw-flex tw-justify-center tw-w-1/3 md:tw-w-3/7 xl:tw-w-4/5">
            <img class="tw-self-center" src="~/assets/img/strategy.png">
          </div>
        </div>
        <div>
          <div v-for="(item,index) in strategyList" :key="index" class="tw-py-[15px] tw-w-full tw-border-0 tw-border-b-2 tw-border-neutrals-300 tw-border-dashed">
            <a :href="item.url" target="_blank" class="tw-relative tw-w-full tw-h-full tw-text-left tw-content-center">
              <h3
                class="t14 tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden md:t16 xl:t18 md:tw-line-clamp-none md:tw-h-full md:tw-mt-0 xl:tw-line-clamp-2 tw-font-black xl:tw-font-black md:tw-font-black">
                {{ item.title }}
              </h3>
              <div class="t10 md:t12 xl:t14 tw-text-neutrals-400 md:tw-block tw-my-[15px]">
                {{ item.date}}
              </div>
              <p class="tw-line-clamp-2 tw-text-ellipsis tw-overflow-hidden t12 md:t14 xl:t16 tw-text-neutrals-600">
                {{ item.content}}
              </p>
            </a>
          </div>
        </div>
      </div>
    </section>
  </template>
  
  <script>
  export default {
    props: {
      strategyList: {
        type: Array,
      },
      title: {
        type: String,
      },
    },
    created() {
      if (this.$props.strategyList.length > 3) {
        this.$props.strategyList = this.$props.strategyList.slice(0, 3);
      }
    },
  };
  </script>
  <style lang="scss" scoped>
  .col-span-4-bg{
    background-image: radial-gradient(circle at 118% 118%, rgba(250, 174, 105, 0.15), rgba(250, 174, 105, 0.01) 89%);
  }
  </style>