forked from SmartBench/CMVR-IOT-UI
zhanghao
f4903d9eec
- Updated VoiceConversation.vue to set a fixed font size for the header. - Changed index.vue to use an aside element for the header and adjusted layout to a grid system. - Enhanced lock.vue by restructuring the layout and improving visual elements for better user experience. - Revamped login.vue to introduce a visual section and reorganized form elements for clarity. - Redesigned register.vue to include a visual brand section and improved form layout for user registration.
147 lines
2.9 KiB
Vue
147 lines
2.9 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<aside class="insight-panel">
|
|
<header>
|
|
<span>CORPUS / INDEX</span>
|
|
<strong>语料数据概况</strong>
|
|
</header>
|
|
<StatCards />
|
|
</aside>
|
|
|
|
<main class="main-layout">
|
|
<div class="left-panel">
|
|
<CategoryTree @select-category="onSelectCategory" />
|
|
</div>
|
|
<div class="right-panel">
|
|
<CorpusList :categoryId="categoryId" />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import StatCards from './components/StatCards.vue'
|
|
import CategoryTree from './components/CategoryTree.vue'
|
|
import CorpusList from './components/CorpusList.vue'
|
|
|
|
const categoryId = ref('')
|
|
|
|
const onSelectCategory = (node) => {
|
|
categoryId.value = node.id
|
|
}
|
|
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page-container {
|
|
display: grid;
|
|
grid-template-columns: 272px minmax(0, 1fr);
|
|
gap: 20px;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.insight-panel {
|
|
min-width: 0;
|
|
overflow: auto;
|
|
|
|
> header {
|
|
display: flex;
|
|
min-height: 82px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
padding: 16px 20px;
|
|
border: 1px solid var(--min-border-light);
|
|
border-bottom: 0;
|
|
background: var(--min-bg-white);
|
|
|
|
span {
|
|
color: var(--min-primary);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
strong {
|
|
color: var(--min-text-primary);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
:deep(.row-cards) {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 0;
|
|
}
|
|
|
|
:deep(.row-cards .card) {
|
|
min-height: 132px;
|
|
border-bottom: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
:deep(.row-cards .card:last-child) {
|
|
border-bottom: 1px solid var(--min-border-light);
|
|
}
|
|
}
|
|
|
|
.main-layout {
|
|
display: grid;
|
|
grid-template-columns: 260px 1fr;
|
|
gap: 20px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
align-items: stretch;
|
|
overflow: auto;
|
|
}
|
|
|
|
.left-panel {
|
|
position: sticky;
|
|
top: 20px;
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.right-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.detail-wrapper {
|
|
min-height: 200px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.page-container {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
height: auto;
|
|
overflow: auto;
|
|
}
|
|
|
|
.insight-panel {
|
|
overflow: visible;
|
|
}
|
|
|
|
.insight-panel :deep(.row-cards) {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.insight-panel :deep(.row-cards .card) {
|
|
border-bottom: 1px solid var(--min-border-light);
|
|
}
|
|
|
|
.main-layout {
|
|
grid-template-columns: 1fr;
|
|
overflow: visible;
|
|
}
|
|
|
|
.left-panel {
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|