<template>
    <div style="background: #eee; padding: 20px; height: 100%" class="review1">
        <Card>
            <div>
                <div class="review-header">
                    <Icon type="md-arrow-back" />
                    <p>林黛玉 <span>[A1 技术支持的学情分析]</span></p>
                </div>
                <div>
                    要求：
                    <p>合理利用信息技术手段辅助分析学情，从而</p>
                    <p>
                        1.从多个方面分析学情，包括学生经验、知识储备、学习能力、学习风格以及学习条件等
                    </p>
                    <p>2.精准确定教学的适切目标</p>
                    <p>
                        3.为教学重难点的突破、教学策略的选择和教学活动的设计提供科学依据
                    </p>
                    <p>为教学中动态调整教学内容和方法提供参考</p>
                </div>
                <div class="plans">
                    <div
                        v-for="(item, index) in pointMall"
                        :key="index"
                        class="pointType"
                    >
                        <p class="pointName">
                            <Icon type="md-paper-plane" />
                            学情分析方案
                        </p>
                        <span
                            >提交一份针对某一教学主题的学情分析方案，包括学情分析目的、内容（教学主题、教学对象、教学重点、学习难点等）、学情分析方法和工具。以PDF形式提交。</span
                        >
                        <Upload action="//jsonplaceholder.typicode.com/posts/">
                            <Button
                                icon="ios-cloud-upload-outline"
                                type="primary"
                                >上传</Button
                            >
                        </Upload>
                        <p class="standard">评分标准：</p>
                        <CheckboxGroup v-model="social">
                            <Checkbox
                                label="twitter"
                                v-for="(item, index) in disPoint"
                                :key="index"
                                size="large"
                            >
                                <span>{{ item }}</span>
                            </Checkbox>
                        </CheckboxGroup>
                    </div>
                </div>
                <div>
                    <Button type="primary" style="margin-right: 20px"
                        >提交</Button
                    >
                    <Button>取消</Button>
                </div>
            </div>
        </Card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pointMall: [{}, {}],
            disPoint: [
                "方案要素完整，表述清晰",
                "方案能够有效支持学情分析目的达成",
                "工具设计/选用科学合理，操作便捷，分析结果易于导出使用",
                "技术支持方式富有创新性，有学习与借鉴价值",
            ],
        }
    },
}
</script>

<style lang="less">
.review1 {
    .ivu-checkbox-group {
        display: flex;
        flex-direction: column;
    }
}
</style>
<style lang="less" scoped>
.review-header {
    font-size: 25px;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #2d8cf0;

    p {
        margin-left: 10px;
    }
}
.plans {
    margin-bottom: 10px;

    .pointType {
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-top: 20px;

        & > span {
        }

        .pointName {
            font-size: 18px;
            margin-bottom: 5px;
            color: #408ada;
        }

        .standard {
            font-size: 17px;
            margin-bottom: 5px;
        }
    }
}
</style>