|
|
@ -1,22 +1,22 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div :class="`we-icon-tile ${theme}`">
|
|
|
|
<div :class="`we-icon-tile `">
|
|
|
|
<div class="static-content WM-Block WM-Align-C Relative"
|
|
|
|
<div :class="`static-content ${theme}`" :style="'height: '+height+'px;'">
|
|
|
|
:style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+height+'px;'">
|
|
|
|
|
|
|
|
<div class="Content">
|
|
|
|
<div class="Content">
|
|
|
|
<v-icon>WMi-{{ icon }}</v-icon>
|
|
|
|
<v-icon>WMi-{{ icon }}</v-icon>
|
|
|
|
<div class="info">
|
|
|
|
<div class="info">
|
|
|
|
<div class="Fa"> {{ TitleFa }} </div>
|
|
|
|
<div class="Fa" v-html="TitleFa"></div>
|
|
|
|
<div class="En"> {{ TitleEn }} </div>
|
|
|
|
<div class="En" v-html="TitleEn"></div>
|
|
|
|
<div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
|
|
|
|
<div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="Quantity != ''" class="quantity" >
|
|
|
|
<div v-if="Quantity != ''" class="quantity" >
|
|
|
|
<div class="label top Fa"> {{ QuantityTopLabel }} </div>
|
|
|
|
<div class="label top Fa"> {{ QuantityTopLabel }} </div>
|
|
|
|
<div class="number En Bold">{{ Quantity }}</div>
|
|
|
|
<div class="number En Bold">{{ Quantity }}</div>
|
|
|
|
<div class="label bottom Fa"> {{ QuantityBottomLabel }} </div>
|
|
|
|
<div class="label bottom Fa"> {{ QuantityBottomLabel }} </div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
@ -66,6 +66,71 @@ export default {
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
/* Qunatity :: End*/
|
|
|
|
|
|
|
|
/*---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@import "resources/js/Global/scss/_vars.scss";
|
|
|
|
|
|
|
|
@each $color,
|
|
|
|
|
|
|
|
$value in $colors {
|
|
|
|
|
|
|
|
.static-content.theme-#{$color} .v-icon {
|
|
|
|
|
|
|
|
color: $value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.static-content.theme-#{$color} .info {
|
|
|
|
|
|
|
|
color: $value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.bg-grad-black {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-black), #000);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-cyan {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-cyan), #308e95);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-cyan {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #ecfcfd, #c4f3f7);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-orange {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-orange), #e45a47);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-orange {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #ffe2de, #ffeae7);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-brown {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-brown), #6f4a30);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-brown {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #ffddc5, #ffefe4);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-blue {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-blue), #5ab2ed);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-blue {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #e4f4ff, #b0dfff);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-red {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-red), #e15066);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-red {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #ffdede, #ffe8eb);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-purple {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-purple), #e15066);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-purple {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #fff0f8, #fff3f9);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-gray {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, var(--color-light-gray), #eaeaea);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.bg-grad-light-gold {
|
|
|
|
|
|
|
|
background-image: linear-gradient(to right, #ffebb0, #fff3cf);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.we-icon-tile {
|
|
|
|
.we-icon-tile {
|
|
|
|
width:100%;
|
|
|
|
width:100%;
|
|
|
|
padding: 5px;
|
|
|
|
padding: 5px;
|
|
|
@ -84,6 +149,14 @@ export default {
|
|
|
|
.we-icon-tile .static-content {
|
|
|
|
.we-icon-tile .static-content {
|
|
|
|
transition: 0.5s;
|
|
|
|
transition: 0.5s;
|
|
|
|
direction: rtl;
|
|
|
|
direction: rtl;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.we-icon-tile:hover .static-content {
|
|
|
|
.we-icon-tile:hover .static-content {
|
|
|
|
-webkit-filter: grayscale(100%);
|
|
|
|
-webkit-filter: grayscale(100%);
|
|
|
@ -100,12 +173,7 @@ export default {
|
|
|
|
border-radius: 5px;
|
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.static-content {
|
|
|
|
.static-content.content-right {
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.we-icon-tile.content-right .static-content {
|
|
|
|
|
|
|
|
justify-content: right;
|
|
|
|
justify-content: right;
|
|
|
|
padding-right: 50px;
|
|
|
|
padding-right: 50px;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -215,6 +283,12 @@ export default {
|
|
|
|
transition-delay: 0.58s;
|
|
|
|
transition-delay: 0.58s;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.static-content.theme-white .quantity .number,
|
|
|
|
|
|
|
|
.static-content.theme-white .quantity .label.bottom,
|
|
|
|
|
|
|
|
.static-content.theme-white .quantity .label.top {
|
|
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.we-icon-tile.sm .info .En {
|
|
|
|
.we-icon-tile.sm .info .En {
|
|
|
|
font-size: 10px;
|
|
|
|
font-size: 10px;
|
|
|
@ -226,20 +300,7 @@ export default {
|
|
|
|
font-size: 20px;
|
|
|
|
font-size: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
/* Qunatity :: End*/
|
|
|
|
|
|
|
|
/*---------------------------------------------------------------*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@import "resources/js/Global/scss/_vars.scss";
|
|
|
|
|
|
|
|
@each $color,
|
|
|
|
|
|
|
|
$value in $colors {
|
|
|
|
|
|
|
|
.we-icon-tile.theme-#{$color} .v-icon {
|
|
|
|
|
|
|
|
color: $value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.we-icon-tile.theme-#{$color} .info {
|
|
|
|
|
|
|
|
color: $value;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|