diff --git a/ismism.ts/ui/index.html b/ismism.ts/ui/index.html index 5f55e07..1f9391e 100644 --- a/ismism.ts/ui/index.html +++ b/ismism.ts/ui/index.html @@ -13,9 +13,12 @@ * { --cl-white: #fff; --cl-light-gray: #f1f1f1; + --cl-gray: #9e9e9e; --cl-dark-gray: #616161; --cl-black: #000; + --cl-pale-red: #ffdddd; --cl-red: #f44336; + --cl-amber: #ffc107; --small: 12px; --normal: 15px; --large: 18px; @@ -154,7 +157,7 @@ } .banner button { - font-size: large; + font-size: var(--large); } .topright { @@ -269,6 +272,62 @@ width: 100%; } + .stat { + margin-top: 10px; + } + + .stat>.label { + overflow: auto; + } + + .stat>.label>*:nth-child(1) { + float: left; + } + + .stat>.label>*:nth-child(2) { + float: right; + } + + .stat>.label>a { + text-decoration: underline; + } + + .stat>.label>a:hover { + color: var(--cl-amber); + } + + .stat>.progress { + position: relative; + width: 100%; + color: var(--cl-black); + background-color: var(--cl-light-gray); + font-family: monospace; + } + + .stat>.progress>span { + display: inline-block; + position: absolute; + padding: 0.25em 8px; + left: 0; + width: 100%; + } + + .stat>.progress>span:nth-child(1) { + position: relative; + min-width: 1em; + background-color: var(--cl-gray); + } + + .stat>.progress>span:nth-child(2) { + text-align: center; + background: none; + } + + .stat>.progress>span:nth-child(3) { + text-align: right; + background: none; + } + .animate-left { position: relative; animation: animateleft 0.4s @@ -351,6 +410,28 @@ +
+
+
+ 收到支持 + 预算(元) +
+
+ 123456 + 50% + 123456 +
+
+ 12345 + 25% +
+
+ 当前支出 + 查看明细 +
+
+
+

Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed