You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
5.3 KiB
209 lines
5.3 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<script type="text/javascript" src="./lib/vue.js"></script>
|
|
</head>
|
|
<style scoped>
|
|
body {
|
|
/*-webkit-app-region: drag;*/
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.sp-main {
|
|
/*width: 425px;*/
|
|
height: 128px;
|
|
width: 100%;
|
|
/*height: 100%;*/
|
|
display: flex;
|
|
overflow: hidden;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo-cover {
|
|
height: 128px;
|
|
width: 128px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #262522;
|
|
position: absolute;
|
|
}
|
|
|
|
.logo {
|
|
height: 77px;
|
|
width: 77px;
|
|
background: #5daf34;
|
|
background: url("./img/logo.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.logo-active{
|
|
height: 77px;
|
|
width: 77px;
|
|
background: #5daf34;
|
|
background: url("./img/logo-active.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.center-cover {
|
|
height: 100%;
|
|
width: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
background: #262522;
|
|
flex: 1;
|
|
margin-left: 68px;
|
|
padding-left: 37px;
|
|
user-select: none;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
width: auto;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 77px;
|
|
background: #262522;
|
|
}
|
|
|
|
.text {
|
|
font-size: 28px;
|
|
color: #ffffff;
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.yellow {
|
|
color: #f7c829;
|
|
}
|
|
|
|
.count {
|
|
color: #ffffff;
|
|
opacity: 0.52;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.back {
|
|
height: 80px;
|
|
width: 80px;
|
|
cursor: pointer;
|
|
/*-webkit-app-region: no-drag;*/
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!--<div style="-webkit-app-region: no-drag;height:100%;width: 100%;"></div>-->
|
|
<div class="sp-main" id="app" @mouseup="removeMoveListener" @contextmenu="showMenu">
|
|
<div class="logo-cover" @dblclick="showSystem" @click="showSuspensionWin">
|
|
<div :class="unMessage.length===0 ? 'logo':'logo-active'" id="logo"></div>
|
|
</div>
|
|
<div class="center-cover">
|
|
|
|
<div class="center" v-show="showText">
|
|
<div v-if="unMessage.length===0" class="text">暂无新消息</div>
|
|
<div v-else class="text">你有一条来自<span class="yellow">{{unMessage[msgCount-1].type}}</span>的消息</div>
|
|
<div class="count">共{{msgCount}}条未读消息</div>
|
|
</div>
|
|
<img v-show="showText" @click="showSystem" id="back" class="back" src="./img/back.png">
|
|
</div>
|
|
</div>
|
|
<!--<button id="logo">回复最大化</button>-->
|
|
<!--<img src='./img/logo.png' onclick="" alt="s207">-->
|
|
</body>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
const {Menu} = require('@electron/remote');
|
|
const ipcRenderer = require('electron').ipcRenderer;
|
|
let template = [
|
|
{
|
|
label:'退出系统',accelerator:'alt+f4',click:()=>{
|
|
window.api.exitSystem();
|
|
}
|
|
}
|
|
]
|
|
let menu = Menu.buildFromTemplate(template);
|
|
new Vue({
|
|
el: "#app",
|
|
data :{
|
|
msgCount:0,
|
|
unMessage:[],
|
|
showText:true,
|
|
},
|
|
methods:{
|
|
showSystem(e){
|
|
e.preventDefault();
|
|
window.api.showMainWindow();
|
|
window.api.hideSuspensionWindow();
|
|
},
|
|
removeMoveListener(){
|
|
moveWindow(false)
|
|
logo.removeEventListener('mousemove', moveWindow)
|
|
},
|
|
showMenu(e){
|
|
e.preventDefault();
|
|
menu.popup()
|
|
},
|
|
showSuspensionWin(e){
|
|
if(!this.showText && endTime - startTime <200){
|
|
e.preventDefault();
|
|
window.api.showSuspensionWindow();
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.msgCount = 15;
|
|
window.getUnReadMessage = (message)=>{
|
|
this.msgCount = message.length;
|
|
this.unMessage = message;
|
|
window.api.resizeWindow();
|
|
};
|
|
ipcRenderer.on("winResize",(e, args) => {
|
|
if(args[0][0]>130){
|
|
this.showText = true
|
|
}else {
|
|
this.showText = false
|
|
}
|
|
});
|
|
window.api.getUnReadMessage();
|
|
},
|
|
watch:{
|
|
unMessage(){
|
|
|
|
}
|
|
},
|
|
})
|
|
|
|
|
|
function moveWindow(flag = false) {
|
|
window.api.windowMoveHandle(flag)
|
|
}
|
|
let startTime = 0;
|
|
let endTime = 0;
|
|
|
|
var logo = document.getElementById('logo');
|
|
logo.addEventListener('mousedown', () => {
|
|
startTime = new Date().getTime();
|
|
logo.addEventListener('mousemove', moveWindow(true))
|
|
})
|
|
logo.addEventListener('mouseup', () => {
|
|
endTime = new Date().getTime();
|
|
|
|
moveWindow(false);
|
|
logo.removeEventListener('mousemove', moveWindow)
|
|
})
|
|
</script>
|
|
|
|
</html>
|