mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-21 09:12:14 +00:00
445 lines
10 KiB
Vue
445 lines
10 KiB
Vue
<template>
|
|
<div id="cenik" class="oasis-pricing text-center">
|
|
|
|
<Clouds class="clouds">
|
|
<Cloud type="colored" class="cloud" />
|
|
<Cloud type="colored" class="cloud" />
|
|
<Cloud type="colored" class="cloud" />
|
|
<Cloud type="colored" class="cloud" />
|
|
</Clouds>
|
|
|
|
<div class="title-wrapper container">
|
|
<h3 class="main-title-sm">
|
|
{{ $t('homepage_pricing_title') }}
|
|
</h3>
|
|
<h4 class="sub-title-sm">
|
|
{{ $t('homepage_pricing_description') }}
|
|
</h4>
|
|
</div>
|
|
|
|
<div class="container" style="overflow: hidden">
|
|
<img src="/oasis/trees.svg" alt="oasis-trees" class="trees">
|
|
</div>
|
|
<div class="container">
|
|
|
|
<ul v-if="pricing" class="pricing-box">
|
|
<li v-for="(plan, i) in pricing" :key="i" class="box">
|
|
<folder-icon size="34" class="pricing-icon" />
|
|
|
|
<h5 class="pricing-data">
|
|
{{ plan.data.attributes.capacity_formatted }}
|
|
</h5>
|
|
<b class="pricing-name">
|
|
{{ plan.data.attributes.name }}
|
|
</b>
|
|
<p class="pricing-description">
|
|
{{ plan.data.attributes.description }}
|
|
</p>
|
|
<router-link :to="{name: 'SignUp'}" :class="{'base-button': i == 1,'theme-button': i !== 1, }">
|
|
{{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
|
|
</router-link>
|
|
<small v-if="plan.data.attributes.tax_rates.length > 0" class="pricing-vat">
|
|
{{ $t('page_pricing_tables.vat_excluded') }}
|
|
</small>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
FolderIcon,
|
|
} from 'vue-feather-icons'
|
|
import Clouds from '@/Oasis/Homepage/Components/Clouds'
|
|
import Cloud from '@/Oasis/Homepage/Components/Cloud'
|
|
import {mapGetters} from 'vuex'
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'OasisPricing',
|
|
components: {
|
|
FolderIcon,
|
|
Clouds,
|
|
Cloud,
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'config'
|
|
]),
|
|
},
|
|
data() {
|
|
return {
|
|
pricing: undefined
|
|
}
|
|
},
|
|
mounted() {
|
|
axios.get('/api/pricing')
|
|
.then(response => {
|
|
this.pricing = response.data
|
|
})
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@assets/oasis/_components';
|
|
@import '@assets/oasis/_homepage';
|
|
@import '@assets/oasis/_responsive';
|
|
|
|
.clouds .cloud {
|
|
|
|
&:nth-child(1) {
|
|
opacity: 0.2;
|
|
left: 4%;
|
|
top: 15%;
|
|
@include transform(scale(1.1))
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
opacity: 0.15;
|
|
left: 18%;
|
|
top: 41%;
|
|
@include transform(scale(-0.7, 0.7))
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
opacity: 0.30;
|
|
right: 9%;
|
|
top: 6%;
|
|
@include transform(scale(-1.55, 1.55))
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
opacity: 0.25;
|
|
right: 16%;
|
|
top: 32%;
|
|
@include transform(scale(1))
|
|
}
|
|
}
|
|
|
|
.oasis-pricing {
|
|
margin-top: 290px;
|
|
position: relative;
|
|
|
|
.main-title-sm,
|
|
.sub-title-sm {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.title-wrapper {
|
|
padding-top: 220px;
|
|
margin-bottom: 110px;
|
|
}
|
|
|
|
.theme-button {
|
|
@include font-size(18);
|
|
}
|
|
}
|
|
|
|
.trees {
|
|
margin-bottom: -95px;
|
|
margin-left: 250px;
|
|
}
|
|
|
|
.pricing-box {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
max-width: 1325px;
|
|
margin: 0 auto;
|
|
|
|
.box {
|
|
background: white;
|
|
box-shadow: 0 5px 333px -22px #1B253935;
|
|
border-radius: 12px;
|
|
display: block;
|
|
padding: 38px 40px 35px;
|
|
z-index: 1;
|
|
|
|
&:nth-child(2) {
|
|
z-index: 2;
|
|
padding: 65px 40px 20px;
|
|
background: $theme-bg-light;
|
|
margin-top: -40px;
|
|
margin-bottom: -40px;
|
|
|
|
.pricing-name, .pricing-data {
|
|
color: white;
|
|
}
|
|
|
|
.pricing-description {
|
|
color: $text-dark-secondary;
|
|
margin-bottom: 80px;
|
|
}
|
|
|
|
.pricing-data {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.pricing-vat {
|
|
color: $text-dark-subtitle;
|
|
}
|
|
}
|
|
|
|
.pricing-icon {
|
|
margin-bottom: 45px;
|
|
|
|
path {
|
|
stroke: $theme;
|
|
stroke-width: 2;
|
|
}
|
|
}
|
|
|
|
.pricing-data {
|
|
@include font-size(50);
|
|
font-weight: 900;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.pricing-name {
|
|
@include font-size(24);
|
|
font-weight: 800;
|
|
margin-bottom: 30px;
|
|
display: block;
|
|
}
|
|
|
|
.pricing-description {
|
|
@include font-size(19);
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.pricing-vat {
|
|
@include font-size(12);
|
|
color: $text-secondary;
|
|
display: block;
|
|
font-weight: 300;
|
|
opacity: 0.45;
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1370px) {
|
|
|
|
.oasis-pricing .title-wrapper {
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.clouds .cloud {
|
|
|
|
&:nth-child(1) {
|
|
opacity: 0.2;
|
|
left: 5%;
|
|
top: 10%;
|
|
@include transform(scale(1))
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
left: 23%;
|
|
top: 36%;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
opacity: 0.30;
|
|
right: 2%;
|
|
top: 4%;
|
|
@include transform(scale(-1.35, 1.35))
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
opacity: 0.2;
|
|
right: 8%;
|
|
top: 31%;
|
|
@include transform(scale(0.9))
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1024px) {
|
|
|
|
.clouds .cloud {
|
|
|
|
&:nth-child(1) {
|
|
left: -8%;
|
|
top: 6%;
|
|
@include transform(scale(0.8))
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
left: 21%;
|
|
top: 32%;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
right: 6%;
|
|
top: 3%;
|
|
@include transform(scale(-1.1, 1.1))
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
right: 0%;
|
|
top: 37%;
|
|
@include transform(scale(0.7))
|
|
}
|
|
}
|
|
|
|
.oasis-pricing {
|
|
.title-wrapper {
|
|
padding-top: 150px;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.trees {
|
|
margin-bottom: -110px;
|
|
margin-left: 150px;
|
|
transform: scale(0.75);
|
|
}
|
|
|
|
.pricing-box .box {
|
|
padding: 25px 35px;
|
|
|
|
&:nth-child(2) {
|
|
padding: 40px 25px 20px;
|
|
margin-top: -25px;
|
|
margin-bottom: -25px;
|
|
|
|
.pricing-description {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 960px) {
|
|
|
|
.clouds .cloud {
|
|
|
|
&:nth-child(1) {
|
|
left: 1%;
|
|
top: 4%;
|
|
@include transform(scale(0.6))
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
left: 2%;
|
|
top: 25%;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
right: -12%;
|
|
top: 2%;
|
|
@include transform(scale(-0.9, 0.9))
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
right: -3%;
|
|
top: 26%;
|
|
@include transform(scale(0.5))
|
|
}
|
|
}
|
|
|
|
.pricing-box {
|
|
grid-template-columns: 1fr;
|
|
gap: 25px;
|
|
|
|
.box {
|
|
width: 100%;
|
|
max-width: 520px !important;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
|
|
&:nth-child(2) {
|
|
padding: 38px 40px 35px;
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
|
|
.pricing-data {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.pricing-description {
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 760px) {
|
|
|
|
.oasis-pricing {
|
|
|
|
.title-wrapper {
|
|
margin-bottom: -70px;
|
|
}
|
|
}
|
|
|
|
.trees {
|
|
margin-bottom: -130px;
|
|
margin-left: 0;
|
|
transform: scale(0.5) translatex(-110px);
|
|
}
|
|
|
|
.pricing-box .box {
|
|
|
|
.pricing-data {
|
|
@include font-size(36);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pricing-description {
|
|
margin-bottom: 35px;
|
|
}
|
|
}
|
|
|
|
.clouds .cloud {
|
|
|
|
&:nth-child(1) {
|
|
left: -10%;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
left: -18%;
|
|
top: 18%;
|
|
@include transform(scale(-0.5, 0.5))
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
right: -22%;
|
|
top: 1%;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
right: 1%;
|
|
top: 24%;
|
|
@include transform(scale(0.4))
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
.oasis-pricing {
|
|
.main-title-sm {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.pricing-box {
|
|
|
|
.box {
|
|
background: darken($theme-bg-dark, 5%);
|
|
|
|
.pricing-data,
|
|
.pricing-name,
|
|
.pricing-description,
|
|
.pricing-vat {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|