xx-worker-applets/src/App.vue

<script>
export default {
    globalData: {
        pageConfig: {},
    },
    onLaunch: async function () {
        let pageConfig = this.$storage.get("system_config");
        if (pageConfig) {
            const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
            // #ifndef H5
            const { height, top } = uni.getMenuButtonBoundingClientRect();
            const headerHeight = height + (top - statusBarHeight) * 2;
            // #endif
            // #ifdef H5
            const headerHeight = 40; // 乘2再使用rpx2px转px使用
            // #endif
            pageConfig = { windowWidth, windowHeight, statusBarHeight, headerHeight, safeAreaInsets };
            this.$storage.set("system_config", pageConfig);
        }
        this.globalData.pageConfig = pageConfig;
        // 初始化用户
        this.$models.user.initUser();
    },
    onShow: function () {},
    onHide: function () {},
};
</script>

<style lang="less">
.limit-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-1 {
    -webkit-line-clamp: 1;
}
.clamp-2 {
    -webkit-line-clamp: 2;
}
.clamp-3 {
    -webkit-line-clamp: 3;
}
.clamp-4 {
    -webkit-line-clamp: 4;
}
.clamp-5 {
    -webkit-line-clamp: 5;
}
/* #ifdef H5 */
// 自定义tabBar大小
.uni-tabbar {
    .uni-tabbar__bd {
        height: @tabBarHeight !important;
        .uni-tabbar__icon {
            width: @tabBarIconWidth !important;
            height: @tabBarIconHeight !important;
        }
        .uni-tabbar__label {
            font-size: @tabBarFontSize !important;
        }
    }
}
/* #endif */
// 通用样式
.placeholder-style-1 {
    color: #bebebe;
}
.placeholder-style-2 {
    color: #909090;
}
.placeholder-style-3 {
    color: #c9c9c9;
}
.placeholder-style-4 {
    color: #999999;
}
.placeholder-style-5 {
    color: #666666;
}
// 沉浸样式
.immerse-image {
    position: absolute;
    top: 0;
    width: 100%;
    line-height: 0;
    .image {
        width: 100%;
        height: 590rpx;
    }
}
.immerse-main {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    .head-title {
        width: 100%;
        text-align: center;
        padding: 30rpx 0 40rpx 0;
        .title {
            font-size: 56rpx;
            font-weight: bold;
            font-style: italic;
            color: #ffffff;
            line-height: 56rpx;
        }
        .color {
            color: #ffce25;
        }
        .desc {
            display: block;
            font-size: 24rpx;
            font-weight: bold;
            color: #ffffff;
            line-height: 24rpx;
            margin-top: 42rpx;
        }
    }
}
// 点击表单
.common-form-widget-group {
    width: 100%;
    box-sizing: border-box;
    .widget-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 36rpx 0;
        box-sizing: border-box;
        line-height: 30rpx;
        border-bottom: 2rpx solid #efefef;
        .title {
            position: relative;
            font-size: 30rpx;
            color: #2d2d2d;
        }
        .iconfont {
            font-size: 30rpx;
            color: #666666;
        }
    }
    .widget-item:last-child {
        border-bottom: 0;
    }
}
.common-save-form-btn {
    width: 100%;
    padding: 60rpx 0;
    .btn {
        width: 570rpx;
        height: 98rpx;
        background: #8b9beb;
        border-radius: 49rpx;
        margin: 0 auto;
        font-size: 36rpx;
        text-align: center;
        line-height: 98rpx;
        color: #ffffff;
    }
}
// 底部固定按钮
.common-bottom-components {
    z-index: 20;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 750px;
    width: 100%;
    height: 100rpx;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
}

// 输入表单
.common-form-container {
    width: 710rpx;
    background-color: #fff;
    margin: 20rpx auto 0 auto;
    .input-item {
        width: 100%;
        box-sizing: border-box;
        height: 105rpx;
        border-bottom: 2rpx solid #e8e7e7;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        line-height: 30rpx;
        // input
        .input-box {
            width: 500rpx;
            position: relative;
            padding: 25rpx 0;
        }
        .input {
            font-size: 28rpx;
        }
        .title-box {
            width: 150rpx;
            font-size: 30rpx;
            font-weight: bold;
            line-height: 30rpx;
            color: #2d2d2d;
        }
        .desc {
            font-size: 28rpx;
            color: #999999;
        }
    }
}
</style>