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.
|
|
<!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)=>{ console.log('aaaaaaaa',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>
|
