fashion-ssr-vue3/components/business/home/section01.vue

<script lang='ts' setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
</script>

<template>
  <div class="flex items-center justify-between mt-160px">
    <div class="w-550px mr-20px">
      <div class="mb-20px text-#666">
        EJET SELECTION
      </div>
      <h2 class="!mb-20px fw-600 text-48px text-#333 custom-title-font">
        Quality Wholesale, Inspiring Global Retail
      </h2>
      <div class="mb-30px text-#999 text-20px lh-36px">
        EJET Selection is one of the top wholesale marketplaces
        that connects independent retailers worldwide with premium Chinese manufacturing brands.
      </div>
      <div class="mb-40px text-#C58C64 underline cursor-pointer">
        <NuxtLink to="/about">
          Learn More
        </NuxtLink>
      </div>
      <div class="flex justify-between">
        <div class="w-20%">
          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
            2K +
          </div>
          <div class="text-24px lh-36px text-#666">
            Selected
            Brands
          </div>
        </div>
        <div class="custom-center w-40% pos-relative  pl-40px  ">
          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
            40k +
          </div>
          <div class="text-24px lh-36px text-#666">
            Independent
            Retailers
          </div>
        </div>
        <div class="w-28%">
          <div class="text-32px text-#5B463E lh-32px fw-500 mb-10px common-bold-font">
            100k +
          </div>
          <div class="text-24px lh-36px text-#666">
            Premium
            Products
          </div>
        </div>
      </div>
    </div>
    <div class="pos-relative">
      <img src="~/assets/images/section_img.png" class="w-750px h-524px" alt="top home decor wholesale marketplace" srcset="">
    </div>
  </div>
</template>

<style lang='less' scoped>
.custom-center{
    &::before{
        position: absolute;
        content: "";
        bottom: 0%;
        top: 0%;
        left: 0;
        width: 1px;
        background: #CC9879;
        border-radius: 2px;
    }
    &::after{
        position: absolute;
        content: "";
        bottom: 0%;
        top: 0%;
        right:0;
        width: 1px;
        background: #CC9879;
        border-radius: 2px;
    }
}
</style>