water_affairs/components/bottomTabControl.vue

<template>
    <u-overlay :show="active" @click="active = false">
        <view class="tabbar-box-wrap">
            <view class="tabbar-box">
                <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release')">
                    <image class="box-image" src="../static/img/logo.png" mode="aspectFit"></image>
                    <text class="explain">发图文</text>
                </view>
                <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-video/tabbar-3-video')">
                    <image class="box-image" src="../static/img/logo.png" mode="aspectFit"></image>
                    <text class="explain">发视频</text>
                </view>
                <view class="tabbar-box-item" @click="goToPage('/pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa')">
                    <image class="box-image" src="../static/img/logo.png" mode="aspectFit"></image>
                    <text class="explain">提问</text>
                </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;
        display: flex;
        width: 100%;
        background: #fff;
        border-radius: 2.667vw;
        padding: 2.000vw 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;
        }

        .tabbar-box-item {
            // position: relative;
            width: 100%;
            z-index: 3;
            margin: 1.333vw;
            color: $uni-color-subtitle;
            text-align: center;
            font-size: $uni-font-size-base;

            .box-image {
                width: 100%;
                height: $uni-img-size-lg;
            }
        }
    }
}
</style>>