feiniao-farm-h5/src/views/old_mini/offer_price/index.vue

<template>
    <div class="agri-services">
        <custom-header name="报价维护"></custom-header>
        <tabs v-model:active="active" class="tabs">
            <tab title="药肥报价">
                <fertilizer-price />
            </tab>
            <tab title="服务报价">
                <service-price />
            </tab>
        </tabs>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Tab, Tabs } from "vant";
import fertilizerPrice from "./component/fertilizerPrice.vue";
import servicePrice from "./component/servicePrice.vue";
import customHeader from "@/components/customHeader.vue";
const active = ref(0);

</script>
<style lang="scss" scoped>
.agri-services {
    width: 100%;
    height: 100vh;
    .farm-dynamics-container {
        ::v-deep{
            .task-content{
                height: calc(100% - 80px);
            }
        }
    }
    .tabs {
        height: calc(100% - 40px);
        ::v-deep {
            .van-tabs__wrap {
                margin-bottom: 8px;
            }
            .van-tabs__line {
                width: 24px;
                height: 4px;
            }
            .van-tab {
                width: 100px;
                flex: none;
            }
            .van-tabs__nav {
                justify-content: center;
            }
            .van-tabs__content {
                overflow: auto;
                height: calc(100% - 44px);
                background: #F5F7FB;
            }
        }
    }
}
</style>