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 {
.grow{
width: 1920px;
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>
src/pages/sixthFormStudent.vue
<template>
<div class="sixth-page">
<div class="sixth-page">
<div class="left">
<!-- 身心健康 -->
<div class="left-top" @click="healthy"></div>
<!-- 学业分析 -->
<div class="left-bottom"></div>
<div class="left-bottom" @click="study"></div>
</div>
<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 class="right">
<div class="right-top"></div>
<div class="right-top" @click="integration"></div>
<div class="right-bottom">
<div class="title"></div>
<div class="swiper">
<div class="swiper1">
<!-- 轮播图 -->
<swiper :options="swiperOption" v-if="activeImgs.length">
<swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" >
......@@ -22,12 +58,12 @@
</swiper>
</div>
</div>
<div class="edit"></div>
<div class="edit" @click="edit"></div>
</div>
</div>
</template>
<script>
import SelectList from '@/components/SelectList.vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import active1 from '../../static/images/sixthForm/1.png'
......@@ -36,10 +72,45 @@ import active3 from '../../static/images/sixthForm/3.png'
export default {
components: {
swiper,
swiperSlide
swiperSlide,
SelectList
},
data () {
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],
swiperOption: {
watchSlidesProgress: true,
......@@ -49,10 +120,6 @@ export default {
loopedSlides: 3,
spaceBetween: 0,
autoplay: true,
pagination: {
el: '.swiper-pagination'
// clickable :true,
},
on: {
progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) {
......@@ -62,7 +129,7 @@ export default {
if (Math.abs(slideProgress) > 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 zIndex = 999 - Math.abs(Math.round(10 * slideProgress))
slide.transform('translateX(' + translate + ') scale(' + scale + ')')
......@@ -84,35 +151,72 @@ export default {
}
},
methods: {
/**
* @method 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>
<style lang="less">
#swiper1 {
width: 498px;
widows: 500px;
height: 208px;
.swiper-container {
padding-top: 20px;
width: 100%;
height: 100%;
.swiper-slide {
width: 393px;
width: 393px !important;
height: 208px;
background: rgba(0, 34, 36, 0.3);
border-radius: 10px;
overflow: hidden;
&.swiper-slide-prev, &.swiper-slide-next {
opacity: .5;
opacity: .5 !important;
}
&.swiper-slide-active {
z-index: 10;
opacity: 1;
opacity: 1 !important;
}
img {
display: block;
......@@ -127,6 +231,7 @@ export default {
width: 1920px;
height: 1080px;
background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto;
.left{
.left-top{
width: 96px;
......@@ -134,7 +239,7 @@ export default {
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
top: 111px;
left: 408px;
left: 548px;
}
.left-bottom{
width: 96px;
......@@ -142,7 +247,7 @@ export default {
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
bottom: 271px;
left: 410px;
left: 548px;
}
}
.center{
......@@ -152,7 +257,49 @@ export default {
background: url('@{imagePath}research.png') no-repeat;
position: absolute;
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{
......@@ -162,12 +309,12 @@ export default {
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
top: 110px;
left: 1798px;
left: 1938px;
}
.right-bottom{
position: absolute;
top: 821px;
left: 1406px;
left: 1556px;
.title{
width: 152px;
height: 18px;
......@@ -180,7 +327,7 @@ export default {
background: url('@{imagePath}return.png');
position: absolute;
top: 39px;
left: 1822px;
left: 1962px;
}
}
}
......
src/router/routes.js
......@@ -6,7 +6,8 @@ import class3 from '@/pages/class3.vue'
import student from '@/pages/class3-student.vue'
// 六年级菊园学子
import sixthForm from '@/pages/sixthFormStudent.vue'
// 六年级菊园个人
import growth from '@/pages/growth.vue'
export default [
{
path: '/',
......@@ -27,5 +28,9 @@ export default [
{
path: '/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