首页同样样式调整

acupuncture-前台/src/views/indexCom/patient.vue

@@ -9,8 +9,28 @@
               <div class="dis"></div>
             </div>
             <!-- 患者总数统计图 -->
-            <div style="height: 300px" v-loading="loading">
+            <div
-              <div id="patienty" style="width: 100%"></div>
+              style="
+                height: 300px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+              "
+              v-loading="loading"
+            >
+              <div class="div-hz">
+                <div class="div-hz-icon">
+                  <img src="./image.png" alt="" width="60px" height="60px" />
+                </div>
+                <div class="div-hz-num">
+                  <div class="">
+                    {{ HZXXvalue[0].value || 0 }}<span>人</span>
+                  </div>
+                  <div class="hz-num-title">患者总数</div>
+                </div>
+              </div>
+
+              <!-- <div id="patienty" style="width: 100%"></div> -->
             </div>
           </el-card>
         </div>
@@ -170,7 +190,7 @@ export default {
             };
             this.diseaseValue.push(data);
           }
-          this.Linepatient(); // 患者总数
+          // this.Linepatient(); // 患者总数
           this.handleAge(); // 年龄
           this.columnar(); //性别分析图
           this.handleDisease(); //病种分布
@@ -256,6 +276,33 @@ export default {
 </script>
 <style scoped src="@/assets/styles/common.css"></style>
 <style scoped>
+.div-hz {
+  background: #c6a268;
+  width: 80%;
+  height: 70%;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 24px;
+}
+.div-hz-icon {
+  flex: 1;
+}
+.div-hz-num {
+  flex: 1;
+  font-size: 50px;
+  color: #ffffff;
+  text-align: right;
+}
+.div-hz-num span {
+  font-size: 24px;
+  color: #ffffff;
+}
+.hz-num-title {
+  font-size: 22px;
+  color: #ffffff;
+}
 >>> .el-card__body {
   padding: 10px 0 !important;
 }