<template>
    <div class="safety-page">
        <div class="header">
            <div class="loge" @click="loge"></div>
            <div class="tab">
                <div class="item" @click="grow">
                    <img src="../../static/images/growthRecord/grow.png" alt="">
                </div>
                <div class="item" @click="progress">
                    <img src="../../static/images/growthRecord/progress.png" alt="">
                </div>
                <div class="item" @click="safety">
                    <img src="../../static/images/growthRecord/safetyactive.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        loge () {

        },
        grow () {
            this.$router.push('/growth')
        },
        // 教师发展
        progress () {

        },
        // 安全场景
        safety () {

        }
    }
}
</script>

<style lang="less" scoped>
.safety-page{
    width: 1920px;
    height: 1080px;
    background: url('../../static/images/safety/backurl.png') no-repeat left top;
    .header{
        width: 100%;
        height: 77px;
        background: url('../../static/images/safety/header.png') no-repeat left 12px;
        display: flex;
        justify-content: space-between;
        .loge{
            cursor: pointer;
            width: 377px;
            height: 76px;
            margin-left: 16px;
            background: url('../../static/images/safety/loge.png') no-repeat left bottom;
        }
        .tab{
            display: flex;
            justify-content: flex-end;
            .item{
                cursor: pointer;
                padding-top: 41px;
                width: 126px;
                height: 37px;
                margin-right: 16px;
                margin-left: 12px;
                img{
                    width: 126px;
                    height: 37px;
                }
                &:nth-child(2){
                    margin-right: 0px;
                }
                &:nth-child(3){
                    padding-top: 0px;
                    width: 167px;
                    height: 71px;
                    margin-top: 25px;
                    margin-left: 0px;
                    margin-right: 0px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}
</style>
