<template>
	<view class="detail-container">
		<!-- 可滚动内容区 -->
		<view class="scroll-content">
			<!-- 问题标题 -->
			<view class="question-title">
				{{info.title}}
				<view class="title-underline"></view>
			</view>
			<!-- 内容区 -->
			<view class="question-content">
				<view class="question-desc">
					{{info.content}}
				</view>
				
				<image src="/static/ic_q_d_01.png" class="question-img" mode="widthFix" />
				<view class="question-time">{{info.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},

			};
		},
		onLoad(options) {
			if (options.item) {
				const item = JSON.parse(decodeURIComponent(options.item));
				this.info = item;
			}
		},
		methods: {

		},

	}
</script>

<style scoped>
	.detail-container {
		height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
	}

	.detail-back {
		position: absolute;
		left: 37rpx;
		width: 15rpx;
		height: 33rpx;
	}

	.detail-title {
		font-size: 36rpx;
		color: #000;
	}

	.scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 40rpx;
	}

	.question-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #000000;
		margin: 40rpx 32rpx 0 64rpx;
		position: relative;
		line-height: 1.4;
	}

	.title-underline {
		width: 120rpx;
		height: 6rpx;
		background: #3B8BFF;
		border-radius: 3rpx;
		margin-top: 8rpx;
	}

	.question-content {
		min-height: 600rpx;
		margin: 34rpx 24rpx 0 24rpx;
		background: #EDF6FF;
		border-radius: 12rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.question-desc {
		font-size: 28rpx;
		color: #4A4A4A;
		line-height: 1.8;
		margin-bottom: 24rpx;
	}
	
	.question-time {
		font-size: 28rpx;
		color: #4A4A4A;
		line-height: 1.8;
		align-self: flex-end;
		margin-top: auto;
	}

	.question-img {
		width: 100%;
		border-radius: 8rpx;
	}
</style>