141 lines
2.8 KiB
Vue
141 lines
2.8 KiB
Vue
<template>
|
|
<div v-if="showLoading" class="center">
|
|
<dv-loading>Loading...</dv-loading>
|
|
</div>
|
|
|
|
<div class="box" :style="{ opacity: showLoading ? 0 : 1 }">
|
|
<div class="body">
|
|
<div class="l">
|
|
<topLeft :areaCodes="areaCodes" />
|
|
</div>
|
|
<div class="c" id="">
|
|
<topCenter :areaCodes="areaCodes"></topCenter>
|
|
</div>
|
|
<div class="r">
|
|
<topRight :areaCodes="areaCodes"></topRight>
|
|
</div>
|
|
</div>
|
|
<div class="foot">
|
|
<div class="foot-l">
|
|
<bottomLeft :areaCodes="areaCodes"></bottomLeft>
|
|
</div>
|
|
<div class="c">
|
|
<bottomCenter :areaCodes="areaCodes"></bottomCenter>
|
|
</div>
|
|
<div class="r">
|
|
<bottomRight :areaCodes="areaCodes"></bottomRight>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
|
|
import { ref, reactive } from "vue"
|
|
import topLeft from "@/components/index/topLeft.vue"
|
|
import topCenter from "@/components/index/topCenter.vue"
|
|
import topRight from "@/components/index/topRight.vue"
|
|
import bottomLeft from "@/components/index/bottomLeft.vue"
|
|
import bottomCenter from "@/components/index/bottomCenter.vue"
|
|
import bottomRight from "@/components/index/bottomRight.vue"
|
|
import { areaObj } from '@/store/index.js'
|
|
import { useRouter } from "vue-router"
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
const showLoading = ref(true)
|
|
const areaStore = areaObj()
|
|
const areaCodes = reactive({
|
|
...areaStore.area
|
|
})
|
|
|
|
|
|
setTimeout(() => {
|
|
showLoading.value = false
|
|
}, 1000);
|
|
</script>
|
|
<style lang="scss">
|
|
@keyframes jump {
|
|
0% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.body {
|
|
height: 45vh;
|
|
display: flex;
|
|
margin-top: 1vh;
|
|
justify-content: space-between;
|
|
|
|
.l {
|
|
|
|
width: 25vw;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
|
|
.c {
|
|
box-sizing: border-box;
|
|
width: 48vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
.r {
|
|
width: 25vw;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.foot {
|
|
margin-top: 1vh;
|
|
height: 46vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
|
|
.foot-l {
|
|
width: 25vw;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.c {
|
|
width: 48vw;
|
|
position: relative;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.r {
|
|
width: 25vw;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
}
|
|
</style> |