willaengine/resources/js/Home/views/AddModule.vue

<template>
    <v-container fluid>
        <div class="Tile Shadowed Padd-0 WM-Margin-B-10">
            <wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
        </div>
        <div class="Tile Shadowed">
            <WM-PageTitle titleFaClass="black--text" color="black" titleFa=" افزودن بخش جدید " titleEn=" Add a New Section "></WM-PageTitle>
            <div v-for="(module, index) in modules" :key="index">
                <div :class="'ModuleItem '+module.color+'Border'">
                    <div :class="'itrator En '+module.color+'--text'"> {{index+1}} </div>
                    <v-layout row wrap class="WM-Margin-0">
                        <v-flex lg4 class="Title">
                            <div class="FA"> {{ module.nameFa }} </div>
                            <div class="EN"> {{ module.nameEn }} </div>
                        </v-flex>
                        <v-flex lg4 class="Price">
                            <div class="Old En" v-if="module.oldPrice"> {{ module.oldPrice }} </div>
                            <div class="Main En"> {{ module.price }} <span class="Unit">IRT</span></div>
                        </v-flex>
                        <v-flex lg4 class="WM-Align-L">
                            <v-tooltip top color="black">
                                <v-btn
                                    small
                                    outline
                                    @click.native="$store.state.TrialConfirmation = true"
                                    slot="activator"
                                    fab
                                    :color="module.color"
                                >
                                    <v-icon dark> fas fa-history </v-icon>
                                </v-btn>
                                <span> فعالسازی نسخه ی 15 روزه، آزمایشی </span>
                            </v-tooltip>
                            <v-tooltip top color="black">
                                <v-btn
                                    @click.native="$store.state.PaymentConfirmation = true"
                                    slot="activator"
                                    fab
                                    :color="module.color"
                                    dark
                                >
                                    <v-icon dark> fas fa-plus </v-icon>
                                </v-btn>
                                <span> خرید </span>
                            </v-tooltip>
                        </v-flex>
                        <v-flex lg12 class="description RTL" v-if="module.descriptionTitle">
                            <v-expansion-panel popout style="margin-bottom:0px;">
                                <v-expansion-panel-content>
                                    <template v-slot:header>
                                        <v-flex lg12 class="text-lg-right Title"><v-icon> fas fa-align-right </v-icon> {{ module.descriptionTitle }} </v-flex>
                                    </template>
                                    <v-card>
                                        <v-card-text style="padding:0px 40px 10px 40px">
                                            <div class="WM-Tile" >
                                                <v-layout row wrap class="WM-Margin-0">
                                                    <v-flex lg12 class="text-lg-right zIndex99 Text" v-html="module.descriptionText">  </v-flex>
                                                </v-layout>
                                            </div>
                                        </v-card-text>
                                    </v-card>
                                </v-expansion-panel-content>
                            </v-expansion-panel>
                        </v-flex>
                    </v-layout>
                </div>
            </div>
        </div>

        <!-- --------------------------------------------------------------------
                                    Modals :: BEGIN
        -------------------------------------------------------------------- -->
        <template>
            <div class="text-xs-center">
                <wm-payment-confirmation></wm-payment-confirmation>
                <wm-trial-confirmation></wm-trial-confirmation>
            </div>
        </template>

        <!-- --------------------------------------------------------------------
                                    Modals :: END
        -------------------------------------------------------------------- -->

    </v-container>
</template>



<script>
    import PaymentConfirmation from "@Common/components/Misc/PaymentConfirmation.vue";
    import TrialConfirmation from "@Common/components/Misc/TrialConfirmation.vue";

    export default {
        components: {
            'wm-payment-confirmation'    :       PaymentConfirmation,
            'wm-trial-confirmation'    :       TrialConfirmation,
        },
        props: {
            Color:     { default: 'grey darken-4' },
        },
        data() {
            return {
                breadcrumbItems: [
                    {
                        text: "",
                        disabled: false,
                        routeName: "Home",
                        icon: "home"
                    },
                    {
                        text: " افزودن بخش جدید ",
                        disabled: true,
                    }
                ],
                modules: [
                    { nameFa: ' باشگاه مشتریان ', nameEn: ' Members Club ', price: '1,500,000',  id: 1, color:"red",
                        descriptionTitle: ' باشگاه مشتریان در واقع بستری است برای اینکه بتوانید مشتریان خود را ثبت، آنها را مدیریت و با آنها ارتباط بر قرار کنید. ',
                        descriptionText: ' امکانات مشتریان به طور خلاصه به شرح زیر می باشد: <div class="WM-Margin-R-10"> 1. ثبت و ویرایش اعضای باشگاه  <br> 2. امکان ثبت تاریخ تولد و ازدواج</div>   '
                    },
                    { nameFa: ' مدیریت ارتباط با مشتری ', nameEn: ' Customers Relationship Management ', price: '3,500,000', oldPrice: '3,000,000', id: 2, color:"orange" },
                    { nameFa: ' مدیریت فروشگاه ', nameEn: ' Store Management ', price: '2,500,000', id: 3, color:"cyan"  },
                    { nameFa: ' سیستم رزرو وقت ', nameEn: ' Reservations System ', price: '1,000,000', id: 4, color:"purple" },
                ],
            }
        }
    };

</script>

<style scoped lang="scss">
    .ModuleItem {
        position: relative;
        padding: 10px;
        border: 1px solid #eeeeee;
        margin-bottom: 10px;
    }
    .ModuleItem.redBorder {
        border-right:2px solid #ee3552;
    }
    .ModuleItem.orangeBorder {
        border-right:2px solid #ff6b57;
    }
    .ModuleItem.cyanBorder {
        border-right:2px solid #32c5d2;
    }
    .ModuleItem.purpleBorder {
        border-right:2px solid #ac3773;
    }
    .ModuleItem .itrator {
        position: absolute;
        font-size: 60px;
        right: -5px;
        bottom: -25px;
        opacity: 0.1;
        font-family: "Montserrat-ExtraBold";
        z-index: 100;
    }
    .ModuleItem .Title {
        text-align: right;
    }
    .ModuleItem .FA {
        font-size: 26px;
    }
    .ModuleItem .EN {
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #9a9a9a
    }
    .ModuleItem .Price {
        text-align: left;
        padding-top: 10px;
    }
    .ModuleItem .Price .Main {
        font-size: 26px;
        // font-family: "Montserrat-ExtraBold";
    }
    .ModuleItem .Price .Old {
        font-size: 12px;
        color: #ee3552;
        text-decoration: line-through;
        margin-bottom: -10px;
        margin-left: 0px;
    }

    .v-expansion-panel--inset .v-expansion-panel__container--active,
    .v-expansion-panel--popout .v-expansion-panel__container--active {
        border: 1px solid #eeeeee !important;
        border-right:2px solid #000 !important;
        box-shadow: none;
    }
    .v-expansion-panel__container {
        transition: 0.2s;
        border: 1px solid transparent !important;
        border-right:2px solid transparent !important;
    }
    .v-expansion-panel__container:hover {
        border: 1px solid #eeeeee !important;
        border-right:2px solid #000 !important;
    }

    .ModuleItem .description .Title {
        font-size: 16px;
        color: #000;
    }
    .ModuleItem .description .v-icon {
        margin-left: 5px;
        line-height: 27px;
    }
    .ModuleItem .description .Text {
        font-size: 14px;
        color: #6d6d6d;
    }

</style>