181 lines
3.3 KiB
Vue
181 lines
3.3 KiB
Vue
<template>
|
|
<div v-if="show" class="center">
|
|
<dv-loading>Loading...</dv-loading>
|
|
</div>
|
|
|
|
|
|
<div :style="{ opacity: show ? 0 : 1 }">
|
|
|
|
<div class="top box">
|
|
<div class="l">
|
|
<topLeft :code="route.query.code" :key="route.query.code"></topLeft>
|
|
</div>
|
|
<div class="c" id="">
|
|
<topCenter :code="route.query.code" :key="route.query.code"></topCenter>
|
|
</div>
|
|
<div class="r">
|
|
<topRight :code="route.query.code" :key="route.query.code"></topRight>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="bottom box">
|
|
<div class="l">
|
|
|
|
<bottomleft :code="route.query.code" :key="route.query.code"></bottomleft>
|
|
</div>
|
|
<div class="c">
|
|
<bottomCenter :key="route.query.code"></bottomCenter>
|
|
</div>
|
|
<div class="r">
|
|
<bottomRight :code="route.query.code" :key="route.query.code"></bottomRight>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted } from 'vue';
|
|
import bottomRight from "@/components/townDetail/bottomRight.vue"
|
|
import bottomCenter from "@/components/townDetail/bottomCenter.vue"
|
|
import bottomleft from "@/components/townDetail/bottomleft.vue"
|
|
import { useRoute } from 'vue-router';
|
|
import topCenter from "@/components/townDetail/topCenter.vue"
|
|
import topLeft from "@/components/townDetail/topLeft.vue"
|
|
import topRight from "@/components/townDetail/topRight.vue"
|
|
import { ref } from 'vue'
|
|
|
|
const show = ref(true)
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
setTimeout(() => {
|
|
show.value = false
|
|
}, 1000)
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.box {
|
|
width: 100vw;
|
|
height: 47vh;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
padding-top: 1vh;
|
|
justify-content: space-between;
|
|
// color: transparent;
|
|
|
|
.l {
|
|
width: 25vw;
|
|
height: 46vh;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
padding-top: 6vh;
|
|
|
|
|
|
|
|
}
|
|
|
|
.c {
|
|
box-sizing: border-box;
|
|
width: 48vw;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
.r {
|
|
width: 25vw;
|
|
height: 46vh;
|
|
position: relative;
|
|
// background-color: RED;
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
// background-color: green;
|
|
display: flex;
|
|
padding-top: 1vh;
|
|
justify-content: space-between;
|
|
|
|
.l {
|
|
// flex: 1;
|
|
width: 25VW;
|
|
height: 46vh;
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
.c {
|
|
width: 48VW;
|
|
|
|
height: 46vh;
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
.r {
|
|
width: 25VW;
|
|
|
|
height: 46vh;
|
|
position: relative;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.progress-bar {
|
|
transform: translateY(12px);
|
|
width: 100%;
|
|
height: 10px;
|
|
background-color: #122E3F;
|
|
// border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress {
|
|
width: 70%;
|
|
height: 100%;
|
|
background: linear-gradient(to right, #455CCC, #51C2E0);
|
|
transition: width 0.5s ease-in-out;
|
|
}
|
|
|
|
.center {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
}
|
|
</style> |