自定义组件在.nvue中引用怎么样式全乱了

感谢反馈，你提到页面里使用自定义组件样式乱了，提供下 vue 版本和页面源代码？除了华为平台，其他设备也是这样吗，是所有的安卓设备都这样，还是个别设备如此？

你也可以尝试产出页面一半的内容，尝试缩减范围，提供更多信息，有助于定位和解答你的问题。

问题：

①、机型：华为平板MatePad Pro。

②、编辑器版本：4.29。

③、vue版本：vue2。

没有其他设备可供测试，只有这个平板。代码在下面三个：组件页面navigator.vue、引用页面component.nvue、引用页面引入的css页面uni-nvue.css

1、组件页面代码：navigator.vue

<template>  

    <view style="width: 100vh;height: 64px;">  
        <view class="kd-nav-bar" style="width: 100%;">  
            <text class="title">首页</text>  
            <view class="rightBox">  
                <view @click="addData" class="lkmcStyle">  
                    <uni-icons type="settings-filled" size="20"></uni-icons>  
                    <text class="fontSizeAll">{{ lkmc }}</text>  
                </view>  
                <text @click="layOut" class="fontSizeAll">退出</text>  
            </view>  
        </view>  

        <!-- 弹窗 -->  
        <view class="popupBox">  
            <!-- 输入框示例 -->  
            <uni-popup ref="popup" type="center">  
                <view class="dalogBox">  
                    <uni-forms>  
                        <uni-section title="本地数据">  
                            <uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>  
                        </uni-section>  
                    </uni-forms>  
                    <view class="btnBox">  
                        <button @click="closePopup" class="warning">取消</button>  
                        <button @click="submitForm" class="success">确定</button>  
                    </view>  
                </view>  
            </uni-popup>  
        </view>  
    </view>  
</template>  
<script>  
import config from '@/src/config.js'; // 导入配置文件  
export default {  

    data() {  
        return {  
            value: "",  
            range: [],  
            lkmc: '',//显示路口名称  
        }  
    },  
    mounted() {  
        // 获取路口数据  
        this.getLk()  
    },  
    methods: {  

        // 获取路口数据  
        getLk() {  

            // 模拟数据  
            this.range = [  
                {  
                    value:'1',  
                    text:'河北省'  
                },  
                {  
                    value:'2',  
                    text:'山东省'  
                },  
                {  
                    value:'3',  
                    text:'河南省'  
                },  
                {  
                    value:'4',  
                    text:'山西省'  
                },  
            ]  
            this.lkmc = '河北省'  
            this.value = '1'  
        },  

        // 关闭弹窗  
        closePopup() {  
            this.$refs.popup.close();  
        },  
        // 确认弹窗  
        submitForm() {  
            // 将下拉框中的值赋值给lkmc  
            const selectedItem = this.range.find(item => item.value === this.value);  

            if (selectedItem) {  
                this.lkmc = selectedItem.text; // 赋值为下拉框中选中的文本  
                this.value = selectedItem.value; // 赋值为下拉框中选中  

                this.$store.state.wyxlh = selectedItem.value  
            }  
            this.closePopup(); // 关闭弹窗  
        },  
        // 添加弹窗  
        addData() {  
            // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']  
            this.$refs.popup.open('center')  
        },  
        change(e) {  
            console.log("e:", e);  
        },  
        toSecondMenu(e) {  
            const activeTabBar = '/' + e.pagePath  
            for (const item of this.indexPage) {  
                if (activeTabBar === item.tabBar) {  
                    uni.redirectTo({  
                        url: item.index  
                    })  
                }  
            }  
        },  
        layOut() {  
            uni.clearStorage()  
            uni.navigateTo({  
                url: '../../../pages/login/login'  
            })  
        }  
    }  
}  
</script>  
<style>  
.kd-nav-bar {  
    height: 64px;  
    line-height: 64px;  
    background-color: #fff;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    padding: 0 15px;  
    color: #333;  
    border-bottom: 1px solid #e5e5e5;  
    font-size: 16px;  
    /* #ifndef APP-PLUS-NVUE */  
    box-sizing: border-box;  
    /* #endif */  
    position: relative;  
}  

