add

src/pages/growthRecord.vue

@@ -86,7 +86,7 @@ export default {
         },
         // 安全场景
         safety () {
-
+            this.$router.push('/safety')
         },
         // 三年级
         threegrade () {

src/pages/safety.vue

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

src/router/routes.js

@@ -2,6 +2,8 @@
 import Index from '@/pages/index.vue'
 // 菊宝成长记
 import growthRecord from '@/pages/growthRecord.vue'
+// 初中教学课程
+import safety from '@/pages/safety.vue'
 // 小学教学课程
 import primary from '@/pages/primary.vue'
 // 初中教学课程
@@ -20,6 +22,10 @@ export default [
         component: growthRecord
     },
     {
+        path: '/safety',
+        component: safety
+    },
+    {
         path: '/primary',
         component: primary
     },