<template>
    <div>
        <div class="layout-cont home-cont">
            <div class="box-c box-c-1" @click="_goto('/sampling_plan/sampling_plan')">
                <img src="@/assets/home/plan.png">
                <div>
                    <img src="@/assets/home/plan.png"></div>
                <div>
                    <div class="title">抽样计划执行双随机</div>
                    <!--todo 每个模块的数量-->
                    <div class="num">3</div>
                </div>
            </div>
            <div class="box-c box-c-2">
                <div @click="_goto('/sampling_task/sampling_task')">
                    <div class="box-img">
                        <img src="@/assets/home/task.png"></div>
                    <div class="cont">
                        <div class="title">我的任务</div>
                        <div class="num">4</div>
                    </div>
                </div>
                <div @click="_goto('/sampling_list/sampling_task')">
                    <div class="box-img">
                        <img src="@/assets/home/task-edit.png"></div>
                    <div class="cont">
                        <div class="title">抽样信息录入</div>
                        <div class="num">4</div>
                    </div>
                </div>
            </div>
            <div class="box-c box-c-3">
                <div @click="_goto('/message')">
                    <div class="box-img">
                        <img src="@/assets/home/message.png"></div>
                    <div class="cont">
                        <div class="title">消息</div>
                        <div class="num">4</div>
                    </div>
                </div>
                <div @click="_goto('/history_sampling/sampling_list')">
                    <div class="box-img">
                        <img src="@/assets/home/history-data.png"></div>
                    <div class="cont">
                        <div class="title">历史任务</div>
                    </div>
                </div>
            </div>
            <div class="box-c box-c-4" @click="_goto('/flow_chart')">
                <img src="@/assets/home/flow.png">
                <div>
                    <img src="@/assets/home/flow.png"></div>
                <div>
                    <div class="title">双随机实现流程</div>
                </div>
            </div>
        </div>
        <FooterBar></FooterBar>
    </div>
</template>

<script>
    import FooterBar from '@/components/FooterBar.vue'

    export default {
        name: "Home",
        components: {
            FooterBar
        },
        data() {
            return {}
        },
        methods: {
            _goto(uri) {
                this.$router.push(uri)
            }
        }
    }
</script>

<style scoped lang="less">
    .home-cont {
        padding: 20px 30px;
        color: #ffffff;
        height: calc(100% - 50px);
        /*display: flex;*/
        /*flex-direction: column;*/
        /*justify-content: space-around;*/
        overflow: auto;
    }

    /*.home-cont > div {*/
    /*width: 100%;*/
    /*height: 23%;*/
    /*}*/

    img {
        width: 70px;
        opacity: 0.8;
    }

    .box-c {
        display: flex;
        border-radius: 20px;
        width: 700px;
        margin: 0 auto;
    }

    .box-c + .box-c {
        margin-top: 20px;
    }

    .box-c:nth-child(1) {
        background-image: linear-gradient(45deg, #10239e, #adc6ff)
    }

    .box-c:nth-child(4) {
        background-image: linear-gradient(45deg, #00474f, #87e8de)

    }

    .box-c-1, .box-c-4 {
        display: flex;
        align-items: center;
        box-shadow: 2px 2px 10px #888888;
        height: 200px;
        position: relative;
        overflow: hidden;

        > img {
            position: absolute;
            right: -40px;
            top: -40px;
            opacity: 0.2;
            width: 300px;
        }

        > div:nth-child(2) {
            width: 20%;
            display: flex;
            padding-left: 50px;
            margin-left: 30px;
        }

        > div:nth-child(3) {
            width: auto;
            margin-left: 30px;

        }


    }

    .box-c-2, .box-c-3 {

        height: 180px;

        > div {
            width: 50%;
            border-radius: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 2px 2px 10px #888888;
        }

        .box-img {
            width: 20%;
        }

        .cont {
            margin-left: 30px;
        }
    }

    .box-c-2 {
        > div:nth-child(1) {
            background-image: linear-gradient(45deg, #536DFE, #00B0Ff)

        }

        > div:nth-child(2) {
            background-image: linear-gradient(45deg, #00B0Ff, #536DFE);
            margin-left: 30px;
        }
    }

    .box-c-3 {
        > div:nth-child(1) {
            background-image: linear-gradient(45deg, #00BFA6, #0036ff)
        }

        > div:nth-child(2) {
            background-image: linear-gradient(45deg, #0036ff, #00BFA6);
            margin-left: 30px;
        }
    }

    .title {
        font-weight: bold;
        font-size: 24px
    }

    .num {
        text-align: center;
        font-weight: bold;
        margin-top: 5px;
    }

</style>
