<template>
    <div class="growthRecord">
        <div class="content">

            <div class="growthRecord-top">
                <div class="tab">
                    <div class="item">
                        <img src="../../static/images/growthRecord/growactive.png" alt="">
                    </div>
                    <div class="item">
                        <img src="../../static/images/growthRecord/progress.png" alt="">
                    </div>
                    <div class="item">
                        <img src="../../static/images/growthRecord/safety.png" alt="">
                    </div>
                </div>
            </div>

            <div class="growthRecord-center">
                <div class="grade">
                    <swiper :options="swiperOption" class="swipers" ref="goodSwiper">
                        <swiper-slide v-for="(item, l) in monitoringData" :key="l">
                            <div class="items" >
                                <img :src="item" alt="">
                            </div>
                        </swiper-slide>
                    </swiper>
                </div>
                <div class="grades">
                    <div class="gradethree" @click="threegrade"></div>
                    <div class="gradesix" @click="sixgrade"></div>   
                </div>
            </div>

            <div class="growthRecord-bottom">
                <div class="item" @click="primary">
                    <img src="../../static/images/growthRecord/primary.png" alt="">
                </div>
                <div class="item" @click="junior">
                    <img src="../../static/images/growthRecord/junior.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import grade1 from '../../static/images/growthRecord/1.png'
import grade2 from '../../static/images/growthRecord/2.png'
import grade3 from '../../static/images/growthRecord/3.png'
import grade4 from '../../static/images/growthRecord/4.png'
import grade5 from '../../static/images/growthRecord/5.png'
import grade6 from '../../static/images/growthRecord/6.png'
import grade7 from '../../static/images/growthRecord/7.png'
import grade8 from '../../static/images/growthRecord/8.png'
import grade9 from '../../static/images/growthRecord/9.png'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
    data () {
        return {
            monitoringData: [grade1, grade2, grade3, grade4, grade5, grade6, grade7, grade8, grade9],
            swiperOption: {
                autoplay: {
                    delay: 5000,
                    disableOnInteraction: false
                },
                spaceBetween: 10,
                loop: true,
                speed: 500
            }
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    methods: {
        // 三年级
        threegrade () {

        },
        // 六年级
        sixgrade () {

        },
        // 小学
        primary () {
            this.$router.push('/primary')
        },
        // 初中
        junior () {
            this.$router.push('/junior')
        }
    }
}
</script>

<style lang="less" scoped>
.growthRecord{
    width: 1920px;
    height: 1080px;
    background: url('../../static/images/growthRecord/backurl.jpg') no-repeat left top;

    .content{
        .growthRecord-top{
            width: 100%;
            height: 77px;
            .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(1){
                        padding-top: 0px;
                        width: 167px;
                        height: 71px;
                        margin-top: 25px;
                        margin-right: 0px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
        .growthRecord-center{
            width: 100%;
            height: 924px;
            padding: 26px 0 0 46px;
            .grade{
                width: 334px;
                height: 431px;
                .swipers{
                    width: 334px;
                    height: 431px;
                    .items{
                        img{
                            width: 334px;
                            height: 431px;
                        }
                    }
                }
            }
            .grades{
                width: 100%;
                height: 418px;
                display: flex;
                .gradethree{
                    width: 120px;
                    height: 100%;
                    margin-left: 457px;
                }
                .gradesix{
                    width: 120px;
                    height: 100%;
                    margin-left: 465px;
                }
            }
        }
        .growthRecord-bottom{
            width: 100%;
            height: 50px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            .item{
                cursor: pointer;
                width: 225px;
                height: 50px;
                img{
                    width: 225px;
                    height: 50px;
                }
                &:nth-child(1){
                    margin-right: 297px;
                }
            }
        }
    }
}
</style>
