From 8d93aa04d3b33c0ffd9c0d18de21378b654df331 Mon Sep 17 00:00:00 2001
From: luyuan <1162963624@qq.com>
Date: Tue, 20 Oct 2020 15:06:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/date.ts         |  10 +-
 src/views/Home.vue        |  25 ----
 src/views/regime/week.vue | 256 +++++++++++++++++++-------------------
 3 files changed, 136 insertions(+), 155 deletions(-)
 delete mode 100644 src/views/Home.vue

diff --git a/src/utils/date.ts b/src/utils/date.ts
index 1dbf9a8..9da443c 100644
--- a/src/utils/date.ts
+++ b/src/utils/date.ts
@@ -68,20 +68,23 @@ export function getweek(zhou?: number){
     if(zhou != undefined){
         now = now.day(now.day() + (zhou * 6));
     }
-    const yue = now.month() + 1;
+    const yue = (now.month() + 1 < 10 ? '0' + (now.month() + 1)  : (now.month() + 1));
     const day = now.date() // 当前天
     zhou = now.day(); // 当前周几
     const year = now.year()
+    const startd = now.day(1).date();
+    const start = `${year}-${yue}-${startd}`
     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].day = now.year() + "-" + (now.month() + 1 < 10 ? '0' + (now.month() + 1)  : (now.month() + 1)) + "-" + (now.date() < 10 ? '0' + now.date() : now.date())
         date[i].list = []
         for(let j = 0;j < 24; j++){
             date[i].list?.push({
@@ -90,8 +93,9 @@ export function getweek(zhou?: number){
             })
         }
     }
+    const end = `${now.year()}-${(now.month() + 1 < 10 ? '0' + (now.month() + 1)  : (now.month() + 1))}-${now.date()}`
     console.log(date)
-    return {date, year, yue, day, zhou}
+    return {date, year, yue, day, zhou, start, end}
 }
 
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
deleted file mode 100644
index ea1ae8e..0000000
--- a/src/views/Home.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="home">
-    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
-import { getinfo } from "../api/index"
-
-export default defineComponent({
-  name: 'Home',
-  components: {
-    HelloWorld,
-  },
-  setup(){
-    // ctx.axios.get("https://www.baidu.com")
-    getinfo().then((res)=>{
-      console.log(res)
-    })
-  }
-});
-</script>
diff --git a/src/views/regime/week.vue b/src/views/regime/week.vue
index 955c3e5..72a8657 100644
--- a/src/views/regime/week.vue
+++ b/src/views/regime/week.vue
@@ -2,49 +2,69 @@
     <div class="week">
         <div class="head">
             <div @click="zhou--">
-                <img src="" alt=""> 
+                <img src="" alt="" />
                 上一周
             </div>
             2020年10月
-            <a-button type="primary" class="button">
-                月日历
-            </a-button>
+            <a-button type="primary" class="button"> 月日历 </a-button>
             <div @click="zhou++">
                 下一周
-                <img src="" alt="">
+                <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 class="heads">
+            <div></div>
+            <div :class="{ zhou: zhou == 0 && week.zhou == 1 }">
+                周一<span>{{ week.date[0].day }}</span>
             </div>
-            <div class="body">
-                <div class="row" v-for="item in 25" :key="item">
-                    <div class="day date">{{item > 10 ? item - 1 : '0' + (item - 1)}}:00</div>
-                    <div v-for="i in 7" :key="i">
-                        <div class="day">
-                            
-                            
-                        </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 - 1 : "0" + (item - 1) }}:00-{{
+                item > 9 ? item : "0" + item
+                }}:00
+            </div>
+            <div v-for="i in 7" :key="i">
+                <div class="day">
+                <div class="">
+                    <div class="one-line-hide">
+                        one-line-hideon
                     </div>
+                    <div>11:00-11:00</div>
+                </div>
                 </div>
             </div>
+            </div>
+        </div>
         </div>
     </div>
 </template>
 <style lang="scss" scoped>
