quna/pages/index/history.vue

<template>
	<view class="history">
		<!-- <view class="search">
			<view class="search_wrap">
				<image src="../../static/image/search.png" mode=""></image>
				<input type="text" value="" placeholder="请输入关键字" placeholder-style="color:#B8B5B5;" />
			</view>
		</view> -->
		<view class="title">
			<view class="name">{{current.name?current.name:'--'}}</view>
			<view class="banben">当前版本是 v{{current.version?current.version:'0'}}</view>
		</view>
		<view class="step_wrap">
			<!-- <view class="dot_first"></view> -->
			<view :class="['item',list.length==1||index==list.length-1?'first':'',index==0?'active':'']" v-for="(item,index) in list">
				<view class="dot"></view> 
				<view class="version">
					版本v{{item.version?item.version:'0'}} {{item.created_at?item.created_at:'--'}}
				</view>
				<view class="desc">
					{{item.user?item.user.name:'来源于网络'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				slug:'',
				list:[],
				current:{}
			}
		},
		onShow() {
			
		},
		async onLoad(options) {
			console.log(options,'options')
			await this.getStep(options.slug)
		},
		methods: {
			getStep(slug){
				this.$u.get('/qunali/history', {
					slug:slug
				}).then(res => {
					console.log(res,'step')
					this.list = res.data
					// this.list = this.list.concat(this.list)
					this.current = this.list[this.list.length-1]
				})
			}
		}
	}
</script>

<style lang="scss">
	.history {
		padding-bottom: 20px;
		.search {
			background-color: #ffffff;
			padding: 30px 16px 6px;

			.search_wrap {
				background-color: #F8F5F5;
				border-radius: 10px;
				display: flex;
				align-items: center;
				padding: 6px 8px;

				image {
					width: 16px;
					height: 16px;
					margin: 0 10px;
				}

				input {
					width: 100%;
				}
			}
			
		}
		.title{
			padding: 20px 25px 0;
			.name{
				font-size: 18px;
				font-weight: 400;
				color: #000000;
			}
			.banben{
				font-size: 11px;
				font-weight: 400;
				color: #707070;
				padding-top: 10px;
			}
		}
		.step_wrap{
			padding: 40px 30px 0;
			position: relative;
			display: flex;
			flex-direction: column;
			.item{
				position: relative;
				border-left: 2px solid #565656;
				min-height: 100px;
				width: 100%;
				display: inline-block;
				.dot{
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: #565656;
					border-radius: 50%;
					top: -5px;
					left: -5px;
				}
				.version{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					margin: -10px 0 0 10px;
				}
				.desc{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					padding-top: 7px;
					margin-left: 10px;
				}
				
			}
			.active{
				position: relative;
				border-left: 2px solid #16BA63;
				display: inline-block;
				min-height: 100px;
				width: 100%;
				.dot{
					position: absolute;
					width: 10px;
					height: 10px;
					background-color: #16BA63;
					border-radius: 50%;
				}
				.version{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					margin: -10px 0 0 10px;
				}
				.desc{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					padding-top: 7px;
					margin-left: 10px;
				}
				
			}
			.first{
				position: relative;
				border-left: none;
				display: inline-block;
				min-height: 100px;
				width: 100%;
				.version{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					margin: -10px 0 0 10px;
				}
				.desc{
					font-size: 14px;
					font-weight: 400;
					color: #000000;
					padding-top: 7px;
					margin-left: 10px;
				}
				
			}
		}
	}
</style>