diff --git a/src/assets/images/selected.png b/src/assets/images/selected.png
new file mode 100644
index 0000000..eaeba0f
Binary files /dev/null and b/src/assets/images/selected.png differ
diff --git a/src/assets/images/un_selected.png b/src/assets/images/un_selected.png
new file mode 100644
index 0000000..cae3dd1
Binary files /dev/null and b/src/assets/images/un_selected.png differ
diff --git a/src/views/materialContent/index.vue b/src/views/materialContent/index.vue
index 89155f1..77df687 100644
--- a/src/views/materialContent/index.vue
+++ b/src/views/materialContent/index.vue
@@ -3,7 +3,11 @@
     <div class="content_warp">
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="全部" name="first">
-          <MaterialList ref="MaterialList" />
+          <MaterialList
+            ref="MaterialList"
+            :is-multi-selected="isMultiSelected"
+            :mulit-text="mulitText"
+          />
         </el-tab-pane>
         <el-tab-pane name="second">
           <span slot="label">
@@ -30,7 +34,7 @@
     </div>
     <div class="material_btn">
       <el-button round type="primary" @click="handleUpload">上传列表</el-button>
-      <el-button round>多选</el-button>
+      <el-button round @click="multiSelectBtn">{{ mulitText }}</el-button>
     </div>
   </div>
 </template>
@@ -42,7 +46,10 @@ export default {
   components: { MaterialList },
   data() {
     return {
-      activeName: 'first'
+      activeName: 'first',
+      isMultiSelected: false,
+      isCheck: null,
+      mulitText: '多选'
     }
   },
   methods: {
@@ -51,6 +58,15 @@ export default {
     },
     handleUpload() {
       this.$refs.MaterialList.UploadList()
+    },
+    multiSelectBtn() {
+      this.isMultiSelected = !this.isMultiSelected
+      if (this.isMultiSelected) {
+        this.mulitText = '取消'
+      } else {
+        this.mulitText = '多选'
+      }
+      // this.$refs.MaterialList.multiSelectList()
     }
   }
 }
diff --git a/src/views/materialContent/materialList/index.vue b/src/views/materialContent/materialList/index.vue
index a8e3d0b..b866fa5 100644
--- a/src/views/materialContent/materialList/index.vue
+++ b/src/views/materialContent/materialList/index.vue
@@ -14,26 +14,25 @@
         </div>
         <p class="file_name">文件夹</p>
       </div>
-      <div class="material_item item_cont">
-        <img src="@/assets/images/background.jpg" alt />
-        <div class="item_format">
-          <span class="item_type">JPG</span>
-        </div>
-        <div class="file_name">人工智能</div>
-      </div>
-      <div class="material_item item_cont">
-        <div class="radio_img"></div>
+      <div
+        v-for="(item, index) in listData"
+        :key="index"
+        :class="['material_item', 'item_cont', { 'item_multi': contentIds.includes(item.id) }]"
+      >
+        <img v-if="item.coverImg" :src="item.coverImg" alt />
+        <div v-if="item.type == 'audio'" class="radio_img"></div>
         <div class="item_format">
-          <span class="item_type">Video</span>
-          <span class="item_time">03:00</span>
+          <span class="item_type">{{ item.type }}</span>
+          <span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
         </div>
-        <div class="file_name">防控疫情小贴士</div>
+        <div class="file_name">{{ item.name }}</div>
+        <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span>
       </div>
     </div>
-    <!-- 创建文件夹layer -->
+    <!-- 创建文件夹layer / 编辑 -->
     <div class="publish_layer">
       <el-dialog
-        title="创建文件夹"
+        :title="layerTitle"
         :close-on-click-modal="false"
         :visible.sync="mkdirVisible"
         width="616px"
@@ -41,15 +40,15 @@
       >
         <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
           <el-form-item
-            label="文件夹名称"
+            :label="labelTxt"
             prop="name"
             :rules="[
-              { required: true, message: '请输入文件夹名称号', trigger: 'blur' }
+              { required: true, message: '请输入名称', trigger: 'blur' }
             ]"
           >
