<template>
	<view class="allGraspTheSituation-box flex">
        <view class="allGraspTheSituation-title flex">
            <view v-for="(T,index) in TitleList" :key="index">{{T}}</view>
        </view>
        <view class="allGraspTheSituation-content flex">
            <view class="allGraspTheSituation-left flex">
                <view v-for="(l,index) in letftTitleList" :key="index">{{l}}</view>
            </view>
            <view class="allGraspTheSituation-right flex">
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text class="fullScore">100<text>%</text></text>
                    <text>12<text>.5</text></text>
                </view>
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text>62<text>%</text></text>
                    <text>3<text>.5</text></text>
                </view>
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text>62<text>%</text></text>
                    <text>3<text>.5</text></text>
                </view>
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text>62<text>%</text></text>
                    <text>3<text>.5</text></text>
                </view>
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text>62<text>%</text></text>
                    <text>3<text>.5</text></text>
                </view>
                <view class="allGraspTheSituation-num flex">
                    <text>2</text>
                    <text class="failed">45<text>%</text></text>
                    <text>12<text>.5</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>
    .allGraspTheSituation-num text.failed{
        color: #EE8790;
    }
    .allGraspTheSituation-num text.failed text{
        color: #EE8790;
    }
    .allGraspTheSituation-num text.fullScore{
        color: #4AC698;
    }
    .allGraspTheSituation-num text.fullScore text{
        color: #4AC698;
    }
    .allGraspTheSituation-num text text{
        font-size: 28rpx;
        margin-top: 10rpx;
    }
    .allGraspTheSituation-num text{
        flex: 0 0 33.33%;
        font-size: 36px;
        font-weight: 800;
        font-style: italic;
        color: #282828;
    }
    .allGraspTheSituation-num:first-child{
        margin-top: 0rpx;
    }
    .allGraspTheSituation-num{
        flex: 0 0 33.33%;
        font-size: 20rpx;
        color: #282828;
        font-weight: 400;
        flex-direction: row;
        margin-bottom: 0rpx;
    }
    .allGraspTheSituation-right{
        flex: 0 0 75%;
        flex-direction: column;
        justify-content: space-between;
    }
    .allGraspTheSituation-left view:first-child{
        margin-top: 50rpx;
    }
    .allGraspTheSituation-left view{
        margin-bottom: 50rpx;
    }
    .allGraspTheSituation-left{
        flex: 0 0 25%;
        flex-direction: column;
        font-size: 20rpx;
        color: #282828;
        font-weight: 400;
    }
    .allGraspTheSituation-content{
        text-align: center;
        align-items: center;
    }
    .allGraspTheSituation-title view:first-child{
        font-weight: bold;
        color: #282828;
    }
    .allGraspTheSituation-title view{
        flex: 0 0 25%;
        color: #A1A1A1;
    }
    .allGraspTheSituation-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;
    }
    .allGraspTheSituation-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>
