Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 89d58a19 by wdc147
Options

Merge remote-tracking branch 'origin/1a86cad6' into wdc

parents 35bec0b2 df885f7a
Showing with 933 additions and 0 deletions
src/components/BulletFrame/index.vue 0 → 100644
<template>
<div class="frame-bg" v-if="visible">
<div
class="frame"
:style="{ width: layout.width, height: layout.height }"
>
<i class="close" @click="close"></i>
<div class="content">
<slot>
</slot>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
data () {
return {
// visible: false // 是否展示弹框
}
},
computed: {
layout () {
const size = {
width: '1352px',
height: '792px'
}
return this.deepMerge({}, size, this.layoutProps)
}
},
methods: {
close () {
this.$emit('beforeClose', false)
}
}
}
</script>
<style lang="less" scoped>
.frame-bg {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 100;
.frame {
// padding: 90px 30px 30px 30px;
position: relative;
background: radial-gradient(circle, #0D375F, #091F33);
border: 3px solid;
border-image: linear-gradient(0deg, #71BEF9, #1E5D92, #002D52, #1F5E93, #71BEF8) 3 3;
.close {
cursor: pointer;
position: fixed;
top: 180px;
right: 330px;
width: 35px;
height: 33px;
z-index: 1;
// background: url('../../../static/images/close.png') no-repeat left top;
}
.content {
position: relative;
width: 100%;
height: 100%;
z-index: 0;
}
}
}
</style>
src/components/SelectList.vue 0 → 100644
<template>
<div class="select-container">
<!-- 当前选择的内容 或 默认占位符 -->
<div class="select-title" @click="toggleSelectList">
{{ currSelect.name || title }}
</div>
<!-- 下拉选择列表 -->
<ul
class="select-list"
@mouseover="selectMouseOver"
@mouseleave="selectMouseLeave"
v-show="showSelect"
>
<li
v-for="(item, index) in list"
:key="index"
@click.stop="selectItem(item)"
>
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
let timer = null
export default {
name: 'SelectList',
data () {
return {
showSelect: false,
currSelect: {} // 当前选择项内容
}
},
props: {
// 当前选择组件标题
title: {
type: String,
default: ''
},
// 待选择列表
list: {
type: Array,
default () {
return []
}
}
},
methods: {
/**
* @method toggleSelectList 切换显示/隐藏下拉列表
*/
toggleSelectList () {
this.showSelect = !this.showSelect
this.selectMouseLeave(3000)
},
/**
* @method selectMouseOver 下拉选择框鼠标移入事件
*/
selectMouseOver () {
clearTimeout(timer)
timer = null
},
/**
* @method selectMouseLeave 下拉选择框鼠标移出事件
*/
selectMouseLeave (interval = 1000) {
timer = setTimeout(() => {
if (this.showSelect === true) {
this.showSelect = false
}
}, interval)
},
/**
* @method selectItem 选择当前项
* @param {Object} item 当前选择项数据
*/
selectItem (item = {}) {
this.showSelect = false
this.currSelect = item
this.$emit('input', item)
}
}
}
</script>
<style lang="less">
.select-container {
width: 100%;
height: 100%;
}
.select-title {
position: relative;
padding-right: 10px;
padding-left: 10px;
line-height: 30px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
background-color: rgba(7, 32, 65, 0.3);
border: 1px solid rgba(73, 133, 217, .6);
cursor: pointer;
&:after {
content: "";
position: absolute;
top: 10px;
right: 10px;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: #6BA6F8;
}
}
// 下拉选择列表
.select-list {
position: absolute;
right: 0;
left: 0;
z-index: 10;
// height: 122px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid rgba(73, 133, 217, 0.6);
background-color:#90c0e7;
box-sizing: border-box;
&::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
height: 6px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(29, 189, 255, .8);
}
> li {
height: 30px;
line-height: 30px;
padding-right: 10px;
padding-left: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
&:hover {
background-color: rgba(73, 133, 217, .5);
}
}
}
</style>
src/pages/class3-student.vue 0 → 100644
<template>
<div class="student">
<img class="img1" src='../../static/images/classStudent/1.png' />
<img class="img2" @click="change" src="../../static/images/class3/back.png" />
</div>
</template>
<script>
export default {
methods: {
change () {
this.$router.back(-1)
}
}
}
</script>
<style lang="less" scoped>
.student{
width: 1920px;
height: 1080px;
position: relative;
.img1{
position: absolute;
width: 100%;
height: 100%;
}
.img2{
position: absolute;
top:50px;
right:25px;
width: 83px;
height: 35px;
cursor: pointer;
}
}
</style>
\ No newline at end of file
src/pages/class3.vue 0 → 100644
<template>
<div class="class3">
<img class="img1" @click="change1" src="../../static/images/class3/more.png" />
<img class="img2" @click="change2" src="../../static/images/class3/more.png" />
<img class="img3" @click="change3" src="../../static/images/class3/more.png" />
<img class="img4" @click="change4" src="../../static/images/class3/back.png" />
<!-- 搜索 -->
<div class="class3-search">
<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>
<!-- 弹框 -->
<bullet-frame
:visible="visible"
@beforeClose="closePopup"
:layout="{width: '1102px', height: '792px'}"
>
<div>
<img :src="pics[currIndex]" />
</div>
</bullet-frame>
</div>
</template>
<script>
import SelectList from '@/components/SelectList.vue'
export default {
components: {
SelectList
},
data () {
return {
visible: false,
currIndex: 999,
pics: [
require('../../static/images/class3/health.png'),
require('../../static/images/class3/ronghe.png'),
require('../../static/images/class3/ronghe.png')
],
// 选择年级
gradeRes: {
name: ''
},
// 年级选择结果
gradeList: [
{name: '一年级'},
{name: '二年级'},
{name: '三年级'},
{name: '四年级'},
{name: '五年级'}
],
// 选择班级
classRes: {
name: ''
},
// 学科选择结果
classList: [
{name: '一班'},
{name: '二班'},
{name: '三班'},
{name: '四班'},
{name: '五班'}
],
// 选择性别
sexRes: {
name: ''
},
// 学科性别结果
sexList: [
{name: '男'},
{name: '女'}
],
// 老师姓名
studentName: ''
}
},
methods: {
/**
* @method change1 身心健康查看更多
*/
change1 () {
this.currIndex = 0
this.visible = true
console.log(this.currIndex)
},
/**
* @method change1 五育融合查看更多
*/
change2 () {
this.currIndex = 1
this.visible = true
console.log(this.currIndex)
},
/**
* @method change1 学业水平查看更多
*/
change3 () {
this.currIndex = 2
this.visible = true
console.log(this.currIndex)
},
closePopup (flag) {
this.visible = flag
},
/**
* @method change4 返回
*/
change4 () {
this.$router.back(-1)
},
/**
* @method Search 查询更多
*/
Search () {
if (this.studentName === '小王') {
this.$router.push({path: '/student'})
}
console.log(123)
}
}
}
</script>
<style lang="less" scoped>
@imagePath: "../../static/images/class3/";
.class3{
width: 1920px;
height: 1080px;
position: relative;
background: url('@{imagePath}bg.png') no-repeat center;
background-size: 1920px 1080px;
margin:0 auto;
background-color: rgb(238, 211, 211);
.img1{
position: absolute;
top:110px;
left:410px;
width: 96px;
height: 22px;
cursor: pointer;
}
.img2{
position: absolute;
top:110px;
right:25px;
width: 96px;
height: 22px;
cursor: pointer;
}
.img3{
position: absolute;
top:860px;
right:25px;
width: 96px;
height: 22px;
cursor: pointer;
}
.img4{
position: absolute;
top:50px;
right:25px;
width: 83px;
height: 35px;
cursor: pointer;
}
.class3-search{
position: absolute;
top:740px;
right:545px;
width: 830px;
height: 70px;
display: flex;
padding:16px 0px 0px 19px;
background: url('@{imagePath}kuang.png') no-repeat center;
background-size: 100% 100%;
border: springgreen 1px solid;
.select-item {
position: relative;
width: 130px;
height: 32px;
margin-right: 13px;
&.student-name {
width: 222px;
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: 125px;
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;
}
}
}
</style>
\ No newline at end of file
src/pages/growth.vue 0 → 100644
<template>
<div class="grow"></div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.grow{
width: 1920px;
height: 1080px;
background: url('../../static/images/sixthForm/grow.png') no-repeat center;
margin: 0 auto;
}
</style>
src/pages/sixthFormStudent.vue 0 → 100644
<template>
<div class="sixth-page">
<div class="left">
<!-- 身心健康 -->
<div class="left-top" @click="healthy"></div>
<!-- 学业分析 -->
<div class="left-bottom" @click="study"></div>
</div>
<div class="center">
<!-- 搜索 -->
<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" @click="integration"></div>
<div class="right-bottom">
<div class="title"></div>
<div class="swiper1">
<!-- 轮播图 -->
<swiper :options="swiperOption" v-if="activeImgs.length">
<swiper-slide class="swiper-slide" v-for="(item, key) in activeImgs" :key="key" >
<img :src=item />
</swiper-slide>
</swiper>
</div>
</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'
import active2 from '../../static/images/sixthForm/2.png'
import active3 from '../../static/images/sixthForm/3.png'
export default {
components: {
swiper,
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,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 3,
spaceBetween: 0,
autoplay: true,
on: {
progress: function (progress) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
var slideProgress = this.slides[i].progress
var modify = 1
if (Math.abs(slideProgress) > 1) {
modify = (Math.abs(slideProgress) - 1) * 0.3 + 1
}
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 + ')')
slide.css('zIndex', zIndex)
slide.css('opacity', 1)
if (Math.abs(slideProgress) > 3) {
slide.css('opacity', 0)
}
}
},
setTransition: function (transition) {
for (var i = 0; i < this.slides.length; i++) {
var slide = this.slides.eq(i)
slide.transition(transition)
}
}
}
}
}
},
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 {
widows: 500px;
height: 208px;
.swiper-container {
padding-top: 20px;
width: 100%;
height: 100%;
.swiper-slide {
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 !important;
}
&.swiper-slide-active {
z-index: 10;
opacity: 1 !important;
}
img {
display: block;
}
}
}
}
</style>
<style lang="less" scoped>
@imagePath: "../../static/images/sixthForm/";
.sixth-page{
width: 1920px;
height: 1080px;
background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto;
.left{
.left-top{
width: 96px;
height: 22px;
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
top: 111px;
left: 548px;
}
.left-bottom{
width: 96px;
height: 22px;
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
bottom: 271px;
left: 548px;
}
}
.center{
.research{
width: 828px;
height: 70px;
background: url('@{imagePath}research.png') no-repeat;
position: absolute;
top: 736px;
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-top{
width: 96px;
height: 22px;
background: url('@{imagePath}btn.png') no-repeat;
position: absolute;
top: 110px;
left: 1938px;
}
.right-bottom{
position: absolute;
top: 821px;
left: 1556px;
.title{
width: 152px;
height: 18px;
background: url('@{imagePath}title.png');
}
}
.edit{
width: 83px;
height: 35px;
background: url('@{imagePath}return.png');
position: absolute;
top: 39px;
left: 1962px;
}
}
}
</style>
src/public/plugins/index.js
......@@ -4,6 +4,8 @@ import mixins from '../mixins'
import ContentContainer from 'components/ContentContainer'
// 头部标题
import Header from 'components/Header'
// 弹框
import BulletFrame from 'components/BulletFrame'
const UsePlugin = {}
......@@ -19,6 +21,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('content-container', ContentContainer)
// 页面头部标题
Vue.component('page-header', Header)
// 弹框
Vue.component('bullet-frame', BulletFrame)
}
export default UsePlugin
src/router/routes.js
......@@ -8,6 +8,14 @@ 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 student from '@/pages/class3-student.vue'
// 六年级菊园学子
import sixthForm from '@/pages/sixthFormStudent.vue'
// 六年级菊园个人
import growth from '@/pages/growth.vue'
export default [
{
path: '/',
......@@ -32,5 +40,21 @@ export default [
{
path: '/junior',
component: junior
},
{
path: '/class3',
component: class3
},
{
path: '/student',
component: student
},
{
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