57 lines
1.2 KiB
Vue
57 lines
1.2 KiB
Vue
<template>
|
|
<div class="layout-padding">
|
|
<div class="material-index">
|
|
<el-card class="!border-none" shadow="never">
|
|
<el-tabs v-model="activeTab">
|
|
<el-tab-pane v-for="item in tabsMap" :label="item.name" :name="item.type" :index="item.type" :key="item.type" lazy>
|
|
<material :type="item.type" mode="page" file-size="120px" :limit="-1" :page-size="20" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="fileCenter">
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const Material = defineAsyncComponent(() => import('/@/components/Material/index.vue'));
|
|
const { t } = useI18n();
|
|
const tabsMap = [
|
|
{
|
|
type: 'image',
|
|
name: t('file.image'),
|
|
},
|
|
{
|
|
type: 'video',
|
|
name: t('file.video'),
|
|
},
|
|
{
|
|
type: 'file',
|
|
name: t('file.file'),
|
|
},
|
|
];
|
|
const activeTab = ref('image');
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.material-index {
|
|
min-width: 700px;
|
|
:deep(.el-tabs) {
|
|
height: calc(100vh - 180px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.el-tabs__header {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.el-tabs__content,
|
|
.el-tab-pane {
|
|
min-height: 0;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
}
|
|
</style>
|