uniapp/vue中，如何按照要求改动代码？

Question

根据以下的代码进行改动，现在代码出来的效果是第三节桌腿的位置会根据第1、2节高度的变化而变化。
我需要的效果是第三节桌腿的位置是固定不变的，第一第二桌腿高度由上往下变低，并且整个桌子和三节桌腿始终都要连在一起，也就是升降桌的效果，请问大神们我该怎么改？代码直接复制可用

简单点就是说，上下滑动时，固定第三节桌腿的位置，其他功能不变

小弟在这里先感谢各位大神们，感激不尽，祝大神们发财祝大神们取漂亮老婆！！！

<view style="height: 140rpx;"></view>

            <div style="display: flex;justify-content: center;flex-direction: row;width: 100%;">
                <div class="container">
                    <!-- 定义桌子的组件 -->
                    <div class="table" :style="{top: tableTop + 'px'}" @touchstart.stop.prevent="onTouchStart"
                        @touchmove.stop.prevent="onTouchMove">
                        <!-- 定义桌子的上部分 -->
                        <div class="table-top">
                            <!-- 定义两个长方形 -->
                            <div class="rect"></div>
                            <div class="rect_a"></div>
                        </div>
                        <!-- 定义桌子的下部分 -->
                        <div class="table-bottom">
                            <!-- 定义三节桌腿 -->
                            <div class="leg" :style="{height: legHeight1 + 'px'}"></div>
                            <div class="leg" :style="{height: legHeight2 + 'px', width: '30px'}"></div>
                            <!-- 下面这一行就是第三节桌腿 -->
                            <div class="leg" style="height: 50px; width: 40px;"></div>
                        </div>
                    </div>
                </div>
            </div>

data() {
            return {
                // 定义桌子的初始位置
                tableTop: 114,
                // 定义桌腿的初始高度
                legHeight1: 75,
                legHeight2: 75,
                // 定义触摸事件的初始坐标
                touchStartY: 0,
                // 定义桌子的最大值和最小值
                maxTop: 180, // 最大值为200px
                minTop: 50, // 最小值为50px
                deskValue: 100,
            }
        },

// 定义触摸开始时的方法
            onTouchStart(event) {
                // 获取触摸点的纵坐标
                this.touchStartY = event.touches[0].clientY;
            },
            // 定义触摸移动时的方法
            onTouchMove(event) {
                // if(this.deskValue  >100 || this.deskValue < 0){
                //  return
                // }
                // 获取触摸点的纵坐标
                let touchMoveY = event.touches[0].clientY;
                // 计算触摸点移动的距离
                let distance = touchMoveY - this.touchStartY;
                // 判断是否超过最大值或最小值
                if (distance > 0 && this.deskValue - 1 < 1) {
                    // 没有超过最大值或最小值，更新位置和高度
                    return
                } else if (distance < 0 && this.deskValue + 1 > 100) {
                    return
                } else {

                    if (this.tableTop + distance < 114 || this.tableTop + distance > 196) {
                        return
                    } else {
                        this.tableTop += distance;
                    }


                    this.legHeight1 -= distance;
                    this.legHeight2 -= distance;
                }
                if (distance > 0) {
                    // 向下滑，value减少1
                    this.deskValue = this.deskValue - 1;
                } else if (distance < 0) {
                    // 向上滑，value增加1
                    this.deskValue = this.deskValue + 1;
                }

                // 更新触摸点的纵坐标
                this.touchStartY = touchMoveY;
            },

    .container {
        // width: 100vw;
        height: 200px;
        max-height: 200px;
        /* 添加最大高度 */
        min-height: 50px;
        /* 添加最小高度 */

        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40rpx;
    }

    .table {
        position: absolute;
        width: 200px;
    }

    /* 定义桌子上部分的样式 */
    .table-top {
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 定义长方形的样式 */
    .rect {
        // flex: 1;
        width: 250px;
        height: 15px;
        // background-color: #f0f0f0;
        border: 1px solid black;
    }

    .rect_a {
        flex: 1;
        width: 150px;
        // background-color: #f0f0f0;
        border: 1px solid black;
    }

    /* 定义桌子下部分的样式 */
    .table-bottom {
         height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
           
    }

    /* 定义桌腿的样式 */
    .leg {
        width: 20px;
        // background-color: #e0e0e0;
        border: 1px solid black;
    }

Answer 1

本质是css问题，所以只改了样式布局部分
https://jsrun.net/e4xKp

Answer 2

读代码后
文中此处代码可能有误 两个腿都在变短 此处应该x2 不然位置一定会变化 导致下方的腿上来了
应该改成 （tableTop *2）
<!-- 定义桌子的组件 -->

<div class="table" :style="{top: tableTop *2 + 'px'}" @touchstart.stop.prevent="onTouchStart"
    @touchmove.stop.prevent="onTouchMove">