water_affairs/pages/index/modules/bottomTabControl.vue

<template>
    <u-overlay :show="active" @click="active = false">
        <view class="tabbar-box-wrap">
            <view class="tabbar-box">
                <view class="item">
                    <navigator url="/packageA/signIn/index" class="nav">
                        <view class="icon">
                            <text class="iconfont icon-a-wodemendianxinxidizhi" />
                        </view>
                        签到
                    </navigator>
                </view>
            </view>
        </view>

    </u-overlay>
</template>

<script>
export default {
    name: "TabControl",
    props: {},
    data() {
        return {
            active: false
        }
    },
}
</script>

<style lang="scss" scoped>
.tabbar-box-wrap {
    position: absolute;
    width: 100%;
    padding: 6.667vw;
    box-sizing: border-box;
    bottom: calc(13.867vw + env(safe-area-inset-bottom) / 2);
    left: 0;

    .tabbar-box {
        position: relative;
        padding: 2.000vw 2.667vw;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        background: #fff;
        border-radius: 2.667vw;
        box-sizing: border-box;
        z-index: 2;
        box-shadow: 0.000vw 0.533vw 1.333vw 0.533vw rgba(0, 0, 0, 0.1);

        &:after {
            content: '';
            position: absolute;
            bottom: -2.133vw;
            left: 0;
            right: 0;
            margin: auto;
            width: 6.667vw;
            height: 6.667vw;
            transform: rotate(45deg);
            background: #fff;
            z-index: 1;
            box-shadow: 0.533vw 0.533vw 1.333vw 0.267vw rgba(0, 0, 0, 0.1);
            border-radius: 0.533vw;
        }

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #ffffff;
            border-radius: 2.667vw;
            z-index: 2;
        }

        .item {
            width: 33.33%;

            .nav {
                position: relative;
                z-index: 3;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                padding: 6px;
                border-radius: 4px;

                .icon {
                    width: 44px;
                    height: 44px;
                    text-align: center;
                    line-height: 44px;
                    background: #3874F6;
                    border-radius: 4px;
                    margin-bottom: 6px;

                    .iconfont {
                        color: #fff;
                        font-size: 24px;
                    }
                }
            }


        }
    }
}
</style>>