Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 3805ba79 by zsh
Options

update

parent 6d6b6827
Showing with 682 additions and 88 deletions
index.html
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础Vue框架</title> <title>菊园小学</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
"sass-resources-loader": "^2.2.4", "sass-resources-loader": "^2.2.4",
"uglifyjs-webpack-plugin": "^2.2.0", "uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"video.js": "^7.17.0",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-loader": "^15.9.6", "vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3", "vue-style-loader": "^4.1.3",
......
runner @ 88c88180
Subproject commit 3e4439c28ae19ff665cfef1192ba73ee32590e66 Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95
src/App.vue
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
bodyStyle.overflow = 'auto' bodyStyle.overflow = 'auto'
// 如无需设置自动适配则注释该方法即可 // 如无需设置自动适配则注释该方法即可
this.initScale(this.designWidth, this.designHeight) // this.initScale(this.designWidth, this.designHeight)
}, },
methods: {} methods: {}
......
src/components/Select/index.vue 0 → 100644
<template>
<div class="select-item">
<p @click="toggleSelectList">{{ currText || placeholder }}</p>
<ul class="select-item-list" v-show="showSelect">
<li
v-for="(item, index) in list"
:key="index"
@click="selectRes(item)"
@mouseover="selectMouseOver"
@mouseleave="selectMouseLeave"
>
{{ item.name || '' }}
</li>
</ul>
</div>
</template>
<script>
let timerId = null
export default {
name: 'SelectItem',
data () {
return {
currText: '',
showSelect: false
}
},
props: {
placeholder: {
type: String
},
list: {
type: Array,
default () {
return []
}
}
},
methods: {
/**
* @method toggleSelectList 切换显示/隐藏下拉列表
*/
toggleSelectList () {
this.showSelect = !this.showSelect
this.selectMouseLeave(3000)
},
/**
* @method selectMouseOver 下拉选择框鼠标移入事件
*/
selectMouseOver () {
clearTimeout(timerId)
timerId = null
},
/**
* @method selectMouseLeave 下拉选择框鼠标移出事件
*/
selectMouseLeave (interval = 1000) {
timerId = setTimeout(() => {
if (this.showSelect === true) {
this.showSelect = false
}
}, interval)
},
selectRes (params = {}) {
this.showSelect = false
this.currText = params.name
this.$emit('input', params.name)
}
},
beforeDestroy () {
this.clearTimeout(timerId)
timerId = null
}
}
</script>
<style lang="less" scoped>
.select-item {
position: relative;
z-index: 2;
width: 140px;
height: 32px;
margin-left: 12px;
padding-right: 10px;
padding-left: 10px;
background: rgba(7, 32, 65, 0.3);
border: 1px solid #4985D9;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
line-height: 30px;
cursor: pointer;
&.curr:after {
background-image: url('./images/arrow-up.png');
}
&:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 19px;
height: 9px;
background: url('./images/arrow-down.png') no-repeat left top;
transform: translateY(-50%);
}
.select-item-list {
position: absolute;
bottom: 32px;
left: 0;
width: 100%;
border: 1px solid #4985D9;
background-color: #01385D;
> li {
padding-left: 10px;
padding-right: 10px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
line-height: 30px;
cursor: pointer;
&:hover {
background-color: rgba(73, 133, 217, .5);
}
}
}
}
</style>
src/components/Tab/index.vue 0 → 100644
<template>
<div class="tab">
<div class="item" :class="{ active: activeIndex === 0 }" @click="grow"></div>
<div class="item" :class="{ active: activeIndex === 1 }" @click="progress"></div>
<div class="item" :class="{ active: activeIndex === 2 }" @click="safety"></div>
</div>
</template>
<script>
export default {
data () {
return {
activeIndex: null
}
},
mounted () {
const { index = null } = this.$route.query
this.activeIndex = Number(index)
},
methods: {
// 成长记
grow () {
this.$router.push('/growth?index=0')
},
// 教师发展
progress () {
this.$router.push('/progress?index=1')
},
// 安全场景
safety () {
this.$router.push('/safety?index=2')
}
}
}
</script>
<style lang="less" scoped>
.tab {
position: absolute;
top: 30px;
right: 0;
display: flex;
justify-content: center;
align-items: center;
.item {
cursor: pointer;
width: 126px;
height: 37px;
margin-right: 16px;
margin-left: 12px;
img{
width: 126px;
height: 37px;
}
&:nth-child(1) {
background: url('./images/grow.png') no-repeat left top;
&.active {
width: 160px;
height: 71px;
background: url('./images/growactive.png') no-repeat left top;
}
}
&:nth-child(2){
margin-right: 10px;
background: url('./images/progress.png') no-repeat left top;
&.active {
width: 160px;
height: 71px;
// background: url('./images/progressactive.png') no-repeat left top;
}
}
&:nth-child(3){
background: url('./images/safety.png') no-repeat left top;
&.active {
width: 160px;
height: 71px;
background: url('./images/safetyactive.png') no-repeat left top;
}
}
}
}
</style>
src/components/VideoPlayer/index.vue 0 → 100644
<template>
<div>
<video ref="videoPlayer" class="video-js"></video>
</div>
</template>
<script>
export default {
props: {
options: {
type: Object,
default () {
return {}
}
}
},
data () {
return {
player: null
}
},
mounted () {
this.player = this.$video(this.$refs.videoPlayer, this.options, function onPlayerReady () {
console.log('onPlayerReady', this)
})
},
beforeDestroy () {
if (this.player) {
this.player.dispose()
}
}
}
</script>
src/index.js
...@@ -11,6 +11,11 @@ import utils from 'utils' ...@@ -11,6 +11,11 @@ import utils from 'utils'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
Vue.use(Vuex) Vue.use(Vuex)
Vue.use(VueRouter) Vue.use(VueRouter)
Vue.use(UsePlugin) Vue.use(UsePlugin)
......
src/pages/growthRecord.vue
...@@ -4,17 +4,7 @@ ...@@ -4,17 +4,7 @@
<div class="growthRecord-top"> <div class="growthRecord-top">
<div class="loge" @click="loge"></div> <div class="loge" @click="loge"></div>
<div class="tab"> <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>
<div class="growthRecord-center"> <div class="growthRecord-center">
...@@ -29,7 +19,7 @@ ...@@ -29,7 +19,7 @@
</div> </div>
<div class="grades"> <div class="grades">
<div class="gradethree" @click="threegrade"></div> <div class="gradethree" @click="threegrade"></div>
<div class="gradesix" @click="sixgrade"></div> <div class="gradesix" @click="sixgrade"></div>
</div> </div>
</div> </div>
...@@ -57,6 +47,8 @@ import grade8 from '../../static/images/growthRecord/8.png' ...@@ -57,6 +47,8 @@ import grade8 from '../../static/images/growthRecord/8.png'
import grade9 from '../../static/images/growthRecord/9.png' import grade9 from '../../static/images/growthRecord/9.png'
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 Tab from 'components/Tab'
export default { export default {
data () { data () {
return { return {
...@@ -74,7 +66,8 @@ export default { ...@@ -74,7 +66,8 @@ export default {
}, },
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Tab
}, },
methods: { methods: {
loge () { loge () {
...@@ -108,8 +101,17 @@ export default { ...@@ -108,8 +101,17 @@ export default {
} }
</script> </script>
<style lang="less">
.growthRecord {
.tab {
top: 45px;
}
}
</style>
<style lang="less" scoped> <style lang="less" scoped>
.growthRecord{ .growthRecord{
position: relative;
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
margin:0 auto; margin:0 auto;
...@@ -126,39 +128,12 @@ export default { ...@@ -126,39 +128,12 @@ export default {
width: 377px; width: 377px;
height: 76px; 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{ .growthRecord-center{
width: 100%; width: 100%;
height: 924px; height: 924px;
padding: 26px 0 0 46px; padding: 26px 0 0 46px;
.grade{ .grade{
width: 334px; width: 334px;
height: 431px; height: 431px;
......
src/pages/progress.vue 0 → 100644
<template>
<div class="progress">
<tab />
<!-- 搜索 -->
<div class="search-bar">
<!-- 学校类型 -->
<div class="school-types">
<div class="school-area-item" :class="{ active: currTypesIndex === 0 }" @click="chooseSchool(0)">小学校区</div>
<div class="school-area-item" :class="{ active: currTypesIndex === 1 }" @click="chooseSchool(1)">中学校区</div>
</div>
<!-- 老师姓名 -->
<input class="teacher-name" placeholder="教师姓名" v-model="teacherName" />
<!-- 学科 -->
<div class="select-item">
<select-item
placeholder="学科"
:list="currSubjectList"
ref="subject"
/>
</div>
<!-- 年级 -->
<div class="select-item">
<select-item
placeholder="年级"
:list="currGradeList"
ref="grade"
/>
</div>
<!-- 搜索按钮 -->
<button class="search-btn" @click="search">搜索</button>
</div>
<!-- 轮播图 -->
<div class="carousel"></div>
<!-- 视频 -->
<div class="video-wrap">
<video-player :options="videoOptions"/>
</div>
<bullet-frame
:visible="visible"
:layout="{width: '1347px', height: '786px'}"
>
<img src="../../static/images/progress/teacher-details.png" />
</bullet-frame>
</div>
</template>
<script>
import Tab from 'components/Tab'
import SelectItem from 'components/Select'
import VideoPlayer from 'components/VideoPlayer'
export default {
data () {
return {
currTypesIndex: 0,
teacherName: '',
currSubjectList: [],
currGradeList: [],
// 学科列表
selectLists: [{
subject: [{
name: '语文'
}, {
name: '数学'
}, {
name: '英语'
}, {
name: '自然'
}, {
name: '美术'
}, {
name: '音乐'
}, {
name: '体育'
}, {
name: '劳技'
}, {
name: '心理'
}],
grade: [{
name: '一年级'
}, {
name: '二年级'
}, {
name: '三年级'
}, {
name: '四年级'
}, {
name: '五年级'
}]
}, {
subject: [{
name: '语文'
}, {
name: '数学'
}, {
name: '英语'
}, {
name: '政治'
}, {
name: '文综'
}, {
name: '化学'
}, {
name: '理综'
}, {
name: '物理'
}, {
name: '地理'
}, {
name: '历史'
}, {
name: '音乐'
}, {
name: '美术'
}, {
name: '体育'
}],
grade: [{
name: '六年级'
}, {
name: '七年级'
}, {
name: '八年级'
}, {
name: '九年级'
}]
}],
visible: false,
videoOptions: {
controls: true, // 用户可以与之交互的控件
muted: false, // 默认情况下将使所有音频静音
aspectRatio: '16:9', // 显示比率
fullscreen: {
options: { navigationUI: 'hide' }
},
sources: [
{
src: require('../../static/images/progress/teacher-video.mp4'),
type: 'video/mp4'
}
]
}
}
},
components: {
Tab,
SelectItem,
VideoPlayer
},
mounted () {
this.chooseSchool()
},
methods: {
chooseSchool (index = 0) {
this.$refs.subject.currText = ''
this.$refs.grade.currText = ''
this.currTypesIndex = index
const { subject = [], grade = [] } = this.selectLists[index] || {}
this.currSubjectList = subject
this.currGradeList = grade
},
search () {
if (this.teacherName === '123') {
this.visible = true
} else {
this.$alert('暂无数据', '提示', {
confirmButtonText: '确定',
center: true
})
}
}
}
}
</script>
<style lang="less">
.vjs-big-play-button {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
</style>
<style lang="less" scoped>
.progress {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: url('../../static/images/progress/bg.png') no-repeat left top;
}
.search-bar {
position: absolute;
bottom: 16px;
left: 546px;
display: flex;
align-items: center;
width: 828px;
height: 70px;
padding-right: 30px;
padding-left: 30px;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #fff;
background: url('../../static/images/progress/search-wrap.png') no-repeat left top;
.school-types {
display: flex;
.school-area-item {
position: relative;
display: flex;
align-items: center;
flex-wrap: nowrap;
cursor: pointer;
white-space: nowrap;
&:first-child {
margin-right: 20px;
}
&.active {
&:after {
content: "";
position: absolute;
top: 5px;
left: 4px;
width: 6px;
height: 6px;
background: #98FCF9;
border-radius: 50%;
}
}
&:before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border: 1px solid #63A1F8;
border-radius: 50%;
}
}
}
.teacher-name {
width: 140px;
height: 32px;
padding: 5px 10px;
margin-left: 20px;
background: rgba(7, 32, 65, 0.3);
border: 1px solid #4985D9;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #7AC6FA;
line-height: 20px;
opacity: .6;
&::-webkit-input-placeholder {
color: #7AC6FA;
}
&::-moz-input-placeholder {
color: #7AC6FA;
}
&::-ms-input-placeholder {
color: #7AC6FA;
}
}
.search-btn {
width: 125px;
height: 32px;
margin-left: 12px;
background: rgba(41, 125, 225, 0.3);
border: 1px solid #3D85E0;
opacity: 0.6;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #67C7FF;
cursor: pointer;
}
}
.carousel {
position: absolute;
top: 432px;
left: 545px;
width: 812px;
height: 210px;
}
.video-wrap {
position: absolute;
top: 400px;
right: 15px;
width: 499px;
height: 280px;
border: 1px solid rgba(255, 255, 255, .39);
overflow: hidden;
}
</style>
src/pages/safety.vue
...@@ -2,23 +2,20 @@ ...@@ -2,23 +2,20 @@
<div class="safety-page"> <div class="safety-page">
<div class="header"> <div class="header">
<div class="loge" @click="loge"></div> <div class="loge" @click="loge"></div>
<div class="tab">
<div class="item" @click="grow"> <tab />
<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>
</div> </div>
</template> </template>
<script> <script>
import Tab from 'components/Tab'
export default { export default {
components: {
Tab
},
methods: { methods: {
loge () { loge () {
...@@ -40,6 +37,7 @@ export default { ...@@ -40,6 +37,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.safety-page{ .safety-page{
position: relative;
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
margin:0 auto; margin:0 auto;
...@@ -57,37 +55,6 @@ export default { ...@@ -57,37 +55,6 @@ export default {
margin-left: 16px; margin-left: 16px;
background: url('../../static/images/safety/loge.png') no-repeat left bottom; 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> </style>
src/pages/situation.vue 0 → 100644
<template>
<div class="situation">
<tab />
</div>
</template>
<script>
import Tab from 'components/Tab'
export default {
data () {
return {}
},
components: {
Tab
},
methods: {
}
}
</script>
<style lang="less" scoped>
.situation {
position: relative;
width: 1920px;
height: 1080px;
overflow: hidden;
background: url('../../static/images/situation/bg.png') no-repeat left top;
> img {
display: block;
}
}
</style>
src/pages/sixthFormStudent.vue
...@@ -230,6 +230,7 @@ export default { ...@@ -230,6 +230,7 @@ export default {
.sixth-page{ .sixth-page{
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
overflow: hidden;
background: url('@{imagePath}bg.png') no-repeat center; background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto; margin: 0 auto;
.left{ .left{
......
src/public/apis/proxy.js
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
module.exports = { module.exports = {
host: 'localhost', host: 'localhost',
port: '8082', // 自定义端口号 port: '8097', // 自定义端口号
proxyTable: { // Vue开发环境跨域配置 proxyTable: { // Vue开发环境跨域配置
'/apis': { '/apis': {
target: 'http://test-a.com', target: 'http://test-a.com',
......
src/router/routes.js
...@@ -16,10 +16,15 @@ import student from '@/pages/class3-student.vue' ...@@ -16,10 +16,15 @@ 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' import growth from '@/pages/growth.vue'
// 整体办学情况
import situation from '@/pages/situation.vue'
// 教师发展
import progress from '@/pages/progress.vue'
export default [ export default [
{ {
path: '/', path: '/',
redirect: '/index' redirect: '/situation'
}, },
{ {
path: '/index', path: '/index',
...@@ -56,5 +61,13 @@ export default [ ...@@ -56,5 +61,13 @@ export default [
{ {
path: '/growth', path: '/growth',
component: growth component: growth
},
{
path: '/situation',
component: situation
},
{
path: '/progress',
component: progress
} }
] ]
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