diff --git a/src/App.vue b/src/App.vue
index bd975b9..798af9f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
<!-- <div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
- </div> -->
+ </div> -->
<router-view/>
</template>
<script lang="ts">
diff --git a/src/router/index.ts b/src/router/index.ts
index 52b7dcf..583f76c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -96,6 +96,10 @@ const routes: Array<RouteRecordRaw> = [
{
path: "date",
component: () => import("../views/regime/date.vue")
+ },
+ {
+ path: "week",
+ component: () => import("../views/regime/week.vue")
}
]
},
diff --git a/src/utils/date.ts b/src/utils/date.ts
index 58b3640..06c18c9 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -1,6 +1,19 @@
import dayjs from 'dayjs'
-export function getdate(yue?: number){
+interface Date{
+ day?: number;
+ list?: Array<unknown>;
+}
+
+interface GetDate{
+ date: Array<Array<Date>>;
+ year: number;
+ yue: number;
+ day: number;
+ zhou: number;
+}
+
+export function getdate(yue?: number): GetDate{
let now = dayjs()
if(yue != undefined){
now = now.month(now.month() + yue);
@@ -19,10 +32,7 @@ export function getdate(yue?: number){
let i = 0;
let w = 0;
- interface Date{
- day?: number;
- list?: Array<any>;
- }
+
const date: Array<Array<Date>> = [[]];
while(i < month){
@@ -48,3 +58,34 @@ export function getdate(yue?: number){
return {date, year, yue, day, zhou};
}
+
+export function getweek(zhou?: number){
+ let now = dayjs()
+ if(zhou != undefined){
+ now = now.day(now.day() + (zhou * 6));
+ }
+ const yue = now.month() + 1;
+ const day = now.date() // 当前天
+ zhou = now.day(); // 当前周几
+ const year = now.year()
+ interface Date{
+ day: string;
+ list?: Array<any>;
+ }
+ const date: Array<Date> = [];
+ for(let i = 0; i < 7; i++){
+ console.log(i);
+ now = now.day(i + 1)
+ date[i] = {day: ""};
+ date[i].day = now.year() + "-" + (now.month() < 10 ? '0' + now.month() : now.month()) + "-" + (now.date() < 10 ? '0' + now.date() : now.date())
+ date[i].list = []
+ for(let j = 0;j < 24; j++){
+ date[i].list?.push({
+ start:"",
+ num:""
+ })
+ }
+ }
+ console.log(date)
+ return {date, year, yue, day, zhou}
+}
\ No newline at end of file
diff --git a/src/views/regime/date.vue b/src/views/regime/date.vue
index afbbd55..2a54c8c 100644
--- a/src/views/regime/date.vue
+++ b/src/views/regime/date.vue
@@ -179,9 +179,9 @@
>div::last-child{
border: unset;
}
- }
}
}
+ }
}
</style>
diff --git a/src/views/regime/week.vue b/src/views/regime/week.vue
new file mode 100644
index 0000000..deb160f
--- /dev/null
+++ b/src/views/regime/week.vue
@@ -0,0 +1,225 @@
+<template>
+ <div class="week">
+ <div class="head">
+ <div @click="zhou--">
+ <img src="" alt="">
+ 上一周
+ </div>
+ 2020年10月
+ <a-button type="primary" class="button">
+ 月日历
+ </a-button>
+ <div @click="zhou++">
+ 下一周
+ <img src="" alt="">
+ </div>
+ </div>
+ <div class="week">
+ <div class="heads">
+ <div></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 1}">周一<span>{{week.date[0].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 2}">周二<span>{{week.date[1].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 3}">周三<span>{{week.date[2].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 4}">周四<span>{{week.date[3].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 5}">周五<span>{{week.date[4].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 6}">周六<span>{{week.date[5].day}}</span></div>
+ <div :class="{zhou: zhou == 0 && week.zhou == 0}">周日<span>{{week.date[6].day}}</span></div>
+ </div>
+ <div class="body">
+ <div class="row" v-for="item in 24" :key="item">
+ <div class="day date">{{item > 10 ? item : '0' + item}}:00</div>
+ <div v-for="i in 7" :key="i">
+ <div class="day">
+
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<style lang="scss" scoped>
+.week{
+ 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;
+ }
+ }
+ .week{
+ .heads{
+ width: 1320px;
+ height: 63px;
+ display: flex;
+ >div{
+ width: 100%;
+ height: 100%;
+ background-color: #F5FEFD;
+ text-align: center;
+ line-height: 1;
+ font-size: 13px;
+ color: #08AE98;
+ border-right: 1px solid #eee;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ >span{
+ font-size: 11px;
+ margin-top: 9px;
+ color: #111;
+ }
+ }
+ .zhou{
+ color: #fff;
+ background: #08AE98;
+ >span{
+ color: #fff;
+ }
+ }
+ }
+ .body{
+ width: 100%;
+ .row{
+ background-color: #fff;
+ height: 63px;
+ width: 100%;
+ display: flex;
+ .date{
+ background-color: #F5FEFD;
+ text-align: center;
+ line-height: 63px;
+ font-size: 11px;
+ color: #111;
+ }
+ >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, watch } from 'vue';
+import { getweek } from "@/utils/date"
+
+export default defineComponent({
+ props:{
+
+ },
+ setup(){
+ const zhou = ref(0);
+ const week = ref(getweek());
+ console.log(week.value)
+ watch(zhou,(value) => {
+ week.value = getweek(value)
+ console.log(week.value)
+ })
+ return {
+ zhou,
+ week
+ }
+ }
+})
+</script>
\ No newline at end of file