feat: update

src/components/Header/index.scss

@@ -10,10 +10,10 @@
 
   display: flex;
   justify-content: space-between;
-  background-color: var(--main-bg);
 }
 
 header.scrolled {
+  background-color: var(--main-bg);
   // background-color: var(--vp-nav-bg-color);
   // border-bottom: 1px solid var(--vp-nav-border-color, #e2e2e3);;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

src/views/Main.vue

@@ -69,7 +69,7 @@
                 </div>
               </button>
 
-              <button class="btn">Playground</button>
+              <button @click="goToPlayground" class="btn">Playground</button>
             </div>
           </div>
         </div>
@@ -230,8 +230,23 @@ export default defineComponent({
     };
 
     const handleLinkToTemplate = () => {
-      location.href =
-        "https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-app-ts";
+      if (location.hostname.includes("github")) {
+        window.open(
+          "https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-app-ts"
+        );
+      } else {
+        window.open(
+          "https://gitee.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-app-ts"
+        );
+      }
+    };
+
+    const goToPlayground = () => {
+      if (location.hostname.includes("github")) {
+        window.open("https://quark-ecosystem.github.io/quarkc-docs/playground");
+      } else {
+        window.open("https://quark-ecosystem.gitee.io/quarkc-docs/playground");
+      }
     };
 
     return {
@@ -242,6 +257,7 @@ export default defineComponent({
       scrollToThisRef,
       copyPrompt,
       iconCopiedChange,
+      goToPlayground,
     };
   },
 });

src/views/main.scss

@@ -145,14 +145,13 @@
   padding: 1rem 1.25rem;
   border-radius: 100px;
   font-size: 16px;
-}
-
-.install-btn {
 
   &:hover {
     border-color: #92a0b3;
   }
+}
 
+.install-btn {
   .cta-icon {
     position: relative;
   }