docs: 文档排版优化

yue1123 · Nov 29, 2023 · 517f07d · 517f07d
1 parent dc681e3
commit 517f07d
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 73 deletions.
diff --git a/docs/.vitepress/styles/main.less b/docs/.vitepress/styles/main.less
@@ -1,8 +1,8 @@
 :root {
   --vp-layout-max-width: 1620px;
   --vp-home-hero-image-background-image: -webkit-radial-gradient(rgba(96, 137, 241, 0.4) 40%,
-      rgba(66, 211, 146, 0.35) 60%);
-  --vp-home-hero-image-background-image: radial-gradient(rgba(96, 137, 241, 0.4) 40%, rgba(66, 211, 146, 0.35) 60%);
+      rgba(66, 211, 146, 0.25) 60%);
+  --vp-home-hero-image-background-image: radial-gradient(rgba(96, 137, 241, 0.4) 40%, rgba(66, 211, 146, 0.25) 60%);
   --vp-home-hero-image-filter: blur(50px);
   --vp-sidebar-width: 282px;
 }
@@ -15,7 +15,7 @@
   border-radius: 50%;
   background-image: var(--vp-home-hero-image-background-image);
   filter: var(--vp-home-hero-image-filter);
-  transform: translate(-50%, -50%) scale(0.8) !important;
+  transform: translate(-50%, -50%) scale(1) !important;
   opacity: 1;
 }
 

diff --git a/docs/index.md b/docs/index.md
@@ -4,8 +4,8 @@ title: Vue3 BaiduMap GL
 
 hero:
   name: Vue3 BaiduMap GL
-  text: 易用 & 完整 & 性能不错
-  tagline: 基于 Vue3 和 BMapGL 的常用地图组件 📦 + hooks 库 ⚡
+  text: Vue3 & BMapGL 组件库 + hooks 库
+  tagline: 易用 & 完整 & 性能不错
   image:
     src: /logo.svg
     alt: Vue3 BaiduMap GL
@@ -18,28 +18,28 @@ hero:
       link: https://github.com/yue1123/vue3-baidu-map-gl
 
 features:
-  - icon: 🚀
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Rocket.png" alt="Rocket" width="25" height="25" />
     title: 化繁 => 为简
     details: 将百度地图繁琐的 API 封装进组件，你只需关注组件本身
 
-  - icon: 📦
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Package.png" alt="Package" width="25" height="25" />
     title: 完整
     details: 20+ 高质量的开箱即用 Vue 3 组件以及 5+ hooks 封装
 
-  - icon: 📐
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Triangular%20Ruler.png" alt="Triangular Ruler" width="25" height="25" />
     title: 易用
     details: 遵循直觉的、简约的 Api 设计
 
-  - icon: ⚡
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="25" height="25" />
     title: 高性能
     details: Composition Api，更好的性能
 
-  - icon: 🔨
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Hammer.png" alt="Hammer" width="25" height="25" />
     title: 不是 AnyScript
     details: 完整的 TypeScript 支持，更好的体验
 
-  - icon: 🌏
-    title: WebGl
+  - icon: <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Globe%20Showing%20Asia-Australia.png" alt="Globe Showing Asia-Australia" width="25" height="25" />
+    title: WebGL
     details: 基于百度地图Gl版SDK，WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图
 ---
 
@@ -52,4 +52,4 @@ features:
     const element = document.querySelector('.image')
     VanillaTilt.init(element, { reverse: true, transition: true })
   })
-</script>
+</script>
diff --git a/docs/sponsor.md b/docs/sponsor.md
@@ -40,7 +40,7 @@
 
 <!-- - 虚位以待... -->
 
-| 昵称            | 充电 ☕️ |
+| <div style="display:flex;justify-content:flex-start;gap:5px;"><span>昵称</span> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Partying%20Face.png" alt="Partying Face" width="25" height="25" /></div>            | <div style="display:flex;justify-content:flex-start;gap:5px"><span>充电</span> <img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="25" height="25" /></div> |
 | --------------- | -------- |
 | 友\*\*\_A       | 10¥      |
 | Song 丶\*\*成眷 | 88.88¥   |

