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

<template>
    <div :class="`we-icon-tile ${theme}`">
        <div class="static-content WM-Block WM-Align-C Relative"
             :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+height+'px;'">
            <div class="Content">
                <v-icon>WMi-{{ icon }}</v-icon>
                <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>
            </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,
        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">
    .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 .static-content {
        transition: 0.5s;
        direction: rtl;
    }
    .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;
        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;
    }


    .we-icon-tile.sm .info .En {
        font-size: 12px;
        letter-spacing: 10px;
        margin-right: -10px;
        margin-top: -5px;
    }
    .we-icon-tile.sm .info .Fa {
        font-size: 22px;
    }

    /*---------------------------------------------------------------*/
    /*                    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;
        }
    }



</style>