tplus-components-touch 1.25.10 → 1.26.1

package/dist/components/product/index.less

@@ -1,354 +1,354 @@
-@activeColor: #FF8C25;
-.app {
-  .view {
-    width: 100%;
-  }
-}
-.product {
-  user-select: none;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: #FFF;
-
-  // 键盘 --- start ---
-  .product-keyboard {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transition: height 0.2s;
-    overflow: hidden;
-    color: #FFF;
-    z-index: 1300;
-  }
-  .product-keyboard-show {
-    height: 223px;
-    padding-top: 12px;
-    box-sizing: content-box;
-  }
-  .product-keyboard-hide {
-    height: 0;
-  }
-  // 键盘 --- end ---
-
-  .keyboard {
-    .u-input-group-btn {
-      width: 20px;
-      line-height: 34px;
-      right: 12px!important;
-      .product-jianpan {
-        color: #666;
-        font-size: 20px;
-      }
-    }
-    input {
-      background: #F4F4F4;
-      border-color: #999999!important;
-      &:focus {
-        border-color: #999999!important;
-      }
-    }
-  }
-  .hidden {
-    display: none!important;
-  }
-  div, span, input {
-    box-sizing: border-box;
-  }
-  .product-left {
-    width: 100%;
-    height: 100%;
-    padding-right: 96px;
-    display: flex;
-    flex-direction: column;
-    .title {
-      height: 57px;
-      display: flex;
-      border-bottom: 1px solid #E6E6EB;
-      .search {
-        height: 32px;
-        width: 210px;
-        margin-top: 12px;
-        margin-left: 16px;
-        .keyboard {
-          width: 100%;
-        }
-      }
-      .second-level {
-        width: calc(100% - 208px);
-        flex: 1;
-        margin-left: 10px;
-        background: #FFF;
-        padding: 0 67px 0 60px;
-        overflow: hidden;
-        position: relative;
-        .second-item-active {
-          color: @activeColor;
-          border-bottom: 2px solid @activeColor;
-        }
-        .swiper-container-second {
-          height: 100%;
-          overflow: hidden;
-        }
-        .swiper-button {
-          background-image: inherit;
-          text-align: center;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          height: 100%;
-          top: 22px;
-          line-height: 55px;
-          .button-icon {}
-        }
-        .swiper-button-prev {
-          left: 15px;
-          z-index: 1;
-        }
-        .swiper-button-next {
-          right: 20px;
-          z-index: 1;
-        }
-        .second-item {
-          font-size: 14px;
-          width: auto;
-          padding: 0 10px;
-          cursor: pointer;
-          text-align: center;
-          /* Center slide text vertically */
-          display: -webkit-box;
-          display: -ms-flexbox;
-          display: -webkit-flex;
-          display: flex;
-          -webkit-box-pack: center;
-          -ms-flex-pack: center;
-          -webkit-justify-content: center;
-          justify-content: center;
-          -webkit-box-align: center;
-          -ms-flex-align: center;
-          -webkit-align-items: center;
-          align-items: center;
-        }
-      }
-    }
-    .content {
-      flex: 1;
-      display: flex;
-      overflow: hidden;
-      .detail-box-ouside {
-        flex: 1;
-        padding: 16px 0px 0;
-        .detail-box {
-          width: 100%;
-          height: 100%;
-          overflow: auto;
-          padding: 0 6px 0;
-        }
-        .detail-box-1024 {
-          height: calc(~'100% - 45px')!important;
-        }
-        .amount {
-          height: 44px;
-          line-height: 44px;
-          font-size: 16px;
-          border-top: 1px solid #C8C8CD;
-          color: #474364;
-          .amount-label {
-            vertical-align: middle;
-            margin-left: 12px;
-          }
-          .amount-money {
-            vertical-align: middle;
-            font-size: 32px;
-            color: #FF5E3F;
-            margin-left: 10px;
-          }
-        }
-      }
-    }
-
-  }
-  .product-right {
-    width: 96px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    box-shadow: -3px 0px 5px #CCC;
-    .first-level {
-      width: 96px;
-      background: #FAFAFA;
-      padding: 15px 0;
-      height: 100%;
-      overflow: hidden;
-      .first-item {
-        text-align: center;
-        height: auto;
-        padding: 9px 0;
-        cursor: pointer;
-        font-size: 14px;
-      }
-      .first-item-active {
-        background: #FFF;
-        color: @activeColor;
-      }
-    }
-  }
-
-  .swiper-container-first,
-  .swiper-container-product {
-    height: 100%;
-    .swiper-wrapper {
-      height: 100%;
-    }
-  }
-  .clearfix {
-    zoom: 1
-  }
-  .clearfix:after,
-  .clearfix:before {
-    content: " ";
-    display: table
-  }
-  .clearfix:after {
-    clear: both;
-    visibility: hidden;
-    font-size: 0;
-    height: 0
-  }
-
-  .text-1line-overflow {
-    overflow: hidden;
-    word-break: keep-all;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.detail-content {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  .detail {
-    width: 143px;
-    border-radius: 4px;
-    overflow: hidden;
-    padding: 0 10px;
-    margin: 0;
-    margin-bottom: 20px;
-    cursor: pointer;
-    .detail-img {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      i {
-        margin: 0 auto;
-        color: #999;
-      }
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .detail-content-box {
-      background: rgba(255,140,37,0.20);
-      border-radius: 4px;
-      padding: 8px;
-    }
-    .detail-name {
-      color: #474364;
-      height: 48px;
-      line-height: 24px;
-      font-size: 16px;
-      word-wrap: break-word;
-      // margin-top: 10px;
-    }
-    .marginTop10 {
-      margin-top: 10px;
-    }
-    .detail-code {
-      color: #75787B;
-      font-size: 14px;
-    }
-    .detail-specification {
-      height: 40px;
-      background: rgba(255, 140, 37, 0.2);
-      border-radius: 2px;
-      padding: 3px 5px;
-      box-sizing: border-box;
-      font-size: 12px;
-      color: #333;
-    }
-    .detail-specification-withimg {
-      background: rgb(244, 244, 244);
-    }
-    .detail-specification-big {
-      height: 20px;
-    }
-    .detail-specification-small {
-      height: 40px;
-    }
-    .detail-price {
-      color: #FF5E3F;
-      font-size: 16px;
-      height: 24px;
-    }
-    .lh-48 {
-      line-height: 48px;
-    }
-  }
-  .detail-small {
-    width: 96px;
-    .detail-img {
-      width: 76px;
-      height: 76px;
-      i {
-        font-size: 24px;
-      }
-    }
-  }
-  .detail-middle {
-    width: 116px;
-    .detail-img {
-      width: 96px;
-      height: 96px;
-      i {
-        font-size: 32px;
-      }
-    }
-  }
-  .detail-big {
-    width: 170px;
-    .detail-img {
-      width: 150px;
-      height: 150px;
-      i {
-        font-size: 56px;
-      }
-    }
-  }
-  .text-2line-overflow {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    word-break: break-all;
-  }
-  .detail-bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-  }
-  .display-none {
-    display: none;
-  }
-}
-.card-list-wrapper{
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
+@activeColor: #FF8C25;
+.app {
+  .view {
+    width: 100%;
+  }
+}
+.product {
+  user-select: none;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #FFF;
+
+  // 键盘 --- start ---
+  .product-keyboard {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: height 0.2s;
+    overflow: hidden;
+    color: #FFF;
+    z-index: 1300;
+  }
+  .product-keyboard-show {
+    height: 223px;
+    padding-top: 12px;
+    box-sizing: content-box;
+  }
+  .product-keyboard-hide {
+    height: 0;
+  }
+  // 键盘 --- end ---
+
+  .keyboard {
+    .u-input-group-btn {
+      width: 20px;
+      line-height: 34px;
+      right: 12px!important;
+      .product-jianpan {
+        color: #666;
+        font-size: 20px;
+      }
+    }
+    input {
+      background: #F4F4F4;
+      border-color: #999999!important;
+      &:focus {
+        border-color: #999999!important;
+      }
+    }
+  }
+  .hidden {
+    display: none!important;
+  }
+  div, span, input {
+    box-sizing: border-box;
+  }
+  .product-left {
+    width: 100%;
+    height: 100%;
+    padding-right: 96px;
+    display: flex;
+    flex-direction: column;
+    .title {
+      height: 57px;
+      display: flex;
+      border-bottom: 1px solid #E6E6EB;
+      .search {
+        height: 32px;
+        width: 210px;
+        margin-top: 12px;
+        margin-left: 16px;
+        .keyboard {
+          width: 100%;
+        }
+      }
+      .second-level {
+        width: calc(100% - 208px);
+        flex: 1;
+        margin-left: 10px;
+        background: #FFF;
+        padding: 0 67px 0 60px;
+        overflow: hidden;
+        position: relative;
+        .second-item-active {
+          color: @activeColor;
+          border-bottom: 2px solid @activeColor;
+        }
+        .swiper-container-second {
+          height: 100%;
+          overflow: hidden;
+        }
+        .swiper-button {
+          background-image: inherit;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          height: 100%;
+          top: 22px;
+          line-height: 55px;
+          .button-icon {}
+        }
+        .swiper-button-prev {
+          left: 15px;
+          z-index: 1;
+        }
+        .swiper-button-next {
+          right: 20px;
+          z-index: 1;
+        }
+        .second-item {
+          font-size: 14px;
+          width: auto;
+          padding: 0 10px;
+          cursor: pointer;
+          text-align: center;
+          /* Center slide text vertically */
+          display: -webkit-box;
+          display: -ms-flexbox;
+          display: -webkit-flex;
+          display: flex;
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          -webkit-justify-content: center;
+          justify-content: center;
+          -webkit-box-align: center;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
+        }
+      }
+    }
+    .content {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+      .detail-box-ouside {
+        flex: 1;
+        padding: 16px 0px 0;
+        .detail-box {
+          width: 100%;
+          height: 100%;
+          overflow: auto;
+          padding: 0 6px 0;
+        }
+        .detail-box-1024 {
+          height: calc(~'100% - 45px')!important;
+        }
+        .amount {
+          height: 44px;
+          line-height: 44px;
+          font-size: 16px;
+          border-top: 1px solid #C8C8CD;
+          color: #474364;
+          .amount-label {
+            vertical-align: middle;
+            margin-left: 12px;
+          }
+          .amount-money {
+            vertical-align: middle;
+            font-size: 32px;
+            color: #FF5E3F;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+
+  }
+  .product-right {
+    width: 96px;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    box-shadow: -3px 0px 5px #CCC;
+    .first-level {
+      width: 96px;
+      background: #FAFAFA;
+      padding: 15px 0;
+      height: 100%;
+      overflow: hidden;
+      .first-item {
+        text-align: center;
+        height: auto;
+        padding: 9px 0;
+        cursor: pointer;
+        font-size: 14px;
+      }
+      .first-item-active {
+        background: #FFF;
+        color: @activeColor;
+      }
+    }
+  }
+
+  .swiper-container-first,
+  .swiper-container-product {
+    height: 100%;
+    .swiper-wrapper {
+      height: 100%;
+    }
+  }
+  .clearfix {
+    zoom: 1
+  }
+  .clearfix:after,
+  .clearfix:before {
+    content: " ";
+    display: table
+  }
+  .clearfix:after {
+    clear: both;
+    visibility: hidden;
+    font-size: 0;
+    height: 0
+  }
+
+  .text-1line-overflow {
+    overflow: hidden;
+    word-break: keep-all;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.detail-content {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  .detail {
+    width: 143px;
+    border-radius: 4px;
+    overflow: hidden;
+    padding: 0 10px;
+    margin: 0;
+    margin-bottom: 20px;
+    cursor: pointer;
+    .detail-img {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      i {
+        margin: 0 auto;
+        color: #999;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .detail-content-box {
+      background: rgba(255,140,37,0.20);
+      border-radius: 4px;
+      padding: 8px;
+    }
+    .detail-name {
+      color: #474364;
+      height: 48px;
+      line-height: 24px;
+      font-size: 16px;
+      word-wrap: break-word;
+      // margin-top: 10px;
+    }
+    .marginTop10 {
+      margin-top: 10px;
+    }
+    .detail-code {
+      color: #75787B;
+      font-size: 14px;
+    }
+    .detail-specification {
+      height: 40px;
+      background: rgba(255, 140, 37, 0.2);
+      border-radius: 2px;
+      padding: 3px 5px;
+      box-sizing: border-box;
+      font-size: 12px;
+      color: #333;
+    }
+    .detail-specification-withimg {
+      background: rgb(244, 244, 244);
+    }
+    .detail-specification-big {
+      height: 20px;
+    }
+    .detail-specification-small {
+      height: 40px;
+    }
+    .detail-price {
+      color: #FF5E3F;
+      font-size: 16px;
+      height: 24px;
+    }
+    .lh-48 {
+      line-height: 48px;
+    }
+  }
+  .detail-small {
+    width: 96px;
+    .detail-img {
+      width: 76px;
+      height: 76px;
+      i {
+        font-size: 24px;
+      }
+    }
+  }
+  .detail-middle {
+    width: 116px;
+    .detail-img {
+      width: 96px;
+      height: 96px;
+      i {
+        font-size: 32px;
+      }
+    }
+  }
+  .detail-big {
+    width: 170px;
+    .detail-img {
+      width: 150px;
+      height: 150px;
+      i {
+        font-size: 56px;
+      }
+    }
+  }
+  .text-2line-overflow {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    word-break: break-all;
+  }
+  .detail-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+  }
+  .display-none {
+    display: none;
+  }
+}
+.card-list-wrapper{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}