d19b4277 by 任超
2 parents 824c8309 07b5b0be
1 <template> 1 <template>
2 <button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType"> 2 <el-button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
3 <slot></slot> 3 <slot></slot>
4 </button> 4 </el-button>
5 </template> 5 </template>
6 <script> 6 <script>
7 export default { 7 export default {
8 name: 'Button', 8 name: 'Button',
9 props: { 9 props: {
10 nativeType: { 10 nativeType: {
11 type: String, 11 type: String,
12 default: 'cx' 12 default: 'cx'
13 },
13 }, 14 },
14 }, 15 methods: {
15 methods: { 16 handleClick (evt) {
16 handleClick (evt) { 17 this.$emit('click', evt);
17 this.$emit('click', evt); 18 }
18 } 19 }
19 } 20 };
20 };
21 </script> 21 </script>
22 <style scoped lang="scss"> 22 <style scoped lang="scss">
23 .button {
24 width: 76px;
25 height: 32px;
26 color: #ffffff;
27 margin: 0 5px;
28 cursor: pointer;
29 border: 0;
30 font-size: 14px;
31 }
32 23
33 .cx {
34 background: url('../image/btn.png') no-repeat 0 -34px;
35 background-size: cover;
36 }
37
38 .cz {
39 background: url('../image/btn.png') no-repeat 0 0;
40 background-size: cover;
41 }
42 </style> 24 </style>
......
...@@ -494,4 +494,61 @@ ...@@ -494,4 +494,61 @@
494 color: white; 494 color: white;
495 cursor: text; 495 cursor: text;
496 font-weight: normal; 496 font-weight: normal;
497 }
...\ No newline at end of file ...\ No newline at end of file
497 }
498
499 .button {
500 width: 76px;
501 height: 32px;
502 color: #ffffff;
503 cursor: pointer;
504 border: 0;
505 font-size: 12px;
506 }
507
508 .button:hover {
509 // width: 76px;
510 // height: 32px;
511 // color: #ffffff;
512 // cursor: pointer;
513 // border: 0;
514 // font-size: 12px;
515 // background: none;
516 }
517
518 .cx {
519 background: url("../image/btn.png") no-repeat 0 -34px;
520 background-size: cover;
521 }
522
523 .cx:hover {
524 background: url("../image/btn.png") no-repeat 0 -34px;
525 background-size: cover;
526 color: white;
527 }
528
529 .cz {
530 background: url("../image/btn.png") no-repeat 0 0;
531 background-size: cover;
532 }
533
534 .cz:hover {
535 background: url("../image/btn.png") no-repeat 0 0;
536 background-size: cover;
537 color: white;
538 }
539
540 .el-button:focus {
541 background: none;
542 }
543
544 .cx:focus {
545 background: url("../image/btn.png") no-repeat 0 -34px;
546 background-size: cover;
547 color: white;
548 }
549
550 .cz:focus {
551 background: url("../image/btn.png") no-repeat 0 0;
552 background-size: cover;
553 color: white;
554 }
......
...@@ -68,4 +68,71 @@ ...@@ -68,4 +68,71 @@
68 68
69 ::-webkit-scrollbar-thumb:hover { 69 ::-webkit-scrollbar-thumb:hover {
70 background-color: rgb(162, 164, 167); 70 background-color: rgb(162, 164, 167);
71 }
...\ No newline at end of file ...\ No newline at end of file
71 }
72
73 // 搜索框按钮的位置
74 .btnColRight {
75 box-sizing: border-box;
76 text-align: right;
77 }
78
79 // 按钮样式
80 .button:hover {
81 width: 86px;
82 height: 32px;
83 color: #ffffff;
84 cursor: pointer;
85 border: 0;
86 font-size: 12px;
87 background: none;
88 }
89
90 .cx {
91 width: 86px;
92 height: 32px;
93 background-color: #4162D8;
94 color: white;
95 border: none;
96 }
97
98 .cx:hover {
99 width: 86px;
100 height: 32px;
101 background-color: #4162D8;
102 color: white;
103 border: none;
104 }
105
106 .cz {
107 width: 86px;
108 height: 32px;
109 background-color: white;
110 color: #4162D8;
111
112 border: 1px solid rgba(65, 98, 216, 0.3);
113 }
114
115 .cz:hover {
116 width: 86px;
117 height: 32px;
118 background-color: white;
119 color: #4162D8;
120 border: 1px solid rgba(65, 98, 216, 0.3);
121 }
122
123 .el-button:focus {
124 // background: none;
125 }
126
127 .cx:focus {
128 color: white;
129 background-color: #4162D8;
130 background-size: cover;
131 }
132
133 .cz:focus {
134 color: #4162D8;
135 background-color: white;
136 ;
137 background-size: cover;
138 }
......