.title {  
    width: 50px;  
    font-weight: bold;  
    /* #ifndef APP-PLUS-NVUE */  
    float: left;  
    /* #endif */  
    font-size: 16px;  
}  

.rightBox {  
    position: absolute;  
    right: 0;  
    top: 0;  
    display: flex;  
    font-size: 16px;  
    flex-direction: row;  
    padding-right: 10px;  
    align-items: center;  
    justify-content: center;  
    color: #000;  
    height: 64px;  
    line-height: 64px;  
}  

.fontSizeAll {  
    font-weight: 300;  
    font-size: 16px;  
}  

.lkmcStyle {  
    display: flex;  
    flex-direction: row;  
    font-size: 16px;  
    width: 200px;  
}  

.success {  
    height: 30px;  
    line-height: 30px;  
    background-color: #67C23A;  
    font-size: 15px;  
    color: #fff;  
    margin: 0 5px;  
    font-weight: normal;  
    padding: 0 10px;  
}  

.warning {  
    height: 30px;  
    line-height: 30px;  
    background-color: #FFBA00;  
    font-size: 15px;  
    color: #fff;  
    margin: 0 5px;  
    font-weight: normal;  
    padding: 0 10px;  
}  

/* 弹窗 */  
.dalogBox {  
    width: 500px;  
    background-color: #fff;  
    padding: 20px;  
    border-radius: 10px;  
    font-size: 16px;  
}  

.selectAll .uni-select__input-text {  
    width: 100rpx !important;  
}  

.btnBox {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    flex-direction: row;  
}  

.popupBox {  
    font-size: 16px;  
}  
</style>

2、引用页面代码：component.nvue

<template>
<view>
<skd-navigator style="width:100%;"></skd-navigator>

</view>  

</template>

<style>
@import '../../../common/uni-nvue.css';
</style>

3、component.nvue页面引用的css样式：uni-nvue.css

/ #ifndef APP-PLUS-NVUE /
page {
min-height: 100%;
height: auto;
}
/ #endif /

.uni-icon {
font-family: uniicons;
font-weight: normal;
}

.uni-container {
padding: 15px;
background-color: #f8f8f8;
}

.uni-header-logo {
display: flex;
padding: 15px 15px;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 10rpx;
}

.uni-header-image {
width: 80px;
height: 80px;
}

.uni-hello-text {
margin-bottom: 20px;
}

.hello-text {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}

.hello-link {
color: #7A7E83;
font-size: 14px;
line-height: 20px;
}

.uni-panel {
margin-bottom: 12px;
}

.uni-panel-h {
display: flex;
background-color: #ffffff;
flex-direction: row !important;
align-items: center !important;
padding: 12px;
cursor: pointer;
}

.uni-panel-h-on {
background-color: #f0f0f0;
}

.uni-panel-text {
flex: 1;
color: #000000;
font-size: 14px;
font-weight: normal;
}

.uni-panel-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
transform: rotate(0deg);
transition-duration: 0s;
transition-property: transform;
}

.uni-panel-icon-on {
transform: rotate(180deg);
}

.uni-navigate-item {
display: flex;
flex-direction: row;
align-items: center;
background-color: #FFFFFF;
border-top-style: solid;
border-top-color: #f0f0f0;
border-top-width: 1px;
padding: 12px;
cursor: pointer;
}

.uni-navigate-item:active {
background-color: #f8f8f8;
}

.uni-navigate-text {
flex: 1;
color: #000000;
font-size: 14px;
font-weight: normal;
}

.uni-navigate-icon {
margin-left: 15px;
color: #999999;
font-size: 14px;
font-weight: normal;
}