Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
07b5b0be by xiaomiao
Options

按钮样式调整

1 parent 0f706a21
Inline Side-by-side
Showing 3 changed files with 128 additions and 22 deletions
<template>
<button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
<el-button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
<slot></slot>
</button>
</el-button>
</template>
<script>
export default {
export default {
name: 'Button',
props: {
nativeType: {
......@@ -17,26 +17,8 @@ export default {
this.$emit('click', evt);
}
}
};
};
</script>
<style scoped lang="scss">
.button {
width: 76px;
height: 32px;
color: #ffffff;
margin: 0 5px;
cursor: pointer;
border: 0;
font-size: 14px;
}
.cx {
background: url('../image/btn.png') no-repeat 0 -34px;
background-size: cover;
}
.cz {
background: url('../image/btn.png') no-repeat 0 0;
background-size: cover;
}
</style>
......
......@@ -495,3 +495,60 @@
cursor: text;
font-weight: normal;
}
.button {
width: 76px;
height: 32px;
color: #ffffff;
cursor: pointer;
border: 0;
font-size: 12px;
}
.button:hover {
// width: 76px;
// height: 32px;
// color: #ffffff;
// cursor: pointer;
// border: 0;
// font-size: 12px;
// background: none;
}
.cx {
background: url("../image/btn.png") no-repeat 0 -34px;
background-size: cover;
}
.cx:hover {
background: url("../image/btn.png") no-repeat 0 -34px;
background-size: cover;
color: white;
}
.cz {
background: url("../image/btn.png") no-repeat 0 0;
background-size: cover;
}
.cz:hover {
background: url("../image/btn.png") no-repeat 0 0;
background-size: cover;
color: white;
}
.el-button:focus {
background: none;
}
.cx:focus {
background: url("../image/btn.png") no-repeat 0 -34px;
background-size: cover;
color: white;
}
.cz:focus {
background: url("../image/btn.png") no-repeat 0 0;
background-size: cover;
color: white;
}
......
......@@ -69,3 +69,70 @@
::-webkit-scrollbar-thumb:hover {
background-color: rgb(162, 164, 167);
}
// 搜索框按钮的位置
.btnColRight {
box-sizing: border-box;
text-align: right;
}
// 按钮样式
.button:hover {
width: 86px;
height: 32px;
color: #ffffff;
cursor: pointer;
border: 0;
font-size: 12px;
background: none;
}
.cx {
width: 86px;
height: 32px;
background-color: #4162D8;
color: white;
border: none;
}
.cx:hover {
width: 86px;
height: 32px;
background-color: #4162D8;
color: white;
border: none;
}
.cz {
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
border: 1px solid rgba(65, 98, 216, 0.3);
}
.cz:hover {
width: 86px;
height: 32px;
background-color: white;
color: #4162D8;
border: 1px solid rgba(65, 98, 216, 0.3);
}
.el-button:focus {
// background: none;
}
.cx:focus {
color: white;
background-color: #4162D8;
background-size: cover;
}
.cz:focus {
color: #4162D8;
background-color: white;
;
background-size: cover;
}
......