Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcjg-web
Showing
3 changed files
with
140 additions
and
34 deletions
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 | } | ... | ... |
-
Please register or sign in to post a comment