feat：移动端适配

41dcc65a · qinjianhui · 4d233c82 · 41dcc65a
Commit 41dcc65a authored Nov 01, 2022 by qinjianhui
Show whitespace changes
Inline Side-by-side

Showing with 47 additions and 4 deletions

track-order.html
+47 -4

No files found.
--- a/track-order.html
+++ b/track-order.html
+
 <!DOCTYPE html>
 <html lang="en">
  <head>
@@ -256,7 +257,7 @@
        align-items: center;
      }

-      .node-text span {
+      .node-text div {
        white-space: nowrap;
      }

@@ -267,6 +268,48 @@
      .exception-tips {
        color: red;
      }
+
+      @media screen and (max-width: 800px) {
+        .form {
+          max-width: 90%;
+        }
+
+        .order-status .status {
+          font-size: 16px;
+        }
+
+        .log-progress {
+          margin-top: 10px;
+          padding: 0;
+          padding-bottom: 60px;
+        }
+
+        .node-item {
+          padding: 0 6px;
+        }
+
+        .node-icon {
+          width: 20px;
+          height: 20px;
+        }
+        
+        .node-text {
+          font-size: 10px;
+          width: 200%;
+          transform: translateX(-50%) scale(0.7);
+        }
+
+        .node-text div {
+          white-space: normal;
+          word-break: break-all;
+        }
+
+        .content {
+          display: flex;
+          gap: 40px;
+          flex-direction: column-reverse;
+        }
+      }
    </style>
  </head>

@@ -488,11 +531,11 @@
                      '<div class="node-item' +
                      (p.time_utc || progresses[i].show ? ' active' : '') +
                      '"><div class="node-icon"></div><div class="node-text">' +
-                      '<span>' +
+                      '<div>' +
                      progresses[i].key_stage +
-                      '</span>' +
+                      '</div>' +
                      (progresses[i].time_utc
-                        ? '<span>' + progresses[i].time_utc + '</span>'
+                        ? '<div>' + progresses[i].time_utc + '</div>'
                        : '') +
                      '</div></div>'
                  }