修改了格式
This commit is contained in:
parent
b328b12f70
commit
8d93aa04d3
GPG Key ID:
A7972FD973317FF3
@ -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}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -2,36 +2,56 @@
|
||||
<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="{ 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 25" :key="item">
|
||||
<div class="day date">{{item > 10 ? item - 1 : '0' + (item - 1)}}:00</div>
|
||||
<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>
|
||||
@ -40,11 +60,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.week{
|
||||
.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{
|
||||
> div:first-child {
|
||||
margin-right: 90px;
|
||||
>img{
|
||||
> 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,91 +128,75 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
>span{
|
||||
> span {
|
||||
font-size: 11px;
|
||||
margin-top: 9px;
|
||||
color: #111;
|
||||
}
|
||||
}
|
||||
.zhou{
|
||||
.zhou {
|
||||
color: #fff;
|
||||
background: #08AE98;
|
||||
>span{
|
||||
background: #08ae98;
|
||||
> span {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.body{
|
||||
.body {
|
||||
width: 100%;
|
||||
.row{
|
||||
.row {
|
||||
background-color: #fff;
|
||||
height: 63px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.date{
|
||||
background-color: #F5FEFD;
|
||||
.date {
|
||||
background-color: #f5fefd;
|
||||
text-align: center;
|
||||
line-height: 63px;
|
||||
font-size: 11px;
|
||||
color: #111;
|
||||
}
|
||||
>div{
|
||||
> div {
|
||||
width: 100%;
|
||||
border-top: 1px solid #eee;
|
||||
border-right: 1px solid #eee;
|
||||
.day{
|
||||
width: 100%;
|
||||
.day {
|
||||
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 {
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
|
||||
> div:last-child {
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
>div::last-child{
|
||||
}
|
||||
.old {
|
||||
background-color: #f7f7f7;
|
||||
color: #111;
|
||||
}
|
||||
.ing {
|
||||
background-color: #0dbba4;
|
||||
color: #fff;
|
||||
}
|
||||
.next {
|
||||
background-color: #cef9f0;
|
||||
color: #0dbba4;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div::last-child {
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
@ -201,25 +205,23 @@
|
||||
}
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user