Commit 2fdd62e0 by wangdongchen

Merge branch 'wdc' into '1a86cad6'

Wdc

See merge request !5
parents df885f7a 0151da1d
Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95 Subproject commit 3e4439c28ae19ff665cfef1192ba73ee32590e66
<template>
<div class="growthRecord">
<div class="content">
<div class="growthRecord-top">
<div class="loge" @click="loge"></div>
<div class="tab">
<div class="item">
<img src="../../static/images/growthRecord/growactive.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/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: {
loge () {
},
// 教师发展
progress () {
},
// 安全场景
safety () {
this.$router.push('/safety')
},
// 三年级
threegrade () {
this.$router.push('/class3')
},
// 六年级
sixgrade () {
this.$router.push('/sixthForm')
},
// 小学
primary () {
this.$router.push('/primary')
},
// 初中
junior () {
this.$router.push('/junior')
}
}
}
</script>
<style lang="less" scoped>
.growthRecord{
width: 1920px;
height: 1080px;
margin:0 auto;
background: url('../../static/images/growthRecord/backurl.jpg') no-repeat left top;
.content{
.growthRecord-top{
width: 100%;
height: 77px;
display: flex;
justify-content: space-between;
.loge{
cursor: pointer;
width: 377px;
height: 76px;
}
.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;
cursor: pointer;
}
.gradesix{
cursor: pointer;
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>
<template>
<div class="junior-page">
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.junior-page{
width: 1920px;
height: 1080px;
}
</style>
<template>
<div class="primary-page">
<div class="header">
<div class="loge"></div>
<div class="back" @click="back"></div>
</div>
</div>
</template>
<script>
export default {
methods: {
loge () {
},
back () {
this.$router.push('/growth')
}
}
}
</script>
<style lang="less" scoped>
.primary-page{
width: 1920px;
height: 1080px;
margin:0 auto;
background: url('../../static/images/primary.png') no-repeat left top;
.header{
width: 100%;
height: 77px;
display: flex;
justify-content: space-between;
.loge{
cursor: pointer;
width: 377px;
height: 76px;
}
.back{
cursor: pointer;
display: flex;
justify-content: flex-end;
height: 35px;
width: 83px;
margin: 15px;
margin-top: 63px;
background: url('../../static/images/back.png') no-repeat left top;
}
}
}
</style>
<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;
margin:0 auto;
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>
// 导入页面名称 // 导入页面名称
import Index from '@/pages/index.vue' import Index from '@/pages/index.vue'
// 菊宝成长记
import growthRecord from '@/pages/growthRecord.vue'
// 初中教学课程
import safety from '@/pages/safety.vue'
// 小学教学课程
import primary from '@/pages/primary.vue'
// 初中教学课程
import junior from '@/pages/junior.vue'
// 三年级菊宝 // 三年级菊宝
import class3 from '@/pages/class3.vue' import class3 from '@/pages/class3.vue'
// 三年级菊宝个人 // 三年级菊宝个人
...@@ -18,6 +26,22 @@ export default [ ...@@ -18,6 +26,22 @@ export default [
component: Index component: Index
}, },
{ {
path: '/growth',
component: growthRecord
},
{
path: '/safety',
component: safety
},
{
path: '/primary',
component: primary
},
{
path: '/junior',
component: junior
},
{
path: '/class3', path: '/class3',
component: class3 component: class3
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment