73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
|
<!--
|
||
|
|
* @FilePath: index.vue
|
||
|
|
* @Author: zz
|
||
|
|
* @Date: 2023-12-28 15:29:14
|
||
|
|
* @LastEditors: Please set LastEditors
|
||
|
|
* @LastEditTime: 2024-01-04 15:33:20
|
||
|
|
* @Descripttion:
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<div class="container">
|
||
|
|
<div class="bj">
|
||
|
|
<div class="text">
|
||
|
|
<span>{{ allData.header }}数据监控平台</span>
|
||
|
|
</div>
|
||
|
|
<div class="date">
|
||
|
|
<p class="date-time">{{ timeHtml }}</p>
|
||
|
|
</div>
|
||
|
|
<Float></Float>
|
||
|
|
<Sum></Sum>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, getCurrentInstance, reactive, onMounted } from "vue";
|
||
|
|
import Sum from "./components/sum.vue";
|
||
|
|
import Float from "./components/float.vue";
|
||
|
|
import useNowTime from "@/hook/nowTime";
|
||
|
|
let { timeHtml } = useNowTime();
|
||
|
|
|
||
|
|
let allData = reactive({
|
||
|
|
header: "炮塔铣床",
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
.container {
|
||
|
|
height: 1080px;
|
||
|
|
width: 1920px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.bj {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 16px 16px 10px 16px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
background-image: url(./img/u0.png);
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center center;
|
||
|
|
color: #aeeefa;
|
||
|
|
.text {
|
||
|
|
position: absolute;
|
||
|
|
top: 25px;
|
||
|
|
left: 38px;
|
||
|
|
width: 614px;
|
||
|
|
height: 53px;
|
||
|
|
font-size: 55px;
|
||
|
|
color: #aeeefa;
|
||
|
|
font-family: "华文新魏", sans-serif;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.date {
|
||
|
|
font-size: 28px;
|
||
|
|
height: 6%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.date-time {
|
||
|
|
margin-right: 125px;
|
||
|
|
}
|
||
|
|
</style>
|