feature(vitepress): implement vitepress home farris feature

packages/ui-vue/docs/.vitepress/farris-theme/components/VPHome.vue

@@ -19,9 +19,7 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
 
 <style scoped>
 .VPHome {
-  padding-bottom: 96px;
+  padding-bottom: 32px;
-  background-image: url(/assets/banner.png);
-  background-size: cover;
 }
 
 .VPHome :deep(.VPHomeSponsors) {

packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeFeatures.vue

@@ -1,14 +1,116 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData } from "vitepress";
-import VPFeatures from './VPFeatures.vue'
+import VPFeatures from "./VPFeatures.vue";
 
-const { frontmatter: fm } = useData()
+const { frontmatter: fm } = useData();
 </script>
 
 <template>
-  <VPFeatures
+  <div class="f-feature">
-    v-if="fm.features"
+    <div class="f-feature-subtitle">快速上手</div>
-    class="VPHomeFeatures"
+    <div class="f-feature-title">灵活丰富的生态平台</div>
-    :features="fm.features"
+    <div class="f-feature-container">
-  />
+      <div class="f-feature-item">
+        <div class="f-feature-item-icon">
+          <img src="/assets/efficiency.png" />
+        </div>
+        <div class="f-feature-item-content">
+          <div class="f-feature-item-title"><span>e</span>fficiency 高效</div>
+          <div class="f-feature-item-subtitle">快速、高效、智能极致体验</div>
+        </div>
+      </div>
+      <div class="f-feature-item">
+        <div class="f-feature-item-icon">
+          <img src="/assets/clarity.png" />
+        </div>
+        <div class="f-feature-item-content">
+          <div class="f-feature-item-title"><span>c</span>larity 清晰</div>
+          <div class="f-feature-item-subtitle">清晰的指向亦是效率的提升</div>
+        </div>
+      </div>
+      <div class="f-feature-item">
+        <div class="f-feature-item-icon">
+          <img src="/assets/consistency.png" />
+        </div>
+        <div class="f-feature-item-content">
+          <div class="f-feature-item-title"><span>c</span>onsistency 一致</div>
+          <div class="f-feature-item-subtitle">多终端一致亦是丝滑体验</div>
+        </div>
+      </div>
+      <div class="f-feature-item">
+        <div class="f-feature-item-icon">
+          <img src="/assets/beauty.png" />
+        </div>
+        <div class="f-feature-item-content">
+          <div class="f-feature-item-title"><span>b</span>eauty 美观</div>
+          <div class="f-feature-item-subtitle">优雅的表现手法提升质感</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <VPFeatures v-if="fm.features" class="VPHomeFeatures" :features="fm.features" />
 </template>
+
+<style scoped>
+.f-feature {
+  padding-top: 80px;
+}
+
+.f-feature-title {
+  font-size: 32px;
+  color: #1d2129;
+  letter-spacing: 0;
+  text-align: center;
+  font-weight: 500;
+  margin-bottom: 40px;
+}
+
+.f-feature-subtitle {
+  font-size: 16px;
+  color: #86909c;
+  letter-spacing: 0;
+  text-align: center;
+  font-weight: 400;
+  margin-bottom: 6px;
+}
+
+.f-feature-container {
+  display: flex;
+  margin: 10px auto;
+  width: 1220px;
+  box-shadow: 0 4px 20px rgb(230 230 230 / 50%);
+  padding: 48px 32px;
+}
+.f-feature-item {
+  flex: 1;
+  display: flex;
+}
+
+.f-feature-item-icon img {
+  width: 54px;
+  height: 54px;
+}
+
+.f-feature-item-content {
+  margin-left: 20px;
+}
+
+.f-feature-item-title {
+  font-size: 20px;
+  color: rgba(0, 0, 0, 0.75);
+  letter-spacing: 0;
+  line-height: 28px;
+  font-weight: 500;
+}
+
+.f-feature-item-title span {
+  color: #3661ff;
+}
+
+.f-feature-item-subtitle {
+  font-size: 14px;
+  color: rgba(94, 109, 130, 0.8);
+  letter-spacing: 0;
+  font-weight: 400;
+}
+</style>

packages/ui-vue/docs/.vitepress/farris-theme/components/VPHomeHero.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useData } from 'vitepress'
+import { useData } from "vitepress";
-import VPHero from './VPHero.vue'
+import VPHero from "./VPHero.vue";
 
-const { frontmatter: fm } = useData()
+const { frontmatter: fm } = useData();
 </script>
 
 <template>
@@ -16,3 +16,10 @@ const { frontmatter: fm } = useData()
     :actions="fm.hero.actions"
   />
 </template>
+
+<style scoped>
+.VPHomeHero {
+  background-image: url(/assets/banner.png);
+  background-size: cover;
+}
+</style>

packages/ui-vue/docs/.vitepress/farris-theme/styles/base.css

@@ -24,7 +24,7 @@ body {
   font-size: 16px;
   font-weight: 400;
   color: var(--vp-c-text-1);
-  background-color: var(--vp-c-bg);
+  background-color: var(--vp-c-bg) !important;
   direction: ltr;
   font-synthesis: none;
   text-rendering: optimizeLegibility;