/home/henzagold/site/components/ Current File: //home/henzagold/site/components/Product.vue
<template>
  <!-- Product Start -->
  <div :class="['product',list ? 'product-list': null ]" style="position: relative">
    <div
      class="border-[1.3px] border-solid border-red-600 rounded-[6px] h-[27px] w-[60px] flex items-center justify-center text-red-600 absolute left-[30px] <!--top-[42px]--> z-10 text-[12px]"
      v-if="showBeforePrice">تخفیف
    </div>
<!--    <div
      class="bg-neutral-100 rounded-[6px] h-[27px] h-[30px] w-[60px] flex items-center justify-center text-secondary absolute left-[10px] z-10 text-[10px]">
      {{
      selectVariant.qty > 0
      ?
        'آماده ارسال'
        :
        'پیش سفارش'
      }}
    </div>-->
    <div class="product-thumbnail _product-hover" style="text-align: center;">

      <a :href="link" target="_blank" class="no-back">

        <img :src="thumb" :alt="title" :class="['_product-img left-0 right-0',secendrayImage!=null ? '_primary-image':'']">
        <img v-if="secendrayImage" :alt="title" :src="secendrayImage" class="_product-img _secondary-img">
      </a>
      <div class="product-badges">
        <!--<span class="product-badge featured">
         <i>
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" />
          </svg>
         </i>
        </span>-->
        <!-- <span class="product-badge stock">ناموجود</span>-->
        <!-- <span class="product-badge sale">حراج ویژه</span>-->
        <!--<span class="product-badge rent"> On Sale </span>-->
      </div>
      <div class="product-controls" v-if="wishList">
        <a href="#" @click.prevent="pin" class="favorite">
          <svg v-if="isInWishList" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
            <path fill="currentColor"
                  d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
          </svg>

          <svg v-else xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px">
            <path fill="currentColor"
                  d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/>
          </svg>
        </a>
        <!--  <a href="#" class="favorite" data-toggle="tooltip" title="افزودن به علاقه مندی">&lt;!&ndash;<i class="far fa-heart"></i>&ndash;&gt;
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="currentColor" d="M12.1,18.55L12,18.65L11.89,18.55C7.14,14.24 4,11.39 4,8.5C4,6.5 5.5,5 7.5,5C9.04,5 10.54,6 11.07,7.36H12.93C13.46,6 14.96,5 16.5,5C18.5,5 20,6.5 20,8.5C20,11.39 16.86,14.24 12.1,18.55M16.5,3C14.76,3 13.09,3.81 12,5.08C10.91,3.81 9.24,3 7.5,3C4.42,3 2,5.41 2,8.5C2,12.27 5.4,15.36 10.55,20.03L12,21.35L13.45,20.03C18.6,15.36 22,12.27 22,8.5C22,5.41 19.58,3 16.5,3Z" />
            </svg>
          </a>-->
        <!--  <a href="#" class="compare" data-toggle="tooltip" title="مقایسه">&lt;!&ndash;&gt;<i class="fas fa-sync-alt"></i>&ndash;&gt;
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
              <path fill="currentColor" d="M9 14H2V16H9V19L13 15L9 11V14M15 13V10H22V8H15V5L11 9L15 13Z" />
            </svg>
          </a>-->
        <!--<a href="#" data-toggle="modal" data-target="#quickViewModal" class="quick-view"  >&lt;!&ndash;<i class="fas fa-eye"></i>&ndash;&gt;
          <svg style="width:24px;height:24px" viewBox="0 0 24 24" data-toggle="tooltip" title="مشاهده سریع">
            <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
          </svg>
        </a>-->
      </div>
    </div>
    <div class="product-body">
      <div class="row  center">
        <h5 class="product-title col-lg-12 col-xs-12 " style="display:inline-block;">
          <a :href="link" target="_blank" :title="title">{{ title }}</a>
        </h5>
        <div class="acr-rating col-lg-12 col-xs-12" style="float: left">
          <rating/>
          <!-- <i class="fas fa-star active"></i>
           <i class="fas fa-star active"></i>
           <i class="fas fa-star active"></i>
           <i class="fas fa-star active"></i>
           <i class="fas fa-star-half-alt active"></i>-->
        </div>
      </div>
      <div class="row center">
        <div class="col-lg-12 col-md-12" v-if="showBeforePrice">
         <span style="text-decoration: line-through;">
           <span class="product-price-discount">{{ mainPrice | priceUnit }}</span>
         </span>
        </div>
        <div class="col-lg-12 col-md-12" v-else>&nbsp;</div>
        <div class="col-lg-12 col-md-12">
          <span class="product-price">{{ price | priceUnit }}</span>
        </div>
        <div class="col-lg-12 col-md-12">
        </div>
      </div>
      <div class="product-gallery-wrapper center" style="margin-top:1rem">
<!--        <p style="color:#1c2d56;font-size:1.25rem" v-if="defaultVaraint.qty==0 && defaultVaraint.is_pre_order==false">
          ناموجود</p>
        <a @click.prevent="addToCart()" href="" class="btn-custom btn-sm secondary"
           v-else>{{ defaultVaraint.qty > 0 ? 'افزودن به سبد خرید' : 'سفارش ساخت' }}</a>-->
        <a :href="link" class="btn-custom btn-sm secondary" target="_blank">مشاهده محصول</a>
<!--        <a :href="link" class="btn-custom btn-sm secondary h-[40px] !flex justify-center items-center" target="_blank">مشاهده محصول</a>-->
      </div>
    </div>
  </div>
  <!-- Product End -->
</template>

<script>
import Rating from "./Rating";
import product from "../mixin/product";
//import NumberInput from "../components/NumberInput";
export default {
  name: "Product",
  components: {
    Rating,
    //NumberInput
  },
  mixins: [product],
}
</script>

<style scoped>

._product-img {
  width: 190px;
  height: 190px;
  object-fit: scale-down;
}

._product-hover:hover > a img._primary-image {
  opacity: 0;
  transition: all 0.5s ease-in-out;

}

._product-hover:hover > a img._secondary-img {
  opacity: 1;
  transition: all 1.5s ease-in-out;


}


._primary-image {
  position: absolute;

  opacity: 1;
  transition: all 1s ease-in-out;


}

._secondary-img {


  opacity: 0;
  transition: all 2s ease-in-out;

  /* display: none;*/
  /*opacity: 0;*/
  /*transition: opacity 1s ease-in-out;*/
  /*transition: all 2s ease-in-out;*/
}

.no-back {
  background: none !important;
}
</style>