<template>
	<view>
		<navs :top='top' :page='pageName' :color='color'></navs>
		<view class="project-box">
			<uv-steps current="0" dot direction="column" active-color="#3887FD" inactive-color="#D0D0D0">
				<uv-steps-item>
					<template v-slot:title>
						<view class="time-title active">设计完成80% <text>今天09:34</text></view>
					</template>
					<template v-slot:desc>
						<view class="time-desc active">如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写就填写</view>
					</template>
				</uv-steps-item>
				<uv-steps-item>
					<template v-slot:title>
						<view class="time-title">设计完成40% <text>昨天09:34</text></view>
					</template>
					<template v-slot:desc>
						<view class="time-desc"></view>
					</template>
				</uv-steps-item>
				<uv-steps-item>
					<template v-slot:title>
						<view class="time-title">设计完成10% <text>昨天08:34</text></view>
					</template>
					<template v-slot:desc>
						<view class="time-desc"></view>
					</template>
				</uv-steps-item>
				<uv-steps-item>
					<template v-slot:title>
						<view class="time-title">原型交付 <text>8-20 09:34</text></view>
					</template>
					<template v-slot:desc>
						<view class="time-desc">如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写就填写</view>
					</template>
				</uv-steps-item>
				<uv-steps-item>
					<template v-slot:title>
						<view class="time-title">内容敲定 <text>8-20 09:34</text></view>
					</template>
					<template v-slot:desc>
						<view class="time-desc">如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写如果有的话就填写就填写</view>
					</template>
				</uv-steps-item>
			</uv-steps>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: '项目进展',
				color: 1,
				top: 0
			};
		},
		onLoad() {
			this.top = uni.getMenuButtonBoundingClientRect().top;
		},
	}
</script>

<style lang="scss">
	.project-box {
		padding: 56rpx 54rpx 0 86rpx;
	}

	.time-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #999;

		>text {
			font-size: 26rpx;
			margin-left: 30rpx;
		}
	}

	.time-title.active {
		color: #3887FD;
	}

	.time-desc {
		font-size: 26rpx;
		color: #999;
		line-height: 40rpx;
		padding-bottom: 50rpx;
	}

	.time-desc.active {
		color: #333;
	}
</style>
