mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 07:03:53 +08:00
126 lines
2.4 KiB
Vue
126 lines
2.4 KiB
Vue
<template>
|
|
<el-button
|
|
:class="['custom-button', `custom-button--${type}`]"
|
|
v-bind="$attrs"
|
|
@click="$emit('click', $event)"
|
|
>
|
|
<slot />
|
|
</el-button>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'CustomButton',
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: 'default',
|
|
validator: (val) => ['default', 'confirm', 'delete'].includes(val)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.custom-button--default {
|
|
width: fit-content;
|
|
background: #4998ff;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.el-button--small {
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
}
|
|
&.el-button--medium {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
&:hover {
|
|
background: #62a4fc;
|
|
color: #ffffff;
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 8px rgba(74, 124, 253, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&.is-disabled,
|
|
&.is-disabled:hover {
|
|
background: linear-gradient(to right, #f0f3fe, #f5f6fe);
|
|
color: rgba(74, 124, 253, 0.5);
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
transform: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.custom-button--confirm {
|
|
width: fit-content;
|
|
background: linear-gradient(to right, #4a7cfd, #8154fc);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.el-button--small {
|
|
font-size: 14px;
|
|
}
|
|
&.el-button--medium {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
&:hover {
|
|
color: white;
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 8px rgba(74, 124, 253, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&.is-disabled,
|
|
&.is-disabled:hover {
|
|
background: linear-gradient(to right, #a0b4fd, #b8a4fd);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
transform: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
.custom-button--delete {
|
|
width: fit-content;
|
|
background: #ff6b6b;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.el-button--small {
|
|
font-size: 14px;
|
|
}
|
|
&.el-button--medium {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
&:hover {
|
|
color: white;
|
|
border-color: transparent;
|
|
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&.is-disabled,
|
|
&.is-disabled:hover {
|
|
background: linear-gradient(to right, #ffaaaa, #ffcaca);
|
|
color: rgba(255, 255, 255, 0.6);
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
transform: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
</style>
|