周历完成
This commit is contained in:
parent
ad40d7749e
commit
e0319762c9
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="row" v-for="item in 24" :key="item">
|
||||
<div class="day date">
|
||||
<div class="day date" :style="{'background-color': item - 1 == xs ? '#0DBBA4' : '', 'color': item - 1 == xs ? '#fff' : ''}">
|
||||
{{ item > 10 ? item - 1 : "0" + (item - 1) }}:00-{{
|
||||
item > 9 ? item : "0" + item
|
||||
}}:00
|
||||
@ -55,6 +55,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lien" :style="{'top': top + 'rem'}">
|
||||
<div class="heng">
|
||||
<div class="dian"></div>
|
||||
<div class="xian"></div>
|
||||
</div>
|
||||
<div class="times">{{times}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -146,6 +153,7 @@
|
||||
.body {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.row {
|
||||
background-color: #fff;
|
||||
height: 63px;
|
||||
@ -205,6 +213,32 @@
|
||||
border: unset;
|
||||
}
|
||||
}
|
||||
.lien{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 128px;
|
||||
.heng{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.dian{
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
flex-shrink: 0;
|
||||
background-color: #FFFA18;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.xian{
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #FFFA18, #D0EB3D, #87E062, #42DE9D, #00DAC2);
|
||||
}
|
||||
}
|
||||
.times{
|
||||
font-size: 11px;
|
||||
color: #FFFA18;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -215,6 +249,7 @@ import { getDay, gethour, getminute, gettime, getweek } from "@/utils/date";
|
||||
import store from '@/store';
|
||||
import { getdatelist, userinfo } from '@/api';
|
||||
import router from '@/router';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export default defineComponent({
|
||||
props: {},
|
||||
@ -247,6 +282,18 @@ export default defineComponent({
|
||||
|
||||
getdates(userid);
|
||||
|
||||
const top = ref(0);
|
||||
const times = ref('');
|
||||
const xs = ref(0);
|
||||
setInterval(()=>{
|
||||
const now = dayjs();
|
||||
const xiaoshi = now.month()
|
||||
const fenzhong = now.minute()
|
||||
top.value = (xiaoshi + (fenzhong / 60)) * 0.63;
|
||||
times.value = (xiaoshi > 10 ? xiaoshi : '0' + xiaoshi) + ":" + (fenzhong > 10 ? fenzhong : '0' + fenzhong);
|
||||
xs.value = xiaoshi;
|
||||
}, 2000)
|
||||
|
||||
watch(zhou, (value) => {
|
||||
week.value = getweek(value);
|
||||
console.log(week.value);
|
||||
@ -272,7 +319,10 @@ export default defineComponent({
|
||||
zhou,
|
||||
week,
|
||||
navto,
|
||||
zhuangtai
|
||||
zhuangtai,
|
||||
top,
|
||||
times,
|
||||
xs
|
||||
};
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user