55 lines
936 B
Vue
55 lines
936 B
Vue
|
<template>
|
||
|
|
<view class="node" :class="{ last }">
|
||
|
|
<view class="node-index">{{ index }}</view>
|
||
|
|
<view v-if="!last" class="node-line" />
|
||
|
|
<view class="node-body">
|
||
|
|
<slot />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
defineProps({
|
||
|
|
index: { type: Number, default: 1 },
|
||
|
|
last: { type: Boolean, default: false },
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.node {
|
||
|
|
position: relative;
|
||
|
|
padding-left: 60rpx;
|
||
|
|
margin-right: 30rpx;
|
||
|
|
}
|
||
|
|
.node-index {
|
||
|
|
position: absolute;
|
||
|
|
top: 20rpx;
|
||
|
|
left: 30rpx;
|
||
|
|
width: 40rpx;
|
||
|
|
height: 40rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
border-radius: 50%;
|
||
|
|
background: #4f6ef7;
|
||
|
|
color: #fff;
|
||
|
|
font-size: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 3;
|
||
|
|
}
|
||
|
|
.node-line {
|
||
|
|
position: absolute;
|
||
|
|
top: 20rpx;
|
||
|
|
left: 30rpx;
|
||
|
|
width: 2rpx;
|
||
|
|
height: 100%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
background: #4f6ef7;
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.node-body {
|
||
|
|
position: relative;
|
||
|
|
z-index: 4;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|