Files
sgxt_web/src/views/KeyPopulations/index.vue

75 lines
1.9 KiB
Vue
Raw Normal View History

2025-04-15 18:56:50 +08:00
<template>
2025-04-22 16:39:00 +08:00
<div class="homeBox">
<GdMap></GdMap>
<!-- 头部 -->
<Head type="importantPerson"></Head>
<!-- 左边内容 -->
<div class="home-aside asideL" style="left: 0">
<ImportantPerson></ImportantPerson>
2025-04-15 18:56:50 +08:00
</div>
2025-04-22 16:39:00 +08:00
<!-- 右边内容 -->
<div class="home-aside asideR" style="right: 0">
<div class="aside-middle mt60">
<Zdrqhd></Zdrqhd>
</div>
<div class="aside-middle">
<Yjclqktj></Yjclqktj>
</div>
</div>
<div class="foot">
<div class="footBtn"><span>发布指令</span></div>
</div>
</div>
2025-04-15 18:56:50 +08:00
</template>
<script setup>
2025-04-22 16:39:00 +08:00
import GdMap from "@/components/GdMap/index.vue";
import Head from "@/views/home/layout/head.vue";
import ImportantPerson from "./model/importantPerson.vue";
import Zdrqhd from "./model/zdrqhd.vue";
import Yjclqktj from "./model/yjclqktj.vue";
2025-04-15 18:56:50 +08:00
</script>
<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
2025-04-22 16:39:00 +08:00
.foot {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%);
width: 1380px;
height: 107px;
background: url("~@/assets/images/foot.png") no-repeat center center;
background-size: 100% 100%;
.footBtn {
2025-04-15 19:03:17 +08:00
position: absolute;
left: 50%;
2025-04-22 16:39:00 +08:00
bottom: 46px;
2025-04-15 19:03:17 +08:00
transform: translate(-50%);
2025-04-22 16:39:00 +08:00
width: 110px;
height: 110px;
text-align: center;
background: url("~@/assets/images/bg02.png") no-repeat center center;
2025-04-15 19:03:17 +08:00
background-size: 100% 100%;
2025-04-22 16:39:00 +08:00
cursor: pointer;
span {
display: inline-block;
width: 32px;
white-space: wrap;
margin-top: 37px;
2025-04-16 09:33:29 +08:00
}
2025-04-22 16:39:00 +08:00
}
2025-04-15 19:03:17 +08:00
}
2025-04-22 16:39:00 +08:00
.asideL {
2025-04-22 16:42:05 +08:00
background: linear-gradient(to right, rgba(78, 98, 132, 0.8) 0%, rgba(255,255,255,0.1) 100%);
2025-04-15 18:56:50 +08:00
}
2025-04-22 16:39:00 +08:00
.asideR {
2025-04-22 16:42:05 +08:00
background: linear-gradient(to left, rgba(78, 98, 132, 0.8) 0%, rgba(255,255,255,0.1) 100%);
2025-04-15 18:56:50 +08:00
}
2025-04-22 16:39:00 +08:00
.homeBox .home-contant .home-aside .aside-middle {
height: calc((100% - 60px) / 2);
2025-04-15 18:56:50 +08:00
}
.transition {
transition: all 0.5s;
}
</style>