theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

日历

Browse Source
This commit is contained in:
luyuan
2020-10-12 16:15:31 +08:00
parent ab2be88b14
commit 4683d8882d
5 changed files with 253 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
src/views/regime/date.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<div class="date">
<div class="head">
<div>
<img src="" alt="">
上一月
</div>
2020年9月
<a-button type="primary" class="button">
周日历
</a-button>
<div>
下一月
<img src="" alt="">
</div>
</div>
<div class="yue">
<div class="heads">
<div>周日</div>
<div>周一</div>
<div>周二</div>
<div>周三</div>
<div>周四</div>
<div>周五</div>
<div>周六</div>
</div>
<div class="body">
<div class="row" v-for="(item,index) in month" :key="index">
<div v-for="(i,j) in item" :key="j">
<div class="day">
<div>
{{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;
}
}
.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"
export default defineComponent({
props:{
},
setup(){
console.log(1)
const date = getdate();
const month = ref(date);
return {
month
}
}
})
</script>