From 0c2ba9e3aa9740e8b09b6c1bf5956b2906fbb886 Mon Sep 17 00:00:00 2001 From: oat_dev Date: Mon, 10 Jun 2024 17:42:37 +0700 Subject: [PATCH] feat: add product card UI --- public/product-group.png | Bin 0 -> 9230 bytes public/product-type.png | Bin 0 -> 962 bytes .../NewProductCardComponent.vue | 43 ++++++++++++++++++ .../ProductCardComponent.vue | 2 +- src/pages/04_product-service/MainPage.vue | 10 +++- 5 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 public/product-group.png create mode 100644 public/product-type.png create mode 100644 src/components/04_product-service/NewProductCardComponent.vue diff --git a/public/product-group.png b/public/product-group.png new file mode 100644 index 0000000000000000000000000000000000000000..f2def1eb9b76361e3abdfecd5b8a9d99b4f55df2 GIT binary patch literal 9230 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 literal 0 HcmV?d00001 diff --git a/src/components/04_product-service/NewProductCardComponent.vue b/src/components/04_product-service/NewProductCardComponent.vue new file mode 100644 index 00000000..4e287db0 --- /dev/null +++ b/src/components/04_product-service/NewProductCardComponent.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue index c350916a..f2a6fa31 100644 --- a/src/components/04_product-service/ProductCardComponent.vue +++ b/src/components/04_product-service/ProductCardComponent.vue @@ -12,7 +12,7 @@ withDefaults( date?: Date; }>(), { - color: 'var(--brand-2)', + color: 'var(--brand-1)', }, ); diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue index c32b785a..fd741438 100644 --- a/src/pages/04_product-service/MainPage.vue +++ b/src/pages/04_product-service/MainPage.vue @@ -3,11 +3,11 @@ import { ref } from 'vue'; import AppBox from 'components/app/AppBox.vue'; import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue'; import StatCard from 'components/StatCardComponent.vue'; - +import NewProductCardCompoent from 'components/04_product-service/NewProductCardComponent.vue'; const cardData = ref({ title: 'งาน MCU', subtitle: 'G00000000001', - color: 'var(--brand-2)', + color: 'var(--pink-6)', status: true, date: new Date(), }); @@ -95,6 +95,12 @@ const inputSearch = ref(''); :color="cardData.color" /> +
+ +