|
|
@@ -1,42 +1,30 @@
|
|
|
<template>
|
|
|
- <uni-popup ref="popupRef" :mask-background-color="popup_background_color">
|
|
|
- <uni-card :is-shadow="false" class="card-container">
|
|
|
- <template #title>
|
|
|
- <!-- 章节目录区域 -->
|
|
|
- <view class="catalogue-custom-title">
|
|
|
- <!-- 自定义标题区域 -->
|
|
|
- <text></text>
|
|
|
- <uni-icons type="closeempty" size="16" @click="handleClose"></uni-icons>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
|
|
|
+ mask-background-color="rgba(255, 255, 255, 0.6);" :is-shadow="false">
|
|
|
+ <view class="ezy-catalogue-dialog">
|
|
|
+ <uni-icons @click="handleClose" class="catalogue-close-btn"></uni-icons>
|
|
|
<!-- 目录区域 -->
|
|
|
- <uni-collapse v-model="activeCollapse" class="collapse-container" accordion>
|
|
|
- <uni-collapse-item title-border="none" :border="false" :name="index" v-for="(item,index) in list">
|
|
|
+ <uni-collapse v-model="activeCollapse" class="ezy-catalogue-collapse" accordion>
|
|
|
+ <uni-collapse-item title-border="none" :border="false" :name="index" v-for="(item,index) in list"
|
|
|
+ class="collapse-item-box" :class="{ 'collapse-active': activeCollapse === index}">
|
|
|
<template v-slot:title>
|
|
|
- <view class="title-layout">
|
|
|
- <view @click.stop="handleSelectZhang(item)" class="text-container">
|
|
|
- <uni-badge class="uni-badge-left-margin" :text="index+1" type="primary" />
|
|
|
+ <view @click.stop="handleSelectZhang(item)" class="collapse-title">
|
|
|
+ <view class="collapse-num-box">{{index+1}}</view>
|
|
|
<!-- 章名 -->
|
|
|
- <text class="text-white">{{item.zhangName}}</text>
|
|
|
+ <text>{{item.zhangName}}</text>
|
|
|
</view>
|
|
|
- <!-- 三角图标 双色激活不同图标 -->
|
|
|
- <uni-icons v-if="activeCollapse === index" type="right" size="16"
|
|
|
- style="justify-self: flex-end;"></uni-icons>
|
|
|
- <uni-icons v-else type="right" size="16" style="justify-self: flex-end;"></uni-icons>
|
|
|
- <!-- 三角图标完结 -->
|
|
|
- <uni-icons :class="['right-icon']" @click="handleExpand" type="locked-filled" size="16"
|
|
|
- style="justify-self: flex-end;"></uni-icons>
|
|
|
- </view>
|
|
|
+ <!-- 锁 -->
|
|
|
+ <!-- <view class="collapse-lock"></view> -->
|
|
|
</template>
|
|
|
- <view class="content">
|
|
|
- <view v-for="(jie,cindex) in item.jieList">
|
|
|
+ <view class="collapse-content-box">
|
|
|
+ <view v-for="(jie,cindex) in item.jieList" class="collapse-content-item">
|
|
|
<text class="jie-index">{{`${index+1}.${cindex+1}`}}</text>
|
|
|
<text class="text">{{jie.jieName}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-collapse-item>
|
|
|
</uni-collapse>
|
|
|
- </uni-card>
|
|
|
+ </view>
|
|
|
</uni-popup>
|
|
|
</template>
|
|
|
|
|
|
@@ -124,76 +112,3 @@
|
|
|
showPopup
|
|
|
})
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- .title-layout {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding: 10px
|
|
|
- }
|
|
|
-
|
|
|
- .child-item {
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- // 章节目录Card
|
|
|
- .card-container {
|
|
|
- background-color: rgba(0, 0, 0, 0.2); // 【弹出框 背景颜色】
|
|
|
- min-width: 300px;
|
|
|
- }
|
|
|
-
|
|
|
- // 目录区域
|
|
|
- ::v-deep .uni-card__content {
|
|
|
- padding: 0 !important;
|
|
|
- margin: 10px 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5); // 【弹出框 内容区域背景颜色】
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- // 目录文字 颜色调整
|
|
|
- .text-white {
|
|
|
- color: #fff; // 【课件 章文字颜色】
|
|
|
- }
|
|
|
-
|
|
|
- // 章节目录区域 标题
|
|
|
- .catalogue-custom-title {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- margin-top: 10px;
|
|
|
- background-color: #fff; // 【弹出 框 标题背景 待替换成背景图】
|
|
|
-
|
|
|
- border-top-left-radius: 4px;
|
|
|
- border-top-right-radius: 4px;
|
|
|
- }
|
|
|
-
|
|
|
- // 章文本区域
|
|
|
- .text-container {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .collapse-container {
|
|
|
- background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .uni-collapse-item__wrap {
|
|
|
- background-color: transparent; // 【弹出框 内容区域背景颜色】
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .uni-collapse-item__wrap-content {
|
|
|
- color: #fff; // 【课件 章文字颜色】
|
|
|
- line-height: 1.5;
|
|
|
- padding: 5px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .jie-index {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- rotate: 90deg;
|
|
|
- color: red;
|
|
|
- }
|
|
|
-</style>
|
tanxue
