fashion-ssr-vue3/components/business/category/headerBanner.vue

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { getBannerDataApi } from '~/api/model/common'

const props = defineProps({
  slug: {
    type: String,
    default: '',
  },
})

const userStore = useUserStore()
const { isLogin } = storeToRefs(userStore)
const dynamicImg = ref('')
const bannerTitle = ref('')
const subTitle = ref('')
watch(() => props.slug, async (val: any) => {
  const data: any = await getBannerDataApi({ slug: val })
  dynamicImg.value = data.bannerImg
  bannerTitle.value = data.contentTitle
  subTitle.value = data.subhead
}, {
  immediate: true,
})
</script>

<template>
  <div class="">
    <el-skeleton :loading="!dynamicImg" class="w-full h-[400px]" animated>
      <template #template>
        <el-skeleton-item variant="h3" class="w-full !h-[400px]" />
      </template>
      <template #default>
        <img :src="dynamicImg" class="w-full h-[400px] object-cover" alt="" srcset="">
      </template>
    </el-skeleton>
    <div class="pos-absolute top-[50%] left-[50%]  translate-x-[-50%]   translate-y-[-50%] w-1400px mx-auto">
      <h1 class="!mb-20px text-#333333 text-40px fw-700 custom-title-font">
        {{ bannerTitle }}
      </h1>
      <div class="mb-20px text-#999999 w-800px">
        {{ subTitle }}
      </div>
      <el-button v-if="!isLogin" type="primary" plain class="w-160px !bg-#C58C64 !text-#fff !h-40px !text-16px !fw-500 !b-rd-150px">
        <nuxt-link to="/register">
          Shop on EJET
        </nuxt-link>
      </el-button>
    </div>
  </div>
</template>

<style lang='less' scoped>
</style>