mirror of
https://gitee.com/xiangheng/x_admin.git
synced 2025-10-30 19:16:32 +08:00
64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<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="10"
|
|
/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import material from '@/components/material/index.vue'
|
|
defineOptions({
|
|
name: 'materialCenter'
|
|
})
|
|
const tabsMap = [
|
|
{
|
|
type: 'image',
|
|
name: '图片'
|
|
},
|
|
{
|
|
type: 'video',
|
|
name: '视频'
|
|
}
|
|
]
|
|
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>
|