|
@@ -35,14 +35,13 @@ ion-segment-button.md::part(indicator-background) {
|
|
}
|
|
}
|
|
|
|
|
|
ion-content {
|
|
ion-content {
|
|
- padding-top: 56px; /* 给内容区域加上与header相等的顶部间距 */
|
|
|
|
|
|
+ padding-top: 56px;
|
|
}
|
|
}
|
|
ion-content {
|
|
ion-content {
|
|
background-color: #f9f9f9;
|
|
background-color: #f9f9f9;
|
|
padding-top: 56px;
|
|
padding-top: 56px;
|
|
}
|
|
}
|
|
// plan部分css
|
|
// plan部分css
|
|
-/* 给表格增加阴影和圆角 */
|
|
|
|
//表头
|
|
//表头
|
|
.grid-header {
|
|
.grid-header {
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
@@ -55,7 +54,7 @@ ion-content {
|
|
align-items: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.plan-table .table {
|
|
.plan-table .table {
|
|
- --ion-grid-column-padding: 0px; /* 去除额外的内边距,避免错位 */
|
|
|
|
|
|
+ --ion-grid-column-padding: 0px;
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
@@ -149,26 +148,26 @@ ion-content {
|
|
/* 问诊部分的设计 */
|
|
/* 问诊部分的设计 */
|
|
/* 确保图片等大 */
|
|
/* 确保图片等大 */
|
|
.consult .ion-text-center ion-img {
|
|
.consult .ion-text-center ion-img {
|
|
- width: 100%; /* 设置宽度为 100% */
|
|
|
|
- height: 200px; /* 设置固定高度,确保两张图片等高 */
|
|
|
|
- object-fit: cover; /* 保持图片比例,同时裁剪图片以适应区域 */
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 200px;
|
|
|
|
+ object-fit: cover;
|
|
}
|
|
}
|
|
.consult ion-item {
|
|
.consult ion-item {
|
|
- margin-bottom: 12px; /* 增加医生卡片之间的间距 */
|
|
|
|
- padding: 12px; /* 调整卡片内边距 */
|
|
|
|
|
|
+ margin-bottom: 12px;
|
|
|
|
+ padding: 12px;
|
|
padding-right: 4px;
|
|
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 {
|
|
.consult .thumbnail {
|
|
- width: 160px; /* 可以根据需要设置尺寸 */
|
|
|
|
- height: 160px; /* 高度和宽度一致使图片为正方形 */
|
|
|
|
- margin-bottom: 10px; /* 图片和按钮之间的间距 */
|
|
|
|
|
|
+ width: 160px;
|
|
|
|
+ height: 160px;
|
|
|
|
+ margin-bottom: 10px;
|
|
}
|
|
}
|
|
.consult ion-thumbnail {
|
|
.consult ion-thumbnail {
|
|
- width: 60px; /* 缩略图宽度 */
|
|
|
|
- height: 60px; /* 缩略图高度 */
|
|
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 60px;
|
|
}
|
|
}
|
|
.consult .lan {
|
|
.consult .lan {
|
|
--background: #009b7d;
|
|
--background: #009b7d;
|
|
@@ -190,18 +189,10 @@ ion-content {
|
|
--padding-right: 10px;
|
|
--padding-right: 10px;
|
|
--padding-top: 3px;
|
|
--padding-top: 3px;
|
|
--padding-bottom: 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 {
|
|
.consult .coach-info {
|
|
- margin-left: 12px; /* 缩略图与文字的间距 */
|
|
|
|
|
|
+ margin-left: 12px;
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -221,7 +212,7 @@ ion-content {
|
|
.consult .coach-info p {
|
|
.consult .coach-info p {
|
|
margin: 2px 0;
|
|
margin: 2px 0;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
- color: #666; /* 字体颜色 */
|
|
|
|
|
|
+ color: #666;
|
|
}
|
|
}
|
|
.consult ion-button {
|
|
.consult ion-button {
|
|
--background: rgb(244, 245, 244);
|
|
--background: rgb(244, 245, 244);
|
|
@@ -248,20 +239,20 @@ ion-content {
|
|
|
|
|
|
}
|
|
}
|
|
.plan-column {
|
|
.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 {
|
|
.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 {
|
|
.task-item {
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
- margin-bottom: 5px; /* 为了分隔上下两个span */
|
|
|
|
|
|
+ margin-bottom: 5px;
|
|
}
|
|
}
|
|
/* 打卡部分的设计 */
|
|
/* 打卡部分的设计 */
|
|
.checkin p {
|
|
.checkin p {
|
|
@@ -282,7 +273,7 @@ ion-content {
|
|
}
|
|
}
|
|
|
|
|
|
.checkin .avatar-container {
|
|
.checkin .avatar-container {
|
|
- margin-right:5px; /* 头像和信息之间的间距 */
|
|
|
|
|
|
+ margin-right:5px;
|
|
}
|
|
}
|
|
|
|
|
|
.checkin .avatar {
|
|
.checkin .avatar {
|
|
@@ -292,7 +283,7 @@ ion-content {
|
|
}
|
|
}
|
|
|
|
|
|
.checkin .user-info {
|
|
.checkin .user-info {
|
|
- flex: 1; /* 使信息部分占满剩余空间 */
|
|
|
|
|
|
+ flex: 1;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
@@ -304,10 +295,10 @@ ion-content {
|
|
/* 卡片内信息区域 */
|
|
/* 卡片内信息区域 */
|
|
.card-info {
|
|
.card-info {
|
|
display: flex;
|
|
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;
|
|
position: absolute;
|
|
top: 5px;
|
|
top: 5px;
|
|
right: 30px;
|
|
right: 30px;
|
|
- font-size: 14px !important; /* 使用 !important 强制应用样式 */
|
|
|
|
|
|
+ font-size: 14px !important;
|
|
}
|
|
}
|
|
|
|
|
|
.checkin .stat-value {
|
|
.checkin .stat-value {
|
|
- font-size: 24px !important; /* 使用 !important 强制应用样式 */
|
|
|
|
|
|
+ font-size: 24px !important;
|
|
color: #000000;
|
|
color: #000000;
|
|
}
|
|
}
|
|
ion-card {
|
|
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;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|