Creazione tabella Product

src/components/CProductCard/CProductCard.scss

@@ -0,0 +1,3 @@
+.card .product-image {
+  height: 300px;
+}

src/components/CProductCard/CProductCard.ts

@@ -0,0 +1,21 @@
+import { Component, Prop, Watch } from 'vue-property-decorator'
+import { tools } from '../../store/Modules/tools'
+import MixinBase from '@src/mixins/mixin-base'
+import { CTitleBanner } from '@components'
+import { CCardState } from '../CCardState'
+import { GlobalStore } from '../../store'
+import { CCopyBtn } from '../CCopyBtn'
+
+import { date } from 'quasar'
+import { IProduct } from '@src/model'
+
+@Component({
+  name: 'CProductCard',
+  components: { CTitleBanner, CCardState, CCopyBtn }
+})
+
+export default class CProductCard extends MixinBase {
+  @Prop({ required: true }) public product: IProduct
+  public $t
+
+}

src/components/CProductCard/CProductCard.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="q-pa-md row items-start q-gutter-md">
+
+      <q-card class="my-card">
+        <q-img :src="`statics/` + product.img">
+        </q-img>
+
+        <q-card-section>
+          <q-btn
+            fab
+            color="primary"
+            icon="fas fa-cart-plus"
+            class="absolute"
+            style="top: 0; right: 12px; transform: translateY(-50%);"
+          />
+
+          <div class="row no-wrap items-center">
+            <div class="col text-h6 ellipsis">
+              {{ product.name }}
+            </div>
+            <div class="col-auto text-grey text-caption q-pt-md row no-wrap items-center">
+              <q-icon name="place"/>
+              250 ft
+            </div>
+          </div>
+
+          <q-rating v-model="stars" :max="5" size="32px"/>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+          <div class="text-subtitle1">
+            € {{ product.price }}
+          </div>
+          <div class="text-caption text-grey">
+            {{ product.description }}
+          </div>
+        </q-card-section>
+
+        <q-separator/>
+
+        <q-card-actions>
+          <q-btn flat round icon="event"/>
+          <q-btn flat color="primary">
+            Aggiungi al Carrello
+          </q-btn>
+        </q-card-actions>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./CProductCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CProductCard.scss';
+</style>

src/components/CProductCard/index.ts

@@ -0,0 +1 @@
+export {default as CProductCard} from './CProductCard.vue'