renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update：更新格式化配置

Browse Source
This commit is contained in:
zk
2023-11-27 10:38:51 +08:00
parent 29cd60a2f2
commit 6a2d442c79
19 changed files with 53948 additions and 202408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/index.vue
+117 -114
View File
@@ -2,147 +2,150 @@
<div class="outer">
<div class="title-d">
<div class="title-d-left">
{{dayTimeO}}
</div>
<div class="title-d-middle">
应急就医服务中心
</div>
<div class="title-d-right">
累计运行时间：{{dayTimeT}}
{{ dayTimeO }}
</div>
<div class="title-d-middle"> 应急就医服务中心 </div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }} </div>
</div>
<div class="body-d">
<div class="body-d-left">
<one-l/>
<two-l/>
<three-l/>
<one-l />
<two-l />
<three-l />
</div>
<div class="body-d-middle">
<china-map />
</div>
<div class="body-d-right">
<one-r/>
<two-r/>
<three-r/>
<one-r />
<two-r />
<three-r />
</div>
</div>
<div class="bottom-d"></div>
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import OneL from "../components/body-d-left/oneL.vue";
import TwoL from "../components/body-d-left/twoL.vue";
import ThreeL from "../components/body-d-left/threeL.vue";
import OneR from "../components/body-d-right/oneR.vue";
import TwoR from "../components/body-d-right/twoR.vue";
import ThreeR from "../components/body-d-right/threeR.vue";
import ChinaMap from '../components/chinaMap/chinaMap.vue'
import * as dayjs from "dayjs";
const dayTimeO = ref();
const dayTimeT = ref();
import { ref } from 'vue';
import OneL from '../components/body-d-left/oneL.vue';
import TwoL from '../components/body-d-left/twoL.vue';
import ThreeL from '../components/body-d-left/threeL.vue';
import OneR from '../components/body-d-right/oneR.vue';
import TwoR from '../components/body-d-right/twoR.vue';
import ThreeR from '../components/body-d-right/threeR.vue';
import ChinaMap from '../components/chinaMap/chinaMap.vue';
import * as dayjs from 'dayjs';
const dayTimeO = ref();
const dayTimeT = ref();
function init() {
getTime();
setInterval(() => {
function init() {
getTime();
}, 1000)
}
function getTime() {
dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')
dayTimeT.value = dayjs().diff(dayjs('2020-01-01'), 'day')+'天'
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD')+' 00:00:00'), 'hours'))+'时'
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH')+':00:00'), 'minutes'))+'分'
+getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm')+':00'), 'seconds'))+'秒';
}
function getZero(num: any) {
if (num < 10) {
return '0'+num;
setInterval(() => {
getTime();
}, 1000);
}
return num
}
init();
function getTime() {
dayTimeO.value = dayjs().format('YYYY年MM月DD日 HH时mm分ss秒');
dayTimeT.value =
dayjs().diff(dayjs('2020-01-01'), 'day') +
'天' +
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD') + ' 00:00:00'), 'hours')) +
'时' +
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH') + ':00:00'), 'minutes')) +
'分' +
getZero(dayjs().diff(dayjs(dayjs().format('YYYY-MM-DD HH:mm') + ':00'), 'seconds')) +
'秒';
}
function getZero(num: any) {
if (num < 10) {
return '0' + num;
}
return num;
}
init();
</script>
<style lang="less" scoped>
.outer {
height: 100%;
box-sizing: border-box;
background: url("../assets/images/bg.png") no-repeat;
background-size: 100% 100%;
}
.title-d {
height: 80px;
line-height: 80px;
display: flex;
padding-bottom: 9px;
background: url("../assets/images/top-title.png") no-repeat;
background-size: 100% 100%;
.title-d-left, .title-d-middle, .title-d-right {
font-size: 27px;
color: #ffffff;
line-height: 60px;
text-align: center;
.outer {
height: 100%;
box-sizing: border-box;
background: url('../assets/images/bg.png') no-repeat;
background-size: 100% 100%;
}
.title-d {
height: 80px;
line-height: 80px;
display: flex;
padding-bottom: 9px;
background: url('../assets/images/top-title.png') no-repeat;
background-size: 100% 100%;
> :nth-child(1) {
width: 29%;
}
.title-d-left,
.title-d-middle,
.title-d-right {
font-size: 27px;
color: #ffffff;
line-height: 60px;
text-align: center;
}
> :nth-child(2) {
width: 42%;
font-size: 40px;
font-weight: bold;
}
> :nth-child(1) {
width: 29%;
}
> :nth-child(3) {
width: 29%;
}
}
> :nth-child(2) {
width: 42%;
font-size: 40px;
font-weight: bold;
}
.body-d {
display: flex;
height: calc(100% - 120px);
padding-top: 10px;
> :nth-child(1) {
width: 25%;
}
> :nth-child(2) {
width: 50%;
}
> :nth-child(3) {
width: 25%;
}
.body-d-left, .body-d-right {
text-align: center;
}
.body-d-left, .body-d-right {
> :nth-child(n) {
width: 100%;
height: calc(100% / 3);
padding: 10px;
> :nth-child(3) {
width: 29%;
}
}
.body-d-middle{
display: flex;
flex-direction: column;
}
}
.bottom-d {
height: 40px;
background: url("../assets/images/bottom-b.png") no-repeat;
background-size: 100% 100%;
}
</style>
.body-d {
display: flex;
height: calc(100% - 120px);
padding-top: 10px;
> :nth-child(1) {
width: 25%;
}
> :nth-child(2) {
width: 50%;
}
> :nth-child(3) {
width: 25%;
}
.body-d-left,
.body-d-right {
text-align: center;
}
.body-d-left,
.body-d-right {
> :nth-child(n) {
width: 100%;
height: calc(100% / 3);
padding: 10px;
}
}
.body-d-middle {
display: flex;
flex-direction: column;
}
}
.bottom-d {
height: 40px;
background: url('../assets/images/bottom-b.png') no-repeat;
background-size: 100% 100%;
}
</style>