日历
This commit is contained in:
parent
ab2be88b14
commit
4683d8882d
GPG Key ID:
A7972FD973317FF3
@ -12,6 +12,7 @@
|
||||
"ant-design-vue": "^2.0.0-beta.9",
|
||||
"axios": "^0.20.0",
|
||||
"core-js": "^3.6.5",
|
||||
"dayjs": "^1.9.1",
|
||||
"postcss-pxtorem": "^5.1.1",
|
||||
"vue": "^3.0.0-0",
|
||||
"vue-router": "^4.0.0-0",
|
||||
|
||||
@ -92,6 +92,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: "liveing",
|
||||
component: () => import("../views/regime/Liveing.vue")
|
||||
},
|
||||
{
|
||||
path: "date",
|
||||
component: () => import("../views/regime/date.vue")
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
42
src/utils/date.ts
Normal file
42
src/utils/date.ts
Normal 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
201
src/views/regime/date.vue
Normal 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>
|
||||
@ -3321,6 +3321,11 @@ dashdash@^1.12.0:
|
||||
dependencies:
|
||||
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:
|
||||
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user