首页桌面动态效果

public/static/css/style/style.css

@@ -35,6 +35,10 @@ body {
     font-size: 13px;
     font-family: Verdana, Arial, Microsoft YaHei, sans-serif;
 }
+/* 
+body::-webkit-scrollbar {
+    display: none;
+} */
 
 button,
 [type=button],
@@ -623,7 +627,7 @@ ul.sds-desktop-shortcut {
 }
 
 .v-widget-item.active~.v-widget-item.active {
-    margin-top: 9px;
+    margin-top: 8px;
 }
 
 .v-widget-item .v-widget-item-header {
@@ -1489,6 +1493,15 @@ ul.sds-desktop-shortcut {
     #sds-desktop .v-widget-window{
         height: calc(100vh - 10px) !important;
     }
+    #sds-desktop .v-widget-window .v-ps,
+    #sds-desktop .v-widget-window .ps__rail-y{
+        height: calc(100vh - 52px) !important;
+        min-height: 122px;
+    }
+    #sds-desktop .v-widget-window .ps__rail-y .ps__thumb-y{
+        height: calc((100vh - 52px) / 2) !important;
+        min-height: 64px;
+    }
 }
 
 
@@ -1563,3 +1576,179 @@ ul.sds-desktop-shortcut {
 .v-menu .v-menu-item-select-selected .v-icon {
     background-image: url(../../../image/index/select.png);
 }
+
+/* App展示界面 */
+.syno-sds-appview.syno-sds-appview-animate {
+    opacity: 1;
+    transform: scale(1);
+}
+
+.syno-sds-appview {
+    outline: none;
+    position: absolute;
+    background-color: rgba(0,0,0,0.7);
+    transition: opacity 0.15s ease-in;
+    transition: transform 0.2s ease-in;
+    opacity: .4;
+    transform: scale(1.05);
+    display: flex;
+    flex-direction: column;
+}
+
+.syno-sds-appview-container {
+    width: 100%;
+    padding: 32px 0px 0px 0px;
+}
+
+.search-field {
+    position: relative;
+    margin: 0 auto;
+    background: #28323C;
+    border: 1px solid #58626C;
+    border-radius: 4px;
+    height: 34px;
+    vertical-align: middle;
+}
+
+.search-field .search-field-input {
+    width: 100%;
+    box-sizing: border-box;
+    height: 24px;
+    top: 4px;
+    padding: 1px 12px 1px 33px;
+    background-position: 5px 1px;
+    background-repeat: no-repeat;
+    background-image: url(../../../image/index/search.png);
+    background-size: 24px 72px;
+    background-color: transparent;
+    color: #E0EAF4;
+    border: none;
+    vertical-align: top;
+}
+
+.search-field .search-field-clear-btn {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 4px;
+    background-image: url(../../../image/index/inputClear.png);
+    background-size: 24px 24px;
+    background-position: 0px 0px;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    right: 0px;
+    margin: 1px 3px;
+    border: none;
+    cursor: pointer;
+    opacity: 0.4;
+}
+
+.syno-sds-appview .sds-shortcut-wrapper {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    top: 68px;
+}
+.syno-sds-appview .sds-shortcut-wrapper .shortcut-zone {
+    height: 100%;
+    position: absolute;
+}
+
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner {
+    background-color: rgba(80,90,100,0.3);
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px transparent;
+    border-radius: 0px;
+    background-color: transparent;
+    margin-right: 2px;
+}
+
+.syno-sds-appview .sds-shortcut-wrapper .shortcut-zone.right-zone {
+    right: 0;
+}
+
+.syno-sds-appview .sds-app-panel {
+    display: flex;
+    padding: 48px 0 0 0;
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.syno-sds-appview .sds-app-panel .v-ps {
+    width: 100%;
+    padding-right: 0;
+    flex: 0 0 auto;
+}
+
+.syno-sds-appview .sds-app-panel .app-layout-wrapper {
+    margin: 0 auto;
+    max-width: 1376px;
+    min-width: 688px;
+}
+
+.syno-sds-appview .sds-app-panel .sds-desktop-layout {
+    position: relative;
+}
+
+.sds-desktop-layout {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.launch-icon.app-item-icon {
+    width: 156px;
+    height: 124px;
+    padding: 16px 8px 16px 8px;
+    flex: 0 0 auto;
+    cursor: pointer;
+}
+
+.launch-icon.app-item-icon .image {
+    width: 72px;
+    height: 72px;
+    background-size: 72px 72px;
+    margin: 0 auto;
+}
+
+.launch-icon .image {
+    width: 64px;
+    height: 64px;
+    background-size: 64px 64px;
+    position: relative;
+    background-position: center center;
+    background-repeat: no-repeat;
+    margin: 0 auto 4px auto;
+}
+
+.launch-icon .sds-application-notify-badge-num {
+    width: 14px;
+    height: 14px;
+    bottom: -1px;
+    right: -2px;
+}
+
+.launch-icon.app-item-icon {
+    width: 156px;
+    height: 124px;
+    padding: 16px 8px 16px 8px;
+    flex: 0 0 auto;
+    cursor: pointer;
+}
+
+.launch-icon.app-item-icon .text {
+    font-size: 12px;
+    line-height: 18px;
+    padding-top: 8px;
+    text-align: center;
+    text-shadow: 0 1px 3px rgba(0,0,0,0.75);
+    color: #fff;
+}

src/App.vue

@@ -3,6 +3,7 @@
     <div class="contain">
       <Header></Header>
       <Desktop></Desktop>
+       <!-- <DesktopAppView></DesktopAppView> -->
     </div>
   </div>
 </template>
@@ -10,6 +11,7 @@
 <script>
 import Header from './component/Header'
 import Desktop from './component/Desktop'
+import DesktopAppView from './component/DesktopAppView'
 
 import {getCurrentInstance} from 'vue';
 import mitt from "mitt"
@@ -24,7 +26,9 @@ export default {
   },
   components:{
     Header,
-    Desktop
+    Desktop,
+    DesktopAppView
+    
   }
 
 }

src/component/Desktop/FixWindow/index.vue

@@ -70,9 +70,14 @@
           class="v-trap-focus-indicator"
         ></div>
         <div class="v-widget-items-wrapper">
-          <div class="v-ps show ps--active-y">
+          <div
+            class="v-ps show ps--active-y"
+            @scroll="scrollList"
+            style="overflow: scroll"
+          >
+          
             <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
-            <div class="v-widget-list" @scroll="scrollList">
+            <div class="v-widget-list">
               <RunningState></RunningState>
               <ResourceMonitor></ResourceMonitor>
               <Storage></Storage>
@@ -102,10 +107,12 @@
               <div
                 class="ps__thumb-y"
                 tabindex="0"
-                style="top: 0px; height: 104px; display: none"
+                style="top: 0px; display: none"
+                :style="thumbYHeight"
                 @mousedown="mousedownProgress"
               ></div>
             </div>
+            
           </div>
         </div>
       </div>
@@ -115,7 +122,6 @@
       <div class="handler v-window-resizable-n"></div>
       <div class="handler v-window-resizable-s"></div>
     </div>
-
     <!-- 弹出小窗口选择框 -->
     <PortalSelectDialogWindow></PortalSelectDialogWindow>
     <!-- 弹出位置选择框 -->
@@ -154,6 +160,7 @@ export default {
         clickY: 0,
         clientY: 0,
         moveY: 0,
+        thumbStyletop: 0,
       },
       widgetFirstClick: {
         lastX: 0,
@@ -169,6 +176,8 @@ export default {
         moveX: 0,
         moveY: 0,
       },
+      widgetListIsBottom: false,
+      thumbYHeight: '104px',
       portalDetail: {
         display: "none",
         detailMessageList: [
@@ -281,10 +290,26 @@ export default {
       "changeOrHiddenWidgetPosition",
       this.changeOrHiddenWidgetPosition
     );
+    this.$bus.on("dialogWindowZIndexIsMax", this.dialogWindowZIndexIsMax);
     let el = document.querySelector(".ps__thumb-y");
-    let el2 = document.querySelector(".v-window-header-wrapper");
+    let el1 = document.querySelector(".v-window-header-wrapper");
     el.addEventListener("mouseup", this.mouseupProgress);
-    el2.addEventListener("mouseup", this.mouseupWidgetHeader);
+    el1.addEventListener("mouseup", this.mouseupWidgetHeader);
+    let el2 = document.querySelector(".v-widget-list");
+    let el3 = document.querySelector(".ps__rail-y");
+    // if(el2.offsetHeight > el1.offsetHeight ||){
+
+    // }
+    window.onresize = ()=>{
+      console.log(window.screenY)
+      if(window.screenY <= 250){
+        this.bottom = '0'
+        el.style.height = 'calc((100vh - 52px) / 2)'
+      }else{
+        this.bottom = '10px'
+        el.style.height = this.thumbYHeight
+      }
+    }
   },
   methods: {
     //点击固定窗口
@@ -295,13 +320,15 @@ export default {
         this.$bus.emit("changeMinDefaultZindexWindowCls");
         this.$bus.emit("fixWindowZIndexMax", true);
       }
-      this.dialogWindowZIndexIsMax(false)
+      this.dialogWindowZIndexIsMax(false);
     },
     // 修改changeFixWindow
     changeFixWindowZIndex() {
-      this.zIndex = 9040;
+      if (this.zIndex != 999999999) {
+        this.zIndex = 9040;
+      }
       if (this.cls != "") this.cls = "";
-      this.dialogWindowZIndexIsMax(true)
+      this.dialogWindowZIndexIsMax(true);
     },
     //点击进度条
     mousedownProgress(e) {
@@ -309,8 +336,13 @@ export default {
       let el1 = document.querySelector(".v-widget-window");
       el.addEventListener("mousemove", this.moveProgress);
 
-      this.progrecssFirstClick.lastY = el1.offsetTop + 31;
-      this.progrecssFirstClick.clickY = e.offsetY;
+      if(el.style.top && el.style.top.includes('px')){
+        let top = parseInt(el.style.top.replace('px',''))
+        this.progrecssFirstClick.thumbStyletop = top
+      }
+        this.progrecssFirstClick.lastY = el1.offsetTop + 31;
+        this.progrecssFirstClick.clickY = e.offsetY;
+      console.log(el.style.top,e.offsetY,this.progrecssFirstClick.lastY,e.clientY)
     },
     //移动进度条
     moveProgress(e) {
@@ -318,15 +350,29 @@ export default {
       let el1 = document.querySelector(".ps__rail-y");
       let el2 = document.querySelector(".v-widget-list");
       let moveY;
-      if (e.clientY > this.progrecssFirstClick.clientY) {
+      console.log(this.progrecssFirstClick.clientY)
+      if (e.clientY >= this.progrecssFirstClick.clientY) {
         moveY = e.clientY - e.offsetY - this.progrecssFirstClick.lastY;
+        if(this.progrecssFirstClick.thumbStyletop){
+          console.log(moveY)
+          moveY = this.progrecssFirstClick.thumbStyletop + 1
+          this.progrecssFirstClick.thumbStyletop = 0
+
+        }
       } else {
         moveY = this.moveY + (e.clientY - this.progrecssFirstClick.clientY);
+        if(this.progrecssFirstClick.thumbStyletop){
+          moveY = this.progrecssFirstClick.thumbStyletop + 1
+          this.progrecssFirstClick.thumbStyletop = 0
+        }
       }
       if (moveY < 0) {
         moveY = 0;
       } else if (moveY > el1.offsetHeight - el.offsetHeight) {
         moveY = el1.offsetHeight - el.offsetHeight;
+        this.widgetListIsBottom = true
+        
+
       }
       let moveY2 =
         -(
@@ -339,19 +385,31 @@ export default {
       el1.addEventListener("mouseleave", this.mouseupProgress);
       this.progrecssFirstClick.clientY = e.clientY;
       this.moveY = moveY;
+      console.log('moveY',moveY)
     },
     // 进度条鼠标抬起/离开
     mouseupProgress() {
       let el = document.querySelector(".ps__thumb-y");
       let el2 = document.querySelector(".v-widget-list");
       el.removeEventListener("mousemove", this.moveProgress);
-      el.style.top = "0px";
-      el2.style.top = "0px";
-      this.clearProgressMArk();
+
+      // this.clearProgressMArk();
     },
     // 滚动窗口列表
-    scrollList() {
-      console.log(1111);
+    scrollList(e) {
+      console.log(e, e.target.scrollTop);
+      let el = document.querySelector(".ps__thumb-y");
+      let el1 = document.querySelector(".ps__rail-y");
+      let el2 = document.querySelector(".ps--active-y");
+      console.log(e.target.scrollTop)
+      // if(! this.widgetListIsBottom){
+        let moveY =
+          ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
+          
+        console.log( ((el1.offsetHeight - el.offsetHeight)/(e.target.scrollHeight - el2.offsetHeight)) * e.target.scrollTop
+        );
+        el.style.top = moveY + e.target.scrollTop + 'px'
+      // }
     },
     // 点击勾选小窗口的加号
     selectWidgetItem() {
@@ -367,20 +425,15 @@ export default {
       Array.from(widgetItemArray)[obj.index].className = obj.cls;
       this.portalDetail.detailMessageList[obj.index].cls = obj.cls1;
       this.portalDetail.detailMessageList.forEach((item) => {
-        if (item.cls === "v-menu-item-select-selected selected active") {
-          item.cls = "v-menu-item-select-selected selected";
-        } else if (item.cls === "active") {
-          item.cls = "";
+        if (item.cls && item.cls.includes(" active")) {
+          item.cls = item.cls.replace(" active");
+        } else if (item.cls && item.cls.includes("active")) {
+          item.cls = item.cls.replace("active");
         }
       });
-      if (
-        this.portalDetail.detailMessageList[0].cls ===
-        "v-menu-item-select-selected selected"
-      ) {
-        this.portalDetail.detailMessageList[0].cls =
-          "v-menu-item-select-selected selected active";
-      } else if (this.portalDetail.detailMessageList[0].cls === "") {
-        this.portalDetail.detailMessageList[0].cls = "active";
+      let cls = this.portalDetail.detailMessageList[0].cls;
+      if (cls && !cls.includes("active")) {
+        this.portalDetail.detailMessageList[0].cls = cls + " active";
       }
     },
     // 跟随可视小窗口的个数改变进度条高度
@@ -391,21 +444,21 @@ export default {
         if (selectedNum >= 6) {
           selectedNum = 6;
         }
-        el.style.height = (7 - selectedNum) * 70 + "px";
+        this.thumbYHeight = (7 - selectedNum) * 70 + "px";
       } else {
         el.style.display = "none";
       }
       this.selectedNum = selectedNum;
     },
     // 将记住的进度条坐标重置
-    clearProgressMArk() {
-      (this.progrecssFirstClick.clientY = 0),
-        (this.moveY = 0),
-        (this.progrecssFirstClick = {
-          lastY: 0,
-          clickY: 0,
-        });
-    },
+    // clearProgressMArk() {
+    //   this.progrecssFirstClick.clientY = 0
+    //   this.moveY = 0
+    //     this.progrecssFirstClick = {
+    //       lastY: 0,
+    //       clickY: 0,
+    //     };
+    // },
     //点击固定窗口头部
     mousedownWidgetHeader(e) {
       let el = document.querySelector(".v-window-header-wrapper");
@@ -446,7 +499,9 @@ export default {
       }
       el1.style.left = moveX + "px";
       el1.style.top = moveY + "px";
-      el1.className = "v-widget-window syno-sds-widget v-window active";
+      if(!el1.className.includes(' active')){
+        el1.className = el1.className + " active";
+      }
       el.addEventListener("mouseleave", this.mouseupWidgetHeader);
     },
     //鼠标抬起固定窗口头部
@@ -471,24 +526,15 @@ export default {
         this.zIndex = this.defaultZIndex + 10;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex + 10);
         this.$bus.emit("fixWindowZIndexMax", true);
-        this.dialogWindowZIndexIsMax(false)
       }
     },
     //最小化固定窗口
     minimizeFixWndow() {
-      console.log(this.defaultZIndex);
       this.display = "none";
       console.log("this.defaultZIndex", this.defaultZIndex);
-
-      let el = document.querySelector(".v-widget-header-tool-icon.pin");
-      // if (el.className.includes("active")) {
-      //   this.zIndex = this.defaultZIndex 
-      //   this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 20);
-      // } else {
-      //   }
-        this.zIndex = this.defaultZIndex - 20;
-        this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
-        this.$bus.emit("fixWindowZIndexMax", false);
+      this.zIndex = this.defaultZIndex - 10;
+      this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
+      this.$bus.emit("fixWindowZIndexMax", false);
     },
     // 显示或隐藏位置选择框
     selectWidgetPosition() {
@@ -512,17 +558,24 @@ export default {
       this.left = detailMessageItem.left;
       this.right = detailMessageItem.right;
       let el = document.querySelector(".v-widget-header-tool-icon.dock");
-      el.className = "v-widget-header-tool-icon dock active";
-      if (
-        this.portalDetail1.detailMessageList[0].cls &&
-        this.portalDetail1.detailMessageList[0].cls.includes(
-          "v-menu-item-select-selected selected"
-        )
-      ) {
-        this.portalDetail1.detailMessageList[0].cls =
-          "v-menu-item-select-selected selected active";
-      } else {
-        this.portalDetail1.detailMessageList[0].cls = "active";
+      el.className = el.className + " active";
+      console.log(el.className);
+      let cls = this.portalDetail1.detailMessageList[0].cls;
+      if (cls && !cls.includes("active")) {
+        this.portalDetail1.detailMessageList[0].cls = cls + " active";
+      }
+      // sds-desktop .v-widget-window .v-widget-items-wrapper{
+      //   height: calc(100vh - 42px) !important;
+      // }
+      // #sds-desktop .v-widget-window{
+      //     height: calc(100vh - 10px) !important;
+      // }
+      console.log(obj.index);
+      if (obj.index == 0) {
+        let el1 = document.querySelector(".v-widget-window");
+        let el2 = document.querySelector(".v-widget-items-wrapper");
+        el1.style.height = "calc(100vh - 47px) !important";
+        el2.style.height = "calc(100vh - 120px) !important";
       }
     },
     //点击小钉子
@@ -531,23 +584,23 @@ export default {
       if (el.className.includes("active")) {
         el.className = el.className.replace(" active", "");
         this.$bus.emit("fixWindowZIndexMax", false);
-        this.zIndex = this.defaultZIndex 
+        this.zIndex = this.defaultZIndex;
         this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
         this.$bus.emit("fixWindowZIndexMax", true);
       } else {
-        el.className = "v-widget-header-tool-icon pin active";
+        el.className = el.className + " active";
         this.zIndex = 999999999;
         // this.$bus.emit("changeDefaultZIndex", this.defaultZIndex - 10);
         this.$bus.emit("fixWindowZIndexMax", true);
-        
       }
     },
     //判断弹出窗ZIndex是不是比较大
-    dialogWindowZIndexIsMax(bol){
-      if(bol){
-        this.cls = 'deactive-win'
-      }else{
-        this.cls = 'active-win'
+    dialogWindowZIndexIsMax(bol) {
+      console.log(bol);
+      if (bol) {
+        this.cls = "deactive-win";
+      } else {
+        this.cls = "active-win";
       }
     },
 
@@ -570,5 +623,11 @@ export default {
   name: "FixWindow",
 };
 </script>
-<style scoped>
+<style scoped lang="css">
+.v-widget-window .v-ps.show::-webkit-scrollbar {
+  display: none;
+}
+.v-ps{
+  height: 424px;
+}
 </style>

src/component/Desktop/Menu/index.vue

@@ -55,6 +55,7 @@ export default {
     },
     // 点击小图标打开大图标
     clickMenuItem(imgUrl,menuIndex){
+      console.log('click')
       this.$bus.emit('clickMenuItem',imgUrl)
       this.menuList.forEach(menu => {
         menu.backgroundColor = 'rgba(50,60,70,0.9)'

src/component/Desktop/PortaSelectPosition/index.vue

@@ -160,8 +160,8 @@ export default {
           index: detailMessageIndex,
         };
         this.$bus.emit("changeOrHiddenWidgetPosition", obj);
-        this.portalDetail.display = "none";
       }
+      this.portalDetail.display = "none";
       this.countSelectedMenuItem();
     },
     //统计已选择的个数

src/component/Desktop/Shortcut/ResizablePinned/index.vue

@@ -338,6 +338,8 @@ export default {
       this.lastCheckIndex = detailMessageIndex;
       console.log(this.defaultZIndex);
       this.changeZIndexMaxMenuItemCls()
+      this.$bus.emit('dialogWindowZIndexIsMax',true)
+      this.$bus.emit("fixWindowZIndexMax", false);
     },
     // 切换弹出窗口
     changeDialogWindow(imgUrl, menuIndex) {
@@ -449,6 +451,8 @@ export default {
         }
       });
       if (this.openWindowNum == 0) {
+        this.$bus.emit('dialogWindowZIndexIsMax',false)
+        this.$bus.emit("fixWindowZIndexMax", true);
         this.resizablePinnedDetail.detailMessageList.forEach((item) => {
           item.zIndex = 9053;
         });

src/component/DesktopAppView/index.vue

@@ -0,0 +1,823 @@
+<template>
+  <div>
+    <!-- 主菜单界面 -->
+    <div
+      class="syno-sds-appview syno-sds-appview-animate"
+      style="width: 100%; height: 627px"
+    >
+      <div class="syno-sds-appview-container">
+        <div class="search-field" style="width: 278px">
+          <input
+            type="text"
+            size="16"
+            placeholder="搜索"
+            class="search-field-input"
+          />
+          <button
+            type="button"
+            class="search-field-clear-btn"
+            style="display: none"
+          ></button>
+        </div>
+      </div>
+      <div class="sds-shortcut-wrapper">
+        <div class="shortcut-zone" style="width: 13%"></div>
+        <div class="shortcut-zone right-zone" style="width: 13%"></div>
+      </div>
+      <div class="sds-app-panel">
+        <div class="v-ps ps ps--active-y">
+          <div class="app-layout-wrapper" style="width: 74%; height: 100%">
+            <div
+              class="sds-desktop-layout search-layout"
+              style="display: none"
+            ></div>
+            <div class="sds-desktop-layout">
+              <li
+                class="launch-icon app-item-icon"
+                v-for="(detailMessage,detailMessageIndex) in DesktopAppViewDetail.detailMessageList"
+                :key="detailMessage.id"
+              >
+                <div
+                  class="image"
+                  :style="{backgroundImage: `url(${detailMessage.titleImgUrl})`}"
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">{{detailMessage.title}}</div>
+              </li>
+              <!-- <li
+                class="launch-icon app-item-icon"
+                style="left: 172px; top: 0px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/HelpBrowser/images/1x/help_72.png?v=42661-s0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">DSM 说明</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 344px; top: 0px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/PkgManApp/images/package_center_72.png?v=42661-s0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">套件中心</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 516px; top: 0px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/ResourceMonitor/images/default/1x/ResourceMonitor_72.png?v=42661-s0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">资源监控</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 688px; top: 0px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/StorageManager/images/storage_manager_72.png?v=42661-s0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">存储管理器</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 860px; top: 0px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/LogCenter/images/log_center_72.png?v=42661-s0&amp;app_version=1.0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">日志中心</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 0px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/SecurityScan/images/security_scan_72.png?v=42661-s0&amp;app_version=1.0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">安全顾问</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon"
+                style="left: 172px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webman/modules/SupportForm/images/1x/SupportCenter_72.png?v=42661-s0');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">技术支持中心</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 344px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/ScsiTarget/images/SANManager_{0}.png');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">SAN Manager</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 516px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MailPlus-Server/images/MailPlusServer_{0}.png&amp;app_version=2.3.2-11072');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology MailPlus Server</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 688px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Chat/images/icon_admin/ChatAdmin_{0}.png&amp;app_version=2.4.0-11977');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Chat 管理控制台</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 860px; top: 156px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Chat/images/icon/chat_{0}.png&amp;app_version=2.4.0-11977');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Chat</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 0px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/FileBrowser/images/icon/FileStation_{0}.png&amp;app_version=1.3.3-1399');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">File Station</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 172px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/HyperBackup/images/HyperBackup_{0}.png&amp;app_version=3.0.2-2517');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Hyper Backup</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 344px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/CodecPack/images/icon/AME_{0}.png&amp;app_version=2.0.0-1017');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Advanced Media Extensions</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 516px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Calendar/images/Calendar_{0}.png&amp;app_version=2.4.4-10928');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Calendar</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 688px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/Contacts/icon/Contacts_{0}.png&amp;app_version=1.0.3-10478');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Contacts</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 860px; top: 312px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynoFinder/images/icon/UniversalSearch_{0}.png&amp;app_version=1.6.0-0534');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Universal Search</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 0px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyPhotos/images/icon/photos_{0}.png&amp;app_version=1.2.0-0263');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Photos</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 172px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/AudioStation/images/AudioStation_{0}.png&amp;app_version=7.0.1-5209');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Audio Station</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 344px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive/images/DriveAdminConsole_{0}.png&amp;app_version=3.1.0-22920');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Drive 管理控制台</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 516px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/DownloadStation/images/download_station_{0}.png&amp;app_version=3.9.3-4609');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Download Station</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 688px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive-Drive/images/_Favicon/SynologyDrive_{0}.png&amp;app_version=3.1.0-22920');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Drive</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 860px; top: 468px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MailClient/images/icon/MailPlus_{0}.png&amp;app_version=2.3.2-11450');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology MailPlus</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 0px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/MediaServer/images/MediaServer_{0}.png&amp;app_version=2.0.2-3053');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">媒体服务器</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 172px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/NoteStation/images/NoteStation_{0}.png&amp;app_version=2.6.1-2450');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Note Station</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 344px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/OAuthService/images/Authenticator_{0}.png&amp;app_version=1.1.2-0071');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">OAuth Service</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 516px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/PDFViewer/images/icon/DocumentViewer_{0}.png&amp;app_version=1.2.3-1124');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">PDF 查看器</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 688px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/SynologyDrive-ShareSync/images/package-{0}.png&amp;app_version=3.1.0-22920');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Synology Drive ShareSync</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 860px; top: 624px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/VideoStation/images/app/VideoStation_{0}.png&amp;app_version=3.0.3-2084');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">Video Station</div>
+              </li>
+              <li
+                class="launch-icon app-item-icon start"
+                style="left: 0px; top: 780px"
+              >
+                <div
+                  class="image"
+                  style="
+                    background-image: url('webapi/entry.cgi?api=SYNO.Core.Synohdpack&amp;version=1&amp;method=getHDIcon&amp;res=72&amp;retina=false&amp;path=webman/3rdparty/TextEditor/images/TextEditor_{0}.png&amp;app_version=1.2.4-0245');
+                  "
+                >
+                  <div
+                    class="sds-application-notify-badge-num"
+                    style="opacity: 0"
+                  ></div>
+                </div>
+
+                <div class="text">文本编辑器</div>
+              </li> -->
+            </div>
+          </div>
+          <div class="ps__rail-x" style="left: 0px; bottom: 0px">
+            <div
+              class="ps__thumb-x"
+              style="left: 0px; width: 0px"
+            ></div>
+          </div>
+          <div class="ps__rail-y" style="top: 0px; right: 0px; height: 511px">
+            <div
+              class="ps__thumb-y"
+              style="top: 0px; height: 278px"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      DesktopAppViewDetail: {
+        detailMessageList: [
+          {
+            id: 0,
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+            
+          },
+          {
+            id: 1,
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+          },
+          {
+            id: 2,
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+          },
+          {
+            id: 3,
+            title: "资源监控",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/resourceMonitor.png",
+          }, 
+          {
+            id: 4,
+            title: "存储管理器",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/storageManager.png",
+          },
+          {
+            id: 5,
+            title: "日志中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/logCenter.png",
+          },
+          {
+            id: 6,
+            title: "安全顾问",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/securityScan.png",
+          },
+          {
+            id: 7,
+            title: "技术支持中心",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/SupportCenter.png",
+          },
+           {
+            id: 8,
+            title: "Storage Manager",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/storageManager.png",
+          },
+          {
+            id: 9,
+            title: "Synology MailPlus Server",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/mailPlusServer.png",
+          },
+          {
+            id: 10,
+            title: "Synology Chat 管理控制台",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/chatAdminpng.png",
+          },
+          {
+            id: 11,
+            title: "Synology Chat",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/chat.png",
+          },
+           {
+            id: 12,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+          {
+            id: 13,
+            title: "Hyper Backup",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/hyperBackup.png",
+          },
+          {
+            id: 14,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+          {
+            id: 15,
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+          },
+           {
+            id: 16,
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+          },
+          {
+            id: 17,
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+          },
+          {
+            id: 18,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+          {
+            id: 19,
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+          },
+           {
+            id: 20,
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+          },
+          {
+            id: 21,
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+          },
+          {
+            id: 22,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+          {
+            id: 23,
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+          },
+           {
+            id: 24,
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+          },
+          {
+            id: 25,
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+          },
+          {
+            id: 26,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+          {
+            id: 27,
+            title: "DSM 说明",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+          },
+           {
+            id: 28,
+            title: "套件中心",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+          },
+          {
+            id: 29,
+            title: "控制中心",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+          },
+          {
+            id: 30,
+            title: "File Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+          },
+         
+        ],
+      },
+    };
+  },
+  components: {},
+  name:'DesktopAppView',
+};
+</script>
+
+<style lang="css" scoped>
+    .sds-desktop-layout {
+        flex-direction: row;
+    }
+
+    .syno-sds-appview .sds-app-panel .sds-desktop-layout{
+      justify-content: space-around;
+    }
+</style>