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

<template>
    <div class="agri-services" :style="{ height: `calc(100vh - ${tabBarHeight}px - 50px)` }">
        <tabs v-model:active="active" class="tabs">
            <tab title="农事动态">
                <farm-dynamics />
            </tab>
            <tab title="农资农服大厅">
                <services-hall />
            </tab>
        </tabs>
    </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";
import { Tab, Tabs } from "vant";
import servicesHall from "./components/servicesHall.vue";
import farmDynamics from "./components/farmDynamics.vue";

const store = useStore();
const tabBarHeight = computed(() => store.state.home.tabBarHeight);
const active = ref(0);
</script>
<style lang="scss" scoped>
.agri-services {
    width: 100%;
    height: 100vh;
    .tabs {
        ::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;
            }
        }
    }
}
</style>