fashion-ssr-vue3/components/common/navigation/icon-group.vue

<script lang='ts' setup>
import trend from '@/assets/images/category/normal/trend.png'
import tech from '@/assets/images/category/normal/tech.png'
import lifeStyle from '@/assets/images/category/normal/lifestyle.png'
import stationery from '@/assets/images/category/normal/stationery.png'
import fashion from '@/assets/images/category/normal/fashion.png'
import gifts from '@/assets/images/category/normal/gifts.png'
import homeDecor from '@/assets/images/category/normal/home_decor.png'
import health from '@/assets/images/category/normal/health.png'

import trendActive from '@/assets/images/category/active/trend_active.png'
import techActive from '@/assets/images/category/active/tech_active.png'
import lifeStyleActive from '@/assets/images/category/active/lifestyle_active.png'
import stationeryActive from '@/assets/images/category/active/stationery_active.png'
import fashionActive from '@/assets/images/category/active/fashion_active.png'
import giftsActive from '@/assets/images/category/active/gifts_active.png'
import homeDecorActive from '@/assets/images/category/active/home_decor_active.png'
import healthActive from '@/assets/images/category/active/health_active.png'

defineProps({
  icon: {
    type: String,
    default: '',
  },
  active: {
    type: String,
    default: '',
  },
})
</script>

<template>
  <div class="">
    <img v-if="icon === '0'" :src="active === 'trend' ? trendActive : trend" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '1'" :src="active === 'tech' ? techActive : tech" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '2'" :src="active === 'lifestyle' ? lifeStyleActive : lifeStyle" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '3'" :src="active === 'stationery' ? stationeryActive : stationery" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '4'" :src="active === 'fashion' ? fashionActive : fashion" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '5'" :src="active === 'gifts' ? giftsActive : gifts" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '6'" :src="active === 'home_decor' ? homeDecorActive : homeDecor" alt="" class="!w-20px !h-20px">
    <img v-if="icon === '7'" :src="active === 'health' ? healthActive : health" alt="" class="!w-20px !h-20px">
  </div>
</template>

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