vue3--左边一部分内容--右边一部分内容

<script setup> // 空白页面组件 </script> <template> <div class="blank-page"> <div class="left-section"> <h2>左侧内容</h2> <p>左侧第一项内容</p> <p>左侧第二项内容</p> <p>左侧第三项内容</p> </div> <div class="right-section"> <h2>右侧内容</h2> <p>右侧第一项内容</p> <p>右侧第二项内容</p> <p>右侧第三项内容</p> </div> </div> </template> <style scoped> .blank-page { max-width: 800px; margin: 0 auto; padding: 2rem; display: flex; flex-direction: column; gap: 2rem; } .left-section, .right-section { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-radius: 8px; border: 1px solid var(--border); } .left-section h2, .right-section h2 { margin: 0; color: var(--text-h); } .left-section p, .right-section p { color: var(--text); margin: 0; } /* 响应式布局：在较大屏幕上切换为双栏布局 */ @media (min-width: 768px) { .blank-page { flex-direction: row; } .left-section, .right-section { flex: 1; } } </style>