update

src/components/secondaryScreen/screen-right/twoR.vue

@@ -1,7 +1,11 @@
 <template>
-    <div>
+    <div class="pie-container self">
         <public-title title="步数" />
         <div class="inner" ref="healthChart"></div>
+        <div class="count">
+            <div class="t">总人数</div>
+            <div class="v">{{ total }}</div>
+        </div>
     </div>
 </template>
 <script setup lang="ts">
@@ -24,7 +28,7 @@
     onMounted(() => {
         init();
     });
-    const { stepData, getValue, setStep } = useStep();
+    const { stepData, total, setStep } = useStep();
 
     async function init() {
         try {
@@ -59,4 +63,34 @@
         margin: 0 auto;
         height: calc(100% - 40px);
     }
+
+    .pie-container.self {
+        position: relative;
+        padding-bottom: 0 !important;
+    }
+
+    .count {
+        position: absolute;
+        width: 80%;
+        top: 51%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        color: #fff;
+        font-size: 22px;
+        font-weight: bold;
+        z-index: 1;
+        pointer-events: none;
+
+        > div {
+            width: 80px;
+            z-index: 0;
+        }
+
+        .t {
+            font-size: 14px;
+            font-weight: normal;
+        }
+    }
 </style>