<template>

	<view class="box">
		<view class="head">
			<u--image :showLoading="true" width="60rpx" height="60rpx"
				:src="'../../static/newWork/index/XQ.png'"></u--image>
			<view class="title">
				{{taskDetail.title }}
			</view>
		</view>
		<view class="content">
			{{taskDetail.content }}


			<view class="time">
				完成时间: {{taskDetail.end_time}}
			</view>
		</view>






	</view>



</template>

<script>
	import {
		taskListApi
	} from "@/api/task.js"
	export default {
		data() {
			return {
				taskDetail: {},
				loading: true

			}
		},
		onLoad(option) {
			taskListApi().then(res => {
				this.taskDetail = res.data.filter((item) => item.id == option.id)[0]
				this.loading = false
				console.log(this.taskDetail)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100vw;
		height: 100vh;
		background-color: #F9FBFF;
		box-sizing: border-box;
		padding: 30rpx;

		.head {
			// width: ;
			display: flex;

			.title {
				width: 640rpx;
				border: 1px solid #4C80F6;
				border-radius: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
				color: #1A1A1A;
			}
		}

		.content {
			width: 690rpx;
			background-color: white;
			border-radius: 30rpx;
			margin-top: 20rpx;
			box-shadow: 0.5rpx 0.5rpx 200rpx 0.5rpx rgba(0, 0, 0, 0.1);
			padding: 30rpx 30rpx 50rpx 30rpx;
			box-sizing: border-box;
			min-height: 35vh;
			position: relative;
			font-size: 26rpx;
			color: #1A1A1A;

		}

		.time {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			color: #7A7A7A;
			font-size: 24rpx;
		}
	}
</style>