caimei-applets-caimei/pages/seller/notice/components/time-axis.vue

<template>
    <view class="time-axis">
        <view class="time-axis-item" :style="{width: StyleModel.width, fontSize: StyleModel.fontSize, height: StyleModel.height}">
            <view class="time-axis-title">
                <slot name="title"></slot>
            </view>
            <view class="time-axis-content">
                <slot name="content"></slot>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        StyleModel: {
            type: Object,
            default: () => ({
                fontSize: '26rpx',
                color: '#333333',
                fontWeight: 400,
                width: '616rpx',
                height: '244rpx'
            })
        }
    },
    data() {
        return {}
    },
}
</script>

<style lang="scss">
.time-axis {
    background-color: #fff;
    .time-axis-item {
        display: flex;
        margin: 0 auto;
        border-left: 1px solid #E1E1E1;
        align-items: center;
        position: relative;
        box-sizing: border-box;
        padding-left: 30rpx;
        .time-axis-title {
            position: absolute;
            left: 30rpx;
            top: 0;
            color: #999999;
        }
        &::before {
            content: '';
            background-color: #E8E8E8;
            width: 28rpx;
            height: 28rpx;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, 0);
        }
        &::after {
            content: '';
            background-color: #999999;
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, 8rpx);
        }
    }
}
</style>