docs: 优化文档样式代码结构

yue1123 · Nov 27, 2023 · e77766e · e77766e
1 parent 941effd
commit e77766e
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 18 deletions.
diff --git a/docs/.vitepress/components/demo/vp-example.vue b/docs/.vitepress/components/demo/vp-example.vue
@@ -23,8 +23,5 @@
   .example-showcase {
     padding: 0 1rem;
     margin: 0.5px;
-    background-color: var(--vp-c-bg);
-    background-image: radial-gradient(circle, var(--vp-c-divider) 1px, rgba(0, 0, 0, 0) 1px);
-    background-size: 1rem 1rem;
   }
 </style>
diff --git a/docs/.vitepress/styles/code.css → docs/.vitepress/styles/code.less b/docs/.vitepress/styles/code.css → docs/.vitepress/styles/code.less
diff --git a/docs/.vitepress/styles/grid-bg.less b/docs/.vitepress/styles/grid-bg.less
@@ -0,0 +1,6 @@
+.VPContent.is-home,
+.example-showcase {
+  background-color: var(--vp-c-bg);
+  background-image: radial-gradient(circle, var(--vp-c-divider) 1px, transparent 1px);
+  background-size: 1rem 1rem;
+}
diff --git a/docs/.vitepress/styles/index.less b/docs/.vitepress/styles/index.less
@@ -0,0 +1,4 @@
+@import "./cardAnimation.less";
+@import "./code.less";
+@import "./grid-bg.less";
+@import "./main.less";
diff --git a/docs/.vitepress/styles/main.css → docs/.vitepress/styles/main.less b/docs/.vitepress/styles/main.css → docs/.vitepress/styles/main.less
@@ -1,20 +1,12 @@
 :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: -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%);
   --vp-home-hero-image-filter: blur(50px);
   --vp-sidebar-width: 282px;
 }
 
-/* grid background */
-.VPContent.is-home {
-  background-color: var(--vp-c-bg);
-  background-image: radial-gradient(circle, var(--vp-c-divider) 1px, var(--vp-c-bg) 1px);
-  background-size: 1rem 1rem;
-}
 
 .image-bg {
   position: absolute;
@@ -31,7 +23,7 @@
   opacity: 0.6 !important;
 }
 
-.image-bg + img {
+.image-bg+img {
   -webkit-user-drag: none;
   -moz-user-drag: none;
   -ms-user-drag: none;
@@ -232,4 +224,4 @@ input.my-input {
 
 .vp-doc tbody tr:hover {
   background-color: var(--vp-c-bg-soft);
-}
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,9 +1,7 @@
 import { watch } from 'vue'
 import defaultTheme from 'vitepress/theme'
 import baiduMapInit from 'vue3-baidu-map-gl'
-import '../styles/main.css'
-import '../styles/code.css'
-import '../styles/cardAnimation.less'
+import '../styles/index.less'
 
 import Demo from '../components/vp-demo.vue'
 import tooltipDirective from '../components/Tooltip/directive'