首页/主题

src/assets/styles/adminIndex.scss

@@ -1,4 +1,16 @@
 // start
+
+/**修改全局的滚动条*/
+/**滚动条的宽度*/
+::-webkit-scrollbar {
+  width: 8px; 
+ 
+}
+//滚动条的滑块
+::-webkit-scrollbar-thumb {
+  background-color: #c1c1c1;
+  border-radius: 3px;
+}
 .home_item {
   height: 248px;
   padding: 0 18px;
@@ -440,10 +452,29 @@
     font-size: 14px;
     font-weight: bold;
     color: #3a8aeb;
+    cursor: pointer;
     .upload_return {
       margin-left: 16px;
-      cursor: pointer;
+      
     }
   }
 }
+// 素材库/主题库选中
+.checked_btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  background: url(~@/assets/images/un_selected.png) no-repeat;
+  background-size: 24px 24px;
+  cursor: pointer;
+}
+.item_multi {
+  border-color: #3a8aeb !important;
+  .checked_btn {
+    background: url(~@/assets/images/selected.png) no-repeat;
+  }
+}
 // end

src/views/dashboard/ThemeGallery.vue

@@ -3,12 +3,17 @@
     <el-tabs v-model="activeName" @tab-click="handleClick">
       <el-tab-pane label="为你推荐" name="1">
         <div class="theme_img">
-          <img
-            v-for="(item, index) in 14"
+          <div
+            v-for="(item, index) in listData"
             :key="index"
-            src="@/assets/images/home/theme_Img_03.png"
-            alt
-          />
+            :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>
@@ -22,7 +27,7 @@
     <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">多选</el-button>
+      <el-button round class="publish_muilt_btn" @click="multiSelectBtn">{{ mulitText }}</el-button>
     </div>
   </div>
 </template>
@@ -32,7 +37,82 @@ export default {
   name: 'ThemeGallery',
   data() {
     return {
-      activeName: '1'
+      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() {
@@ -41,6 +121,30 @@ export default {
     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(
         {
@@ -76,15 +180,22 @@ export default {
     display: flex;
     flex-wrap: wrap;
     padding-left: 26px;
-    img {
-      display: block;
-      width: 200px;
-      height: 280px;
+    height: calc(100vh - 449px);
+    overflow-y: auto;
+    .theme_item{
+      position: relative;
+      width: 160px;
+      height: 284px;
       border: 1px solid #f0f0f0;
       border-radius: 4px;
-      margin: 0 23px 24px 0;
+      margin: 0 24px 24px 0;
       overflow: hidden;
     }
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
   .publish_muilt_btn{
     padding: 6px 20px;

src/views/home.vue

@@ -47,6 +47,6 @@ export default {
   padding: 24px;
   background-color: #f5f5f5;
   position: relative;
-  min-height: calc(100vh - 64px);
+  height: calc(100vh - 64px);
 }
 </style>

src/views/immediateRelease/index.vue

@@ -180,7 +180,7 @@
       </el-row>
     </el-form>
     <!-- 第二步：选择内容 - 选择素材 -->
-    <div class="release_layer">
+    <div class="release_layer upload_layer">
       <el-dialog
         :close-on-click-modal="false"
         :show-close="false"
@@ -249,6 +249,9 @@
             />
           </div>
         </div>
+        <div class="upload_list_right">
+          <div class="mulit_btn">多选</div>
+        </div>
         <div slot="footer" class="dialog-footer">
           <el-button type="primary" round @click="submitForm('form')">确 定</el-button>
           <el-button round @click="selectContVisible = false">取 消</el-button>

src/views/materialContent/materialList/index.vue

@@ -406,23 +406,7 @@ export default {
     border-radius: 4px;
     margin: 0 20px 20px 0;
   }
-  .checked_btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    display: block;
-    width: 24px;
-    height: 24px;
-    background: url(~@/assets/images/un_selected.png) no-repeat;
-    background-size: 24px 24px;
-    cursor: pointer;
-  }
-  .item_multi {
-    border-color: #3a8aeb !important;
-    .checked_btn {
-      background: url(~@/assets/images/selected.png) no-repeat;
-    }
-  }
+
   .cont_upload {
     display: flex;
     flex-wrap: wrap;