324 lines
8.2 KiB
Vue
324 lines
8.2 KiB
Vue
<template>
|
|
<div class="app">
|
|
<div
|
|
id="index"
|
|
ref="appRef"
|
|
>
|
|
<div class="bg">
|
|
<dv-loading v-if="loading">Loading ...</dv-loading>
|
|
<div
|
|
v-else
|
|
class="host-body"
|
|
>
|
|
<div class="d-flex jc-center">
|
|
<dv-decoration-10 class="dv-dec-10" />
|
|
<div class="d-flex jc-center">
|
|
<dv-decoration-8
|
|
class="dv-dec-8"
|
|
:color="decorationColors"
|
|
/>
|
|
<div class="title">
|
|
<span class="title-text">{{ title }}</span>
|
|
<dv-decoration-6
|
|
class="dv-dec-6"
|
|
:reverse="true"
|
|
:color="['#50e3c2', '#67a1e5']"
|
|
/>
|
|
</div>
|
|
<dv-decoration-8
|
|
class="dv-dec-8"
|
|
:reverse="true"
|
|
:color="decorationColors"
|
|
/>
|
|
</div>
|
|
<dv-decoration-10 class="dv-dec-10-s" />
|
|
</div>
|
|
|
|
<!-- 第二行 -->
|
|
<div class="d-flex jc-between px-2">
|
|
<div class="d-flex aside-width">
|
|
<div class="react-left ml-4 react-l-s">
|
|
<span class="react-before"></span>
|
|
<span class="text">{{ subtitle[0] }}</span>
|
|
</div>
|
|
<div class="react-left ml-3">
|
|
<span class="text">{{ subtitle[1] }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex aside-width">
|
|
<div class="react-right bg-color-blue mr-3">
|
|
<span class="text fw-b">{{ subtitle[2] }}</span>
|
|
</div>
|
|
<div class="react-right mr-4 react-l-s">
|
|
<span class="react-after"></span>
|
|
<span class="text">
|
|
{{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
|
|
{{ timeInfo.dateDay }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="body-box">
|
|
<!-- 第三行数据 -->
|
|
<div class="content-box">
|
|
<div>
|
|
<dv-border-box-12>
|
|
<CenterLeft1 />
|
|
</dv-border-box-12>
|
|
</div>
|
|
<div>
|
|
<dv-border-box-12>
|
|
<!-- <CenterLeft2 /> -->
|
|
</dv-border-box-12>
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div>
|
|
<!-- <Center /> -->
|
|
</div>
|
|
<!-- 中间 -->
|
|
<div>
|
|
<CenterRight1 />
|
|
</div>
|
|
<div>
|
|
<dv-border-box-13>
|
|
<CenterRight2 />
|
|
</dv-border-box-13>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 第四行数据 -->
|
|
<div class="bototm-box">
|
|
<dv-border-box-13>
|
|
<BottomLeft />
|
|
</dv-border-box-13>
|
|
<dv-border-box-12>
|
|
<BottomRight />
|
|
</dv-border-box-12>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
|
import { formatTime } from "./utils/index";
|
|
import { WEEK } from "./constant/index";
|
|
import useDraw from "./utils/useDraw.ts";
|
|
import { title, subtitle, moduleInfo } from "./constant/index";
|
|
// 有用的 已修改的组件
|
|
import BottomLeft from "./components/bottomLeft/index.vue";
|
|
import BottomRight from './components/bottomRight/index.vue'
|
|
import CenterRight2 from "./components/centerRight2/index.vue";
|
|
import CenterLeft1 from './components/centerLeft1/index.vue'
|
|
import CenterRight1 from "./components/centerRight1/index.vue";
|
|
// 未修改的组件
|
|
// import CenterLeft2 from "./components/centerLeft2/index.vue";
|
|
// import Center from "./components/center/index.vue";
|
|
|
|
|
|
// * 颜色
|
|
const decorationColors = ["#568aea", "#000000"];
|
|
|
|
// * 加载标识
|
|
const loading = ref<boolean>(true);
|
|
|
|
// * 时间内容
|
|
const timeInfo = reactive({
|
|
setInterval: 0,
|
|
dateDay: "",
|
|
dateYear: "",
|
|
dateWeek: "",
|
|
});
|
|
|
|
// * 适配处理
|
|
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
cancelLoading();
|
|
handleTime();
|
|
windowDraw();
|
|
calcRate();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
unWindowDraw();
|
|
clearInterval(timeInfo.setInterval);
|
|
});
|
|
|
|
// 处理 loading 展示
|
|
const cancelLoading = () => {
|
|
setTimeout(() => {
|
|
loading.value = false;
|
|
}, 500);
|
|
};
|
|
|
|
// 处理时间监听
|
|
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);
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.app {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #020308;
|
|
overflow: hidden;
|
|
#index {
|
|
color: #d3d6dd;
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: left top;
|
|
.bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 16px 16px 0 16px;
|
|
background-image: url("./assets/pageBg.png");
|
|
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;
|
|
}
|
|
.title {
|
|
position: relative;
|
|
width: 500px;
|
|
text-align: center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
|
|
.title-text {
|
|
font-size: 24px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%);
|
|
}
|
|
|
|
.dv-dec-6 {
|
|
position: absolute;
|
|
bottom: -30px;
|
|
left: 50%;
|
|
width: 250px;
|
|
height: 8px;
|
|
transform: translate(-50%);
|
|
}
|
|
}
|
|
|
|
// 第二行
|
|
.aside-width {
|
|
width: 40%;
|
|
}
|
|
.react-r-s,
|
|
.react-l-s {
|
|
background-color: #0f1325;
|
|
}
|
|
|
|
// 平行四边形
|
|
.react-right {
|
|
&.react-l-s {
|
|
text-align: right;
|
|
width: 500px;
|
|
}
|
|
font-size: 18px;
|
|
width: 300px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
transform: skewX(-45deg);
|
|
|
|
.react-after {
|
|
position: absolute;
|
|
right: -25px;
|
|
top: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #0f1325;
|
|
transform: skewX(45deg);
|
|
}
|
|
|
|
.text {
|
|
display: inline-block;
|
|
transform: skewX(45deg);
|
|
}
|
|
}
|
|
|
|
.react-left {
|
|
&.react-l-s {
|
|
width: 500px;
|
|
text-align: left;
|
|
}
|
|
font-size: 18px;
|
|
width: 300px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
text-align: center;
|
|
transform: skewX(45deg);
|
|
background-color: #0f1325;
|
|
|
|
.react-before {
|
|
position: absolute;
|
|
left: -25px;
|
|
top: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-color: #0f1325;
|
|
transform: skewX(-45deg);
|
|
}
|
|
|
|
.text {
|
|
display: inline-block;
|
|
transform: skewX(-45deg);
|
|
}
|
|
}
|
|
|
|
.body-box {
|
|
margin-top: 16px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
//下方区域的布局
|
|
.content-box {
|
|
display: grid;
|
|
grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
|
|
}
|
|
|
|
// 底部数据
|
|
.bototm-box {
|
|
margin-top: 10px;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|