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
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
5 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -12,6 +12,7 @@
"ant-design-vue": "^2.0.0-beta.9", "ant-design-vue": "^2.0.0-beta.9",
"axios": "^0.20.0", "axios": "^0.20.0",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dayjs": "^1.9.1",
"postcss-pxtorem": "^5.1.1", "postcss-pxtorem": "^5.1.1",
"vue": "^3.0.0-0", "vue": "^3.0.0-0",
"vue-router": "^4.0.0-0", "vue-router": "^4.0.0-0",

4
src/router/index.ts
View File

@ -92,6 +92,10 @@ const routes: Array<RouteRecordRaw> = [
{ {
path: "liveing", path: "liveing",
component: () => import("../views/regime/Liveing.vue") component: () => import("../views/regime/Liveing.vue")
},
{
path: "date",
component: () => import("../views/regime/date.vue")
} }
] ]
}, },

42
src/utils/date.ts Normal file
View File

@ -0,0 +1,42 @@
import dayjs from 'dayjs'
export function getdate(){
let now = dayjs()
const day = now.date() // 当前天
now = now.date(1)
const week = now.day(); // 第一天是星期几
now = now.month(now.month() + 1);
now = now.date(0);
const month = now.date(); // 当前月有几天
console.log(day,week,month)
let i = 0;
let w = 0;
interface Date{
day?: number;
list?: Array<any>;
}
const date: Array<Array<Date>> = [[]];
while(i < month){
for(w = 0; w < week; w++){
date[0][w] = {};
}
i++;
w = w == 0 ? 1 : w;
const zhou = Math.floor((i + w - 1) / 7)
const d = {
day: i
}
if(date[zhou] == undefined){
date[zhou] = []
}
date[zhou].push(d)
}
console.log(date)
return date;
}

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>

5
yarn.lock
View File

@ -3321,6 +3321,11 @@ dashdash@^1.12.0:
dependencies: dependencies:
assert-plus "^1.0.0" assert-plus "^1.0.0"
dayjs@^1.9.1:
version "1.9.1"
resolved "https://registry.npm.taobao.org/dayjs/download/dayjs-1.9.1.tgz?cache=0&sync_timestamp=1601296772816&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdayjs%2Fdownload%2Fdayjs-1.9.1.tgz#201a755f7db5103ed6de63ba93a984141c754541"
integrity sha1-IBp1X321ED7W3mO6k6mEFBx1RUE=
debug@2.6.9, debug@^2.2.0, debug@^2.3.3: debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
version "2.6.9" version "2.6.9"
resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502826356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" resolved "https://registry.npm.taobao.org/debug/download/debug-2.6.9.tgz?cache=0&sync_timestamp=1600502826356&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"