首页桌面

public/static/css/style/style.css

@@ -1499,7 +1499,7 @@ ul.sds-desktop-shortcut {
         min-height: 122px;
     }
     #sds-desktop .v-widget-window .ps__rail-y .ps__thumb-y{
-        height: calc((100vh - 52px) / 2) !important;
+        height: calc((100vh - 52px) / 2);
         min-height: 64px;
     }
 }

src/App.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="container">
     <div class="contain">
-      <Header></Header>
-      <Desktop></Desktop>
-       <!-- <DesktopAppView></DesktopAppView> -->
+      <!-- <Header></Header> -->
+      <!-- <Desktop></Desktop> -->
+       <DesktopAppView></DesktopAppView>
     </div>
   </div>
 </template>

src/component/Desktop/FixWindow/index.vue

@@ -75,7 +75,7 @@
             @scroll="scrollList"
             style="overflow: scroll"
           >
-          
+
             <!--  <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
             <div class="v-widget-list">
               <RunningState></RunningState>
@@ -107,12 +107,12 @@
               <div
                 class="ps__thumb-y"
                 tabindex="0"
-                style="top: 0px; display: none"
-                :style="thumbYHeight"
+                style="top: 0px;"
+                :style="{height:thumbYHeight,display:thumbYDisplay}"
                 @mousedown="mousedownProgress"
               ></div>
             </div>
-            
+
           </div>
         </div>
       </div>
@@ -178,6 +178,7 @@ export default {
       },
       widgetListIsBottom: false,
       thumbYHeight: '104px',
