xukang vor 4 Monaten
Ursprung
Commit
afc768290f
1 geänderte Dateien mit 36 neuen und 45 gelöschten Zeilen
  1. 36 45
      TFPower-app/src/app/tab2/tab2.page.scss

+ 36 - 45
TFPower-app/src/app/tab2/tab2.page.scss

@@ -35,14 +35,13 @@ ion-segment-button.md::part(indicator-background) {
 }
 
 ion-content {
-  padding-top: 56px; /* 给内容区域加上与header相等的顶部间距 */
+  padding-top: 56px; 
 }
 ion-content {
   background-color: #f9f9f9;
   padding-top: 56px;
 }
 // plan部分css
-/* 给表格增加阴影和圆角 */
 //表头
 .grid-header {
   font-weight: bold;
@@ -55,7 +54,7 @@ ion-content {
     align-items: center;
 }
 .plan-table .table {
-  --ion-grid-column-padding: 0px;  /* 去除额外的内边距,避免错位 */
+  --ion-grid-column-padding: 0px; 
   font-size: 20px;
 }
 
@@ -149,26 +148,26 @@ ion-content {
 /* 问诊部分的设计 */
 /* 确保图片等大 */
 .consult .ion-text-center ion-img {
-  width: 100%; /* 设置宽度为 100% */
-  height: 200px; /* 设置固定高度,确保两张图片等高 */
-  object-fit: cover; /* 保持图片比例,同时裁剪图片以适应区域 */
+  width: 100%; 
+  height: 200px; 
+  object-fit: cover; 
 }
 .consult ion-item {
-  margin-bottom: 12px; /* 增加医生卡片之间的间距 */
-  padding: 12px; /* 调整卡片内边距 */
+  margin-bottom: 12px; 
+  padding: 12px; 
   padding-right: 4px;
-  border-radius: 8px; /* 圆角设计 */
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
-  background-color: #ffffff; /* 卡片背景色 */
+  border-radius: 8px; 
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
+  background-color: #ffffff; 
 }
 .consult .thumbnail {
-  width: 160px;  /* 可以根据需要设置尺寸 */
-  height: 160px;  /* 高度和宽度一致使图片为正方形 */
-  margin-bottom: 10px;  /* 图片和按钮之间的间距 */
+  width: 160px; 
+  height: 160px; 
+  margin-bottom: 10px;  
 }
 .consult ion-thumbnail {
-  width: 60px; /* 缩略图宽度 */
-  height: 60px; /* 缩略图高度 */
+  width: 60px;
+  height: 60px; 
 }
 .consult .lan {
   --background: #009b7d;
@@ -190,18 +189,10 @@ ion-content {
   --padding-right: 10px;
   --padding-top: 3px;
   --padding-bottom: 3px;
-
-  /* 例如给 .lan 这个类应用背景色 */
-  // background-color: var(--background);
-  // color: var(--color);
-  // border-radius: var(--border-radius);
-  // box-shadow: var(--box-shadow);
-  // padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
-  // border: var(--border-width) var(--border-style) var(--border-color);
 }
 
 .consult .coach-info {
-  margin-left: 12px; /* 缩略图与文字的间距 */
+  margin-left: 12px;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -221,7 +212,7 @@ ion-content {
 .consult .coach-info p {
   margin: 2px 0;
   font-size: 12px;
-  color: #666; /* 字体颜色 */
+  color: #666; 
 }
 .consult ion-button {
   --background: rgb(244, 245, 244);
@@ -248,20 +239,20 @@ ion-content {
  
 }
 .plan-column {
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* 平滑过渡效果 */
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .task-container {
-  display: flex; /* 设置为 flexbox */
-  flex-direction: column; /* 让子元素垂直排列 */
-  align-items: center; /* 水平居中 */
-  justify-content: center; /* 垂直居中 */
-  text-align: center; /* 确保文本在水平上居中 */
+  display: flex; 
+  flex-direction: column; 
+  align-items: center; 
+  justify-content: center; 
+  text-align: center; 
 }
 
 .task-item {
   font-weight: bold;
-  margin-bottom: 5px; /* 为了分隔上下两个span */
+  margin-bottom: 5px;
 }
 /* 打卡部分的设计 */
 .checkin p {
@@ -282,7 +273,7 @@ ion-content {
 }
 
 .checkin .avatar-container {
-  margin-right:5px; /* 头像和信息之间的间距 */
+  margin-right:5px; 
 }
 
 .checkin .avatar {
@@ -292,7 +283,7 @@ ion-content {
 }
 
 .checkin .user-info {
-  flex: 1; /* 使信息部分占满剩余空间 */
+  flex: 1; 
 }
 
 
@@ -304,10 +295,10 @@ ion-content {
 /* 卡片内信息区域 */
 .card-info {
   display: flex;
-  flex-direction: column; /* 垂直排列,按钮在上,统计信息在下 */
-  align-items: center;  /* 横向居中 */
-  justify-content: center; /* 纵向居中 */
-  gap: 20px;  /* 设置按钮和统计信息的间隔 */
+  flex-direction: column;
+  align-items: center;
+  justify-content: center; 
+  gap: 20px;
 }
 
 /* 圆形打卡按钮 */
@@ -357,18 +348,18 @@ ion-card .power-label {
   position: absolute;
   top: 5px;
   right: 30px;
-  font-size: 14px !important; /* 使用 !important 强制应用样式 */
+  font-size: 14px !important; 
 }
 
 .checkin .stat-value {
-  font-size: 24px !important;  /* 使用 !important 强制应用样式 */
+  font-size: 24px !important; 
   color: #000000;
 }
 ion-card {
-    border-radius: 15px; /* 圆角边框 */
-    background-color: #f9f9f9; /* 卡片内部背景颜色 */
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
-    border: 1px solid #e0e0e0; /* 边框颜色 */
+    border-radius: 15px; 
+    background-color: #f9f9f9; 
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
+    border: 1px solid #e0e0e0; 
   }