72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div class="percentage-content">
|
||
|
|
<el-radio-group class="rg" v-model="tabIndex">
|
||
|
|
<template v-for="item in tabs" :key="item.val">
|
||
|
|
<el-radio-button :label="item.val">{{ item.name }}</el-radio-button>
|
||
|
|
</template>
|
||
|
|
</el-radio-group>
|
||
|
|
<div class="content">
|
||
|
|
<transition name="main" mode="out-in" appear>
|
||
|
|
<component :is="tabs[tabIndex].compon" />
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang='ts' setup>
|
||
|
|
import { onMounted, reactive, ref } from "vue";
|
||
|
|
import { ElMessageBox } from "element-plus";
|
||
|
|
import CG from "./components/cg.vue";
|
||
|
|
import DB from "./components/db.vue";
|
||
|
|
import YJ from "./components/yj.vue";
|
||
|
|
import TJ from "./components/tj.vue";
|
||
|
|
|
||
|
|
const tabIndex = ref(0);
|
||
|
|
const tabs = ref([
|
||
|
|
{ name: "常规工作", val: 0, compon: CG },
|
||
|
|
{ name: "督办工作", val: 1, compon: DB },
|
||
|
|
{ name: "应急事件", val: 2, compon: YJ },
|
||
|
|
{ name: "调解工作", val: 3, compon: TJ },
|
||
|
|
]);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.percentage-content {
|
||
|
|
height: auto;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.rg {
|
||
|
|
padding: 16px;
|
||
|
|
background: #ffffff;
|
||
|
|
box-shadow: 0px 0px 6px rgba(0, 120, 255, 0.1);
|
||
|
|
border-radius: 6px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
|
||
|
|
:deep(.el-radio-button__inner) {
|
||
|
|
min-width: 150px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 0.26042vw;
|
||
|
|
box-shadow: 0 0 0.41667vw 0 rgba(8, 33, 85, 0.1);
|
||
|
|
padding: 0.83333vw;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden !important;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-o-box-sizing: border-box;
|
||
|
|
-ms-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
.table {
|
||
|
|
margin-top: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|