mirror of
https://github.com/tjy-gitnub/win12.git
synced 2026-09-21 12:44:02 +08:00
一些优化
This commit is contained in:
tjy-gitnub
@@ -1,25 +0,0 @@
|
||||
const main = document.getElementsByTagName('body')[0];
|
||||
const icon = document.querySelector('.window.setting>.titbar');
|
||||
const wd = document.querySelector('.window.setting');
|
||||
let move = false;
|
||||
let deltaLeft = 0, deltaTop = 0;
|
||||
|
||||
icon.addEventListener('mousedown', function (e) {
|
||||
deltaLeft = e.clientX - wd.offsetLeft;
|
||||
deltaTop = e.clientY - wd.offsetTop;
|
||||
move = true;
|
||||
})
|
||||
|
||||
main.addEventListener('mousemove', function (e) {
|
||||
if (move) {
|
||||
const cx = e.clientX;
|
||||
const cy = e.clientY;
|
||||
let dx = cx - deltaLeft
|
||||
let dy = cy - deltaTop
|
||||
wd.setAttribute('style', `left:${dx}px;top:${dy}px`)
|
||||
}
|
||||
})
|
||||
main.addEventListener('mouseup', function (e) {
|
||||
move = false;
|
||||
console.log('mouseup');
|
||||
})
|
||||
@@ -1,166 +0,0 @@
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<p class="title">系统</p>
|
||||
<div style="display: flex;">
|
||||
<p class="s-icon" style="font-size: 70px;margin: 15px 10px 10px 20px;"></p>
|
||||
<div style="line-height: 3px;">
|
||||
<p style="font-size: 25px;">Desktop-PingGai</p>
|
||||
<p style="color: #7f7f7f;margin-top: -5px;">瓶盖</p>
|
||||
<a href="#" style="color: #2983cc;">重命名</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-list">
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>显示</p>
|
||||
<p>显示器、亮度、夜间模式、显示描述</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>声音</p>
|
||||
<p>声音级别、输入、输出、声音设备</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>通知</p>
|
||||
<p>来自系统和应用的警报</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>专注助手</p>
|
||||
<p>通知、自动规则</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon class="b"></icon>
|
||||
<div>
|
||||
<p>电源</p>
|
||||
<p>睡眠、电池使用情况、节电模式</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>存储</p>
|
||||
<p>存储空间、驱动器、配置规则</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>多任务处理</p>
|
||||
<p>贴靠窗口、桌面、任务切换</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>激活</p>
|
||||
<p>激活状态、订阅、产品密钥</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>疑难解答</p>
|
||||
<p>建议的疑难解答、首选项和历史记录</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>恢复</p>
|
||||
<p>重置、高级启动、返回</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>投影到此电脑</p>
|
||||
<p>权限、配对 PIN、可发现性</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>远程桌面</p>
|
||||
<p>远程桌面用户、连接权限</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>剪贴板</p>
|
||||
<p>剪贴和复制历史记录、同步、清除</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#">
|
||||
<icon></icon>
|
||||
<div>
|
||||
<p>关于</p>
|
||||
<p>设备规格、重命名电脑、Windows 规格</p>
|
||||
</div>
|
||||
<svg width="20" height="20" fill="currentColor" class="then" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
@@ -1,6 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" style="height: 100%;">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
Reference in New Issue
Block a user