circle

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">