chore(demo): 增加阴影

packages/www/src/App.vue

@@ -20,14 +20,15 @@
                 class="message"
                 href="https://github.com/any86/any-rule/issues/new"
                 target="_blank"
-            >提问</a>
+                >提问</a
+            >
         </article>
         <header>
             <h1>正则大全</h1>
 
             <a
                 onclick="_hmt.push(['_trackEvent', '交互', '点击github', '头部'])"
-                style="margin-left:15px;color:#000;"
+                style="margin-left: 15px; color: #000"
                 href="https://github.com/any86/any-rule"
                 target="_blank"
                 class="github"
@@ -41,7 +42,14 @@
                 <span>github</span>
             </a>
 
-            <iframe style="display:block;margin-top:15px;" src="https://ghbtns.com/github-btn.html?user=any86&repo=any-rule&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
+            <iframe
+                style="display: block; margin-top: 15px"
+                src="https://ghbtns.com/github-btn.html?user=any86&repo=any-rule&type=star&count=true"
+                frameborder="0"
+                scrolling="0"
+                width="170px"
+                height="20px"
+            ></iframe>
 
             <input
                 ref="searchInput"
@@ -53,7 +61,7 @@
                 class="search-input"
                 placeholder="搜索关键词, 如'手机'"
                 type="text"
-            >
+            />
         </header>
 
         <article>
@@ -72,7 +80,8 @@
                             :href="`https://github.com/any86/any-rule/issues/new?title=我有更好的正则: ${title}`"
                             target="_blank"
                             class="btn-better"
-                        >我有更好的正则</a>
+                            >我有更好的正则</a
+                        >
                         <code ref="code" class="javascript">{{ rule }}</code>
                     </p>
                     <section class="verification">
@@ -87,7 +96,7 @@
                                 @compositionend="check(index, 'blur')"
                                 @blur="check(index, 'blur')"
                                 @keyup="check(index, 'keyup')"
-                            >
+                            />
                             <span class="btn-clear" @click="reset(index)">清空</span>
                         </label>
 
@@ -101,13 +110,9 @@
 
                     <section class="trigger">
                         <h3>验证时机</h3>
-                        <label>
+                        <label> <input v-model="list[index].events.blur" type="checkbox" /> blur </label>
-                            <input v-model="list[index].events.blur" type="checkbox"> blur
-                        </label>
 
-                        <label>
+                        <label> <input v-model="list[index].events.keyup" type="checkbox" /> keyup </label>
-                            <input v-model="list[index].events.keyup" type="checkbox"> keyup
-                        </label>
                     </section>
                 </li>
             </ul>
@@ -137,9 +142,9 @@ export default {
                 isOk: undefined,
                 events: {
                     blur: true,
-                    keyup: true
+                    keyup: true,
-                }
+                },
-            }))
+            })),
         };
     },
 
@@ -225,8 +230,8 @@ export default {
                 /* eslint-disable */
                 _hmt.push(['_trackEvent', 'input框', this.rules[index].title, this.list[index].value]);
             }
-        }
+        },
-    }
+    },
 };
 </script>
 
@@ -319,7 +324,8 @@ main {
         h1 {
             display: inline-block;
         }
-        >.github{display: inline-flex;
+        > .github {
+            display: inline-flex;
             > span {
                 margin-left: 5px;
             }
@@ -336,7 +342,7 @@ main {
             border-color: #eee;
             border-width: 1px;
             border-style: solid;
-
+            box-shadow: 1px 2px 5px 1px rgba(0, 0, 0, 0.1);
             > .border {
                 position: absolute;
                 background: $primary;
@@ -398,7 +404,9 @@ main {
                     background-color: $danger;
                 }
 
-                >code{word-break:break-word;}
+                > code {
+                    word-break: break-word;
+                }
             }
 
             > section.verification {