主题库-component

src/assets/styles/adminIndex.scss

@@ -259,8 +259,20 @@
     background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
     background-size: 98px 98px;
   }
+  .item_player {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50px;
+    height: 50px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    margin: -25px 0 0 -25px;
+    z-index: 999;
+  }
+}
 
-  .item_format {
+.item_format {
   display: flex;
   position: absolute;
   left: 0;
@@ -279,18 +291,6 @@
     line-height: 18px;
     border-radius: 9px;
   }
-  }
-  .item_player {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 50px;
-    height: 50px;
-    background: rgba(255, 255, 255, 0.5);
-    border-radius: 50%;
-    margin: -25px 0 0 -25px;
-    z-index: 999;
-  }
 }
 
 .file_name {
@@ -310,6 +310,7 @@
   position: absolute;
   top: 14px;
   right: 26px;
+  z-index: 999;
 
   .el-button {
     padding: 8px 20px;
@@ -459,6 +460,25 @@
     }
   }
 }
+// 主题库list
+.theme_img {
+  display: flex;
+  flex-wrap: wrap;
+  .theme_item{
+    position: relative;
+    width: 160px;
+    height: 284px;
+    border: 1px solid #f0f0f0;
+    border-radius: 4px;
+    overflow: hidden;
+    margin: 0 24px 24px 0;
+  }
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
 // 素材库/主题库选中
 .checked_btn {
   position: absolute;
@@ -477,4 +497,5 @@
     background: url(~@/assets/images/selected.png) no-repeat;
   }
 }
+
 // end

src/router/routers.js

@@ -164,10 +164,19 @@ export const constantRouterMap = [
         icon: 'edit'
       }
     },
+    {
+      path: '/theme',
+      component: () => import('@/views/ThemeGallery/index'),
+      meta: {
+        title: '主题库',
+        icon: 'edit'
+      }
+    },
     {
       path: '/release',
       component: () => import('@/views/immediateRelease/index')
-    }]
+    }
+    ]
   }
   // {
   //   path: '/user',

