From 85103f2cb46f017ac16b20e68ce0c17b347c106f Mon Sep 17 00:00:00 2001
From: 728 <septem.duo.octo@outlook.com>
Date: Sun, 28 Aug 2022 14:55:20 +0800
Subject: [PATCH] circle

---
 ismism.ts/ui/index.html | 56 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/ismism.ts/ui/index.html b/ismism.ts/ui/index.html
index 2d9b9a6..228bd5d 100644
--- a/ismism.ts/ui/index.html
+++ b/ismism.ts/ui/index.html
@@ -333,6 +333,41 @@
 		background: none;
 	}
 
+	.circle {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.circle>div {
+		flex-basis: 1px;
+		flex-grow: 1;
+		display: flex;
+		flex-flow: column nowrap;
+		align-items: center;
+		margin: 10px;
+		font-size: var(--large);
+	}
+
+	.circle>div>.progress {
+		--size: 4em;
+		width: var(--size);
+		height: var(--size);
+		margin-bottom: 10px;
+		border-radius: 50%;
+		display: grid;
+		place-items: center;
+		background:
+			radial-gradient(closest-side, var(--cl-white) 66%, transparent 0 100%),
+			conic-gradient(var(--cl-gray) calc(var(--value) * 1%), var(--cl-light-gray) 0);
+		font-family: monospace;
+		font-size: calc(var(--size) / 2);
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+		color: var(--cl-amber);
+		text-shadow: 0 2px 2px var(--cl-light-gray);
+	}
+
 	.animate-left {
 		position: relative;
 		animation: animateleft 0.4s
@@ -437,6 +472,27 @@
 							<a href="pan.baidu.com">查看明细</a>
 						</div>
 					</div>
+					<br>活动目标：
+					<div class="circle">
+						<div>
+							<div class="progress" style="--value: 65">65%</div>
+							<span>雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建雨棚扩建</span>
+						</div>
+						<div>
+							<div class="progress" style="--value: 65">65%</div>
+							<span>雨棚扩建雨棚扩建</span>
+
+						</div>
+						<div>
+							<div class="progress" style="--value: 100; color: var(--cl-gray)">完成</div>
+							<span>雨棚扩建雨棚扩建</span>
+
+						</div>
+						<div>
+							<div class="progress" style="--value: 0; color: var(--cl-gray)">0%</div>
+							<span>雨棚扩建</span>
+						</div>
+					</div>
 				</section>
 
 				<div class="w3-container">