stat

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 @@
 					<img src="https://www.w3schools.com/w3css/img_nature_wide.jpg">
 				</section>
 
+				<section>
+					<div class="stat">
+						<div class="label">
+							<span>收到支持</span>
+							<span>预算(元)</span>
+						</div>
+						<div class="progress">
+							<span style="width: 50%">123456</span>
+							<span>50%</span>
+							<span>123456</span>
+						</div>
+						<div class="progress">
+							<span style="width: 25%;">12345</span>
+							<span>25%</span>
+						</div>
+						<div class="label">
+							<span>当前支出</span>
+							<a href="pan.baidu.com">查看明细</a>
+						</div>
+					</div>
+				</section>
+
 				<div class="w3-container">
 					<p>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