2***@qq.com
2***@qq.com
  • 发布:2024-12-26 10:49
  • 更新:2024-12-26 10:58
  • 阅读:34

HbuilderX4.36 为啥自定义基座的时候样式是正常的,云打包以后样式错乱了

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 24H2

HBuilderX类型: 正式

HBuilderX版本号: 4.36

手机系统: Android

手机系统版本号: Android 14

手机厂商: 华为

手机机型: 一加

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="dog_box">
<view class="dog_nav">
<view class="nav_title">
巡回检测
</view>
<view class="nav_opt">
<button class="nav_opt_btn">设置</button>
</view>
</view>
<view class="dog_container">
<view class="aside_left">
<view class="content">
<button class="aside_left_btn" v-for="(item, index) in contentLeftData" :key="index" :class="{
'item_active': index === currentIndex,
'item_disabled': !clickableStates[index]
}" @click="clickableStates[index] ? divClick(index) : null">{{item.name}}</button>
</view>
</view>
<view class="main">
<view class="cadImage">
<view class="title">平面图</view>
<!-- <view class="image">
</view> -->
<image src="./cad.png" class="image" />
</view>
<view class="cadBtn">
<view class="content">
<view style="margin-left: 11.72rpx;"> 电量:10% </view>
<view style="margin-left: 23.44rpx;"> 状态:正在移动</view>
</view>
</view>
</view>
<view class="aside_right">
<view class="content">
<view class="top">
<view class="title">
采集图像参照
</view>
<image src="./cad.png" class="image" />
<view> </view>
</view>
<view class="btn">
<view class="title">
采集图像一览
</view>
<view class="table">
<uni-table ref="table" emptyText="暂无更多数据">
<uni-tr>
<uni-th width="150" align="center">名字</uni-th>
<uni-th align="center">地点</uni-th>
<uni-th width="204" align="center">时间</uni-th>
</uni-tr>
<uni-tr v-for="(item, index) in tableData" :key="index">
<uni-td>{{ item.name }}</uni-td>
<uni-td>
<view class="name">{{ item.address }}</view>
</uni-td>
<uni-td align="center">{{ item.date }}</uni-td>
</uni-tr>
</uni-table>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello',
// 左侧全部按钮
contentLeftData: [{
name: "向目的地移动"
}, // 0
{
name: "暂停移动"
}, // 1
{
name: "继续移动"
}, // 2
{
name: "拍摄照片"
}, // 3
{
name: "执行动作 : 打招呼"
}, // 4
{
name: "执行动作 : 坐下"
}, // 5
{
name: "执行动作 : 坐下恢复"
}, // 6
{
name: "执行动作 : 伸懒腰"
}, // 7
{
name: "执行动作 : 跳舞1"
}, // 8
{
name: "执行动作 : 跳舞2"
}, // 9
{
name: "播放声音 : 播放音乐1"
}, // 10
{
name: "播放声音 : 播放音乐2"
}, // 11
{
name: "播放声音 : 播放音乐3"
}, // 12
{
name: "恢复按钮"
}, // 13
],

            clickableStates: [  
                true, //  向目的地移动  
                false, //  暂停移动  
                false, //  继续移动  
                true, //  拍摄照片   
                true, //  执行动作 : 打招呼  
                true, //  执行动作 : 坐下  
                true, //  执行动作 : 坐下恢复  
                true, //  执行动作 : 伸懒腰    
                true, //  执行动作 : 跳舞1  
                true, //  执行动作 : 跳舞2  
                true, //  播放声音 : 播放音乐1  
                true, //  播放声音 : 播放音乐2  
                true, //  播放声音 : 播放音乐3  
                true, //  恢复按钮  
            ],  

            // 右侧数据  
            dataScore: [],  

            dog_target_node: 1, //起点  

            currentIndex: -1,  
            tableData: [{  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            },{  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            },{  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }, {  
                "date": "2020-09-01",  
                "name": "Dcloud1",  
                "address": "①"  
            }]  
        }  
    },  
    onLoad() {  

    },  
    methods: {  
        divClick(index) {  
            //let that = this;  
            this.currentIndex = index;  

            // 点击左侧按钮--'向目的地移动'  
            if (index === 0) {  
                this.execute_navigation(index)  
                // 点击左侧按钮--'暂停移动'  
            } else if (index === 1) {  
                this.execute_pausenavigation(index)  
                // 点击左侧按钮--'继续移动'  
            } else if (index === 2) {  
                this.execute_recovernavigation(index)  
                // 点击左侧按钮--'拍摄照片'  
            } else if (index === 3) {  
                this.execute_photos()  

                // 点击左侧按钮--'执行动作 : 打招呼'  
            } else if (index === 4) {  
                //判断机器狗运动状态  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_say_hello,  
                //  message: "say_hello",  
                // };  
                let data = {}  
                this.execute_action(index, data);  

                // 点击左侧按钮--'执行动作 : 坐下'  
            } else if (index === 5) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_sit_down,  
                //  message: "sit_down",  
                // };  
                let data = {}  
                this.execute_action(index, data);  

                // 点击左侧按钮--'执行动作 : 坐下恢复'  
            } else if (index === 6) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_sit_up,  
                //  message: "sit_up",  
                // };  
                let data = {}  
                this.execute_action(index, data);  

                // 点击左侧按钮--'执行动作 : 伸懒腰'  
            } else if (index === 7) {  

                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_stretch_legs,  
                //  message: "stretch_legs",  
                // };  
                let data = {}  
                this.execute_action(index, data);  

                // 点击左侧按钮--'执行动作 : 跳舞1'  
            } else if (index === 8) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_dance1,  
                //  message: "dance1",  
                // };  
                let data = {}  
                this.execute_action(index, data);  

                // 点击左侧按钮--'执行动作 : 跳舞2'  
            } else if (index === 9) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_dance2,  
                //  message: "dance2",  
                // };  
                let data = {}  
                this.execute_action(index, data);  
                // 点击左侧按钮--'播放音乐1 :   
            } else if (index === 10) {  
                // if (this.isPlaying) {  
                //  this.$refs.audioPlayer.pause();  
                // } else {  
                //  if (this.isStartPlaying) {  
                //      this.$refs.audioPlayer.play();  
                //  } else { //开始播放  
                //      let data = {  
                //          target_node: this.dog_target_node,  
                //          sport_index: this.sport_index_play_music1,  
                //          message: "play_music1",  
                //      };  
                //      this.execute_play_music(index, data);  
                //      this.isStartPlaying = true;  
                //  }  
                // }  
                // this.isPlaying = !this.isPlaying;  
                // 点击左侧按钮--'播放音乐2 :   
            } else if (index === 11) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_play_music2,  
                //  message: "play_music2",  
                // };  
                // this.execute_play_music(index, data)  
                // 点击左侧按钮--'播放音乐3 :   
            } else if (index === 12) {  
                // let data = {  
                //  target_node: this.dog_target_node,  
                //  sport_index: this.sport_index_play_music3,  
                //  message: "play_music3",  
                // };  
                // this.execute_play_music(index, data)  
            }  
            // 恢复按钮1 : 初始化所有按钮的制御状态  
            else if (index === 13) {  
                this.enabledAction()  
            };  
        },  
        // 开始执行导航任务  
        execute_navigation(index) {  
            // 导航按钮制御  
            this.disabledNavigation(index);  
            // 开始刷新狗的位置  
            this.get_dog_position_start();  
        },  
        // 暂停导航任务  
        execute_pausenavigation(index) {  

            // 导航按钮制御  
            this.disabledNavigation(index);  
            // 暂停刷新狗的位置  
            this.get_dog_position_stop();  
        },  
        // 恢复/继续 导航任务  
        execute_recovernavigation(index) {  
            // 导航按钮制御  
            this.disabledNavigation(index);  
            // 开始刷新狗的位置  
            this.get_dog_position_start();  
        },  
        // 机器狗-导航-按钮制御  
        disabledNavigation(index) {  
            // index : 0  向目的地移动  
            // index : 1  暂停移动  
            // index : 2  继续移动  
            // 按下-向目的地移动-按钮后, 禁用除了-暂停-按钮之外的所有按钮  
            // 按下-暂停-按钮后, 禁用除了-继续-按钮之外的所有按钮  
            // 按下-继续-按钮后, 禁用除了-暂停-按钮之外的所有按钮  
            //   -向目的地移动-按钮,按下后disabled, 在机器狗状态返回待命后, 解除disabled  

            // 禁用动作按钮   
            for (let idx = 0; idx < this.clickableStates.length; idx++) {  
                this.clickableStates[idx] = false;  
                if (index == 0 || index == 1) {  
                    if (idx == (index + 1)) {  
                        this.clickableStates[idx] = true;  
                    }  
                } else if (index == 2) {  
                    if (idx == (index - 1)) {  
                        this.clickableStates[idx] = true;  
                    }  
                }  
                // 因为API侧没有实现, 这里暂时保留一个-恢复-按钮  
                // API侧实装后, 这里可以删除  
                if (idx == (this.clickableStates.length - 1)) {  
                    this.clickableStates[idx] = true;  
                }  
            };  
        },  
        // 执行左侧列表里面的一系列任务  
        execute_action(index, data) {  
            //this.disabledAction(index)  
        },  
        // 机器狗-按钮恢复  
        enabledAction() {  
            // 启用动作按钮  
            for (let idx = 0; idx < this.clickableStates.length; idx++) {  
                this.clickableStates[idx] = true;  
                if (idx == 2 || idx == 1) {  
                    this.clickableStates[idx] = false;  
                }  
            }  
        },  
        // 执行拍照任务  
        execute_photos() {  
            // let data = {  
            //   target_node: this.dog_target_node,  
            // };  
            // Message.success("photo start");  
            // POST("/go2-patrol/v1/photos", data).then((success) => {  
            //   console.log(success, "开始执行拍照动作");  
            //   if (success.code == 200) {  
            //     console.log(success, "拍照动作执行完毕");  
            //     Message.success("拍照成功");  
            //     this.get_photo_list(this.dog_target_node)  
            //   } else {  
            //     Message.error("拍照失败");  
            //   }  
            // });  
            this.currentIndex = -1;  
        },  
        get_dog_position_start() {  
            // 定时更新方法2 : 对应机器狗位置显示  
            // 只有在点击了[移动]按钮之后才能才开始不停刷新, 所以设置了开关   
            // if (!this.interval2) {  
            //  // 如果定时器尚未启动,则启动定时器  
            //  this.interval2 = setInterval(this.refreshDogPosition, 5000); // 5秒更新一次  
            //  this.interval3 = setInterval(this.getNavigationStatus, 5000); // 5秒更新一次  
            // }  
        },  
        get_dog_position_stop() {  
            // 清除-狗导航位置-定时器  
            // clearInterval(this.interval2);  
            // this.interval2 = null; // 重置-狗导航位置-定时器ID  

            // // 清除-狗导航状态-定时器  
            // clearInterval(this.interval3);  
            // this.interval3 = null; // 重置-狗导航状态-定时器ID  
        },  
    }  
}  

