|
|
@@ -1,116 +1,173 @@
|
|
|
-/* tab3.page.scss */
|
|
|
-
|
|
|
-ion-header {
|
|
|
- background-color: #f8f8f8;
|
|
|
- ion-toolbar {
|
|
|
- --background: #fff;
|
|
|
- --color: #333;
|
|
|
- ion-title {
|
|
|
- font-size: 22px;
|
|
|
- font-weight: bold;
|
|
|
- color: #222;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ion-content {
|
|
|
- padding: 16px;
|
|
|
- background-color: #f4f5f8;
|
|
|
- }
|
|
|
-
|
|
|
+/* 页面整体布局 */
|
|
|
+ion-content {
|
|
|
+ background-color: white; /* 将页面背景色改为白色 */
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 标题 */
|
|
|
+ion-toolbar {
|
|
|
+ --background: white; /* 将工具栏背景色改为白色 */
|
|
|
+ --color: black; /* 设置标题字体为黑色 */
|
|
|
+ border-bottom: 1px solid #e1e1e1; /* 为工具栏底部添加轻微边框 */
|
|
|
+}
|
|
|
+
|
|
|
+ion-title {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: black; /* 标题字体颜色改为黑色 */
|
|
|
+}
|
|
|
+
|
|
|
+/* 用户信息区域 */
|
|
|
+.user-info {
|
|
|
+ background-color: white;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+ion-avatar {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-label h2 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333; /* 用户名的字体颜色设置为深灰色 */
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+ion-label p {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888; /* 登录提示字体颜色设置为浅灰色 */
|
|
|
+ margin-top: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.user-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.user-actions ion-button {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮样式 */
|
|
|
+ion-button {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-button[color="primary"] {
|
|
|
+ --background: #3880ff;
|
|
|
+ --color: white;
|
|
|
+ --border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-button[color="secondary"] {
|
|
|
+ --background: #ffcd38;
|
|
|
+ --color: white;
|
|
|
+}
|
|
|
+
|
|
|
+ion-button[color="tertiary"] {
|
|
|
+ --background: #10dc60;
|
|
|
+ --color: white;
|
|
|
+}
|
|
|
+
|
|
|
+ion-button[color="danger"] {
|
|
|
+ --background: #eb445a;
|
|
|
+ --color: white;
|
|
|
+}
|
|
|
+
|
|
|
+/* 锻炼计划和历史记录卡片 */
|
|
|
+ion-card {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ background-color: white;
|
|
|
+}
|
|
|
+
|
|
|
+ion-card-header {
|
|
|
+ background-color: #3880ff;
|
|
|
+ color: white;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-top-right-radius: 10px;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+ion-card-content {
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+ion-label {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+ion-button.expand-block {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-top: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+ion-item ion-button {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 767px) {
|
|
|
+ /* 用户信息区域调整 */
|
|
|
.user-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 16px;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
- margin-bottom: 16px;
|
|
|
+ padding: 12px;
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
-
|
|
|
- .user-info ion-avatar {
|
|
|
- margin-right: 16px;
|
|
|
+
|
|
|
+ ion-avatar {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
}
|
|
|
-
|
|
|
- .user-info ion-label h2 {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+
|
|
|
+ ion-label h2 {
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
-
|
|
|
- .user-info ion-label p {
|
|
|
- color: #888;
|
|
|
+
|
|
|
+ ion-button {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
-
|
|
|
- .user-actions {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
-
|
|
|
+
|
|
|
+ /* 锻炼计划和历史记录卡片 */
|
|
|
ion-card {
|
|
|
- margin-bottom: 16px;
|
|
|
- border-radius: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- ion-card-header {
|
|
|
- background-color: #f8f8f8;
|
|
|
- ion-card-title {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ion-card-content {
|
|
|
- background-color: #fff;
|
|
|
- ion-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- ion-label {
|
|
|
- font-size: 16px;
|
|
|
- color: #444;
|
|
|
- }
|
|
|
- ion-button {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ion-item {
|
|
|
margin-bottom: 12px;
|
|
|
- --inner-padding-start: 12px;
|
|
|
- --inner-padding-end: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- ion-item button {
|
|
|
- --background: #f4f5f8;
|
|
|
- --border-radius: 8px;
|
|
|
- --padding-start: 16px;
|
|
|
- --padding-end: 16px;
|
|
|
- --color: #333;
|
|
|
- }
|
|
|
-
|
|
|
- ion-item button:hover {
|
|
|
- --background: #e0e0e0;
|
|
|
}
|
|
|
-
|
|
|
- ion-icon {
|
|
|
- font-size: 20px;
|
|
|
- color: #888;
|
|
|
- }
|
|
|
-
|
|
|
- ion-item button ion-icon {
|
|
|
- margin-right: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- ion-button {
|
|
|
- border-radius: 8px;
|
|
|
+
|
|
|
+ ion-card-header {
|
|
|
+ padding: 12px;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
ion-card-title {
|
|
|
font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ ion-button.expand-block {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
