|
|
@@ -1,223 +1,617 @@
|
|
|
-* {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- box-sizing: border-box;
|
|
|
- font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
|
|
-}
|
|
|
-
|
|
|
-body {
|
|
|
- background-color: #f5f9ff;
|
|
|
- min-height: 100vh;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: flex-start;
|
|
|
- padding: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.swim-container {
|
|
|
- width: 100%;
|
|
|
- max-width: 500px;
|
|
|
- background: white;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 5px 15px rgba(30, 144, 255, 0.1);
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.header {
|
|
|
- background: linear-gradient(135deg, #1e90ff, #00bfff);
|
|
|
- color: white;
|
|
|
- padding: 20px;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.header::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- bottom: -50px;
|
|
|
- right: -50px;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-
|
|
|
-.user-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 15px;
|
|
|
- margin-bottom: 15px;
|
|
|
- position: relative;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.avatar {
|
|
|
- width: 60px;
|
|
|
- height: 60px;
|
|
|
- background: rgba(255, 255, 255, 0.2);
|
|
|
- border-radius: 50%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
-}
|
|
|
-
|
|
|
-.user-text h2 {
|
|
|
- margin: 0;
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.user-text p {
|
|
|
- margin: 5px 0 0;
|
|
|
- opacity: 0.9;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-/* 优化后的数据区域 */
|
|
|
-.data-section {
|
|
|
- padding: 15px;
|
|
|
-}
|
|
|
-
|
|
|
-.main-data {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
- gap: 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
-}
|
|
|
-
|
|
|
-.data-item {
|
|
|
- text-align: center;
|
|
|
- min-width: calc(50% - 20px);
|
|
|
- margin-bottom: 15px;
|
|
|
- padding: 12px;
|
|
|
- background: rgba(30, 144, 255, 0.05);
|
|
|
- border-radius: 10px;
|
|
|
- flex: 1;
|
|
|
-}
|
|
|
-
|
|
|
-.data-value {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
- color: #1e90ff;
|
|
|
- margin-bottom: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.data-label {
|
|
|
- font-size: 13px;
|
|
|
- color: #666;
|
|
|
- white-space: nowrap;
|
|
|
-}
|
|
|
-
|
|
|
-.map-area {
|
|
|
- height: 180px;
|
|
|
- background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
|
|
|
- border-radius: 12px;
|
|
|
- margin-bottom: 20px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: white;
|
|
|
- font-weight: bold;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.detail-data {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.detail-card {
|
|
|
- background: #f8fafc;
|
|
|
- border-radius: 10px;
|
|
|
- padding: 12px;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.footer {
|
|
|
- padding: 15px;
|
|
|
- border-top: 1px solid #eee;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.source {
|
|
|
- font-size: 12px;
|
|
|
- color: #999;
|
|
|
-}
|
|
|
-
|
|
|
-.action-btn {
|
|
|
- background: #1e90ff;
|
|
|
- color: white;
|
|
|
- border: none;
|
|
|
- padding: 8px 16px;
|
|
|
- border-radius: 18px;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 5px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-
|
|
|
-.action-btn::before {
|
|
|
- content: '↑';
|
|
|
-}
|
|
|
-
|
|
|
-/* 手机端特定调整 */
|
|
|
-@media (max-width: 480px) {
|
|
|
- .main-data {
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
- .data-item {
|
|
|
- min-width: calc(50% - 15px);
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
- .data-value {
|
|
|
- font-size: 22px;
|
|
|
- }
|
|
|
- .map-area {
|
|
|
- height: 160px;
|
|
|
- }
|
|
|
-}
|
|
|
+// * {
|
|
|
+// margin: 0;
|
|
|
+// padding: 0;
|
|
|
+// box-sizing: border-box;
|
|
|
+// font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
|
|
|
+// }
|
|
|
|
|
|
-/* 电脑端适配 */
|
|
|
-@media (min-width: 768px) {
|
|
|
- body {
|
|
|
- align-items: center;
|
|
|
- padding: 30px;
|
|
|
+// body {
|
|
|
+// background-color: #f5f9ff;
|
|
|
+// min-height: 100vh;
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: flex-start;
|
|
|
+// padding: 15px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .swim-container {
|
|
|
+// width: 100%;
|
|
|
+// max-width: 500px;
|
|
|
+// background: white;
|
|
|
+// border-radius: 16px;
|
|
|
+// box-shadow: 0 5px 15px rgba(30, 144, 255, 0.1);
|
|
|
+// overflow: hidden;
|
|
|
+// }
|
|
|
+
|
|
|
+// .header {
|
|
|
+// background: linear-gradient(135deg, #1e90ff, #00bfff);
|
|
|
+// color: white;
|
|
|
+// padding: 20px;
|
|
|
+// position: relative;
|
|
|
+// overflow: hidden;
|
|
|
+// }
|
|
|
+
|
|
|
+// .header::after {
|
|
|
+// content: '';
|
|
|
+// position: absolute;
|
|
|
+// bottom: -50px;
|
|
|
+// right: -50px;
|
|
|
+// width: 150px;
|
|
|
+// height: 150px;
|
|
|
+// background: rgba(255, 255, 255, 0.1);
|
|
|
+// border-radius: 50%;
|
|
|
+// }
|
|
|
+
|
|
|
+// .user-info {
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// gap: 15px;
|
|
|
+// margin-bottom: 15px;
|
|
|
+// position: relative;
|
|
|
+// z-index: 1;
|
|
|
+// }
|
|
|
+
|
|
|
+// .avatar {
|
|
|
+// width: 60px;
|
|
|
+// height: 60px;
|
|
|
+// background: rgba(255, 255, 255, 0.2);
|
|
|
+// border-radius: 50%;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// justify-content: center;
|
|
|
+// font-size: 24px;
|
|
|
+// font-weight: bold;
|
|
|
+// }
|
|
|
+
|
|
|
+// .user-text h2 {
|
|
|
+// margin: 0;
|
|
|
+// font-size: 20px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .user-text p {
|
|
|
+// margin: 5px 0 0;
|
|
|
+// opacity: 0.9;
|
|
|
+// font-size: 14px;
|
|
|
+// }
|
|
|
+
|
|
|
+// /* 优化后的数据区域 */
|
|
|
+// .data-section {
|
|
|
+// padding: 15px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .main-data {
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+// margin-bottom: 20px;
|
|
|
+// gap: 10px;
|
|
|
+// flex-wrap: wrap;
|
|
|
+// }
|
|
|
+
|
|
|
+// .data-item {
|
|
|
+// text-align: center;
|
|
|
+// min-width: calc(50% - 20px);
|
|
|
+// margin-bottom: 15px;
|
|
|
+// padding: 12px;
|
|
|
+// background: rgba(30, 144, 255, 0.05);
|
|
|
+// border-radius: 10px;
|
|
|
+// flex: 1;
|
|
|
+// }
|
|
|
+
|
|
|
+// .data-value {
|
|
|
+// font-size: 24px;
|
|
|
+// font-weight: bold;
|
|
|
+// color: #1e90ff;
|
|
|
+// margin-bottom: 8px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .data-label {
|
|
|
+// font-size: 13px;
|
|
|
+// color: #666;
|
|
|
+// white-space: nowrap;
|
|
|
+// }
|
|
|
+
|
|
|
+// .map-area {
|
|
|
+// height: 180px;
|
|
|
+// background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
|
|
|
+// border-radius: 12px;
|
|
|
+// margin-bottom: 20px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// justify-content: center;
|
|
|
+// color: white;
|
|
|
+// font-weight: bold;
|
|
|
+// position: relative;
|
|
|
+// overflow: hidden;
|
|
|
+// }
|
|
|
+
|
|
|
+// .detail-data {
|
|
|
+// display: grid;
|
|
|
+// grid-template-columns: repeat(2, 1fr);
|
|
|
+// gap: 12px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .detail-card {
|
|
|
+// background: #f8fafc;
|
|
|
+// border-radius: 10px;
|
|
|
+// padding: 12px;
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+
|
|
|
+// .footer {
|
|
|
+// padding: 15px;
|
|
|
+// border-top: 1px solid #eee;
|
|
|
+// display: flex;
|
|
|
+// justify-content: space-between;
|
|
|
+// align-items: center;
|
|
|
+// }
|
|
|
+
|
|
|
+// .source {
|
|
|
+// font-size: 12px;
|
|
|
+// color: #999;
|
|
|
+// }
|
|
|
+
|
|
|
+// .action-btn {
|
|
|
+// background: #1e90ff;
|
|
|
+// color: white;
|
|
|
+// border: none;
|
|
|
+// padding: 8px 16px;
|
|
|
+// border-radius: 18px;
|
|
|
+// font-size: 14px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// gap: 5px;
|
|
|
+// cursor: pointer;
|
|
|
+// }
|
|
|
+
|
|
|
+// .action-btn::before {
|
|
|
+// content: '↑';
|
|
|
+// }
|
|
|
+
|
|
|
+// /* 手机端特定调整 */
|
|
|
+// @media (max-width: 480px) {
|
|
|
+// .main-data {
|
|
|
+// gap: 8px;
|
|
|
+// }
|
|
|
+// .data-item {
|
|
|
+// min-width: calc(50% - 15px);
|
|
|
+// padding: 10px;
|
|
|
+// }
|
|
|
+// .data-value {
|
|
|
+// font-size: 22px;
|
|
|
+// }
|
|
|
+// .map-area {
|
|
|
+// height: 160px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /* 电脑端适配 */
|
|
|
+// @media (min-width: 768px) {
|
|
|
+// body {
|
|
|
+// align-items: center;
|
|
|
+// padding: 30px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .swim-container {
|
|
|
+// max-width: 800px;
|
|
|
+// display: grid;
|
|
|
+// grid-template-columns: 1fr 1fr;
|
|
|
+// }
|
|
|
+
|
|
|
+// .header {
|
|
|
+// grid-column: 1 / -1;
|
|
|
+// }
|
|
|
+
|
|
|
+// .map-area {
|
|
|
+// height: 250px;
|
|
|
+// margin: 0 15px 15px 0;
|
|
|
+// }
|
|
|
+
|
|
|
+// .data-section {
|
|
|
+// display: grid;
|
|
|
+// grid-template-columns: 1fr 1fr;
|
|
|
+// gap: 15px;
|
|
|
+// padding: 15px;
|
|
|
+// }
|
|
|
+
|
|
|
+// .main-data {
|
|
|
+// grid-column: 1 / -1;
|
|
|
+// }
|
|
|
+
|
|
|
+// .footer {
|
|
|
+// grid-column: 1 / -1;
|
|
|
+// }
|
|
|
+// }
|
|
|
+/* 顶部导航栏样式 */
|
|
|
+ion-toolbar {
|
|
|
+ --background: var(--ion-color-primary);
|
|
|
+ --color: white;
|
|
|
+
|
|
|
+ ion-segment {
|
|
|
+ ion-segment-button {
|
|
|
+ --color: rgba(255, 255, 255, 0.7);
|
|
|
+ --color-checked: white;
|
|
|
+ --indicator-color: transparent;
|
|
|
+
|
|
|
+ &.active-tab {
|
|
|
+ --color: white;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 25%;
|
|
|
+ width: 50%;
|
|
|
+ height: 3px;
|
|
|
+ background: white;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-badge {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .swim-container {
|
|
|
- max-width: 800px;
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
+ .notification-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-searchbar {
|
|
|
+ --background: rgba(255, 255, 255, 0.2);
|
|
|
+ --color: white;
|
|
|
+ --placeholder-color: rgba(255, 255, 255, 0.7);
|
|
|
+ --border-radius: 20px;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 内容区域样式 */
|
|
|
+ ion-content {
|
|
|
+ --background: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 16px 16px 8px;
|
|
|
+ color: var(--ion-color-dark);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 快速入口分类 */
|
|
|
+ .quick-access-section {
|
|
|
+ background: white;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ .quick-access-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .quick-access-btn {
|
|
|
+ --padding-start: 0;
|
|
|
+ --padding-end: 0;
|
|
|
+ height: 80px;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ .btn-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ ion-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: var(--ion-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 运动数据模块 */
|
|
|
+ .data-section {
|
|
|
+ background: white;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .header {
|
|
|
- grid-column: 1 / -1;
|
|
|
+ ion-card {
|
|
|
+ margin: 0 10px;
|
|
|
+ box-shadow: none;
|
|
|
+ border-radius: 12px;
|
|
|
+
|
|
|
+ ion-card-content {
|
|
|
+ padding: 16px;
|
|
|
+
|
|
|
+ .calories-data {
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .data-main {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ margin-bottom: 8px;
|
|
|
+
|
|
|
+ .calories-value {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--ion-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .calories-unit {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .trend-icon {
|
|
|
+ color: var(--ion-color-success);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ ion-progress-bar {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 8px;
|
|
|
+ --progress-background: var(--ion-color-light);
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rank-btn {
|
|
|
+ --padding-start: 0;
|
|
|
+ --padding-end: 0;
|
|
|
+ height: auto;
|
|
|
+ margin: 0;
|
|
|
+
|
|
|
+ ion-icon {
|
|
|
+ color: var(--ion-color-warning);
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 课程推荐模块 */
|
|
|
+ .course-section {
|
|
|
+ background: white;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .map-area {
|
|
|
- height: 250px;
|
|
|
- margin: 0 15px 15px 0;
|
|
|
+ .course-row {
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .row-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-slides {
|
|
|
+ ion-slide {
|
|
|
+ width: 70%;
|
|
|
+
|
|
|
+ ion-card {
|
|
|
+ margin: 0 8px;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 120px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-badge {
|
|
|
+ position: absolute;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-header {
|
|
|
+ padding: 12px;
|
|
|
+
|
|
|
+ ion-card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-subtitle {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+
|
|
|
+ .calories-badge {
|
|
|
+ margin-left: 8px;
|
|
|
+ color: var(--ion-color-danger);
|
|
|
+ font-size: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-progress-bar {
|
|
|
+ --progress-background: var(--ion-color-primary);
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .participants {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 12px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+
|
|
|
+ ion-icon {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 为你推荐 */
|
|
|
+ .recommend-section {
|
|
|
+ background: white;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .data-section {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 15px;
|
|
|
- padding: 15px;
|
|
|
+ .section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
- .main-data {
|
|
|
- grid-column: 1 / -1;
|
|
|
+ ion-list {
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ ion-item {
|
|
|
+ --padding-start: 16px;
|
|
|
+ --inner-padding-end: 16px;
|
|
|
+ --border-color: var(--ion-color-light-shade);
|
|
|
+
|
|
|
+ ion-thumbnail {
|
|
|
+ position: relative;
|
|
|
+ width: 80px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 8px 16px 8px 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .match-badge {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -6px;
|
|
|
+ right: -6px;
|
|
|
+ background: var(--ion-color-primary);
|
|
|
+ color: white;
|
|
|
+ font-size: 10px;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-label {
|
|
|
+ h3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-description {
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--ion-color-medium);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 年度报告入口 */
|
|
|
+ .report-section {
|
|
|
+ padding: 10px 16px;
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- .footer {
|
|
|
- grid-column: 1 / -1;
|
|
|
+ ion-card {
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
|
+ background: linear-gradient(135deg, var(--ion-color-primary), var(--ion-color-secondary));
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ ion-card-header {
|
|
|
+ padding-bottom: 0;
|
|
|
+
|
|
|
+ ion-card-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-subtitle {
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ ion-card-content {
|
|
|
+ padding-top: 8px;
|
|
|
+
|
|
|
+ .badges-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+
|
|
|
+ ion-badge {
|
|
|
+ --background: rgba(255, 255, 255, 0.2);
|
|
|
+ --color: white;
|
|
|
+ font-weight: normal;
|
|
|
+
|
|
|
+ ion-icon {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
