|
|
@ -1,55 +1,46 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="app-container lend-container"> |
|
|
<div class="app-container lend-container"> |
|
|
<!-- 借阅列表 --> |
|
|
<!-- 借阅列表 --> |
|
|
<el-row class="container-main" :gutter="20"> |
|
|
|
|
|
<!-- 借阅管理tab --> |
|
|
|
|
|
<el-col |
|
|
|
|
|
class="container-right tab-content" |
|
|
|
|
|
:xs="14" |
|
|
|
|
|
:sm="18" |
|
|
|
|
|
:md="19" |
|
|
|
|
|
:lg="18" |
|
|
|
|
|
:xl="24" |
|
|
|
|
|
> |
|
|
|
|
|
<span class="right-top-line" /> |
|
|
|
|
|
<span class="left-bottom-line" /> |
|
|
|
|
|
<ul class="tab-nav"> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 0 }" |
|
|
|
|
|
@click="changeActiveTab(0)" |
|
|
|
|
|
> |
|
|
|
|
|
待借档案<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 1 }" |
|
|
|
|
|
@click="changeActiveTab(1)" |
|
|
|
|
|
> |
|
|
|
|
|
借出确认<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 2 }" |
|
|
|
|
|
@click="changeActiveTab(2)" |
|
|
|
|
|
> |
|
|
|
|
|
归还档案<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 3 }" |
|
|
|
|
|
@click="changeActiveTab(3)" |
|
|
|
|
|
> |
|
|
|
|
|
借阅查询<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 4 }" |
|
|
|
|
|
@click="changeActiveTab(4)" |
|
|
|
|
|
> |
|
|
|
|
|
借阅者管理<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<!-- 最右侧装饰img --> |
|
|
|
|
|
<span class="tab-right-img" /> |
|
|
|
|
|
</ul> |
|
|
|
|
|
<component :is="comName" /> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
|
|
|
<!-- 借阅管理tab --> |
|
|
|
|
|
<div class="tab-content"> |
|
|
|
|
|
<span class="right-top-line" /> |
|
|
|
|
|
<span class="left-bottom-line" /> |
|
|
|
|
|
<ul class="tab-nav"> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 0 }" |
|
|
|
|
|
@click="changeActiveTab(0)" |
|
|
|
|
|
> |
|
|
|
|
|
待借档案<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 1 }" |
|
|
|
|
|
@click="changeActiveTab(1)" |
|
|
|
|
|
> |
|
|
|
|
|
借出确认<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 2 }" |
|
|
|
|
|
@click="changeActiveTab(2)" |
|
|
|
|
|
> |
|
|
|
|
|
归还档案<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 3 }" |
|
|
|
|
|
@click="changeActiveTab(3)" |
|
|
|
|
|
> |
|
|
|
|
|
借阅查询<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li |
|
|
|
|
|
:class="{ 'active-tab-nav': activeIndex == 4 }" |
|
|
|
|
|
@click="changeActiveTab(4)" |
|
|
|
|
|
> |
|
|
|
|
|
借阅者管理<i /> |
|
|
|
|
|
</li> |
|
|
|
|
|
<!-- 最右侧装饰img --> |
|
|
|
|
|
<span class="tab-right-img" /> |
|
|
|
|
|
</ul> |
|
|
|
|
|
<component :is="comName" /> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
@ -99,4 +90,11 @@ export default { |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.lend-container{ |
|
|
|
|
|
.tab-content{ |
|
|
|
|
|
position: relative; |
|
|
|
|
|
margin-top: 61px; |
|
|
|
|
|
border: 1px solid #113d72; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
