parent
992641c2c9
commit
92916e6575
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div :class="`we-quantity ${theme}`">
|
||||
<div class="icon"> <v-icon> WMi-{{icon}} </v-icon> </div>
|
||||
<div class="label Fa"> {{label}} <br> <span class="value Fa Bold"> {{value}} </span> </div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: { default: 'theme-red' },
|
||||
label: { default: " عنوان " },
|
||||
value: { default: " مقدار " },
|
||||
icon: { default: 'ok' },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
/*---------------------------------------------------------------*/
|
||||
/* Qunatity :: Begin*/
|
||||
/*---------------------------------------------------------------*/
|
||||
.we-quantity {
|
||||
transition: 0.2s;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.we-quantity .number {
|
||||
font-size: 60px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.we-quantity .icon .v-icon {
|
||||
font-size: 40px;
|
||||
margin-left: -5px;
|
||||
line-height: 45px;
|
||||
}
|
||||
.we-quantity .label {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
text-align: right;
|
||||
line-height: 16px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.we-quantity.sm .number {
|
||||
font-size: 50px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.we-quantity.sm .label {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
text-align: right;
|
||||
line-height: 14px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.we-quantity.xl .number {
|
||||
font-size: 70px;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.we-quantity.xl .label {
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
text-align: right;
|
||||
line-height: 18px;
|
||||
margin-right: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
|
||||
.we-quantity.variation {
|
||||
padding: 5px 10px;
|
||||
background-color: #eeeeee;
|
||||
border-radius: 3px;
|
||||
color: var(--color-store-order);
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------------------------------------*/
|
||||
/* Qunatity :: End*/
|
||||
/*---------------------------------------------------------------*/
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div :class="`name-block ${theme}`">
|
||||
<div v-if="number!=''" class="number En Bold"> {{ number }} </div>
|
||||
<div class="text">
|
||||
<div class="Fa"> {{ name_fa }} </div>
|
||||
<div v-if="name_en != ''" class="En"> {{ name_en }} </div>
|
||||
<div v-if="date != ''" class="Fa Thin date"> {{ date }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: { default: '' },
|
||||
number: { default: '' },
|
||||
name_fa: { default: 'نام فارسی' },
|
||||
name_en: { default: "" },
|
||||
date: { default: "" },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.name-block {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
align-items: center;
|
||||
}
|
||||
.name-block .En.number {
|
||||
font-size: 55px;
|
||||
line-height: 55px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.name-block .text {
|
||||
text-align: right;
|
||||
}
|
||||
.name-block .text .Fa {
|
||||
font-size: 22px;
|
||||
}
|
||||
.name-block .text .En {
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
margin-right: -5px;
|
||||
}
|
||||
.name-block .text .date {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Size MD */
|
||||
/*----------------------------------------------------*/
|
||||
.name-block.size-md {
|
||||
text-align:right;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.name-block.size-md .Fa {
|
||||
font-size: 18px;
|
||||
}
|
||||
.name-block.size-md .En {
|
||||
font-size: 10px;
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
color: #9a9a9a;
|
||||
margin-right: -3px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* number-absolute */
|
||||
/*----------------------------------------------------*/
|
||||
.name-block.number-absolute .number {
|
||||
position: absolute;
|
||||
bottom: -15px;
|
||||
right: 10px;
|
||||
font-size: 60px;
|
||||
opacity: 0.08;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Colors */
|
||||
/*----------------------------------------------------*/
|
||||
@import "resources/js/Global/scss/_vars.scss";
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.name-block.theme-#{$color} {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div :class="`we-number ${theme}`">
|
||||
<div class="number En Bold"> {{ number }} </div>
|
||||
<div class="label Fa" v-html="label"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: { default: '' },
|
||||
number: { default: '' },
|
||||
label: { default: 'آیتم' },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.we-number {
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.we-number .number {
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
.we-number .label {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Left Label */
|
||||
/*----------------------------------------------------*/
|
||||
.we-number.label-left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.we-number.label-left .label {
|
||||
font-size: 14px;
|
||||
opacity: 0.7;
|
||||
text-align: right;
|
||||
line-height: 16px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Lg Size */
|
||||
/*----------------------------------------------------*/
|
||||
/*--------------lg------------------------------------*/
|
||||
.we-number.lg .number {
|
||||
font-size: 60px;
|
||||
line-height: 45px;
|
||||
}
|
||||
/*--------------md------------------------------------*/
|
||||
.we-number.md .number {
|
||||
font-size: 50px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Colors */
|
||||
/*----------------------------------------------------*/
|
||||
@import "resources/js/Global/scss/_vars.scss";
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.we-number.bg-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div :class="`we-price ${theme}`">
|
||||
<div v-if="original_price != ''" class="discount">
|
||||
<div class="number-original En Bold" > {{ original_price }} </div>
|
||||
<div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
|
||||
</div>
|
||||
<div class="number En Bold"> {{ price }} </div>
|
||||
<div class="label Fa" v-html="label"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: { default: '' },
|
||||
original_price: { default: '' },
|
||||
price: { default: '1000' },
|
||||
label: { default: 'تومان' },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.we-price {
|
||||
transition: 0.2s;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
.we-price .number {
|
||||
font-size: 25px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.we-price .discount {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.we-price .discount .percent {
|
||||
background-color: var(--color-red);
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0px;
|
||||
padding: 0px 5px 0px 2px;
|
||||
color: var(--color-white);
|
||||
font-size: 14px;
|
||||
}
|
||||
.we-price .discount .percent .v-icon {
|
||||
margin-top: -3px;
|
||||
margin-right: -5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.we-price .number-original {
|
||||
font-size: 12px;
|
||||
line-height: 10px;
|
||||
color: var(--color-red);
|
||||
text-decoration: line-through;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.we-price .label {
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Misc */
|
||||
/*----------------------------------------------------*/
|
||||
.we-price.line-through .number {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.we-price.label-left {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Lg Size */
|
||||
/*----------------------------------------------------*/
|
||||
.we-price.lg .number {
|
||||
font-size: 32px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Colors */
|
||||
/*----------------------------------------------------*/
|
||||
@import "resources/js/Global/scss/_vars.scss";
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.we-price.bg-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<v-col :class="`section-title ${theme} `">
|
||||
<div class="content">
|
||||
<div class='step En Bold' v-text="number"></div>
|
||||
<div class="title">
|
||||
<div class="Fa" v-text="titleFa"></div>
|
||||
<div class="En" v-text="titleEn"></div>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "section-title-absolute",
|
||||
props: {
|
||||
theme: { default: "" },
|
||||
titleFa: { default: "عنوان بخش" },
|
||||
titleEn: { default: "Part Title" },
|
||||
color: { default: "cyan" },
|
||||
number: { default: "01" },
|
||||
},
|
||||
data: function () {
|
||||
return {}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/* --------------------------------------------------------
|
||||
SectionTitle :: Begin
|
||||
-------------------------------------------------------- */
|
||||
.section-title {
|
||||
padding: 10px;
|
||||
margin: -10px -10px -10px -10px;
|
||||
background-color: #fff9f8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
}
|
||||
.section-title .content {
|
||||
writing-mode: tb-rl;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.section-title .step {
|
||||
font-size: 50px;
|
||||
float: right;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.section-title .title {
|
||||
float: right;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.section-title .title .Fa {
|
||||
font-size: 20px;
|
||||
line-height: 1.2;
|
||||
margin-right: 5px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.section-title .title .En {
|
||||
font-size: 12px;
|
||||
letter-spacing: 5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div :class="`quantity-select ${theme}`">
|
||||
<v-icon color="cyan"> WMi-plus </v-icon>
|
||||
<div class="value En Bold"> {{ quantity }} <div class="unit Fa Thin"> {{ label }} </div> </div>
|
||||
<v-icon color="red"> WMi-minus </v-icon>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: { default: '' },
|
||||
quantity: { default: '' },
|
||||
label: { default: 'نام فارسی' },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.quantity-select {
|
||||
width: 100%;
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.quantity-select .v-icon {
|
||||
font-size: 30px;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
}
|
||||
.quantity-select .value {
|
||||
padding: 15px 0px 0px 0px;
|
||||
margin-top: 5px;
|
||||
font-size: 40px;
|
||||
color: var(--color-black);
|
||||
}
|
||||
.quantity-select .value .unit {
|
||||
font-size: 12px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.quantity-select .v-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div :class="`slide-button ${theme}`">
|
||||
<div class="overlay"></div>
|
||||
<div v-if="prepend_icon != ''" class="back-label">
|
||||
<v-icon>WMi-{{ prepend_icon }}</v-icon>
|
||||
</div>
|
||||
<div class="name">
|
||||
<div class="Fa"> {{ title_fa }} </div>
|
||||
<div class="En"> {{ title_en }} </div>
|
||||
</div>
|
||||
<div v-if="append_icon != ''" class="left-icon">
|
||||
<v-icon>WMi-{{ append_icon }}</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
theme: {default: 'theme-black'},
|
||||
prepend_icon: {default: ''},
|
||||
append_icon: {default: ''},
|
||||
title_fa: {default: 'عنوان دکمه'},
|
||||
title_en: {default: 'Button Title'},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.slide-button {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 5px 25px 5px 15px;
|
||||
min-width: 200px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition: all 1000ms;
|
||||
transition: all 1000ms;
|
||||
color: #383838;
|
||||
text-align: right;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.slide-button .back-label {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
}
|
||||
.slide-button .left-icon {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.slide-button .left-icon .v-icon, .slide-button .back-label .v-icon {
|
||||
font-size: 32px;
|
||||
color: var(--color-white);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.slide-button .name {
|
||||
color: var(--color-white);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.slide-button .name .Fa {
|
||||
font-size: 18px;
|
||||
}
|
||||
.slide-button .name .En {
|
||||
font-size: 12px;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.8;
|
||||
text-transform: uppercase;
|
||||
margin-right: -3px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.slide-button:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-black);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 100% 50%;
|
||||
transform-origin: 100% 50%;
|
||||
-webkit-transition-property: transform;
|
||||
transition-property: transform;
|
||||
-webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
|
||||
transition: 300ms cubic-bezier(1, 0, 0, 1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Colors */
|
||||
/*----------------------------------------------------*/
|
||||
@import "resources/js/Global/scss/_vars.scss";
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.slide-button.theme-#{$color} {
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
@each $shadow,
|
||||
$value in $Shadows {
|
||||
.slide-button.theme-#{$shadow} {
|
||||
-webkit-box-shadow: 0 10px 30px 0px $value;
|
||||
}
|
||||
}
|
||||
|
||||
/*----------------------------------------------------*/
|
||||
/* Hover State */
|
||||
/*----------------------------------------------------*/
|
||||
.slide-button:hover {
|
||||
-webkit-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2) !important;
|
||||
}
|
||||
.slide-button:hover:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.slide-button:hover .name {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.slide-button:hover .left-icon .v-icon, .slide-button:hover .back-label .v-icon {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<router-link :to="{ name: URL }" :class="`back-button fade-in fast theme-${theme} `" style="animation-delay: 0.1s;">
|
||||
<div class="tile" :style="'background-image: linear-gradient(to right, #'+gradientBegin+' , #'+gradientEnd+'); '">
|
||||
<v-icon> WMi-right-open</v-icon>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
s
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
URL: { default: "Home" },
|
||||
gradientBegin: { default: "eeeeee" },
|
||||
gradientEnd: { default: "dadada" },
|
||||
theme: { default: "light" },
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.back-button {
|
||||
display: block;
|
||||
width: 110px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
border: 1px solid transparent;
|
||||
transition: 0.2s;
|
||||
}
|
||||
.back-button:hover {
|
||||
border: 1px solid #6d6d6d;
|
||||
border-radius: 5px;
|
||||
-webkit-filter: grayscale(100%);
|
||||
}
|
||||
.back-button .tile {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-button .tile .v-icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
.back-button.theme-dark .tile .v-icon {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,193 @@
|
||||
<template>
|
||||
<div :class="`we-icon-tile ${TileClass} theme-${theme}`">
|
||||
<div class="static-content WM-Block WM-Align-C Relative"
|
||||
:style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+TileHeight+'px;'">
|
||||
<div class="Content">
|
||||
<div class="info">
|
||||
<div class="Fa"> {{ TitleFa }} </div>
|
||||
<div class="En"> {{ TitleEn }} </div>
|
||||
<div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
|
||||
</div>
|
||||
<v-icon>WMi-{{ icon }}</v-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="Quantity != ''" class="quantity" >
|
||||
<div class="label top Fa"> {{ QuantityTopLabel }} </div>
|
||||
<div class="number En Bold">{{ Quantity }}</div>
|
||||
<div class="label bottom Fa"> {{ QuantityBottomLabel }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
// Tile:TileData,
|
||||
TileClass: { default: "lg6 xs12" },
|
||||
TileHeight: { default: "180px" },
|
||||
theme: { default: "black" },
|
||||
|
||||
// --------------------------------------------
|
||||
TitleFa: { default: " عنوان بخش " },
|
||||
TitleEn: { default: " Section Title " },
|
||||
Desc: { default: "" },
|
||||
// --------------------------------------------
|
||||
GradientDirection: { default: "to right" },
|
||||
GradientBegin: { default: "eeeeee" },
|
||||
GradientEnd: { default: "dadada" },
|
||||
// --------------------------------------------
|
||||
icon: { default: "" },
|
||||
iconColor: { default: "black" },
|
||||
// --------------------------------------------
|
||||
Quantity: { default: "" },
|
||||
QuantitySize: { default: "100" },
|
||||
QuantityClass: { default: "quantity" },
|
||||
QuantityColor: { default: "#9e9e9e" },
|
||||
QuantityTopLabel: { default: "" },
|
||||
QuantityBottomLabel: { default: "" },
|
||||
},
|
||||
computed: {
|
||||
TileData: function() {
|
||||
// Tile.Tile.Size = checkValue(Tile.Tile.Size,"lg6 xs12");
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
checkValue(value, defaultValue) {
|
||||
return (value == undefined || value == null) ? value : defaultValue;
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
TagType: ( this.RouteType == 'Route' ) ? 'router-link' : 'a',
|
||||
RouteAddress: ( this.RouteType == 'Route' ) ? this.Route : false,
|
||||
URLAddress: ( this.RouteType == 'URL' ) ? this.URL : false,
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.we-icon-tile {
|
||||
width:100%;
|
||||
padding: 10px;
|
||||
transition: 0.5s;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
}
|
||||
.we-icon-tile:hover {
|
||||
border: 1px solid #6d6d6d;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.we-icon-tile:hover .static-content {
|
||||
-webkit-filter: grayscale(100%);
|
||||
}
|
||||
.we-icon-tile.Shadowed {
|
||||
box-shadow: 0 10px 30px 0 rgba(0,0,0,.5);
|
||||
border-radius:5px;
|
||||
}
|
||||
.we-dark .we-icon-tile.Shadowed {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.we-icon-tile .WM-Block {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.static-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Content {
|
||||
padding-top:10px;
|
||||
}
|
||||
.Content .v-icon {
|
||||
font-size: 80px;
|
||||
}
|
||||
.Inline .info .Fa {
|
||||
margin-right:15px;
|
||||
}
|
||||
.Inline .Content {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top:0px;
|
||||
}
|
||||
.Inline .Content .info {
|
||||
text-align:right;
|
||||
}
|
||||
.we-icon-tile .info .Fa:not(.desc) {
|
||||
font-size:26px;
|
||||
}
|
||||
.we-icon-tile .info .En {
|
||||
font-size:14px;
|
||||
letter-spacing:15px;
|
||||
text-transform:uppercase;
|
||||
}
|
||||
.we-icon-tile .info .desc {
|
||||
display: block;
|
||||
font-size:14px;
|
||||
direction: rtl;
|
||||
overflow: hidden;
|
||||
clear: both;
|
||||
max-height: 0px;
|
||||
transition: max-height .4s cubic-bezier(1,0,.2,1);
|
||||
}
|
||||
|
||||
.RTL.we-icon-tile img {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 100px;
|
||||
line-height: 90px;
|
||||
left:15px;
|
||||
bottom:calc(50% - 55px);
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.quantity .label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity .3s;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quantity .number {
|
||||
display: block;
|
||||
width: 0px;
|
||||
transition: width .28s cubic-bezier(1,0,.2,1);
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
.quantityRight .quantity {
|
||||
right:15px;
|
||||
left: inherit;
|
||||
}
|
||||
.we-icon-tile:hover .quantity .number {
|
||||
width: 100%;
|
||||
}
|
||||
.we-icon-tile:hover .quantity .label.top, .we-icon-tile:hover .quantity .label.bottom {
|
||||
opacity: 1;
|
||||
}
|
||||
.we-icon-tile:hover .info .desc {
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
.we-icon-tile:hover .quantity .number {
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.we-icon-tile:hover .quantity .label.top {
|
||||
transition-delay: 0.28s;
|
||||
}
|
||||
.we-icon-tile:hover .quantity .label.bottom {
|
||||
transition-delay: 0.58s;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,84 +1,20 @@
|
||||
.WM-Tile {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #eeeeee;
|
||||
transition: 0.4s;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.WM-Tile:hover {
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.WM-Tile.Shadowed {
|
||||
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .5);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.WM-Tile .Content {
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.WM-Tile .Image {
|
||||
width: 100%;
|
||||
}
|
||||
/*---------------------------------------------------------------*/
|
||||
/* Tiles :: Begin
|
||||
/*---------------------------------------------------------------*/
|
||||
@import '_vars.scss';
|
||||
|
||||
.Content {
|
||||
padding: 10px;
|
||||
margin: 0px;
|
||||
position: relative;
|
||||
@each $color,
|
||||
$value in $colors {
|
||||
.we-icon-tile.theme-#{$color} .v-icon {
|
||||
color: $value;
|
||||
}
|
||||
|
||||
.Content .Info {
|
||||
text-align: right;
|
||||
margin-right: 30px;
|
||||
cursor: pointer;
|
||||
.we-icon-tile.theme-#{$color} .info .Fa {
|
||||
color: $value;
|
||||
}
|
||||
|
||||
.Content .Check {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
width: 40px;
|
||||
.we-icon-tile.theme-#{$color} .info .En {
|
||||
color: $value;
|
||||
}
|
||||
|
||||
.Content .Number {
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
bottom: -16px;
|
||||
line-height: 40px;
|
||||
width: 40px;
|
||||
font-size: 40px;
|
||||
color: rgb(224, 224, 224);
|
||||
.we-icon-tile.theme-#{$color} .quantity {
|
||||
color: $value;
|
||||
}
|
||||
|
||||
.Info .TitleEn {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.Info .TitleFa {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
//-----------------------------------Price
|
||||
.Content .Price {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.Content .Price .Unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.Price .NewPrice {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.Price .OldPrice {
|
||||
font-size: 14px;
|
||||
margin-left: 20px;
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: #ee3552;
|
||||
color: #ee3552;
|
||||
margin-top: -5px;
|
||||
}
|
||||
Loading…
Reference in new issue