You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
3.0 KiB
100 lines
3.0 KiB
<template>
|
|
<CommonBox title="周历校历" class="school-calendar-style">
|
|
<div class="select-top-style">
|
|
<span :class="'select-item-style border-right-style' + (selectType === 1?' select-style':'')"
|
|
@click="typeChange(1)">周历</span>
|
|
<span :class="'select-item-style' + (selectType === 2?' select-style':'')"
|
|
@click="typeChange(2)">校历</span>
|
|
</div>
|
|
<div class="school-calendar-content-style">
|
|
<a-tabs :activeKey="paneKey">
|
|
<a-tab-pane :key="1" tab="Tab 1">
|
|
<WeekCalendar/>
|
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="Tab 2">
|
|
<SchoolCalendar/>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</div>
|
|
</CommonBox>
|
|
</template>
|
|
<script>
|
|
/*
|
|
* 周历校历
|
|
* */
|
|
import CommonBox from '../../secondPages/commonBox.vue';
|
|
import {Tabs} from 'ant-design-vue';
|
|
import WeekCalendar from './calendar/weekCalendar.vue';
|
|
import SchoolCalendar from './calendar/schoolCalendar.vue';
|
|
export default{
|
|
data(){
|
|
return {
|
|
selectType: 1,//1 周历 2 校历
|
|
paneKey:1,
|
|
}
|
|
},
|
|
mounted(){
|
|
this.changeType();
|
|
},
|
|
methods: {
|
|
changeType:function () {
|
|
this.timing = setInterval(() => {
|
|
let paneKey = this.paneKey === 1?2:1;
|
|
this.typeChange(paneKey)
|
|
}, 12000)
|
|
},
|
|
typeChange: function (type) {
|
|
if (this.selectType !== type) {
|
|
this.selectType = type;
|
|
this.paneKey = type;
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
CommonBox,
|
|
ATabs: Tabs,
|
|
ATabPane: Tabs.TabPane,
|
|
WeekCalendar,
|
|
SchoolCalendar
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "../../../assets/scss/style";
|
|
.school-calendar-style {
|
|
width: 100%;
|
|
height: 400px !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
.select-top-style {
|
|
width: 100%;
|
|
height: 20px;
|
|
text-align: right;
|
|
/*position: absolute;*/
|
|
/*right: 0;*/
|
|
.select-item-style {
|
|
color: #1379c8;
|
|
padding: 0 10px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
.border-right-style {
|
|
border-right: 1px solid #1379c8;
|
|
}
|
|
.select-style {
|
|
color: $color-default-bright;
|
|
cursor: default;
|
|
}
|
|
}
|
|
.school-calendar-content-style{
|
|
width: 100%;
|
|
/*min-height: 350px;*/
|
|
margin-top: 10px;
|
|
/deep/ .ant-tabs-bar{
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
</style> |