|  |  | @ -10,46 +10,57 @@ | 
			
		
	
		
			
				
					|  |  |  |     </el-tabs> | 
			
		
	
		
			
				
					|  |  |  |     <div class="theme_img"> | 
			
		
	
		
			
				
					|  |  |  |       <!-- 我的画册-创建文件夹btn --> | 
			
		
	
		
			
				
					|  |  |  |       <div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir"> | 
			
		
	
		
			
				
					|  |  |  |       <div v-if="themeItemActive=='3'" class="theme_mkdir cont_upload" @click="handleMkdir(0)"> | 
			
		
	
		
			
				
					|  |  |  |         <svg class="font-icon icon" aria-hidden="true"> | 
			
		
	
		
			
				
					|  |  |  |           <use xlink:href="#icon-a-xinzeng" /> | 
			
		
	
		
			
				
					|  |  |  |         </svg> | 
			
		
	
		
			
				
					|  |  |  |         <el-button class="mkdir_btn" round type="primary">创建文件夹</el-button> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |       <!-- 我的画册-某一文件夹 --> | 
			
		
	
		
			
				
					|  |  |  |       <div v-if="themeItemActive=='3'" class="theme_mkdir folder"> | 
			
		
	
		
			
				
					|  |  |  |       <div v-if="themeItemActive=='3'"> | 
			
		
	
		
			
				
					|  |  |  |         <div v-for="(item,index) in materialFolders" :key="item.id" :class="['theme_mkdir', 'folder', { 'item_multi': folderChecked == index }]" @click.stop="editFolder(item,index)" @dblclick="floderDbClick(item,index)"> | 
			
		
	
		
			
				
					|  |  |  |           <div class="icon_bg"> | 
			
		
	
		
			
				
					|  |  |  |           <svg class="font-icon icon" aria-hidden="true"> | 
			
		
	
		
			
				
					|  |  |  |             <svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> | 
			
		
	
		
			
				
					|  |  |  |               <use xlink:href="#icon-wenjianjia" /> | 
			
		
	
		
			
				
					|  |  |  |             </svg> | 
			
		
	
		
			
				
					|  |  |  |           <!-- <img src /> --> | 
			
		
	
		
			
				
					|  |  |  |             <img v-else :src="item.imgPath" /> | 
			
		
	
		
			
				
					|  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |           <p class="file_name">{{ item.name }}</p> | 
			
		
	
		
			
				
					|  |  |  |           <span v-if="folderChecked == index" class="checked_btn"></span> | 
			
		
	
		
			
				
					|  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |         <p class="file_name">文件夹</p> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |       <!-- 主题库list --> | 
			
		
	
		
			
				
					|  |  |  |       <div v-for="(item, index) in listThemeData" :key="index" :class="['theme_item', { 'item_multi': selectedListIds.includes(item.id) }]"> | 
			
		
	
		
			
				
					|  |  |  |         <img :src="item.coverImg" alt /> | 
			
		
	
		
			
				
					|  |  |  |       <div v-for="(item, index) in themeGalleryList" :key="index" :class="['theme_item', { 'item_multi': selectedListIds.includes(item.material_id) }]"> | 
			
		
	
		
			
				
					|  |  |  |         <img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt /> | 
			
		
	
		
			
				
					|  |  |  |         <div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> | 
			
		
	
		
			
				
					|  |  |  |         <div v-if="showItemInfo" class="item_format"> | 
			
		
	
		
			
				
					|  |  |  |           <span class="item_type">{{ item.type }}</span> | 
			
		
	
		
			
				
					|  |  |  |           <span v-if="item.type !== 'JPG'" class="item_time">03:00</span> | 
			
		
	
		
			
				
					|  |  |  |           <span class="item_type">{{ item.deposit_url | getFileFormat }}</span> | 
			
		
	
		
			
				
					|  |  |  |           <span v-if="item.material_type != 0" class="item_time">{{ item.duration | getSeconds }}</span> | 
			
		
	
		
			
				
					|  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |         <div v-if="showItemInfo" class="file_name">{{ item.name }}</div> | 
			
		
	
		
			
				
					|  |  |  |         <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span> | 
			
		
	
		
			
				
					|  |  |  |         <div v-if="showItemInfo" class="file_name">{{ item.material_name }}</div> | 
			
		
	
		
			
				
					|  |  |  |         <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  |     <!-- 多选操作 --> | 
			
		
	
		
			
				
					|  |  |  |     <div v-if="selectedListIds.length !== 0" class="multi_handle"> | 
			
		
	
		
			
				
					|  |  |  |       <div v-if="!isEditFolder && folderChecked == -1 && isMultiSelected"> | 
			
		
	
		
			
				
					|  |  |  |         <el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button type="button" class="mulit_btn">下载</el-button> | 
			
		
	
		
			
				
					|  |  |  |       <el-button v-if="themeItemActive!='3'" type="button" class="mulit_btn">添加到画册</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button v-if="themeItemActive!='3'" type="button" class="mulit_btn" @click="addToAlbum">添加到画册</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button v-if="themeItemActive=='3'" type="button" class="mulit_btn" @click="moveingTo()">移动</el-button> | 
			
		
	
		
			
				
					|  |  |  |       <el-button v-if="themeItemActive=='3'" type="button" class="mulit_btn mulit_delt_btn">删除</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button v-if="themeItemActive=='3'" type="button" class="mulit_btn mulit_delt_btn" @click="deltMyAlbumItem">删除</el-button> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |       <div v-else> | 
			
		
	
		
			
				
					|  |  |  |         <el-button type="button" class="mulit_btn" @click="handleMkdir(1)">编辑</el-button> | 
			
		
	
		
			
				
					|  |  |  |         <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button> | 
			
		
	
		
			
				
					|  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  |     <!-- 创建文件夹layer / 编辑 --> | 
			
		
	
		
			
				
					|  |  |  |     <div class="publish_layer"> | 
			
		
	
		
			
				
					|  |  |  |       <el-dialog title="创建文件夹" :close-on-click-modal="false" :show-close="false" :visible.sync="mkdirVisible" width="616px" height="384px"> | 
			
		
	
		
			
				
					|  |  |  |         <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> | 
			
		
	
		
			
				
					|  |  |  |         <el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px"> | 
			
		
	
		
			
				
					|  |  |  |           <el-form-item | 
			
		
	
		
			
				
					|  |  |  |             label="文件夹名称" | 
			
		
	
		
			
				
					|  |  |  |             prop="name" | 
			
		
	
	
		
			
				
					|  |  | @ -57,23 +68,19 @@ | 
			
		
	
		
			
				
					|  |  |  |               { required: true, message: '请输入名称', trigger: 'blur' } | 
			
		
	
		
			
				
					|  |  |  |             ]" | 
			
		
	
		
			
				
					|  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |             <el-input v-model="form.name" style="width: 336px" /> | 
			
		
	
		
			
				
					|  |  |  |             <el-input v-model="folderForm.name" style="width: 336px" /> | 
			
		
	
		
			
				
					|  |  |  |           </el-form-item> | 
			
		
	
		
			
				
					|  |  |  |           <el-form-item label="封面" prop="file"> | 
			
		
	
		
			
				
					|  |  |  |             <el-upload action="#" list-type="picture-card" :auto-upload="false"> | 
			
		
	
		
			
				
					|  |  |  |               <img src="@/assets/images/t-sc.png" alt /> | 
			
		
	
		
			
				
					|  |  |  |               <div slot="file" slot-scope="{file}"> | 
			
		
	
		
			
				
					|  |  |  |                 <img class="el-upload-list__item-thumbnail" :src="file.url" alt /> | 
			
		
	
		
			
				
					|  |  |  |               </div> | 
			
		
	
		
			
				
					|  |  |  |             </el-upload> | 
			
		
	
		
			
				
					|  |  |  |             <UploadCover ref="childUpload" /> | 
			
		
	
		
			
				
					|  |  |  |           </el-form-item> | 
			
		
	
		
			
				
					|  |  |  |         </el-form> | 
			
		
	
		
			
				
					|  |  |  |         <div slot="footer" class="dialog-footer"> | 
			
		
	
		
			
				
					|  |  |  |           <el-button type="primary" round>保 存</el-button> | 
			
		
	
		
			
				
					|  |  |  |           <el-button type="primary" round @click="submitFolderForm('folderForm')">保 存</el-button> | 
			
		
	
		
			
				
					|  |  |  |           <el-button round @click="mkdirVisible=false">取 消</el-button> | 
			
		
	
		
			
				
					|  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |       </el-dialog> | 
			
		
	
		
			
				
					|  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     <!-- 移动至layer --> | 
			
		
	
		
			
				
					|  |  |  |     <div class="wjj_layer"> | 
			
		
	
		
			
				
					|  |  |  |       <!-- width="736px" --> | 
			
		
	
	
		
			
				
					|  |  | @ -95,10 +102,20 @@ | 
			
		
	
		
			
				
					|  |  |  |   </div> | 
			
		
	
		
			
				
					|  |  |  | </template> | 
			
		
	
		
			
				
					|  |  |  | <script> | 
			
		
	
		
			
				
					|  |  |  | import { FetchThemeClassList, FetchThemeGallery } from '@/api/theme/theme.js' | 
			
		
	
		
			
				
					|  |  |  | import { FetchThemeClassList, FetchThemeGallery, FetchMyAlbum, FetchAddToMyAlbum, FetchDeleteMyAlbum, FetchSaveThemeFolder } from '@/api/theme/theme.js' | 
			
		
	
		
			
				
					|  |  |  | import { getSeconds, getFileFormat } from '@/utils/index.js' | 
			
		
	
		
			
				
					|  |  |  | import UploadCover from './upload_cover' | 
			
		
	
		
			
				
					|  |  |  | export default { | 
			
		
	
		
			
				
					|  |  |  |   name: 'ThemeGalleryList', | 
			
		
	
		
			
				
					|  |  |  |   components: {}, | 
			
		
	
		
			
				
					|  |  |  |   components: { UploadCover }, | 
			
		
	
		
			
				
					|  |  |  |   filters: { | 
			
		
	
		
			
				
					|  |  |  |     getSeconds(s) { | 
			
		
	
		
			
				
					|  |  |  |       return getSeconds(s) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     getFileFormat(s) { | 
			
		
	
		
			
				
					|  |  |  |       return getFileFormat(s) | 
			
		
	
		
			
				
					|  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   props: { | 
			
		
	
		
			
				
					|  |  |  |     isMultiSelected: { | 
			
		
	
		
			
				
					|  |  |  |       type: Boolean, | 
			
		
	
	
		
			
				
					|  |  | @ -115,73 +132,42 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   data() { | 
			
		
	
		
			
				
					|  |  |  |     return { | 
			
		
	
		
			
				
					|  |  |  |       themeItemActive: '1', | 
			
		
	
		
			
				
					|  |  |  |       mkdirVisible: false, | 
			
		
	
		
			
				
					|  |  |  |       orga_id: '133221333123111', // 机构ID | 
			
		
	
		
			
				
					|  |  |  |       themeListForm: { // 获取主题库 list | 
			
		
	
		
			
				
					|  |  |  |         theme_name: '', | 
			
		
	
		
			
				
					|  |  |  |         theme_class: '', | 
			
		
	
		
			
				
					|  |  |  |         device_direction: '', | 
			
		
	
		
			
				
					|  |  |  |         orga_id: '', | 
			
		
	
		
			
				
					|  |  |  |         start_time: '', | 
			
		
	
		
			
				
					|  |  |  |         end_time: '', | 
			
		
	
		
			
				
					|  |  |  |         folder_id: '', | 
			
		
	
		
			
				
					|  |  |  |         page: '', | 
			
		
	
		
			
				
					|  |  |  |         size: '' | 
			
		
	
		
			
				
					|  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |       page: 1, | 
			
		
	
		
			
				
					|  |  |  |       size: 10, | 
			
		
	
		
			
				
					|  |  |  |       total: 0, | 
			
		
	
		
			
				
					|  |  |  |       tabItem: [], // 主题库分类菜单 | 
			
		
	
		
			
				
					|  |  |  |       activeIndex: 0, | 
			
		
	
		
			
				
					|  |  |  |       themeItemActive: '1', // 横屏/ 竖屏/ 画册 activeIndex | 
			
		
	
		
			
				
					|  |  |  |       themeGalleryList: [], // 主题库的列表 | 
			
		
	
		
			
				
					|  |  |  |       movingVisible: false, | 
			
		
	
		
			
				
					|  |  |  |       movingChecked: null, | 
			
		
	
		
			
				
					|  |  |  |       form: { | 
			
		
	
		
			
				
					|  |  |  |         id: null, | 
			
		
	
		
			
				
					|  |  |  |       folderForm: { // form | 
			
		
	
		
			
				
					|  |  |  |         fid: '', | 
			
		
	
		
			
				
					|  |  |  |         id: '', | 
			
		
	
		
			
				
					|  |  |  |         img_path: '', | 
			
		
	
		
			
				
					|  |  |  |         name: '', | 
			
		
	
		
			
				
					|  |  |  |         file: null | 
			
		
	
		
			
				
					|  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |       themeGalleryList: [], // 主题库的列表 | 
			
		
	
		
			
				
					|  |  |  |       formatType: null, // 上传素材类型 0 img 1 video 2 audio | 
			
		
	
		
			
				
					|  |  |  |       materialImgPath: '', // 素材封面 | 
			
		
	
		
			
				
					|  |  |  |       materialDuration: 0, // 时长 | 
			
		
	
		
			
				
					|  |  |  |       materialName: '', // 素材名称 | 
			
		
	
		
			
				
					|  |  |  |       fileSize: '', // 大小 | 
			
		
	
		
			
				
					|  |  |  |       listThemeData: [ | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '1', | 
			
		
	
		
			
				
					|  |  |  |           name: '人工智能', | 
			
		
	
		
			
				
					|  |  |  |           type: 'JPG', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images//home/theme_Img_03.png'), | 
			
		
	
		
			
				
					|  |  |  |           time: '' | 
			
		
	
		
			
				
					|  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '2', | 
			
		
	
		
			
				
					|  |  |  |           name: '防控疫情小贴士', | 
			
		
	
		
			
				
					|  |  |  |           type: 'vedio', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images/background.jpg'), | 
			
		
	
		
			
				
					|  |  |  |           time: '03:00' | 
			
		
	
		
			
				
					|  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '3', | 
			
		
	
		
			
				
					|  |  |  |           name: '人工智能', | 
			
		
	
		
			
				
					|  |  |  |           type: 'JPG', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images//home/theme_Img_03.png'), | 
			
		
	
		
			
				
					|  |  |  |           time: '' | 
			
		
	
		
			
				
					|  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '4', | 
			
		
	
		
			
				
					|  |  |  |           name: '防控疫情小贴士', | 
			
		
	
		
			
				
					|  |  |  |           type: 'vedio', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images/background.jpg'), | 
			
		
	
		
			
				
					|  |  |  |           time: '03:00' | 
			
		
	
		
			
				
					|  |  |  |         orga_id: '' | 
			
		
	
		
			
				
					|  |  |  |       }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '5', | 
			
		
	
		
			
				
					|  |  |  |           name: '人工智能', | 
			
		
	
		
			
				
					|  |  |  |           type: 'JPG', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images//home/theme_Img_03.png'), | 
			
		
	
		
			
				
					|  |  |  |           time: '' | 
			
		
	
		
			
				
					|  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '6', | 
			
		
	
		
			
				
					|  |  |  |           name: '防控疫情小贴士', | 
			
		
	
		
			
				
					|  |  |  |           type: 'vedio', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images/background.jpg'), | 
			
		
	
		
			
				
					|  |  |  |           time: '03:00' | 
			
		
	
		
			
				
					|  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '7', | 
			
		
	
		
			
				
					|  |  |  |           name: '人工智能', | 
			
		
	
		
			
				
					|  |  |  |           type: 'JPG', | 
			
		
	
		
			
				
					|  |  |  |           coverImg: require('@/assets/images//home/theme_Img_03.png'), | 
			
		
	
		
			
				
					|  |  |  |           time: '' | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |       materialFolders: [], // 文件夹list | 
			
		
	
		
			
				
					|  |  |  |       selectedListIds: [], | 
			
		
	
		
			
				
					|  |  |  |       selectinFolderid: [], // 关联素材得主键得ID | 
			
		
	
		
			
				
					|  |  |  |       selectedMaterial: [], // 素材选中 | 
			
		
	
		
			
				
					|  |  |  |       thisAlbumFoldId: null, | 
			
		
	
		
			
				
					|  |  |  |       isEditFolder: false, // 是否编辑文件夹 | 
			
		
	
		
			
				
					|  |  |  |       mkdirVisible: false, // 新建编辑layer | 
			
		
	
		
			
				
					|  |  |  |       folderChecked: -1, // 文件夹是否单击选中 | 
			
		
	
		
			
				
					|  |  |  |       wjjList: [ | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           id: '1', | 
			
		
	
	
		
			
				
					|  |  | @ -191,17 +177,12 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |           id: '2', | 
			
		
	
		
			
				
					|  |  |  |           name: '文件夹2' | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |       uploadDialogVisible: false, | 
			
		
	
		
			
				
					|  |  |  |       uploadTitle: '上传', | 
			
		
	
		
			
				
					|  |  |  |       uploadListVisible: false, | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |       imgSrc: '', | 
			
		
	
		
			
				
					|  |  |  |       videoSrc: '', | 
			
		
	
		
			
				
					|  |  |  |       audioSrc: '', | 
			
		
	
		
			
				
					|  |  |  |       // 导航栏的lsit | 
			
		
	
		
			
				
					|  |  |  |       tabItem: [], | 
			
		
	
		
			
				
					|  |  |  |       activeIndex: 0 | 
			
		
	
		
			
				
					|  |  |  |       ] | 
			
		
	
		
			
				
					|  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   computed: { | 
			
		
	
		
			
				
					|  |  |  |     defaultImg() { | 
			
		
	
		
			
				
					|  |  |  |       return 'this.src="' + require('@/assets/images/menu_bg_02.png') + '"' | 
			
		
	
		
			
				
					|  |  |  |     } | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   watch: { | 
			
		
	
	
		
			
				
					|  |  | @ -213,7 +194,7 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   mounted() { | 
			
		
	
		
			
				
					|  |  |  |     this.getThemeClassList() | 
			
		
	
		
			
				
					|  |  |  |     this.getThemeGallery() | 
			
		
	
		
			
				
					|  |  |  |     this.getMyAlbum() | 
			
		
	
		
			
				
					|  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |   methods: { | 
			
		
	
		
			
				
					|  |  |  |     // 根据机构id查询主题库分类列表 | 
			
		
	
	
		
			
				
					|  |  | @ -222,99 +203,225 @@ export default { | 
			
		
	
		
			
				
					|  |  |  |       FetchThemeClassList(orga_id).then(res => { | 
			
		
	
		
			
				
					|  |  |  |         if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |           this.tabItem = res.data | 
			
		
	
		
			
				
					|  |  |  |           this.getThemeGallery() | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 获取主题库list | 
			
		
	
		
			
				
					|  |  |  |     getThemeGallery() { | 
			
		
	
		
			
				
					|  |  |  |       const params = this.queryInfo | 
			
		
	
		
			
				
					|  |  |  |       // FetchThemeGallery(params).then(res => { | 
			
		
	
		
			
				
					|  |  |  |       //   console.log(res) | 
			
		
	
		
			
				
					|  |  |  |       //   if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |       //     this.themeGalleryList = res.data.content | 
			
		
	
		
			
				
					|  |  |  |       //     console.log(this.themeGalleryList) | 
			
		
	
		
			
				
					|  |  |  |       //     this.total = res.data.totalElements | 
			
		
	
		
			
				
					|  |  |  |       //   } | 
			
		
	
		
			
				
					|  |  |  |       // }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 主题分类菜单-操作 | 
			
		
	
		
			
				
					|  |  |  |     tabThemeClassifyClick(tab) { | 
			
		
	
		
			
				
					|  |  |  |       this.activeIndex = tab.index | 
			
		
	
		
			
				
					|  |  |  |       if (this.themeItemActive == 3) { | 
			
		
	
		
			
				
					|  |  |  |         this.getMyAlbum() | 
			
		
	
		
			
				
					|  |  |  |       } else { | 
			
		
	
		
			
				
					|  |  |  |         this.themeGalleryList = [] | 
			
		
	
		
			
				
					|  |  |  |         this.getThemeGallery() | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // tabClick | 
			
		
	
		
			
				
					|  |  |  |     tabItemClick(tab, event) { | 
			
		
	
		
			
				
					|  |  |  |       console.log(this.themeItemActive) | 
			
		
	
		
			
				
					|  |  |  |       console.log(tab, event) | 
			
		
	
		
			
				
					|  |  |  |     // 横屏 / 竖屏 / 画册切换 | 
			
		
	
		
			
				
					|  |  |  |     tabItemClick() { | 
			
		
	
		
			
				
					|  |  |  |       if (this.themeItemActive == 3) { | 
			
		
	
		
			
				
					|  |  |  |         this.getMyAlbum() | 
			
		
	
		
			
				
					|  |  |  |       } else { | 
			
		
	
		
			
				
					|  |  |  |         this.themeGalleryList = [] | 
			
		
	
		
			
				
					|  |  |  |         this.getThemeGallery() | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 上传 | 
			
		
	
		
			
				
					|  |  |  |     // saveMaterial() { | 
			
		
	
		
			
				
					|  |  |  |     //   console.log('-----------') | 
			
		
	
		
			
				
					|  |  |  |     //   console.log(this.formatType) | 
			
		
	
		
			
				
					|  |  |  |     //   this.uploadDialogVisible = true | 
			
		
	
		
			
				
					|  |  |  |     //   this.$nextTick(() => { | 
			
		
	
		
			
				
					|  |  |  |     //     if (formatType == 0) { | 
			
		
	
		
			
				
					|  |  |  |     //       this.imgSrc = this.$refs.uploadMaterial.uploadFileUrl | 
			
		
	
		
			
				
					|  |  |  |     //     } else if (formatType == 1) { | 
			
		
	
		
			
				
					|  |  |  |     //       this.videoSrc = this.$refs.uploadMaterial.uploadFileUrl | 
			
		
	
		
			
				
					|  |  |  |     //     } else { | 
			
		
	
		
			
				
					|  |  |  |     //       this.audioSrc = this.$refs.uploadMaterial.uploadFileUrl | 
			
		
	
		
			
				
					|  |  |  |     //     } | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     //     // console.log(this.formatType) | 
			
		
	
		
			
				
					|  |  |  |     //     const duration = this.$refs.uploadMaterial.duration | 
			
		
	
		
			
				
					|  |  |  |     //     this.fileSize = this.$refs.uploadMaterial.fileSize | 
			
		
	
		
			
				
					|  |  |  |     //     // 主题名称 | 
			
		
	
		
			
				
					|  |  |  |     //     this.materialName = this.$refs.uploadMaterial.fileNames | 
			
		
	
		
			
				
					|  |  |  |     //     // 图片音频视频 类别 | 
			
		
	
		
			
				
					|  |  |  |     //     const formatType = this.$refs.uploadMaterial.formatType | 
			
		
	
		
			
				
					|  |  |  |     //     console.log(this.$refs.uploadMaterial.uploadFileUrl) | 
			
		
	
		
			
				
					|  |  |  |     //   }) | 
			
		
	
		
			
				
					|  |  |  |     //   const params = { | 
			
		
	
		
			
				
					|  |  |  |     //     class_ids: this.class_ids, // 主题库头部id集合 | 
			
		
	
		
			
				
					|  |  |  |     //     deposit_url: this.uploadFileUrl, // 素材存放路径 | 
			
		
	
		
			
				
					|  |  |  |     //     device_direction: this.classifyForm.direction, // 横竖屏 | 
			
		
	
		
			
				
					|  |  |  |     //     material_id: null, | 
			
		
	
		
			
				
					|  |  |  |     //     folder_id: null, // 文件夹的id | 
			
		
	
		
			
				
					|  |  |  |     //     img_path: this.materialImgPath, // 封面图片的id | 
			
		
	
		
			
				
					|  |  |  |     //     material_type: this.formatType, | 
			
		
	
		
			
				
					|  |  |  |     //     file_size: this.fileSize, // 文件大小 | 
			
		
	
		
			
				
					|  |  |  |     //     orga_id: this.queryInfo.orga_id, // 机构id | 
			
		
	
		
			
				
					|  |  |  |     //     store_type: 2// 库类型 1.素材库 2.主题库 | 
			
		
	
		
			
				
					|  |  |  |     //   } | 
			
		
	
		
			
				
					|  |  |  |     // }, | 
			
		
	
		
			
				
					|  |  |  |     // resetForm() { | 
			
		
	
		
			
				
					|  |  |  |     //   this.addDialogVisible = false | 
			
		
	
		
			
				
					|  |  |  |     //   this.uploadDialogVisible = false | 
			
		
	
		
			
				
					|  |  |  |     //   this.$refs.classifyForm.resetFields() | 
			
		
	
		
			
				
					|  |  |  |     // }, | 
			
		
	
		
			
				
					|  |  |  |     // 创建文件夹 | 
			
		
	
		
			
				
					|  |  |  |     handleMkdir() { | 
			
		
	
		
			
				
					|  |  |  |       this.mkdirVisible = true | 
			
		
	
		
			
				
					|  |  |  |     // 获取主题库list | 
			
		
	
		
			
				
					|  |  |  |     getThemeGallery() { | 
			
		
	
		
			
				
					|  |  |  |       this.themeListForm.orga_id = this.orga_id | 
			
		
	
		
			
				
					|  |  |  |       this.themeListForm.theme_class = this.tabItem[this.activeIndex].id | 
			
		
	
		
			
				
					|  |  |  |       this.themeListForm.device_direction = this.themeItemActive == 1 ? 2 : 1 | 
			
		
	
		
			
				
					|  |  |  |       this.themeListForm.page = this.page | 
			
		
	
		
			
				
					|  |  |  |       this.themeListForm.size = this.size | 
			
		
	
		
			
				
					|  |  |  |       FetchThemeGallery(this.themeListForm).then(res => { | 
			
		
	
		
			
				
					|  |  |  |         if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |           this.themeGalleryList = res.data.content | 
			
		
	
		
			
				
					|  |  |  |           this.total = res.data.totalElements | 
			
		
	
		
			
				
					|  |  |  |         } else { | 
			
		
	
		
			
				
					|  |  |  |           this.$message.error(res.msg) | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 移动至 | 
			
		
	
		
			
				
					|  |  |  |     moveingTo(index) { | 
			
		
	
		
			
				
					|  |  |  |       this.movingVisible = true | 
			
		
	
		
			
				
					|  |  |  |       // this.movingChecked = index | 
			
		
	
		
			
				
					|  |  |  |     // 获取我的画册 list | 
			
		
	
		
			
				
					|  |  |  |     getMyAlbum() { | 
			
		
	
		
			
				
					|  |  |  |       const params = { | 
			
		
	
		
			
				
					|  |  |  |         theme_name: null, | 
			
		
	
		
			
				
					|  |  |  |         theme_class: null, | 
			
		
	
		
			
				
					|  |  |  |         device_direction: null, | 
			
		
	
		
			
				
					|  |  |  |         orga_id: this.orga_id, | 
			
		
	
		
			
				
					|  |  |  |         start_time: null, | 
			
		
	
		
			
				
					|  |  |  |         end_time: null, | 
			
		
	
		
			
				
					|  |  |  |         folder_id: null | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |       FetchMyAlbum(params).then(res => { | 
			
		
	
		
			
				
					|  |  |  |         if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |           this.materialFolders = res.data.materialFolders | 
			
		
	
		
			
				
					|  |  |  |           this.themeGalleryList = res.data.pageThemeVO | 
			
		
	
		
			
				
					|  |  |  |           this.isAlbumList = res.data.pageThemeVO | 
			
		
	
		
			
				
					|  |  |  |           this.thisAlbumFoldId = res.data.thisFoldId | 
			
		
	
		
			
				
					|  |  |  |         } else { | 
			
		
	
		
			
				
					|  |  |  |           this.$message.error(res.msg) | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 选择文件夹 | 
			
		
	
		
			
				
					|  |  |  |     wjjSelected(index) { | 
			
		
	
		
			
				
					|  |  |  |       this.movingChecked = index | 
			
		
	
		
			
				
					|  |  |  |       console.log(this.movingChecked) | 
			
		
	
		
			
				
					|  |  |  |     // 添加到画册 | 
			
		
	
		
			
				
					|  |  |  |     addToAlbum() { | 
			
		
	
		
			
				
					|  |  |  |       const isRepeatItem = this.isAlbumList.filter(item => { | 
			
		
	
		
			
				
					|  |  |  |         return this.selectedListIds.indexOf(item.material_id) != -1 | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |       console.log(isRepeatItem) | 
			
		
	
		
			
				
					|  |  |  |       if (isRepeatItem.length != 0) { | 
			
		
	
		
			
				
					|  |  |  |         this.$message.error('选中得素材,我的画册里已存在,请勿重复添加!') | 
			
		
	
		
			
				
					|  |  |  |         return | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |       const params = { | 
			
		
	
		
			
				
					|  |  |  |         id: this.thisAlbumFoldId, // 文件夹id | 
			
		
	
		
			
				
					|  |  |  |         material_ids: this.selectedListIds, // 主题素材id集合 | 
			
		
	
		
			
				
					|  |  |  |         orga_id: this.orga_id | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |       FetchAddToMyAlbum(params).then(res => { | 
			
		
	
		
			
				
					|  |  |  |         if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |           console.log(res) | 
			
		
	
		
			
				
					|  |  |  |           this.$message.success('已成功添加到我的画册里啦~') | 
			
		
	
		
			
				
					|  |  |  |         } else { | 
			
		
	
		
			
				
					|  |  |  |           this.$message.error(res.msg) | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 删除我的画册里的素材 | 
			
		
	
		
			
				
					|  |  |  |     deltMyAlbumItem() { | 
			
		
	
		
			
				
					|  |  |  |       const params = { | 
			
		
	
		
			
				
					|  |  |  |         ids: this.selectinFolderid | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |       FetchDeleteMyAlbum(params).then(res => { | 
			
		
	
		
			
				
					|  |  |  |         if (res.code == 200) { | 
			
		
	
		
			
				
					|  |  |  |           this.$message.success(res.msg) | 
			
		
	
		
			
				
					|  |  |  |           this.getMyAlbum() | 
			
		
	
		
			
				
					|  |  |  |         } else { | 
			
		
	
		
			
				
					|  |  |  |           this.$message.error(res.msg) | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 多选选中 | 
			
		
	
		
			
				
					|  |  |  |     selectedItem(id) { | 
			
		
	
		
			
				
					|  |  |  |     selectedItem(item) { | 
			
		
	
		
			
				
					|  |  |  |       const id = item.material_id | 
			
		
	
		
			
				
					|  |  |  |       const inFolderId = item.in_folder_id | 
			
		
	
		
			
				
					|  |  |  |       // const type = item.material_type | 
			
		
	
		
			
				
					|  |  |  |       const arr = this.selectedListIds | 
			
		
	
		
			
				
					|  |  |  |       // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效 | 
			
		
	
		
			
				
					|  |  |  |       if (arr.includes(id)) { | 
			
		
	
		
			
				
					|  |  |  |         // 判断数组中是否有选中的id,如果有则去掉 | 
			
		
	
		
			
				
					|  |  |  |         const index = arr.indexOf(id) | 
			
		
	
		
			
				
					|  |  |  |         if (index > -1) { | 
			
		
	
		
			
				
					|  |  |  |           arr.splice(index, 1) | 
			
		
	
		
			
				
					|  |  |  |           this.selectinFolderid.splice(index, 1) | 
			
		
	
		
			
				
					|  |  |  |           this.selectedMaterial.splice(index, 1) | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       } else { | 
			
		
	
		
			
				
					|  |  |  |         this.selectedListIds.push(id) | 
			
		
	
		
			
				
					|  |  |  |         this.selectinFolderid.push(inFolderId) | 
			
		
	
		
			
				
					|  |  |  |         this.selectedMaterial.push(item) | 
			
		
	
		
			
				
					|  |  |  |         // this.formatType = type | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 新建 / 编辑 文件夹 | 
			
		
	
		
			
				
					|  |  |  |     handleMkdir(mkdirType) { | 
			
		
	
		
			
				
					|  |  |  |       this.mkdirVisible = true | 
			
		
	
		
			
				
					|  |  |  |       this.folderForm.fid = this.thisFoldId | 
			
		
	
		
			
				
					|  |  |  |       this.folderForm.orga_id = this.orga_id | 
			
		
	
		
			
				
					|  |  |  |       if (mkdirType === 0) { | 
			
		
	
		
			
				
					|  |  |  |         this.$nextTick(() => { | 
			
		
	
		
			
				
					|  |  |  |           this.$refs.childUpload.imageUrl = '' | 
			
		
	
		
			
				
					|  |  |  |           this.folderForm.img_path = '' | 
			
		
	
		
			
				
					|  |  |  |           this.folderForm.name = '' | 
			
		
	
		
			
				
					|  |  |  |         }) | 
			
		
	
		
			
				
					|  |  |  |         delete this.folderForm.id | 
			
		
	
		
			
				
					|  |  |  |       } else { | 
			
		
	
		
			
				
					|  |  |  |         this.$nextTick(() => { | 
			
		
	
		
			
				
					|  |  |  |           this.$refs.childUpload.imageUrl = this.folderForm.img_path | 
			
		
	
		
			
				
					|  |  |  |         }) | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 文件夹双击操作 | 
			
		
	
		
			
				
					|  |  |  |     floderDbClick(item, index) { | 
			
		
	
		
			
				
					|  |  |  |       this.isEditMaterial = false | 
			
		
	
		
			
				
					|  |  |  |       this.$router.replace( | 
			
		
	
		
			
				
					|  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |           path: '/content', query: { folderTag: 1 } | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       ) | 
			
		
	
		
			
				
					|  |  |  |       this.currentFolder = item.name | 
			
		
	
		
			
				
					|  |  |  |       this.currentFolderId = item.id | 
			
		
	
		
			
				
					|  |  |  |       localStorage.setItem('currentFolder', this.currentFolder) | 
			
		
	
		
			
				
					|  |  |  |       localStorage.setItem('currentFolderId', this.currentFolderId) | 
			
		
	
		
			
				
					|  |  |  |       this.getMaterialList() | 
			
		
	
		
			
				
					|  |  |  |       this.selectedListId = [] | 
			
		
	
		
			
				
					|  |  |  |       this.folderChecked = -1 | 
			
		
	
		
			
				
					|  |  |  |       this.isEditFolder = false | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 点击其他区域选中的文件夹 去掉选中样式 | 
			
		
	
		
			
				
					|  |  |  |     hiddenFolderActiveClick() { | 
			
		
	
		
			
				
					|  |  |  |       this.folderChecked = -1 | 
			
		
	
		
			
				
					|  |  |  |       this.isEditFolder = false | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 选择 编辑 文件夹 | 
			
		
	
		
			
				
					|  |  |  |     editFolder(item, index) { | 
			
		
	
		
			
				
					|  |  |  |       this.isEditMaterial = false | 
			
		
	
		
			
				
					|  |  |  |       this.selectedListId = [] | 
			
		
	
		
			
				
					|  |  |  |       // 有选择中的文件夹时,同时存在素材多选操作时 | 
			
		
	
		
			
				
					|  |  |  |       this.$emit('changedMultiSelected') | 
			
		
	
		
			
				
					|  |  |  |       if (index != this.folderChecked) { | 
			
		
	
		
			
				
					|  |  |  |         this.folderChecked = index | 
			
		
	
		
			
				
					|  |  |  |         this.isEditFolder = true | 
			
		
	
		
			
				
					|  |  |  |         this.folderForm = { | 
			
		
	
		
			
				
					|  |  |  |           fid: item.fid, | 
			
		
	
		
			
				
					|  |  |  |           id: item.id, | 
			
		
	
		
			
				
					|  |  |  |           name: item.name, | 
			
		
	
		
			
				
					|  |  |  |           img_path: item.imgPath, | 
			
		
	
		
			
				
					|  |  |  |           orga_id: item.orgaId | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       } else { | 
			
		
	
		
			
				
					|  |  |  |         this.folderChecked = -1 | 
			
		
	
		
			
				
					|  |  |  |         this.isEditFolder = false | 
			
		
	
		
			
				
					|  |  |  |       } | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 提交表单 - 新建/编辑 | 
			
		
	
		
			
				
					|  |  |  |     submitFolderForm(formName) { | 
			
		
	
		
			
				
					|  |  |  |       this.folderForm.img_path = this.$refs.childUpload.imageUrl | 
			
		
	
		
			
				
					|  |  |  |       this.$refs[formName].validate((valid) => { | 
			
		
	
		
			
				
					|  |  |  |         if (valid) { | 
			
		
	
		
			
				
					|  |  |  |           // FetchSaveThemeFolder(this.folderForm).then(res => { | 
			
		
	
		
			
				
					|  |  |  |           //   if (res.code === 200) { | 
			
		
	
		
			
				
					|  |  |  |           //     this.$message({ | 
			
		
	
		
			
				
					|  |  |  |           //       message: '创建文件夹成功', | 
			
		
	
		
			
				
					|  |  |  |           //       duration: 2000, | 
			
		
	
		
			
				
					|  |  |  |           //       type: 'success' | 
			
		
	
		
			
				
					|  |  |  |           //     }) | 
			
		
	
		
			
				
					|  |  |  |           //     this.mkdirVisible = false | 
			
		
	
		
			
				
					|  |  |  |           //     this.getMaterialList() | 
			
		
	
		
			
				
					|  |  |  |           //   } else { | 
			
		
	
		
			
				
					|  |  |  |           //     this.$message({ | 
			
		
	
		
			
				
					|  |  |  |           //       message: '创建文件夹失败', | 
			
		
	
		
			
				
					|  |  |  |           //       duration: 2000, | 
			
		
	
		
			
				
					|  |  |  |           //       type: 'warning' | 
			
		
	
		
			
				
					|  |  |  |           //     }) | 
			
		
	
		
			
				
					|  |  |  |           //   } | 
			
		
	
		
			
				
					|  |  |  |           // }) | 
			
		
	
		
			
				
					|  |  |  |         } else { | 
			
		
	
		
			
				
					|  |  |  |           console.log('error submit!!') | 
			
		
	
		
			
				
					|  |  |  |           return false | 
			
		
	
		
			
				
					|  |  |  |         } | 
			
		
	
		
			
				
					|  |  |  |       }) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 移动至 | 
			
		
	
		
			
				
					|  |  |  |     moveingTo(index) { | 
			
		
	
		
			
				
					|  |  |  |       this.movingVisible = true | 
			
		
	
		
			
				
					|  |  |  |       // this.movingChecked = index | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |     // 选择文件夹 | 
			
		
	
		
			
				
					|  |  |  |     wjjSelected(index) { | 
			
		
	
		
			
				
					|  |  |  |       this.movingChecked = index | 
			
		
	
		
			
				
					|  |  |  |       console.log(this.movingChecked) | 
			
		
	
		
			
				
					|  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |     // 即时发布/定时发布 | 
			
		
	
		
			
				
					|  |  |  |     publishHandle(index) { | 
			
		
	
		
			
				
					|  |  |  |       this.$router.push( | 
			
		
	
	
		
			
				
					|  |  | @ -335,6 +442,7 @@ export default { | 
			
		
	
		
			
				
					|  |  |  | } | 
			
		
	
		
			
				
					|  |  |  | .theme_img { | 
			
		
	
		
			
				
					|  |  |  |   .theme_mkdir { | 
			
		
	
		
			
				
					|  |  |  |     position: relative; | 
			
		
	
		
			
				
					|  |  |  |     width: 140px; | 
			
		
	
		
			
				
					|  |  |  |     height: 250px; | 
			
		
	
		
			
				
					|  |  |  |     margin: 0 24px 24px 0; | 
			
		
	
	
		
			
				
					|  |  | 
 |