素材库

project/config/index.js

@@ -24,27 +24,6 @@ module.exports = {
         pathRewrite: {
           '^/ceshi': 'http://duanju.wenxingshuju.com'
         }
-      },
-      '/zy/': {
-        target: 'http://60.205.169.65:8078',
-        changeOrigin: true, //改变源
-        pathRewrite: {
-          '^/zy': 'http://60.205.169.65:8078'
-        }
-      },
-      '/xh/': {
-        target: 'http://101.201.181.203:8012',
-        changeOrigin: true, //改变源
-        pathRewrite: {
-          '^/xh': 'http://101.201.181.203:8012'
-        }
-      },
-      '/ss/': {
-        target: 'http://60.205.169.65:19001',
-        changeOrigin: true, //改变源
-        pathRewrite: {
-          '^/ss': 'http://60.205.169.65:19001'
-        }
       }
     },
 

project/src/assets/config/interface_api.js

@@ -3,13 +3,8 @@ import Switchddress from "switch-address";
 const switchAddress = new Switchddress({
   address: {
     // 加入环境--地址映射
-    ceshi: "/ceshi",
-    王赛: "/ws",
-    赵振: "/zz",
+    测试: "/ceshi",
     线上: "/api",
-    晓华: "/xh",
-    志远: "/zy",
-    沈松: "/ss",
     production: "",
   },
   default: process.env.NODE_ENV, // 指定当前web所在的部署环境
@@ -403,6 +398,11 @@ var api = {
   operatorGroup_changeStatus: "/api/OperationGroup/changeStatus", // 运营组 - 修改状态
   operatorGroup_setConfig: "/api/OperationGroup/setConfig", // 运营组 - 创建、编辑运营组
   operatorGroup_groupDetail: "/api/OperationGroup/groupDetail", // 运营组 - 运营组详情
+
+  media_groupList: '/api/media/groupList', // 素材组列表
+  media_delGroup: '/api/media/delGroup', // 删除素材组
+  media_editGroup: '/api/media/editGroup', // 素材组新增/编辑
+  media_upload: '/api/media/upload',// 上传素材
 };
 
 export { api };

project/src/components/assembly/screen/channel.vue

@@ -224,12 +224,36 @@ export default {
     } else if (this.type == 'operatorGroup') { // 运营组
       this.getOperatorGroup()
       this.placeholderVal = '运营组'
+    } else if (this.type == 'materialLibrary') { // 图片组
+      this.getPicturesGroup()
+      this.placeholderVal = '图片组'
     } else {
       this.init()
     }
 
   },
   methods: {
+    getPicturesGroup() { //图片组
+      this.$axios.get(this.URL.BASEURL + this.URL.media_groupList, {
+        params: {
+          page: 1,
+          page_size: 500,
+          operator_id: '',
+        }
+      }).then((res) => {
+        var res = res.data
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.options = res.rst.data
+          this.$emit('groupList', res.rst.data)
+          this.options.forEach((item) => {
+            item.val = item.name
+            item.key = item.id
+          });
+        } else if (res.errno != 4002) {
+        }
+      }).catch((err) => {
+      });
+    },
     getOperatorGroup() { // 运营组
       this.$axios.get(this.URL.BASEURL + this.URL.operatorGroup_groupList, {
         params: {

project/src/components/manage/materialLibrary/dialog/uploadMaterials.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+      :visible.sync="uploadVisible"
+      :before-close="handleCancel"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      class="group-dialog"
+      width="600px"
+    >
+      <div slot="title">
+        <span>上传素材</span>
+      </div>
+      <div class="form-wrap" v-loading="loading">
+        <el-upload
+          ref="upload"
+          class="upload-demo"
+          :action="URL.BASEURL + URL.media_upload"
+          :on-success="uploadSuccess"
+          :on-progress='beforeUploadUpload'
+          :on-error='uploadFail'
+          :on-exceed="handleExceed"
+          :before-remove="beforeRemove"
+          :on-remove="handleRemove"
+          :file-list="fileList"
+          :limit="6"
+          accept=".jpg,.jpeg,.png"
+          name="file"
+          :data="fileData"
+          multiple
+          drag
+          list-type="picture">
+          <i class="el-icon-upload"></i>
+
+          <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
+          <!-- <el-button size="small" type="success">点击上传</el-button> -->
+          <div slot="tip" class="el-upload__tip">*图片仅支持png或jpg格式，且文件大小不得超过10M。</div>
+        </el-upload>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="mini" @click="handleCancel">取 消</el-button>
+        <el-button size="mini" type="primary" @click="handleConfirm" :disabled="loading">确 定</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+  name: 'uploadMaterials',
+  props: {
+    // 控制弹框是否显示
+    uploadVisible: {
+      type: Boolean,
+      default: () => false
+    },
+  },
+  // watch: {
+  //   dialogVisible(isShow) {
+  //     // 弹框显示 => 初始化表单数据
+  //     if (isShow) {
+  //       // this.handleInitData()
+  //     }
+  //   },
+  // },
+  data () {
+    return{
+      loading: false,
+      fileData: {
+        admin_id: this.$cookie.getCookie('admin_id'),
+        ttl: this.$cookie.getCookie('ttl'),
+        sign: this.$cookie.getCookie('sign'),
+        corpid: this.$localSelfStore.getLocal('defaultCorp') && this.$localSelfStore.getLocal('defaultCorp') != 'undefined' ? JSON.parse(this.$localSelfStore.getLocal('defaultCorp')).corpid : '',
+        type: 1,//素材类型。1图片 2语音 3视频
+      },
+      fileList: [],
+      successFile: []
+    }
+  },
+  methods:{
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    handleConfirm(){
+
+    },
+    uploadSuccess (res, file) {
+        this.$loading(this.$loadingConfig).close();
+        if (res.errno == 0) {
+          this.successFile.push({uid:file.uid,url:res.rst.url})
+          this.$emit('multipleImgList',this.successFile)
+        } else {
+          let idx = this.$refs.upload.uploadFiles.findIndex(item => item.uid === file.uid)
+          this.$refs.upload.uploadFiles.splice(idx, 1)
+          this.$message({
+            message: res.err,
+            type: 'warning'
+          })
+        }
+        // 清除同名图片
+        // this.$refs.upload.uploadFiles = this.$refs.upload.uploadFiles.filter((e,i)=>{
+        //   return e.name != file.name
+        // })
+      },
+      beforeUploadUpload (file) {
+        this.$loading(this.$loadingConfig);
+      },
+      uploadFail (file) {
+        this.$loading(this.$loadingConfig).close();
+        this.$message({
+          message: '上传失败',
+          type: 'fail'
+        })
+        let idx = this.$refs.upload.uploadFiles.findIndex(item => item.uid === file.uid)
+        this.$refs.upload.uploadFiles.splice(idx, 1)
+      },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      beforeRemove(file, fileList) {
+        return this.$confirm(`确定移除 ${ file.name }？`);
+      },
+      handleRemove(file, fileList) {
+        this.successFile = this.successFile.filter((v)=>{
+          return v.uid != file.uid;
+        })
+        this.$emit('multipleImgList',this.successFile)
+      },
+  }
+}
+</script>
+<style scoped lang="scss">
+.upload-demo{
+ /deep/ .el-upload{
+  width: 100%;
+ }
+ /deep/ .el-upload-dragger{
+  width: 100%;
+  height: 150px;
+ }
+}
+</style>

project/src/components/manage/materialLibrary/groupPictures.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="playletManage-wrap">
+    <div class="topTagBox flex">
+      <slot></slot>
+      <div class="flex">
+        <selfInput label_name="组名称" @inputChange="onInputKeyword" />
+        <el-button type="primary" size="mini" @click="onClickCreateGroup" style="margin-left:10px">创建组</el-button>
+      </div>
+    </div>
+    <div v-loading="loading" >
+      <el-table ref="tableDom" :height="height" :data="groupList" tooltip-effect="dark" style="width: 100%;margin-top:10px">
+        <el-table-column label="分组名称" prop="name" align="center" fixed="left" />
+        <el-table-column label="操作" min-width="210" align="center" fixed="right">
+          <template slot-scope="{ row }">
+            <span class="btn" @click="onClickEditGroup(row)">编辑</span>
+            <el-popconfirm @confirm="onClickDetaleSend(row)" :title="`确定删除【${row.name}】？`">
+              <span slot="reference" class="btn">删除组</span>
+            </el-popconfirm>
+
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination" v-show="pagination.total > 0">
+        <el-pagination background :current-page="pagination.page" @current-change="handleCurrentChange" layout="prev, pager, next" :page-count="Number(pagination.pages)">
+        </el-pagination>
+      </div>
+      <!-- 创建组 -->
+      <el-dialog
+        :visible.sync="dialogVisible"
+        :before-close="handleCancel"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        class="group-dialog"
+        width="400px"
+      >
+        <div slot="title">
+          <span>{{ currentGroupId == '' ? '新建分组' : '编辑分组' }}</span>
+        </div>
+        <div class="form-wrap" v-loading="form.loading">
+          <div class="form-item">
+            <span class="lable"><em>*</em>分组名称</span>
+            <el-input v-model="form.name" size="small" placeholder="请输入名称" clearable />
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button size="mini" @click="handleCancel">取 消</el-button>
+          <el-button size="mini" type="primary" @click="handleConfirm" :disabled="form.loading">确 定</el-button>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+import selfInput from '@/components/assembly/screen/input.vue'
+export default {
+  name: 'playletGroup',
+  components:{ selfInput },
+  data () {
+    return {
+      height: '',
+      loading: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+      filter: {
+        keyword: '',
+      },
+      groupList: [],
+
+      currentGroupId: '',
+      dialogVisible: false,
+      form: {
+        name: '',
+        loading: false
+      }
+    }
+  },
+  created () {
+    this.height = document.documentElement.clientHeight - 200 > 400 ? document.documentElement.clientHeight - 200 : 400
+    this.init()
+  },
+  methods: {
+    // 获取列表数据
+    async init() {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.media_groupList}`
+        const params = {
+          keyword: this.filter.keyword,
+          page: this.pagination.page,
+          page_size: this.pagination.page_size,
+        }
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0 && Array.isArray(res.rst.data)) {
+          this.groupList = res.rst.data;
+          this.pagination.total = res.rst.pageInfo.total;
+          this.pagination.pages = res.rst.pageInfo.pages;
+          this.$refs.tableDom.bodyWrapper.scrollTop = 0
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+          this.groupList = [];
+          this.pagination.total = 0;
+          this.pagination.pages = 0;
+        }
+      } catch (error) {
+        this.groupList = [];
+        this.pagination.total = 0;
+        this.pagination.pages = 0;
+      } finally {
+        this.loading = false
+      }
+    },
+    // 监听当前页数变化
+    handleCurrentChange(currentPage) {
+      this.pagination.page = currentPage
+      this.init()
+    },
+    // 监听点击“创建组”
+    onClickCreateGroup() {
+      this.currentGroupId = ''
+      this.dialogVisible = true;
+    },
+    handleCancel() {
+      this.dialogVisible = false
+    },
+    handleConfirm(){
+      this.form.loading = true;
+      this.$axios.post(this.URL.BASEURL + this.URL.media_editGroup, {
+        name: this.form.name,
+        group_id: this.currentGroupId
+      }).then((data)=>{
+        this.form.loading = false;
+        const res = data.data;
+        if (res && res.errno == 0) {
+          this.$message.success(`${this.currentGroupId == '' ? '新建' : '编辑'}成功`)
+          this.init(this.pagination.page)
+          this.dialogVisible = false;
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      }).catch((err)=>{
+        this.form.loading = false;
+      })
+    },
+    // 监听点击“编辑组”
+    onClickEditGroup(row) {
+      this.currentGroupId = row.id;
+      this.dialogVisible = true;
+      this.form.name = row.name;
+    },
+    onConfirmGroupDialog({ isEdit }) {
+      if (!isEdit){
+        this.pagination.page = 1
+      }
+      this.init()
+    },
+    onCancelGroupDialog() {
+    },
+    // 监听"搜索组名称"变化
+    onInputKeyword(val) {
+      this.filter.keyword = val || ''
+      this.pagination.page = 1
+      this.init()
+    },
+    // 监听点击"删除组"
+    async onClickDetaleSend(groupInfo) {
+      try {
+        this.loading = true
+        const url = `${this.URL.BASEURL}${this.URL.media_delGroup}`
+        const params = {
+          group_id: groupInfo.id,
+        }
+        const { data: res = {} } = await this.$axios.get(url, { params })
+        if (res && res.errno == 0 && res.rst) {
+          this.$message.success('删除成功')
+          this.init(this.pagination.page)
+        } else if (res.errno != 4002) {
+          this.$message.warning(res.err)
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+/deep/ .el-select .el-input.is-focus .el-input__inner,
+/deep/ .el-select .el-input__inner:focus {
+  border-color: #DCDFE6;
+}
+.playletManage-wrap {
+  .playlet-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    .playlet-item {
+      background-color: #F2F2F2;
+      color: #333;
+      padding: 2px 10px;
+      margin: 0 6px 6px 0;
+      border-radius: 4px;
+    }
+  }
+  /deep/ .common-screen-item{
+    margin: 0;
+  }
+  .select-cls {
+    /deep/ .el-input__suffix {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border: 1px solid #DCDFE6;
+      right: 0;
+      width: 30px;
+      background-color: #F1F1F1;
+      .el-input__icon {
+        color: #909399;
+      }
+    }
+  }
+  .playlet-name {
+    color: #32B38A;
+    // cursor: pointer;
+  }
+  .status {
+    margin: 2px auto;
+    padding: 0 6px;
+    color: #32B38A;
+    border: 1px solid #32B38A;
+  }
+  .btn {
+    color: #32B38A;
+    cursor: pointer;
+    margin-right: 4px;
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+.form-wrap {
+    .form-item {
+      display: flex;
+      align-items: center;
+      margin-top: 16px;
+      &.flex-start {
+        align-items: flex-start;
+        .lable {
+          margin-top: 8px;
+        }
+      }
+      &:first-child {
+        margin-top: 0;
+      }
+      .lable {
+        width: 70px;
+        margin-right: 10px;
+        font-weight: 500;
+        flex-shrink: 0;
+        text-align: right;
+        em {
+          color: red;
+        }
+      }
+      .el-select {
+        width: 100%;
+      }
+    }
+    .palylet-wrap {
+      .palylet-item {
+        margin-right: 10px;
+        margin-bottom: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+</style>

project/src/components/manage/materialLibrary/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <!-- <div class="topTagBox flex" style="min-width: 1200px;" id="customerAnalysis">
+      <div class="left flex-align-center">
+        <div :class="['tagItem',tagType==1?'tagItem_active':'']" @click="changeType(1);">图片库</div>
+        <div :class="['tagItem',tagType==2?'tagItem_active':'']" @click="changeType(2);">图片组</div>
+      </div>
+      <div class="right" v-if="tagType==1">
+        <el-checkbox v-model="checked">备选项</el-checkbox>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLFZ' })">批量分组</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLYCFZ' })">批量移除分组</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLSCSC' })">批量删除素材</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'SCSC' })">上传素材</el-button>
+      </div>
+    </div> -->
+    <pictureLibrary v-if="tagType==1" >
+      <div class="left flex-align-center">
+        <div :class="['tagItem',tagType==1?'tagItem_active':'']" @click="changeType(1);">图片库</div>
+        <div :class="['tagItem',tagType==2?'tagItem_active':'']" @click="changeType(2);">图片组</div>
+      </div>
+    </pictureLibrary>
+    <groupPictures v-if="tagType==2" >
+      <div class="left flex-align-center">
+        <div :class="['tagItem',tagType==1?'tagItem_active':'']" @click="changeType(1);">图片库</div>
+        <div :class="['tagItem',tagType==2?'tagItem_active':'']" @click="changeType(2);">图片组</div>
+      </div>
+    </groupPictures>
+  </div>
+</template>
+
+<script>
+import pictureLibrary from './pictureLibrary.vue'
+import groupPictures from './groupPictures.vue'
+export default {
+  name: "materialLibrary",
+  components: { pictureLibrary, groupPictures },
+  data() {
+    return {
+      tagType: 1
+    }
+  },
+  methods:{
+    changeType(type){
+      this.tagType = type
+    },
+  }
+}
+</script>

project/src/components/manage/materialLibrary/pictureLibrary.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div class="topTagBox flex">
+      <slot></slot>
+      <div class="right">
+        <el-checkbox v-model="checked" class="checkbox1">全选<span>（已选中0个图片）</span></el-checkbox>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLFZ' })">批量分组</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLYCFZ' })">批量移除分组</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'PLSCSC' })">批量删除素材</el-button>
+        <el-button type="primary" plain size="mini" @click="onClickMultipleLink({ buttonPath: 'SCSC' })">上传素材</el-button>
+      </div>
+    </div>
+    <div class="screenBox flex">
+      <selfChannel title="平台" type="platform" labelWidth @channelDefine="onChangePlatform" />
+      <selfChannel title="图片组" type="materialLibrary" labelWidth @channelDefine="onChangePlatform" @groupList="getGroupList"/>
+      <selfInput label_name="搜索图片" @inputChange="onInputKeyword" />
+    </div>
+    <!-- 图片列表 -->
+    <div class="materialContainer">
+      <div class="materialItem" v-for="item in 21">
+        <div class="materialImg">
+          <el-image class="img" src="https://mv-oss.zwlab.cn/raw/cover/%e5%90%8c%e5%b1%85%e5%90%a7%e5%bf%83%e5%8a%a8%e7%94%b7%e5%ad%a9/%e5%90%8c%e5%b1%85%e5%90%a7%e5%bf%83%e5%8a%a8%e7%94%b7%e5%ad%a9.jpg" lazy  :preview-src-list="['https://mv-oss.zwlab.cn/raw/cover/%e5%90%8c%e5%b1%85%e5%90%a7%e5%bf%83%e5%8a%a8%e7%94%b7%e5%ad%a9/%e5%90%8c%e5%b1%85%e5%90%a7%e5%bf%83%e5%8a%a8%e7%94%b7%e5%ad%a9.jpg']"></el-image>
+        </div>
+        <div class="materialInfo">
+          <div class="materialTitle">大的解放军队解放军队反季节的风</div>
+          <div class="flex"><div class="label">平台:啦啦啦快快快快快</div><div class="label" style="text-align: right;">分组:快看看</div></div>
+          <div class="meterialCZ">
+            <div class="flex">
+              <el-button type="info" size="mini" icon="el-icon-delete" plain circle></el-button>
+              <el-button type="info" size="mini" icon="el-icon-edit" plain circle></el-button>
+              <!-- <el-button type="info" size="mini" icon="el-icon-view" plain circle></el-button> -->
+            </div>
+            <el-checkbox class="itemCheckbox" size="mini" v-model="checked"></el-checkbox>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 上传素材 -->
+    <uploadMaterials :uploadVisible="uploadVisible" @cancel="uploadVisible=false"></uploadMaterials>
+  </div>
+</template>
+<script>
+import selfChannel from '@/components/assembly/screen/channel.vue'
+import selfInput from '@/components/assembly/screen/input.vue'
+import uploadMaterials from './dialog/uploadMaterials.vue'
+export default {
+  components: {
+    selfChannel,
+    selfInput,
+    uploadMaterials
+  },
+  data () {
+    return {
+      uploadVisible: false,
+      groupList: [],
+      checked: false,
+      pagination: {
+        page: 1,
+        page_size: 20,
+        pages: 0,
+        total: 0,
+      },
+    }
+  },
+  methods: {
+    // 获取图片组列表
+    getGroupList(val){
+      this.groupList = val;
+      console.log(val)
+    },
+    // 监听"平台"筛选变化
+    async onChangePlatform(val) {
+      // this.filter.platform_id = val || ''
+
+      // // 清空“账号”筛选值 => 根据最新平台值 获取 账号选项
+      // this.filter.account_id = ''
+      // this.accountOptions = []
+      // if (this.filter.platform_id) {
+      //   this.handleGetAccountOptions()
+      // }
+
+      // await this.$nextTick()
+      // this.pagination.page = 1
+      // this.handleGetPlaylet()
+    },
+    // 监听"搜索图片"变化
+    onInputKeyword(val) {
+      // this.filter.keyword = val || ''
+      // this.pagination.page = 1
+      // this.handleGetPlaylet()
+    },
+    // 点击批量操作按钮
+    onClickMultipleLink({buttonPath}){
+      if (buttonPath == 'SCSC') {
+        this.uploadVisible = true;
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.screenBox {
+  background: #fff;
+  padding: 5px 20px 5px 0;
+  flex-wrap: wrap;
+  justify-content: start;
+}
+.checkbox1{
+  margin-right: 20px;
+  span{
+    font-size: 10px;
+  }
+}
+.materialContainer{
+  background: #fff;
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 5px;
+  .materialItem{
+    width: 13%;
+    height: 260px;
+    background: #f5f6f8;
+    margin: 5px 0.64%;
+    .materialImg{
+      width: 100%;
+      height: 174px;
+      background: #000;
+      text-align: center;
+      .img{
+        height: 100%;
+        margin: auto;
+      }
+    }
+    .materialTitle{
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: bold;
+      color: #444;
+      white-space:nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .materialInfo{
+      padding: 6px;
+    }
+    .label{
+      font-size: 10px;
+      color: #666;
+      line-height: 16px;
+      margin-top: 4px;
+      flex:1;
+      white-space:nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+    .meterialCZ{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top:10px;
+      /deep/ .el-button--mini.is-circle{
+        padding: 5px;
+        height: 24px;
+      }
+      /deep/ .el-checkbox__inner{
+        width: 18px;
+        height: 18px;
+        border-color: #d3d4d6;
+      }
+      /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
+        border-color: #00B38A;
+      }
+      /deep/ .el-checkbox__inner::after{
+          height: 9px;
+          left: 6px;
+        }
+    }
+  }
+}
+// @media screen and (max-width: 1200px) {
+//   .materialContainer{
+//     .materialItem{
+//       width: 14%;
+//     }
+//   }
+// }
+</style>

project/src/router/allRouter.js

@@ -84,6 +84,7 @@ const accountManage = () => import(/* webpackChunkName: 'accountManage' */ '@/co
 const miniProManage = () => import(/* webpackChunkName: 'miniProManage' */ '@/components/manage/miniProManage/miniProManage.vue')
 // 企微助手 - 剧集管理
 // const playletManage = () => import(/* webpackChunkName: 'playletManage' */ '@/components/manage/playletManage/playletManage.vue')
+const materialLibrary = () => import(/* webpackChunkName: 'materialLibrary' */ '@/components/manage/materialLibrary/index.vue')
 const playletManage = () => import(/* webpackChunkName: 'playletManage' */ '@/components/manage/playletManageV2/index.vue')
 // 数据看板 - 平台推广数据
 const platformPromote = () => import(/* webpackChunkName: 'platformPromote' */ '@/components/dataBoard/platformPromote/index.vue')
@@ -437,6 +438,16 @@ export var allRouter = [
         }
       },
       {
+        path: 'materialLibrary',
+        name: 'materialLibrary',
+        component: materialLibrary,
+        meta: {
+          keepAlive: false,
+          isLogin: true,
+          title: '素材库'
+        }
+      },
+      {
         path: 'memberManage',
         name: 'memberManage',
         component: memberManage,