153 lines
5.3 KiB
Vue
153 lines
5.3 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="card">
|
|
<div class="form">
|
|
<div class="left-side">
|
|
<div class="left-heading">
|
|
<h3>Creditzombies</h3>
|
|
</div>
|
|
<Step step="3"/>
|
|
</div>
|
|
<div class="right-side">
|
|
<div class="main active" style="padding: 30px 40px 0px 20px">
|
|
<TopArea/>
|
|
</div>
|
|
<div class="row" style="padding:10px 20px">
|
|
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
|
<div @click="getPackage(1)" class="listing listing-radius listing-primary package-1" :class="{'listing-highlight':is_highlight1}">
|
|
<div class="shape">
|
|
<div class="shape-text">Best offer</div>
|
|
</div>
|
|
<div class="listing-content">
|
|
<h3 class="lead text-white text-bold">SmartCredit</h3>
|
|
<p class="text-white text-bold">${{ package.prices[1] }} (Basic)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
|
<div @mouseover="toggleClassForPackage" @click="getPackage(2)" class="listing listing-radius listing-success">
|
|
<div class="shape">
|
|
<div class="shape-text">50%</div>
|
|
</div>
|
|
<div class="listing-content">
|
|
<h3 class="lead text-success text-bold">SmartCredit</h3>
|
|
<p class="text-success text-bold">${{ package.prices[2] }} (Premium)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
|
|
<div @mouseover="toggleClassForPackage" @click="getPackage(3)" class="listing listing-danger listing-radius">
|
|
<div class="shape">
|
|
<div class="shape-text">hot</div>
|
|
</div>
|
|
<div class="listing-content">
|
|
<h3 class="lead text-danger text-bold">Identity IQ</h3>
|
|
<p class="text-danger text-bold">Unavailable at this time
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import pkg from "../../helper/package";
|
|
import {setAmount, setPackageId, setStep} from "../../helper";
|
|
import router from "../../router";
|
|
|
|
export default {
|
|
setup() {
|
|
},
|
|
data(){
|
|
return {
|
|
package:pkg,
|
|
is_highlight1:true
|
|
}
|
|
},
|
|
methods:{
|
|
toggleClassForPackage(){
|
|
this.is_highlight1 = false
|
|
},
|
|
conditionalAlert(message,package_id){
|
|
this.$swal({
|
|
title: 'Warning',
|
|
text: message,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Yes'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
setStep(5);
|
|
setPackageId(package_id)
|
|
setAmount(this.package.prices[package_id])
|
|
router.push({name: 'make-payment'})
|
|
}
|
|
});
|
|
},
|
|
getPackage(package_id) {
|
|
if(package_id == 3){
|
|
this.$swal(
|
|
"Currently this package is not available",
|
|
"",
|
|
"warning"
|
|
)
|
|
}else {
|
|
this.conditionalAlert("Are you sure want to take the $"+this.package.prices[package_id]+ ' ('+this.package.labels[package_id]+") package?", package_id);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import '../../../css/credit_report.css';
|
|
|
|
.container .card {
|
|
height: 600px;
|
|
}
|
|
|
|
.listing{
|
|
font-family: "Lato", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
}
|
|
.text-white{
|
|
color: white;
|
|
}
|
|
.package-1{
|
|
background-color: #FF440A;
|
|
}
|
|
|
|
.listing-highlight{
|
|
-webkit-transform: scale(1.1);
|
|
transition: all 0.4s ease-in-out;
|
|
}
|
|
.package-1 .shape {
|
|
border-style: solid;
|
|
border-width: 0 100px 55px 0;
|
|
float: right;
|
|
height: 0;
|
|
width: 0;
|
|
transform: rotate(360deg);
|
|
}
|
|
|
|
.package-1 .shape-text {
|
|
color: #FF440A;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
position: relative;
|
|
right: -45px;
|
|
top: -2px;
|
|
white-space: nowrap;
|
|
transform: rotate(28deg);
|
|
}
|
|
|
|
.package-1.listing-primary .shape{
|
|
border-color: transparent #fff transparent transparent;
|
|
}
|
|
</style>
|