<template>
	<view class="graspTheSituation-box flex">
        <view class="graspTheSituation-title flex">
            <view v-for="(T,index) in TitleList" :key="index">{{T}}</view>
        </view>
        <view class="graspTheSituation-content flex">
            <view class="graspTheSituation-left flex">
                <view v-for="(l,index) in letftTitleList" :key="index">{{l}}</view>
            </view>
            <view class="graspTheSituation-right flex">
                <view class="graspTheSituation-num flex">
                    <text>2<text>%</text></text>
                    <text>53<text>%</text></text>
                </view>
                <view class="graspTheSituation-num flex">
                    <text>2<text>%</text></text>
                    <text>62<text>%</text></text>
                </view>
                <view class="graspTheSituation-num flex">
                    <text>2<text>%</text></text>
                    <text>12<text>%</text></text>
                </view>
            </view>
            
        </view>
        
	</view>
</template>
<script>
	import {
		reactive,
		toRefs,
		onMounted,
		getCurrentInstance,
		inject
	} from "vue";

	export default {
		props: {
			
		},
		components: {},
		setup() {

			let data = reactive({
				obj: {
					Name: '',
					Photo: '',
				},
				showPhone: false,
				showLogin: true, //多次点击
                TitleList:['题目难度','个人得分率','平均得分率'],
                letftTitleList:['简单题','中档题','难题']
			});
			return {
				...toRefs(data),
			};
		},
	};
</script>
<style scoped>
    .graspTheSituation-num text text{
        font-size: 28rpx;
        margin-top: 10rpx;
    }
    .graspTheSituation-num text{
        flex: 0 0 50%;
        font-size: 36px;
        font-weight: 800;
        font-style: italic;
        color: #282828;
    }
    .graspTheSituation-num:first-child{
        margin-top: 0rpx;
    }
    .graspTheSituation-num{
        flex: 0 0 50%;
        font-size: 20rpx;
        color: #282828;
        font-weight: 400;
        flex-direction: row;
        margin-bottom: 0rpx;
    }
    .graspTheSituation-right{
        flex: 0 0 66.67%;
        flex-direction: column;
        justify-content: space-between;
    }
    .graspTheSituation-left view:first-child{
        margin-top: 50rpx;
    }
    .graspTheSituation-left view{
        margin-bottom: 50rpx;
    }
    .graspTheSituation-left{
        flex: 0 0 33.33%;
        flex-direction: column;
        font-size: 20rpx;
        color: #282828;
        font-weight: 400;
    }
    .graspTheSituation-content{
        text-align: center;
        align-items: center;
    }
    .graspTheSituation-title view:first-child{
        font-weight: bold;
        color: #282828;
    }
    .graspTheSituation-title view{
        flex: 0 0 33.33%;
        color: #A1A1A1;
    }
    .graspTheSituation-title{
        flex-shrink: 0;
        font-size: 20rpx;
        font-weight: 400;
        color: #282828;
        padding: 41rpx 0 21rpx 0;
        border-bottom:2rpx solid #EDEDED;
        text-align: center;
    }
    .graspTheSituation-box{
        margin: 30rpx 50rpx 0 50rpx;
        background: #FFFFFF;
        box-shadow: 0px 6px 29px 0px rgba(76, 76, 76, 0.09);
        border-radius: 30px;
        flex-direction: column;
    }
</style>
