Home Explore Help
Register Sign In
ljf123
/
ai-sport
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fix: space warp

ljf123 4 weeks ago
parent
0fbaeec264
commit
94318c808b
3 changed files with 310 additions and 5 deletions
Split View Show Diff Stats
  1. 82 1
      src/app/tab1/tab1.page.html
  2. 223 0
      src/app/tab1/tab1.page.scss
  3. 5 4
      src/app/tabs/tabs.page.html

+ 82 - 1
src/app/tab1/tab1.page.html
View File 

@@ -1,7 +1,8 @@
 
+<!--
 
 <ion-header [translucent]="true">
 
   <ion-toolbar>
 
     <ion-title>
 
-      Tab 1
 
+      
     </ion-title>
 
   </ion-toolbar>
 
 </ion-header>
 
@@ -15,3 +16,83 @@
 
 
   <app-explore-container name="Tab 1 page"></app-explore-container>
 
 </ion-content>
 
+-->
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>游泳记录 - 优化间距</title>
 
+    <style>
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="swim-container">
 
+        <!-- 头部区域 -->
 
+        <div class="header">
 
+            <div class="user-info">
 
+                <div class="avatar">于</div>
 
+                <div class="user-text">
 
+                    <h2>爱游泳的于归</h2>
 
+                    <p>2020/06/11</p>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 数据展示区 -->
 
+        <div class="data-section">
 
+            <!-- 主要数据 - 优化间距 -->
 
+            <div class="main-data">
 
+                <div class="data-item">
 
+                    <div class="data-value">2.57</div>
 
+                    <div class="data-label">距离 (km)</div>
 
+                </div>
 
+                <div class="data-item">
 
+                    <div class="data-value">00:18:51</div>
 
+                    <div class="data-label">总时长</div>
 
+                </div>
 
+                <div class="data-item">
 
+                    <div class="data-value">07'19"</div>
 
+                    <div class="data-label">配速</div>
 
+                </div>
 
+                <div class="data-item">
 
+                    <div class="data-value">143</div>
 
+                    <div class="data-label">心率 (bpm)</div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 地图区域 -->
 
+            <div class="map-area">
 
+                游泳路线地图
 
+            </div>
 
+            
+            <!-- 详细数据 -->
 
+            <div class="detail-data">
 
+                <div class="detail-card">
 
+                    <div class="data-value">1,850</div>
 
+                    <div class="data-label">划水次数</div>
 
+                </div>
 
+                <div class="detail-card">
 
+                    <div class="data-value">28°C</div>
 
+                    <div class="data-label">水温</div>
 
+                </div>
 
+                <div class="detail-card">
 
+                    <div class="data-value">1.2m</div>
 
+                    <div class="data-label">平均深度</div>
 
+                </div>
 
+                <div class="detail-card">
 
+                    <div class="data-value">345</div>
 
+                    <div class="data-label">卡路里 (kcal)</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 底部区域 -->
 
+        <div class="footer">
 
+            <div class="source">数据来源: 高德地图 | 知乎&#64;阿辞</div>
 
+            <button class="action-btn">保存并分享</button>
 
+        </div>
 
+    </div>
 
+</body>
 
+</html>

+ 223 - 0
src/app/tab1/tab1.page.scss
View File 

@@ -0,0 +1,223 @@
 
+* {
 
+    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;
 
+    }
 
+}
 
+
 
+/* 电脑端适配 */
 
+@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;
 
+    }
 
+}

+ 5 - 4
src/app/tabs/tabs.page.html
View File 

@@ -1,18 +1,19 @@
 
 <ion-tabs>
 
+  
   <ion-tab-bar slot="bottom">
 
     <ion-tab-button tab="tab1" href="/tabs/tab1">
 
-      <ion-icon aria-hidden="true" name="triangle"></ion-icon>
 
-      <ion-label>Tab 1</ion-label>
 
+      <ion-icon aria-hidden="true" name="square"></ion-icon>
 
+      <ion-label>首页</ion-label>
 
     </ion-tab-button>
 
 
     <ion-tab-button tab="tab2" href="/tabs/tab2">
 
       <ion-icon aria-hidden="true" name="ellipse"></ion-icon>
 
-      <ion-label>Tab 2</ion-label>
 
+      <ion-label>发现</ion-label>
 
     </ion-tab-button>
 
 
     <ion-tab-button tab="tab3" href="/tabs/tab3">
 
       <ion-icon aria-hidden="true" name="square"></ion-icon>
 
-      <ion-label>Tab 3</ion-label>
 
+      <ion-label>我的</ion-label>
 
     </ion-tab-button>
 
   </ion-tab-bar>
 
 </ion-tabs>