修复bug2

src/renderer/components/Appbox/index.vue

@@ -149,8 +149,19 @@ export default {
     window.removeEventListener("contextmenu",this.handleEvent)
   },
   methods: {
+    findParentEl({dataType, element, className}) {
+        if(dataType) {
+            if(element.dataset.type === dataType) return element;
+            if(element.parentElement) return this.findParentEl({dataType,element:element.parentElement});
+        }
+        if(className) {
+            if(element.classList.contains(className)) return element;
+            if(element.parentElement) return this.findParentEl({className,element:element.parentElement});
+        }
+        return null;
+    },
     handleEvent(e) {
-      // console.dir(e)
+      console.dir(e)
       e.preventDefault();
       e.stopPropagation();
       if(e.target.dataset.type === 'closeMask' || this.showMenu) {
@@ -166,8 +177,10 @@ export default {
       ) {
         return;
       }
+
+      let itemWrapElement = this.findParentEl({className:"item_wrap", element:e.target});
       // 需要显示右键菜单
-      this.menuPosition.left = e.layerX;
+      this.menuPosition.left = (itemWrapElement && (itemWrapElement.offsetLeft+20)) || (e.layerX - 16);
       this.menuPosition.top = e.layerY;
       this.menuPosition.id = parentType === 'right-menu' ? e.target.parentElement.dataset.id : e.target.dataset.id;
       this.menuPosition.current = parentType === 'right-menu' ? e.target.parentElement.dataset.index : e.target.dataset.index;

src/renderer/components/Appbox/item.vue

@@ -64,12 +64,13 @@ export default {
     }
   }
   .item_img {
-    width: 50px;
-    height: 50px;
+    padding: 4px;
+    width: 42px;
+    height: 42px;
     object-fit: contain;
   }
   .item_name {
-    margin-top: 3px;
+    margin-top: 6px;
     color: #333333;
     font-size: 14px;
     font-weight: 400;

src/renderer/components/Dockmode/one.vue

@@ -83,8 +83,10 @@ export default {
 .left_img {
   margin-top: 6px;
   width: 225px;
-  height: 60px;
+  // height: 60px;
+  height: 54px;
   object-fit: contain;
+
 }
 .left_name {
   padding-left: 4px;
@@ -101,6 +103,11 @@ export default {
     border-radius: 6px;
     margin-left: 8px;
     background: rgba(0, 0, 0, .1);
+    // border: 2px solid transparent;
+    // border-radius: 16px;
+    // background-clip: padding-box, border-box;
+    // background-origin: padding-box, border-box;
+    // background-image: linear-gradient(to right, #fff, #fff), linear-gradient(180deg, #87B7FF 44%, #0071FF 100%, #9CC7F8 6%, #0077FF 100%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -124,7 +131,7 @@ export default {
     width: 36px;
     height: 36px;
     border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, .1);
+    // border: 1px solid rgba(255, 255, 255, .1);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -146,9 +153,11 @@ export default {
   }
   .img {
     flex-shrink: 0;
-    // height: 36px;
-    height: 100%;
-    // width: 36px;
+    width: 36px;
+    height: 36px;
+    // height: 100%;
+    object-fit: contain;
+    
   }
   .app_name {
     // display: none;

src/renderer/components/Dockmode/second.vue

@@ -3,6 +3,7 @@
     <div class="left_main">
       <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img" @click="getFrontApp">
     </div>
+   <div class="right_app_wrapper">
       <div class="right_app" :class="['active_'+(current+1)]">
       <el-scrollbar ref="scroll" style="height: 50px;">
         <div class="second_app_list">
@@ -33,6 +34,7 @@
       </div>
     </div>
    </div>
+  </div>
 </template>
 
 <script>
@@ -83,7 +85,8 @@ export default {
       if(hasSoft.length < 4 && hasSoft.length > 0) {
         hasSoft = hasSoft.concat( new Array( 4 -  hasSoft.length).fill({}) )
       }
-      return hasSoft && hasSoft.slice(0,4) || []
+      // return hasSoft && hasSoft.slice(0,4) || []
+      return hasSoft || []
     },
     list() {
       return this.fourList[this.current] && this.fourList[this.current].softList
@@ -161,6 +164,12 @@ export default {
     }
   }
   
+  .right_app_wrapper {
+    display: flex;
+    align-items: center;
+    // justify-content: center;
+    flex: 1;
+  }
   .right_app {
     display: flex;
     flex-direction: column;
@@ -210,15 +219,17 @@ export default {
     // padding-top: 6px;
     // width: 176px;
     // width: 132px;
-    flex: 1;
-    // border: 1px solid red;
+    width: 206px;
+    // flex: 1;
+    flex-shrink: 0;
     cursor: pointer;
     line-height: 1;
     height: 100%;
     background-image: url(~@/assets/bgc/3.png);
-    background-size: auto 52px;
+    background-size: 206px 52px;
     background-position: -50px ;
     background-repeat: repeat;
+    // border: 1px solid red;
     &.disable {
       cursor: auto;
       pointer-events: none;
@@ -231,7 +242,11 @@ export default {
     // }
     .icon_size {
       font-size: 20px;
+      &.icon-kehoulianxi-weixuanzhong {
+        font-size: 18px;
+      }
     }
+    
     .tab_name {
       padding-left: 8px;
       font-size: 12px;
@@ -242,7 +257,8 @@ export default {
     &.active {
       background-image: url(~@/assets/bgc/2.png);
       background-position: bottom;
-      background-size: auto 48px;
+      // background-size: auto 48px;
+      background-size: 100% 36px;
       background-repeat: no-repeat;
       .tab_name {
         font-size: 14px;
@@ -250,6 +266,9 @@ export default {
       }
       .icon_size {
         font-size: 22px;
+        &.icon-kehoulianxi-xuanzhong {
+          font-size: 20px;
+        }
       }
     }
   }
@@ -260,6 +279,7 @@ export default {
     margin-bottom: 4px;
     height: 50px;
     .second_app_item {
+      margin-top: -4px;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -268,8 +288,10 @@ export default {
     }
     .second_app_img {
       padding: 4px;
-      width: 42px;
-      height: 42px;
+      // width: 42px;
+      // height: 42px;
+      width: 38px;
+      height: 38px;
       object-fit: contain;
       cursor: pointer;
     }

src/renderer/components/DragBox/box.vue

@@ -17,7 +17,7 @@ export default {
 
 <style lang="less" scoped>
   .box {
-    float: left;
+    // float: left;
     // width: 460px;
     // width: 43%;
     // width: 49%;

src/renderer/components/DragBox/index.vue

@@ -6,7 +6,7 @@
         <cateBox v-for="(cItem, cIndex) in cateList" :key="cIndex" :nolist="(!cItem.softList || cItem.softList.length == 0)">
             <div class="dragbox_cate" :data-id="cItem.id" data-type="cate_container">
                 <!-- @dblclick="modifyName(cItem.name,cIndex)" -->
-            <div v-if="editIndex != cIndex" class="dragbox_cate_header">
+                <div v-if="editIndex != cIndex" class="dragbox_cate_header" :class="{'noList':(!cItem.softList || cItem.softList.length == 0)}">
                     <div  class="dragbox_cate_name" >{{cItem.name}}
                         <img @click="modifyName(cItem.name,cIndex)" 
                         src="~@/assets/edit_icon.png" alt="" class="dragbox_cate_edit">
@@ -100,9 +100,15 @@ export default {
         window.removeEventListener("contextmenu",this.handleEvent)
     },
     methods: {
-        findParentEl({dataType, element}) {
+        findParentEl({dataType, element, className}) {
+            if(dataType) {
                 if(element.dataset.type === dataType) return element;
                 if(element.parentElement) return this.findParentEl({dataType,element:element.parentElement});
+            }
+            if(className) {
+                if(element.classList.contains(className)) return element;
+                if(element.parentElement) return this.findParentEl({className,element:element.parentElement});
+            }
             return null;
         },
         handleEvent(e) {
@@ -114,14 +120,16 @@ export default {
                 this.closeMenu();
                 return;
             }
+            let parentType = e.target.parentElement &&
+                e.target.parentElement.dataset.type || '';
             if (
-            (e.target.parentElement &&
-                e.target.parentElement.dataset.type !== 'right-menu') &&
+            (parentType !== 'right-menu') &&
                 e.target.dataset.type !== 'right-menu'
             ) {
                 return;
             }
             let cateElement = this.findParentEl({dataType:"cate_container", element:e.target.parentElement ? e.target.parentElement : e.target});
+            let itemWrapElement = this.findParentEl({className:"item_wrap", element:e.target});
             
             if(!cateElement || !cateElement.dataset.id) {
                 return;
@@ -129,9 +137,9 @@ export default {
 
             this.menuPosition.cateId = cateElement.dataset.id;
             // 需要显示右键菜单
-            this.menuPosition.left = e.layerX;
+            this.menuPosition.left = (itemWrapElement && (itemWrapElement.offsetLeft+20)) || (e.layerX - 16);
             this.menuPosition.top = e.layerY;
-            this.menuPosition.id = e.target.parentElement ? e.target.parentElement.dataset.id : e.target.dataset.id;
+            this.menuPosition.id = parentType === 'right-menu' ? e.target.parentElement.dataset.id : e.target.dataset.id;
             this.showMenu = true;
         },
         listener() {
@@ -204,6 +212,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+    .dragbox_container {
+        // padding-bottom: 36px;
+    }
     .dialog-footer {
         display: flex;
         justify-content: flex-end;
@@ -231,6 +242,10 @@ export default {
             display: flex;
             align-items: center;
             justify-content: space-between;
+            padding-bottom: 20px;
+            &.noList {
+                padding-bottom: 0;
+            }
             .dragbox_cate_del {
                 cursor: pointer;
                 width: 14px;

src/renderer/components/DragBox/item.vue

@@ -63,7 +63,7 @@ export default {
     object-fit: contain;
   }
   .item_name {
-    margin-top: 3px;
+    margin-top: 6px;
     color: #333333;
     font-size: 14px;
     font-weight: 400;

src/renderer/components/SchoolBox/box.vue

@@ -18,5 +18,8 @@ export default {
         box-shadow: 0px 4px 4px 0px rgba(10,78,141,0.1);
         border-radius: 20px 20px 20px 20px;
         opacity: 0.8;
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 </style>
\ No newline at end of file

src/renderer/components/SchoolBox/index.vue

 <template>
-  <div>
+  <div class="appbox-container">
       <box v-for="(sItem, sInd) in schoolList" :key="sInd" >
         <div class="resource_head">
             <img v-if="sItem.icon === 'guojiazhihui'" src="~@/assets/school/zhihuipingtai.png" alt="" class="resource_icon">
@@ -145,6 +145,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+    .appbox-container {
+        // padding-bottom: 36px;
+    }
     .resource_head {
         display: flex;
         align-items: center;

src/renderer/components/SchoolBox/item.vue

@@ -48,12 +48,12 @@ export default {
             font-weight: 400;
             color: #333333;
             line-height: 16px;
-            &:hover,&:active {
-                color: #399DF9;
-            }
             &.more {
                 color: #999999;
             }
+            &:hover,&:active {
+                color: #399DF9;
+            }
         }
     }
 </style>
\ No newline at end of file

src/renderer/views/manage/index.vue

@@ -4,7 +4,7 @@
       <div class="aside_top">
         <div class="aside_item" @click="toggleExpand">
           <img src="~@/assets//statr.png" alt="" class="icon_img">
-          <span v-if="expand">开始</span>
+          <span v-if="expand" class="icon_text">开始</span>
         </div>
         <!-- <div class="aside_item" @click="openWin('system')">关于系统</div>
         <div class="aside_item" @click="openWin('settingCenter')">设置中心</div>
@@ -16,17 +16,17 @@
         <div class="aside_item" @click="changeTap('school')" :class="{ 'active': current === 'school' }">
           <img v-if="current === 'school'" src="~@/assets/xueshimao_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/xueshimao.png" alt="" class="icon_img">
-          <span v-if="expand">学校应用</span>
+          <span v-if="expand" class="icon_text">学校应用</span>
         </div>
         <div class="aside_item" @click="changeTap('all')" :class="{ 'active': current === 'all' }">
           <img v-if="current === 'all'" src="~@/assets/alisis_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/alisis.png" alt="" class="icon_img">
-          <span v-if="expand">全部应用</span>
+          <span v-if="expand" class="icon_text">全部应用</span>
         </div>
         <div class="aside_item" @click="changeTap('mine')" :class="{ 'active': current === 'mine' }">
           <img v-if="current === 'mine'" src="~@/assets/user_a.png" alt="" class="icon_img">
           <img v-else src="~@/assets/user.png" alt="" class="icon_img">
-          <span v-if="expand">我的应用</span>
+          <span v-if="expand" class="icon_text">我的应用</span>
         </div>
       </div>
     </el-aside>
@@ -37,7 +37,7 @@
             <!-- <span v-else-if="current === 'school'">学校应用</span> -->
             <!-- <span v-else-if="current === 'mine'">我的应用</span> -->
           </div>
-          <div>
+          <div class="manage_main_content">
             <Appbox v-if="current === 'all'" :cateList="categoryList" :listObj="listObj" :listAll="appList" @softAddtoCate="softAddtoCate"></Appbox>
             <SchoolBox v-if="current === 'school'"></SchoolBox>
             <DragBox ref="dragEl" v-if="current === 'mine'" :cateList="categoryList" 
@@ -278,8 +278,10 @@ export default {
       cursor: pointer;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: flex-start;
       margin-top: 14px;
+      box-sizing: border-box;
+      padding: 0 14px;
       width: 100%;
       text-align: center;
       font-size: 16px;
@@ -294,15 +296,22 @@ export default {
         background: rgba(57, 157, 249, 0.08);
       }
     }
+    .icon_text {
+      margin-left: 7px;
+    }
     .icon_img {
-      margin-right: 7px;
+      // margin-right: 7px;
       width: 30px;
       height: 30px;
     }
   }
   .manage_main {
-    padding: 36px 48px 0;
+    padding: 36px 0 0 48px;
     background-color: #C6D3EA;
+    .manage_main_content {
+      padding-bottom: 36px;
+      padding-right: 48px;
+    }
     .el-scrollbar__wrap {
         overflow-x: hidden;
     }