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

<template>
    <!-- <v-flex :class="TileSize" > -->
        <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="TitleFa Fa"> {{ TitleFa }} </div>
                        <div class="TitleEn En"> {{ TitleEn }} </div>
                    </div>
                    <img class="Image" :src="$_getPath('images/Global/Tiles/'+ImageURL)" :height="ImageHeight"/>
                </div>
                <div v-if="Quantity != ''" :class="`${QuantityClass}`" :style="'color:'+QuantityColor" >
                    <div class="label top Fa"> {{ QuantityLabel }} </div>
                    <div class="number En Bold">{{ Quantity }}</div>
                    <div class="label bottom Fa"> {{ QuantityLabel2 }} </div>
                </div>
            </div>
        </div>
    <!-- </v-flex> -->
</template>

<script>
export default {
    props: {
        // Tile:TileData,
        TileClass: { default: "lg6 xs12" },
        TileHeight: { default: "230px" },
        // --------------------------------------------
        TitleFa: { default: " عنوان بخش " },
        TitleEn: { default: " Section Title " },
        // --------------------------------------------
        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" },
        QuantityLabel: { default: "" },
        QuantityLabel2: { 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;
        -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 .TitleFa {
        font-size:26px;
        color: #000;
    }
    .WM-ImageTile .TitleEn {
        font-size:14px;
        color: #000;
        letter-spacing:15px;
        text-transform:uppercase;
    }

    .WM-ImageTile.Padd10{
        padding:10px;
    }
    .WM-ImageTile.Padd20{
        padding:20px;
    }
    .Content {
        padding-top:10px;
    }
    .Inline .TitleFa {
        margin-right:15px;
    }
    .Inline .Content {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-top:0px;
    }
    .Inline .Content .Info {
        text-align:right;
    }
    .RTL.WM-ImageTile img {
        margin-right: 30px;
    }

    .Quantity {
        position: absolute;
        font-size: 100px;
        line-height: 90px;
        left:15px;
        bottom:calc(50% - 55px);

    }
    .Quantity .label {
        font-size: 14px;
        line-height: 14px;
        opacity: 0;
        transition: 0.2s ease all;
    }
    .Quantity .number {
        opacity: 0;
        transition: 0.2s ease all;
    }
    .QuantityRight .Quantity {
        right:15px;
        left: inherit;
    }
    .WM-ImageTile:hover .Quantity .label.top, .WM-ImageTile:hover .Quantity .label.bottom, .WM-ImageTile:hover .Quantity .number,  {
        animation: fadein 1s forwards;
    }
    .WM-ImageTile:hover .Quantity .label.top {
        animation-delay: 0s;
    }
    .WM-ImageTile:hover .Quantity .number {
        animation-delay: 0.2s;
    }
    .WM-ImageTile:hover .Quantity .label.bottom {
        animation-delay: 0.4s;
    }


</style>