feat: update

.vscode/settings.json

@@ -3,6 +3,7 @@
     "antfu",
     "Attributify",
     "composables",
+    "Darock",
     "demi",
     "iconify",
     "intlify",

src/components.d.ts

@@ -7,6 +7,9 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AppInfoFooter: typeof import('./components/AppInfoFooter.vue')['default']
+    BrandItem: typeof import('./components/BrandItem.vue')['default']
+    FeatureSection: typeof import('./components/FeatureSection.vue')['default']
     GradientBackground: typeof import('./components/GradientBackground.vue')['default']
     ImageBackground: typeof import('./components/ImageBackground.vue')['default']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']

src/components/AppInfoFooter.vue

@@ -0,0 +1,20 @@
+<script setup lang="tsx">
+defineProps({
+  developer: String,
+  version: String,
+  releaseDate: {
+    type: String,
+    default: new Date().toLocaleDateString(),
+  },
+})
+</script>
+
+<template>
+  <div ml2 mt2 flex flex-wrap gap-x3 font-size-3 op-30>
+    <span>开发者：{{ developer }}</span>
+    <span>版本号：{{ version }}</span>
+    <span>发布时间：{{ releaseDate }}</span>
+    <span cursor-pointer border-b="1 solid red-200" hover:border-b="2 solid yellow-300">应用权限</span>
+    <span cursor-pointer border-b="1 solid red-200" hover:border-b="2 solid yellow-300">隐私政策</span>
+  </div>
+</template>

src/components/BrandItem.vue

@@ -0,0 +1,15 @@
+<script setup lang="tsx">
+defineProps({
+  src: String,
+  name: String,
+})
+</script>
+
+<template>
+  <div flex cursor-pointer gap3>
+    <img class="max-h-15 w-auto rounded-full" :src="src" :alt="name" width="105" height="48" transition-all hover:transform-scale-110>
+    <h3 class="mt-4 text-lg text-gray-900 font-semibold dark:text-white">
+      {{ name }}
+    </h3>
+  </div>
+</template>

src/components/FeatureSection.vue

@@ -0,0 +1,69 @@
+<script setup lang="tsx">
+type Features = {
+  name: string
+  description: string
+  icon: string
+}[]
+
+defineProps({
+  name: String,
+  title: String,
+  desc: String,
+  features: {
+    type: Array as PropType<Features>,
+    default: [] as Features,
+  },
+  src: String,
+})
+
+const emit = defineEmits(['contact-click', 'download-click'])
+</script>
+
+<template>
+  <section class="overflow-hidden py-24 sm:py-32">
+    <div class="mx-auto max-w-7xl px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl flex flex-col gap-x-8 gap-y-16 lg:grid-cols-2 lg:mx-0 lg:max-w-none md:flex-row sm:gap-y-20">
+        <div class="lg:pl-4 lg:pt-4">
+          <div class="lg:max-w-xl">
+            <h2 class="text-base text-yellow-600 font-semibold leading-7">
+              {{ name }}
+            </h2>
+            <p class="mt-2 text-3xl text-gray-900 font-bold tracking-tight sm:text-4xl dark:text-white">
+              {{ title }}
+            </p>
+            <p class="mt-6 text-lg text-gray-600 leading-8 dark:text-gray-300">
+              {{ desc }}
+            </p>
+            <dl class="mt-10 max-w-xl text-base leading-7 lg:max-w-none space-y-8">
+              <div v-for="feature in features" :key="feature.name" class="relative pl-9">
+                <dt class="text-gray-900 font-semibold dark:text-white">
+                  <div absolute left-1 top-1 h-5 w-5 text-indigo-500 :class="feature.icon" aria-hidden="true" />
+                  {{ feature.name }}
+                </dt>
+                {{ ' ' }}
+                <dd class="inline">
+                  {{ feature.description }}
+                </dd>
+              </div>
+            </dl>
+            <div class="ml2 mt10 flex justify-between">
+              <button transition-all class="inline-flex items-center justify-center rounded-lg bg-yellow-600 px-6 py-3 text-base text-white font-medium shadow-lg hover:bg-yellow-700" @click="emit('download-click')">
+                立即下载
+              </button>
+            </div>
+            <div ml2 mt5 inline-block cursor-pointer>
+              <div flex items-center gap1.5 font-size-3.5 transition-all border-b="1 solid yellow-200" hover:border-b="2 solid yellow-300" @click="emit('contact-click')">
+                <div i-carbon-link />
+                <div>如果下载按钮不可用，请点此联系客服</div>
+              </div>
+            </div>
+            <slot name="footer" />
+          </div>
+        </div>
+        <div class="flex items-start justify-end lg:order-first">
+          <img :src="src" class="z-9 w-48rem rounded-xl shadow-xl ring-5 ring-gray-400/10 md:w-30rem">
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

src/components/GradientBackground.vue

@@ -2,14 +2,17 @@
   <div v-if="isDark" class="absolute inset-x-0 transform-gpu overflow-hidden blur-3xl -top-40 -z-10 sm:-top-80" aria-hidden="true">
     <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] rotate-[30deg] from-red to-blue bg-gradient-to-tr opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
   </div>
-  <div v-else class="absolute inset-x-0 transform-gpu overflow-hidden blur-3xl -top-40 -z-10 sm:-top-80" aria-hidden="true">
+  <div v-if="!isDark" class="absolute inset-x-0 transform-gpu overflow-hidden blur-3xl -top-40 -z-10 sm:-top-80" aria-hidden="true">
     <div class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] rotate-[30deg] from-red to-blue bg-gradient-to-tr opacity-40 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
   </div>
   <slot />
   <div v-if="isDark" class="absolute inset-x-0 top-[calc(100%-13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] -z-10" aria-hidden="true">
     <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] from-blue to-red bg-gradient-to-tr opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
   </div>
-  <div v-else class="absolute inset-x-0 top-[calc(100%-13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] -z-10" aria-hidden="true">
+  <div v-if="!isDark" class="absolute inset-x-0 top-[calc(100%-13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] -z-10" aria-hidden="true">
     <div class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] from-red to-blue bg-gradient-to-tr opacity-40 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
   </div>
+  <div v-if="isDark" class="absolute inset-x-0 top-[calc(100%--13rem)] transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%--30rem)] -z-10" aria-hidden="true">
+    <div class="relative right-[calc(50%+3rem)] aspect-[855/800] w-[36.125rem] from-blue to-red bg-gradient-to-tr opacity-30 sm:right-[calc(50%-36rem)] sm:w-[72.1875rem] -translate-x-1/2" style="clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)" />
+  </div>
 </template>