fix: 样式修改

c148640e · qinjianhui · b5d76efc · c148640e
Commit c148640e authored Nov 02, 2022 by qinjianhui
Hide whitespace changes
Inline Side-by-side

Showing with 74 additions and 34 deletions

track-order.html
+74 -34

No files found.
--- a/track-order.html
+++ b/track-order.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
@@ -78,7 +77,7 @@
      }
      .order_wrap:not(:last-child) {
-        margin-bottom: 20px; 
+        margin-bottom: 20px;
      }
      .order_wrap + .order_wrap {
@@ -274,16 +273,24 @@
          max-width: 90%;
        }
+        .shippinp {
+          margin-bottom: 10px;
+        }
        .order-status .status {
          font-size: 16px;
        }
+        .logistics-details:not(:first-child) {
+          padding-top: 10px;
+        }
        .log-progress {
          margin-top: 10px;
          padding: 0;
-          padding-bottom: 60px;
+          padding-bottom: 40px;
+        }
+        .logistics:not(:first-child) {
+          margin-top: 10px;
        }
        .node-item {
          padding: 0 6px;
        }
@@ -292,7 +299,7 @@
          width: 20px;
          height: 20px;
        }
        .node-text {
          font-size: 10px;
          width: 200%;
@@ -300,15 +307,27 @@
        }
        .node-text div {
-          white-space: normal;
+          white-space: nowrap;
          word-break: break-all;
+          font-size: 14px;
+          width: 50px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .node-line {
+          height: 5px;
        }
        .content {
          display: flex;
-          gap: 40px;
+          gap: 20px;
          flex-direction: column-reverse;
        }
+        .order-number {
+          font-size: 18px;
+        }
      }
    </style>
  </head>
@@ -322,11 +341,7 @@
      </p>
      <div id="tracking_order_form" class="order-form">
        <p style="margin-top: 25px">
-          <input
+          <input placeholder="Enter email address" name="email" type="text" />
-            placeholder="Enter email address"
-            name="email"
-            type="text"
-          />
        </p>
        <p style="margin-top: 25px">
          <input
@@ -337,7 +352,7 @@
        </p>
        <p style="margin-top: 25px">
-          <button onclick="submit()" type="button">
+          <button type="button" id="track_button" onclick="submit">
            SUBMIT
            <img
              class="loading"
@@ -396,7 +411,7 @@
        )
      }
-      function setimgUrl(url, options = {}){
+      function setimgUrl(url, options = {}) {
        var clientWidth = document.body.clientWidth
        var dpi = Math.ceil(clientWidth / 1920) + 0.5
        var zImgPath = 'https://image.joshine.cn/'
@@ -420,11 +435,10 @@
          return zImgPath + url + (query ? '?' : '') + query
        } else {
          return filePath + url
-          }
+        }
      }
    </script>
    <script>
