<template>
    <view class="timeline-container">
        <view class="timeBox">
            <view
                v-for="(item, index) in freQuenceList"
                :key="index"
                class="timeline-item"
            >
                <!-- 时间节点 -->
                <view class="timeline-node">
                    <view class="node-circle"></view>
                    <view
                        class="node-line"
                        v-if="index !== freQuenceList.length - 1"
                    ></view>
                </view>

                <!-- 内容区域 -->
                <view class="timeline-content">
                    <view class="timeline-time"
                        >{{ item.info.start_time.slice(11, 16) }}目标进入</view
                    >
                    <view
                        style="
                            flex: 1;
                            width: 2rpx;
                            height: 40rpx;
                            background-color: #7e5648;
                        "
                    ></view>

                    <view class="timeline-time"
                        >{{ item.info.end_time.slice(11, 16) }}目标离开</view
                    >
                    <!-- <view class="timeline-desc" v-if="item.title">{{
                        item.title
                    }}</view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            freQuenceList: "",
        };
    },
    onLoad(options) {
        this.freQuenceList = JSON.parse(options.freQuenceList);
    },
};
</script>

<style scoped>
.timeline-container {
    padding: 20rpx 30rpx;
    height: 100vh;
    background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
    box-sizing: border-box;
}

.timeBox {
    overflow: scroll;
    height: 98vh;
}

.timeline-item {
    display: flex;
    padding-bottom: 40rpx;
    position: relative;
}

.timeline-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40rpx;
    margin-right: 20rpx;
    margin-top: 50rpx;
}

.node-circle {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #7f5447;
    z-index: 1;
}

.node-line {
    width: 2rpx;
    height: 100rpx;
    background-color: #7e5648;
    /* margin-top: 40rpx; */
}

.timeline-content {
    flex: 1;
    padding-bottom: 20rpx;
}

.timeline-time {
    font-size: 24rpx;
    color: #999;
    margin-bottom: 8rpx;
}

.timeline-title {
    font-size: 32rpx;
    color: #333;
    font-weight: bold;
    margin-bottom: 8rpx;
}

.timeline-desc {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
}
</style>
