canvasScreen_admin/src/views/dashboard/HomeThemeGallery.vue

<template>
  <div class="theme">
    <!-- 右上角btn -->
    <div class="home_publish_btn">
      <el-button round class="el_button_red" @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>

    <!-- 主题库list -->
    <ThemeGalleryList
      ref="ThemeGalleryList"
      :is-multi-selected="isMultiSelected"
      :mulit-text="mulitText"
      :show-item-info="false"
      :is-my-album="isMyAlbum"
    />
  </div>
</template>

<script>
import ThemeGalleryList from '@/views/components/ThemeGalleryList.vue'
export default {
  name: 'ThemeGallery',
  components: { ThemeGalleryList },
  data() {
    return {
      isMyAlbum: false,
      mulitText: '多选',
      isMultiSelected: false
    }
  },
  mounted() {
  },
  methods: {
    // 多选btn
    multiSelectBtn() {
      this.isMultiSelected = !this.isMultiSelected
      if (this.isMultiSelected) {
        this.mulitText = '取消'
      } else {
        this.mulitText = '多选'
      }
    },
    publishHandle(index) {
      localStorage.removeItem('selectedMaterial')
      localStorage.removeItem('releaseId')
      const selectedMaterial = this.$refs.ThemeGalleryList.selectedMaterial
      localStorage.setItem('selectedMaterial', JSON.stringify(selectedMaterial))
      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;
  }
  ::v-deep .theme_img {
    padding-left: 26px;
    height: calc(100vh - 449px);
    overflow-y: auto;
  }
}
</style>