Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 40b4053d by yuwen
Options

Merge branch 'yuwen' of http://123.207.147.179:8888/vue-project/JuyuanPrimarySchool into yuwen

parents 20c13581 ccaddfa7
Showing with 503 additions and 21 deletions
src/components/BulletFrame/index.vue
...@@ -67,10 +67,10 @@ export default { ...@@ -67,10 +67,10 @@ export default {
.close { .close {
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
top: 180px; top: 155px;
right: 330px; right: 315px;
width: 35px; width: 40px;
height: 33px; height: 40px;
z-index: 1; z-index: 1;
// background: url('../../../static/images/close.png') no-repeat left top; // background: url('../../../static/images/close.png') no-repeat left top;
} }
...@@ -78,9 +78,10 @@ export default { ...@@ -78,9 +78,10 @@ export default {
.content { .content {
position: relative; position: relative;
width: 100%; width: 1352px;
height: 100%; height: 792px;
z-index: 0; z-index: 0;
overflow: hidden;
} }
} }
} }
......
src/pages/class3-student.vue
<template> <template>
<div class="student"> <div class="student">
<img src='../../static/images/classStudent/1.png' /> <img class="img1" src='../../static/images/classStudent/1.png' />
<img class="img2" @click="change" src="../../static/images/class3/back.png" />
</div> </div>
</template> </template>
<script> <script>
export default { export default {
methods: {
change () {
this.$router.back(-1)
}
}
} }
</script> </script>
<style> <style lang="less" scoped>
.student{ .student{
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
margin:0 auto;
position: relative;
.img1{
position: absolute;
width: 100%;
height: 100%;
}
.img2{
position: absolute;
top:50px;
right:25px;
width: 83px;
height: 35px;
cursor: pointer;
}
} }
</style> </style>
\ No newline at end of file
src/pages/class3.vue
...@@ -48,10 +48,9 @@ ...@@ -48,10 +48,9 @@
<bullet-frame <bullet-frame
:visible="visible" :visible="visible"
@beforeClose="closePopup" @beforeClose="closePopup"
:layout="{width: '1102px', height: '792px'}"
> >
<div> <div>
<img :src="pics[currIndex]" /> <img class='bulletImg' :src="pics[currIndex]" />
</div> </div>
</bullet-frame> </bullet-frame>
</div> </div>
...@@ -147,6 +146,9 @@ export default { ...@@ -147,6 +146,9 @@ export default {
* @method Search 查询更多 * @method Search 查询更多
*/ */
Search () { Search () {
// if (this.studentName === '小王') {
// this.$router.push({path: '/student'})
// }
this.$router.push({path: '/student'}) this.$router.push({path: '/student'})
} }
} }
...@@ -205,18 +207,18 @@ export default { ...@@ -205,18 +207,18 @@ export default {
width: 830px; width: 830px;
height: 70px; height: 70px;
display: flex; display: flex;
padding:16px 0px 0px 19px;
background: url('@{imagePath}kuang.png') no-repeat center; background: url('@{imagePath}kuang.png') no-repeat center;
background-size: 100% 100%; background-size: 100% 100%;
border: springgreen 1px solid;
.select-item { .select-item {
position: relative; position: relative;
width: 140px; width: 130px;
height: 32px; height: 32px;
margin-right: 16px; margin-right: 13px;
&.student-name { &.student-name {
width: 162px; width: 222px;
padding: 2px 10px 5px; padding: 2px 10px 5px;
background: rgba(7, 32, 65, 0.3); background: rgba(7, 32, 65, 0.3);
border: 1px solid rgba(73, 133, 217, 0.6); border: 1px solid rgba(73, 133, 217, 0.6);
...@@ -238,7 +240,7 @@ export default { ...@@ -238,7 +240,7 @@ export default {
} }
.search { .search {
width: 73px; width: 125px;
height: 32px; height: 32px;
background-color: rgba(7, 32, 65, 0.3); background-color: rgba(7, 32, 65, 0.3);
border: 1px solid rgba(73, 133, 217, .6); border: 1px solid rgba(73, 133, 217, .6);
...@@ -252,5 +254,10 @@ export default { ...@@ -252,5 +254,10 @@ export default {
} }
} }
} }
.bulletImg{
width: 1428px;
height: 870px;
margin:-27px 0px 0px -40px;
}
</style> </style>
\ No newline at end of file
src/pages/growthRecord.vue 0 → 100644
<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>
src/pages/junior.vue 0 → 100644
<template>
<div class="junior-page">
<div class="header">
<div class="loge"></div>
<div class="back" @click="back"></div>
</div>
</div>
</template>
<script>
export default {
methods: {
back () {
this.$router.push('/growth')
}
}
}
</script>
<style lang="less" scoped>
.junior-page{
width: 1920px;
height: 1080px;
margin: 0 auto;
background: url('../../static/images/junior.png') no-repeat left top;
.header{
width: 100%;
height: 77px;
display: flex;
justify-content: space-between;
.loge{
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>
src/pages/primary.vue 0 → 100644
<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: {
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{
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>
src/pages/safety.vue 0 → 100644
<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: 10px;
}
&: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/pages/sixthFormStudent.vue
...@@ -60,6 +60,15 @@ ...@@ -60,6 +60,15 @@
</div> </div>
<div class="edit" @click="edit"></div> <div class="edit" @click="edit"></div>
</div> </div>
<bullet-frame
:visible="visible"
@beforeClose="closePopup"
:layout="{width: '1102px', height: '792px'}"
>
<div>
<img class="bulletImg" :src="pics[currIndex]" />
</div>
</bullet-frame>
</div> </div>
</template> </template>
<script> <script>
...@@ -114,6 +123,13 @@ export default { ...@@ -114,6 +123,13 @@ export default {
], ],
// 老师姓名 // 老师姓名
studentName: '', studentName: '',
visible: false,
currIndex: 999,
pics: [
require('../../static/images/sixthForm/healthy.png'),
require('../../static/images/sixthForm/study.png'),
require('../../static/images/sixthForm/integration.png')
],
activeImgs: [active1, active2, active3], activeImgs: [active1, active2, active3],
swiperOption: { swiperOption: {
watchSlidesProgress: true, watchSlidesProgress: true,
...@@ -237,6 +253,7 @@ export default { ...@@ -237,6 +253,7 @@ export default {
height: 1080px; height: 1080px;
background: url('@{imagePath}bg.png') no-repeat center; background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto; margin: 0 auto;
verflow: hidden;
.left{ .left{
.left-top{ .left-top{
width: 96px; width: 96px;
...@@ -244,7 +261,7 @@ export default { ...@@ -244,7 +261,7 @@ export default {
background: url('@{imagePath}btn.png') no-repeat; background: url('@{imagePath}btn.png') no-repeat;
position: absolute; position: absolute;
top: 111px; top: 111px;
left: 548px; left: 408px;
} }
.left-bottom{ .left-bottom{
width: 96px; width: 96px;
...@@ -252,7 +269,7 @@ export default { ...@@ -252,7 +269,7 @@ export default {
background: url('@{imagePath}btn.png') no-repeat; background: url('@{imagePath}btn.png') no-repeat;
position: absolute; position: absolute;
bottom: 271px; bottom: 271px;
left: 548px; left: 408px;
} }
} }
.center{ .center{
...@@ -262,7 +279,7 @@ export default { ...@@ -262,7 +279,7 @@ export default {
background: url('@{imagePath}research.png') no-repeat; background: url('@{imagePath}research.png') no-repeat;
position: absolute; position: absolute;
top: 736px; top: 736px;
left: 696px; left: 546px;
display: flex; display: flex;
.select-item { .select-item {
position: relative; position: relative;
...@@ -314,12 +331,12 @@ export default { ...@@ -314,12 +331,12 @@ export default {
background: url('@{imagePath}btn.png') no-repeat; background: url('@{imagePath}btn.png') no-repeat;
position: absolute; position: absolute;
top: 110px; top: 110px;
left: 1938px; left: 1798px;
} }
.right-bottom{ .right-bottom{
position: absolute; position: absolute;
top: 821px; top: 821px;
left: 1556px; left: 1406px;
.title{ .title{
width: 152px; width: 152px;
height: 18px; height: 18px;
...@@ -332,8 +349,13 @@ export default { ...@@ -332,8 +349,13 @@ export default {
background: url('@{imagePath}return.png'); background: url('@{imagePath}return.png');
position: absolute; position: absolute;
top: 39px; top: 39px;
left: 1962px; left: 1822px;
} }
} }
} }
.bulletImg{
width: 1428px;
height: 870px;
margin:-27px 0px 0px -40px;
}
</style> </style>
src/router/routes.js
// 导入页面名称 // 导入页面名称
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