mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-28 02:50:39 +00:00
Added OasisNavigation.vue and OasisPricing.vue
This commit is contained in:
Peter Papp
@@ -1,22 +1,5 @@
|
||||
<template>
|
||||
<div class="oasis-header">
|
||||
<nav class="navigation container">
|
||||
<router-link :to="{name: 'Homepage'}" tag="div" class="logo">
|
||||
<img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
|
||||
</router-link>
|
||||
<ul class="links">
|
||||
<li v-for="(item, i) in navigation" :key="i">
|
||||
<a :href="`#${item.href}`">{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="log-in">
|
||||
<router-link :to="{name: 'SignIn'}" class="base-button theme-color">
|
||||
Prihlásit se
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="header container">
|
||||
<h1 class="main-title">
|
||||
Jednoduchý a Bezpečný Cloud vo Vrecku
|
||||
@@ -49,24 +32,7 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navigation: [
|
||||
{
|
||||
title: 'O Nás',
|
||||
href: 'o-nas',
|
||||
},
|
||||
/*{
|
||||
title: 'Kariéra',
|
||||
href: 'kariera',
|
||||
},*/
|
||||
{
|
||||
title: 'Ceník',
|
||||
href: 'cenik',
|
||||
},
|
||||
{
|
||||
title: 'Podpora',
|
||||
href: 'podpora',
|
||||
},
|
||||
],
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<nav class="oasis-navigation navigation">
|
||||
<div class="container">
|
||||
<router-link :to="{name: 'Homepage'}" tag="div" class="logo">
|
||||
<img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
|
||||
<b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
|
||||
</router-link>
|
||||
<ul class="links">
|
||||
<li v-for="(item, i) in navigation" :key="i">
|
||||
<a :href="`#${item.href}`">{{ item.title }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="log-in">
|
||||
<router-link :to="{name: 'SignIn'}" class="base-button theme-color">
|
||||
Prihlásit se
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Header',
|
||||
components: {
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navigation: [
|
||||
{
|
||||
title: 'O Nás',
|
||||
href: 'o-nas',
|
||||
},
|
||||
/*{
|
||||
title: 'Kariéra',
|
||||
href: 'kariera',
|
||||
},*/
|
||||
{
|
||||
title: 'Ceník',
|
||||
href: 'cenik',
|
||||
},
|
||||
{
|
||||
title: 'Podpora',
|
||||
href: 'podpora',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/oasis/_components';
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="oasis-pricing text-center">
|
||||
|
||||
<div class="title-wrapper container">
|
||||
<h3 class="main-title">
|
||||
Kolik stoji OasisDrive?
|
||||
</h3>
|
||||
<h4 class="sub-title-sm">
|
||||
Cloudové uložiště je v podstatě virtuální šanon, kam uživatelé ukládají svá data, ke kterým se mohou přihlásit odkudkoli v nezávislosti na zařízení. OasisDrive umožňuje bezpečně chránit Vaše firemní data.
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<ul class="pricing-box container">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
FolderIcon,
|
||||
} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'OasisPricing',
|
||||
components: {
|
||||
FolderIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pricing: [{
|
||||
"data": {
|
||||
"id": "virtualni-sanon-basic",
|
||||
"type": "plans",
|
||||
"attributes": {
|
||||
"name": "Virtu\u00e1ln\u00ed \u0161anon BASIC",
|
||||
"description": "Obsahuje 5 GB pro Va\u0161e firemn\u00ed data",
|
||||
"price": "CZK\u00a0699.00",
|
||||
"capacity_formatted": "50GB",
|
||||
"capacity": 50,
|
||||
"currency": "CZK",
|
||||
"tax_rates": [{"id": "txr_1IYQK9BwlPpoyJNw2lR0zgOr", "active": true, "country": "CZ", "percentage": 20, "plan_price_formatted": "CZK\u00a0838.80"}]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"data": {
|
||||
"id": "virtualni-sanon-standard",
|
||||
"type": "plans",
|
||||
"attributes": {
|
||||
"name": "Virtu\u00e1ln\u00ed \u0161anon STANDARD",
|
||||
"description": "Obsahuje 10 GB pro Va\u0161e firemn\u00ed data, 2 dokumenty zdarma",
|
||||
"price": "CZK\u00a0799.00",
|
||||
"capacity_formatted": "100GB",
|
||||
"capacity": 100,
|
||||
"currency": "CZK",
|
||||
"tax_rates": [{"id": "txr_1IYQK9BwlPpoyJNw2lR0zgOr", "active": true, "country": "CZ", "percentage": 20, "plan_price_formatted": "CZK\u00a0958.80"}]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
"data": {
|
||||
"id": "virtualni-sanon-premium",
|
||||
"type": "plans",
|
||||
"attributes": {
|
||||
"name": "Virtu\u00e1ln\u00ed \u0161anon PREMIUM",
|
||||
"description": "Obsahuje 20 GB pro Va\u0161e firemn\u00ed data, 5 dokument\u016f dle vlastn\u00edho v\u00fdb\u011bru zdarma",
|
||||
"price": "CZK\u00a01,249.00",
|
||||
"capacity_formatted": "200GB",
|
||||
"capacity": 200,
|
||||
"currency": "CZK",
|
||||
"tax_rates": [{"id": "txr_1IYQK9BwlPpoyJNw2lR0zgOr", "active": true, "country": "CZ", "percentage": 20, "plan_price_formatted": "CZK\u00a01,498.80"}]
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
this.$scrollTop()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/oasis/_components';
|
||||
@import '@assets/oasis/_homepage';
|
||||
@import '@assets/oasis/_responsive';
|
||||
</style>
|
||||
@@ -1,20 +1,26 @@
|
||||
<template>
|
||||
<div id="page">
|
||||
<OasisHeader v-if="false"/>
|
||||
<OasisNavigation v-if="true"/>
|
||||
<OasisHeader v-if="true"/>
|
||||
<OasisFeatures v-if="true"/>
|
||||
<OasisPricing v-if="true"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OasisHeader from '@/Oasis/Homepage/Components/OasisHeader'
|
||||
import OasisNavigation from '@/Oasis/Homepage/Components/OasisNavigation'
|
||||
import OasisFeatures from '@/Oasis/Homepage/Components/OasisFeatures'
|
||||
import OasisPricing from '@/Oasis/Homepage/Components/OasisPricing'
|
||||
import OasisHeader from '@/Oasis/Homepage/Components/OasisHeader'
|
||||
import { mapGetters } from 'vuex'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'Homepage',
|
||||
components: {
|
||||
OasisNavigation,
|
||||
OasisFeatures,
|
||||
OasisPricing,
|
||||
OasisHeader,
|
||||
},
|
||||
computed: {
|
||||
|
||||
+2
@@ -15,12 +15,14 @@
|
||||
.sub-title {
|
||||
@include font-size(25);
|
||||
font-weight: 600;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.sub-title-sm {
|
||||
@include font-size(23);
|
||||
font-weight: 600;
|
||||
line-height: 1.6;
|
||||
color: $text-secondary;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
|
||||
Vendored
+100
-6
@@ -7,8 +7,15 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.oasis-navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.oasis-header {
|
||||
padding-top: 45px;
|
||||
padding-top: 100px;
|
||||
background: linear-gradient(180deg, rgba(149, 189, 230, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
|
||||
}
|
||||
|
||||
@@ -37,12 +44,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.oasis-pricing {
|
||||
margin-top: 290px;
|
||||
|
||||
.title-wrapper {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.theme-button {
|
||||
@include font-size(18);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 10px 0;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.log-in, .logo {
|
||||
width: 235px;
|
||||
@@ -181,4 +202,77 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-box {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
max-width: 1325px;
|
||||
|
||||
.box {
|
||||
background: white;
|
||||
box-shadow: 0 5px 333px -22px #1B253935;
|
||||
border-radius: 12px;
|
||||
display: block;
|
||||
padding: 45px 40px 20px;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: 2;
|
||||
padding: 55px 40px 20px;
|
||||
background: $theme-bg-light;
|
||||
margin-top: -40px;
|
||||
margin-bottom: -40px;
|
||||
|
||||
.pricing-name, .pricing-data {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
color: $text-dark-secondary;
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
color: $text-dark-subtitle;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-icon {
|
||||
margin-bottom: 40px;
|
||||
|
||||
path {
|
||||
color: $theme;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-data {
|
||||
@include font-size(50);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.pricing-name {
|
||||
@include font-size(24);
|
||||
font-weight: 800;
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pricing-description {
|
||||
@include font-size(19);
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.pricing-vat {
|
||||
@include font-size(12);
|
||||
color: $text-secondary;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
opacity: 0.45;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user