不知道为啥我这里圆角不好使,贴一下代码吧
<template>
<div class="online-rate">
<el-header>
<div class="header-title">
<div id="rectangle"></div>
隐患
</div>
</el-header>
<div class="chart-content">
<div class="left-part">
<div class="inspection">
<inspectionChart />
</div>
<div class="train">
<trainChart />
</div>
</div>
<div class="center-part">
<hiddenDangerChart />
</div>
<div class="right-part">
<div class="deal">
<dealDangerChart />
</div>
<div class="drill">
<drillChart />
</div>
</div>
</div>
</div>
</template>
<script>
import resize from "../mixins/resize";
import inspectionChart from "@/views/dashboard-new/treacherous/inspectionChart";
import trainChart from "@/views/dashboard-new/treacherous/trainChart";
import hiddenDangerChart from "@/views/dashboard-new/treacherous/hiddenDangerChart";
import dealDangerChart from "@/views/dashboard-new/treacherous/dealDangerChart";
import drillChart from "@/views/dashboard-new/treacherous/drillChart";
export default {
name: "treacherous",
data() {
return {
num: 0,
sortRules: "",
sortRulesOptions: [
{ value: "0", label: "按系统" },
{ value: "1", label: "按时间" },
],
};
},
components: {
inspectionChart,
trainChart,
hiddenDangerChart,
dealDangerChart,
drillChart,
},
mixins: [resize],
props: {},
mounted() {
this.sortRules = "0";
},
methods: {
tab(index) {
this.num = index;
},
moreInfo() {
this.$router.push({ path: "/infra/device" });
},
},
};
</script>
<style lang="scss" scoped>
.online-rate {
position: relative;
text-align: center;
//overflow: hidden;
//float: left;
height: 100%;
width: 100%;
.el-header {
height: 14% !important;
width: 100%;
padding: 0 4%;
background: rgba(255, 255, 255, 0.08);
display: flex;
align-items: center;
}
.header-title {
width: 170px;
text-align: left;
font-size: 16px;
font-weight: 400;
color: #ffffff;
float: left;
}
.chart-content {
width: 100%;
height: 86%;
padding: 4%;
.left-part {
width: 30%;
height: 100%;
float: left;
.inspection {
height: 45%;
width: 95%;
margin-bottom: 10%;
}
.train {
height: 45%;
width: 95%;
}
}
.center-part {
width: 40%;
height: 100%;
float: left;
}
.right-part {
width: 30%;
height: 100%;
float: left;
.deal {
height: 45%;
width: 95%;
margin-bottom: 10%;
}
.drill {
height: 45%;
width: 95%;
}
}
}
}
</style>
参考官网例子:
https://www.makeapie.com/editor.html?c=xuyO-o_wd