From 87de9c0addfd711f23b1561d68350d07a8b30fae Mon Sep 17 00:00:00 2001
From: 383514580 <383514580@qq.com>
Date: Tue, 25 Jun 2019 21:25:54 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BF=AE=E6=94=B9=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E4=B8=BA=E6=82=AC=E6=B5=AE=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html |   1 +
 src/App.vue       | 241 ++++++++++++++++++++++++++++++----------------
 2 files changed, 158 insertions(+), 84 deletions(-)

diff --git a/public/index.html b/public/index.html
index 55b7ac1..7d239bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,7 @@
             margin: 0;
             box-sizing: border-box;
         }
+        body{overflow-x: hidden;overflow-y:scroll;}
 
         a{
             text-decoration:none;
diff --git a/src/App.vue b/src/App.vue
index 120b1cf..0c170b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,71 +1,81 @@
 <template>
-    <main>
-        <header>
-            <h1>正则大全</h1>
-            <a 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 class="btn-msg" href="https://github.com/any86/any-rule" target="_blank">留言</a>
+  <main>
+    <article class="fixed">
+      <a 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 class="message" href="https://github.com/any86/any-rule/issues/new" target="_blank">留言</a>
+    </article>
+    <header>
+      <h1>正则大全</h1>
 
-            <input
-                ref="searchInput"
-                v-model="keyword"
-                autofocus
-                @keyup="search"
-                @mouseenter="selectSearchInputText"
-                @focus="selectSearchInputText"
-                class="search-input"
-                placeholder="搜索关键词, 如'手机'"
-                type="text"
-            >
-        </header>
+      <input
+        ref="searchInput"
+        v-model="keyword"
+        autofocus
+        @keyup="search"
+        @mouseenter="selectSearchInputText"
+        @focus="selectSearchInputText"
+        class="search-input"
+        placeholder="搜索关键词, 如'手机'"
+        type="text"
+      >
+    </header>
 
-        <article>
-            <ul v-if="0 < rules.length" class="list">
-                <li
-                    @mouseenter="mouseenterHandler(index)"
-                    v-for="({title, rule, events}, index) in rules"
-                    :key="title"
-                    class="row"
-                >
-                    <i class="border"></i>
-                    <h2>{{title}}</h2>
-                    <p class="rule">
-                        <span :data-clipboard-text="rule" class="btn-copy">复制</span>
-                        {{rule}}
-                    </p>
-                    <section class="verification">
-                        <label>
-                            <input
-                                ref="input"
-                                v-model="list[index].value"
-                                @blur="check(index, 'blur')"
-                                @keyup="check(index, 'keyup')"
-                            >
-                            <span class="btn-clear" @click="reset(index)">清空</span>
-                        </label>
+    <article>
+      <ul v-if="0 < rules.length" class="list">
+        <li
+          @mouseenter="mouseenterHandler(index)"
+          v-for="({title, rule, events}, index) in rules"
+          :key="title"
+          class="row"
+        >
+          <i class="border"></i>
+          <h2>{{title}}</h2>
+          <p class="rule">
+            <span :data-clipboard-text="rule" class="btn-copy">点击复制</span>
+            {{rule}}
+          </p>
+          <section class="verification">
+            <label>
+              <input
+                ref="input"
+                v-model="list[index].value"
+                @blur="check(index, 'blur')"
+                @keyup="check(index, 'keyup')"
+              >
+              <span class="btn-clear" @click="reset(index)">清空</span>
+            </label>
 
-                        <div class="tip">
-                            <template v-if="undefined !== list[index].isOk">
-                                <p v-if="list[index].isOk" class="success">通过</p>
-                                <p v-else class="error">不通过</p>
-                            </template>
-                        </div>
-                    </section>
+            <div class="tip">
+              <template v-if="undefined !== list[index].isOk">
+                <p v-if="list[index].isOk" class="success">通过</p>
+                <p v-else class="error">不通过</p>
+              </template>
+            </div>
+          </section>
 
-                    <section class="trigger">
-                        <h3>验证时机</h3>
-                        <label>
-                            <input v-model="list[index].events.blur" type="checkbox"> blur
-                        </label>
+          <section class="trigger">
+            <h3>验证时机</h3>
+            <label>
+              <input v-model="list[index].events.blur" type="checkbox"> blur
+            </label>
 
-                        <label>
-                            <input v-model="list[index].events.keyup" type="checkbox"> keyup
-                        </label>
-                    </section>
-                </li>
-            </ul>
-            <p v-else align="center">无数据</p>
-        </article>
-    </main>
+            <label>
+              <input v-model="list[index].events.keyup" type="checkbox"> keyup
+            </label>
+          </section>
+        </li>
+      </ul>
+      <p v-else align="center">无数据</p>
+    </article>
+  </main>
 </template>
 
 <script>
@@ -77,11 +87,11 @@ export default {
     components: {},
 
     data() {
-        Object.freeze(RULES);
+        Object.freeze(RULES.reverse());
 
         return {
             keyword: '',
-            rules:RULES,
+            rules: RULES,
             list: RULES.map(() => ({
                 value: '',
                 isOk: undefined,
@@ -99,19 +109,23 @@ export default {
         this.$on('hook:destroyed', () => {
             clipboard.destroy();
         });
-
-        clipboard.on('success', ()=> {
-            alert('复制成功!');
-            // console.info('Action:', e.action);
-            // console.info('Text:', e.text);
-            // console.info('Trigger:', e.trigger);
-            // e.clearSelection();
+        let timer = null;
+        clipboard.on('success', (e) => {
+            clearTimeout(timer);
+            const el = e.trigger;
+            if (el.classList.contains('success')) {
+                el.classList.remove('success');
+            }
+            el.classList.add('success');
+            timer = setTimeout(() => {
+                el.classList.remove('success');
+            }, 1000);
         });
     },
 
     methods: {
         search() {
-            if ('' !== this.keyword){
+            if ('' !== this.keyword) {
                 this.rules = this.rules.filter(({ title }) => -1 !== title.indexOf(this.keyword.toLowerCase()));
             } else {
                 this.rules = RULES;
@@ -149,6 +163,15 @@ export default {
 <style lang="scss" scoped>
 $primary: rgb(139, 204, 102);
 $radius: 4px;
+@keyframes slide {
+    from {
+        top: 0;
+    }
+    to {
+        top: 100px;
+    }
+}
+
 @keyframes shrinkBorder {
     from {
     }
@@ -166,8 +189,47 @@ main {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     max-width: 1000px;
-    width:100%;
+    width: 100%;
     margin: auto;
+
+    .fixed {
+        position: fixed;
+        z-index: 1986;
+        left: 15px;
+        bottom: 15px;
+        box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1);
+        border-radius: $radius;
+        overflow: hidden;
+        > a {
+            display: flex;
+            align-content: center;
+            align-items: center;
+            justify-content: center;
+            justify-items: center;
+            font-size: 16px;
+            text-align: center;
+            padding: 15px;
+            &:active {
+                opacity: 0.6;
+                box-shadow: none;
+            }
+            &:hover {
+                opacity: 0.6;
+            }
+            &.github {
+                background: rgba(#eee, 0.9);
+                > span {
+                    color: #000;
+                    padding: 0 10px;
+                }
+            }
+            &.message {
+                background: rgba($primary, 0.9);
+                color: #fff;
+            }
+        }
+    }
+
     header {
         padding: 15px;
         > .search-input {
@@ -179,16 +241,9 @@ main {
             border-radius: $radius;
             box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1);
         }
-        h1{display:inline-block;}
-        .github{
-            margin-left:15px;
-            display:inline-flex;
-            width:100px;
-            height:30px;
-            >span{padding-left:5px;}
+        h1 {
+            display: inline-block;
         }
-        .btn-msg{padding:5px;background:$primary;}
-        
     }
     ul.list {
         padding: 15px;
@@ -226,7 +281,7 @@ main {
                 background: #eee;
                 color: #000;
                 border-radius: $radius;
-                line-height:2;
+                line-height: 2;
                 > .btn-copy {
                     border-radius: $radius;
                     margin-right: 15px;
@@ -235,7 +290,18 @@ main {
                     color: #fff;
                     font-size: 12px;
                     cursor: pointer;
-
+                    &.success {
+                        &:after {
+                            content: '复制成功';
+                            border-radius: $radius;
+                            display: block;
+                            padding: 5px 15px;
+                            background: rgba(0, 0, 0, 0.8);
+                            color: #fff;
+                            text-align: center;
+                            position: absolute;
+                        }
+                    }
                     &:active {
                         opacity: 0.6;
                         color: #444;
@@ -262,6 +328,13 @@ main {
                             padding: 5px;
                             color: #000;
                             display: inline-block;
+                            font-size: 14px;
+                            &:active {
+                                color: #ccc;
+                            }
+                            &:hover {
+                                color: #666;
+                            }
                         }
                     }
                 }