mirrors/any-rule
1
0
Fork 0
mirror of https://github.com/any86/any-rule.git synced 2025-07-14 15:38:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 修改链接为悬浮式

Browse Source
This commit is contained in:
383514580 2019-06-25 21:25:54 +08:00
parent c64634a25c
commit 87de9c0add
2 changed files with 158 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@ -14,6 +14,7 @@
margin: 0;
box-sizing: border-box;
}
body{overflow-x: hidden;overflow-y:scroll;}
a{
text-decoration:none;

123
src/App.vue
View File

@ -1,9 +1,19 @@
<template>
<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>
<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>
<input
ref="searchInput"
@ -29,7 +39,7 @@
<i class="border"></i>
<h2>{{title}}</h2>
<p class="rule">
<span :data-clipboard-text="rule" class="btn-copy">复制</span>
<span :data-clipboard-text="rule" class="btn-copy">点击复制</span>
{{rule}}
</p>
<section class="verification">
@ -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;
}
}
}
}