From ce3ba29209c961d28c8a3bb1b7c120fe574c5cfb Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Tue, 26 Dec 2023 14:54:04 +0800
Subject: [PATCH] chore: improve demo

---
 src/demo/CodeGen.vue          |  4 ---
 src/demo/Demo.vue             | 64 ++++++++++++++++++++++++++++++-----
 src/demo/data/logo.js         |  4 +++
 src/demo/examples/Example.vue |  4 +--
 4 files changed, 61 insertions(+), 15 deletions(-)

diff --git a/src/demo/CodeGen.vue b/src/demo/CodeGen.vue
index ca3ffa5..a41eb39 100644
--- a/src/demo/CodeGen.vue
+++ b/src/demo/CodeGen.vue
@@ -324,10 +324,6 @@ input[type="number"] {
   overflow: hidden;
   background-color: #fff;
   box-shadow: 0 0 45px rgba(0, 0, 0, 0.2);
-
-  h2 {
-    margin-top: 0;
-  }
 }
 
 .options {
diff --git a/src/demo/Demo.vue b/src/demo/Demo.vue
index bdd4ec7..2d47094 100644
--- a/src/demo/Demo.vue
+++ b/src/demo/Demo.vue
@@ -56,12 +56,23 @@ watch(codeOpen, open => {
       <a href="https://github.com/ecomfe/vue-echarts">Vue-ECharts</a>
     </h1>
     <p class="desc">
-      Vue.js component for Apache ECharts. (<a
+      Vue.js component for Apache ECharts™. (<a
         href="https://github.com/ecomfe/vue-echarts#readme"
         >docs</a
       >)
     </p>
 
+    <h2 class="sep">Examples</h2>
+    <p>
+      <small
+        >See
+        <a href="https://echarts.apache.org/examples/en/index.html"
+          >echarts.apache.org/examples</a
+        >
+        for all examples.</small
+      >
+    </p>
+
     <bar-chart />
     <pie-chart />
     <polar-chart />
@@ -132,6 +143,19 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+  box-shadow: 0 1px 0 0 #42b983;
+  transition: box-shadow 0.2s;
+
+  &:hover {
+    box-shadow: 0 2px 0 0 #42b983;
+  }
+}
+
+h1,
+h2,
+h3 {
+  color: #2c3e50;
+  font-weight: 400;
 }
 
 h1 {
@@ -139,13 +163,32 @@ h1 {
   font-family: Inter, "Helvetica Neue", Arial, sans-serif;
 }
 
-h1,
 h2 {
-  color: #2c3e50;
-  font-weight: 400;
+  margin-top: 1em;
+  margin-bottom: 1em;
 }
 
-h2 {
+.sep {
+  margin-top: 6em;
+  margin-bottom: 1.8em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  font-size: 1.25em;
+  color: #7f8c8d;
+  opacity: 0.6;
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+    width: 48px;
+    border-bottom: 1px dotted currentColor;
+  }
+}
+
+h3 {
   margin-top: 2em;
   padding-top: 1em;
   font-size: 1.2em;
@@ -208,15 +251,18 @@ footer {
   a {
     display: inline-block;
     margin: 0 5px;
-    padding: 3px 0 6px;
     color: #7f8c8d;
     font-size: 2em;
-    text-decoration: none;
   }
+}
 
+h1,
+h2,
+h3 {
+  a,
   a:hover {
-    padding-bottom: 3px;
-    border-bottom: 3px solid #42b983;
+    text-decoration: none;
+    box-shadow: none;
   }
 }
 
diff --git a/src/demo/data/logo.js b/src/demo/data/logo.js
index 20cd053..8ef1404 100644
--- a/src/demo/data/logo.js
+++ b/src/demo/data/logo.js
@@ -25,6 +25,10 @@ export default {
             return "";
           }
         }
+      },
+      itemStyle: {
+        shadowBlur: 12,
+        shadowColor: "rgba(0, 0, 0, 0.25)"
       }
     }
   ]
diff --git a/src/demo/examples/Example.vue b/src/demo/examples/Example.vue
index 266b4e4..f35a334 100644
--- a/src/demo/examples/Example.vue
+++ b/src/demo/examples/Example.vue
@@ -1,10 +1,10 @@
 <template>
-  <h2 :id="id">
+  <h3 :id="id">
     <a :href="`#${id}`">
       {{ title }}
       <small v-if="desc">{{ desc }}</small>
     </a>
-  </h2>
+  </h3>
   <section>
     <figure class="fig hero" v-if="!split">
       <slot />