37 lines
964 B
Vue
37 lines
964 B
Vue
<template>
|
|
<div class="bg-white h-full w-full p-[20px]">
|
|
<div class="home-tab">
|
|
<message-list />
|
|
<div class="main-area">
|
|
<chat-guide />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MessageList from './MessageList.vue'
|
|
import ChatGuide from './ChatGuide.vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-tab {
|
|
display: flex;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.home-tab > :first-child { flex: 0 0 260px }
|
|
.main-area { flex: 1 1 auto; overflow: auto; padding: 20px }
|
|
|
|
/* match MessageList scrollbar: 8px, subtle thumb */
|
|
.main-area { scrollbar-width: auto }
|
|
.main-area::-webkit-scrollbar { width: 8px }
|
|
.main-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.05); border-radius: 8px }
|
|
.main-area::-webkit-scrollbar-track { background: transparent }
|
|
|
|
@media (max-width: 900px) {
|
|
.home-tab { flex-direction: column }
|
|
.home-tab > :first-child { flex: none; width: 100% }
|
|
.main-area { padding: 12px }
|
|
}
|
|
</style> |