修改U学模式

src/main/events/ipc.js

@@ -65,7 +65,8 @@ class IpcEvents {
               // x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2, 
               x: 0, 
               y: (displayWH.height - Number(process.env.VUE_APP_mainH)), 
-              width: Number(process.env.VUE_APP_mainW), 
+              // width: Number(process.env.VUE_APP_mainW), 
+              width: displayWH.width, 
               height: Number(process.env.VUE_APP_mainH) 
             }, true);
           }
@@ -80,7 +81,7 @@ class IpcEvents {
             this.windowManager.mainWindow.win.setBounds({ 
               // x: ( Number(displayWH.width) - 419)/2, 
               x:0, 
-              // y: ( Number(displayWH.height) - 60), 
+              y: ( Number(displayWH.height) - 60), 
               width: 419, 
               height: 60 
             }, true);
@@ -92,6 +93,13 @@ class IpcEvents {
           click: () => { 
             console.log('modeUXue')
             event.sender.send('context-menu-command', 'modeUXue');
+            this.windowManager.mainWindow.win.setBounds({ 
+              // x: ( Number(displayWH.width) - 419)/2, 
+              x:0, 
+              y: ( Number(displayWH.height) - 100), 
+              width: 1074, 
+              height: 100 
+            }, true);
             this.store.set("currentMode", "modeUXue");
           }
         }

src/renderer/App.vue

@@ -16,4 +16,8 @@ body {
   // background-color: rgba(0,0,0,0.25);
 }
 </style>
+<style>
+/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
+@import url('https://at.alicdn.com/t/c/font_4010399_o3284rt85e.css');
+</style>
 

src/renderer/components/Dockmode/second.vue

 <template>
-  <div>
-    模式2
+  <div class="second_container">
+    <div class="left_main">
+      <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img" @click="getFrontApp">
+    </div>
+    <div class="right_app" :class="['active_'+(current+1)]">
+      <div class="second_app_list">
+        <div v-for="(item,index) in list" :key="index" class="second_app_item" @click="tapApp(item)">
+          <img :src="item.icon" alt="" v-if="item.icon && item.icon.indexOf('.png') == -1" class="second_app_img">
+        </div>
+      </div>
+      <div class="tab_group">
+        <div v-for="(item,index) in groupList" :key="index" 
+          class="tab_item" :class="{'active':current==index}"
+          @click="changeTab({item:item,index:index})">
+          <span class="iconfont icon_size" 
+          :class="{
+            'icon-jiaoxuegongju-weixuanzhong':index==1&&current!=index,
+            'icon-jiaoxuegongju-xuanzhong':index==1&&current==index,
+            'icon-jiaowuguanli-weixuanzhong':index==3&&current!=index,
+            'icon-jiaowuguanli-xuanzhong':index==3&&current==index,
+            'icon-beikeziyuan-weixuanzhong':index==0&&current!=index,
+            'icon-beikeziyuan-xuanzhong':index==0&&current==index,
+            'icon-kehoulianxi-weixuanzhong':index==2&&current!=index,
+            'icon-kehoulianxi-xuanzhong':index==2&&current==index,
+          }"></span>
+          <span class="tab_name">{{item.name}}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-
+  props: {
+    current: {
+      type: [Number, String],
+      default: 1
+    },
+    groupList: {
+      type: Array,
+      default: () => {
+        return [
+          {
+            name:"备课资源",
+            // jiaowuguanli.png
+            list:[]
+          },
+          {
+            name:"教学工具",
+            // beikeziyuan.png
+            list:[]
+          },
+          {
+            name:"课后练习",
+            // jiaoxuegongju.png
+            list:[]
+          },
+          {
+            name:"教务管理",
+            // kehoulianxi.png
+            list:[]
+          }
+        ];
+      }
+    }
+  },
+  computed: {
+    list() {
+      return this.groupList[this.current] && this.groupList[this.current].list
+    }
+  },
+  created() {
+    console.log('groupList', this.groupList, this.list)
+  },
+  methods: {
+    getFrontApp() {
+      this.$emit('getFrontApp');
+    },
+    tapApp(item) {
+      this.$emit('tapApp',item);
+    },
+    changeTab({item,index}) {
+      this.$emit('changeTab',{item,index});
+    },
+  }
 }
 </script>
 