-.week{
- display: flex;
+.week {
+    display: flex;
     flex-direction: column;
     align-items: center;
-    .head{
+    .head {
         width: 1320px;
         height: 57px;
         background-color: #fff;
@@ -52,33 +72,33 @@
         align-items: center;
         justify-content: center;
         position: relative;
-        >div{
+        > div {
             display: flex;
             align-items: center;
             font-size: 13px;
-            color: #0DBBA4;
-            >img{
+            color: #0dbba4;
+            > img {
                 width: 7px;
                 height: 11px;
             }
         }
-        >div:first-child{
-            margin-right: 90px;
-            >img{
+        > div:first-child {
+                margin-right: 90px;
+            > img {
                 margin-right: 11px;
             }
         }
-        >div:last-child{
+        > div:last-child {
             margin-left: 90px;
 
-            >img{
+            > img {
                 margin-left: 11px;
             }
         }
-        .button{
+        .button {
             width: 57px;
             height: 26px;
-            background-color: #0DBBA4;
+            background-color: #0dbba4;
             border-right: 4px;
             border: none;
             font-size: 10px;
@@ -88,19 +108,19 @@
             right: 40px;
         }
     }
-    .week{
-        .heads{
+    .week {
+        .heads {
             width: 1320px;
             height: 63px;
             display: flex;
-            >div{
+            > div {
                 width: 100%;
                 height: 100%;
-                background-color: #F5FEFD;
+                background-color: #f5fefd;
                 text-align: center;
                 line-height: 1;
                 font-size: 13px;
-                color: #08AE98;
+                color: #08ae98;
                 border-right: 1px solid #eee;
                 box-sizing: border-box;
                 display: flex;
@@ -108,118 +128,100 @@
                 align-items: center;
                 justify-content: center;
 
-                >span{
-                    font-size: 11px;
-                    margin-top: 9px;
-                    color: #111;
+                > span {
+                font-size: 11px;
+                margin-top: 9px;
+                color: #111;
                 }
             }
-            .zhou{
+            .zhou {
+                color: #fff;
+                background: #08ae98;
+                > span {
                 color: #fff;
-                background: #08AE98;
-                >span{
-                    color: #fff;
                 }
             }
         }
-        .body{
+        .body {
             width: 100%;
-            .row{
-                    background-color: #fff;
-                    height: 63px;
+            .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%;
-                    display: flex;
-                    .date{
-                        background-color: #F5FEFD;
-                        text-align: center;
-                        line-height: 63px;
-                        font-size: 11px;
+                    border-top: 1px solid #eee;
+                    border-right: 1px solid #eee;
+                    .day {
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
                         color: #111;
-                    }
-                    >div{
-                        width: 100%;
-                        border-top: 1px solid #eee;
-                        border-right: 1px solid #eee;
-                        .day{
+
+                        > div {
+                            min-height: 100%;
                             width: 100%;
-                            height: 100%;
+                            border-radius: 6px;
+                            overflow: hidden;
                             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;
-                                    }
-                                }
+                            align-items: center;
+                            justify-content: center;
+                            font-size: 11px;
+
+                            > div:last-child {
+                                font-size: 11px;
+                                margin-top: 8px;
                             }
                         }
-                          
-                    }
-                    >div::last-child{
-                        border: unset;
+                        .old {
+                            background-color: #f7f7f7;
+                            color: #111;
+                        }
+                        .ing {
+                            background-color: #0dbba4;
+                            color: #fff;
+                        }
+                        .next {
+                            background-color: #cef9f0;
+                            color: #0dbba4;
+                        }
                     }
+                }
+                > div::last-child {
+                    border: unset;
+                }
             }
         }
     }
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
-import { getweek } from "@/utils/date"
+import { defineComponent, ref, watch } from "vue";
+import { getweek } from "@/utils/date";
 
 export default defineComponent({
-    props:{
-
-    },
-    setup(){
+    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)
-        })
+        console.log(week.value);
+        watch(zhou, (value) => {
+            week.value = getweek(value);
+            console.log(week.value);
+        });
         return {
             zhou,
-            week
-        }
-    }
-})
+            week,
+        };
+    },
+});
 </script>
\ No newline at end of file