2019-02-20 13:38:48 +09:00
|
|
|
<template>
|
2019-05-14 02:50:23 +09:00
|
|
|
<a class="zxrjzpcj" :href="url" :class="service" rel="noopener" target="_blank">
|
2019-02-20 13:38:48 +09:00
|
|
|
<fa :icon="icon" size="lg" fixed-width /><span>{{ text }}</span>
|
|
|
|
|
</a>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import Vue from 'vue';
|
|
|
|
|
|
|
|
|
|
export default Vue.extend({
|
|
|
|
|
props: ['url', 'text', 'icon', 'service']
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="stylus" scoped>
|
|
|
|
|
.zxrjzpcj
|
2019-02-21 06:04:42 +09:00
|
|
|
display inline-block
|
2019-02-20 13:38:48 +09:00
|
|
|
padding 6px 8px 6px 6px
|
2019-02-21 06:04:42 +09:00
|
|
|
margin-top 4px
|
|
|
|
|
margin-bottom 4px
|
2019-02-20 13:38:48 +09:00
|
|
|
border-radius 32px
|
2019-02-21 06:04:42 +09:00
|
|
|
white-space nowrap
|
2019-02-20 13:38:48 +09:00
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
text-decoration none
|
|
|
|
|
|
|
|
|
|
&.twitter
|
|
|
|
|
color #fff
|
|
|
|
|
background #1da1f3
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
background #0c87cf
|
|
|
|
|
|
|
|
|
|
&.github
|
|
|
|
|
color #fff
|
|
|
|
|
background #171515
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
background #000
|
|
|
|
|
|
|
|
|
|
&.discord
|
|
|
|
|
color #fff
|
|
|
|
|
background #7289da
|
|
|
|
|
|
|
|
|
|
&:hover
|
|
|
|
|
background #4968ce
|
|
|
|
|
|
|
|
|
|
</style>
|
