1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
| <template>
| <div class="three-btn"
| :class="{'tree-btn-disabled': disabled}"
| @click="handleClick">
| <slot></slot>
| </div>
| </template>
|
| <script>
| export default {
| props: {
| disabled: {
| type: Boolean,
| default: false,
| }
| },
| methods: {
| handleClick() {
| if(!this.disabled) {
| this.$emit('click');
| }
| }
| }
| }
| </script>
|
| <style scoped>
| .three-btn{
| display: inline-block;
| color: rgba(255,255,255,1);
| text-decoration: none;
| background-color: rgb(5,170,219);
| font-family: 'Yanone Kaffeesatz';
| font-weight: 700;
| padding: 6px 32px;
| -webkit-border-radius: 8px;
| -moz-border-radius: 8px;
| border-radius: 8px;
| -webkit-box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| -moz-box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| text-align: center;
| cursor: pointer;
|
| -webkit-transition: all .1s ease;
| -moz-transition: all .1s ease;
| -ms-transition: all .1s ease;
| -o-transition: all .1s ease;
| transition: all .1s ease;
|
| -webkit-user-select: none;
| -moz-user-select: none;
| -ms-user-select: none;
| user-select: none;
| }
| .three-btn.tree-btn-disabled {
| color: #d4d4d4;
| cursor: not-allowed;
| }
| .three-btn.tree-btn-disabled:active {
| -webkit-box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| -moz-box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| box-shadow: 0px 9px 0px rgb(24, 137, 171), 0px 9px 25px rgba(0,0,0,.7);
| position: relative;
| top: 0px;
| }
| .three-btn:active {
| -webkit-box-shadow: 0px 3px 0px rgb(24, 137, 171), 0px 3px 6px rgba(0,0,0,.9);
| -moz-box-shadow: 0px 3px 0px rgb(24, 137, 171), 0px 3px 6px rgba(0,0,0,.9);
| box-shadow: 0px 3px 0px rgb(24, 137, 171), 0px 3px 6px rgba(0,0,0,.9);
| position: relative;
| top: 6px;
| }
| .three-btn:active:after {
| height: 6px;
| content: '';
| position: absolute;
| left: 0;
| top: 0;
| width: 100%;
| height: 6px;
| -webkit-transform: translateY(-6px);
| transform: translateY(-6px);
| }
| </style>
|
|
