怕新闻

app/index/view/user/order.html

@@ -54,6 +54,11 @@
             </a>
         </div>
         <div class="pageConten">
+            <div class="ordersHead">
+                <div class="ohInfo">Order Number</div>
+                <div class="ohGoods">Goods Name</div>
+                <div class="ohTime">Create Time</div>
+            </div>
             <div class="orderContainer" id="orderContainer">
                 <!-- <div class="orderItem">
                                             <div class="orderImg">
@@ -142,11 +147,14 @@
                         console.log(item)
                         container.append(`
                         <div class="orderItem" data-id="${item.order_id}">
+                            <div class="orderNoDiv">
+                                 <p class="orderNo">${item.order_no}</p>
+                            </div>
                             <div class="orderImg">
                                 <img src="${item.goods[0].goods_image}" alt="">
                             </div>
                              <div class="orderInfo">
-                                <h2 class="orderTitle">${item.goods[0].goods_name}(${item.order_no})</h2>
+                                <h2 class="orderTitle">${item.goods[0].goods_name}</h2>
                                 <p class="orderTime">Created at:${item.create_time}</p>
                             </div>
                         </div>`);

public/assets/index/css/order.css

@@ -1,21 +1,36 @@
-body{
+body {
     background-color: #f2f6fa;
 }
-.pageContainer{
-    max-width: 19.2rem; 
+
+.pageContainer {
+    max-width: 19.2rem;
     margin: 0 auto;
     min-height: 100%;
 }
-.pageMain{
+
+.pageMain {
     display: flex;
 }
-.pageConten{
+
+.pageConten {
     flex: 1;
 }
-.orderContainer{
+
+.ordersHead {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: .24rem .36rem 0 .36rem;
+    font-size: .18rem;
+    color: #666666;
+
+}
+
+.orderContainer {
     padding: .24rem .36rem;
 }
-.orderItem{
+
+.orderItem {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -25,25 +40,29 @@ body{
     cursor: pointer;
     margin-bottom: .24rem;
 }
-.orderImg{
+
+.orderImg {
     width: .6rem;
     height: .6rem;
     border-radius: .04rem;
     overflow: hidden;
     background-color: #f8f8f8;
 }
-.orderImg img{
+
+.orderImg img {
     width: 100%;
     height: 100%;
 }
-.orderInfo{
+
+.orderInfo {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-left: .12rem;
 }
-.orderTitle{
+
+.orderNo {
     word-break: break-all;
     flex: 1;
     font-weight: 400;
@@ -54,37 +73,88 @@ body{
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
-    padding-right: .12rem;
+    padding-right: 0rem;
 }
-.orderTime{
+
+.orderTitle {
+    word-break: break-all;
+    flex: 1;
+    font-weight: 400;
+    font-size: .2rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    padding-right: .52rem;
+}
+
+.orderNoDiv {
+    word-break: break-all;
+    flex: 1;
+    font-weight: 400;
+    font-size: .2rem;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    padding-right: .02rem;
+}
+
+.orderTime {
     color: #999999;
     font-size: .16rem;
 }
-#loadingIndicator{
+
+#loadingIndicator {
     flex: 1;
     text-align: center;
     font-size: .16rem;
     color: #999999;
     padding-bottom: .24rem;
 }
+
 @media (max-width: 990px) {
-    .orderContainer{
+    .ordersHead {
+        font-size: .2rem;
+    }
+
+    .orderContainer {
         padding: .24rem;
     }
-    .orderImg{
+
+    .orderImg {
         width: .8rem;
         height: .8rem;
     }
-    .orderInfo{
+
+    .orderInfo {
         display: block;
         padding-left: .16rem;
     }
-    .orderTitle{
+
+    .orderNo {
         padding-right: 0;
         padding-bottom: .12rem;
         font-size: .22rem;
     }
-    .orderTime{
+
+    .orderNoDiv{
+        padding-right: 0.12rem;
+        padding-bottom: .12rem;
+        font-size: .22rem;
+    }
+
+    .orderTitle {
+        padding-right: 0.5rem;
+        padding-bottom: .12rem;
+        font-size: .22rem;
+    }
+
+    .orderTime {
         font-size: .18rem;
     }
 }