|
@@ -6,77 +6,62 @@
|
|
|
<dv-loading v-if="loading">Loading...</dv-loading>
|
|
|
<div v-else
|
|
|
class="host-body">
|
|
|
- <div class="d-flex jc-center">
|
|
|
- </div>
|
|
|
- <!-- 第二行 -->
|
|
|
- <div class="d-flex jc-between px-2">
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="body-box">
|
|
|
- <!-- 第三行数据 -->
|
|
|
- <div class="content-box">
|
|
|
- </div>
|
|
|
- <!-- 第四行数据 -->
|
|
|
- <div class="bototm-box">
|
|
|
- <dv-border-box-13>
|
|
|
- <bottom-left />
|
|
|
- </dv-border-box-13>
|
|
|
- <dv-border-box-12>
|
|
|
- <bottom-right />
|
|
|
- </dv-border-box-12>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <dv-full-screen-container>content</dv-full-screen-container>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-import { onMounted, onBeforeUnmount, ref, defineComponent,watch } from 'vue'
|
|
|
-import { formatTime } from '@/utils/index'
|
|
|
-import { reactive } from '@vue/reactivity'
|
|
|
-import { WEEK } from '@/constant/index'
|
|
|
-import { title, subtitle, moduleInfo } from '@/constant/index'
|
|
|
-import useIndex from '@/utils/useDraw'
|
|
|
+<script lang="ts">
|
|
|
+import { onMounted, onBeforeUnmount, ref, defineComponent, watch } from 'vue';
|
|
|
+import { formatTime } from '@/utils/index';
|
|
|
+import { reactive } from '@vue/reactivity';
|
|
|
+import { WEEK } from '@/constant/index';
|
|
|
+import { title, subtitle, moduleInfo } from '@/constant/index';
|
|
|
+import useIndex from '@/utils/useDraw';
|
|
|
+
|
|
|
export default defineComponent({
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
setup(props, context) {
|
|
|
- let loading = ref(true)
|
|
|
+ let loading = ref(true);
|
|
|
//时间信息
|
|
|
const timeInfo = reactive({
|
|
|
setInterval: 0,
|
|
|
dateDay: '',
|
|
|
dataYear: '',
|
|
|
dataWeek: '',
|
|
|
- })
|
|
|
+ });
|
|
|
// * 适配处理
|
|
|
- const { appRef, calcRate, windowDraw } = useIndex()
|
|
|
+ const { appRef, calcRate, windowDraw } = useIndex();
|
|
|
// 生命周期
|
|
|
onMounted(() => {
|
|
|
- cancelLoading()
|
|
|
- handleTime()
|
|
|
+ cancelLoading();
|
|
|
+ handleTime();
|
|
|
// todo 屏幕适应
|
|
|
//windowDraw()
|
|
|
- calcRate()
|
|
|
- })
|
|
|
+ calcRate();
|
|
|
+ });
|
|
|
|
|
|
onBeforeUnmount(() => {
|
|
|
- clearInterval(timeInfo.setInterval)
|
|
|
- })
|
|
|
+ clearInterval(timeInfo.setInterval);
|
|
|
+ });
|
|
|
|
|
|
const cancelLoading = () => {
|
|
|
setTimeout(() => {
|
|
|
- loading.value = false
|
|
|
- }, 500)
|
|
|
- }
|
|
|
+ loading.value = false;
|
|
|
+ }, 500);
|
|
|
+ };
|
|
|
// todo 处理时间监听
|
|
|
const handleTime = () => {
|
|
|
- timeInfo.setInterval = setInterval(() => {
|
|
|
- const date = new Date()
|
|
|
- timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
|
|
|
- timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
|
|
|
- timeInfo.dateWeek = WEEK[date.getDay()]
|
|
|
- }, 1000)
|
|
|
- }
|
|
|
+ timeInfo.setInterval = window.setInterval(() => {
|
|
|
+ const date = new Date();
|
|
|
+ timeInfo.dateDay = formatTime(date, 'HH: mm: ss');
|
|
|
+ timeInfo.dataYear = formatTime(date, 'yyyy-MM-dd');
|
|
|
+ timeInfo.dataWeek = WEEK[date.getDay()];
|
|
|
+ }, 1000);
|
|
|
+ };
|
|
|
// return
|
|
|
return {
|
|
|
loading,
|
|
@@ -85,16 +70,16 @@ export default defineComponent({
|
|
|
title,
|
|
|
subtitle,
|
|
|
moduleInfo,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
-})
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
#index {
|
|
|
color: #d3d6dd;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 1920px;
|
|
|
+ height: 1080px;
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
@@ -108,5 +93,20 @@ export default defineComponent({
|
|
|
background-size: cover;
|
|
|
background-position: center center;
|
|
|
}
|
|
|
+
|
|
|
+ .host-body {
|
|
|
+ .dv-dec-10,
|
|
|
+ .dv-dec-10-s {
|
|
|
+ width: 33.3%;
|
|
|
+ height: 5px;
|
|
|
+ }
|
|
|
+ .dv-dec-10-s {
|
|
|
+ transform: rotateY(180deg);
|
|
|
+ }
|
|
|
+ .dv-dec-8 {
|
|
|
+ width: 200px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|