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

<template>
    <div class="WM-ImageTile" :class="TileClass">
        <div class="CoverBG WM-Block WM-Align-C Relative" :style="'background-image: linear-gradient('+GradientDirection+', #'+GradientBegin+' , #'+GradientEnd+'); height: '+TileHeight+';'">
            <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>
                <img class="Image" :src="$_getPath('images/Global/Tiles/'+ImageURL)" :height="ImageHeight"/>
            </div>
        </div>
        <div v-if="Quantity != ''" :class="`${QuantityClass}`" :style="'color:'+QuantityColor" >
            <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: "230px" },
        // --------------------------------------------
        TitleFa: { default: " عنوان بخش " },
        TitleEn: { default: " Section Title " },
        Desc: { default: "" },
        // --------------------------------------------
        GradientDirection: { default: "to right" },
        GradientBegin: { default: "eeeeee" },
        GradientEnd: { default: "dadada" },
        // --------------------------------------------
        ImageURL: { default: "Alireza" },
        ImageHeight: { default: "180px" },
        // --------------------------------------------
        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">
    .WM-ImageTile {
        width:100%;
        padding: 10px;
        transition: 0.5s;
        border: 1px solid transparent;
        position: relative;
    }
    .WM-ImageTile:hover {
        border: 1px solid #6d6d6d;
    }
    .WM-ImageTile:hover .CoverBG {
        -webkit-filter: grayscale(100%);
    }
    .WM-ImageTile.Shadowed {
        box-shadow: 0 10px 30px 0 rgba(0,0,0,.5);
        border-radius:5px;
    }
    .we-dark .WM-ImageTile.Shadowed {
        box-shadow: none;
    }

    .WM-ImageTile .WM-Block {
        border-radius: 5px;
    }

    .WM-ImageTile.Padd10{
        padding:10px;
    }
    .WM-ImageTile.Padd20{
        padding:20px;
    }
    .Content {
        padding-top:10px;
    }
    .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;
    }
    .WM-ImageTile .Info .Fa:not(.desc) {
        font-size:26px;
        color: #000;
    }
    .WM-ImageTile .Info .En {
        font-size:14px;
        color: #000;
        letter-spacing:15px;
        text-transform:uppercase;
    }
    .WM-ImageTile .Info .desc {
        display: block;
        font-size:14px;
        direction: rtl;
        color: #000;
        overflow: hidden;
        clear: both;
        max-height: 0px;
        transition:  max-height .4s cubic-bezier(1,0,.2,1);
    }

    .RTL.WM-ImageTile 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;
    }
    .WM-ImageTile:hover .Quantity .number {
        width: 100%;
    }
    .WM-ImageTile:hover .Quantity .label.top, .WM-ImageTile:hover .Quantity .label.bottom  {
         opacity: 1;
    }
    .WM-ImageTile:hover .Info .desc {
        max-height: 90px;
    }

    .WM-ImageTile:hover .Quantity .number {
        transition-delay: 0s;
    }

    .WM-ImageTile:hover .Quantity .label.top {
        transition-delay: 0.28s;
    }
    .WM-ImageTile:hover .Quantity .label.bottom {
        transition-delay: 0.58s;
    }


</style>