-            <el-input v-model="form.account" style="width: 336px" />
+            <el-input v-model="form.name" style="width: 336px" />
           </el-form-item>
-          <el-form-item label="封面" prop="file">
+          <el-form-item v-if="formType !== 'JPG'" label="封面" prop="file">
             <el-upload action="#" list-type="picture-card" :auto-upload="false">
               <!-- <i slot="default" class="el-icon-plus"></i> -->
               <img src="@/assets/images/t-sc.png" alt />
@@ -91,8 +90,8 @@
       </el-dialog>
     </div>
 
-    <!-- 创建文件夹layer -->
-    <div class="publish_layer">
+    <!-- 上传列表layer -->
+    <div class="upload_layer">
       <!-- width="736px" -->
       <el-dialog
         title="上传列表"
@@ -134,6 +133,61 @@
             </template>
           </el-table-column>
         </el-table>
+        <div class="upload_list_right">
+          <el-upload
+            class="upload-demo"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            multiple
+            :limit="3"
+          >
+            <div class="right_upload">点击上传</div>
+          </el-upload>
+          <div class="upload_return">返回</div>
+        </div>
+      </el-dialog>
+    </div>
+
+    <div v-if="contentIds.length !== 0" class="multi_handle">
+      <el-button type="button" class="mulit_btn">即时发布</el-button>
+      <el-button type="button" class="mulit_btn">定时发布</el-button>
+      <el-button
+        type="button"
+        class="mulit_btn"
+        :disabled="contentIds.length > 1"
+        @click="editContent()"
+      >编辑</el-button>
+      <el-button type="button" class="mulit_btn">下载</el-button>
+      <el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
+      <el-button type="button" class="mulit_btn mulit_delt_btn">删除</el-button>
+    </div>
+
+    <!-- 移动至layer -->
+    <div class="wjj_layer">
+      <!-- width="736px" -->
+      <el-dialog
+        title="移动至"
+        :close-on-click-modal="false"
+        :visible.sync="movingVisible"
+        width="576px"
+        height="384px"
+      >
+        <div class="wjj_list">
+          <div
+            v-for="(item, index) in wjjList"
+            :key="index"
+            :class="['wjj_item', { 'wjj_item_active': movingChecked === index }]"
+            @click="wjjSelected(index)"
+          >
+            <svg class="font-icon icon" aria-hidden="true">
+              <use xlink:href="#icon-wenjianjia" />
+            </svg>
+            <p class="wjj_name">{{ item.name }}</p>
+          </div>
+        </div>
+        <div slot="footer" class="dialog-footer">
+          <el-button type="primary" round>确定</el-button>
+          <el-button round @click="crud.cancelCU">取消</el-button>
+        </div>
       </el-dialog>
     </div>
   </div>
@@ -155,14 +209,29 @@ export default {
     return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } })
   },
   mixins: [presenter(), header(), form(defaultForm), crud()],
+  props: {
+    isMultiSelected: {
+      type: Boolean,
+      required: true
+    },
+    mulitText: {
+      type: String,
+      required: true
+    }
+  },
   data() {
     return {
-      mkdirVisible: false,
       uploadListVisible: false,
       loading_txt: '暂停',
       progressLoading: true,
       percentage: 0,
       colors: '#1e9f4c',
+      layerTitle: '创建文件夹',
+      labelTxt: '文件夹名称',
+      mkdirVisible: false,
+      formType: null,
+      movingVisible: false,
+      movingChecked: null,
       // dialogImageUrl: '',
       // dialogVisible: false,
       // disabled: false
@@ -173,6 +242,40 @@ export default {
           type: 'vedio',
           size: '3MB'
         }
+      ],
+      listData: [
+        {
+          id: '1',
+          name: '人工智能',
+          type: 'JPG',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: ''
+        },
+        {
+          id: '2',
+          name: '防控疫情小贴士',
+          type: 'vedio',
+          coverImg: require('@/assets/images/background.jpg'),
+          time: '03:00'
+        },
+        {
+          id: '3',
+          name: '防控疫情小贴士2',
+          type: 'audio',
+          coverImg: '',
+          time: '01:20'
+        }
+      ],
+      contentIds: [],
+      wjjList: [
+        {
+          id: '1',
+          name: '文件夹1'
+        },
+        {
+          id: '2',
+          name: '文件夹2'
+        }
       ]
     }
   },
