hfln_miniprogram/src/pagesA/roomSetting/roomSetting.vue

<template>
    <view class="home-warpTwo">
        <view class="header_two">
            <view class="header">
                <view class="item">
                    <image src="../../static/activePod.png" alt=""> </image>
                    <text>1</text>
                </view>
                <view class="line"></view>
                <view class="item"
                    ><image src="../../static/activePod.png" alt=""></image>
                    <text>2</text>
                </view>
                <view class="line"></view>
                <view class="item"
                    ><image src="../../static/activePod.png" alt=""></image>
                    <text>3</text>
                </view>
            </view>
            <view
                class="airCantInfo"
                :style="{
                    width: `${length / 200}px`,
                    height: `${width / 200}px`,
                }"
            >
                <view
                    v-for="(item, index) in modules"
                    :key="index"
                    class="module-content"
                >
                    <view
                        :class="item.type"
                        :style="{
                            width: `${item.width / 2}px`,
                            height: `${item.length / 2}px`,
                            top: `${item.top / 2}px`,
                            left: `${item.left / 2}px`,
                            transform: `rotate(${item.rotate}deg)`,
                            'transform-origin': 'center center',
                        }"
                        @touchmove.prevent="onTouchMove(index, $event)"
                        @touchstart="onTouchStart(index, $event)"
                        @touchend="onTouchEnd(index, $event)"
                    >
                        <image
                            style="width: 100%; height: 100%; display: block"
                            :src="`../../static/furnitures/${item.type}.png`"
                            mode=""
                        />
                    </view>
                </view>
            </view>
            <view class="airbody">
                <view class="header_top">
                    <view class="airTitle">室内布置</view>
                    <view class="addfnt" @click="showAddFt">
                        <image src="../../static/addfnt.png" alt=""> </image
                        ><view class="add_btn">添加</view></view
                    >
                </view>

                <view class="module">
                    <view class="device-bottom">
                        <view v-if="modules.length == 0" class="no-data">
                            请先点击添加，添加家具
                        </view>
                        <view
                            class="info-box"
                            v-for="(item, index) in modules"
                            :key="index"
                        >
                            <image
                                :src="`../../static/furnitures/${item.type}.png`"
                                mode=""
                            />
                            <view class="info-text">
                                <text>{{ item.name }}</text>
                                <text
                                    >({{ item.width }}*{{
                                        item.length
                                    }})cm</text
                                >
                            </view>
                            <view class="edit_del">
                                <image
                                    @click="deleteItem(index)"
                                    src="../../static/delete.png"
                                    alt=""
                                ></image>
                                <image
                                    @click="editItem(index)"
                                    style="margin-left: 10rpx"
                                    src="../../static/edit.png"
                                    alt=""
                                ></image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="bottomTwo" @click="saveRoom">
                <view class="previousTip">保存</view>
            </view>
        </view>

        <!-- 选择家具弹窗 -->
        <view>
            <!-- 底部弹窗 -->
            <view class="bottom-modal" v-if="addfntShow">
                <!-- 遮罩层 -->
                <view class="modal-mask" @click="addfntShow = false"></view>

                <!-- 弹窗内容 -->
                <view class="modal-container">
                    <view class="modal-header">
                        <text class="header-title">选择家具</text>
                    </view>

                    <view class="modal-content">
                        <view class="device-bottom">
                            <view
                                class="item-box"
                                v-for="(item, index) in selectfntLists"
                                :key="index"
                                @click="generate(item.type)"
                            >
                                <image
                                    :src="`../../static/furnitures/${item.type}.png`"
                                    mode=""
                                />
                                <text
                                    >{{ item.name }}({{ item.width }}*{{
                                        item.length
                                    }})</text
                                >
                            </view>
                        </view>
                    </view>

                    <view class="modal-footer">
                        <button
                            class="footer-btn cancel"
                            @click="addfntShow = false"
                        >
                            取消
                        </button>
                        <button
                            class="footer-btn confirm"
                            @click="addfntShow = false"
                        >
                            确定
                        </button>
                    </view>
                </view>
            </view>
        </view>
        <!-- 编辑家具弹窗 -->
        <view class="device_control" v-if="editfntShow">
            <view class="control_info">
                <view class="control_left">
                    <image
                        :src="`../../static/furnitures/${selectImg}.png`"
                        class="image_class"
                    ></image>
                </view>
                <view class="control_right">
                    <view class="control_right_top">
                        <view class="title">长(cm)</view>
                        <input
                            type="number"
                            v-model="selectWidth"
                            placeholder="请输入长"
                            @blur="changeSize"
                        />
                    </view>
                    <view class="control_right_bottom">
                        <view class="title">宽(cm)</view>
                        <input
                            type="number"
                            v-model="selectHeight"
                            placeholder="请输入宽"
                            @blur="changeSize"
                        />
                    </view>
                </view>
            </view>
            <view class="control_operat" v-if="editfntShow">
                <view class="operat_left">
                    <view class="top">
                        <image
                            src="../../static/btn_top.png"
                            mode="aspectFit"
                            @click="movefut(0, -10)"
                        ></image>
                    </view>
                    <view class="middle">
                        <image
                            src="../../static/btn_left.png"
                            mode="aspectFit"
                            @click="movefut(-10, 0)"
                        ></image>
                        <image
                            src="../../static/btn_right.png"
                            mode="aspectFit"
                            @click="movefut(10, 0)"
                        ></image>
                    </view>
                    <view class="bottom">
                        <image
                            src="../../static/btn_bot.png"
                            mode="aspectFit"
                            @click="movefut(0, 10)"
                        ></image>
                    </view>
                </view>
                <view class="operat_right">
                    <view class="rotate">
                        <view class="rotate_left" @click="rotatefut(-90)">
                            <image src="../../static/rote_left.png"></image>
                        </view>
                        <view class="rotate_rigt" @click="rotatefut(90)">
                            <image src="../../static/rote_right.png"></image>
                        </view>
                    </view>
                    <view class="del_funit" @click="editfntShow = false"
                        >完成</view
                    >
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    name: "my",
    data() {
        return {
            // 设备参数
            deviceWidth: 400,
            deviceHeight: 500,
            modules: [],
            width: 0,
            length: 0,
            selectedIndex: 0,
            selectIndex: 0,
            controlOptions: [],
            startX: 0, // 记录触摸开始时的X坐标
            startY: 0, // 记录触摸开始时的Y坐标
            draggingIndex: null, // 记录当前正在拖动的模块的索引
            selectedItem: [],
            rotateShow: false,
            selectRotate: "",
            selectedRotate: "",
            softWare: "",
            xOffset: 0,
            yOffset: 0,
            angle: 0,
            xxStart: "",
            xxEnd: "",
            yyStart: "",
            yyEnd: "",
            // 控制部分参数
            selectImg: "setting",
            selectWidth: "",
            selectHeight: "",
            addfntShow: false,
            editfntShow: false,
            selectfntLists: [
                {
                    name: "床",
                    type: "bed",
                    width: 80,
                    length: 70,
                },
                {
                    name: "柜子",
                    type: "bed_cabinet",
                    width: 40,
                    length: 80,
                },
                {
                    name: "化妆椅",
                    type: "bed_dressing_chair",
                    width: 40,
                    length: 40,
                },
                {
                    name: "化妆镜",
                    type: "bed_dressing_mirror",
                    width: 40,
                    length: 80,
                },

                {
                    name: "床头柜",
                    type: "bed_table",
                    width: 40,
                    length: 40,
                },
                {
                    name: "脸盆",
                    type: "bath_basin",
                    width: 40,
                    length: 80,
                },
                {
                    name: "门",
                    type: "bath_door",
                    width: 40,
                    length: 40,
                },
                {
                    name: "淋浴",
                    type: "bath_shower",
                    width: 40,
                    length: 60,
                },
                {
                    name: "马桶",
                    type: "bath_toilet",
                    width: 40,
                    length: 40,
                },
                {
                    name: "餐桌（方形）",
                    type: "dining_table_rect",
                    width: 40,
                    length: 40,
                },
                {
                    name: "餐桌",
                    type: "dining_table",
                    width: 40,
                    length: 80,
                },
                {
                    name: "餐椅",
                    type: "dining_chair",
                    width: 40,
                    length: 80,
                },
                {
                    name: "冰箱",
                    type: "dining_fridge",
                    width: 40,
                    length: 80,
                },
                {
                    name: "书柜",
                    type: "living_bookcase",
                    width: 40,
                    length: 80,
                },
                {
                    name: "沙发",
                    type: "living_sofa",
                    width: 40,
                    length: 80,
                },
                {
                    name: "茶几",
                    type: "living_tea_table",
                    width: 40,
                    length: 80,
                },
                {
                    name: "电视柜",
                    type: "living_tv_stand",
                    width: 40,
                    length: 80,
                },
                {
                    name: "单人沙发",
                    type: "living_sofa_single",
                    width: 40,
                    length: 40,
                },
            ],
        };
    },
    computed: {},
    methods: {
        onTouchMove(index, event) {
            if (this.draggingIndex === null) return;
            const { modules, startX, startY } = this;
            const currentX = event.touches[0].clientX;
            const currentY = event.touches[0].clientY;
            const deltaX = Math.round(currentX - startX);
            const deltaY = Math.round(currentY - startY);
            let x = Math.round(
                this.xxStart + event.currentTarget.offsetLeft * 2
            );
            let y = Math.round(this.yyEnd - event.currentTarget.offsetTop * 2);

            // 创建新数组避免直接修改原数组
            const updatedModules = [...this.modules];
            updatedModules[this.draggingIndex] = {
                ...updatedModules[this.draggingIndex],
                left: Math.round(
                    updatedModules[this.draggingIndex].left + deltaX
                ),
                top: Math.round(
                    updatedModules[this.draggingIndex].top + deltaY
                ),
                x,
                y,
            };

            // Vue 的响应式更新
            this.modules = updatedModules;
            this.startX = currentX;
            this.startY = currentY;
        },
        onTouchStart(index, event) {
            const selectedItem = this.modules[index];
            const selectedItemWidth = selectedItem.width / 40;
            const selectedItemHeight = selectedItem.length / 40;
            this.draggingIndex = index;
            this.selectedIndex = index;
            this.startX = event.touches[0].clientX;
            this.startY = event.touches[0].clientY;
            this.selectedItem = selectedItem;
            this.selectedItemWidth = selectedItemWidth;
            this.selectedItemHeight = selectedItemHeight;
            this.selectImg = this.modules[index].type;
            this.selectWidth = this.modules[index].width;
            this.selectHeight = this.modules[index].length;
        },
        onTouchEnd(index, event) {
            // this.draggingIndex = null;
        },
        generate(featuriesType) {
            let component = {
                name: "",
                type: featuriesType,
                width: 0,
                length: 0,
                top: 0,
                left: 0,
                rotate: 0,
            };
            switch (featuriesType) {
                case "bed":
                    component.width = 80;
                    component.length = 120;
                    component.name = "床";
                    break;
                case "bed_cabinet":
                    component.width = 40;
                    component.length = 80;
                    component.name = "柜子";
                    break;
                case "bed_dressing_chair":
                    component.width = 40;
                    component.length = 40;
                    component.name = "化妆椅";
                    break;
                case "bed_dressing_mirror":
                    component.width = 40;
                    component.length = 80;
                    component.name = "化妆镜";
                    break;
                case "bed_table":
                    component.width = 40;
                    component.length = 40;
                    component.name = "床头柜";
                    break;
                case "bath_basin":
                    component.width = 40;
                    component.length = 80;
                    component.name = "脸盆";
                    break;
                case "bath_door":
                    component.width = 40;
                    component.length = 40;
                    component.name = "门";
                    break;
                case "bath_shower":
                    component.width = 40;
                    component.length = 60;
                    component.name = "淋浴";
                    break;
                case "bath_toilet":
                    component.width = 40;
                    component.length = 40;
                    component.name = "马桶";
                    break;
                case "dining_table_rect":
                    component.width = 40;
                    component.length = 40;
                    component.name = "餐桌（方形）";
                    break;
                case "dining_table":
                    component.width = 40;
                    component.length = 80;
                    component.name = "餐桌";
                    break;
                case "dining_chair":
                    component.width = 40;
                    component.length = 80;
                    component.name = "餐椅";
                    break;
                case "dining_fridge":
                    component.width = 40;
                    component.length = 80;
                    component.name = "冰箱";
                    break;
                case "living_bookcase":
                    component.width = 40;
                    component.length = 80;
                    component.name = "书柜";
                    break;
                case "living_sofa":
                    component.width = 40;
                    component.length = 80;
                    component.name = "沙发";
                    break;
                case "living_tea_table":
                    component.width = 40;
                    component.length = 80;
                    component.name = "茶几";
                    break;
                case "living_tv_stand":
                    component.width = 40;
                    component.length = 80;
                    component.name = "电视柜";
                    break;
                case "living_sofa_single":
                    component.width = 40;
                    component.length = 40;
                    component.name = "单人沙发";
                    break;
                default:
                    break;
            }
            component.type = featuriesType;
            if (component !== null) {
                this.modules.push(component);
            }
        },
        // 输入宽高改变家具大小
        changeSize() {
            this.modules[this.draggingIndex].length = this.selectHeight;
            this.modules[this.draggingIndex].width = this.selectWidth;
        },

        movefut(left, top) {
            this.modules[this.draggingIndex].left =
                this.modules[this.draggingIndex].left + left;
            this.modules[this.draggingIndex].top =
                this.modules[this.draggingIndex].top + top;
            console.log(this.modules[this.draggingIndex], 999);
        },
        rotatefut(rotate) {
            let item = this.modules[this.draggingIndex];
            if (item.rotate == 0) {
                item.rotate = 360;
            }
            let currentRotate = item.rotate || 0;
            let newAngle = (currentRotate + rotate) % 360;
            this.modules[this.draggingIndex].rotate = newAngle;
        },

        deleteItem(index) {
            this.draggingIndex = index;
            if (this.draggingIndex === null) {
                return this.showModal("提示", "请先选择家具");
            }

            this.showModal("提示", "是否确认删除该家具", (res) => {
                if (res.confirm) {
                    this.modules.splice(this.draggingIndex, 1);
                    this.draggingIndex = null;
                }
            });
        },
        editItem(index) {
            this.draggingIndex = index;
            this.editfntShow = true;
            const selectedItem = this.modules[index];
            const selectedItemWidth = selectedItem.width / 40;
            const selectedItemHeight = selectedItem.length / 40;
            this.draggingIndex = index;
            this.selectedIndex = index;
            this.selectedItem = selectedItem;
            this.selectedItemWidth = selectedItemWidth;
            this.selectedItemHeight = selectedItemHeight;
            this.selectImg = this.modules[index].type;
            this.selectWidth = this.modules[index].width;
            this.selectHeight = this.modules[index].length;
        },

        // 提取公共的模态框方法
        showModal(title, content, confirmCallback) {
            wx.showModal({
                title,
                content,
                success: (res) => {
                    if (res.confirm && confirmCallback) {
                        confirmCallback(res);
                    }
                },
            });
        },

        saveRoom() {
            this.$http
                .post(
                    "wap/room/saveRoom",
                    JSON.stringify({
                        devId: this.devId,
                        furnitures: this.modules,
                    }),
                    {
                        header: {
                            "Content-Type": "application/json;charset=UTF-8",
                        },
                    }
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        uni.showToast({
                            title: "保存成功",
                            icon: "none",
                            duration: 1500,
                        });
                        setTimeout(() => {
                            uni.reLaunch({
                                url: "/pages/home/home",
                            });
                        }, 1500);
                    } else {
                        uni.showToast({
                            title: res.data.msg,
                            icon: "none",
                            duration: 1500,
                        });
                    }
                })
                .catch((err) => {
                    // console.log(err, 8888);
                });

            // console.log(this.modules, 999);
        },
        showAddFt() {
            this.addfntShow = true;
        },
        getdevInfo(devId) {
            this.$http
                .get(`wap/device/queryDeviceInfoById/${devId}`, {})
                .then((res) => {
                    if (res.data.data) {
                        this.devInfo = res.data.data;
                        this.width =
                            Math.abs(
                                this.devInfo.yyEnd - this.devInfo.yyStart
                            ) * 100;
                        this.length =
                            Math.abs(
                                this.devInfo.xxEnd - this.devInfo.xxStart
                            ) * 100;

                        this.xOffset =
                            (this.devInfo.xxStart + this.devInfo.xxEnd) * 50;
                        this.yOffset =
                            -(this.devInfo.yyStart + this.devInfo.yyStart) * 50;
                        this.statusLight = this.devInfo.statusLight;
                        this.xxStart = this.devInfo.xxStart;
                        this.xxEnd = this.devInfo.xxEnd;
                        this.yyStart = this.devInfo.yyStart;
                        this.yyEnd = this.devInfo.yyEnd;
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: "none",
                        });
                    }
                })
                .catch((err) => {
                    console.log(err, 8888);
                });
        },
        getRoomInfo(devId) {
            this.$http
                .get(`wap/room/readRoom`, {
                    devId: devId,
                })
                .then((res) => {
                    if (res.data.data) {
                        this.modules = res.data.data.furnitures;
                    }
                });
        },
    },
    onLoad(options) {
        this.devId = options.devId;
        this.getdevInfo(this.devId);
        this.getRoomInfo(this.devId);
    },
    onShow() {},
};
</script>
<style lang="less" scoped>
.home-warpTwo {
    position: relative;
    height: 100vh;
    background: #f4f4f4;
    .header_two {
        width: 750rpx;
        border-bottom-left-radius: 35rpx;
        border-bottom-right-radius: 35rpx;
        background: linear-gradient(180deg, #faede2 0%, #ffffff 100%);
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0rpx 120rpx;
            // padding-top: 30rpx;
            .item {
                position: relative;
                text-align: center;
                width: 70rpx;
                height: 75rpx;
                image {
                    width: 45rpx;
                    height: 50rpx;
                }
                text {
                    position: absolute;
                    top: 33%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-weight: 700;
                    color: #ffffff;
                    font-size: 30rpx;
                    text-align: center;
                }
            }
            .line {
                width: 56rpx;
                height: 4rpx;
                margin-bottom: 10rpx;
                background-color: #e4c5b9;
            }
        }
        .airCantInfo {
            margin: 30rpx auto 0 auto;
            border: 18rpx solid #1f1f1f;
            position: relative;
            .module-content > view {
                position: absolute;
            }
        }
        .airbody {
            margin: 80rpx auto 0 auto;
            width: 700rpx;
            background: #ffffff;
            border-radius: 38rpx;
            box-sizing: border-box;
            .header_top {
                padding: 0rpx 40rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .airTitle {
                    font-weight: 500;
                    color: #784c41;
                    font-size: 32rpx;
                    padding-left: 20rpx;
                    padding-top: 20rpx;
                }
                .addfnt {
                    display: flex;
                    align-items: center;
                    image {
                        margin-top: 7rpx;
                        width: 25rpx;
                        height: 25rpx;
                    }
                    .add_btn {
                        margin-left: 10rpx;
                        font-size: 32rpx;
                    }
                }
            }

            .module {
                padding: 10rpx 30rpx;
                bottom: 0;
                box-sizing: border-box;
                width: 100%;
                background: #ffffff;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
                .device-bottom {
                    margin-top: 20rpx;
                    height: 500rpx;
                    overflow-y: scroll;
                    .no-data {
                        margin-top: 100rpx;
                        text-align: center;
                    }
                    .info-box {
                        display: flex;
                        align-items: center;
                        // width: 620rpx;
                        padding: 0 30rpx;
                        height: 110rpx;
                        background: #f8f8f8;
                        border-radius: 38rpx;
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 26rpx;
                        .info-text {
                            display: flex;
                            flex-direction: column;
                            margin-left: 20rpx;
                        }
                        image {
                            margin-bottom: 10rpx;
                            width: 75rpx;
                            height: 75rpx;
                        }
                        .edit_del {
                            margin-left: auto;
                            image {
                                width: 40rpx;
                                height: 40rpx;
                            }
                        }
                    }
                    .info-box:not(:first-child) {
                        margin-top: 20rpx;
                    }
                }
                .device_control {
                    overflow: hidden;
                    margin-top: 20rpx;
                    .control_info {
                        height: 160rpx;
                        background: #f8f8f8;
                        border-radius: 37rpx;
                        box-sizing: border-box;
                        padding: 20rpx 30rpx;
                        display: flex;
                        align-content: center;
                        justify-content: center;
                        .control_left {
                            width: 110rpx;
                            height: 110rpx;
                            .image_class {
                                width: 110rpx;
                                height: 110rpx;
                            }
                        }
                        .control_right {
                            margin-left: 100rpx;
                            .control_right_top {
                                width: 280rpx;
                                height: 50rpx;
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                background: #ffffff;
                                border-radius: 18rpx;
                                .title {
                                    color: #a0acbe;
                                    font-size: 28rpx;
                                }
                                input {
                                    width: 130rpx;
                                    color: #a0acbe;
                                }
                            }
                            .control_right_bottom {
                                width: 280rpx;
                                height: 50rpx;
                                display: flex;
                                justify-content: space-around;
                                align-items: center;
                                margin-top: 10rpx;
                                background: #ffffff;
                                border-radius: 18rpx;
                                .title {
                                    color: #a0acbe;
                                    font-size: 28rpx;
                                }
                                input {
                                    width: 130rpx;
                                    color: #a0acbe;
                                }
                            }
                        }
                    }
                }
            }
        }
        .bottomTwo {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 750rpx;
            height: 120rpx;
            background: #f3e2dd;
            .previousTip {
                font-weight: 500;
                color: #111111;
                font-size: 32rpx;
            }
        }
    }

    .bottom-modal {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        flex-direction: column;

        // 遮罩层
        .modal-mask {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            transition: all 0.3s ease;
        }

        // 弹窗容器
        .modal-container {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #fff;
            border-radius: 16rpx 16rpx 0 0;
            max-height: 70vh;
            display: flex;
            flex-direction: column;
            transform: translateY(0);
            transition: transform 0.3s ease;
            box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);

            // 头部样式
            .modal-header {
                position: relative;
                padding: 30rpx;
                text-align: center;
                border-bottom: 1rpx solid #f5f5f5;

                .header-title {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #333;
                }
            }

            // 内容区域
            .modal-content {
                height: 600rpx;
                overflow-y: scroll;
                .device-bottom {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    gap: 20rpx;
                    padding: 0 30rpx;
                    box-sizing: border-box;
                    .item-box {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 200rpx;
                        height: 160rpx;
                        background: #f5f7fa;
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 26rpx;
                        image {
                            margin-bottom: 20rpx;
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                }
            }

            // 底部按钮
            .modal-footer {
                display: flex;
                padding: 20rpx 30rpx;
                border-top: 1rpx solid #f5f5f5;

                .footer-btn {
                    flex: 1;
                    height: 80rpx;
                    line-height: 80rpx;
                    border-radius: 40rpx;
                    font-size: 28rpx;
                    margin: 0 10rpx;

                    &.cancel {
                        border: none;
                        background-color: #f5f5f5;
                        color: #666;
                    }

                    &.confirm {
                        border: none;
                        background-color: #f3e2dd;
                        color: #111111;
                    }
                }
            }
        }
    }

    // 动画效果
    .modal-enter-active,
    .modal-leave-active {
        transition: all 0.7s;

        .modal-mask {
            opacity: 1;
        }

        .modal-container {
            transform: translateY(0);
        }
    }

    .modal-enter,
    .modal-leave-to {
        .modal-mask {
            opacity: 0;
        }

        .modal-container {
            transform: translateY(100%);
        }
    }
    // 编辑弹窗

    .device_control {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        height: 550rpx;
        background: #f8f8f8;
        border-radius: 37rpx 37rpx 0 0;
        box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
        padding: 30rpx;
        display: flex;
        flex-direction: column;

        // 控制区域（原control_info）
        .control_info {
            display: flex;
            align-items: space-around;
            margin-bottom: 40rpx; // 与操作区域间距

            .control_left {
                margin-left: 100rpx;
                .image_class {
                    width: 120rpx;
                    height: 120rpx;
                }
            }

            .control_right {
                flex: 1;
                margin-left: 100rpx;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .control_right_top,
                .control_right_bottom {
                    display: flex;
                    align-items: center;
                    .title {
                        font-size: 28rpx;
                        color: #666;
                        margin-bottom: 10rpx;
                    }
                    input {
                        width: 40%;
                        height: 60rpx;
                        background: #fff;
                        border-radius: 12rpx;
                        padding: 0 20rpx;
                    }
                }
            }
        }

        .control_operat {
            display: flex;
            flex: 1;
            padding: 0 30rpx;
            .operat_left {
                width: 300rpx;
                display: flex;
                flex-direction: column;
                align-items: center;

                .top,
                .middle,
                .bottom {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }

                .middle {
                    justify-content: space-between;
                    margin: 15rpx 0;
                }

                image {
                    width: 80rpx;
                    height: 80rpx;
                    background: #fff;
                    border-radius: 50%;
                    padding: 15rpx;
                    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
                }
            }

            .operat_right {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding-top: 70rpx;
                .rotate {
                    display: flex;
                    margin-bottom: 30rpx;

                    .rotate_left,
                    .rotate_rigt {
                        width: 100rpx;
                        height: 70rpx;
                        background: #fff;
                        border-radius: 12rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

                        image {
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }

                    .rotate_rigt {
                        margin-left: 20rpx;
                    }
                }

                .del_funit {
                    width: 220rpx;
                    height: 70rpx;
                    background: #7b4f43;
                    color: white;
                    border-radius: 12rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 28rpx;
                }
            }
        }
    }
}
</style>