<template>
	<view class="assemble">

    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">我的</view>
    </view>

		<view style="height: 20rpx;"></view>
		<view class="div-style">
			<view style="height: 38vh;">
				<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
					<view>
						<image src="@/static/images/index/danlan.png" class="drop-image"></image>
					</view>
					<view class="title">本月业绩</view>
				</view>
				<view class="coach-message">
					<view class="left1">
						<view style="padding: 20rpx 0;">
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image src="@/static/images/index/huang.png" class="drop-image-x"></image>
								</view>
								<view class="title-x">目标</view>
							</view>
							<view class="title-x1">50.000元</view>
						</view>
						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image src="@/static/images/index/lvs.png" class="drop-image-x"></image>
								</view>
								<view class="title-x">预测</view>
							</view>
							<view class="title-x1">50.000元</view>
						</view>
						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image src="@/static/images/index/shenlan.png" class="drop-image-x"></image>
								</view>
								<view class="title-x">成交</view>
							</view>
							<view class="title-x1">50.000元</view>
						</view>
						<view>
							<view style="display: flex;align-items: center;">
								<view style="padding: 12rpx;">
									<image src="@/static/images/index/lan.png" class="drop-image-x"></image>
								</view>
								<view class="title-x">定金</view>
							</view>
							<view class="title-x1">50.000元</view>
						</view>
					</view>
					
					<view class="right1">
						<view style="text-align: center;">08月01日-08月30日</view>
						<view style="width: 100%;height: 80%;padding: 12rpx;">
							<view style="padding: 10rpx;">目标 100%</view>
							<fui-progress :percent="100" background="#ddd" activeColor="#FFB703" height="20"></fui-progress>
						</view>
						<view style="width: 100%;height: 80%;padding: 12rpx;">
							<view style="padding: 10rpx;">目标 1%</view>
							<fui-progress :percent="1" background="#ddd" activeColor="#039f64" height="20"></fui-progress>
						</view>
						<view style="width: 100%;height: 80%;padding: 12rpx;">
							<view style="padding: 10rpx;">目标 20%</view>
							<fui-progress :percent="20" background="#ddd" activeColor="#4066f2" height="20"></fui-progress>
						</view>
						<view style="width: 100%;height: 80%;padding: 12rpx;">
							<view style="padding: 10rpx;">目标 8%</view>
							<fui-progress :percent="8" background="#ddd" activeColor="#3b8bd1" height="20"></fui-progress>
						</view>
					</view>
					
				</view>
			</view>
			<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
			<view style="height: 38vh;">
				<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
					<view>
						<image src="@/static/images/index/danlv.png" class="drop-image"></image>
					</view>
					<view class="title">本月业绩</view>
				</view>
				<view class="coach-message">
					<view class="this_month">
						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">待联系</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">待联系</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
						</view>
						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">待释放</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">合同审核中</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
						</view>
						<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">待协作</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
							<view style="width: 48%;">
								<view style="display: flex;align-items: center;">
									<view style="padding: 12rpx;">
										<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
									</view>
									<view class="title-x">消息</view>
								</view>
								<view class="title-x1">50个</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	<AQTabber />
	</view>
</template>

<script>
	import AQTabber from "@/components/AQ/AQTabber.vue"
	export default {
		components: {
			AQTabber,
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>


//自定义导航栏
.navbar_section{
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  .title{
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #858585;
  }
}

	.assemble {
		width: 100%;
		height: 100vh;
		background: #292929;
	}

	.div-style {
		width: 92%;
		height: 85vh;
		background: #fff;
		border-radius: 16rpx;
		margin: auto;
	}

	.coach-message {
		width: 92%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.drop-image {
		width: 50rpx;
		height: 50rpx;
	}

	.title {
		font-size: 30rpx;
		color: #7F7F7F;
		padding-left: 20rpx;
	}

	.left1 {
		width: 48%;
		height: 95%;
		margin: auto;
	}

	.right1 {
		width: 48%;
		height: 95%;
		margin: auto;
	}
	
	.this_month {
		width: 100%;
		height: 95%;
		margin: auto;
	}

	.drop-image-x {
		width: 20rpx;
		height: 20rpx;
	}

	.title-x {
		font-size: 28rpx;
		color: #7F7F7F;
		padding-left: 20rpx;
	}

	.title-x1 {
		font-size: 28rpx;
		color: #333333;
		padding-left: 60rpx;
	}
</style>