|
@@ -1,22 +1,44 @@
|
|
|
<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="">
|
|
|
- <svgo-trend v-if="icon === '0'" class="!w-20px !h-20px" />
|
|
|
- <svgo-tech v-if="icon === '1'" class="!w-20px !h-20px" />
|
|
|
- <svgo-lifeStyle v-if="icon === '2'" class="!w-20px !h-20px" />
|
|
|
- <svgo-stationery v-if="icon === '3'" class="!w-20px !h-20px" />
|
|
|
- <svgo-fashion v-if="icon === '4'" class="!w-20px !h-20px" />
|
|
|
- <svgo-gifts v-if="icon === '5'" class="!w-20px !h-20px" />
|
|
|
- <svgo-creative v-if="icon === '6'" class="!w-20px !h-20px" />
|
|
|
- <svgo-beauty v-if="icon === '7'" class="!w-20px !h-20px" />
|
|
|
+ <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>
|
|
|
|