228 lines
7.2 KiB
Vue
228 lines
7.2 KiB
Vue
<template>
|
|
<div class="date">
|
|
<div class="head">
|
|
<div @click="shang">
|
|
<img src="" alt="">
|
|
上一月
|
|
</div>
|
|
{{month.year}}年{{month.yue}}月
|
|
<a-button type="primary" class="button">
|
|
周日历
|
|
</a-button>
|
|
<div @click="xia">
|
|
下一月
|
|
<img src="" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="yue">
|
|
<div class="heads">
|
|
<div :class="{zhou: yue == 0 && month.zhou == 0}">周日</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 1}">周一</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 2}">周二</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 3}">周三</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 4}">周四</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 5}">周五</div>
|
|
<div :class="{zhou: yue == 0 && month.zhou == 6}">周六</div>
|
|
</div>
|
|
<div class="body">
|
|
<div class="row" v-for="(item,index) in month.date" :key="index">
|
|
<div v-for="(i,j) in item" :key="j">
|
|
<div class="day">
|
|
<div :class="{ing: yue == 0 && month.day == i.day}">
|
|
{{i.day}}
|
|
<!-- <div class="item">
|
|
<div></div><p>asdsadas</p>
|
|
</div> -->
|
|
<!-- <span class="ing"></span> -->
|
|
<!-- <span class="next"></span> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
.date{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.head{
|
|
width: 1320px;
|
|
height: 57px;
|
|
background-color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
>div{
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #0DBBA4;
|
|
>img{
|
|
width: 7px;
|
|
height: 11px;
|
|
}
|
|
}
|
|
>div:first-child{
|
|
margin-right: 90px;
|
|
>img{
|
|
margin-right: 11px;
|
|
}
|
|
}
|
|
>div:last-child{
|
|
margin-left: 90px;
|
|
|
|
>img{
|
|
margin-left: 11px;
|
|
}
|
|
}
|
|
.button{
|
|
width: 57px;
|
|
height: 26px;
|
|
background-color: #0DBBA4;
|
|
border-right: 4px;
|
|
border: none;
|
|
font-size: 10px;
|
|
color: #fff;
|
|
padding: 0;
|
|
position: absolute;
|
|
right: 40px;
|
|
}
|
|
}
|
|
.yue{
|
|
width: 1320rpx;
|
|
.heads{
|
|
width: 1320px;
|
|
height: 63px;
|
|
display: flex;
|
|
>div{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F5FEFD;
|
|
text-align: center;
|
|
line-height: 63px;
|
|
font-size: 13px;
|
|
color: #08AE98;
|
|
border-right: 1px solid #eee;
|
|
box-sizing: border-box;
|
|
}
|
|
.zhou{
|
|
color: #fff;
|
|
background: #08AE98;
|
|
}
|
|
}
|
|
.body{
|
|
.row{
|
|
background-color: #fff;
|
|
height: 126px;
|
|
width: 100%;
|
|
display: flex;
|
|
>div{
|
|
width: 100%;
|
|
border-top: 1px solid #eee;
|
|
border-right: 1px solid #eee;
|
|
.day{
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: #111;
|
|
>div{
|
|
height: 100%;
|
|
border-radius: 6px;
|
|
padding: 18px;
|
|
overflow: hidden;
|
|
.item{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 11px;
|
|
>div{
|
|
width: 6px;
|
|
height: 6px;
|
|
background-color: #111;
|
|
margin-right: 6px;
|
|
border-radius: 50%;
|
|
}
|
|
>p{
|
|
line-height: 1;
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
.old{
|
|
background-color: #F7F7F7;
|
|
}
|
|
.ing{
|
|
background-color: #0DBBA4;
|
|
color: #fff;
|
|
.item{
|
|
>div{
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
.next{
|
|
background-color: #CEF9F0;
|
|
color: #0DBBA4;
|
|
.item{
|
|
>div{
|
|
background-color: #0DBBA4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
>div::last-child{
|
|
border: unset;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
<script lang="ts">
|
|
import { defineComponent, ref } from 'vue';
|
|
import { getdate } from "@/utils/date"
|
|
import { getdatelist } from '@/api';
|
|
import store from '@/store';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
|
|
},
|
|
setup(){
|
|
console.log(1)
|
|
const date = getdate();
|
|
console.log(date)
|
|
const month = ref(date);
|
|
const yue = ref(0);
|
|
function xia(){
|
|
yue.value = yue.value + 1;
|
|
month.value = getdate(yue.value)
|
|
getdates()
|
|
}
|
|
function shang(){
|
|
yue.value = yue.value - 1;
|
|
month.value = getdate(yue.value)
|
|
getdates()
|
|
}
|
|
async function getdates(){
|
|
getdatelist(month.value.start, month.value.end, store.state.userinfo.memberid).then((res)=>{
|
|
console.log(res)
|
|
})
|
|
}
|
|
getdates()
|
|
return {
|
|
month,
|
|
xia,
|
|
shang,
|
|
yue
|
|
}
|
|
}
|
|
})
|
|
</script> |