固定首页各区域,防止弹性变化

This commit is contained in:
lhj
2024-09-27 01:00:07 +08:00
parent bd2789a8d7
commit a43c13991b

View File

@ -3,26 +3,23 @@
<div> <div>
compoent compoent
</div> </div>
<div style="overflow-y: auto;overflow-x: none;"> <div style="overflow-y: auto; overflow-x: hidden; flex-grow: 0; flex-shrink: 0; flex-basis: 250px;">
<div ref="el2" style="display: flex;flex-direction: column;height: 500px;width: 100%;"> <div ref="el2" style="display: flex; flex-direction: column; height: 500px; width: 100%;">
<div v-for="item in componentsList" :key="item.id" style="height: 30px;width: 250px;border: 1px solid red;"> <div v-for="item in componentsList" :key="item.id" style="height: 30px; width: 250px; border: 1px solid red;">
{{ item.name }}:{{ item.id }} {{ item.name }}:{{ item.id }}
</div> </div>
</div> </div>
</div> </div>
<div style="flex-grow: 1; flex-shrink: 0; overflow-y: auto;">
<div> <div>
<div> <div
<div style="display: flex;flex-direction: row;width: 100%;"> style="display: flex; flex-direction: row; width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
<div class="flex justify-between">
<div v-if="list.length>0" class="flex justify-between">
<NestedFunction v-model="list"></NestedFunction> <NestedFunction v-model="list"></NestedFunction>
{{ list }} {{ list }}
</div> </div>
</div> </div>
<div style="width: 100%; height: 500px; overflow-y: auto; border: 1px solid black;">
<div style="width: 800px;height:500px">
动态渲染 动态渲染
<!-- <component :is="componentMapping['Rate']" v-bind="{}"/> --> <!-- <component :is="componentMapping['Rate']" v-bind="{}"/> -->
<DynamicComponent v-for="component in list" :key="component.id" :componentData="component"> <DynamicComponent v-for="component in list" :key="component.id" :componentData="component">
@ -35,7 +32,6 @@
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">