frontend/backend update

2026-04-23 09:40:39 +00:00 · 2020-06-05 16:48:11 +02:00
parent ca14838212
commit cffdc3ced9
67 changed files with 3611 additions and 1136 deletions
@@ -0,0 +1,89 @@
+<template>
+    <div id="single-page">
+        <div id="page-content" class="large-width center-page" v-show="! isLoading">
+            <MobileHeader :title="$router.currentRoute.meta.title"/>
+
+            <div class="content-page">
+                <div class="plan-title">
+                    <cloud-icon size="42" class="title-icon"></cloud-icon>
+                    <h1>Choose Your Plan</h1>
+                    <h2>Choose plan witch perfect fit your needs. All plans is billed monthly automatically via your credit card.</h2>
+                </div>
+
+                <PlanPricingTables @load="onLoadPricingTables" @selected-plan="onSelectTable"/>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import PlanPricingTables from '@/components/Others/PlanPricingTables'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import { CloudIcon } from 'vue-feather-icons'
+    import axios from 'axios'
+
+    export default {
+        name: 'UpgradePlan',
+        components: {
+            PlanPricingTables,
+            MobileHeader,
+            PageHeader,
+            CloudIcon,
+            Spinner,
+        },
+        data() {
+            return {
+                isLoading: true,
+            }
+        },
+        methods: {
+            onLoadPricingTables(state) {
+                this.isLoading = state
+            },
+            onSelectTable(plan) {
+                this.$store.commit('STORE_REQUESTED_PLAN', plan)
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .plan-title {
+        text-align: center;
+        max-width: 600px;
+        margin: 0 auto 80px;
+
+        path, line, polyline, rect, circle {
+            color: $theme;
+        }
+
+        h1 {
+            @include font-size(38);
+            font-weight: 800;
+            margin-bottom: 5px;
+        }
+
+        h2 {
+            @include font-size(20);
+            font-weight: 500;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+</style>