组件代码
<template>
<div class="donate-content-div">
<div class="content">
<slot name="content"></slot>
</div>
<strong style="fornt-weight: bold">
<span id="donate-content-div">
<slot name="title"></slot>
</span>
</strong>
</div>
</template>
<script>
export default{
setup() {
return {}
}
}
</script>
<style scoped>
.donate-content-div:hover{
transition: '0.3s all ease-in';
left: 0
}
.content-titles{
max-height: 428px;
position: relative;
overflow: auto;
}
span#content-div-title{
color: red
}
span#donate-content-div{
position: absolute;
left: 345px;
-webkit-transform: rotate(90deg);
transform: rotate(0deg);
width: auto;
background: #ffc82c;
height: auto;
top: 15px;
padding: 7px 6px;
border-redius: 15px;
color: #123456;
font-family: initial;
font-size: 18px;
}
.donate-content-div{
border: 1px solid #0099d6;
padding: 20px;
background-color: rgba(128, 128, 128, 0.4);
display: inline-block;
width: 304px;
max-height: 500px;
left: -345px;
position: fixed;
top: 40%;
z-index: 9999;
transition: left .35s ease-in-out;
}
.content{
max-height: 500px;
overflow: auto;
}
</style>