<template>
<div class="box">
<div class="main"></div>
<div class="item" v-for="i in 8" :style="getitem(i-1,0)" :key="i">
<div class="area">
<div class="show">
<slot></slot>
</div>
</div>
</div>
</div>
</template>
<script setup>
const getitem = (index,off)=>{
return `transform: rotateZ(${index*45+off}deg);`
}
</script>
<style lang="scss" scoped>
$width-base:300px;
$height-base:300px;
.box{
display: flex;
position: absolute;
z-index: 10;
left: 600px;
top: 140px;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: $width-base;
height: $height-base;
border: 3px inset #000;
border-radius: 50%;
overflow: hidden;
transform: scale(1.3);
transition: 1s;
}
.item{
position: absolute;
display: flex;
justify-content: center;
font-size: 0.5rem;
text-align: center;
width: 150px;
height: $height-base;
.area{
padding: 5%;
box-sizing: border-box;
padding-top: 10%;
width: 60%;
height: 30%;
background-color: rgba(249, 240, 104,0.5);
transform:perspective(2em) rotateX(-8.5deg);
overflow: hidden;
border: 2px inset #ffffff;
.show{
transform:perspective(2em) rotateX(8.5deg);
}
}
}
.main{
position: absolute;
width: 140px;
height: 140px;
border: 10px inset brown;
border-radius: 50%;
z-index: 1;
}
</style>
使用
<Control>
<div>插槽</div> //插入想显示的元素
</Control>
效果