我的应用

src/renderer/components/DragBox/box.vue

+<template>
+  <div class="box">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+  .box {
+    float: left;
+    width: 460px;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    padding: 30px 15px 18px;
+    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0.5) 100%);
+    box-shadow: 0px 4px 4px 0px rgba(10,78,141,0.1);
+    border-radius: 20px 20px 20px 20px;
+    &:nth-child(2n+1) {
+      margin-left: 30px;
+      width: 346px;
+    }
+  }
+</style>
\ No newline at end of file

src/renderer/components/DragBox/index.vue

@@ -3,6 +3,14 @@
       <div class="dragbox_head">
           <img @click="addCate" src="~@/assets/addCategory.png" alt="" class="dragbox_head_img"><span @click="addCate" class="dragbox_head_txt">添加分类</span>
       </div>
+      <cateBox v-for="(cItem, cIndex) in cateList" :key="cIndex">
+          <div class="dragbox_cate">
+              <div class="dragbox_cate_name">{{cItem.name}}</div>
+              <div class="dragbox_cate_list">
+                  <cateItem v-for="(sItem, sIndex) in cItem.list" :key="sIndex"  :detail="sItem" :src="sItem.icon" :name="sItem.name"></cateItem>
+              </div>
+          </div>
+      </cateBox>
       <!-- <draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
         <div v-for="element in myArray" :key="element.id">{{element.name}}</div>
         </draggable>
@@ -38,10 +46,41 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
+import draggable from 'vuedraggable';
+import cateBox from './box.vue';
+import cateItem from './item.vue';
 export default {
+    props: {
+        cateList: {
+            type: Array,
+            default: () => {
+                return [{
+                    name:"备课资源",
+                    // jiaowuguanli.png
+                    list:[]
+                },
+                {
+                    name:"教学工具",
+                    // beikeziyuan.png
+                    list:[]
+                },
+                {
+                    name:"课后练习",
+                    // jiaoxuegongju.png
+                    list:[]
+                },
+                {
+                    name:"教务管理",
+                    // kehoulianxi.png
+                    list:[]
+                }];
+            }
+        }
+    },
     components: {
-        draggable
+        draggable,
+        cateBox,
+        cateItem
     },
     data() {
         return {
@@ -105,4 +144,16 @@ export default {
             color: #333333;
         }
     }
+    .dragbox_cate {
+        .dragbox_cate_name {
+            padding-left: 25px;
+            font-size: 18px;
+            font-weight: 500;
+            color: #333333;
+        }
+        .dragbox_cate_list {
+             display: flex;
+            flex-wrap: wrap;
+        }
+    }
 </style>
\ No newline at end of file

src/renderer/components/DragBox/item.vue

 <template>
-  <div></div>
+  <div class="item_wrap" @click="tapApp">
+    <img :src="src" alt="" class="item_img">
+    <span class="item_name">{{name}}</span>
+  </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    src: {
+      type: String,
+      default: ""
+    },
+    detail:{
+      type: Object,
+      default: {}
+    }
+  },
+  computed: {
+    ipcRenderer() {
+      return (this.$electron && this.$electron.ipcRenderer) || {};
+    },
+  },
+  methods: {
+    tapApp() {
+      this.ipcRenderer.send("openApp", this.detail);
+    },
+  }
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+  .item_wrap {
+    cursor: pointer;
+    flex-shrink: 0;
+    margin-right: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 10px;
+    box-sizing: border-box;
+    width: 110px;
+    height: 110px;
+    border-radius: 12px 12px 12px 12px;
+    &:hover {
+      background: rgba(57, 157, 249, 0.1);
+    }
+  }
+  .item_img {
+    padding: 4px;
+    width: 42px;
+    height: 42px;
+    object-fit: contain;
+  }
+  .item_name {
+    margin-top: 3px;
+    color: #333333;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: center;
+  }
 </style>
\ No newline at end of file

src/renderer/views/manage/index.vue

@@ -34,7 +34,7 @@
           <div>
             <Appbox v-if="current === 'all'" :listObj="listObj" :listAll="appList"></Appbox>
             <SchoolBox v-if="current === 'school'"></SchoolBox>
-            <DragBox v-if="current === 'mine'"></DragBox>
+            <DragBox v-if="current === 'mine'" :cateList="cateList"></DragBox>
           </div>
       </el-scrollbar>
     </el-main>
@@ -75,6 +75,29 @@ export default {
     ipcRenderer() {
       return (this.$electron && this.$electron.ipcRenderer) || {};
     },
+    cateList() {
+      return [{
+          name:"备课资源",
+          list:this.appList.slice(0,4)
+      },
+      {
+          name:"教学工具",
+          list:this.appList.slice(8,14)
+      },
+      {
+          name:"课后练习",
+          list:this.appList.slice(14,24)
+      },
+      {
+          name:"教务管理",
+          list:this.appList.slice(24,30)
+      },
+      {
+          name:"自定义分类",
+          list:this.appList.slice(30,36)
+      }
+      ];
+    },
   },
   mounted() {
     this.ipcOn();