willaengine/resources/js/Modules/CRM/components/Clients/Items.vue

<template>
    <div>
        <v-layout row wrap class="Content">
            <v-flex xl2 class="text-lg-right" style="margin-right:60px;">
                نام مشتری
            </v-flex>
            <v-flex xl1 class="text-lg-center">
                وضعیت
            </v-flex>
            <v-flex xl1 class="text-lg-center">
                زمان
            </v-flex>
            <v-flex xl2 class="text-lg-center">
                رویدادها
            </v-flex>
            <v-flex xl2 class="text-lg-center">
                حجم تراکنش
            </v-flex>
            <v-flex xl2 class="text-lg-center">
                ابزارها
            </v-flex>

        </v-layout>
        <v-data-iterator :items="Clients" :rows-per-page-items="rowsPerPageItems" :pagination.sync="pagination" select-all row wrap rows-per-page-text="آیتم به ازای هر صفحه">
            <template v-slot:item="props">

            </template>
            <template v-slot:pageText="props">
                آیتم {{ props.pageStart }} - {{ props.pageStop }} از {{ props.itemsLength }}
            </template>
        </v-data-iterator>
    </div>
</template>

<script>
export default {
    props: {
        // Tile:TileData,
        TileClass: { default: "xl12" },
        TileHeight: { default: "70px" },
        // --------------------------------------------
        TitleFa: { default: " فرید الدین ساروی" },
        TitleEn: { default: " Farid Saravi " },
        Level:   { default: 5 },
    },
    data: () => ({
        rowsPerPageItems: [4, 8, 12],
        pagination: {
            rowsPerPage: 4
        },
        Clients: [
            {
                id:1,
                TitleFa: ' فرید الدین ساروی ',
                TitleEn: ' Farid Saravi ',
                Level: 5,
                Price: 1200000
            },
            {
                id:2,
                TitleFa: ' فرید الدین ساروی ',
                TitleEn: ' Farid Saravi ',
                Level: 5,
                Price: 1200000
            },
            {
                id:13,
                TitleFa: ' فرید الدین ساروی ',
                TitleEn: ' Farid Saravi ',
                Level: 5,
                Price: 1200000
            },
        ]
    })
};
</script>

<style scoped lang="scss">
    .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%;
    }
    .Content {
        padding:10px;
        margin:0px;
        position: relative;
    }
    .Content .Info {
        text-align:right;
        margin-right: 50px;
        cursor: pointer;
    }
    .Content .Check {
       position: absolute;
       right: 0px;
       width: 40px;
    }
    .Content .Number {
       position: absolute;
        right: -14px;
        bottom: -16px;
        line-height: 40px;
        width: 40px;
        font-size: 40px;
        color: rgb(224, 224, 224);
    }
    .Info .TitleEn {
        font-size:13px;
    }
    //-----------------------------------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;

    }

    //---------------------------Buttons-------------------------------
    .Content .Buttons {
        text-align: center;
    }
    .v-btn {
        margin: 6px 2px;
    }
    .v-btn--floating.v-btn--small .v-icon {
        font-size: 16px;
    }

    .v-btn--floating.v-btn--outline.v-btn:hover {
        background-color: inherit !important;
    }


</style>