- caaloghi, categorie

src/components/CPrice/CPrice.scss

@@ -0,0 +1,103 @@
+.prod_price {
+    font-size: 1.1rem;
+    font-style: bold;
+
+    @media (max-width: 718px) {
+        font-size: 1rem;
+    }
+}
+
+.prod_sale_price {
+    font-size: 1.10rem;
+    font-style: bold;
+
+    @media (max-width: 718px) {
+        font-size: 1.05rem;
+    }
+}
+
+.prod_off_price {
+    font-size: 1rem;
+
+    @media (max-width: 718px) {
+        font-size: 0.85rem;
+    }
+
+    color: gray;
+    text-decoration: line-through;
+    padding-left: 8px;
+}
+
+/* ******** */
+.a-price {
+    text-decoration: none;
+    position: relative;
+    line-height: normal
+}
+
+.a-price[data-a-strike=true]:after {
+    border-top: .1rem solid;
+    position: absolute;
+    content: "";
+    right: 0;
+    top: 50%;
+    left: 0
+}
+
+.a-price .a-price-fraction+.a-price-symbol {
+    left: .2em
+}
+
+.a-price .a-offscreen {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+
+.a-price[data-a-size=mini][data-a-strike=true],.a-price[data-a-size="s"][data-a-strike=true],.a-price[data-a-size="b"][data-a-strike=true] {
+    display: inline-block;
+    text-decoration: inherit
+}
+
+.a-price[data-a-color=base] {
+    color: #0F1111
+}
+
+.a-price[data-a-color=price] {
+    color: #B12704
+}
+
+.a-price[data-a-color=secondary] {
+    color: #565959
+}
+
+.a-price[data-a-color=tertiary] {
+    color: #767676
+}
+
+.a-price[data-a-size$=plus] .a-price-fraction,.a-price[data-a-size$=plus] .a-price-symbol,.a-price[data-a-size$=l] .a-price-fraction,.a-price[data-a-size$=l] .a-price-symbol {
+    position: relative
+}
+
+.a-price[data-a-size$=plus] .a-price-decimal,.a-price[data-a-size$=l] .a-price-decimal {
+    position: absolute;
+    opacity: 0
+}
+
+.a-price[data-a-size=l] {
+    font-size: 1.3rem
+}
+
+.a-price[data-a-size=l] .a-price-symbol {    
+    font-size: 1.1rem
+}
+
+.a-price[data-a-size=l] .a-price-fraction {
+    top: -.5em;
+    font-size: 0.8rem
+}
+
+.a-text-price {
+    color: inherit
+}

src/components/CPrice/CPrice.ts

@@ -0,0 +1,37 @@
+import { defineComponent, onMounted, ref, toRef, watch } from 'vue'
+import { tools } from '@store/Modules/tools'
+
+export default defineComponent({
+  name: 'CPrice',
+  props: {
+    sale_price: {
+      type: Number,
+    },
+    price: {
+      type: Number,
+    },
+    bold: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props) {
+
+    const real_price = ref(0)
+
+    onMounted(() => {
+
+      if (props.sale_price)
+        real_price.value = props.sale_price
+      else
+        real_price.value = props.price ? props.price : 0
+
+    })
+
+    return {
+      tools,
+      real_price,
+    }
+  },
+})

src/components/CPrice/CPrice.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="a-price" data-a-size="l" data-a-color="base">
+
+    <span aria-hidden="true" v-if="!!real_price">
+      <span class="a-price-whole">{{ tools.getIntPart(real_price) }}</span>
+      <span class="a-price-decimal">,</span>
+      <span class="a-price-fraction">{{
+        tools.getDecPart2Digit(real_price)
+      }}</span>
+      <span class="a-price-symbol">€</span>
+    </span>
+    
+  </span>
+  
+  <span v-if="!!sale_price && !bold" :class="sale_price ? 'prod_off_price' : ''" 
+    >{{ price ? price.toFixed(2) : 0 }} €
+  </span>
+</template>
+
+<script lang="ts" src="./CPrice.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CPrice.scss';
+</style>

src/components/CPrice/index.ts

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