parent
a32438e379
commit
959acd19a1
|
After Width: | Height: | Size: 477 KiB |
|
After Width: | Height: | Size: 270 KiB |
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
课程建设
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
全市概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
区县概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
学区概况
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
学校概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
全市概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
区县概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
学区概况
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
学校概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
全市概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
区县概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
学区概况
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
学校概况
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="banner-carousel-style">
|
||||
<a-carousel autoplay ref="varousel">
|
||||
<img style="width: 100%;height: 100%" v-for="item in imgArr" :key="item.src" :src="item.src"/>
|
||||
</a-carousel>
|
||||
<div class="home-page-menu-style">
|
||||
<div v-for="menu in menus" :key="menu.name" class="home-menu-style">
|
||||
{{menu.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* banner轮播组件
|
||||
* */
|
||||
import {Carousel} from "ant-design-vue";
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
imgArr: [
|
||||
{
|
||||
title: "banner1",
|
||||
src: require("../../assets/banner1.jpg")
|
||||
},
|
||||
{
|
||||
title: "banner2",
|
||||
src: require("../../assets/banner2.jpg")
|
||||
}
|
||||
],
|
||||
menus: this.$store.state.userStore.menus.filter(menu => {
|
||||
//去掉首页项
|
||||
return menu.name !== 'home';
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ACarousel: Carousel
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner-carousel-style {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
.ant-carousel {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider .slick-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider .slick-list .slick-track {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider .slick-list .slick-slider {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider .slick-list .slick-track div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ant-carousel .slick-slider .slick-list .slick-track div img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.home-page-menu-style {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.home-menu-style {
|
||||
height: 5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
color: white;
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bolder;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-menu-style:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<div class="fixed-navigation-style" :style="{top:((windowHeight - 500)/2) + 'px'}">
|
||||
<div v-for="menu in menus" :key="menu.iconType" class="menu-style" @mouseenter="mouseenter(menu)"
|
||||
@mouseleave="mouseleave(menu)">
|
||||
<span v-show="isOpen && !menu.isBigger">{{menu.title}}</span>
|
||||
<a-icon v-show="!isOpen" :type="menu.iconType" :title="menu.title" class="menu-icon-style"></a-icon>
|
||||
<div v-show="isOpen && menu.isBigger" class="menu-bigger-style">
|
||||
<a-icon :type="menu.iconType" class="bigger-menu-icon-style"></a-icon>
|
||||
<span>{{menu.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-style">
|
||||
<a-icon :type="!isOpen?'menu-fold':'menu-unfold'"
|
||||
class="menu-icon-style"
|
||||
:title="!isOpen?'展开':'收起'"
|
||||
@click="changeState"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 首页定位导航组件
|
||||
* */
|
||||
import {Icon} from 'ant-design-vue';
|
||||
export default{
|
||||
data(){
|
||||
return {
|
||||
windowHeight: document.documentElement.clientHeight,//实时屏幕高度
|
||||
isOpen: false,//是否展开
|
||||
menus: [
|
||||
{iconType: "read", title: "政策方针"},
|
||||
{iconType: "solution", title: "会议动态"},
|
||||
{iconType: "notification", title: "信息宣传"},
|
||||
{iconType: "profile", title: "工作要点"},
|
||||
{iconType: "apartment", title: "评估指标"},
|
||||
{iconType: "line-chart", title: "评估结果"},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*
|
||||
* 展开/收起
|
||||
* */
|
||||
changeState: function () {
|
||||
this.isOpen = !this.isOpen;
|
||||
},
|
||||
/*
|
||||
* 鼠标滑入
|
||||
* */
|
||||
mouseenter: function (menu) {
|
||||
if (this.isOpen) {
|
||||
this.$set(menu, "isBigger", true);
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 鼠标滑出
|
||||
* */
|
||||
mouseleave: function (menu) {
|
||||
if (this.isOpen) {
|
||||
this.$set(menu,"isBigger",false);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
AIcon: Icon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.fixed-navigation-style {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
.menu-style {
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem 1rem;
|
||||
position: relative;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-bigger-style {
|
||||
width: 10rem;
|
||||
background-color: #f59a23;
|
||||
color: white;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-top-left-radius: 3.5rem;
|
||||
border-bottom-left-radius: 3.5rem;
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.bigger-menu-icon-style {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
.menu-icon-style {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
:hover {
|
||||
color: #31a8fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,19 +1,38 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<div class="system-home-page-style">
|
||||
<PageTop/>
|
||||
<BannerCarousel/>
|
||||
<FixedNavigation/>
|
||||
<BottomInfo/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
/*
|
||||
* 系统首页
|
||||
* */
|
||||
import PageTop from './pageTop.vue';
|
||||
import BannerCarousel from './bannerCarousel.vue';
|
||||
import FixedNavigation from './fixedNavigation.vue';
|
||||
import BottomInfo from './bottomInfo.vue';
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
components:{
|
||||
PageTop,
|
||||
BannerCarousel,
|
||||
FixedNavigation,
|
||||
BottomInfo
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
<style scoped lang="scss">
|
||||
.system-home-page-style{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="home-page-title-style">
|
||||
<div class="system-title-style">长春市基础教育集优化发展管理服务平台</div>
|
||||
<LogOut/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
/*
|
||||
* 首页顶部
|
||||
* */
|
||||
import LogOut from '../logout/logout.vue';
|
||||
export default{
|
||||
data(){
|
||||
return {}
|
||||
},
|
||||
components:{
|
||||
LogOut
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.home-page-title-style{
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
background-color: #394af8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 1rem;
|
||||
.system-title-style{
|
||||
font-size: 1.6rem;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue