diff --git a/src/assets/styles/adminIndex.scss b/src/assets/styles/adminIndex.scss index edeef0c..762d456 100644 --- a/src/assets/styles/adminIndex.scss +++ b/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 diff --git a/src/views/dashboard/ThemeGallery.vue b/src/views/dashboard/ThemeGallery.vue index 577d61a..9ead6ba 100644 --- a/src/views/dashboard/ThemeGallery.vue +++ b/src/views/dashboard/ThemeGallery.vue @@ -3,12 +3,17 @@
- + :class="['theme_item', { 'item_multi': contentIds.includes(item.id) }]" + > + + +
人工智能 @@ -22,7 +27,7 @@
即时发布 定时发布 - 多选 + {{ mulitText }}
@@ -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; diff --git a/src/views/home.vue b/src/views/home.vue index 5132dca..c810b99 100644 --- a/src/views/home.vue +++ b/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); } diff --git a/src/views/immediateRelease/index.vue b/src/views/immediateRelease/index.vue index eb0a916..059c290 100644 --- a/src/views/immediateRelease/index.vue +++ b/src/views/immediateRelease/index.vue @@ -180,7 +180,7 @@ -
+
+
+
多选
+