zheng_xie_ui/work/components/meeting/step.vue

<template>
	<view>
		<view class="steps">
			<image :src="cirimg" class="cirimg"></image>
			<view class="stepr">
				<view class="tit">会议签到打卡</view>
				<view class="time">
					<image :src="qtime"></image>
					<view>14:47 签到成功</view>
				</view>
				<view class="adr">
					<image :src="qadrimg"></image>
					<view>安徽省合肥市蜀山区高薪技术产业开发区黄山 路59号时代数码港</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			datalist: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				qadrimg: require("@/work/static/images/meeting/qadr.png"),
				cirimg: require("@/work/static/images/meeting/cir.png"),
				qtime: require("@/work/static/images/meeting/qtime.png"),
			}
		},
		onLoad(e) {

		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
.steps{
	display: flex;align-items: flex-start;position: relative;
	&::after{content: '';width: 2rpx;height: 100%;background: #DADADA;position: absolute;left: 8rpx;top: 16rpx;}
	.cirimg{width: 16rpx;height: 16rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top: 8rpx;}
	.stepr{
		.tit{font-weight: bold;font-size: 24rpx;color: #343434;margin-bottom: 22rpx;}
		.time{display: flex;align-items: flex-start;margin-bottom: 10rpx;padding-left: 14rpx;
			image{width: 20rpx;height: 20rpx;margin-right: 20rpx;flex: 0 0 auto;margin-top: 7rpx;}
			view{font-weight: 400;font-size: 26rpx;color: #343434;}
		}
		.adr{display: flex;align-items: flex-start;padding-left: 14rpx;
			image{width: 16rpx;height: 18rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top: 7rpx;}
			view{font-weight: 400;font-size: 26rpx;color: #343434;}
		}
	}


}
</style>