diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 8361c7d..0a77876 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -36,7 +36,8 @@
flex-wrap: wrap;
}*/
-.a-button, .a-button-cover {
+.a-button,
+.a-button-cover {
border-radius: 2rem;
border-width: 1px;
border-style: solid;
@@ -58,13 +59,14 @@
color: #fff !important;
}
-.a-button:hover, .a-button-cover:hover {
+.a-button:hover,
+.a-button-cover:hover {
color: inherit;
opacity: 0.8;
}
/* 没有元素时隐藏侧边栏 */
-.b-main-hide button.sidebar-toggle{
+.b-main-hide button.sidebar-toggle {
display: none !important;
}
@@ -81,4 +83,58 @@
/* logo 图片 */
a.app-name-link img {
width: var(--app-name-img-width);
-}
\ No newline at end of file
+}
+
+/* 主题卡片 */
+.theme-card {
+ padding: 1rem;
+ width: 100%;
+ min-width: 300px;
+}
+
+.theme-content {
+ position: relative;
+ border-radius: 0.25rem;
+ overflow: hidden;
+ box-shadow: rgb(0, 0, 0, 0.1) 0 1px 3px 0, rgb(0, 0, 0, 0.06) 0 1px 2px 0;
+ transition: all 0.2s;
+}
+
+.theme-img {
+ width: 100%;
+ color: inherit;
+ text-decoration: inherit;
+ display: block;
+ padding-top: 56.25%;
+ background-color: transparent;
+ background-size: cover;
+}
+
+.theme-button {
+ display: flex;
+ padding: 1rem;
+ border-top: 1px rgb(234, 234, 234);
+ align-items: center;
+ justify-content: space-between;
+}
+
+.theme-text {
+ font-size: 1.25rem;
+ font-weight: 500;
+ margin: 0;
+}
+
+.theme-icon {
+ color: inherit;
+ text-decoration: inherit;
+ font-size: 0.875rem;
+ background-color: transparent;
+}
+
+.theme-icon:first-of-type {
+ margin-right: 1rem;
+}
+
+.theme-icon img{
+ width: 1rem;
+}
diff --git a/docs/assets/images/download.svg b/docs/assets/images/download.svg
new file mode 100644
index 0000000..dadee47
--- /dev/null
+++ b/docs/assets/images/download.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/images/eye.svg b/docs/assets/images/eye.svg
new file mode 100644
index 0000000..df79c6f
--- /dev/null
+++ b/docs/assets/images/eye.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
index 9d3e9fc..5608932 100644
--- a/docs/assets/js/main.js
+++ b/docs/assets/js/main.js
@@ -1,3 +1,34 @@
+// vue3 主题卡片组件
+const themeCard = {
+ template: `
+
+ `,
+ props: {
+ name: String, // 主题名
+ secr: String, // 截图
+ prev: String, // 预览地址
+ repo: String, // 仓库地址
+ },
+ data() {
+ return {}
+ },
+};
+
// 隐藏空侧边栏的插件函数
function hideEmptySidebar(hook, vm) {
const setHide = () => {
@@ -26,7 +57,7 @@ window.$docsify = {
relativePath: false,
basePath: "/",
homepage: "READEME.md",
- notFoundPage: 'not-found.md',
+ notFoundPage: "not-found.md",
loadNavbar: true,
// 小屏设备下合并导航栏到侧边栏
mergeNavbar: false,
@@ -47,6 +78,10 @@ window.$docsify = {
"/([a-z]*-[a-z]*)/docs/.*/_sidebar.md": "/$1/docs/_sidebar.md",
},
plugins: [hideEmptySidebar],
+ // vue 组件
+ vueComponents: {
+ "theme-card": themeCard,
+ },
// vue 全局选项
vueGlobalOptions: {
data() {
diff --git a/docs/index.html b/docs/index.html
index a96c2c7..173e433 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -35,7 +35,7 @@
-
+
+ 
+