diff --git a/docs/zh-CN/guide/introduction.md b/docs/zh-CN/guide/introduction.md
@@ -1,9 +1,15 @@
 # Vue3 BaiduMap Gl
 
-<div style="display:flex;justify-content:flex-start;margin-top:15px;">
-<img src="https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square" alt="GitHub license" >
-<img src="https://img.shields.io/github/package-json/v/yue1123/vue3-baidu-map-gl?color=f90&style=flat-square" alt="" style="margin-left:10px">
-<img alt="npm" src="https://img.shields.io/npm/dm/vue3-baidu-map-gl?logo=npm&style=flat-square" style="margin-left:10px">
+<div style="display:flex;justify-content:flex-start;margin-top:15px;gap:10px;">
+<img src="https://img.shields.io/github/license/yue1123/img-previewer?style=flat-square" alt="" />
+<img src="https://img.shields.io/github/package-json/v/yue1123/vue3-baidu-map-gl?color=f90&style=flat-square" alt="GitHub package.json version (subfolder of monorepo)"/>
+<img alt="npm" src="https://img.shields.io/npm/dm/vue3-baidu-map-gl?logo=npm&style=flat-square" />
+<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/yue1123/vue3-baidu-map-gl?style=flat-square&color=%23daaa3f">
+<img alt="GitHub issues" src="https://img.shields.io/github/issues/yue1123/vue3-baidu-map-gl?style=flat-square" />
+<img alt="GitHub closed issues" src="https://img.shields.io/github/issues-closed/yue1123/vue3-baidu-map-gl?style=flat-square">
+<a href="https://play.vuejs.org/#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" target="_blank" rel="noopener noreferrer">
+  <img src='https://img.shields.io/badge/-Playground%20%E2%86%92-%23493edd?style=flat-square&logo=hackthebox&logoColor=%23fff' />
+</a>
 </div>
 
 基于百度地图 JavaScript GL 版（使用了 WebGL 对地图、覆盖物等进行渲染，支持 3D 视角展示地图） API 封装设计的 Vue3 组件库，开发体验良好，代码优雅。

diff --git a/docs/zh-CN/index.md b/docs/zh-CN/index.md
@@ -1,55 +1 @@
----
-layout: home
-title: Vue3 BaiduMap GL
-
-hero:
-  name: Vue3 BaiduMap GL
-  text: 易用 & 完整 & 性能不错
-  tagline: 基于 Vue3 和 BMapGL 的常用地图组件 📦 + hooks 库 ⚡
-  image:
-    src: /logo.svg
-    alt: Vue3 BaiduMap GL
-  actions:
-    - theme: brand
-      text: 开始使用
-      link: /zh-CN/guide/introduction
-    - theme: alt
-      text: View on GitHub
-      link: https://github.com/yue1123/vue3-baidu-map-gl
-
-features:
-  - icon: 🚀
-    title: 化繁 => 为简
-    details: 将百度地图繁琐的 API 封装进组件，你只需关注组件本身
-
-  - icon: 📦
-    title: 完整
-    details: 20+ 高质量的开箱即用 Vue 3 组件以及 5+ hooks 封装
-
-  - icon: 📐
-    title: 易用
-    details: 遵循直觉的、简约的 Api 设计
-
-  - icon: ⚡
-    title: 高性能
-    details: Composition Api，更好的性能
-
-  - icon: 🔨
-    title: 不是 AnyScript
-    details: 完整的 TypeScript 支持，更好的体验
-
-  - icon: 🌏
-    title: WebGl
-    details: 基于百度地图Gl版SDK，WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图
----
-
-<script lang="ts" setup>
-  import { onMounted } from 'vue'
-  import VanillaTilt from 'vanilla-tilt';
-
-
-  onMounted(() => {
-    const element = document.querySelector('.image')
-    VanillaTilt.init(element, { reverse: true, transition: true })
-  })
-</script>
+<!--@include: ../index.md-->