</script>

<style lang="scss">
.dog_box {
box-sizing: border-box;
height: 100vh;
width: 750rpx;
background: $dog_bg;
overflow: hidden;

    .dog_nav {  
        background: $dog-nav-bg;  
        box-sizing: border-box;  
        height: 40rpx;  
        width: 100%;  
        display: flex;  
        justify-content: space-between;  
        text-align: center;  
        align-items: center;  
        padding: 0px $dog-padding;  

        .nav_title {  
            color: white;  
            font-size: 13.67rpx;  
        }  

        .nav_opt {  
            .nav_opt_btn {  
                background: $dog-btn;  
                color: white;  
                font-size: 7.81rpx;  
                width: 61rpx;  
                height: 20rpx;  
                line-height: 20rpx;  
            }  
        }  
    }  

    .dog_container {  
        width: 100%;  
        height: calc(100vh - 40rpx);  
        display: flex;  

        .aside_left {  
            flex: 2;  
            background: white;  
            height: 100%;  
            overflow: hidden auto;  

            .content {  
                .aside_left_btn {  
                    background: $dog-btn;  
                    color: white;  
                    font-size: $dog-font;  
                    width: 90%;  
                    height: 31.25rpx;  
                    line-height: 31.25rpx;  
                    margin-top: 5.86rpx;  
                }  

                .item_active {  
                    background: $dog-btn;  
                }  

                .item_disabled {  
                    background: $dog-btn-disabled;  
                }  
            }  
        }  

        .main {  
            width: 429.69rpx;  
            height: 100%;  
            margin: 0 11.72rpx;  
            box-sizing: border-box;  
            overflow: hidden auto;  
            display: flex;  
            flex-direction: column;  

            .cadImage {  
                // margin: $dog-margin;  
                width: 100%;  
                height: 257.81rpx;  
                background: white;  
                padding: 11.72rpx;  
                box-sizing: border-box;  
                margin: 11.72rpx 0px;  
                border-radius: 5px;  
                display: flex;  
                flex-direction: column;  

                .title{  
                    font-size: 11.72rpx;  
                    font-weight: bold;  
                }  

                .image {  
                    width: 390.63rpx;  
                    height: 234.38rpx;  
                    margin: auto;  
                }  
            }  

            .cadBtn {  
                flex: 1;  
                display: flex;  
                flex-direction: column-reverse;  

                .content {  
                    width: 100%;  
                    height: 23.44rpx;  
                    background: white;  
                    display: flex;  
                    align-items: center;  
                    border-radius: 5px;  
                    margin-bottom: 10px;  
                }  
            }  
        }  

        .aside_right {  
            flex: 3;  
            background: white;  
            box-sizing: border-box;  
            padding: $dog-padding;  
            height: 100%;  
            overflow: hidden auto;  

            .content {  
                display: flex;  
                flex-direction: column;  
                height: 100%;  
                .top {  
                    flex: 2;  
                    display: flex;  
                    flex-direction: column;  
                    .title {  
                        font-size: 11.72rpx;  
                        font-weight: bold;  
                        margin-bottom: 20px;  
                    }  

                    .image {  
                        margin: auto;  
                        width: 117.19rpx;  
                        height: 78.13rpx;  
                        // aspect-ratio: 2 / 1;  
                    }  
                }  

                .btn {  
                    flex: 3;  
                    margin-top: $dog-margin;  

                    .title {  
                        font-size: 11.72rpx;  
                        font-weight: bold;  
                        margin-bottom: 7.81rpx;  
                    }  

                    .table {}  
                }  
            }  
        }  
    }  
}  

.aside_left button:last-child {  
    margin-bottom: 10px;  
}  

</style>

操作步骤:

直接云打包就能复现

预期结果:

每次云打包都会复现

实际结果:

每次云打包都会复现

bug描述:

HbuilderX4.36 为啥自定义基座的时候样式是正常的,云打包以后样式错乱了 。下面上传两张截图 正式打包的和基座的

2024-12-26 10:49 负责人:无 分享
已邀请:
DCloud_UNI_FengXY

DCloud_UNI_FengXY

必现的?多次云打包都是一样的样式错乱效果?HBuilderX创建的项目,还是cli创建的,vue2还是vue3

  • 2***@qq.com (作者)

    vue2 再就是我感觉可能是我要打包成横屏的原因 我正在查配置横屏应该怎么配置。谢谢您的回复

    2024-12-26 11:04

要回复问题请先登录注册