<template>
	<view class="oneCivil">
		<!-- 成绩 -->
		<view class="header-wrap">
			<view class="tabs-wrap area flex">
				<view :class="current==index?'tabs-active':'tabs-item'" v-for="(item,index) in tabs" :key="index"
					@tap="tabsClick(item,index)">
					{{item}}
				</view>
			</view>
		</view>

		<!-- 模考成绩 -->
		<view v-if="current==0">
			<view class="content_wrap">
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							模考成绩
						</view>
						<view class="content-right">
							常识<text class="icon icon-xiala"></text>
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							历次考试平均正确率
						</view>
						<view class="content-percent">
							{{percent}}%
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content no flex">
						<view class="">
							目标正确率
						</view>
						<view class="content-right">
							<input type="text" placeholder="请输入"
								placeholder-style="font-size: 30rpx;color: #BBBBBB;text-align:right;">
						</view>
					</view>
				</view>
				
				
				<view class="keep">
					保存
				</view>
			</view>
		</view>

		<!-- 行测模块成绩 -->
		<view v-if="current==1">
			<view class="content_wrap">
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							行测模块
						</view>
						<view class="content-right">
							常识<text class="icon icon-xiala"></text>
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							历次考试平均正确率
						</view>
						<view class="content-percent">
							{{percent}}%
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content no flex">
						<view class="">
							目标正确率
						</view>
						<view class="content-right">
							<input type="text" placeholder="请输入"
								placeholder-style="font-size: 30rpx;color: #BBBBBB;text-align:right;">
						</view>
					</view>
				</view>


				<view class="keep">
					保存
				</view>
			</view>
		</view>

		<!-- 申论模块成绩 -->
		<view v-if="current==2">
			<view class="content_wrap">
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							申论模块
						</view>
						<view class="content-right">
							常识<text class="icon icon-xiala"></text>
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content flex">
						<view class="">
							历次考试平均正确率
						</view>
						<view class="content-percent">
							{{percent}}%
						</view>
					</view>
				</view>
				<view class="content-item area flex">
					<view class="content no flex">
						<view class="">
							目标正确率
						</view>
						<view class="content-right">
							<input type="text" placeholder="请输入"
								placeholder-style="font-size: 30rpx;color: #BBBBBB;text-align:right;">
						</view>
					</view>
				</view>
				
				
				<view class="keep">
					保存
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['模考成绩', '行测模块成绩', '申论模块成绩'],
				current: 0,
				percent: "98", //正确率

			}
		},
		methods: {
			tabsClick(item, index) {
				this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oneCivil {
		position: relative;
	}

	.tabs-wrap {
		justify-content: space-around;
		align-items: center;

		.tabs-item {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			opacity: 0.8;
		}

		.tabs-active {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			position: relative;
		}

		.tabs-active::after {
			content: '';
			width: 38rpx;
			height: 6rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			position: absolute;
			bottom: -16rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}

	.content_wrap {
		position: absolute;
		top: 120rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	// 行测模块成绩
	.content-item {
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;

		.content {
			width: 630rpx;
			height: 100rpx;
			border-bottom: 1px solid #EEEEEE;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #7D8087;
			background-color: #fff;

			.content-right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #545D71;
				text-align: right;
				text {
					font-size: 20rpx;
					color: #CCCCCC;
					margin-left: 16rpx;
				}
			}

			.content-percent {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #545D71;
			}
		}
	}

	.keep {
		width: 694rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background: #2D81FF;
		border-radius: 10rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		margin-top: 28rpx;
	}

	.no {
		border-bottom: none !important;
	}
</style>