From bc421d25d26222cbec2dc62cf63547499be2e5be Mon Sep 17 00:00:00 2001
From: any86 <383514580@qq.com>
Date: Wed, 3 Feb 2021 13:42:45 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96web=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/www/src/App.vue | 64 +++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/packages/www/src/App.vue b/packages/www/src/App.vue
index 17880f9..31be71b 100644
--- a/packages/www/src/App.vue
+++ b/packages/www/src/App.vue
@@ -1,45 +1,42 @@
 <template>
     <main>
         <article class="fixed">
-            <a
-                onclick="_hmt.push(['_trackEvent', '交互', '点击github', '悬浮'])"
-                href="https://github.com/any86/any-rule"
-                target="_blank"
-                class="github"
-            >
-                <svg height="20" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true">
-                    <path
-                        fill-rule="evenodd"
-                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
-                    ></path>
-                </svg>
-                <span>github</span>
-            </a>
             <a
                 onclick="_hmt.push(['_trackEvent', '交互', '提问'])"
                 class="message"
                 href="https://github.com/any86/any-rule/issues/new"
                 target="_blank"
-                >提问</a
+                ><svg
+                    style="margin-right: 8px"
+                    height="24"
+                    width="24"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    aria-hidden="true"
+                >
+                    <path
+                        fill-rule="evenodd"
+                        fill="#fff"
+                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+                    ></path>
+                </svg>
+                提问</a
             >
         </article>
         <header>
-            <h1>正则大全</h1>
-
             <a
                 onclick="_hmt.push(['_trackEvent', '交互', '点击github', '头部'])"
-                style="margin-left: 15px; color: #000"
                 href="https://github.com/any86/any-rule"
                 target="_blank"
                 class="github"
             >
-                <svg height="20" viewBox="0 0 16 16" version="1.1" width="20" aria-hidden="true">
+                <!-- <svg height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
                     <path
                         fill-rule="evenodd"
                         d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
                     ></path>
-                </svg>
-                <span>github</span>
+                </svg> -->
+                <h1>🦕正则大全</h1>
             </a>
 
             <iframe
@@ -276,18 +273,17 @@ main {
         z-index: 1986;
         right: 15px;
         bottom: 15px;
-        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
-        border-radius: $radius;
-        overflow: hidden;
         > a {
             display: flex;
+            border-radius: $radius;
             align-content: center;
             align-items: center;
             justify-content: center;
             justify-items: center;
             font-size: 16px;
             text-align: center;
-            padding: 15px;
+            padding: 16px;
+            box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.1);
             &:active {
                 opacity: 0.6;
                 box-shadow: none;
@@ -321,13 +317,15 @@ main {
             border-radius: $radius;
             box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
         }
-        h1 {
-            display: inline-block;
-        }
+
+        // 标题
         > .github {
             display: inline-flex;
-            > span {
-                margin-left: 5px;
+            align-items: center;
+            color: #000;
+
+            h1 {
+                margin-left: 8px;
             }
         }
     }
@@ -356,6 +354,7 @@ main {
                 transition: all 600ms;
                 border-radius: $radius;
                 border-color: #eee;
+                box-shadow: none;
                 > .border {
                     animation: shrinkBorder 0.5s;
                     left: 0;
@@ -377,6 +376,7 @@ main {
                     color: #fff;
                     font-size: 12px;
                     cursor: pointer;
+                    box-shadow: 1px 2px 3px 1px $primary;
                     &.success {
                         &:after {
                             content: '复制成功';
@@ -395,13 +395,16 @@ main {
                     }
 
                     &:hover {
+                        transition: all 0.3s;
                         opacity: 0.6;
+                        box-shadow: none;
                     }
                 }
 
                 > .btn-better {
                     @extend .btn-copy;
                     background-color: $danger;
+                    box-shadow: 1px 2px 3px 1px $danger;
                 }
 
                 > code {
@@ -421,6 +424,7 @@ main {
                         border: 1px solid #ddd;
                         font-size: 16px;
                         & + .btn-clear {
+                            cursor: pointer;
                             padding: 5px;
                             color: #000;
                             display: inline-block;