Skip to content

JuyuanPrimarySchool
JuyuanPrimarySchool
Commit 00cddc3d by yuwen
Options

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

parents ac203e0d f68e5780
Showing with 892 additions and 104 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.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 @ 338eca5b
Subproject commit 88c881800bc3ed5c011c05dc0d3668296c9bde95
Subproject commit 338eca5be107e01d0b08506e856363131155d393
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/junior.vue
......@@ -11,7 +11,7 @@
export default {
methods: {
back () {
this.$router.push('/growth')
this.$router.push('/growthRecord')
}
}
}
......
src/pages/primary.vue
......@@ -11,7 +11,7 @@
export default {
methods: {
back () {
this.$router.push('/growth')
this.$router.push('/growthRecord')
}
}
}
......
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,19 +14,22 @@ 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',
component: Index
},
{
path: '/growth',
path: '/growthRecord',
component: growthRecord
},
{
......@@ -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