diff --git a/src/api/archives/archives.js b/src/api/archives/archives.js
index b17eba22..a0e75dda 100644
--- a/src/api/archives/archives.js
+++ b/src/api/archives/archives.js
@@ -72,8 +72,8 @@ export function delArchivesDetailsApi(data) {
 export function downloadFileApi(data) {
   return request({
       url: '/material/archives/download',
-      method: 'post',
-      data: data,
-      // responseType: 'blob'
+      method: 'get',
+      params: data,
+      responseType: 'blob'
   })
 }
\ No newline at end of file
diff --git a/src/assets/img/fileIcon1.png b/src/assets/img/fileIcon1.png
new file mode 100644
index 00000000..54739b2e
Binary files /dev/null and b/src/assets/img/fileIcon1.png differ
diff --git a/src/assets/img/fileIcon3.png b/src/assets/img/fileIcon3.png
new file mode 100644
index 00000000..39491e3d
Binary files /dev/null and b/src/assets/img/fileIcon3.png differ
diff --git a/src/assets/img/grid1.png b/src/assets/img/grid1.png
new file mode 100644
index 00000000..1b5f1f30
Binary files /dev/null and b/src/assets/img/grid1.png differ
diff --git a/src/assets/img/grid2.png b/src/assets/img/grid2.png
new file mode 100644
index 00000000..ef902816
Binary files /dev/null and b/src/assets/img/grid2.png differ
diff --git a/src/assets/img/list1.png b/src/assets/img/list1.png
new file mode 100644
index 00000000..db4e3feb
Binary files /dev/null and b/src/assets/img/list1.png differ
diff --git a/src/assets/img/list2.png b/src/assets/img/list2.png
new file mode 100644
index 00000000..edf52db8
Binary files /dev/null and b/src/assets/img/list2.png differ
diff --git a/src/views/material/archives/index.vue b/src/views/material/archives/index.vue
index f4d8de6b..8304fa6a 100644
--- a/src/views/material/archives/index.vue
+++ b/src/views/material/archives/index.vue
@@ -87,7 +87,7 @@
           </el-form-item>
         </el-form> -->
 
-        <el-row :gutter="16" style="margin-bottom: 20px;">
+        <el-row :gutter="14" style="margin-bottom: 20px;">
           <el-col :span="2">
             <el-button type="primary" plain icon="el-icon-upload" size="mini" @click="openUpLoadDialog">上传</el-button>
           </el-col> 
@@ -99,19 +99,30 @@
           </el-col> 
           <el-col :span="2">
             <el-button type="danger" plain icon="el-icon-download" :disabled="multiple" size="mini" @click="handleAllDel">删除</el-button>
-          </el-col> 
+          </el-col>
+
+          <el-col :span="4" style="float: right;display: flex;">
+            <div style="display: flex;align-items: center;height: 32px;margin-right: 10px;" @click="changeShowType(1)">
+              <img src="../../../assets/img/list1.png" v-if="showType==1" style="width: 18px;height: 18px;" alt="">
+              <img src="../../../assets/img/list2.png" v-else style="width: 18px;height: 18px;" alt="">
+            </div> 
+            <div style="display: flex;align-items: center;height: 32px;" @click="changeShowType(2)">
+              <img src="../../../assets/img/grid1.png" v-if="showType==2" style="width: 18px;height: 18px;" alt="">
+              <img src="../../../assets/img/grid2.png" v-else style="width: 18px;height: 18px;" alt="">
+            </div> 
+          </el-col>
           <el-col :span="4" style="float: right;">
             <el-button type="primary" plain icon="el-icon-plus" size="mini"  @click="handleAdd">新建文件夹</el-button>
-          </el-col>
+          </el-col> 
         </el-row>
         <el-row :gutter="10" style="margin-bottom: 20px;">
           <el-breadcrumb separator-class="el-icon-arrow-right">
-            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="item.id">
+            <el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="item.id" style="margin-bottom: 5px;">
               <span @click="breadClick(item,index)" style="cursor: pointer;">{{item.docName}}</span>
             </el-breadcrumb-item>
           </el-breadcrumb>
         </el-row>
-        <el-table v-loading="loading" :data="tableDataList"  @selection-change="handleSelectionChange" row-key="detailsId">
+        <el-table v-loading="loading" v-if="showType==1" :data="tableDataList"  @selection-change="handleSelectionChange" row-key="detailsId">
           <el-table-column type="selection" width="55" align="center"/>
           <el-table-column label="序号" align="center" width="80" type="index">
                 <template slot-scope="scope">
@@ -145,10 +156,20 @@
           </el-table-column>
           <el-table-column label="年 度" align="center" prop="year" show-overflow-tooltip/>
           <el-table-column label="修改时间 " align="center" prop="updateTime" show-overflow-tooltip width="180"/>
-          <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/> 
-          
+          <el-table-column label="上传人员 " align="center" prop="createBy" show-overflow-tooltip/>
         </el-table>
 
+        
+        <div style="width: 100%;height: 300px;display: flex;" v-if="showType==2">
+          <div style="width: 140px;height: 140px;display: flex;flex-direction: column;align-items: center;margin: 10px;" v-for="item in tableDataList" :key="item.detailsId" @click="getSubDetails(item)">
+            <img src="../../../assets/img/fileIcon1.png" v-if="item.docType=='文件夹'" style="width: 60px;height: 60px;">
+            <img src="../../../assets/img/fileIcon3.png" v-else style="width: 50px;height: 50px;">
+            <div style="font-size: 12px;margin-top: 10px;">
+              {{ item.docName }}
+            </div>
+          </div>
+        </div>
+
         <pagination
           v-show="total > 0"
           :total="total"
@@ -354,6 +375,7 @@ export default {
         // 上传的地址
         url: process.env.VUE_APP_BASE_API + '/file/upload'
       },
+      showType:1
 
     };
   },
@@ -755,7 +777,7 @@ export default {
       this.ids.forEach(item=>{
         arr.push(item.detailsId)
       })
-      downloadFileApi({'detailsIdList':arr}).then((res) => {
+      downloadFileApi({'ids':arr.join(',')}).then((res) => {
         downloadFile({
           fileName: "文件档案下载.zip",
           fileData: res,
@@ -764,7 +786,7 @@ export default {
       });  
       // this.download(
       //   "/material/archives/download",
-      //   {'detailsIdList':arr},
+      //   {'ids':arr.join(',')},
       //   `文件档案下载_${new Date().getTime()}.zip`
       // );
 
@@ -773,6 +795,11 @@ export default {
 
     },
 
+    changeShowType(val){
+      this.showType=val;
+
+    }
+
 
   },
 };