theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

xbx #60

Merged
theluyuan merged 9 commits from xbx into master 2020-10-20 09:09:35 +00:00
Conversation 0 Commits 9 Files Changed 10 +136 -155
3 changed files with 136 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8d93aa04d3 - Show all commits

10
src/utils/date.ts
View File

@ -68,20 +68,23 @@ export function getweek(zhou?: number){
if(zhou != undefined){ if(zhou != undefined){
now = now.day(now.day() + (zhou * 6)); 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() // 当前天 const day = now.date() // 当前天
zhou = now.day(); // 当前周几 zhou = now.day(); // 当前周几
const year = now.year() const year = now.year()
const startd = now.day(1).date();
const start = `${year}-${yue}-${startd}`
interface Date{ interface Date{
day: string; day: string;
list?: Array<any>; list?: Array<any>;
} }
const date: Array<Date> = []; const date: Array<Date> = [];
for(let i = 0; i < 7; i++){ for(let i = 0; i < 7; i++){
console.log(i); console.log(i);
now = now.day(i + 1) now = now.day(i + 1)
date[i] = {day: ""}; 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 = [] date[i].list = []
for(let j = 0;j < 24; j++){ for(let j = 0;j < 24; j++){
date[i].list?.push({ 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) console.log(date)
return {date, year, yue, day, zhou} return {date, year, yue, day, zhou, start, end}
} }

25
src/views/Home.vue
View File

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

256
src/views/regime/week.vue
View File

@ -2,49 +2,69 @@
<div class="week"> <div class="week">
<div class="head"> <div class="head">
<div @click="zhou--"> <div @click="zhou--">
<img src="" alt=""> <img src="" alt="" />
上一周 上一周
</div> </div>
2020年10月 2020年10月
<a-button type="primary" class="button"> <a-button type="primary" class="button"> 月日历 </a-button>
月日历
</a-button>
<div @click="zhou++"> <div @click="zhou++">
下一周 下一周
<img src="" alt=""> <img src="" alt="" />
</div> </div>
</div> </div>
<div class="week"> <div class="week">
<div class="heads"> <div class="heads">
<div></div> <div></div>
<div :class="{zhou: zhou == 0 && week.zhou == 1}">周一<span>{{week.date[0].day}}</span></div> <div :class="{ zhou: zhou == 0 && week.zhou == 1 }">
<div :class="{zhou: zhou == 0 && week.zhou == 2}">周二<span>{{week.date[1].day}}</span></div> 周一<span>{{ week.date[0].day }}</span>
<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>
<div class="body"> <div :class="{ zhou: zhou == 0 && week.zhou == 2 }">
<div class="row" v-for="item in 25" :key="item"> 周二<span>{{ week.date[1].day }}</span>
<div class="day date">{{item > 10 ? item - 1 : '0' + (item - 1)}}:00</div> </div>
<div v-for="i in 7" :key="i"> <div :class="{ zhou: zhou == 0 && week.zhou == 3 }">
<div class="day"> 周三<span>{{ week.date[2].day }}</span>
</div>
<div :class="{ zhou: zhou == 0 && week.zhou == 4 }">
</div> 周四<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>
<div>11:00-11:00</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.week{ .week {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.head{ .head {
width: 1320px; width: 1320px;
height: 57px; height: 57px;
background-color: #fff; background-color: #fff;
@ -52,33 +72,33 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
>div{ > div {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 13px; font-size: 13px;
color: #0DBBA4; color: #0dbba4;
>img{ > img {
width: 7px; width: 7px;
height: 11px; height: 11px;
} }
} }
>div:first-child{ > div:first-child {
margin-right: 90px; margin-right: 90px;
>img{ > img {
margin-right: 11px; margin-right: 11px;
} }
} }
>div:last-child{ > div:last-child {
margin-left: 90px; margin-left: 90px;
>img{ > img {
margin-left: 11px; margin-left: 11px;
} }
} }
.button{ .button {
width: 57px; width: 57px;
height: 26px; height: 26px;
background-color: #0DBBA4; background-color: #0dbba4;
border-right: 4px; border-right: 4px;
border: none; border: none;
font-size: 10px; font-size: 10px;
@ -88,19 +108,19 @@
right: 40px; right: 40px;
} }
} }
.week{ .week {
.heads{ .heads {
width: 1320px; width: 1320px;
height: 63px; height: 63px;
display: flex; display: flex;
>div{ > div {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #F5FEFD; background-color: #f5fefd;
text-align: center; text-align: center;
line-height: 1; line-height: 1;
font-size: 13px; font-size: 13px;
color: #08AE98; color: #08ae98;
border-right: 1px solid #eee; border-right: 1px solid #eee;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@ -108,118 +128,100 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
>span{ > span {
font-size: 11px; font-size: 11px;
margin-top: 9px; margin-top: 9px;
color: #111; color: #111;
} }
} }
.zhou{ .zhou {
color: #fff;
background: #08ae98;
> span {
color: #fff; color: #fff;
background: #08AE98;
>span{
color: #fff;
} }
} }
} }
.body{ .body {
width: 100%; width: 100%;
.row{ .row {
background-color: #fff; background-color: #fff;
height: 63px; height: 63px;
width: 100%;
display: flex;
.date {
background-color: #f5fefd;
text-align: center;
line-height: 63px;
font-size: 11px;
color: #111;
}
> div {
width: 100%; width: 100%;
display: flex; border-top: 1px solid #eee;
.date{ border-right: 1px solid #eee;
background-color: #F5FEFD; .day {
text-align: center; height: 100%;
line-height: 63px; display: flex;
font-size: 11px; flex-direction: column;
color: #111; color: #111;
}
>div{ > div {
width: 100%; min-height: 100%;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
.day{
width: 100%; width: 100%;
height: 100%; border-radius: 6px;
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
color: #111; align-items: center;
>div{ justify-content: center;
height: 100%; font-size: 11px;
border-radius: 6px;
padding: 18px; > div:last-child {
overflow: hidden; font-size: 11px;
.item{ margin-top: 8px;
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;
}
}
} }
} }
.old {
} background-color: #f7f7f7;
>div::last-child{ color: #111;
border: unset; }
.ing {
background-color: #0dbba4;
color: #fff;
}
.next {
background-color: #cef9f0;
color: #0dbba4;
}
} }
}
> div::last-child {
border: unset;
}
} }
} }
} }
} }
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch } from 'vue'; import { defineComponent, ref, watch } from "vue";
import { getweek } from "@/utils/date" import { getweek } from "@/utils/date";
export default defineComponent({ export default defineComponent({
props:{ props: {},
setup() {
},
setup(){
const zhou = ref(0); const zhou = ref(0);
const week = ref(getweek()); const week = ref(getweek());
console.log(week.value) console.log(week.value);
watch(zhou,(value) => { watch(zhou, (value) => {
week.value = getweek(value) week.value = getweek(value);
console.log(week.value) console.log(week.value);
}) });
return { return {
zhou, zhou,
week week,
} };
} },
}) });
</script> </script>