93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: #fbeaff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-container {
|
||
|
|
display: flex;
|
||
|
|
padding: 0.75rem;
|
||
|
|
border-bottom: 0.125rem solid #00c9a7;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-container .left {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menu-container .right {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
background-image: url('./c.png');
|
||
|
|
width: 1.5rem;
|
||
|
|
height: 1.5rem;
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.function {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-items: center;
|
||
|
|
color: #845ec2;
|
||
|
|
padding: 0.25rem;
|
||
|
|
border-radius: 100%;
|
||
|
|
transition: all 0.1s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.function:hover {
|
||
|
|
background-color: #b39cd0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.app {
|
||
|
|
padding: 0.75rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="menu-container">
|
||
|
|
<div class="left">
|
||
|
|
<div class="logo"></div>
|
||
|
|
<div class="title">Electron 自定义标题栏</div>
|
||
|
|
</div>
|
||
|
|
<div class="right">
|
||
|
|
<div class="function min">
|
||
|
|
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#845ec2">
|
||
|
|
<path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="function max">
|
||
|
|
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#845ec2">
|
||
|
|
<path d="M32 288c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 288zm0-128c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div class="function close">
|
||
|
|
<svg width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" fill="#845ec2">
|
||
|
|
<path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="app">
|
||
|
|
<h2>主体内容</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="index.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|