Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 51e0f35d by xiaxiansheng
Options

Merge branch 'xiaxs' into '1a86cad6' 

Xiaxs

See merge request !20
parents f5a8fc51 73618518
Showing with 1575 additions and 109 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,18 +6686,24 @@
}
}
},
"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",
"integrity": "sha1-p5QRAXgAsx2EAAcM2uu/ySwfY3c=",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
},
"dependencies": {
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-2.0.0.tgz",
"integrity": "sha1-mMMBrvmVIzF/jWlhjwAQeRCW78Q="
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
}
}
},
......@@ -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",
......@@ -13189,8 +13347,8 @@
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/ssr-window/download/ssr-window-1.0.1.tgz",
"integrity": "sha1-MHUqakZm53Z/C35qpvwv29DZs2k="
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": {
"version": "5.3.0",
......@@ -13427,8 +13585,8 @@
},
"swiper": {
"version": "4.5.1",
"resolved": "https://registry.nlark.com/swiper/download/swiper-4.5.1.tgz?cache=0&sync_timestamp=1619793302865&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fswiper%2Fdownload%2Fswiper-4.5.1.tgz",
"integrity": "sha1-7UOZjngM60eGEAecjSP9Ql7KY28=",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
......@@ -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",
......@@ -14481,6 +14681,37 @@
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
},
"dependencies": {
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
},
"dependencies": {
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
}
}
},
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"swiper": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
}
}
},
"vue-count-to": {
......
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",
......@@ -80,6 +81,7 @@
"echarts": "^5.1.2",
"element-ui": "^2.15.5",
"qs": "^6.10.1",
"swiper": "^4.5.1",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-count-to": "^1.0.13",
......
runner @ e8d28d35
Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95
Subproject commit e8d28d35c0f067ee0a5af067efa23beb190efa86
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/BulletFrame/index.vue
......@@ -7,7 +7,7 @@
<i class="close" @click="close"></i>
<div class="content">
<slot>
</slot>
</div>
</div>
......@@ -20,6 +20,13 @@ export default {
visible: {
type: Boolean,
default: false
},
layoutProps: {
type: Object,
default () {
return {}
}
}
},
data () {
......@@ -66,9 +73,9 @@ export default {
.close {
cursor: pointer;
position: fixed;
top: 145px;
right: 395px;
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
z-index: 1;
......
src/components/Carsourl/index.vue 0 → 100644
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
src/components/PageBack.vue 0 → 100644
<template>
<div class="page-back" @click="returnHomePage"></div>
</template>
<script>
export default {
name: 'PageBack',
methods: {
returnHomePage () {
this.$router.push('/situation')
}
}
}
</script>
<style lang="less" scoped>
.page-back {
position: absolute;
top: 37px;
left: 15px;
width: 380px;
height: 45px;
z-index: 2;
cursor: pointer;
}
</style>
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 () {
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('/growthRecord?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/components/swiper3d/index.vue 0 → 100644
<template>
<div class="swiper-container-custom">
<ul class="swiper-wrap">
<li>
<img src="./images/img1.png">
</li>
<li>
<img src="./images/img2.png">
</li>
<li>
<img src="./images/img3.png">
</li>
<li>
<img src="./images/img4.png">
</li>
<li>
<img src="./images/img5.png">
</li>
</ul>
<ul class="swiper-dots" style="display: none;"></ul>
<ul class="swiper-navigator" style="display: none;">
<li class="swiper-btn-prev">&lt;</li>
<li class="swiper-btn-next">&gt;</li>
</ul>
</div>
</template>
<script>
import CustomSwiper from './swiper3d'
export default {
name: '',
mounted () {
new CustomSwiper('.swiper-container-custom', {
pagination: '.swiper-dots',
navigator: {
prev: '.swiper-btn-prev',
next: '.swiper-btn-next'
},
delay: 2000,
autoPlay: false
})
}
}
</script>
<style lang="less" scoped>
.swiper-container-custom {
width: 820px;
padding-bottom: 10px;
position: relative;
}
.swiper-navigator {
width: 90%;
height: 30px;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.swiper-btn-next,
.swiper-btn-prev {
color: #fff;
background: rgba(0, 0, 0, 0.5);
position: absolute;
width: 30px;
height: 30px;
-ms-display: flex;
display: -webkit-flex;
display: flex;
padding-top: 3px;
-ms-justify-content: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
}
.swiper-btn-next {
right: -40px;
}
.swiper-btn-prev {
left: -40px;
}
.swiper-wrap {
width: 820px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-ms-perspective: 500px;
-webkit-perspective: 500px;
perspective: 500px;
display: -webkit-flex;
display: flex;
-ms-display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-align-items: center;
z-index: 4;
position: relative;
}
.swiper-wrap li {
position: absolute;
left: 0;
height: auto;
box-shadow: 0 0 11px rgba(0, 0, 0, 0.5);
border-radius: 6%;
width: auto;
top: 0;
}
.swiper-wrap li:first-child {
position: relative;
}
.swiper-wrap.transition li {
transition: 0.5s;
}
.swiper-wrap img {
width: 100%;
display: block;
}
.p1 {
z-index: 3;
-webkit-transform: translateZ(100px) scale(0.5);
transform: translateZ(100px) scale(0.5);
-ms-transform: translateZ(100px) scale(0.5);
}
.p2 {
z-index: 2;
-webkit-transform: translate3d(15%, 0, 90px) scale(0.4);
transform: translate3d(15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(15%, 0, 90px) scale(0.4);
}
.swiper-3 .p3,
.swiper-6 .p6 {
z-index: 2;
-webkit-transform: translate3d(-15%, 0, 90px) scale(0.4);
transform: translate3d(-15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(-15%, 0, 90px) scale(0.4);
}
.swiper-5 .p3,
.swiper-6 .p3 {
z-index: 1;
-webkit-transform: translate3d(26%, 0, 80px) scale(0.3);
transform: translate3d(26%, 0, 80px) scale(0.3);
-ms-transform: translate3d(26%, 0, 80px) scale(0.3);
}
.swiper-4 .p3,
.swiper-6 .p4 {
-webkit-transform: translateZ(80px) scale(0.3);
transform: translateZ(80px) scale(0.3);
-ms-transform: translateZ(80px) scale(0.3);
}
.swiper-5 .p4,
.swiper-6 .p5 {
z-index: 1;
-webkit-transform: translate3d(-26%, 0, 80px) scale(0.3);
transform: translate3d(-26%, 0, 80px) scale(0.3);
-ms-transform: translate3d(-26%, 0, 80px) scale(0.3);
}
.swiper-4 .p4,
.swiper-5 .p5,
.swiper-6 .p6 {
z-index: 2;
-webkit-transform: translate3d(-15%, 0, 90px) scale(0.4);
transform: translate3d(-15%, 0, 90px) scale(0.4);
-ms-transform: translate3d(-15%, 0, 90px) scale(0.4);
}
.swiper-dots {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-ms-transform: translateX(-50%);
bottom: 11%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.swiper-dots li {
width: 20px;
height: 2px;
background: #b5b5b5;
margin-right: 10px;
float: left;
transition: 0.3s;
}
.swiper-dots li:last-child {
margin: 0;
}
.swiper-dots .active {
background: #ff4949;
}
</style>
src/components/swiper3d/swiper3d.js 0 → 100755
/* eslint-disable */
export default class CustomSwiper {
constructor (ele, config = {}) {
var container = document.querySelector(ele),
bannerWrap = container.querySelector('.swiper-wrap'),
btnPrev = container.querySelector('.swiper-btn-prev'),
btnNext = container.querySelector('.swiper-btn-next'),
lis = container.querySelectorAll('.swiper-wrap li'),
delay = config.delay || 2000,
autoPlay = config.autoPlay === undefined ? true : config.autoPlay,
p1 = lis[0],
p2 = lis[1],
p3 = lis[2],
p4 = lis[3],
p5 = lis[4],
p6 = lis[5],
prev = null,
next = null,
maxNum = lis.length - 1,
dots = {},
timer = 0,
dotIndex = 0,
isAddDot = false,
startP, disX, disY, index
if (lis.length < 3) {
throw ('image number need 3+')
}
if (config.navigator) {
if (config.navigator.prev) {
prev = document.querySelector(config.navigator.prev)
}
if (config.navigator.next) {
next = document.querySelector(config.navigator.next)
}
}
if (lis.length > 6) {
p5 = lis[lis.length - 2]
p6 = lis[lis.length - 1]
for (let i = 0; i < lis.length; i++) {
lis[i].classList.add('p4')
}
p1.className = 'p1'
p2.className = 'p2'
p3.className = 'p3'
p5.className = 'p5'
p6.className = 'p6'
bannerWrap.classList.add('swiper-6')
} else {
for (let i = 0; i < lis.length; i++) {
lis[i].classList.add(`p${i + 1}`)
}
bannerWrap.classList.add(`swiper-${lis.length}`)
}
// 设置点
if (config.pagination) {
let p = container.querySelector(config.pagination)
for (let i = 0, len = lis.length; i < len; i++) {
let li = document.createElement('li')
p.appendChild(li)
}
dots = p.querySelectorAll('li')
dots[0].className = 'active'
}
bannerWrap.classList.add('transition')
// 图片移动,dire判断是否滑动过
function move (dire) {
var arrCls = [] // 保存类名,用来赋值
dire = dire || false
dotIndex++
// 得到所有类名
for (var i = 0; i < lis.length; i++) {
arrCls.push(lis[i].className)
}
// 循环赋值类名
for (var i = 0; i < lis.length; i++) {
if (dire) {
// 判断左滑
if (dire < 0) {
index = i - 1 // 得到最前面元素的上一个, 自己脑补过程
if (index < 0) {
index = maxNum
}
} else if (dire > 0) { // 判断右滑
index = i + 1 // 下一个
if (index > maxNum) {
index = 0
}
if (!isAddDot) { // 点导航下一个
dotIndex -= 2
isAddDot = true
}
}
}
// 如果没有参数,正常循环
if (!dire) {
index = i - 1
if (index < 0) {
index = maxNum
}
}
lis[i].className = arrCls[index]
}
if (dotIndex > maxNum) {
dotIndex = 0
} else if (dotIndex < 0) {
dotIndex = maxNum
}
isAddDot = false // 判断是否加过
setDotActive(dotIndex)
}
function setDotActive (index) {
if (config.pagination) {
for (var i = 0; i < dots.length; i++) {
dots[i].className = ''
}
dots[index].className = 'active'
}
}
function setTimer () {
if (autoPlay) {
timer = setInterval(move, delay)
}
}
function addTransition () {
bannerWrap.classList.add('transition')
}
function removeTransition () {
bannerWrap.classList.remove('transition')
}
function picTransform (x) {
var p1 = container.querySelector('.p1'),
p2 = container.querySelector('.p2'),
p3 = container.querySelector('.p3'),
p4 = container.querySelector('.p4'),
p5 = container.querySelector('.p5'),
p6 = container.querySelector('.p6')
var percentV2 = Math.floor(p2.offsetWidth * 0.15), // p2 的百分比转px
percentV3 = Math.floor(p3.offsetWidth * 0.26) // p3
var number = lis.length > 6 ? 6 : lis.length
if (x < -7) {
x = -7
} else if (x > 12) {
x = 12
}
p1.style.transform = 'translate3d(' + x + 'px,0,100px) scale(.5)'
p2.style.transform = 'translate3d(' + (percentV2 - x) + 'px,0,90px) scale(.4)'
switch (number) {
case 3:
p3.style.transform = 'translate3d(' + (-percentV2 - x) + 'px,0,90px) scale(.4)'
break
case 4:
p4.style.transform = 'translate3d(' + (-percentV2 - x) + 'px,0,90px) scale(.4)'
break
case 5:
p3.style.transform = 'translate3d(' + (percentV3 - (x * 2)) + 'px,0,80px) scale(.3)'
p4.style.transform = 'translate3d(' + (-percentV3 - (x * 4)) + 'px,0,80px) scale(.3)'
p5.style.transform = 'translate3d(' + (-percentV2 - (x * 2)) + 'px,0,90px) scale(.4)'
break
case 6:
p3.style.transform = 'translate3d(' + (percentV3 - (x * 2)) + 'px,0,80px) scale(.3)'
p4.style.transform = 'translate3d(' + x + 'px,0,80px) scale(.3)'
p5.style.transform = 'translate3d(' + (-percentV3 - (x * 4)) + 'px,0,80px) scale(.3)'
p6.style.transform = 'translate3d(' + (-percentV2 - (x * 2)) + 'px,0,90px) scale(.4)'
break
}
}
function disabledPrev (e) {
e.preventDefault()
}
setTimer()
bannerWrap.addEventListener('touchstart', function (e) {
document.addEventListener('touchmove', disabledPrev(e), {passive: false}) // 禁止滑动后退
removeTransition()
startP = e.changedTouches[0].clientX
clearInterval(timer)
}, false)
bannerWrap.addEventListener('touchmove', function (e) {
var movex = e.changedTouches[0].clientX
disX = movex - startP // 得到滑动的距离
picTransform(disX / 20) // 让图片缓慢滑动
}, false)
bannerWrap.addEventListener('touchend', function (e) {
document.removeEventListener('touchmove', disabledPrev(e), {passive: false}) // 禁止滑动后退
addTransition()
var p1 = container.querySelector('.p1'),
p2 = container.querySelector('.p2'),
p3 = container.querySelector('.p3'),
p4 = container.querySelector('.p4'),
p5 = container.querySelector('.p5'),
p6 = container.querySelector('.p6')
// 清除行内样式，否则类名的样式不生效
if (p1) { p1.style.cssText = '' }
if (p2) { p2.style.cssText = '' }
if (p3) { p3.style.cssText = '' }
if (p4) { p4.style.cssText = '' }
if (p5) { p5.style.cssText = '' }
if (p6) { p6.style.cssText = '' }
// 防止点击时也会触发
if (disX) {
move(disX)
disX = false
}
setTimer()
}, false)
bannerWrap.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnPrev.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnNext.addEventListener('mouseenter', function () {
clearInterval(timer)
})
btnPrev.addEventListener('click', function () {
clearInterval(timer)
})
btnNext.addEventListener('click', function () {
clearInterval(timer)
})
bannerWrap.addEventListener('mouseleave', function () {
setTimer()
})
btnPrev.addEventListener('mouseleave', function () {
setTimer()
})
btnNext.addEventListener('mouseleave', function () {
setTimer()
})
if (prev) {
prev.onclick = function () {
move(1)
}
prev.onmousedown = function () {
clearInterval(timer)
}
prev.onmouseup = function () {
setTimer()
}
}
if (next) {
next.onmousedown = function () {
clearInterval(timer)
}
next.onmouseup = function () {
setTimer()
}
next.onclick = function () {
move(-1)
}
}
}
}
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/class3.vue
<template>
<div class="class3">
<page-back />
<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">
......@@ -45,7 +47,7 @@
</div>
<!-- 弹框 -->
<bullet-frame
<bullet-frame
:visible="visible"
@beforeClose="closePopup"
>
......@@ -260,5 +262,5 @@ export default {
height: 870px;
margin:-27px 0px 0px -40px;
}
</style>
\ No newline at end of file
</style>
src/pages/growthRecord.vue
<template>
<div class="growthRecord">
<page-back />
<div class="content">
<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 +20,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 +48,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 +67,8 @@ export default {
},
components: {
swiper,
swiperSlide
swiperSlide,
Tab
},
methods: {
loge () {
......@@ -108,8 +102,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 +129,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">
<page-back />
<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 class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-3300px, 0px, 0px);">
<div class="swiper-slide">
<img src="../../static/images/progress/img1.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img2.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img3.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img4.png">
</div>
<div class="swiper-slide">
<img src="../../static/images/progress/img5.png">
</div>
</div>
</div> -->
</div>
<!-- 视频 -->
<div class="video-wrap">
<video-player :options="videoOptions"/>
</div>
<bullet-frame
:visible="visible"
:layoutProps="{width: 'auto', height: 'auto'}"
@beforeClose="visible = false"
>
<div class="teacher-details">
<img src="../../static/images/progress/teacher-details.png" />
</div>
</bullet-frame>
</div>
</template>
<script>
import Tab from 'components/Tab'
import SelectItem from 'components/Select'
import VideoPlayer from 'components/VideoPlayer'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import 'swiper/dist/js/swiper.min.js'
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()
new Swiper('.swiper-container', {
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
loop: true,
loopedSlides: 3,
autoplay: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination'
// clickable :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 * 260 + 'px'
var scale = 1 - Math.abs(slideProgress) / 5
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: {
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 === '陈涛') {
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%);
}
.carousel {
.swiper-container {
width: 100%;
height: 100%;
.swiper-slide {
width: 394px !important;
height: 210px;
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;
width: 100%;
height: 100%;
}
}
}
}
</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: 1200px;
.swiper-container {
padding-bottom: 60px;
}
.swiper-slide {
width: 520px;
height: 210px;
}
}
.video-wrap {
position: absolute;
top: 400px;
right: 15px;
width: 499px;
height: 280px;
border: 1px solid rgba(255, 255, 255, .39);
overflow: hidden;
}
.teacher-details {
position: absolute;
top: -27px;
right: -38px;
bottom: -55px;
left: -38px;
> img {
width: 100%;
height: 100%;
}
}
</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
......@@ -211,9 +211,10 @@ export default {
}
</script>
<style lang="less">
#swiper1 {
widows: 450px;
height: 258px;
.swiper1 {
width: 500px;
height: 208px;
.swiper-container {
padding-top: 20px;
width: 100%;
......@@ -235,6 +236,8 @@ export default {
}
img {
display: block;
width: 100%;
height: 100%;
}
}
}
......
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/public/plugins/index.js
......@@ -6,6 +6,8 @@ import ContentContainer from 'components/ContentContainer'
import Header from 'components/Header'
// 弹框
import BulletFrame from 'components/BulletFrame'
// 返回首页
import PageBack from 'components/PageBack'
const UsePlugin = {}
......@@ -23,6 +25,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-header', Header)
// 弹框
Vue.component('bullet-frame', BulletFrame)
// 返回首页
Vue.component('page-back', PageBack)
}
export default UsePlugin
src/router/routes.js
......@@ -14,12 +14,15 @@ import class3 from '@/pages/class3.vue'
import student from '@/pages/class3-student.vue'
// 六年级菊园学子
import sixthForm from '@/pages/sixthFormStudent.vue'
// 六年级菊园个人
import situation from '@/pages/situation.vue'
// 教师发展
import progress from '@/pages/progress.vue'
import growthPer from '@/pages/growth.vue'
export default [
{
path: '/',
redirect: '/index'
redirect: '/situation'
},
{
path: '/index',
......@@ -54,6 +57,14 @@ export default [
component: sixthForm
},
{
path: '/situation',
component: situation
},
{
path: '/progress',
component: progress
},
{
path: '/growthPer',
component: growthPer
}
......
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