src/views/ThemeGallery/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="theme">
+    <!-- 右上角btn -->
+    <div class="home_publish_btn">
+      <el-button round @click="publishHandle(0)">即时发布</el-button>
+      <el-button round type="primary" @click="publishHandle(1)">定时发布</el-button>
+      <el-button round class="publish_muilt_btn" @click="multiSelectBtn">{{ mulitText }}</el-button>
+    </div>
+    <!-- tab-btn -->
+    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="为你推荐" name="1" />
+      <el-tab-pane label="人工智能" name="2" />
+      <el-tab-pane label="党建文化" name="3" />
+      <el-tab-pane label="节日节气" name="4" />
+      <el-tab-pane label="艺术鉴赏" name="5" />
+      <el-tab-pane label="名人介绍" name="6" />
+      <el-tab-pane label="摄影" name="7" />
+      <el-tab-pane label="书法" name="8" />
+    </el-tabs> -->
+    <!-- 主题库list -->
+    <ThemeGalleryList
+      ref="ThemeGalleryList"
+      :is-multi-selected="isMultiSelected"
+      :mulit-text="mulitText"
+      :show-item-info="showItemInfo"
+    />
+  </div>
+</template>
+
+<script>
+import ThemeGalleryList from '../components/ThemeGalleryList.vue'
+export default {
+  name: 'ThemeGallery',
+  components: { ThemeGalleryList },
+  data() {
+    return {
+      activeName: '1',
+      mulitText: '多选',
+      isMultiSelected: false,
+      showItemInfo: true
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 多选btn
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+    },
+    publishHandle(index) {
+      this.$router.push(
+        {
+          path: '/release', query: { tag: index }
+        }
+      )
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.theme {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  margin-top: 24px;
+  padding-top: 8px;
+  border-radius: 4px;
+  min-height: calc(100vh - 384px);
+  ::v-deep .el-tabs__header {
+    padding: 0 26px;
+  }
+  .el-tabs{
+    margin-bottom: 0;
+  }
+  ::v-deep .el-tabs__item {
+    font-size: 16px;
+    height: 50px;
+    line-height: 50px;
+  }
+  ::v-deep .el-tabs__active-bar {
+    height: 3px;
+  }
+  .publish_muilt_btn{
+    padding: 6px 20px;
+    border: 1px solid #3a8aeb;
+    color: #3a8aeb;
+  }
+}
+</style>

src/views/components/ThemeGalleryList.vue

@@ -0,0 +1,157 @@
+<template>
+  <div>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="为你推荐" name="1" />
+      <el-tab-pane label="人工智能" name="2" />
+      <el-tab-pane label="党建文化" name="3" />
+      <el-tab-pane label="节日节气" name="4" />
+      <el-tab-pane label="艺术鉴赏" name="5" />
+      <el-tab-pane label="名人介绍" name="6" />
+      <el-tab-pane label="摄影" name="7" />
+      <el-tab-pane label="书法" name="8" />
+    </el-tabs>
+    <div class="theme_img">
+      <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-if="showItemInfo" class="item_format">
+          <span class="item_type">{{ item.type }}</span>
+          <span v-if="item.type !== 'JPG'" class="item_time">03:00</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>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ThemeGalleryList',
+  props: {
+    isMultiSelected: {
+      type: Boolean,
+      required: true
+    },
+    mulitText: {
+      type: String,
+      required: true
+    },
+    showItemInfo: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      activeName: '1',
+      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'
+        },
+        {
+          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: ''
+        }
+      ],
+      selectedListIds: []
+    }
+  },
+  watch: {
+    isMultiSelected(newName, oldName) {
+      if (newName === false) {
+        this.selectedListIds = []
+      }
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // tabClick
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 多选选中
+    selectedItem(id) {
+      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)
+        }
+      } else {
+        this.selectedListIds.push(id)
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-tabs{
+  margin-bottom: 0;
+}
+.theme_img {
+  padding-left: 26px;
+  height: calc(100vh - 449px);
+  overflow-y: auto;
+  .file_name{
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 30px;
+    background: rgba(255,255,255,0.6);
+    line-height: 30px;
+  }
+}
+
+</style>

src/views/dashboard/HomeThemeGallery.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="theme">
+    <!-- 右上角btn -->
+    <div class="home_publish_btn">
+      <el-button round @click="publishHandle(0)">即时发布</el-button>
+      <el-button round type="primary" @click="publishHandle(1)">定时发布</el-button>
+      <el-button round class="publish_muilt_btn" @click="multiSelectBtn">{{ mulitText }}</el-button>
+    </div>
+    <!-- tab-btn -->
+
+    <!-- 主题库list -->
+    <ThemeGalleryList
+      ref="ThemeGalleryList"
+      :is-multi-selected="isMultiSelected"
+      :mulit-text="mulitText"
+    />
+  </div>
+</template>
+
+<script>
+import ThemeGalleryList from '../components/ThemeGalleryList.vue'
+export default {
+  name: 'ThemeGallery',
+  components: { ThemeGalleryList },
+  data() {
+    return {
+      mulitText: '多选',
+      isMultiSelected: false
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    // 多选btn
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+    },
+    publishHandle(index) {
+      this.$router.push(
+        {
+          path: '/release', query: { tag: index }
+        }
+      )
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.theme {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  margin-top: 24px;
+  padding-top: 8px;
+  border-radius: 4px;
+  min-height: calc(100vh - 384px);
+  ::v-deep .el-tabs__header {
+    padding: 0 26px;
+  }
+
+  ::v-deep .el-tabs__item {
+    font-size: 16px;
+    height: 50px;
+    line-height: 50px;
+  }
+  ::v-deep .el-tabs__active-bar {
+    height: 3px;
+  }
+  .publish_muilt_btn{
+    padding: 6px 20px;
+    border: 1px solid #3a8aeb;
+    color: #3a8aeb;
+  }
+}
+</style>

src/views/dashboard/ThemeGallery.vue

@@ -1,206 +0,0 @@
-<template>
-  <div class="theme">
-    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <el-tab-pane label="为你推荐" name="1">
-        <div class="theme_img">
-          <div
-            v-for="(item, index) in listData"
-            :key="index"
-            :class="['theme_item', { 'item_multi': contentIds.includes(item.id) }]"
-          >
-            <img
-              :src="item.coverImg"
-              alt
-            />
-            <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span>
-          </div>
-        </div>
-      </el-tab-pane>
-      <el-tab-pane label="人工智能" name="2">人工智能</el-tab-pane>
-      <el-tab-pane label="党建文化" name="3">党建文化</el-tab-pane>
-      <el-tab-pane label="节日节气" name="4">节日节气</el-tab-pane>
-      <el-tab-pane label="艺术鉴赏" name="5">艺术鉴赏</el-tab-pane>
-      <el-tab-pane label="名人介绍" name="6">名人介绍</el-tab-pane>
-      <el-tab-pane label="摄影" name="7">摄影</el-tab-pane>
-      <el-tab-pane label="书法" name="8">书法</el-tab-pane>
-    </el-tabs>
-    <div class="home_publish_btn">
-      <el-button round @click="publishHandle(0)">即时发布</el-button>
-      <el-button round type="primary" @click="publishHandle(1)">定时发布</el-button>
-      <el-button round class="publish_muilt_btn" @click="multiSelectBtn">{{ mulitText }}</el-button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ThemeGallery',
-  data() {
-    return {
-      activeName: '1',
-      mulitText: '多选',
-      isMultiSelected: false,
-      listData: [
-        {
-          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'
-        },
-        {
-          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: ''
-        },
-        {
-          id: '8',
-          name: '防控疫情小贴士',
-          type: 'vedio',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: '03:00'
-        },
-        {
-          id: '9',
-          name: '人工智能',
-          type: 'JPG',
-          coverImg: require('@/assets/images//home/theme_Img_03.png'),
-          time: ''
-        },
-        {
-          id: '10',
-          name: '防控疫情小贴士',
-          type: 'vedio',
-          coverImg: require('@/assets/images/background.jpg'),
-          time: '03:00'
-        }
-      ],
-      contentIds: []
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-    // 多选btn
-    multiSelectBtn() {
-      this.isMultiSelected = !this.isMultiSelected
-      if (this.isMultiSelected) {
-        this.mulitText = '取消'
-      } else {
-        this.mulitText = '多选'
-      }
-      // this.$refs.MaterialList.multiSelectList()
-    },
-    // 多选选中
-    selectedItem(id) {
-      const arr = this.contentIds
-      // includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
-      if (arr.includes(id)) {
-        // 判断数组中是否有选中的id,如果有则去掉
-        const index = arr.indexOf(id)
-        if (index > -1) {
-          arr.splice(index, 1)
-        }
-      } else {
-        this.contentIds.push(id)
-      }
-    },
-    publishHandle(index) {
-      this.$router.push(
-        {
-          path: '/release', query: { tag: index }
-        }
-      )
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-.theme {
-  position: relative;
-  width: 100%;
-  background: #fff;
-  margin-top: 24px;
-  padding-top: 8px;
-  border-radius: 4px;
-  min-height: calc(100vh - 384px);
-  ::v-deep .el-tabs__header {
-    padding: 0 26px;
-  }
-  ::v-deep .el-tabs__item {
-    font-size: 16px;
-    height: 50px;
-    line-height: 50px;
-  }
-  ::v-deep .el-tabs__active-bar {
-    height: 3px;
-  }
-
-  .theme_img {
-    display: flex;
-    flex-wrap: wrap;
-    padding-left: 26px;
-    height: calc(100vh - 449px);
-    overflow-y: auto;
-    .theme_item{
-      position: relative;
-      width: 160px;
-      height: 284px;
-      border: 1px solid #f0f0f0;
-      border-radius: 4px;
-      margin: 0 24px 24px 0;
-      overflow: hidden;
-    }
-    img {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .publish_muilt_btn{
-    padding: 6px 20px;
-    border: 1px solid #3a8aeb;
-    color: #3a8aeb;
-  }
-}
-</style>

src/views/home.vue

@@ -15,7 +15,7 @@
         <device-data />
         <agency-data />
       </el-row>
-      <theme-gallery />
+      <home-theme-gallery />
     </div>
   </div>
 </template>
@@ -24,14 +24,14 @@
 import PublishProcess from './dashboard/PublishProcess'
 import DeviceData from './dashboard/DeviceData'
 import AgencyData from './dashboard/AgencyData'
-import ThemeGallery from './dashboard/ThemeGallery'
+import HomeThemeGallery from './dashboard/HomeThemeGallery'
 export default {
   name: 'Dashboard',
   components: {
     PublishProcess,
     DeviceData,
     AgencyData,
-    ThemeGallery
+    HomeThemeGallery
   },
   data() {
     return {

src/views/immediateRelease/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="app-container">
     <el-form ref="form" :model="form" size="small">
+      <!-- 创建标题 -->
       <el-row class="in_release_item" type="flex" justify="space-between">
         <el-col :span="3" class="item_title">创建{{ publishType === 0 ? "即时发布" : "定时发布" }}</el-col>
         <el-col :span="18">
@@ -107,12 +108,12 @@
           <div class="step_select_list">
             <div class="step_upload" @click="selectContVisible = true"></div>
             <draggable
-              v-model="listData"
+              v-model="listSelectedData"
               class="drag_list"
               @end="dragEnd"
             >
               <div
-                v-for="(item, index) in listData"
+                v-for="(item, index) in listSelectedData"
                 :key="index"
                 :class="['material_item', 'item_cont']"
                 @click="selectedItem(item.id,item)"
@@ -141,6 +142,7 @@
           </div>
         </el-col>
       </el-row>
+      <!-- 第三步-选择设备 -->
       <el-row class="in_release_item">
         <el-col class="step_1">第三步：选择设备</el-col>
         <el-col class="step_form">
@@ -185,7 +187,7 @@
         :close-on-click-modal="false"
         :show-close="false"
         :visible.sync="selectContVisible"
-        width="1000px"
+        width="1200px"
       >
         <div slot="title" class="layer_tab_title">
           <span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span>
@@ -205,8 +207,7 @@
             <div
               v-for="(item, index) in listData"
               :key="index"
-              :class="['material_item', 'item_cont']"
-              @click="selectedItem(item.id,item)"
+              :class="['material_item', 'item_cont',{ 'item_multi': uploadContentIds.includes(item.id) }]"
             >
               <img v-if="item.coverImg" :src="item.coverImg" alt />
               <div v-if="item.type == 'audio'" class="radio_img"></div>
@@ -215,42 +216,29 @@
                 <span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
               </div>
               <div class="file_name">{{ item.name }}</div>
-              <div v-if="contentIds.includes(item.id)" class="select_handle">
-                <div class="select_delt" @click.stop="selectDelt(item.id,index)">
-                  <svg class="font-icon icon1" aria-hidden="true">
-                    <use xlink:href="#icon-guanbi2" />
-                  </svg>
-                </div>
-                <div class="select_edit" @click.stop="selectEdit()">
-                  <svg class="font-icon icon1" aria-hidden="true">
-                    <use xlink:href="#icon-bianji" />
-                  </svg>
-                </div>
-              </div>
+              <span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span>
             </div>
           </div>
         </div>
         <!-- 主题库 -->
-        <div v-if="activeIndex === 1">
-          <ul class="tab_item">
+        <div v-if="activeIndex === 1" class="theme_cont">
+          <!-- <ul class="tab_item">
             <li
               v-for="(item, index) in tabItem"
               :key="index"
               :class="{'active': activeItemIndex === index}"
               @click="tab(index)"
             >{{ item.name }}</li>
-          </ul>
-          <div class="theme_img">
-            <img
-              v-for="(item, index) in 12"
-              :key="index"
-              src="@/assets/images/home/theme_Img_03.png"
-              alt
+          </ul> -->
+          <!-- 主题库list -->
+          <ThemeGalleryList
+            ref="ThemeGalleryList"
+            :is-multi-selected="isMultiSelected"
+            :mulit-text="mulitText"
           />
         </div>
-        </div>
         <div class="upload_list_right">
-          <div class="mulit_btn">多选</div>
+          <div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div>
         </div>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
@@ -337,6 +325,7 @@
 import crudDept from '@/api/system/dept'
 import draggable from 'vuedraggable'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import ThemeGalleryList from '../components/ThemeGalleryList.vue'
 const defaultForm = {
   name: '',
   date: null,
@@ -348,7 +337,8 @@ const defaultForm = {
 export default {
   name: 'ImmediateRelease',
   components: {
-    draggable
+    draggable,
+    ThemeGalleryList
   },
   cruds() {
     return CRUD({
@@ -370,6 +360,8 @@ export default {
       activeItemIndex: 0,
       deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'],
       deviceTags: [],
+      mulitText: '多选',
+      isMultiSelected: false,
       listData: [
         {
           id: '1',
@@ -396,8 +388,35 @@ export default {
           time: '01:20'
         }
       ],
+      listSelectedData: [
+        {
+          id: '1',
+          name: '1',
+          type: 'JPG',
+          size: '12kb',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: ''
+        },
+        {
+          id: '2',
+          name: '2',
+          type: 'VEDIO',
+          size: '12kb',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: '03:00'
+        },
+        {
+          id: '3',
+          name: '3',
+          type: 'audio',
+          size: '12kb',
+          coverImg: '',
+          time: '01:20'
+        }
+      ],
       contentIds: [],
-      selectedData: [],
+      uploadContentIds: [],
+      selectedData: [], // 选择内容 - 选择的item
       materialTabItem: [
         {
           key: 1,
@@ -481,7 +500,7 @@ export default {
       const index = this.contentIds.indexOf(id)
       this.contentIds.splice(index, 1)
       this.selectedData.splice(index, 1)
-      this.listData.splice(i, 1)
+      this.listSelectedData.splice(i, 1)
     },
     selectedItem(id, item) {
       const arr = this.contentIds
@@ -496,6 +515,28 @@ export default {
         this.selectedData.push(item)
       }
     },
+    // 多选btn
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+        this.uploadContentIds = []
+      }
+    },
+    // 多选选中
+    selectedListItem(id) {
+      const arr = this.uploadContentIds
+      if (arr.includes(id)) {
+        const index = arr.indexOf(id)
+        if (index > -1) {
+          arr.splice(index, 1)
+        }
+      } else {
+        this.uploadContentIds.push(id)
+      }
+    },
     addDeviceTag() {
       this.selectDeviceVisible = true
     },
@@ -513,6 +554,9 @@ export default {
     tabAll(index) {
       this.activeIndex = index
       this.activeItemIndex = 0
+      this.isMultiSelected = false
+      this.mulitText = '多选'
+      this.uploadContentIds = []
     },
     tab(index) {
       this.activeItemIndex = index
@@ -840,28 +884,19 @@ export default {
     display: flex;
     flex-wrap: wrap;
     .item_cont{
-      margin: 0 27px 20px 0;
-      &:nth-child(5n){
-        margin: 0 0 20px 0;
-      }
-    }
-  }
-  .theme_img {
-    display: flex;
-    flex-wrap: wrap;
-    // padding-left: 26px;
-    img {
-      display: block;
-      width: 134px;
-      height: 182px;
-      border: 1px solid #f0f0f0;
-      border-radius: 4px;
-      margin: 0 12px 24px 13px;
-      overflow: hidden;
-      &:nth-child(6n){
-        margin: 0 0 24px 13px;
+      margin: 0 24px 20px 0;
     }
   }
+}
+.theme_cont{
+  ::v-deep .el-tabs__header {
+    padding: 0;
+    margin-bottom: 0;
   }
 }
+.theme_img {
+  padding-left: 0;
+  height: auto;
+  overflow-y: auto;
+}
 </style>