< template >
< v -container fluid >
< div class = "Tile Shadowed Padd-0 WM-Margin-B-10" >
< wm -breadcrumbs LinkClass = "WM-Link-Cyan" :items ="breadcrumbItems" > < / w m - b r e a d c r u m b s >
< / div >
< div class = "Tile Shadowed" >
< WM -PageTitle titleFaClass = "black--text" color = "black" titleFa = " افزودن بخش جدید " titleEn = " Add a New Section " > < / W M - P a g e T i t l e >
< 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 - f l e x >
< 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 - f l e x >
< 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 - i c o n >
< / v - b t n >
< span > فعالسازی نسخه ی 15 روزه ، آزمایشی < / span >
< / v - t o o l t i p >
< 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 - i c o n >
< / v - b t n >
< span > خرید < / span >
< / v - t o o l t i p >
< / v - f l e x >
< 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 - i c o n > { { m o d u l e . d e s c r i p t i o n T i t l e } } < / v - f l e x >
< / 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 - l a y o u t >
< / div >
< / v - c a r d - t e x t >
< / v - c a r d >
< / v - e x p a n s i o n - p a n e l - c o n t e n t >
< / v - e x p a n s i o n - p a n e l >
< / v - f l e x >
< / v - l a y o u t >
< / div >
< / div >
< / div >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Modals : : BEGIN
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< template >
< div class = "text-xs-center" >
< wm -payment -confirmation > < / w m - p a y m e n t - c o n f i r m a t i o n >
< wm -trial -confirmation > < / w m - t r i a l - c o n f i r m a t i o n >
< / div >
< / template >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
Modals : : END
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< / v - c o n t a i n e r >
< / 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 : 10 px ;
border : 1 px solid # eeeeee ;
margin - bottom : 10 px ;
}
. ModuleItem . redBorder {
border - right : 2 px solid # ee3552 ;
}
. ModuleItem . orangeBorder {
border - right : 2 px solid # ff6b57 ;
}
. ModuleItem . cyanBorder {
border - right : 2 px solid # 32 c5d2 ;
}
. ModuleItem . purpleBorder {
border - right : 2 px solid # ac3773 ;
}
. ModuleItem . itrator {
position : absolute ;
font - size : 60 px ;
right : - 5 px ;
bottom : - 25 px ;
opacity : 0.1 ;
font - family : "Montserrat-ExtraBold" ;
z - index : 100 ;
}
. ModuleItem . Title {
text - align : right ;
}
. ModuleItem . FA {
font - size : 26 px ;
}
. ModuleItem . EN {
font - size : 12 px ;
letter - spacing : 5 px ;
text - transform : uppercase ;
color : # 9 a9a9a
}
. ModuleItem . Price {
text - align : left ;
padding - top : 10 px ;
}
. ModuleItem . Price . Main {
font - size : 26 px ;
// font-family: "Montserrat-ExtraBold";
}
. ModuleItem . Price . Old {
font - size : 12 px ;
color : # ee3552 ;
text - decoration : line - through ;
margin - bottom : - 10 px ;
margin - left : 0 px ;
}
. v - expansion - panel -- inset . v - expansion - panel _ _container -- active ,
. v - expansion - panel -- popout . v - expansion - panel _ _container -- active {
border : 1 px solid # eeeeee ! important ;
border - right : 2 px solid # 000 ! important ;
box - shadow : none ;
}
. v - expansion - panel _ _container {
transition : 0.2 s ;
border : 1 px solid transparent ! important ;
border - right : 2 px solid transparent ! important ;
}
. v - expansion - panel _ _container : hover {
border : 1 px solid # eeeeee ! important ;
border - right : 2 px solid # 000 ! important ;
}
. ModuleItem . description . Title {
font - size : 16 px ;
color : # 000 ;
}
. ModuleItem . description . v - icon {
margin - left : 5 px ;
line - height : 27 px ;
}
. ModuleItem . description . Text {
font - size : 14 px ;
color : # 6 d6d6d ;
}
< / style >