EnforcementCode-2.0/zdxt-web-client/zdxt-enforcement-code-app/fordelete/views/enterprise/enterpriseInspectionNotice.vue

<template>
    <div class="home app_content">
        <!-- 中间 -->
        <!--        <div class="warp_body">-->
        <!--            <div class="white-body">-->
        <!--                <div class="tabs">-->
        <!--                    <ul>-->
        <!--                        <li v-for='(item,index) in data.list' @click='check(index)'-->
        <!--                            :class="{ active: index === data.TabId }">-->
        <!--                            <span v-if="index === 0"> {{item.title}}</span>-->
        <!--                            <span v-else-if="index === 1" class="warn-tab"> {{item.title}}</span>-->
        <!--                        </li>-->
        <!--                    </ul>-->
        <!--                </div>-->
        <!--                <div v-if="data.TabId == 0">-->
        <!--                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>-->
        <!--                </div>-->
        <!--                <div v-if="data.TabId == 1">-->
        <!--                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->

        <van-tabs v-model:active="active" sticky @click-tab="onClickTab">
            <van-tab v-for="(item, index) in data.list" :title="item.title">
                <div v-if="data.TabId == 0" style="height: calc(100vh - 1.2rem);">
                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>
                </div>
                <div v-if="data.TabId == 1" style="height: calc(100vh - 1.2rem);">
                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>
                </div>
            </van-tab>
        </van-tabs>

        <!-- 底部 -->
<!--        <div class="shop_footer_body">
            <footer-nav></footer-nav>
        </div>-->
    </div>
</template>

<script setup name="Home">
    import enterpriseInspectionList from './enterpriseInspectionList.vue'
    import {Tab, Tabs} from 'vant';

    const {useCommon} = $globalStore;
    //tab切换参数
    const active = ref(0);
    //路由参数
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
        status: 0,
        TabId: 0,
        list: [
            {
                title: '执法预告',
                value: '0'
            },
            {
                title: '历史执法预告',
                value: '1'
            },
        ],
    });

    const check = (e) => {
        console.log("点击切换tab",e);
        data.TabId = index;
    };
    const onClickTab = ({ title }) => {
      if(title == "执法预告"){
        data.TabId = 0;
      }else{
        data.TabId = 1;
      }
    }


    onMounted(() => {

    })

</script>

<style lang="less" scoped>
    .home {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;

        .warp_body {
            position: relative;
            background-image: linear-gradient(to bottom, #ebf3fb, transparent);
        }

        .white-body {
            margin: 0 3%;
            width: 94%;
            height: 99%;
            background-color: #fff;
            border-radius: 0.27rem;
        }

      .shop_footer_body {
        //height: 101px;
        position: relative;
      }
    }

    .tohome {
        position: absolute;
        top: 1.25%;
        right: 5%;
        font-size: 0.5rem;
    }

    .tabs {
        padding: 3% 3% 0;
        width: 94%;
        height: 1.25rem;
        box-sizing: content-box;
    }

    .tabs ul {
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 0.4rem;
        line-height: 1.25rem;
        text-align: center;
        align-content: center;
        justify-items: center;
    }

    .tabs ul li {
        float: left;
        width: 50%;
        height: 100%;
    }

    .tabs ul li span {
        display: block;
        width: 100%;
        height: 100%;
        color: #4aa1f9;
        background: url("src/assets/images/tab_bg1_1.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span {
        background: url("src/assets/images/tab_bg1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.warn-tab {
        margin-left: -2%;
        background: url("src/assets/images/tab_bg.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span.warn-tab {
        background: url("src/assets/images/tab_bg_1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.level1 {
        background: url("src/assets/images/tab_shine_red.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level2 {
        background: url("src/assets/images/tab_shine_org.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level3 {
        background: url("src/assets/images/tab_shine_yel.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .addinfo {
        position: absolute;
        bottom: 3%;
        right: 2%;
        z-index: 99999;
        width: 1.5rem;
        height: 1.5rem;
        background-color: #1367fe;
        border-radius: 50%;
        box-shadow: 0 0 0.27rem #1367fe;
        color: #fff;
        font-size: 0.4rem;
        text-align: center;
        vertical-align: middle;
        padding-top: 0.45rem;
        box-sizing: border-box;
    }

    /deep/ .van-tabs__line {
      width: 44%;
      height: 0.06rem;
    }

</style>