add

src/App.vue

@@ -2,7 +2,7 @@
     <div id="app"
         :style="{width: designWidth + 'px', height: designHeight + 'px'}"
     >
-        <page-header />
+        <!-- <page-header /> -->
 
         <div class="app-container">
             <router-view></router-view>

src/components/Header/index.vue

 <template>
     <header id="header">
         <div class="logo">
-            <img src="./images/logo.png" alt="科艺logo"><span class="logo-desc">数字化管理平台</span>
+            <!-- <img src="./images/logo.png" alt="科艺logo"><span class="logo-desc">数字化管理平台</span> -->
         </div>
         <h2 class="title"><span>{{ currPageTitle }}</span></h2>
         <div class="date">
@@ -101,7 +101,7 @@ export default {
     line-height: @pageHeaderHeight + 4;
     white-space: nowrap;
     text-align: center;
-    background: url('./images/header-bg.png') no-repeat center top;
+    // background: url('./images/header-bg.png') no-repeat center top;
 
     > span {
         font-size: 34px;

src/pages/growthRecord.vue

+<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>

src/pages/junior.vue

+<template>
+    <div class="junior-page">
+
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.junior-page{
+    width: 1920px;
+    height: 1080px;
+}
+</style>

src/pages/primary.vue

+<template>
+    <div class="primary-page">
+
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+.primary-page{
+    width: 1920px;
+    height: 1080px;
+}
+</style>

src/router/routes.js

 // 导入页面名称
 import Index from '@/pages/index.vue'
-
+// 菊宝成长记
+import growthRecord from '@/pages/growthRecord.vue'
+// 小学教学课程
+import primary from '@/pages/primary.vue'
+// 初中教学课程
+import junior from '@/pages/junior.vue'
 export default [
     {
         path: '/',
@@ -9,5 +14,17 @@ export default [
     {
         path: '/index',
         component: Index
+    },
+    {
+        path: '/growth',
+        component: growthRecord
+    },
+    {
+        path: '/primary',
+        component: primary
+    },
+    {
+        path: '/junior',
+        component: junior
     }
 ]