willaengine/resources/js/Global/components/Tiles/Icon-Tile.vue

<template>
    <div :class="`we-icon-tile `">
        <div :class="`static-content ${theme}`" :style="'height: '+height+'px;'">
            <div class="Content">
                <v-icon>WMi-{{ icon }}</v-icon>
                <div class="info">
                    <div class="Fa" v-html="TitleFa"></div>
                    <div class="En" v-html="TitleEn"></div>
                    <div class="desc Fa Thin" v-if="Desc != ''" v-html="Desc"></div>
                </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>

    </div>
</template>

<script>
export default {
    props: {
        // Tile:TileData,
        height: { default: "180px" },
        theme: { default: "theme-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">

/*---------------------------------------------------------------*/
/*                    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 {
        width:100%;
        padding: 5px;
        transition: 0.5s;
        border: 1px solid transparent;
        position: relative;
    }
    .we-icon-tile.no-background .static-content {
        background: none !important;
    }

    .we-icon-tile:hover {
        border: 1px solid #6d6d6d;
        border-radius: 5px;
    }
    .we-icon-tile .static-content {
        transition: 0.5s;
        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 {
        -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.content-right {
        justify-content: right;
        padding-right: 50px;
    }
    .Content {
        padding-top:10px;
    }
    .Content .v-icon {
        font-size: 80px;
    }
    .we-icon-tile.icon-60 .Content .v-icon {
        font-size: 60px;
    }
    .we-icon-tile.icon-50 .Content .v-icon {
        font-size: 50px;
    }
    .we-icon-tile.icon-ml-10 .Content .v-icon {
        margin-left: 10px;
        margin-right: -10px;
    }
    .we-icon-tile.icon-ml-5 .Content .v-icon {
        margin-left: 5px;
        margin-right: -5px;
    }

    .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;
        opacity: 0.7;
    }
    .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: 80px;
        line-height: 70px;
        left:25px;
        bottom:calc(50% - 47px);
        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;
    }

    .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 {
        font-size: 10px;
        letter-spacing: 10px;
        margin-right: -10px;
        margin-top: -3px;
    }
    .we-icon-tile.sm .info .Fa {
        font-size: 20px;
    }





</style>