<template>
    <view class="content">

    </view>
    <view class="tabbar-box-wrap">
        <view class="tabbar-box">


            <view class="tabbar-box-item" @click="scan">
                <image class="box-image" src="@/static/img/tabbar/more/scan.png" mode="aspectFit"></image>
                <text class="explain">扫码</text>
            </view>


        </view>

    </view>
</template>

<script>
    import config from "@/config/ctms.config.js";
    export default {
        data() {
            return {
                active: false
            };
        },
        onLoad() {

        },
        onShow() {
            setTimeout(() => {
                this.active = true;
            }, 500);
        },
        onHide() {
            this.active = false;
        },
        methods: {
            goToPage(url) {
                if (!url) return;
                url = config.pageDir + url;
                uni.navigateTo({
                    url
                });
            },
            tel() {
                uni.makePhoneCall({
                    phoneNumber: config.kfPhone
                })
            },
            scan() {
                console.log('开始扫码')
                uni.scanCode({
                    scanType: ['barCode', 'qrCode'],
                    success(res) {
                        console.log('扫码结果', res);
                    }
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        /* #ifdef H5 */
        height: calc(100vh - var(--window-bottom) - var(--window-top));
        /* #endif */
        /* #ifndef H5 */
        height: 100vh;
        /* #endif */
        transition: opacity 0.3s;

        background-image: url('@/static/logo.png');
        background-size: 30%;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.5;

        &.active {
            opacity: 1;
        }
    }

    /* 创建一个伪元素来覆盖整个元素，并设置透明度 */
    .content::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        /* 设置白色半透明遮罩 */
        z-index: -1;
    }

    .tabbar-box-wrap {
        position: absolute;
        width: 100%;
        padding: 50upx;
        box-sizing: border-box;
        bottom: 0;
        left: 0;

        .tabbar-box {
            position: relative;
            display: flex;
            width: 100%;
            background: #fff;
            border-radius: 20upx;
            padding: 15upx 20upx;
            box-sizing: border-box;
            z-index: 2;
            box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);

            &:after {
                content: '';
                position: absolute;
                bottom: -16upx;
                left: 0;
                right: 0;
                margin: auto;
                width: 50upx;
                height: 50upx;
                transform: rotate(45deg);
                background: #fff;
                z-index: 1;
                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

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

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

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