Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 95017129 by yuwen
Options

add

parent d653f108
Showing with 179 additions and 26 deletions
src/pages/growth.vue
...@@ -10,6 +10,7 @@ export default { ...@@ -10,6 +10,7 @@ export default {
.grow{ .grow{
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: url('../../static/images/sixthForm/grow.png') no-repeat; background: url('../../static/images/sixthForm/grow.png') no-repeat center;
margin: 0 auto;
} }
</style> </style>
src/pages/sixthFormStudent.vue
<template> <template>
<div class="sixth-page"> <div class="sixth-page">
<div class="left"> <div class="left">
<!-- 身心健康 --> <!-- 身心健康 -->
<div class="left-top" @click="healthy"></div> <div class="left-top" @click="healthy"></div>
<!-- 学业分析 --> <!-- 学业分析 -->
<div class="left-bottom"></div> <div class="left-bottom" @click="study"></div>
</div> </div>
<div class="center"> <div class="center">
<div class="research"></div> <!-- 搜索 -->
<div class="research">
<div class="select-item">
<select-list
title="年级"
:list="gradeList"
v-model="gradeRes"
/>
</div>
<div class="select-item">
<select-list
title="班级"
:list="classList"
v-model="classRes"
/>
</div>
<div class="select-item">
<select-list
title="性别"
:list="sexList"
v-model="sexRes"
/>
</div>
<div class="select-item student-name">
<input
placeholder="学生姓名"
v-model="studentName"
@keyup.enter="Search"
/>
</div>
<div
class="search"
@click="Search"
>
搜索
</div>
</div>
</div> </div>
<div class="right"> <div class="right">
<div class="right-top"></div> <div class="right-top" @click="integration"></div>
<div class="right-bottom"> <div class="right-bottom">
<div class="title"></div> <div class="title"></div>
<div class="swiper"> <div class="swiper1">
<!-- 轮播图 --> <!-- 轮播图 -->
<swiper :options="swiperOption" v-if="activeImgs.length"> <swiper :options="swiperOption" v-if="activeImgs.length">
<swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" > <swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" >
...@@ -22,12 +58,12 @@ ...@@ -22,12 +58,12 @@
</swiper> </swiper>
</div> </div>
</div> </div>
<div class="edit"></div> <div class="edit" @click="edit"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import SelectList from '@/components/SelectList.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper' import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' import 'swiper/dist/css/swiper.css'
import active1 from '../../static/images/sixthForm/1.png' import active1 from '../../static/images/sixthForm/1.png'
...@@ -36,10 +72,45 @@ import active3 from '../../static/images/sixthForm/3.png' ...@@ -36,10 +72,45 @@ import active3 from '../../static/images/sixthForm/3.png'
export default { export default {
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
SelectList
}, },
data () { data () {
return { return {
// 选择年级
gradeRes: {
name: ''
},
// 年级选择结果
gradeList: [
{name: '一年级'},
{name: '二年级'},
{name: '三年级'},
{name: '四年级'},
{name: '五年级'},
{name: '六年级'}
],
// 选择班级
classRes: {
name: ''
},
// 班级选择结果
classList: [
{name: '一班'},
{name: '二班'},
{name: '三班'}
],
// 选择性别
sexRes: {
name: ''
},
// 性别结果
sexList: [
{name: '男'},
{name: '女'}
],
// 老师姓名
studentName: '',
activeImgs: [active1, active2, active3], activeImgs: [active1, active2, active3],
swiperOption: { swiperOption: {
watchSlidesProgress: true, watchSlidesProgress: true,
...@@ -49,10 +120,6 @@ export default { ...@@ -49,10 +120,6 @@ export default {
loopedSlides: 3, loopedSlides: 3,
spaceBetween: 0, spaceBetween: 0,
autoplay: true, autoplay: true,
pagination: {
el: '.swiper-pagination'
// clickable :true,
},
on: { on: {
progress: function (progress) { progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) { for (var i = 0; i < this.slides.length; i++) {
...@@ -62,7 +129,7 @@ export default { ...@@ -62,7 +129,7 @@ export default {
if (Math.abs(slideProgress) > 1) { if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1 modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
} }
var translate = slideProgress * modify * 270 + 'px' var translate = slideProgress * modify * 570 + 'px'
var scale = 1 - Math.abs(slideProgress) / 3 var scale = 1 - Math.abs(slideProgress) / 3
var zIndex = 999 - Math.abs(Math.round(10 * slideProgress)) var zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
slide.transform('translateX(' + translate + ') scale(' + scale + ')') slide.transform('translateX(' + translate + ') scale(' + scale + ')')
...@@ -84,35 +151,72 @@ export default { ...@@ -84,35 +151,72 @@ export default {
} }
}, },
methods: { methods: {
/**
* @method healthy 身心健康查看更多
*/
healthy () { healthy () {
this.currIndex = 0
this.visible = true
console.log(this.currIndex)
},
/**
* @method study 学业分析查看更多
*/
study () {
this.currIndex = 1
this.visible = true
console.log(this.currIndex)
},
/**
* @method integration 五育融合查看更多
*/
integration () {
this.currIndex = 2
this.visible = true
console.log(this.currIndex)
},
closePopup (flag) {
this.visible = flag
},
/**
* @method edit 返回
*/
edit () {
this.$router.back(-1)
},
/**
* @method Search 搜索
*/
Search () {
this.$router.push({path: '/growth'})
} }
} }
} }
</script> </script>
<style lang="less"> <style lang="less">
#swiper1 { #swiper1 {
width: 498px; widows: 500px;
height: 208px; height: 208px;
.swiper-container { .swiper-container {
padding-top: 20px; padding-top: 20px;
width: 100%; width: 100%;
height: 100%; height: 100%;
.swiper-slide { .swiper-slide {
width: 393px; width: 393px !important;
height: 208px; height: 208px;
background: rgba(0, 34, 36, 0.3); background: rgba(0, 34, 36, 0.3);
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
&.swiper-slide-prev, &.swiper-slide-next { &.swiper-slide-prev, &.swiper-slide-next {
opacity: .5; opacity: .5 !important;
} }
&.swiper-slide-active { &.swiper-slide-active {
z-index: 10; z-index: 10;
opacity: 1; opacity: 1 !important;
} }
img { img {
display: block; display: block;
...@@ -127,6 +231,7 @@ export default { ...@@ -127,6 +231,7 @@ export default {
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: url('@{imagePath}bg.png') no-repeat center; background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto;
.left{ .left{
.left-top{ .left-top{
width: 96px; width: 96px;
...@@ -134,7 +239,7 @@ export default { ...@@ -134,7 +239,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: 408px; left: 548px;
} }
.left-bottom{ .left-bottom{
width: 96px; width: 96px;
...@@ -142,7 +247,7 @@ export default { ...@@ -142,7 +247,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: 410px; left: 548px;
} }
} }
.center{ .center{
...@@ -152,7 +257,49 @@ export default { ...@@ -152,7 +257,49 @@ 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: 546px; left: 696px;
display: flex;
.select-item {
position: relative;
width: 140px;
height: 32px;
margin: 20px 16px 0 20px;
&.student-name {
width: 162px;
padding: 2px 10px 5px;
background: rgba(7, 32, 65, 0.3);
border: 1px solid rgba(73, 133, 217, 0.6);
> input {
width: 100%;
height: 100%;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
background: none;
&::-webkit-input-placeholder {
color: #7AC6FA;
}
}
}
}
.search {
width: 73px;
height: 32px;
background-color: rgba(7, 32, 65, 0.3);
border: 1px solid rgba(73, 133, 217, .6);
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
line-height: 30px;
text-align: center;
cursor: pointer;
margin-top: 20px;
}
} }
} }
.right{ .right{
...@@ -162,12 +309,12 @@ export default { ...@@ -162,12 +309,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: 1798px; left: 1938px;
} }
.right-bottom{ .right-bottom{
position: absolute; position: absolute;
top: 821px; top: 821px;
left: 1406px; left: 1556px;
.title{ .title{
width: 152px; width: 152px;
height: 18px; height: 18px;
...@@ -180,7 +327,7 @@ export default { ...@@ -180,7 +327,7 @@ export default {
background: url('@{imagePath}return.png'); background: url('@{imagePath}return.png');
position: absolute; position: absolute;
top: 39px; top: 39px;
left: 1822px; left: 1962px;
} }
} }
} }
......
src/router/routes.js
...@@ -6,7 +6,8 @@ import class3 from '@/pages/class3.vue' ...@@ -6,7 +6,8 @@ import class3 from '@/pages/class3.vue'
import student from '@/pages/class3-student.vue' import student from '@/pages/class3-student.vue'
// 六年级菊园学子 // 六年级菊园学子
import sixthForm from '@/pages/sixthFormStudent.vue' import sixthForm from '@/pages/sixthFormStudent.vue'
// 六年级菊园个人
import growth from '@/pages/growth.vue'
export default [ export default [
{ {
path: '/', path: '/',
...@@ -27,5 +28,9 @@ export default [ ...@@ -27,5 +28,9 @@ export default [
{ {
path: '/sixthForm', path: '/sixthForm',
component: sixthForm component: sixthForm
},
{
path: '/growth',
component: growth
} }
] ]
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