<template>
	<view>
		<u-navbar title="常见问题" :border-bottom="false" :background="bgc" title-color='#2E4975' title-size='36'
			height='36'></u-navbar>
			<view class="cont">
				<view class="que_cont">
					<view class="que_box">
						<view class="que_top">
							<view class="yuan">
								1
							</view>
							<view class="txt">
								没有收到用户缴费，怎么办？
							</view>
							<view class="font">
								<view class="iconfont icon-xiangshang" v-if="currentindex==0" @click="currentindex=-1"> 
									
								</view>
								<view class="iconfont icon-xiangxia" v-if="currentindex!=0" @click="currentindex=0">
									
								</view>
							</view>
						</view>
						<view class="que_bot" v-if="currentindex==0">
							<view class="bot_cont" style="margin-right: 20rpx;">
								未收到用户缴费
							</view>
							<view class="bot_cont">
								用户缴费多久到账
							</view>
						</view>
					</view>
					<view class="que_box">
						<view class="que_top">
							<view class="yuan">
								2
							</view>
							<view class="txt">
								没有收到用户缴费，怎么办？
							</view>
							<view class="font">
								<view class="iconfont icon-xiangshang">
									
								</view>
								<!-- <view class="iconfont icon-xiangxia">
									
								</view> -->
							</view>
						</view>
						<view class="que_bot" v-if="currentindex==1">
							<view class="bot_cont" style="margin-right: 20rpx;">
								未收到用户缴费
							</view>
							<view class="bot_cont">
								用户缴费多久到账
							</view>
						</view>
					</view>
					<view class="que_box">
						<view class="que_top">
							<view class="yuan">
								3
							</view>
							<view class="txt">
								没有收到用户缴费，怎么办？
							</view>
							<view class="font">
								<view class="iconfont icon-xiangshang">
									
								</view>
								<!-- <view class="iconfont icon-xiangxia">
									
								</view> -->
							</view>
						</view>
						<view class="que_bot" v-if="currentindex==2">
							<view class="bot_cont" style="margin-right: 20rpx;">
								未收到用户缴费
							</view>
							<view class="bot_cont">
								用户缴费多久到账
							</view>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
				currentindex:0
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background: #F7FAFE;
	}
	.cont{
		padding-top: 20rpx;
		.que_cont{
			
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.que_box{
				margin-top: 34rpx;
				padding: 40rpx;
				width: 654rpx;
				border-radius: 20rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42,130,228,0.1);
				.que_top{
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					padding-bottom: 30rpx;
					border-bottom: 2rpx solid #D8D8D8 ;
					.yuan{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 36rpx;
						height: 36rpx;
						background: #8883F0;
						border-radius: 50%;
						
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 32rpx;
					}
					.txt{
						margin-left: 22rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #3D3D3D;
					}
					.font{
						margin-left: auto;
						.iconfont{
							color: #95989D;
							font-size: 28rpx;
						}
					}
				}
				.que_bot{
					margin-top: 34rpx;
					display: flex;
					// flex-wrap: wrap;
					flex-wrap: nowrap;
					.bot_cont{
						
						padding: 20rpx 20rpx;
						background: #E0DBFF;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						font-weight: 400;
						font-size: 30rpx;
						color: #3D3D3D;
						line-height: 42rpx;
					}
				}
			}
		}
	}
</style>
