fashion-ssr-vue3/pages/trends.vue

<script lang='ts' setup>
</script>

<template>
  <div class="bg-#0F0820">
    <div class="header w-1200-auto flex items-center  h-600px  bg-no-repeat bg-center" style="background-image: url('https://picsum.photos/600/600')">
      <div class="pos-relative">
        <h1 class="text-58px fw-800 text-#fff ls-2 custom-title-font">
          Stay Ahead with
        </h1>
        <h1 class="text-58px fw-800 text-#fff ls-2  custom-title-font">
          Trendy Products!
        </h1>
        <el-button class="mt-65px !bg-#878490 !text-#fff !bg-#878490 !w-160px !h-40px !b-#fff !b-rd-200px" round>
          Contact US
        </el-button>
        <div
          class="pos-absolute top--16px text-center right--60px w-150px py-8px bg-#FFFF66 b-rd-20px transform-rotate-16deg"
        >
          #Trendy Product
        </div>
      </div>
    </div>
    <business-trends />
    <business-categories-block />
    <common-block-blog />
    <common-block-faq />
    <AppFooter />
  </div>
</template>

<style lang='less' scoped>
.header{
  background-position-x: right;
}
</style>