<template>
|
<el-tabs
|
style="height: 100%"
|
v-model="activeName"
|
type="card"
|
class="demo-tabs"
|
@tab-click="handleClick"
|
>
|
<el-tab-pane label="行政区划仿真" name="first"
|
><city-sim :clickValue="clickValue" @start="start" @end="end"
|
/></el-tab-pane>
|
<el-tab-pane label="重点区域仿真" name="second" @start="start" @end="end"
|
><city-sim :clickValue="clickValue"
|
/></el-tab-pane>
|
<el-tab-pane label="重点沟仿真" name="third">
|
<kg-sim :clickValue="clickValue" />
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
|
<script setup>
|
import { ref, defineEmits } from "vue";
|
import citySim from "./CitySim.vue";
|
import kgSim from "./KGSim.vue";
|
|
const activeName = ref("first");
|
|
const clickValue = ref("");
|
|
const handleClick = (tab) => {
|
clickValue.value = tab.props.label;
|
console.log(clickValue.value);
|
};
|
const emits = defineEmits(["start", "end"]);
|
|
function start() {
|
emits("start");
|
}
|
function end() {
|
emits("end");
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.demo-tabs > .el-tabs__content {
|
padding: 32px;
|
color: #6b778c;
|
font-size: 32px;
|
font-weight: 600;
|
height: 100%;
|
}
|
/deep/ .el-tabs__item.is-active,
|
/deep/ .el-tabs__item:hover {
|
color: #fff;
|
}
|
/deep/ .el-tabs__item {
|
padding: 0 18px;
|
color: #fff;
|
background-color: #009688;
|
}
|
// /deep/ .el-tabs__content {
|
// background-color: #fff;
|
// }
|
.el-tab-pane {
|
height: 100%;
|
}
|
</style>
|
