环境:uniapp、vue3、unocss、vant4
效果:
代码
主要是:pointTop 、pointCentent 、pointBottom,这三个样式
html
<div v-show="!showPoint" class="fixedLeftDiv">
<div>
<div class="pointTop"></div>
<div class="bg-black bg-op-70 pointCentent center" @click="showPoint = true">
<van-icon name="arrow" size="16" color="white"></van-icon>
</div>
<div class="pointBottom"></div>
</div>
</div>
<transition name="van-fade">
<div v-show="showPoint" class="pl-4 box-border fixedLeftDiv flex items-center">
<div class="flex flex-col items-center gap-2 bg-black bg-op-70 rounded-2 py-4 pl-2 pr-4 box-border">
<div
v-for="(item, index) in info.nodeList"
:key="index"
:class="[activePoint === index ? 'text-#FCB79D' : 'text-white', 'p-1 box-border flex items-center']"
@click.stop="clickPoint(item, index)"
>
<div
v-if="activePoint === index"
class="border-1 border-solid border-#FCB97D w-1 h-1 rounded-full mr-1"
></div>
{{ item.name }}
</div>
</div>
<div>
<div class="pointTop"></div>
<div class="pointCentent center" @click="showPoint = false">
<van-icon name="arrow-left" size="16" color="white"></van-icon>
</div>
<div class="pointBottom"></div>
</div>
</div>
</transition>
css
.pointTop {
width: 24px;
height: 40px;
background: radial-gradient(circle at 352% -35%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}
.pointCentent {
width: 30px;
height: 40px;
background: radial-gradient(circle at -17% 20px, rgba(0, 0, 0, 0.7) 30px, transparent 77%);
}
.pointBottom {
width: 24px;
height: 40px;
background: radial-gradient(circle at 350% 136%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}