【报Bug】组件样式失效，小程序显示正常，安卓端失效

示例代码：

<template>  
    <view class="wrap">  

        <view class="fab-box fab" >  
            <view  
                class="fab-circle fab-style"  
                :class="{  
                    left: horizontal === 'left' && direction === 'horizontal',  
                    top: vertical === 'top' && direction === 'vertical',  
                    bottom: vertical === 'bottom' && direction === 'vertical',  
                    right: horizontal === 'right' && direction === 'horizontal'  
                }"  
                @click="open"  
            >  
                <text class="icon icon-arrow-up" :class="{ active: showContent }"></text>  
                <!-- <span class="iconfont">3</span> -->  

            </view>  

            <view  
                class="fab-content"  
                :class="{  
                    left: horizontal === 'left',  
                    right: horizontal === 'right',  
                    flexDirection: direction === 'vertical',  
                    flexDirectionStart: flexDirectionStart,  
                    flexDirectionEnd: flexDirectionEnd,  
                }"  
                :style="{height: boxHeight}"  

                >  
            <view v-if="flexDirectionStart || horizontalLeft" class="fab-item first"></view>  
            <!-- <view  
                class="fab-content"  
                :class="{  
                    left: horizontal === 'left',  
                    right: horizontal === 'right',  
                    flexDirection: direction === 'vertical',  
                    flexDirectionStart: flexDirectionStart,  
                    flexDirectionEnd: flexDirectionEnd  
                }"  
                :style="{ width: boxWidth, height: boxHeight, background: styles.backgroundColor }"  
            >  
            <view v-if="flexDirectionStart || horizontalLeft" class="fab-item first"></view> -->  

            <view  
                class="fab-item"  
                v-for="(item, index) in content"  
                :key="index"  
                :class="{ active: showContent }"  
                :style="{  
                    color: item.active ? styles.selectedColor : styles.color  
                }"  
                @click="taps(index, item)"  
            >  
            <!-- <image  
                class="content-image"  
                :src="item.active ? item.selectedIconPath : item.iconPath"  
                mode=""  
            ></image> -->  

            <text class="text">{{ item.text }}</text>  

            </view>  
                <view v-if="flexDirectionEnd || horizontalRight" class="fab-item first"></view>  
            </view>  

        </view>  
    </view>  
</template>  

<script>  
export default {  
    props: {  
        pattern: {  
            type: Object,  
            default: () => {  
                return {};  
            }  
        },  
        horizontal: {  
            type: String,  
            default: 'left'  
        },  
        vertical: {  
            type: String,  
            default: 'bottom'  
        },  
        direction: {  
            type: String,  
            default: 'horizontal'  
        },  
        content: {  
            type: Array,  
            default: () => {  
                return [];  
            }  
        }  
    },  
    data() {  
        return {  
            fabShow: false,  
            flug: true,  
            showContent: false,  
            styles: {  
                color: '#3c3e49',  
                selectedColor: '#007AFF',  
                backgroundColor: '#fff',  
                buttonColor: '#fff'  
            }  
        };  
    },  
    created() {  
        if (this.top === 0) {  
            this.fabShow = true;  
        }  
        // 初始化样式  
        this.styles = Object.assign({}, this.styles, this.pattern);  
    },  
    methods: {  
        open() {  
            // console.log(1);  

            this.showContent = !this.showContent;  
        },  
        /**  
         * 按钮点击事件  
         */  
        taps(index, item) {  
            // console.log(index,item);  
            // this.$emit('trigger', {index,item});  

            if (item.type === "work") {  
                this.$emit('work', {index,item});  
                this.open();  
            } else if (item.type === "warning") {  
                this.$emit('warn', {index,item});  
                this.open();  
            } else if (item.type === "follow_pie") {  
                this.$emit('follow_pie', {index,item});  
                this.open();  
            } else if (item.type === "personal") {  
                this.$emit('personal', {index,item});  
                this.open();  
            }  
        },  
        /**  
         * 获取 位置信息  
         */  
        getPosition(types, paramA, paramB) {  
            if (types === 0) {  
                return this.horizontal === paramA && this.vertical === paramB;  
            } else if (types === 1) {  
                return this.direction === paramA && this.vertical === paramB;  
            } else if (types === 2) {  
                return this.direction === paramA && this.horizontal === paramB;  
            } else {  
                return this.showContent && this.direction === paramA  
                    ? this.contentWidth  
                    : this.contentWidthMin;  
            }  
        }  
    },  
    watch: {  
        pattern(newValue, oldValue) {  
            console.log(JSON.stringify(newValue));  
            this.styles = Object.assign({}, this.styles, newValue);  
        }  
    },  
    computed: {  
        contentWidth(e) {  
            return uni.upx2px((this.content.length + 1) * 80 + 20) + 'px';  
        },  
        contentWidthMin() {  
            return uni.upx2px(80) + 'px';  
        },  
        // 动态计算宽度  
        boxWidth() {  
            return this.getPosition(3, 'horizontal');  
        },  
        // 动态计算高度  
        boxHeight() {  
            return this.getPosition(3, 'vertical');  
        },  
        // 计算左下位置  
        leftBottom() {  
            return this.getPosition(0, 'left', 'bottom');  
        },  
        // 计算右下位置  
        rightBottom() {  
            return this.getPosition(0, 'right', 'bottom');  
        },  
        // 计算左上位置  
        leftTop() {  
            return this.getPosition(0, 'left', 'top');  
        },  
        rightTop() {  
            return this.getPosition(0, 'right', 'top');  
        },  
        flexDirectionStart() {  
            return this.getPosition(1, 'vertical', 'top');  
        },  
        flexDirectionEnd() {  
            return this.getPosition(1, 'vertical', 'bottom');  
        },  
        horizontalLeft() {  
            return this.getPosition(2, 'horizontal', 'left');  
        },  
        horizontalRight() {  
            return this.getPosition(2, 'horizontal', 'right');  
        }  
    }  
};  
</script>  

