easydo-zcgx-web/src/views/myBusiness/index.vue

<template>
    <div v-if="detail.show" class="mine-policy-detail">
        <el-page-header title="返回" icon="arrow-left" :content="detail.name" @back="detail.show = false"></el-page-header>
        <policy-detail ref="policyDetail"></policy-detail>
    </div>

    <template v-else>
        <el-tabs v-model="element">
            <el-tab-pane v-for="(label, key) in myBusinessTab" :key="key" :label="label" :name="key"></el-tab-pane>
        </el-tabs>

        <component :is="allComps[element]" @replyAll="table_detail"></component>
    </template>
</template>

<script>
import { myBusinessTab } from "@/views/myBusiness/main";
import allComps from "@/views/myBusiness/component/index";
import policyDetail from "@/views/home/policyDetail.vue";

export default {
    components: {
        policyDetail
    },

    data() {
        return {
            allComps,
            myBusinessTab,

            element: "toDo",

            detail: {
                show: false,
                name: null
            }
        }
    },

    methods: {
        table_detail(row) {
            this.detail.show = true;
            this.detail.name = row.name;
            nextTick(() => this.$refs.policyDetail.setData(row, 5));
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-policy-detail {
  .el-page-header {
    position: relative;
    top: calc(-1 * $base-padding);
    left: calc(-1 * $base-padding);
    width: calc(100% - $base-padding);
    padding: 15px;
    background: #fff;
    box-shadow: var(--el-box-shadow-light);

    :deep(.el-page-header__back:hover) {
      color: var(--el-color-primary);
    }
  }

  :deep(.tjm_card_style_custom) > .el-card__body {
    max-height: calc(
      $base-main-height - $base-padding - 2 * var(--el-card-padding) - 54px
    );
    overflow: auto;
  }
}

.el-tabs :deep(.el-tabs__content) {
  display: none;
}
</style>