opensource/win12
3
0
Fork 0
mirror of https://github.com/tjy-gitnub/win12.git synced 2026-09-01 15:46:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

commit

Browse Source 
- 优化部分布局
This commit is contained in:
User782Tec
2023-01-24 10:35:09 +08:00
parent 4b974d3cb0
commit 0bf5f5e861
3 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/style/fonts.css
+8 -3
View File
@@ -1,8 +1,13 @@
/* 这里我对ui做了一些调整 */
/* 我注意到你的布局居中都是用margin做的，可以在dis:flex的块中加 align-content: space-around; 居中 */
/* 这个flex-direction: column;的不同设备的兼容性不是很好，可能错位，可以写明确一点来布局 */
#win-notepad-font>.row {
display: flex;
justify-content: space-around;
height: 266px;
}
.select-input {
margin: 5px 0 5px 11px;
display: inline-block;
height: 200px;
}
@@ -75,7 +80,7 @@
display: inline-block;
width: 150px;
height: 150px;
margin: 5px 10px;
margin: 5px 10px;;
}
#win-notepad-font .preview>.preview-box {
@@ -85,7 +90,7 @@
justify-content: center;
align-items: center;
word-break: keep-all;
height: 100%;
height: 150px;
text-align: center;
border: 2px solid #7f7f7f40;
background: var(--card);
desktop.html
+2
View File
@@ -837,6 +837,7 @@
<img src="icon/notepad.png" class="icon">
</div>
<div class="content" id="win-notepad-font">
<div class="row">
<div class="select-input" id="win-notepad-font-type">
<div class="description">字体</div>
<input type="text" />
@@ -894,6 +895,7 @@
<a class="option">粗体</a>
<a class="option">粗偏斜体</a>
</list>
</div>
</div><br />
<div class="preview">
<div class="description">
desktop.js
+6 -6
View File
@@ -708,12 +708,12 @@ const styles = {
'斜体': 'font-style: italic;',
'粗偏斜体': 'font-weight: bold; font-style: italic;'
}
const fontvalues = document.querySelectorAll('#win-notepad-font>#win-notepad-font-type>.value-box>.option');
const sizevalues = document.querySelectorAll('#win-notepad-font>#win-notepad-font-size>.value-box>.option');
const stylevalues = document.querySelectorAll('#win-notepad-font>#win-notepad-font-style>.value-box>.option');
const typeinput = document.querySelector('#win-notepad-font>#win-notepad-font-type>input[type=text]');
const sizeinput = document.querySelector('#win-notepad-font>#win-notepad-font-size>input[type=text]');
const styleinput = document.querySelector('#win-notepad-font>#win-notepad-font-style>input[type=text]');
const fontvalues = document.querySelectorAll('#win-notepad-font>.row>#win-notepad-font-type>.value-box>.option');
const sizevalues = document.querySelectorAll('#win-notepad-font>.row>#win-notepad-font-size>.value-box>.option');
const stylevalues = document.querySelectorAll('#win-notepad-font>.row>#win-notepad-font-style>.value-box>.option');
const typeinput = document.querySelector('#win-notepad-font>.row>#win-notepad-font-type>input[type=text]');
const sizeinput = document.querySelector('#win-notepad-font>.row>#win-notepad-font-size>input[type=text]');
const styleinput = document.querySelector('#win-notepad-font>.row>#win-notepad-font-style>input[type=text]');
for (const elt of fontvalues) {
elt.onclick = function () {
typeinput.value = this.innerText;