@@ -181,6 +284,13 @@ export default {
       'user'
     ])
   },
+  watch: {
+    isMultiSelected(newName, oldName) {
+      if (newName === false) {
+        this.contentIds = []
+      }
+    }
+  },
   mounted: function () {
     this.start()
   },
@@ -191,6 +301,49 @@ export default {
     UploadList() {
       this.uploadListVisible = true
     },
+    selectedItem(id, type) {
+      console.log('type', type)
+
+      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)
+        this.formType = type
+      }
+
+      console.log('formType', this.formType)
+    },
+    editContent() {
+      this.mkdirVisible = true
+      this.labelTxt = '文件名称'
+
+      if (this.formType === 'vedio') {
+        this.layerTitle = '视频编辑'
+      } else if (this.formType === 'audio') {
+        this.layerTitle = '音频编辑'
+      } else {
+        this.layerTitle = '图片编辑'
+      }
+
+      const resType = this.listData.filter(item => {
+        return item.id === this.contentIds[0]
+      })
+      this.form.name = resType[0].name
+    },
+    moveingTo(index) {
+      this.movingVisible = true
+      // this.movingChecked = index
+    },
+    wjjSelected(index) {
+      this.movingChecked = index
+      console.log(this.movingChecked)
+    },
     format(percentage) {
       return percentage === 100 ? '100%' : `${percentage}%`
     },
@@ -208,7 +361,7 @@ export default {
     },
     // 进度条结束
     end() {
-      this.loading_txt = '开始'
+      this.loading_txt = '继续'
       // const that = this
       // that.percentage = 100
       clearInterval(this.timeStart)
@@ -236,11 +389,29 @@ export default {
   flex-wrap: wrap;
   margin-left: 24px;
   .material_item {
+    position: relative;
     width: 174px;
     height: 182px;
     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;
@@ -312,4 +483,82 @@ export default {
   width: 128px;
   height: 120px;
 }
+.upload_layer {
+  ::v-deep .el-dialog__headerbtn {
+    right: -60px;
+    .el-dialog__close {
+      color: #fff;
+      font-size: 26px;
+    }
+  }
+  .upload_list_right {
+    position: absolute;
+    right: 24px;
+    top: 24px;
+    display: flex;
+    font-size: 14px;
+    font-weight: bold;
+    color: #3a8aeb;
+    .upload_return {
+      margin-left: 16px;
+      cursor: pointer;
+    }
+  }
+}
+
+.multi_handle {
+  position: fixed;
+  bottom: 140px;
+  left: 50%;
+  width: 1100px;
+  padding: 25px 150px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  margin-left: -438px;
+  .mulit_btn {
+    padding: 0 24px;
+    height: 34px;
+    font-size: 14px;
+    color: #333;
+    border: none;
+    margin: 0 24px;
+    background-color: #fff;
+  }
+  .mulit_delt_btn {
+    background-color: #ec414d;
+    color: #fff;
+  }
+}
+
+.wjj_layer {
+  ::v-deep .el-dialog__body {
+    padding: 30px 24px;
+  }
+  .wjj_list {
+    display: flex;
+    flex-wrap: wrap;
+    .wjj_item {
+      display: flex;
+      flex-wrap: wrap;
+      align-content: center;
+      justify-content: center;
+      width: 96px;
+      height: 104px;
+      cursor: pointer;
+      &.wjj_item_active {
+        background: #e8f3ff;
+        border: 1px solid #428fec;
+      }
+      .font-icon {
+        width: 64px;
+        height: 55px;
+      }
+      .wjj_name {
+        font-size: 14px;
+        color: #333;
+        margin-top: 8px;
+      }
+    }
+  }
+}
 </style>