<template>
<div class="logout-button" @click="handleClick">
<div class="arrow">
<svg
t="1726731738552"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6907"
width="200"
height="200"
>
<path
d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z"
p-id="6908"
></path>
</svg>
</div>
<div class="slot">
<slot>按钮</slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
handleClick() {
this.$emit('click')
},
},
}
</script>
<style scoped>
.logout-button .arrow svg {
width: 50%;
height: 50%;
}
.logout-button .arrow svg path {
fill: white;
}
.logout-button {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: 50px;
height: 50px;
overflow: hidden;
cursor: pointer;
background-color: rgb(255, 64, 64);
border-radius: 25px;
box-shadow: 0 0 5px 1px rgb(255, 64, 64);
transition: all 0.5s ease;
}
.logout-button .arrow {
position: relative;
left: 0;
top: 0%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.logout-button .slot {
position: absolute;
left: 50px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
overflow: hidden;
white-space: nowrap;
width: 0;
transition: all 0.5s ease;
}
.logout-button:hover {
width: 200px;
}
.logout-button:hover .slot {
opacity: 1;
width: 70%;
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 0 0 5px white;
overflow: hidden;
white-space: nowrap;
}
</style>
