447 lines
20 KiB
Vue
447 lines
20 KiB
Vue
<script setup>
|
||
import { useData } from 'vitepress'
|
||
import { ref } from 'vue'
|
||
import {t, routerPath} from '../locale'
|
||
|
||
const { lang, isDark } = useData()
|
||
|
||
const subDate = ref('month')
|
||
const price = ref({
|
||
month: {
|
||
oldPrice: '15',
|
||
price: '10',
|
||
discount: '6.6'
|
||
},
|
||
year: {
|
||
oldPrice: '180',
|
||
price: '100',
|
||
discount: '5.5'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="custom-home">
|
||
|
||
<section>
|
||
<div class="mx-auto w-full lg:px-24 max-w-7xl md:px-12 items-center px-8 py-24">
|
||
<div>
|
||
<div class="text-center max-w-4xl mx-auto">
|
||
<div class="sm:flex sm:justify-center">
|
||
<a
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="0"
|
||
:duration="400"
|
||
:href="routerPath(lang, '/docs/notice')"
|
||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 border-2 border-solid border-primary flex-center duration-200 no-underline!"
|
||
uno-hover="bg-primary text-[var(--vp-c-neutral-inverse)]!"
|
||
>
|
||
<icon-custom-islenote class="text-16px mr-6px" />
|
||
<span class="block lg:inline"> {{t(lang, 'notice')}} <span aria-hidden="true">→</span> </span>
|
||
</a>
|
||
</div>
|
||
<h1
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="50"
|
||
:duration="400"
|
||
class="text-4xl! tracking-tight font-medium text-primary md:text-5xl font-display mt-12"
|
||
>
|
||
{{ t(lang, 'desc') }}
|
||
</h1>
|
||
<div
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="100"
|
||
:duration="400"
|
||
class="text-[var(--vp-c-text-3)] lg:text-xl max-w-2xl mt-4 mx-auto text-base"
|
||
>
|
||
{{ t(lang, 'desc.secondary') }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-center gap-3 mt-10 mb-5 flex-col sm:flex-row">
|
||
<a
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="200"
|
||
:duration="400"
|
||
target="_blank"
|
||
class="items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline!"
|
||
uno-hover="text-primary! border-primary"
|
||
href="https://v.islenote.com/register"
|
||
>
|
||
{{ t(lang, 'register') }}
|
||
</a>
|
||
<a
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="300"
|
||
:duration="400"
|
||
class="items-center justify-center h-12 font-medium rounded-xl inline-flex bg-primary border-solid border-2 border-primary duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-neutral-inverse)]! w-full no-underline!"
|
||
uno-hover="bg-transparent border-primary text-primary!"
|
||
:href="routerPath(lang, '/docs/guide')"
|
||
>
|
||
{{ t(lang, 'guide') }} →
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sm:flex sm:justify-center">
|
||
<a
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="400"
|
||
:duration="400"
|
||
href="https://v.islenote.com"
|
||
target="_blank"
|
||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
>
|
||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||
</a>
|
||
</div>
|
||
|
||
<div
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="500"
|
||
:duration="400"
|
||
class="mt-20 mb-10"
|
||
v-if="isDark"
|
||
>
|
||
<img src="/img/site/home_dark.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
|
||
</div>
|
||
<div
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="500"
|
||
:duration="400"
|
||
class="mt-20 mb-10"
|
||
v-if="!isDark"
|
||
>
|
||
<img src="/img/site/home_light.png" class="rounded-2 shadow-[var(--vp-c-shadow)]"lt="">
|
||
</div>
|
||
|
||
<div
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="500"
|
||
:duration="400"
|
||
id="features"
|
||
class="my-40"
|
||
>
|
||
<div class="sm:flex sm:flex-col sm:align-center">
|
||
<h1 class="text-4xl font-700 text-center">{{ t(lang, 'features') }}</h1>
|
||
<div
|
||
class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
|
||
>
|
||
{{ t(lang, 'features.desc') }}
|
||
</div>
|
||
<a
|
||
class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
:href="routerPath(lang, '/docs/guide')"
|
||
>
|
||
{{ t(lang, 'features.more') }}->
|
||
</a>
|
||
</div>
|
||
|
||
<div class="lg:gap-x-8 lg:grid-cols-3 max-w-4xl mt-14 mx-auto sm:gap-x-6 sm:gap-y-12 sm:grid sm:grid-cols-2 sm:space-y-0 space-y-6 text-center text-sm items-start">
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.faster')}}
|
||
</strong>
|
||
– {{t(lang, 'features.faster.desc')}}
|
||
</div>
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.style')}}
|
||
</strong>
|
||
– {{t(lang, 'features.style.desc')}}
|
||
</div>
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.review')}}
|
||
</strong>
|
||
– {{t(lang, 'features.review.desc')}}
|
||
</div>
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.extend')}}
|
||
</strong>
|
||
– {{t(lang, 'features.extend.desc')}}
|
||
</div>
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.privacy')}}
|
||
</strong>
|
||
– {{t(lang, 'features.privacy.desc')}}
|
||
</div>
|
||
<div class="text-[var(--vp-c-text-3)]">
|
||
<strong class="text-[var(--vp-c-text-2)]">
|
||
{{t(lang, 'features.unlimited')}}
|
||
</strong>
|
||
– {{t(lang, 'features.unlimited.desc')}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-motion
|
||
:initial="{ opacity: 0, y: 100 }"
|
||
:enter="{ opacity: 1, y: 0, scale: 1 }"
|
||
:delay="600"
|
||
:duration="400"
|
||
id="subscribe"
|
||
class="my-40"
|
||
>
|
||
<div class="sm:flex sm:flex-col sm:align-center">
|
||
<h1
|
||
class="text-4xl font-700 text-center"
|
||
>
|
||
{{ t(lang, 'subscribe') }}
|
||
</h1>
|
||
<div
|
||
class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
|
||
>
|
||
{{ t(lang, 'subscribe.desc') }}
|
||
</div>
|
||
<a
|
||
class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
:href="routerPath(lang, '/docs/setting/subscribe')"
|
||
>
|
||
{{ t(lang, 'subscribe.more') }}->
|
||
</a>
|
||
</div>
|
||
|
||
<div class="w-auto font-medium flex-center mt-12">
|
||
<div class="h-12 bg-[var(--vp-c-gray-soft)] rounded-xl box-border">
|
||
<div
|
||
class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border"
|
||
:class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'month'}"
|
||
@click="subDate = 'month'"
|
||
>
|
||
{{ t(lang, 'subscribe.monthly') }}
|
||
</div>
|
||
<div
|
||
class="w-auto h-full inline-flex justify-center items-center cursor-pointer rounded-xl duration-200 px-5 text-14px box-border"
|
||
:class="{'bg-primary text-[var(--vp-c-neutral-inverse)]': subDate == 'year'}"
|
||
@click="subDate = 'year'"
|
||
>
|
||
{{ t(lang, 'subscribe.yearly') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full grid grid-cols-2 lt-sm:grid-cols-1 gap-6 mt-12">
|
||
<div class="w-full flex justify-end lt-sm:justify-center">
|
||
<div
|
||
class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
|
||
>
|
||
<div class="w-full leading-6 font-700">{{ t(lang, 'subscribe.pu') }}</div>
|
||
<div class="h-full flex-1">
|
||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}1</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}2</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}3</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}4</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.free.desc')}}5</div>
|
||
</div>
|
||
<div class="w-full flex flex-col mt-8">
|
||
<div class="">
|
||
<span class="text-xl font-extrabold white">{{t(lang, 'subscribe.free')}}</span>
|
||
<span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
|
||
</div>
|
||
<a
|
||
class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
|
||
uno-hover="text-primary! border-primary"
|
||
target="_blank"
|
||
href="https://v.islenote.com/register"
|
||
>
|
||
{{ t(lang, 'register') }}
|
||
</a>
|
||
<a
|
||
href="https://v.islenote.com"
|
||
target="_blank"
|
||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
>
|
||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full flex justify-start lt-sm:justify-center">
|
||
<div
|
||
class="w-full text-sm flex flex-col justify-between flex-1 flex-shrink-0 max-w-xs p-6 border border-solid border-[var(--vp-c-divider)] rounded-xl box-border"
|
||
>
|
||
<div class="w-full leading-6">
|
||
<span class="font-700">{{ t(lang, 'subscribe.su') }}</span>
|
||
<span class="ml-4px font-400">
|
||
· {{ t(lang, 'subscribe.su.desc1') }}{{ price[subDate].discount
|
||
}}{{ t(lang, 'subscribe.su.desc2') }}
|
||
</span>
|
||
</div>
|
||
<div class="h-full flex-1">
|
||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}1</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}2</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}3</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}4</div>
|
||
<div class="mt-4">{{t(lang, 'subscribe.sub.desc')}}5</div>
|
||
</div>
|
||
<div class="w-full flex flex-col mt-8">
|
||
<div class="">
|
||
<span class="text-xl line-through">{{ price[subDate].oldPrice }}</span>
|
||
<span class="text-xl font-extrabold ml-4px text-primary"
|
||
>{{ price[subDate].price }}
|
||
</span>
|
||
<span class="text-base font-medium ml-1">¥/{{ subDate == 'year' ? t(lang, 'subscribe.year') : t(lang, 'subscribe.month') }}</span>
|
||
</div>
|
||
<a
|
||
class="mt-4 items-center justify-center h-12 font-medium rounded-xl inline-flex duration-200 lg:w-auto px-6 py-3 text-center text-[var(--vp-c-text-1)]! w-full border-2 border-solid border-[var(--vp-c-gray-soft)] no-underline! cursor-pointer"
|
||
uno-hover="text-primary! border-primary"
|
||
target="_blank"
|
||
href="https://v.islenote.com/register"
|
||
>
|
||
{{ t(lang, 'register') }}
|
||
</a>
|
||
<a
|
||
href="https://v.islenote.com"
|
||
target="_blank"
|
||
class="h-34px font-semibold text-primary rounded-full px-5 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
>
|
||
<span class="block lg:inline">{{ t(lang, 'account') }} {{ t(lang, 'login') }}<span aria-hidden="true">→</span> </span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="">
|
||
<div
|
||
class="mx-auto w-full lg:px-24 max-w-7xl md:px-12 items-center px-8 py-24"
|
||
>
|
||
<div class="sm:flex sm:flex-col sm:align-center">
|
||
<h1
|
||
class="text-4xl font-700 text-center"
|
||
>
|
||
{{t(lang, 'feedback')}}
|
||
</h1>
|
||
<div
|
||
class="text-[var(--vp-c-text-3)] mt-4 text-base text-center"
|
||
>
|
||
{{ t(lang, 'feedback.desc') }}
|
||
</div>
|
||
<a
|
||
class="h-34px font-semibold text-primary rounded-full px-5 mt-4 text-sm leading-6 flex-center duration-200 no-underline!"
|
||
uno-hover="underline!"
|
||
:href="routerPath(lang, '/docs/setting/feedback')"
|
||
>
|
||
{{ t(lang, 'feedback.more') }}->
|
||
</a>
|
||
</div>
|
||
<ul
|
||
class="mt-12! grid grid-cols-1 gap-16 lg:gap-8 md:gap-12 sm:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
<li class="list-none">
|
||
<div class="h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="flex gap-x-1">
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
</div>
|
||
<p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“在线笔记我一直担心用户隐私，希望可以让用户更有能力并能更好地控制个人数据。”</p>
|
||
</div>
|
||
<footer class="flex justify-between items-center mt-6">
|
||
<p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">用户·A</p>
|
||
<div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
|
||
<icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
<li class="list-none">
|
||
<div class="h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="flex gap-x-1">
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
</div>
|
||
<p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“反馈了一个需求点，很快就被官方实现了，看得出来你们很注重用户体验以及反馈，哈哈哈”</p>
|
||
</div>
|
||
<footer class="flex justify-between items-center mt-6">
|
||
<p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">用户·D</p>
|
||
<div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
|
||
<icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
<li class="list-none">
|
||
<div class="h-full flex flex-col justify-between">
|
||
<div>
|
||
<div class="flex gap-x-1">
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
<icon-material-symbols-family-star class="text-16px text-[var(--vp-c-indigo-1)]" />
|
||
</div>
|
||
<p class="lg:text-sm text-[var(--vp-c-text-3)] mt-4">“项目成功交付了，比预想中的要更好，很用心，nice，希望有机会可以继续合作。”</p>
|
||
</div>
|
||
<footer class="flex justify-between items-center mt-6">
|
||
<p class="lg:text-sm text-[var(--vp-c-text-2)] font-display">客户·R</p>
|
||
<div class="w-22px h-22px rounded-2 bg-[var(--vp-c-text-1)] flex-center">
|
||
<icon-custom-sefen class="text-18px text-[var(--vp-c-neutral-inverse)]" />
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.custom-home{
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
@media screen and (min-width: 640px) and (max-width: 960px) {
|
||
.custom-home-banner__top-image{
|
||
width: 280px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 640px) {
|
||
.custom-home-banner__top-image{
|
||
width: 200px;
|
||
}
|
||
}
|
||
</style> |