提交 69cf7d70 authored 作者: caicai's avatar caicai

修改U学模式

上级 bed466ee
...@@ -65,7 +65,8 @@ class IpcEvents { ...@@ -65,7 +65,8 @@ class IpcEvents {
// x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2, // x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2,
x: 0, x: 0,
y: (displayWH.height - Number(process.env.VUE_APP_mainH)), 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) height: Number(process.env.VUE_APP_mainH)
}, true); }, true);
} }
...@@ -80,7 +81,7 @@ class IpcEvents { ...@@ -80,7 +81,7 @@ class IpcEvents {
this.windowManager.mainWindow.win.setBounds({ this.windowManager.mainWindow.win.setBounds({
// x: ( Number(displayWH.width) - 419)/2, // x: ( Number(displayWH.width) - 419)/2,
x:0, x:0,
// y: ( Number(displayWH.height) - 60), y: ( Number(displayWH.height) - 60),
width: 419, width: 419,
height: 60 height: 60
}, true); }, true);
...@@ -92,6 +93,13 @@ class IpcEvents { ...@@ -92,6 +93,13 @@ class IpcEvents {
click: () => { click: () => {
console.log('modeUXue') console.log('modeUXue')
event.sender.send('context-menu-command', '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"); this.store.set("currentMode", "modeUXue");
} }
} }
......
...@@ -16,4 +16,8 @@ body { ...@@ -16,4 +16,8 @@ body {
// background-color: rgba(0,0,0,0.25); // background-color: rgba(0,0,0,0.25);
} }
</style> </style>
<style>
/* CDN 服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。 */
@import url('https://at.alicdn.com/t/c/font_4010399_o3284rt85e.css');
</style>
<template> <template>
<div> <div class="second_container">
模式2 <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> </div>
</template> </template>
<script> <script>
export default { 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> </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> </style>
\ No newline at end of file
...@@ -142,7 +142,7 @@ export default { ...@@ -142,7 +142,7 @@ export default {
} }
</script> </script>
<style lang="less"> <style lang="less" scoped>
.resource_head { .resource_head {
display: flex; display: flex;
align-items: center; align-items: center;
......
<template> <template>
<div class="application-list-container"> <div class="application-list-container" :class="{'uMode':mode === 'modeUXue'}">
<one :group1="group1" :group2="group2" :group3="group3" :group4="group4" :mode="mode" <one v-if="mode !== 'modeUXue'" :group1="group1" :group2="group2" :group3="group3" :group4="group4" :mode="mode"
@tapApp="tapApp" @getFrontApp="newWin"></one> @tapApp="tapApp" @getFrontApp="newWin"></one>
<!-- <div @click="newWin">打开新窗口</div> --> <!-- <div @click="newWin">打开新窗口</div> -->
<second v-else
:groupList="groupSecond" :current="secondAcitveIndex"
@tapApp="tapApp" @getFrontApp="newWin" @changeTab="changeSecond"></second>
</div> </div>
</template> </template>
<script> <script>
let pinyin = null; let pinyin = null;
import one from "@/renderer/components/Dockmode/one.vue"; import one from "@/renderer/components/Dockmode/one.vue";
import second from "@/renderer/components/Dockmode/second.vue";
/* import pinyin from 'pinyin'; */ /* import pinyin from 'pinyin'; */
export default { export default {
components: { components: {
one, one,
second
}, },
data() { data() {
return { return {
appList: [], appList: [],
mode: "modeJianYue", mode: "modeJianYue",
showManage:false, showManage:false,
secondAcitveIndex:1, //U学模式,当前选中
}; };
}, },
computed: { computed: {
...@@ -37,6 +43,30 @@ export default { ...@@ -37,6 +43,30 @@ export default {
ipcRenderer() { ipcRenderer() {
return (this.$electron && this.$electron.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() { created() {
// this.ipcRenderer.invoke('getOsPlatform').then((platform) => { // this.ipcRenderer.invoke('getOsPlatform').then((platform) => {
...@@ -61,6 +91,10 @@ export default { ...@@ -61,6 +91,10 @@ export default {
this.newWin({visible:'hide'}); this.newWin({visible:'hide'});
}, },
methods: { methods: {
changeSecond({item,index}) {
if(this.secondAcitveIndex == index) return;
this.secondAcitveIndex = index;
},
newWin(arg = {visible:'show'}) { newWin(arg = {visible:'show'}) {
if(arg.visible === "show") { if(arg.visible === "show") {
this.showManage = this.showManage ? false : true; this.showManage = this.showManage ? false : true;
...@@ -291,10 +325,13 @@ export default { ...@@ -291,10 +325,13 @@ export default {
font-size: 24px; font-size: 24px;
// background: #fff; // background: #fff;
background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%); background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
img { &.uMode {
width: 50px; height: 100px;
height: 50px;
} }
// img {
// width: 50px;
// height: 50px;
// }
.application-item { .application-item {
display: flex; display: flex;
} }
......
...@@ -113,7 +113,7 @@ export default { ...@@ -113,7 +113,7 @@ export default {
title: '提示', title: '提示',
textWidth:500, textWidth:500,
defaultId:1, defaultId:1,
message: `\n确认${type === '\n restart' ? '重启':'关机'}吗? \n`, message: `\n确认${type === 'restart' ? '重启':'关机'}吗? \n`,
buttons:['取消','确认'] buttons:['取消','确认']
}).then((result) => { }).then((result) => {
let response = result.response; //点击的索引 let response = result.response; //点击的索引
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论