-<style>
-
+<style lang="less" scoped>
+  .second_container {
+    display: flex;
+    align-items: center;
+  }
+  .left_main {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100px;
+    flex-shrink: 0;
+    padding: 0 20px 0 6px;
+    width: 240px;
+    // background-color: hsl(0, 0%, 25%);
+    &::after {
+      position: absolute;
+      content: "";
+      right: 0;
+      border-right: 1px solid #031428;
+      width: 1px;
+      height: calc(100% - 14px);
+    }
+    .left_img {
+      margin-top: 6px;
+      width: 225px;
+      height: 60px;
+      object-fit: contain;
+    }
+    .left_name {
+      padding-left: 4px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #fff;
+    }
+  }
+  
+  .right_app {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 98px;
+    margin-left: 40px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    width: 710px;
+    &.active_1 {
+      background-image: url(~@/assets/U_1.png);
+    }
+    &.active_2 {
+      background-image: url(~@/assets/U_2.png);
+    }
+    &.active_3 {
+      background-image: url(~@/assets/U_3.png);
+    }
+    &.active_4 {
+      background-image: url(~@/assets/U_4.png);
+    }
+  }
+  .tab_group {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 60px 0 30px;
+  }
+  .tab_item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 6px;
+    width: 176px;
+    cursor: pointer;
+    line-height: 1;
+    &:nth-child(2) {
+      margin-left: 20px;
+    }
+    &:nth-child(3) {
+      margin-left: 10px;
+    }
+    .icon_size {
+      font-size: 24px;
+    }
+    .tab_name {
+      padding-left: 8px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #A6B3CA;
+      
+    }
+    &.active {
+      .tab_name {
+        font-size: 18px;
+        color: #FFFFFF;
+      }
+      .icon_size {
+        font-size: 26px;
+      }
+    }
+  }
+  .second_app_list {
+    display: flex;
+    align-items: center;
+    // justify-content: space-evenly;
+    margin-bottom: 4px;
+    .second_app_item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: calc(100% / 8);
+    }
+    .second_app_img {
+      padding: 4px;
+      width: 42px;
+      height: 42px;
+      object-fit: contain;
+      cursor: pointer;
+    }
+  }
 </style>
\ No newline at end of file

src/renderer/components/SchoolBox/index.vue

@@ -142,7 +142,7 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
     .resource_head {
         display: flex;
         align-items: center;

src/renderer/views/Home.vue

 <template>
-  <div class="application-list-container">
-    <one :group1="group1" :group2="group2" :group3="group3" :group4="group4" :mode="mode"
+  <div class="application-list-container" :class="{'uMode':mode === 'modeUXue'}">
+    <one v-if="mode !== 'modeUXue'" :group1="group1" :group2="group2" :group3="group3" :group4="group4" :mode="mode"
       @tapApp="tapApp" @getFrontApp="newWin"></one>
     <!-- <div @click="newWin">打开新窗口</div> -->
+    <second v-else 
+      :groupList="groupSecond" :current="secondAcitveIndex" 
+      @tapApp="tapApp" @getFrontApp="newWin" @changeTab="changeSecond"></second>
   </div>
 </template>
   
 <script>
 let pinyin = null;
 import one from "@/renderer/components/Dockmode/one.vue";
+import second from "@/renderer/components/Dockmode/second.vue";
 /* import pinyin from 'pinyin'; */
 export default {
   components: {
     one,
+    second
   },
   data() {
     return {
       appList: [],
       mode: "modeJianYue",
       showManage:false,
+      secondAcitveIndex:1, //U学模式，当前选中
     };
   },
   computed: {
@@ -37,6 +43,30 @@ export default {
     ipcRenderer() {
       return (this.$electron && this.$electron.ipcRenderer) || {};
     },
+    groupSecond() {
+      return [
+        {
+            name:"备课资源",
+            // jiaowuguanli.png
+            list:this.group1
+          },
+          {
+            name:"教学工具",
+            // beikeziyuan.png
+            list:this.group2
+          },
+          {
+            name:"课后练习",
+            // jiaoxuegongju.png
+            list:this.group3
+          },
+          {
+            name:"教务管理",
+            // kehoulianxi.png
+            list:this.group4
+          }
+      ]
+    }
   },
   created() {
     // this.ipcRenderer.invoke('getOsPlatform').then((platform) => {
@@ -61,6 +91,10 @@ export default {
     this.newWin({visible:'hide'});
   },
   methods: {
+    changeSecond({item,index}) {
+      if(this.secondAcitveIndex == index) return;
+      this.secondAcitveIndex = index;
+    },
     newWin(arg = {visible:'show'}) {
       if(arg.visible === "show") {
         this.showManage = this.showManage ? false : true;
@@ -291,10 +325,13 @@ export default {
   font-size: 24px;
   // background: #fff;
   background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
-  img {
-    width: 50px;
-    height: 50px;
+  &.uMode {
+    height: 100px;
   }
+  // img {
+  //   width: 50px;
+  //   height: 50px;
+  // }
   .application-item {
     display: flex;
   }

src/renderer/views/manage/index.vue

@@ -113,7 +113,7 @@ export default {
             title: '提示',
             textWidth:500,
             defaultId:1,
-            message: `\n确认${type === '\n restart' ? '重启':'关机'}吗？                                                \n`,
+            message: `\n确认${type === 'restart' ? '重启':'关机'}吗？                                                \n`,
             buttons:['取消','确认']
         }).then((result) => {
           let response = result.response; //点击的索引