+      thumbYDisplay: 'none',
       portalDetail: {
         display: "none",
         detailMessageList: [
@@ -297,17 +298,14 @@ export default {
     el1.addEventListener("mouseup", this.mouseupWidgetHeader);
     let el2 = document.querySelector(".v-widget-list");
     let el3 = document.querySelector(".ps__rail-y");
-    // if(el2.offsetHeight > el1.offsetHeight ||){
-
-    // }
+    if(el2.offsetHeight > el3.offsetHeight){
+        this.thumbYDisplay = 'block'
+        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+    }
     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
+      if(el2.offsetHeight > el3.offsetHeight){
+        this.thumbYDisplay = 'block'
+        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
       }
     }
   },
@@ -371,7 +369,7 @@ export default {
       } else if (moveY > el1.offsetHeight - el.offsetHeight) {
         moveY = el1.offsetHeight - el.offsetHeight;
         this.widgetListIsBottom = true
-        
+
 
       }
       let moveY2 =
@@ -390,9 +388,14 @@ export default {
     // 进度条鼠标抬起/离开
     mouseupProgress() {
       let el = document.querySelector(".ps__thumb-y");
+      let el1 = document.querySelector(".ps__rail-y");
       let el2 = document.querySelector(".v-widget-list");
       el.removeEventListener("mousemove", this.moveProgress);
-
+      if(el2.offsetHeight > el1.offsetHeight){
+        console.log('')
+        this.thumbYDisplay = 'block'
+        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
+      }
       // this.clearProgressMArk();
     },
     // 滚动窗口列表
@@ -405,7 +408,7 @@ export default {
       // 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'
@@ -438,15 +441,20 @@ export default {
     },
     // 跟随可视小窗口的个数改变进度条高度
     changeThumbHeight(selectedNum) {
-      let el = document.querySelector(".ps__thumb-y");
       if (selectedNum > 2) {
-        el.style.display = "block";
         if (selectedNum >= 6) {
           selectedNum = 6;
         }
+        this.thumbYDisplay = "block";
         this.thumbYHeight = (7 - selectedNum) * 70 + "px";
       } else {
-        el.style.display = "none";
+        console.log('none')
+        this.thumbYDisplay = "none";
+      }
+      if(window.screenY <= 250){
+        this.bottom = '0'
+        this.thumbYDisplay = 'block'
+        this.thumbYHeight = 'calc((100vh - 52px) / 2)'
       }
       this.selectedNum = selectedNum;
     },
@@ -630,4 +638,19 @@ export default {
 .v-ps{
   height: 424px;
 }
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+    color: #fff!important;
+}
+
+input:-ms-input-placeholder,
+textarea:-ms-input-placeholder {
+    color: #fff!important;
+}
+
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+    color: #fff!important;
+}
 </style>

src/component/DesktopAppView/index.vue

@@ -3,7 +3,7 @@
     <!-- 主菜单界面 -->
     <div
       class="syno-sds-appview syno-sds-appview-animate"
-      style="width: 100%; height: 627px"
+      style="width: 100%; height: 100%"
     >
       <div class="syno-sds-appview-container">
         <div class="search-field" style="width: 278px">
@@ -591,18 +591,6 @@
               </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>
@@ -662,7 +650,7 @@ export default {
             id: 7,
             title: "技术支持中心",
             spacialCls: "question",
-            titleImgUrl: "../../../../public/image/DesktopAppView/SupportCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/supportCenter.png",
           },
            {
             id: 8,
@@ -702,107 +690,107 @@ export default {
           },
           {
             id: 14,
-            title: "File Station",
+            title: "Advanced Media Extensions",
             spacialCls: "file",
-            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/aME.png",
           },
           {
             id: 15,
-            title: "DSM 说明",
+            title: "Synology Calendar",
             spacialCls: "question",
-            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/synologyCalendar.png",
           },
            {
             id: 16,
-            title: "套件中心",
+            title: "Synology Contacts",
             spacialCls: "tjCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/contacts.png",
           },
           {
             id: 17,
-            title: "控制中心",
+            title: "Universal Search",
             spacialCls: "controlCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/universalSearch.png",
           },
           {
             id: 18,
-            title: "File Station",
+            title: "Synology Photos",
             spacialCls: "file",
-            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/photos.png",
           },
           {
             id: 19,
-            title: "DSM 说明",
+            title: "Audio Station",
             spacialCls: "question",
-            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/audioStation.png",
           },
            {
             id: 20,
-            title: "套件中心",
+            title: "Synology Drive 管理控制台",
             spacialCls: "tjCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/driveAdminConsole.png",
           },
           {
             id: 21,
-            title: "控制中心",
+            title: "Download Station",
             spacialCls: "controlCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/downloadStation.png",
           },
           {
             id: 22,
-            title: "File Station",
+            title: "Synology Drive",
             spacialCls: "file",
-            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/synologyDrive.png",
           },
           {
             id: 23,
-            title: "DSM 说明",
+            title: "Synology MailPlus",
             spacialCls: "question",
-            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/mailPlus.png",
           },
            {
             id: 24,
-            title: "套件中心",
+            title: "媒体服务器",
             spacialCls: "tjCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/mediaServer.png",
           },
           {
             id: 25,
-            title: "控制中心",
-            spacialCls: "controlCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+            
+            title: "Note Station",
+            spacialCls: "question",
+            titleImgUrl: "../../../../public/image/DesktopAppView/noteStation.png",
           },
           {
             id: 26,
-            title: "File Station",
-            spacialCls: "file",
-            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+            title: "OAuth Service",
+            spacialCls: "controlCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/authenticator.png",
           },
           {
             id: 27,
-            title: "DSM 说明",
-            spacialCls: "question",
-            titleImgUrl: "../../../../public/image/DesktopAppView/question.png",
+            title: "PDF 查看器",
+            spacialCls: "tjCenter",
+            titleImgUrl: "../../../../public/image/DesktopAppView/documentViewer.png",
           },
            {
             id: 28,
-            title: "套件中心",
-            spacialCls: "tjCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/tjCenter.png",
+            title: "Synology Drive ShareSync",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/package.png",
           },
           {
             id: 29,
-            title: "控制中心",
-            spacialCls: "controlCenter",
-            titleImgUrl: "../../../../public/image/DesktopAppView/controlCenter.png",
+            title: "Video Station",
+            spacialCls: "file",
+            titleImgUrl: "../../../../public/image/DesktopAppView/videoStation.png",
           },
           {
             id: 30,
-            title: "File Station",
+            title: "文本编辑器",
             spacialCls: "file",
-            titleImgUrl: "../../../../public/image/DesktopAppView/file.png",
+            titleImgUrl: "../../../../public/image/DesktopAppView/textEditor.png",
           },
-         
         ],
       },
     };
@@ -815,9 +803,19 @@ export default {
 <style lang="css" scoped>
     .sds-desktop-layout {
         flex-direction: row;
+        overflow:-moz-scrollbars-none; 
+    }
+    .app-layout-wrapper::-webkit-scrollbar { width: 0 !important }
+
+    .app-layout-wrapper{
+      overflow: scroll;
     }
 
     .syno-sds-appview .sds-app-panel .sds-desktop-layout{
       justify-content: space-around;
     }
+
+    .syno-sds-appview .sds-app-panel .sds-desktop-layout .app-item-icon{
+      align-self: flex-start;
+    }
 </style>