-      var loading = false
      function submit() {
        if (loading) return
        loading = true
@@ -464,8 +478,13 @@
                  orderInfo.innerHTML = `<span>Order</span>：<span>${
                    iterator.shopNumber || ''
                  }</span>`
-                  var statusList = iterator.statusList.filter((item) => { 
+                  var statusList = iterator.statusList.filter((item) => {
-                   if (item.key_stage !== 'InfoReceived' && item.key_stage !== 'PickedUp' && item.key_stage !== 'Returned' && item.key_stage !== 'Returning') {
+                    if (
+                      item.key_stage !== 'InfoReceived' &&
+                      item.key_stage !== 'PickedUp' &&
+                      item.key_stage !== 'Returned' &&
+                      item.key_stage !== 'Returning'
+                    ) {
                      return true
                    }
                  })
@@ -473,7 +492,7 @@
                    { key_stage: 'Processing' },
                    { key_stage: 'Departure' },
                    { key_stage: 'Arrival' },
-                    { key_stage: 'Delivered' }
+                    { key_stage: 'Delivered' },
                  ]
                  var statusMap = {}
                  statusList.forEach((item) => {
@@ -481,31 +500,43 @@
                    if (item.key_stage === 'OutForDelivery' && item.time_utc) {
                      progresses.splice(3, 0, { key_stage: item.key_stage })
                    }
-                    if (item.key_stage === 'AvailableForPickup' && item.time_utc) {
+                    if (
+                      item.key_stage === 'AvailableForPickup' &&
+                      item.time_utc
+                    ) {
                      progresses.splice(3, 0, { key_stage: item.key_stage })
                    }
                  })
                  if (progresses.length === 4) {
-                      progresses.splice(3, 0, {key_stage: 'AvailableForPickup'}, {key_stage: 'OutForDelivery'})
+                    progresses.splice(
+                      3,
+                      0,
+                      { key_stage: 'AvailableForPickup' },
+                      { key_stage: 'OutForDelivery' }
+                    )
                  }
                  progresses.forEach((item, i) => {
-                    progresses[i].time_utc = statusMap[item.key_stage] && formatDate1(new Date(statusMap[item.key_stage]))
+                    progresses[i].time_utc =
+                      statusMap[item.key_stage] &&
+                      formatDate1(new Date(statusMap[item.key_stage]))
                  })
                  var lastStatus = undefined
                  for (var i = progresses.length - 1; i >= 0; i--) {
                    if (progresses[i].time_utc) {
                      lastStatus = progresses[i]
-                      break;
+                      break
-                    } 
+                    }
                  }
                  div.appendChild(orderInfo)
                  var orderStatus = document.createElement('div')
                  orderStatus.classList.add('order-status')
                  orderStatus.innerHTML =
                    `<div class="status"><span>Status: ${
-                      exceptionTips[iterator.status.code] ? lastStatus.key_stage || '' : iterator.status.name || ''
+                      exceptionTips[iterator.status.code]
-                    }</span></div>` + 
+                        ? lastStatus.key_stage || ''
-                    `<div class="log-progress"></div>` + 
+                        : iterator.status.name || ''
+                    }</span></div>` +
+                    `<div class="log-progress"></div>` +
                    (exceptionTips[iterator.status.code]
                      ? `<div class="exception-tips">${
                          exceptionTips[iterator.status.code]
@@ -514,7 +545,9 @@
                  // 进度条
                  var logContainer = orderStatus.querySelector('.log-progress')
                  var progressHtml = ''
-                  const index = progresses.findIndex((item) => item.key_stage === lastStatus.key_stage)
+                  const index = progresses.findIndex(
+                    (item) => item.key_stage === lastStatus.key_stage
+                  )
                  for (var i = 0; i <= index; i++) {
                    progresses[i].show = true
                  }
@@ -595,16 +628,23 @@
                  logisticsTxt += `</div>`
                  logisticsTxt += `<div class="package">`
                  logisticsTxt += `<div class="shippinp">Package Info</div>`
-                  logisticsTxt +=  `<div class="package-contents">
+                  logisticsTxt += `<div class="package-contents">
                      <div style="margin-bottom: 10px">Package Contents</div>`
                  for (var c in iterator.productList) {
                    var l = iterator.productList[c]
                    logisticsTxt += `
                      <div class="package-info">
-                        <img style="width: 58px" src="${setimgUrl(l.warehouse_sku_image, { w: 60 })}"/>
+                        <img style="width: 58px" src="${setimgUrl(
+                          l.warehouse_sku_image,
+                          { w: 60 }
+                        )}"/>
                        <div class="package-msg">
-                          <div style="margin-bottom: 6px;font-family: fangsong;">${l.shop_sku_name || ''}</div>
+                          <div style="margin-bottom: 6px;font-family: fangsong;">${
-                          <span style="font-family: fangsong;">${l.shop_sku || ''}</span>
+                            l.shop_sku_name || ''
+                          }</div>
+                          <span style="font-family: fangsong;">${
+                            l.shop_sku || ''
+                          }</span>
                      </div>
                    </div>`
                  }
@@ -617,7 +657,7 @@
                          <div style="margin-bottom: 6px;">
                            <img style="width: 100px" src="https://res.17track.net/global-v2/imgs/logo/svg/full_owt_296x48.svg?v=3c2ed98eac"/>
                          </div>
-                          <a style="color: #649EFF;" href="https://t.17track.net/zh-cn#nums=${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a>
+                          <a style="color: #649EFF;" href="https://t.17track.net/en#nums==${iterator.trackingNumber}" target="_blank">${iterator.trackingNumber}</a>
                        </div>
                      </div>
                    </div>`