SOURCE

<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: 40px; "></div>
				<div class="leg" style="height: 50px; width: 30px;"></div>
				<!-- 下面这一行就是第三节桌腿 -->
				<div class="leg" style="height: 50px; width: 40px;"></div>
			</div>
		</div>
	</div>
</div>

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

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

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

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

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

    .rect_a {
        flex: 1;
        width: 150px;
        border: 1px solid black;
    }

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

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