Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Project 'vue-project/liangXing/frontEnd' was moved to 'vue-project/ZhangJian/ZhangJianFrontEnd'. Please update any links and bookmarks that may still have the old path.
Commit 51e0f35d by xiaxiansheng
Options

Merge branch 'xiaxs' into '1a86cad6' 

Xiaxs

See merge request !20
parents f5a8fc51 73618518
Showing with 889 additions and 101 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",
...@@ -80,6 +81,7 @@ ...@@ -80,6 +81,7 @@
"echarts": "^5.1.2", "echarts": "^5.1.2",
"element-ui": "^2.15.5", "element-ui": "^2.15.5",
"qs": "^6.10.1", "qs": "^6.10.1",
"swiper": "^4.5.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3", "vue-awesome-swiper": "^3.1.3",
"vue-count-to": "^1.0.13", "vue-count-to": "^1.0.13",
......
runner @ e8d28d35
Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95 Subproject commit e8d28d35c0f067ee0a5af067efa23beb190efa86
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/BulletFrame/index.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<i class="close" @click="close"></i> <i class="close" @click="close"></i>
<div class="content"> <div class="content">
<slot> <slot>
</slot> </slot>
</div> </div>
</div> </div>
...@@ -20,6 +20,13 @@ export default { ...@@ -20,6 +20,13 @@ export default {
visible: { visible: {
type: Boolean, type: Boolean,
default: false default: false
},
layoutProps: {
type: Object,
default () {
return {}
}
} }
}, },
data () { data () {
...@@ -66,9 +73,9 @@ export default { ...@@ -66,9 +73,9 @@ export default {
.close { .close {
cursor: pointer; cursor: pointer;
position: fixed; position: absolute;
top: 145px; top: 0;
right: 395px; right: 0;
width: 80px; width: 80px;
height: 80px; height: 80px;
z-index: 1; 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' ...@@ -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/class3.vue
<template> <template>
<div class="class3"> <div class="class3">
<page-back />
<img class="img1" @click="change1" src="../../static/images/class3/more.png" /> <img class="img1" @click="change1" src="../../static/images/class3/more.png" />
<img class="img2" @click="change2" 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="img3" @click="change3" src="../../static/images/class3/more.png" />
<img class="img4" @click="change4" src="../../static/images/class3/back.png" /> <img class="img4" @click="change4" src="../../static/images/class3/back.png" />
<!-- 搜索 --> <!-- 搜索 -->
<div class="class3-search"> <div class="class3-search">
<div class="select-item"> <div class="select-item">
...@@ -45,7 +47,7 @@ ...@@ -45,7 +47,7 @@
</div> </div>
<!-- 弹框 --> <!-- 弹框 -->
<bullet-frame <bullet-frame
:visible="visible" :visible="visible"
@beforeClose="closePopup" @beforeClose="closePopup"
> >
...@@ -260,5 +262,5 @@ export default { ...@@ -260,5 +262,5 @@ export default {
height: 870px; height: 870px;
margin:-27px 0px 0px -40px; margin:-27px 0px 0px -40px;
} }
</style> </style>
\ No newline at end of file
src/pages/growthRecord.vue
<template> <template>
<div class="growthRecord"> <div class="growthRecord">
<page-back />
<div class="content"> <div class="content">
<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 +20,7 @@ ...@@ -29,7 +20,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 +48,8 @@ import grade8 from '../../static/images/growthRecord/8.png' ...@@ -57,6 +48,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 +67,8 @@ export default { ...@@ -74,7 +67,8 @@ export default {
}, },
components: { components: {
swiper, swiper,
swiperSlide swiperSlide,
Tab
}, },
methods: { methods: {
loge () { loge () {
...@@ -108,8 +102,17 @@ export default { ...@@ -108,8 +102,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 +129,12 @@ export default { ...@@ -126,39 +129,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/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
...@@ -211,9 +211,10 @@ export default { ...@@ -211,9 +211,10 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less">
#swiper1 { .swiper1 {
widows: 450px; width: 500px;
height: 258px; height: 208px;
.swiper-container { .swiper-container {
padding-top: 20px; padding-top: 20px;
width: 100%; width: 100%;
...@@ -235,6 +236,8 @@ export default { ...@@ -235,6 +236,8 @@ export default {
} }
img { img {
display: block; display: block;
width: 100%;
height: 100%;
} }
} }
} }
......
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/public/plugins/index.js
...@@ -6,6 +6,8 @@ import ContentContainer from 'components/ContentContainer' ...@@ -6,6 +6,8 @@ import ContentContainer from 'components/ContentContainer'
import Header from 'components/Header' import Header from 'components/Header'
// 弹框 // 弹框
import BulletFrame from 'components/BulletFrame' import BulletFrame from 'components/BulletFrame'
// 返回首页
import PageBack from 'components/PageBack'
const UsePlugin = {} const UsePlugin = {}
...@@ -23,6 +25,8 @@ UsePlugin.install = function (Vue, options = {}) { ...@@ -23,6 +25,8 @@ UsePlugin.install = function (Vue, options = {}) {
Vue.component('page-header', Header) Vue.component('page-header', Header)
// 弹框 // 弹框
Vue.component('bullet-frame', BulletFrame) Vue.component('bullet-frame', BulletFrame)
// 返回首页
Vue.component('page-back', PageBack)
} }
export default UsePlugin export default UsePlugin
src/router/routes.js
...@@ -14,12 +14,15 @@ import class3 from '@/pages/class3.vue' ...@@ -14,12 +14,15 @@ import class3 from '@/pages/class3.vue'
import student from '@/pages/class3-student.vue' import student from '@/pages/class3-student.vue'
// 六年级菊园学子 // 六年级菊园学子
import sixthForm from '@/pages/sixthFormStudent.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' import growthPer from '@/pages/growth.vue'
export default [ export default [
{ {
path: '/', path: '/',
redirect: '/index' redirect: '/situation'
}, },
{ {
path: '/index', path: '/index',
...@@ -54,6 +57,14 @@ export default [ ...@@ -54,6 +57,14 @@ export default [
component: sixthForm component: sixthForm
}, },
{ {
path: '/situation',
component: situation
},
{
path: '/progress',
component: progress
},
{
path: '/growthPer', path: '/growthPer',
component: 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