Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 3805ba79 by zsh
Options

update

parent 6d6b6827
Showing with 882 additions and 88 deletions
index.html
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础Vue框架</title>
<title>菊园小学</title>
</head>
<body>
<div id="app"></div>
......
package-lock.json
......@@ -2721,6 +2721,44 @@
}
}
},
"@videojs/http-streaming": {
"version": "2.12.0",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.12.0.tgz",
"integrity": "sha512-vdQA0lDYBXGJqV2T02AGqg1w4dcgyRoN+bYG+G8uF4DpCEMhEtUI0BA4tRu4/Njar8w/9D5k0a1KX40pcvM3fA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.4",
"aes-decrypter": "3.1.2",
"global": "^4.4.0",
"m3u8-parser": "4.7.0",
"mpd-parser": "0.19.2",
"mux.js": "5.14.1",
"video.js": "^6 || ^7"
}
},
"@videojs/vhs-utils": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.4.tgz",
"integrity": "sha512-hui4zOj2I1kLzDgf8QDVxD3IzrwjS/43KiS8IHQO0OeeSsb4pB/lgNt1NG7Dv0wMQfCccUpMVLGcK618s890Yg==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"global": "^4.4.0",
"url-toolkit": "^2.2.1"
}
},
"@videojs/xhr": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
"integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
"dev": true,
"requires": {
"@babel/runtime": "^7.5.5",
"global": "~4.4.0",
"is-function": "^1.0.1"
}
},
"@vue/babel-helper-vue-jsx-merge-props": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
......@@ -3263,6 +3301,12 @@
"@xtuc/long": "4.2.2"
}
},
"@xmldom/xmldom": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.5.tgz",
"integrity": "sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==",
"dev": true
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
......@@ -3314,6 +3358,18 @@
}
}
},
"aes-decrypter": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-3.1.2.tgz",
"integrity": "sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0",
"pkcs7": "^1.0.4"
}
},
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.nlark.com/ajv/download/ajv-6.12.6.tgz?cache=0&sync_timestamp=1619537097536&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fajv%2Fdownload%2Fajv-6.12.6.tgz",
......@@ -6630,6 +6686,12 @@
}
}
},
"dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
"integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
"dev": true
},
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npm.taobao.org/dom7/download/dom7-2.1.5.tgz?cache=0&sync_timestamp=1604921054322&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdom7%2Fdownload%2Fdom7-2.1.5.tgz",
......@@ -8210,6 +8272,16 @@
}
}
},
"global": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
"integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
"dev": true,
"requires": {
"min-document": "^2.19.0",
"process": "^0.11.10"
}
},
"global-modules": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
......@@ -8824,6 +8896,12 @@
"integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
"dev": true
},
"individual": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/individual/-/individual-2.0.0.tgz",
"integrity": "sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=",
"dev": true
},
"infer-owner": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
......@@ -9108,6 +9186,12 @@
"integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
"dev": true
},
"is-function": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
"integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
"dev": true
},
"is-glob": {
"version": "4.0.1",
"resolved": "https://registry.npm.taobao.org/is-glob/download/is-glob-4.0.1.tgz",
......@@ -9395,6 +9479,12 @@
}
}
},
"keycode": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
"dev": true
},
"killable": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
......@@ -9743,6 +9833,17 @@
"yallist": "^2.1.2"
}
},
"m3u8-parser": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-4.7.0.tgz",
"integrity": "sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.0",
"global": "^4.4.0"
}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npm.taobao.org/make-dir/download/make-dir-3.1.0.tgz",
......@@ -10036,6 +10137,15 @@
"integrity": "sha1-ggyGo5M0ZA6ZUWkovQP8qIBX0CI=",
"dev": true
},
"min-document": {
"version": "2.19.0",
"resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
"integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
"dev": true,
"requires": {
"dom-walk": "^0.1.0"
}
},
"mini-css-extract-plugin": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz",
......@@ -10149,6 +10259,18 @@
"run-queue": "^1.0.3"
}
},
"mpd-parser": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-0.19.2.tgz",
"integrity": "sha512-M5tAIdtBM2TN+OSTz/37T7V+h9ZLvhyNqq4TNIdtjAQ/Hg8UnMRf5nJQDjffcXag3POXi31yUJQEKOXdcAM/nw==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "^3.0.2",
"@xmldom/xmldom": "^0.7.2",
"global": "^4.4.0"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fms%2Fdownload%2Fms-2.1.2.tgz",
......@@ -10177,6 +10299,15 @@
"integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
"dev": true
},
"mux.js": {
"version": "5.14.1",
"resolved": "https://registry.npmjs.org/mux.js/-/mux.js-5.14.1.tgz",
"integrity": "sha512-38kA/xjWRDzMbcpHQfhKbJAME8eTZVsb9U2Puk890oGvGqnyu8B/AkKdICKPHkigfqYX9MY20vje88TP14nhog==",
"dev": true,
"requires": {
"@babel/runtime": "^7.11.2"
}
},
"nan": {
"version": "2.14.2",
"resolved": "https://registry.npm.taobao.org/nan/download/nan-2.14.2.tgz?cache=0&sync_timestamp=1602591709094&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fnan%2Fdownload%2Fnan-2.14.2.tgz",
......@@ -11248,6 +11379,15 @@
"pinkie": "^2.0.0"
}
},
"pkcs7": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
"integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.5.5"
}
},
"pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-4.2.0.tgz",
......@@ -12359,6 +12499,15 @@
"aproba": "^1.1.1"
}
},
"rust-result": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
"integrity": "sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=",
"dev": true,
"requires": {
"individual": "^2.0.0"
}
},
"rx-lite": {
"version": "4.0.8",
"resolved": "https://registry.nlark.com/rx-lite/download/rx-lite-4.0.8.tgz",
......@@ -12380,6 +12529,15 @@
"integrity": "sha1-mR7GnSluAxN0fVm9/St0XDX4go0=",
"dev": true
},
"safe-json-parse": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
"integrity": "sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=",
"dev": true,
"requires": {
"rust-result": "^1.0.0"
}
},
"safe-regex": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
......@@ -14357,6 +14515,12 @@
"requires-port": "^1.0.0"
}
},
"url-toolkit": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.3.tgz",
"integrity": "sha512-Da75SQoxsZ+2wXS56CZBrj2nukQ4nlGUZUP/dqUBG5E1su5GKThgT94Q00x81eVII7AyS1Pn+CtTTZ4Z0pLUtQ==",
"dev": true
},
"use": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
......@@ -14463,6 +14627,42 @@
}
}
},
"video.js": {
"version": "7.17.0",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.17.0.tgz",
"integrity": "sha512-8RbLu9+Pdpep9OTPncUHIvZXFgn/7hKdPnSTE/lGSnlFSucXtTUBp41R7NDwncscMLQ0WgazUbmFlvr4MNWMbA==",
"dev": true,
"requires": {
"@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.12.0",
"@videojs/vhs-utils": "^3.0.3",
"@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.2",
"global": "^4.4.0",
"keycode": "^2.2.0",
"m3u8-parser": "4.7.0",
"mpd-parser": "0.19.2",
"mux.js": "5.14.1",
"safe-json-parse": "4.0.0",
"videojs-font": "3.2.0",
"videojs-vtt.js": "^0.15.3"
}
},
"videojs-font": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
"integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
"dev": true
},
"videojs-vtt.js": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
"integrity": "sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==",
"dev": true,
"requires": {
"global": "^4.3.1"
}
},
"vm-browserify": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
......
package.json
......@@ -64,6 +64,7 @@
"sass-resources-loader": "^2.2.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"video.js": "^7.17.0",
"vue-awesome-swiper": "^3.1.3",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
......
runner @ 88c88180
Subproject commit 3e4439c28ae19ff665cfef1192ba73ee32590e66
Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95
src/App.vue
......@@ -30,7 +30,7 @@ export default {
bodyStyle.overflow = 'auto'
// 如无需设置自动适配则注释该方法即可
this.initScale(this.designWidth, this.designHeight)
// this.initScale(this.designWidth, this.designHeight)
},
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'
import ElementUI from 'element-ui'
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(VueRouter)
Vue.use(UsePlugin)
......
src/pages/growthRecord.vue
......@@ -4,17 +4,7 @@
<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>
<tab />
</div>
<div class="growthRecord-center">
......@@ -29,7 +19,7 @@
</div>
<div class="grades">
<div class="gradethree" @click="threegrade"></div>
<div class="gradesix" @click="sixgrade"></div>
<div class="gradesix" @click="sixgrade"></div>
</div>
</div>
......@@ -57,6 +47,8 @@ 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'
import Tab from 'components/Tab'
export default {
data () {
return {
......@@ -74,7 +66,8 @@ export default {
},
components: {
swiper,
swiperSlide
swiperSlide,
Tab
},
methods: {
loge () {
......@@ -108,8 +101,17 @@ export default {
}
</script>
<style lang="less">
.growthRecord {
.tab {
top: 45px;
}
}
</style>
<style lang="less" scoped>
.growthRecord{
position: relative;
width: 1920px;
height: 1080px;
margin:0 auto;
......@@ -126,39 +128,12 @@ export default {
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;
......
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 @@
<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>
<tab />
</div>
</div>
</template>
<script>
import Tab from 'components/Tab'
export default {
components: {
Tab
},
methods: {
loge () {
......@@ -40,6 +37,7 @@ export default {
<style lang="less" scoped>
.safety-page{
position: relative;
width: 1920px;
height: 1080px;
margin:0 auto;
......@@ -57,37 +55,6 @@ export default {
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/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 {
.sixth-page{
width: 1920px;
height: 1080px;
overflow: hidden;
background: url('@{imagePath}bg.png') no-repeat center;
margin: 0 auto;
.left{
......
src/public/apis/proxy.js
......@@ -4,7 +4,7 @@
module.exports = {
host: 'localhost',
port: '8082', // 自定义端口号
port: '8097', // 自定义端口号
proxyTable: { // Vue开发环境跨域配置
'/apis': {
target: 'http://test-a.com',
......
src/router/routes.js
......@@ -16,10 +16,15 @@ import student from '@/pages/class3-student.vue'
import sixthForm from '@/pages/sixthFormStudent.vue'
// 六年级菊园个人
import growth from '@/pages/growth.vue'
// 整体办学情况
import situation from '@/pages/situation.vue'
// 教师发展
import progress from '@/pages/progress.vue'
export default [
{
path: '/',
redirect: '/index'
redirect: '/situation'
},
{
path: '/index',
......@@ -56,5 +61,13 @@ export default [
{
path: '/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