124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
|
<div class="safe-education">
|
|
<div class="top">
|
|
<div class="topLeft itembox">
|
|
<div class="title-speed">建材生产与运输阶段碳排放</div>
|
|
<div class="title-con">
|
|
<TopLeft />
|
|
</div>
|
|
</div>
|
|
<div class="topCenter itembox">
|
|
<div class="title-speed">低碳技术应用碳减量</div>
|
|
<div class="title-con">
|
|
<TopCenter />
|
|
</div>
|
|
</div>
|
|
<div class="topRight itembox">
|
|
<div class="title-speed">施工阶段碳排放</div>
|
|
<div class="title-con">
|
|
<TopRight />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="bottomLeft itembox">
|
|
<div class="title-speed">原始数据动态监测</div>
|
|
<div class="title-con">
|
|
<BottomLeft />
|
|
</div>
|
|
</div>
|
|
<div class="bottomRight itembox">
|
|
<div class="title-speed">项目总体碳排放</div>
|
|
<div class="title-con">
|
|
<BottomRight />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from "vue";
|
|
import TopLeft from "./components/TopLeft.vue";
|
|
import TopCenter from "./components/TopCenter.vue";
|
|
import TopRight from "./components/TopRight.vue";
|
|
import BottomLeft from "./components/BottomLeft.vue";
|
|
import BottomRight from "./components/BottomRight.vue";
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.safe-education {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.itembox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title-speed {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
padding-left: 35px;
|
|
background: url("@/assets/images/titleBig.webp") no-repeat;
|
|
background-size: 100% 100%;
|
|
// margin-left: 50px;
|
|
font-family: OPPOSansH;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
margin-bottom: 5px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.title-con {
|
|
width: 100%;
|
|
flex: 1;
|
|
background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
// background: skyblue;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 52%;
|
|
display: flex;
|
|
.topLeft {
|
|
width: 33.5%;
|
|
// background: skyblue;
|
|
// background-color: orchid;
|
|
}
|
|
.topCenter {
|
|
margin: 0% 1%;
|
|
width: 33%;
|
|
}
|
|
.topRight {
|
|
width: 33%;
|
|
}
|
|
}
|
|
.bottom {
|
|
width: 100%;
|
|
height: 46%;
|
|
margin-top: 1%;
|
|
margin-bottom: 1%;
|
|
display: flex;
|
|
.bottomLeft {
|
|
width: 49%;
|
|
margin-right: 1%;
|
|
:deep(.h-card) {
|
|
.content {
|
|
margin-top: 2% !important;
|
|
}
|
|
}
|
|
}
|
|
.bottomRight {
|
|
width: 50%;
|
|
:deep(.h-card) {
|
|
.content {
|
|
margin-top: 1% !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|