58 lines
1.2 KiB
Vue
58 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
let data = reactive({
|
|
})
|
|
onMounted(()=>{
|
|
})
|
|
onUnmounted(()=>{
|
|
})
|
|
defineExpose({})
|
|
const {} = toRefs(data);
|
|
</script>
|
|
<template>
|
|
<div class="gradientButton">
|
|
<div class="bg">
|
|
<slot name="content">
|
|
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.gradientButton{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
--gradientButtonBorderRadius: var(--borderRadius,1rem);
|
|
--gradientButtonBorderWidth: var(--borderWidth,2px);
|
|
> .bg{
|
|
position: absolute;
|
|
inset: var(--gradientButtonBorderWidth);
|
|
display: flex;
|
|
background-color: #fff;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--gradientButtonBorderRadius);
|
|
overflow: hidden;
|
|
}
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
width: calc(100% + 0.2rem);
|
|
height: calc(100% + 0.2rem);
|
|
top: 50%;
|
|
left: 50%;
|
|
border-radius: var(--gradientButtonBorderRadius);
|
|
transform: translate(-50%, -50%);
|
|
background: linear-gradient(156deg,
|
|
#d3d3d3 0%,
|
|
#8a8682 40%,
|
|
#8a8682 65%,
|
|
#ebebeb 100%);
|
|
}
|
|
}
|
|
</style> |