fashion-ssr-vue3/pages/account/panel.vue

<!-- @format -->

<script lang="ts" setup>
import { getStaticDataApi } from '~/api/model/my'

const staticList = ref({
  wishOrderCount: 0,
  rfqCount: 0,
  merchandiseFavoriteCount: 0,
  brandFavoriteCount: 0,
})

async function getStaticData() {
  try {
    const data = await getStaticDataApi()
    staticList.value = data
  }
  catch (error) {
    console.log(error)
  }
}
getStaticData()
</script>

<template>
  <div class="">
    <div
      class="py-16px px-24px bg-#FAFAFA b-rd-10px text-#000 text-20px fw-500 mb-20px"
    >
      Dashboard
    </div>
    <div class="flex">
      <div class="flex-grow-1">
        <div class="mb-20px bg-#FAFAFA b-rd-10px py-40px flex">
          <div
            class="text-center py-15px w-30% pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE"
          >
            <div class="mb-4px fw-500 text-40px text-#AB7045">
              {{ staticList.rfqCount }}
            </div>
            <div class="text-#999">
              Cart
            </div>
          </div>
          <div
            class="text-center py-15px w-30% pos-relative after:pos-absolute after:content-empty after:right-0 after:top-0 after:bottom-0 after:w-1px after:bg-#EEEEEE"
          >
            <div class="mb-4px fw-500 text-40px text-#AB7045">
              {{ staticList.wishOrderCount }}
            </div>
            <div class="text-#999">
              Orders
            </div>
          </div>
          <div class="text-center w-60% py-15px">
            <div class="flex text-#36363D justify-center mb-14px">
              <div class="mr-30px">
                <span class="fw-500 text-40px text-#AB7045 mr-4px">{{ staticList.merchandiseFavoriteCount }}</span>
                Products
              </div>
              <div>
                <span class="fw-500 text-40px text-#AB7045 mr-4px">{{ staticList.brandFavoriteCount }}</span>
                Brands
              </div>
            </div>
            <div class="text-#999">
              Favorites
            </div>
          </div>
        </div>
        <div class="bg-#FAFAFA b-rd-10px pt-18px pb-52px px-24px">
          <div class="text-18px fw-500 text-#36363D mb-24px">
            Brands
          </div>
          <business-account-panel-swiper-brands />
        </div>
      </div>
      <div class="w-410px ml-20px bg-#FAFAFA b-rd-10px">
        <business-account-notification />
      </div>
    </div>
    <div class="bg-#FAFAFA b-rd-10px mt-20px p-20px pb-30px">
      <div class="text-18px fw-500 text-#36363D mb-24px">
        Recommended
      </div>
      <business-account-panel-swiper-recommend />
    </div>
  </div>
</template>

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