优化

monisuo-admin/src/components/marketing/pricing-plans/index.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+interface Plan {
+  id: string | number
+  title: string
+  description: string
+  badge?: string
+  price: string
+  unit: string
+  discount: string
+  recommendation?: boolean
+  billing?: {
+    cycle: string
+    period: string
+  }
+  features: string[]
+}
+
+const plans = computed<Plan[]>(() => [
+  {
+    id: 1,
+    title: t('marketing.pricingPlans.hobby.title'),
+    description: t('marketing.pricingPlans.hobby.description'),
+    price: t('marketing.pricingPlans.hobby.price'),
+    discount: t('marketing.pricingPlans.hobby.discount'),
+    unit: t('marketing.pricingPlans.hobby.unit'),
+    billing: {
+      cycle: t('marketing.pricingPlans.hobby.billing.cycle'),
+      period: t('marketing.pricingPlans.hobby.billing.period'),
+    },
+    features: [
+      t('marketing.pricingPlans.hobby.features.feature1'),
+      t('marketing.pricingPlans.hobby.features.feature2'),
+      t('marketing.pricingPlans.hobby.features.feature3'),
+      t('marketing.pricingPlans.hobby.features.feature4'),
+    ],
+  },
+  {
+    id: 2,
+    recommendation: true,
+    title: t('marketing.pricingPlans.starter.title'),
+    description: t('marketing.pricingPlans.starter.description'),
+    price: t('marketing.pricingPlans.starter.price'),
+    discount: t('marketing.pricingPlans.starter.discount'),
+    unit: t('marketing.pricingPlans.starter.unit'),
+    billing: {
+      cycle: t('marketing.pricingPlans.starter.billing.cycle'),
+      period: t('marketing.pricingPlans.starter.billing.period'),
+    },
+    features: [
+      t('marketing.pricingPlans.starter.features.feature1'),
+      t('marketing.pricingPlans.starter.features.feature2'),
+      t('marketing.pricingPlans.starter.features.feature3'),
+      t('marketing.pricingPlans.starter.features.feature4'),
+      t('marketing.pricingPlans.starter.features.feature5'),
+    ],
+  },
+  {
+    id: 3,
+    title: t('marketing.pricingPlans.business.title'),
+    description: t('marketing.pricingPlans.business.description'),
+    price: t('marketing.pricingPlans.business.price'),
+    discount: t('marketing.pricingPlans.business.discount'),
+    unit: t('marketing.pricingPlans.business.unit'),
+    billing: {
+      cycle: t('marketing.pricingPlans.business.billing.cycle'),
+      period: t('marketing.pricingPlans.business.billing.period'),
+    },
+    features: [
+      t('marketing.pricingPlans.business.features.feature1'),
+      t('marketing.pricingPlans.business.features.feature2'),
+      t('marketing.pricingPlans.business.features.feature3'),
+      t('marketing.pricingPlans.business.features.feature4'),
+      t('marketing.pricingPlans.business.features.feature5'),
+      t('marketing.pricingPlans.business.features.feature6'),
+    ],
+  },
+])
+</script>
+
+<template>
+  <div id="pricing-plans">
+    <h2 class="text-center font-black my-4 text-4xl">
+      {{ $t('marketing.pricingPlans.title') }}
+    </h2>
+    <h4 class="text-center text-xl">
+      {{ $t('marketing.pricingPlans.subtitle') }}
+    </h4>
+    <div
+      class="flex flex-col lg:flex-row lg:items-start items-center justify-center gap-4 mt-8"
+    >
+      <UiCard
+        v-for="plan in plans"
+        :key="plan.id"
+        class="w-full lg:w-1/5"
+        :class="{
+          'border-2 border-primary bg-primary/10':
+            plan.recommendation,
+        }"
+      >
+        <h3 class="text-xl font-black text-center">
+          {{ plan.title }}
+        </h3>
+        <div class="text-sm text-center text-neutral-400">
+          {{ plan.description }}
+        </div>
+
+        <div class="flex items-top my-2 justify-center">
+          <div class="text-2xl font-black">
+            {{ plan.unit }}
+            <span class="text-4xl">{{ plan.price }}</span>
+          </div>
+          <div
+            v-if="plan.discount"
+            class="text-sm font-bold line-through text-neutral-400"
+          >
+            {{ plan.unit }}{{ plan.discount }}
+          </div>
+        </div>
+
+        <div class="text-sm mb-4 text-center">
+          <ul>
+            <li v-for="feature in plan.features" :key="feature" class="mb-1">
+              <Icon icon="carbon:checkmark" class="inline-block" />
+              {{ feature }}
+            </li>
+          </ul>
+        </div>
+        <div class="flex justify-center mx-8">
+          <UiButton block>
+            {{ $t('marketing.pricingPlans.buy') }}
+          </UiButton>
+        </div>
+      </UiCard>
+    </div>
+  </div>
+</template>