2023-07-12 09:56:31 +08:00

89 lines
1.8 KiB
Vue

<template>
<Card title="施工电梯报告">
<div class="leftBottom">
<div class="time">
<el-date-picker
v-model="value1"
type="daterange"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
:size="size"
/>
</div>
<div class="listDiv">
<div class="list" v-for="item in 3">
<div class="listLeft"><img src="@/assets/images/towerCraneMonitoring/dtImg.png" alt="" /></div>
<div class="listRight">
<p style="font-size: 14px; margin-top: 4%">电梯运行报告</p>
<div style="margin-top: -6%; color: #a1accb">时间:2023-04-18-2023-04-24</div>
</div>
</div>
<!-- <div class="list"></div>
<div class="list"></div> -->
</div>
</div>
</Card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import Card from "@/components/card.vue";
const size = (ref < "default") | "large" | ("small" > "default");
const value1 = ref("");
</script>
<style lang="scss" scoped>
.leftBottom {
width: 100%;
height: 100%;
overflow: hidden;
.time {
position: absolute;
z-index: 999;
left: 15%;
margin-top: 0.5%;
}
.listDiv {
width: 89%;
height: 74%;
margin-top: 10%;
margin-left: 6%;
.list {
width: 100%;
height: 30%;
background-color: orange;
background: url("@/assets/images/towerCraneMonitoring/carContent.png") no-repeat;
background-size: 100% 100%;
margin-top: 2%;
display: flex;
.listLeft {
margin-left: 4%;
img {
height: 85%;
width: 100%;
margin-top: 11%;
}
}
.listRight {
color: #fff;
margin-left: 3%;
}
}
}
}
::v-deep .el-input__wrapper {
width: 50%;
height: 0%;
background: #0d2956;
}
::v-deep .el-range-separator {
color: #ccc;
font-size: 10px;
}
::v-deep .el-range-input {
color: #ccc;
font-size: 10px;
}
</style>