water_affairs/pages/facility/modules/tabs.vue

<template>
    <view v-if="tabs.length" class="tabs-box">
        <u-tabs :list="tabs" @change="onChangeTab" lineColor="#052E5D"
            :activeStyle="{ color: '#052E5D', fontWeight: 'bold' }" :inactiveStyle="{
                color: '#BBBBBB', fontWeight: 'bold'
            }" lineWidth="56" />
    </view>
</template>

<script>
export default {
    name: "tabs",
    props: {
        tabs: Array,
        current: {
            type: Number || String,
            default: 0
        },
        changeTab: Function
    },
    data() {
        return {

        }
    },
    methods: {
        onChangeTab(e) {
            this.$emit("changeTab", e)
        }
    }

}
</script>

<style lang="scss" scoped>
.tabs-box {
    width: 355px;
    height: 45px;
    border-radius: 4px;
    background: #fff;
    margin: 15px auto 0;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

/deep/ .uni-scroll-view,
/deep/.u-tabs__wrapper__nav__item {
    height: 45px !important;
}

/deep/ .u-tabs__wrapper__nav__item__text {
    font-size: 14px !important;
}

/* /deep/ .u-tabs__wrapper__nav__line{
    bottom: 0 !important;
} */
</style>