<style scoped>  
.fab-box {  
    position: absolute;  
    /* display: flex; */  
    z-index: 99;  
    /* justify-content: flex-end; */  
    right: 2%;  
}  

.fab-box.top {  
    border: solid 1px black;  
    width: 60upx;  
    height: 60upx;  
    right: 30upx;  
    bottom: 60upx;  
    border: 1px #5989b9 solid;  
    /* background: #6699cc; */  
    border-radius: 10upx;  
    color: #fff;  
    transition: all 0.3;  
    opacity: 0;  
}  

.fab-box.active {  
    opacity: 1;  
}  
.fab-box.fab {  
    z-index: 10;  
}  
.fab-box.fab.leftTop {  
    left: 30upx;  
    top: 80upx;  
    /* #ifdef H5 */  
    top: calc(80upx + var(--window-top));  
    /* #endif */  
}  

.fab-box.fab.rightTop {  
    right: 30upx;  
    top: 80upx;  
    /* #ifdef H5 */  
    top: calc(80upx + var(--window-top));  
    /* #endif */  
}  

.fab-circle {  
    /* border: solid 1px rgb(9, 230, 9); */  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    position: absolute;  
    /* width: 110upx; */  
    /* height: 110upx; */  
    width: 80upx;  
    height: 80upx;  
    /* background: #3c3e49; */  
    /* background: #5989b9; */  
    background-color: #fff;  
    border-radius: 50%;  
    /* box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2); */  
    z-index: 11;  
}  

.fab-circle .icon-jia {  
    color: #ffffff;  
    /* border: solid 1px yellow; */  
    font-size: 50upx;  
    transition: all 0.3s;  
}  
.fab-circle .icon-arrow-up {  
    color: orange;  
    /* border: solid 1px yellow; */  
    /* background-color: rgb(168, 168, 168); */  
    font-size: 40upx;  
    transform: rotate(180deg);  
    transition: all 0.3s;  
}  

.fab-circle .icon-jia.active {  
    transform: rotate(135deg);  
}  
.fab-circle .icon-arrow-up.active {  
    transform: rotate(0deg);  
}  

.fab-content {  
    /* border: solid 1px rgb(241, 12, 211); */  
    /* background: #6699cc; */  
    box-sizing: border-box;  
    display: flex;  
    /* border-radius: 100upx; */  
    border-radius: 60upx;  
    overflow: hidden;  
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1);  
    transition: all 0.2s;  
    width: 80upx;  
    background-color: rgba(255, 255, 255, 0);     
}  

.fab-content.left {  
    justify-content: flex-start;  
}  

.fab-content.right {  
    justify-content: flex-end;  
}  

.fab-content.flexDirection {  
    flex-direction: column;  
    justify-content: flex-end;  
}  

.fab-content.flexDirectionStart {  
    flex-direction: column;  
    justify-content: flex-start;  
}  

.fab-content.flexDirectionEnd {  
    flex-direction: column;  
    justify-content: flex-end;  
}  

.fab-content .fab-item {  
    /* border: solid 1px blue; */  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  
    /* width: 110upx; */  
    /* height: 110upx; */  
    width: 80upx;  
    height: 80upx;  
    font-size: 24upx;  
    color: #fff;  
    opacity: 0;  
    transition: opacity 0.2s;  
}  

.fab-content .fab-item.active {  
    opacity: 1;          /* 文字 */  
    background-color: rgba(255, 255, 255, 1);         
}  

.fab-content .fab-item .content-image {  
    border: solid 1px red;  
    width: 50upx;  
    height: 50upx;  
    margin-bottom: 5upx;  
}  

.fab-content .fab-item.first {  
    width: 110upx;  
}  

@font-face {  
    font-family: 'iconfont';  
    src: url('https://at.alicdn.com/t/font_1028200_xhbo4rn58rp.ttf?t=1548214263520')  
    format('truetype');  
}  

.icon {  
    font-family: 'iconfont' !important;  
    font-size: 16px;  
    font-style: normal;  
    -webkit-font-smoothing: antialiased;  
    -moz-osx-font-smoothing: grayscale;  
}  

.icon-jia:before {  
    content: '\e630';  
}  

.icon-arrow-up:before {  
    content: '\e603';  
}  
.fab-style {  
    background-color: rgba(236, 10, 10, 0);  
}  
</style>  

操作步骤：

<uni-fab class="billboard-header-right"  
                        :pattern="pattern"  
                        :content="content"  
                        :horizontal="horizontal"  
                        :vertical="vertical"  
                        :direction="direction"  
                        @trigger="trigger"  
                        @fab="fabTextFn"  
                        @warn="warnFn"  
                >  
                </uni-fab>  

js:

import uniFab from '../../components/uni-fab/uni-fab.vue';  

components: {  
        uniFab,  
    },  

data() {  
        return {  

            content: [{  
    "id": 1,  
    "name": "一周",  
    "type": "work",  
    "text": "一周",  
    "active": false  
}, {  
    "id": 2,  
    "name": "一月",  
    "type": "work",  
    "text": "一月",  
    "active": false  
}, {  
    "id": 3,  
    "name": "三月",  
    "type": "work",  
    "text": "三月",  
    "active": false  
}, {  
    "id": 4,  
    "name": "半年",  
    "type": "work",  
    "text": "半年",  
    "active": false  
}, {  
    "id": 5,  
    "name": "一年",  
    "type": "work",  
    "text": "一年",  
    "active": false  
}]  
        };  
    },

预期结果：

1

实际结果：

2