<template>
	<view class="answerDetails">
		<view class="answerDetails-c">
			<view class="myQuestion-2-i-1">
				<view class="myQuestion-2-i-1-l">
					<image class="myQuestion-2-i-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image>
				</view>
				<view class="myQuestion-2-i-1-r">
					<view class="myQuestion-2-i-1-r-1">李晋心</view>
					<view class="myQuestion-2-i-1-r-2">2023-12-10发布</view>
				</view>
			</view>
			<view class="myQuestion-2-i-2">
				老师你好请问工商管理专业的应届生可以报考工商管理
				内的二级专业吗？比如说会计学，旅游管理？
			</view>
			<view class="myQuestion-2-i-5"></view>
			<view class="myQuestion-2-i-4">
				<u--image
					v-for="(item, index) in []"
					:key="index"
					radius="15rpx"
					height="145rpx"
					width="145rpx"
					@click.native="seeImg(index)"
					:src="item"></u--image>
			</view>
			<view class="myQuestion-2-i-3">
				<view class="myQuestion-2-i-3-c">
					<view class="myQuestion-2-i-3-c-1">
						<view class="myQuestion-2-i-3-c-1-l">
							<image class="myQuestion-2-i-3-c-1-l-i" src="@/static/images/tx.png" mode="widthFix"></image>
							<text class="myQuestion-2-i-3-c-1-l-t">程菲老师回复</text>
						</view>
						<view class="myQuestion-2-i-3-c-1-r">2023-12-10</view>
					</view>
					<view class="myQuestion-2-i-3-c-2">
						同学你好，这个问题问的好，你说的这些都是不可以报的！
					</view>
					<view style="margin-top: 28rpx;">
						<VoicePlayback />
					</view>
					<u-empty
						mode="data"
						text="暂无回复"
						icon="/static/imagesV2/icon43.png"
					>
					</u-empty>
				</view>
			</view>
		</view>
		<view class="answerDetails-b">
			<view class="answerDetails-b-c">
				<view class="answerDetails-b-c-l">
					<view class="answerDetails-b-c-l-1">请对本次答复</view>
					<view class="answerDetails-b-c-l-2">评分</view>
				</view>
				<view class="answerDetails-b-c-r">
					<u-rate :count="5" v-model="score" size="20"></u-rate>
					<view class="answerDetails-b-c-r-c">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VoicePlayback from "./components/VoicePlayback/index.vue"
	export default {
		components: {
			VoicePlayback
		},
		data() {
			return {
				score: 5
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.answerDetails{
	padding: 20rpx 25rpx;
	.answerDetails-b{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		width: 100%;
		padding-bottom: calc(env(safe-area-inset-bottom));
		background: #FFFFFF;
		.answerDetails-b-c{
			height: 120rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			.answerDetails-b-c-l{
				text-align: center;
				position: relative;
				padding-right: 29rpx;
				flex-shrink: 0;
				&:before{
					content: '';
					position: absolute;
					height: 58rpx;
					border-left: #E6E6E6 solid 1rpx;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
				.answerDetails-b-c-l-1{
					font-size: 24rpx;
					color: #979797;
				}
				.answerDetails-b-c-l-2{
					font-size: 26rpx;
					color: #323232;
					margin-top: 5rpx;
				}
			}
			.answerDetails-b-c-r{
				flex-grow: 1;
				display: flex;
				justify-content: space-between;
				padding-left: 65rpx;
				.answerDetails-b-c-r-c{
					height: 88rpx;
					line-height: 88rpx;
					color: #FFFFFF;
					padding: 0 55rpx;
					background: #2D81FF;
					border-radius: 200rpx;
				}
			}
		}
	}
	.answerDetails-c{
		padding: 30rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.myQuestion-2-i-1{
			display: flex;
			align-items: center;
			.myQuestion-2-i-1-l{
				.myQuestion-2-i-1-l-i{
					height: 60rpx;
					width: 60rpx;
					border-radius: 100%;
				}
			}
			.myQuestion-2-i-1-r{
				margin-left: 30rpx;
				.myQuestion-2-i-1-r-1{
					font-size: 26rpx;
					color: #323232;
					font-weight: bold;
				}
				.myQuestion-2-i-1-r-2{
					font-size: 24rpx;
					color: #979797;
					margin-top: 5rpx;
				}
			}
		}
		.myQuestion-2-i-2{
			line-height: 39rpx;
			color: #323232;
			font-size: 26rpx;
			margin: 30rpx 0;
		}
		.myQuestion-2-i-3{
			padding-top: 33rpx;
			.myQuestion-2-i-3-c{
				border-radius: 20rpx;
				background: #F5F6F8;
				padding: 30rpx;
				.myQuestion-2-i-3-c-1{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.myQuestion-2-i-3-c-1-l{
						display: flex;
						align-items: center;
						.myQuestion-2-i-3-c-1-l-i{
							height: 48rpx;
							width: 48rpx;
							border-radius: 200rpx;
						}
						.myQuestion-2-i-3-c-1-l-t{
							font-size: 26rpx;
							margin-left: 19rpx;
							color: #323232;
						}
					}
					.myQuestion-2-i-3-c-1-r{
						font-size: 24rpx;
						color: #979797;
					}
				}
				.myQuestion-2-i-3-c-2{
					line-height: 39rpx;
					font-size: 26rpx;
					color: #323232;
					margin-top: 28rpx;
				}
			}
		}
		.myQuestion-2-i-4{
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			grid-row-gap: 20rpx;
			grid-column-gap: 20rpx;
			margin-top: 30rpx;
		}
		.myQuestion-2-i-5{
			border-top: 1rpx #F3F3F7 dashed;
			margin: 20rpx 0;
		}
	}
}
</style>