beelink/src/views/regime/week.vue

<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>