mirror of
https://github.com/tjy-gitnub/win12.git
synced 2026-09-24 22:09:34 +08:00
Windows 12 网页版
This commit is contained in:
tjy-gitnub
Binary file not shown.
+89
-2
@@ -1,3 +1,29 @@
|
||||
@font-face {
|
||||
font-family: SettingsIcons;
|
||||
src: url(icons.woff2) format("woff2")
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: block;
|
||||
font-family: "booticon";
|
||||
src: url("../../fonts/bootstrap-icons.woff2?8d200481aa7f02a2d63a331fc782cfaf") format("woff2"),
|
||||
url("../../fonts/bootstrap-icons.woff?8d200481aa7f02a2d63a331fc782cfaf") format("woff");
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 35px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.s-icon{
|
||||
font-family: SettingsIcons;
|
||||
}
|
||||
|
||||
html{
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#win-setting {
|
||||
display: flex;
|
||||
height: calc(100% - 32px);
|
||||
@@ -6,6 +32,10 @@
|
||||
#win-setting>* {
|
||||
height: 100%
|
||||
}
|
||||
#win-setting>.page {
|
||||
width: calc(100% - 300px);
|
||||
}
|
||||
|
||||
|
||||
#win-setting>.menu {
|
||||
width: 300px;
|
||||
@@ -53,11 +83,10 @@
|
||||
margin-left: 5px;
|
||||
margin-top: 40px;
|
||||
height: calc(100% - 123px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#win-setting>.menu>list>a {
|
||||
padding: 5px 8px;
|
||||
padding: 5px 12px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
}
|
||||
@@ -70,4 +99,62 @@
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 1px 10px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.setting-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 5px;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setting-list>* {
|
||||
width: calc(100% - 50px);
|
||||
color: var(--text);
|
||||
background-color: #ffffff50;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #7f7f7f30;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
transition: 100ms;
|
||||
}
|
||||
|
||||
.setting-list>*:hover {
|
||||
color: var(--text);
|
||||
background-color: #ffffff90;
|
||||
text-decoration: none;
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
|
||||
.setting-list>a>icon{
|
||||
font-family: SettingsIcons;
|
||||
font-size: 20px;
|
||||
margin:10px 20px 0 5px;
|
||||
}
|
||||
.setting-list>a>icon.b{
|
||||
font-family: booticon;
|
||||
}
|
||||
|
||||
.setting-list>a>div>p:first-child{
|
||||
font-size: 20px;
|
||||
margin:0 0 -12px 0;
|
||||
}
|
||||
|
||||
.setting-list>a>div>p:last-child{
|
||||
font-size: 10px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.setting-list>a>.then{
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
margin-top: 12px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
@@ -16,10 +16,6 @@ main.addEventListener('mousemove', function (e) {
|
||||
const cy = e.clientY;
|
||||
let dx = cx - deltaLeft
|
||||
let dy = cy - deltaTop
|
||||
if (dx < 0) dx = 0
|
||||
if (dy < 0) dy = 0
|
||||
if (dx > 500) dx = 500
|
||||
if (dy > 300) dy = 300
|
||||
wd.setAttribute('style', `left:${dx}px;top:${dy}px`)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<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>
|
||||
+156
-58
@@ -37,6 +37,7 @@ body {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
z-index: 98;
|
||||
}
|
||||
|
||||
.dock {
|
||||
@@ -48,6 +49,8 @@ body {
|
||||
padding: 7px 10px;
|
||||
margin: 0 3px;
|
||||
display: flex;
|
||||
transition: 200ms;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.dock>* {
|
||||
@@ -60,6 +63,49 @@ body {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.dock.about {
|
||||
width: 280px;
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dock.about>p {
|
||||
margin-top: 50px;
|
||||
font-size: 15px;
|
||||
padding-left: 15px;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: 600ms;
|
||||
}
|
||||
|
||||
.dock.about:hover {
|
||||
background-color: #cccccca0;
|
||||
}
|
||||
.dock.about:active>p {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dock.about:active {
|
||||
font-size: 13px;
|
||||
padding: 10px 45px;
|
||||
}
|
||||
|
||||
.dock.about.show {
|
||||
height: 220px;
|
||||
width: 500px;
|
||||
margin-top: -180px;
|
||||
font-size: 23px;
|
||||
}
|
||||
.dock.about.show>p {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dock.about.show:hover {
|
||||
background-color: #eeeeeea0;
|
||||
}
|
||||
|
||||
#start-btn {
|
||||
transition: 200ms;
|
||||
width: 32px;
|
||||
@@ -87,7 +133,7 @@ body {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
top: 300px;
|
||||
height: 500px;
|
||||
width: 800px;
|
||||
left: calc(50% - 400px);
|
||||
border-radius: 20px;
|
||||
@@ -106,7 +152,7 @@ body {
|
||||
|
||||
#start-menu.show {
|
||||
display: flex;
|
||||
top: 100px;
|
||||
height: 594px;
|
||||
bottom: 60px;
|
||||
opacity: 1;
|
||||
}
|
||||
@@ -135,14 +181,17 @@ input-before {
|
||||
margin-left: 5px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#s-m-l>list>a {
|
||||
padding: 3px 8px;
|
||||
font-size: 15px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#s-m-l>list>a>p {
|
||||
margin: 5px 7px;
|
||||
}
|
||||
|
||||
#s-m-l>list>a>img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
@@ -158,36 +207,43 @@ input-before {
|
||||
opacity: 0;
|
||||
margin-top: 80px;
|
||||
}
|
||||
#s-m-r>*{
|
||||
|
||||
#s-m-r>* {
|
||||
margin-bottom: 50px !important;
|
||||
transition: 600ms;
|
||||
opacity: 0;
|
||||
}
|
||||
#s-m-r>.pinned{
|
||||
|
||||
#s-m-r>.pinned {
|
||||
margin-bottom: 80px !important;
|
||||
transition: 800ms;
|
||||
}
|
||||
#start-menu.show>#s-m-r{
|
||||
|
||||
#start-menu.show>#s-m-r {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
margin-top: 0;
|
||||
}
|
||||
#start-menu.show>#s-m-r>*{
|
||||
|
||||
#start-menu.show>#s-m-r>* {
|
||||
opacity: 1;
|
||||
margin-bottom: 0!important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#s-m-r>.row1{
|
||||
#s-m-r>.row1 {
|
||||
display: flex;
|
||||
}
|
||||
#s-m-r>.row1>.tool{
|
||||
|
||||
#s-m-r>.row1>.tool {
|
||||
width: 200px;
|
||||
padding: 5px 10px 0 0;
|
||||
}
|
||||
#s-m-r>.row1>.tool>*{
|
||||
|
||||
#s-m-r>.row1>.tool>* {
|
||||
float: right;
|
||||
}
|
||||
#s-m-r>.row1>.folder{
|
||||
|
||||
#s-m-r>.row1>.folder {
|
||||
display: flex;
|
||||
padding: 10px 10px;
|
||||
margin: 15px 15px;
|
||||
@@ -195,50 +251,59 @@ input-before {
|
||||
background-color: #ffffff50;
|
||||
width: calc(100% - 200px);
|
||||
}
|
||||
#s-m-r>.row1>.folder>.sm-app{
|
||||
|
||||
#s-m-r>.row1>.folder>.sm-app {
|
||||
height: 72px;
|
||||
}
|
||||
#s-m-r>.pinned{
|
||||
|
||||
#s-m-r>.pinned {
|
||||
padding: 10px 10px;
|
||||
margin: 0 10px 0 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff50;
|
||||
}
|
||||
#s-m-r>.pinned>.apps{
|
||||
|
||||
#s-m-r>.pinned>.apps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#s-m-r>.pinned>.title{
|
||||
|
||||
#s-m-r>.pinned>.title {
|
||||
padding: 5px 0 5px 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 530;
|
||||
display: flex;
|
||||
}
|
||||
#s-m-r>.pinned>.title>*{
|
||||
|
||||
#s-m-r>.pinned>.title>* {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#s-m-r>.tuijian{
|
||||
#s-m-r>.tuijian {
|
||||
padding: 10px 10px;
|
||||
margin: 15px 10px 0 15px;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff50;
|
||||
}
|
||||
#s-m-r>.tuijian>.apps{
|
||||
|
||||
#s-m-r>.tuijian>.apps {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#s-m-r>.tuijian>.title{
|
||||
|
||||
#s-m-r>.tuijian>.title {
|
||||
padding: 5px 0 5px 10px;
|
||||
font-size: 18px;
|
||||
font-weight: 530;
|
||||
display: flex;
|
||||
}
|
||||
#s-m-r>.tuijian>.title>*{
|
||||
|
||||
#s-m-r>.tuijian>.title>* {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#s-m-user {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
@@ -279,7 +344,7 @@ input-before {
|
||||
border-bottom-color: #2983cc;
|
||||
}
|
||||
|
||||
.btn{
|
||||
.btn {
|
||||
border: 0px solid;
|
||||
border-radius: 10px;
|
||||
padding: 7px 10px;
|
||||
@@ -287,7 +352,7 @@ input-before {
|
||||
background-color: #00000000;
|
||||
}
|
||||
|
||||
.btn-icon{
|
||||
.btn-icon {
|
||||
border: 0px solid;
|
||||
border-radius: 10px;
|
||||
padding: 1px 5px;
|
||||
@@ -297,7 +362,8 @@ input-before {
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
}
|
||||
.btn-icon.big{
|
||||
|
||||
.btn-icon.big {
|
||||
padding: 3px 7px;
|
||||
font-size: 19px;
|
||||
}
|
||||
@@ -306,33 +372,35 @@ input-before {
|
||||
background-color: #7f7f7f30;
|
||||
}
|
||||
|
||||
.btn:active{
|
||||
.btn:active {
|
||||
font-size: 17px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.btn-icon.big:active{
|
||||
.btn-icon.big:active {
|
||||
font-size: 13px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.more-btn{
|
||||
.more-btn {
|
||||
background: #ffffff70;
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
padding:2px 5px;
|
||||
padding: 2px 5px;
|
||||
border: 1px solid #7f7f7f30;
|
||||
}
|
||||
.more-btn:hover{
|
||||
|
||||
.more-btn:hover {
|
||||
background-color: #ffffff50;
|
||||
}
|
||||
.more-btn>.bi{
|
||||
|
||||
.more-btn>.bi {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.sm-app{
|
||||
.sm-app {
|
||||
width: 72px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
@@ -340,33 +408,39 @@ input-before {
|
||||
transition: 200ms;
|
||||
padding: 0 3px;
|
||||
}
|
||||
.sm-app>*:first-child{
|
||||
|
||||
.sm-app>*:first-child {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
margin-top: 12px;
|
||||
transition: 200ms;
|
||||
}
|
||||
.sm-app>*:last-child{
|
||||
|
||||
.sm-app>*:last-child {
|
||||
margin-top: -3px;
|
||||
transition: 200ms;
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
}
|
||||
.sm-app:hover{
|
||||
|
||||
.sm-app:hover {
|
||||
background-color: #ffffff70;
|
||||
}
|
||||
.sm-app:active{
|
||||
|
||||
.sm-app:active {
|
||||
padding-top: 4px;
|
||||
}
|
||||
.sm-app:active>*:last-child{
|
||||
|
||||
.sm-app:active>*:last-child {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.sm-app:active>*:first-child{
|
||||
|
||||
.sm-app:active>*:first-child {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
.tj-obj{
|
||||
.tj-obj {
|
||||
width: 50%;
|
||||
height: 55px;
|
||||
border-radius: 10px;
|
||||
@@ -375,24 +449,29 @@ input-before {
|
||||
display: flex;
|
||||
padding: 10px 3px 10px 10px;
|
||||
}
|
||||
.tj-obj>img{
|
||||
|
||||
.tj-obj>img {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
transition: 200ms;
|
||||
}
|
||||
.tj-obj>div>*:first-child{
|
||||
|
||||
.tj-obj>div>*:first-child {
|
||||
margin: 3px 0 2px 5px;
|
||||
font-size: 15px;
|
||||
line-height: 13px;
|
||||
}
|
||||
.tj-obj>div>*:last-child{
|
||||
|
||||
.tj-obj>div>*:last-child {
|
||||
font-size: 10px;
|
||||
line-height: 13px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.tj-obj:hover{
|
||||
|
||||
.tj-obj:hover {
|
||||
background-color: #ffffff70;
|
||||
}
|
||||
|
||||
/* hi */
|
||||
|
||||
dropdown {
|
||||
@@ -429,7 +508,6 @@ list {
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
border-radius: 10px;
|
||||
|
||||
}
|
||||
|
||||
list>* {
|
||||
@@ -476,12 +554,15 @@ list>.text:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.window{
|
||||
.window {
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
margin-left: 10%;
|
||||
margin-top: 7%;
|
||||
/* 真的是胡整，margin-top和margin-left的百分比都是以width为标准，脑壳乔的 */
|
||||
background-color: #ffffff70;
|
||||
backdrop-filter: blur(50px);
|
||||
border-radius: 10px;
|
||||
@@ -491,41 +572,55 @@ list>.text:hover {
|
||||
transition: 200ms;
|
||||
overflow: hidden;
|
||||
}
|
||||
.window.show-begin{
|
||||
|
||||
.window.show-begin {
|
||||
display: block;
|
||||
}
|
||||
.window.show{
|
||||
|
||||
.window.show {
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
height: 80%;
|
||||
width: 70%;
|
||||
top: 10%;
|
||||
left: 15%;
|
||||
opacity: 1;
|
||||
}
|
||||
.window.notrans{
|
||||
|
||||
.window.notrans {
|
||||
transition: unset !important;
|
||||
}
|
||||
|
||||
.window>.titbar{
|
||||
.window>.titbar {
|
||||
background-color: #ffffff30;
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 32px;
|
||||
padding: 0 0 0 5px;
|
||||
display: flex;
|
||||
}
|
||||
.window>.titbar>p{
|
||||
|
||||
.window>.titbar>p {
|
||||
font-size: 16px;
|
||||
width: 100px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.window>.titbar>.icon{
|
||||
|
||||
.window>.titbar>.icon {
|
||||
margin: 6px 5px 0 0;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.window>.titbar>div{
|
||||
|
||||
.window>.titbar>div {
|
||||
width: calc(100% - 125px);
|
||||
}
|
||||
.wbtg{
|
||||
|
||||
.window.max{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.wbtg {
|
||||
height: 100%;
|
||||
float: right;
|
||||
width: 45px;
|
||||
@@ -534,13 +629,16 @@ list>.text:hover {
|
||||
font-size: 13px;
|
||||
transition: 100ms;
|
||||
}
|
||||
.wbtg.red{
|
||||
|
||||
.wbtg.red {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.wbtg:hover{
|
||||
|
||||
.wbtg:hover {
|
||||
background-color: #7f7f7f30;
|
||||
}
|
||||
.wbtg.red:hover{
|
||||
|
||||
.wbtg.red:hover {
|
||||
background-color: #c42b1c;
|
||||
color: #fff;
|
||||
}
|
||||
+33
-12
@@ -9,9 +9,11 @@
|
||||
<title>Win12</title>
|
||||
<!-- Windows 12 网页版 谭景元原创 -->
|
||||
|
||||
<!-- Windows 12 网页版是一个开放源项目,希望在网络上复制 Windows12 的桌面体验,
|
||||
<!-- Windows 12 网页版是一个开放源项目,
|
||||
希望让用户在网络上预先体验 Windows 12,
|
||||
内容可能与 Windows 12 正式版本不一致。
|
||||
使用标准网络技术,例妙如 Html、CSS 和 Javascript
|
||||
此项目绝不附属于微软,且不应与微软操作系统或产品混淆
|
||||
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,
|
||||
这也不是 Windows365 cloud PC
|
||||
本项目中微软、Windows和其他示范产品是微软公司组的商标 -->
|
||||
</head>
|
||||
@@ -232,11 +234,16 @@
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dock">
|
||||
<!-- 任务栏固定的应用 -->
|
||||
<i class="bi bi-gear"></i>
|
||||
<i class="bi bi-folder"></i>
|
||||
<i class="bi bi-browser-edge"></i>
|
||||
<div class="dock about"
|
||||
onclick="if($(this).hasClass('show'))$(this).removeClass('show');else $(this).addClass('show')">
|
||||
Windows 12 网页版 谭景元原创
|
||||
<p>Windows 12 网页版是一个开放源项目,<br>
|
||||
希望让用户在网络上预先体验 Windows 12,<br>
|
||||
内容可能与 Windows 12 正式版本不一致。<br>
|
||||
使用标准网络技术,例如 Html,CSS 和 JS<br>
|
||||
此项目绝不附属于微软,且不应与微软操作系统或产品混淆,<br>
|
||||
这也不是 Windows365 cloud PC<br>
|
||||
本项目中微软、Windows和其他示范产品是微软公司组的商标</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window setting">
|
||||
@@ -246,7 +253,7 @@
|
||||
<div>
|
||||
<a href="#" class="a wbtg red" onclick="hidewin('setting')">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
<a href="#" class="a wbtg">
|
||||
<a href="#" class="a wbtg max" onclick="maxwin('setting')">
|
||||
<i class="bi bi-app"></i>
|
||||
</a>
|
||||
<a href="#" class="a wbtg">
|
||||
@@ -267,7 +274,9 @@
|
||||
<input type="text" class="input" placeholder="查找设置" style="padding-left: 30px;">
|
||||
<input-before class="bi bi-search"></input-before>
|
||||
<list>
|
||||
<a href="#">
|
||||
<a href="#" style="background-color: #ffffff70">
|
||||
<span
|
||||
style="background-color: #2983cc;border-radius: 10px;position: relative;left: -5px;top:1px;height: 20px;"> </span>
|
||||
<img src="apps/setting/icons/system.webp">
|
||||
系统
|
||||
</a>
|
||||
@@ -313,9 +322,7 @@
|
||||
</a>
|
||||
</list>
|
||||
</div>
|
||||
<div class="page">
|
||||
hello
|
||||
</div>
|
||||
<iframe src="apps/setting/system.html" frameborder="0" class="page"></iframe>
|
||||
</div>
|
||||
<link rel="stylesheet" href="apps/setting/main.css">
|
||||
<script src="apps/setting/main.js"></script>
|
||||
@@ -330,6 +337,20 @@
|
||||
$('.window.' + name).addClass('notrans');
|
||||
}, 200);
|
||||
}
|
||||
function maxwin(name) {
|
||||
if ($('.window.' + name).hasClass('max')) {
|
||||
$('.window.' + name).removeClass('max');
|
||||
setTimeout(() => {
|
||||
$('.window.' + name).addClass('notrans');
|
||||
}, 200);
|
||||
$('.window.' + name + '>.titbar>div>.wbtg.max').html('<i class="bi bi-app"></i>');
|
||||
} else {
|
||||
$('.window.' + name).removeClass('notrans');
|
||||
$('.window.' + name).addClass('max');
|
||||
$('.window.' + name + '>.titbar>div>.wbtg.max').html('<svg version="1.1" width="12" height="12" viewBox="0,0,37.65105,35.84556" style="margin-top:4px;"><g transform="translate(-221.17804,-161.33903)"><g data-paper-data="{"isPaintingLayer":true}" fill="none" fill-rule="nonzero" stroke="#000000" stroke-width="2" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal"><path d="M224.68734,195.6846c-2.07955,-2.10903 -2.00902,-6.3576 -2.00902,-6.3576l0,-13.72831c0,0 -0.23986,-1.64534 2.00902,-4.69202c1.97975,-2.68208 4.91067,-2.00902 4.91067,-2.00902h14.06315c0,0 3.77086,-0.23314 5.80411,1.67418c2.03325,1.90732 1.33935,5.02685 1.33935,5.02685v13.39347c0,0 0.74377,4.01543 -1.33935,6.3576c-2.08312,2.34217 -5.80411,1.67418 -5.80411,1.67418h-13.39347c0,0 -3.50079,0.76968 -5.58035,-1.33935z"/><path d="M229.7952,162.85325h16.06111c0,0 5.96092,-0.36854 9.17505,2.64653c3.21412,3.01506 2.11723,7.94638 2.11723,7.94638v18.55642"/></g></g></svg>')
|
||||
|
||||
}
|
||||
}
|
||||
function hidewin(name) {
|
||||
$('.window.' + name).removeClass('notrans');
|
||||
$('.window.' + name).removeClass('show');
|
||||
|
||||
Reference in New Issue
Block a user