@nutui/nutui 3.1.10 → 3.1.11-beta.0

package/dist/packages/_es/Toast.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
@@ -306,8 +306,8 @@ const ToastFunction = {
       type: "loading"
     }));
   },
-  hide() {
-    clearToast();
+  hide(id) {
+    clearToast(id);
   },
   install(app) {
     app.use(Toast);

package/dist/packages/_es/Uploader.js

@@ -19,11 +19,11 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createCommentVNode, renderList, createElementVNode, createBlock, toDisplayString, createVNode } from "vue";
+import { reactive, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createCommentVNode, renderList, createVNode, createElementVNode, toDisplayString, createBlock, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 class UploadOptions {
@@ -61,7 +61,7 @@ class Uploader {
       xhr.onreadystatechange = () => {
         var _a2, _b;
         if (xhr.readyState === 4) {
-          if (xhr.status === options.xhrState) {
+          if (xhr.status == options.xhrState) {
             (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, xhr.responseText, options);
           } else {
             (_b = options.onFailure) == null ? void 0 : _b.call(options, xhr.responseText, options);
@@ -92,7 +92,7 @@ class Uploader {
       name: options.name,
       success(response) {
         var _a2, _b;
-        if (options.xhrState === response.statusCode) {
+        if (options.xhrState == response.statusCode) {
           (_a2 = options.onSuccess) == null ? void 0 : _a2.call(options, response, options);
         } else {
           (_b = options.onFailure) == null ? void 0 : _b.call(options, response, options);
@@ -114,10 +114,12 @@ const { componentName, create } = createComponent("uploader");
 class FileItem {
   constructor() {
     __publicField(this, "status", "ready");
+    __publicField(this, "message", "\u51C6\u5907\u5B8C\u6210");
     __publicField(this, "uid", new Date().getTime().toString());
     __publicField(this, "name");
     __publicField(this, "url");
     __publicField(this, "type");
+    __publicField(this, "percentage", 0);
     __publicField(this, "formData", new FormData());
   }
 }
@@ -128,12 +130,13 @@ const _sfc_main = create({
     timeout: { type: [Number, String], default: 1e3 * 30 },
     fileList: { type: Array, default: () => [] },
     isPreview: { type: Boolean, default: true },
+    listType: { type: String, default: "picture" },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: "post" },
     capture: { type: Boolean, default: false },
     maximize: { type: [Number, String], default: Number.MAX_VALUE },
     maximum: { type: [Number, String], default: 1 },
-    clearInput: { type: Boolean, default: false },
+    clearInput: { type: Boolean, default: true },
     accept: { type: String, default: "*" },
     headers: { type: Object, default: {} },
     data: { type: Object, default: {} },
@@ -156,7 +159,17 @@ const _sfc_main = create({
     },
     onChange: { type: Function }
   },
-  emits: ["start", "progress", "oversize", "success", "failure", "change", "delete", "update:fileList"],
+  emits: [
+    "start",
+    "progress",
+    "oversize",
+    "success",
+    "failure",
+    "change",
+    "delete",
+    "update:fileList",
+    "file-item-click"
+  ],
   setup(props, { emit }) {
     const fileList = reactive(props.fileList);
     let uploadQueue = [];
@@ -169,12 +182,12 @@ const _sfc_main = create({
     const clearInput = (el) => {
       el.value = "";
     };
+    const fileItemClick = (fileItem) => {
+      emit("file-item-click", { fileItem });
+    };
     const executeUpload = (fileItem, index2) => {
       const uploadOption = new UploadOptions();
       uploadOption.url = props.url;
-      for (const [key, value] of Object.entries(props.data)) {
-        fileItem.formData.append(key, value);
-      }
       uploadOption.formData = fileItem.formData;
       uploadOption.timeout = props.timeout * 1;
       uploadOption.method = props.method;
@@ -183,26 +196,33 @@ const _sfc_main = create({
       uploadOption.withCredentials = props.withCredentials;
       uploadOption.onStart = (option) => {
         fileItem.status = "ready";
+        fileItem.message = "\u51C6\u5907\u4E0A\u4F20";
         clearUploadQueue(index2);
         emit("start", option);
       };
-      uploadOption.onProgress = (e, option) => {
+      uploadOption.onProgress = (event, option) => {
         fileItem.status = "uploading";
-        emit("progress", { e, option });
+        fileItem.message = "\u4E0A\u4F20\u4E2D";
+        fileItem.percentage = (event.loaded / event.total * 100).toFixed(0);
+        emit("progress", { event, option, percentage: fileItem.percentage });
       };
       uploadOption.onSuccess = (responseText, option) => {
         fileItem.status = "success";
+        fileItem.message = "\u4E0A\u4F20\u6210\u529F";
         emit("success", {
           responseText,
-          option
+          option,
+          fileItem
         });
         emit("update:fileList", fileList);
       };
       uploadOption.onFailure = (responseText, option) => {
         fileItem.status = "error";
+        fileItem.message = "\u4E0A\u4F20\u5931\u8D25";
         emit("failure", {
           responseText,
-          option
+          option,
+          fileItem
         });
       };
       let task = new Uploader(uploadOption);
@@ -229,6 +249,9 @@ const _sfc_main = create({
     const readFile = (files) => {
       files.forEach((file, index2) => {
         const formData = new FormData();
+        for (const [key, value] of Object.entries(props.data)) {
+          formData.append(key, value);
+        }
         formData.append(props.name, file);
         const fileItem = reactive(new FileItem());
         fileItem.name = file.name;
@@ -308,6 +331,7 @@ const _sfc_main = create({
       onDelete,
       fileList,
       classes,
+      fileItemClick,
       clearUploadQueue,
       submit
     };
@@ -319,20 +343,32 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["accept", "multiple", "name", "disabled"];
 const _hoisted_3 = ["accept", "multiple", "name", "disabled"];
-const _hoisted_4 = { class: "nut-uploader__preview-img" };
-const _hoisted_5 = ["src"];
-const _hoisted_6 = {
-  key: 2,
-  class: "tips"
+const _hoisted_4 = {
+  key: 0,
+  class: "nut-uploader__preview-img"
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   key: 0,
-  class: "nut-uploader__upload"
+  class: "nut-uploader__preview__progress"
+};
+const _hoisted_6 = { class: "nut-uploader__preview__progress__msg" };
+const _hoisted_7 = ["onClick", "src"];
+const _hoisted_8 = {
+  key: 3,
+  class: "nut-uploader__preview-img__file"
+};
+const _hoisted_9 = ["onClick"];
+const _hoisted_10 = { class: "tips" };
+const _hoisted_11 = {
+  key: 1,
+  class: "nut-uploader__preview-list"
 };
-const _hoisted_8 = ["accept", "multiple", "name", "disabled"];
-const _hoisted_9 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_12 = ["onClick"];
+const _hoisted_13 = ["accept", "multiple", "name", "disabled"];
+const _hoisted_14 = ["accept", "multiple", "name", "disabled"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
+  const _component_nut_progress = resolveComponent("nut-progress");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
@@ -360,57 +396,99 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onChange: _cache[1] || (_cache[1] = (...args) => _ctx.onChange && _ctx.onChange(...args))
         }, null, 40, _hoisted_3))
       ], 64)) : createCommentVNode("", true)
-    ])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index2) => {
-        return openBlock(), createElementBlock("view", {
-          class: "nut-uploader__preview",
-          key: item.uid
-        }, [
-          createElementVNode("view", _hoisted_4, [
-            _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
-              key: 0,
-              color: "rgba(0,0,0,0.6)",
-              onClick: ($event) => _ctx.onDelete(item, index2),
-              class: "close",
-              name: "circle-close"
-            }, null, 8, ["onClick"])) : createCommentVNode("", true),
-            item.type.includes("image") && item.url ? (openBlock(), createElementBlock("img", {
-              key: 1,
-              class: "nut-uploader__preview-img__c",
-              src: item.url
-            }, null, 8, _hoisted_5)) : createCommentVNode("", true),
-            item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_6, toDisplayString(item.status), 1)) : createCommentVNode("", true)
-          ])
-        ]);
-      }), 128)),
-      _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", _hoisted_7, [
-        createVNode(_component_nut_icon, {
-          size: _ctx.uploadIconSize,
-          color: "#808080",
-          name: _ctx.uploadIcon
-        }, null, 8, ["size", "name"]),
-        _ctx.capture ? (openBlock(), createElementBlock("input", {
-          key: 0,
-          class: "nut-uploader__input",
-          type: "file",
-          capture: "camera",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_8)) : (openBlock(), createElementBlock("input", {
-          key: 1,
-          class: "nut-uploader__input",
-          type: "file",
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          name: _ctx.name,
-          disabled: _ctx.disabled,
-          onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
-        }, null, 40, _hoisted_9))
-      ])) : createCommentVNode("", true)
-    ], 64))
+    ])) : createCommentVNode("", true),
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.fileList, (item, index2) => {
+      return openBlock(), createElementBlock("view", {
+        class: normalizeClass(["nut-uploader__preview", [_ctx.listType]]),
+        key: item.uid
+      }, [
+        _ctx.listType == "picture" && !_ctx.$slots.default ? (openBlock(), createElementBlock("view", _hoisted_4, [
+          item.status != "success" ? (openBlock(), createElementBlock("view", _hoisted_5, [
+            createVNode(_component_nut_icon, {
+              color: "#fff",
+              name: item.status == "error" ? "failure" : "loading"
+            }, null, 8, ["name"]),
+            createElementVNode("view", _hoisted_6, toDisplayString(item.message), 1)
+          ])) : createCommentVNode("", true),
+          _ctx.isDeletable ? (openBlock(), createBlock(_component_nut_icon, {
+            key: 1,
+            color: "rgba(0,0,0,0.6)",
+            onClick: ($event) => _ctx.onDelete(item, index2),
+            class: "close",
+            name: "failure"
+          }, null, 8, ["onClick"])) : createCommentVNode("", true),
+          item.type.includes("image") && item.url ? (openBlock(), createElementBlock("img", {
+            key: 2,
+            class: "nut-uploader__preview-img__c",
+            onClick: ($event) => _ctx.fileItemClick(item),
+            src: item.url
+          }, null, 8, _hoisted_7)) : (openBlock(), createElementBlock("view", _hoisted_8, [
+            createElementVNode("view", {
+              onClick: ($event) => _ctx.fileItemClick(item),
+              class: "nut-uploader__preview-img__file__name"
+            }, [
+              createVNode(_component_nut_icon, {
+                color: "#808080",
+                name: "link"
+              }),
+              createTextVNode("\xA0" + toDisplayString(item.name), 1)
+            ], 8, _hoisted_9)
+          ])),
+          createElementVNode("view", _hoisted_10, toDisplayString(item.name), 1)
+        ])) : _ctx.listType == "list" ? (openBlock(), createElementBlock("view", _hoisted_11, [
+          createElementVNode("view", {
+            onClick: ($event) => _ctx.fileItemClick(item),
+            class: normalizeClass(["nut-uploader__preview-img__file__name", [item.status]])
+          }, [
+            createVNode(_component_nut_icon, { name: "link" }),
+            createTextVNode("\xA0" + toDisplayString(item.name), 1)
+          ], 10, _hoisted_12),
+          createVNode(_component_nut_icon, {
+            class: "nut-uploader__preview-img__file__del",
+            onClick: ($event) => _ctx.onDelete(item, index2),
+            color: "#808080",
+            name: "del"
+          }, null, 8, ["onClick"]),
+          item.status == "uploading" ? (openBlock(), createBlock(_component_nut_progress, {
+            key: 0,
+            size: "small",
+            percentage: item.percentage,
+            "stroke-color": "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+            "show-text": false
+          }, null, 8, ["percentage"])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true)
+      ], 2);
+    }), 128)),
+    _ctx.listType == "picture" && !_ctx.$slots.default && _ctx.maximum - _ctx.fileList.length ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: normalizeClass(["nut-uploader__upload", [_ctx.listType]])
+    }, [
+      createVNode(_component_nut_icon, {
+        size: _ctx.uploadIconSize,
+        color: "#808080",
+        name: _ctx.uploadIcon
+      }, null, 8, ["size", "name"]),
+      _ctx.capture ? (openBlock(), createElementBlock("input", {
+        key: 0,
+        class: "nut-uploader__input",
+        type: "file",
+        capture: "camera",
+        accept: _ctx.accept,
+        multiple: _ctx.multiple,
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+      }, null, 40, _hoisted_13)) : (openBlock(), createElementBlock("input", {
+        key: 1,
+        class: "nut-uploader__input",
+        type: "file",
+        accept: _ctx.accept,
+        multiple: _ctx.multiple,
+        name: _ctx.name,
+        disabled: _ctx.disabled,
+        onChange: _cache[3] || (_cache[3] = (...args) => _ctx.onChange && _ctx.onChange(...args))
+      }, null, 40, _hoisted_14))
+    ], 2)) : createCommentVNode("", true)
   ], 2);
 }
 var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/dist/packages/_es/Video.js

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/component.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/index2.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/plugin-vue_export-helper.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/pxCheck.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/_es/raf.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.1.10 Fri Nov 05 2021 19:52:49 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.11-beta.0 Sat Nov 13 2021 21:43:55 GMT+0800 (中国标准时间)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/packages/button/index.scss

@@ -14,6 +14,9 @@
   appearance: none;
   user-select: none;
   touch-action: manipulation;
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
   .text {
     margin-left: 5px;
   }

package/dist/packages/progress/index.scss

@@ -85,6 +85,7 @@
     padding: 0 5px;
     font-size: 13px;
     line-height: 1;
+    min-width: 35px;
   }
   .nut-progress-insidetext {
     padding: 3px 5px 3px 6px;
@@ -93,6 +94,7 @@
     position: absolute;
     transition: all 0.4s;
     top: -42%;
+    min-width: 0px;
   }
   .nut-icon-success,
   .nut-icon-fail {

package/dist/packages/radio/index.scss

@@ -1,23 +1,51 @@
 .nut-radio {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+  }
+
   &--reverse {
-    flex-direction: row-reverse;
     .nut-radio__label {
       margin-right: 15px;
       margin-left: 0;
     }
   }
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 18px;
+    font-size: 12px;
+    background: #f6f7f9;
+    border-radius: 15px;
+    color: $radio-label-font-color;
+    box-sizing: border-box;
+    &--active {
+      background: $radio-label-button-background;
+      color: $radio-label-font-active-color;
+      border: 1px solid $radio-label-button-border-color;
+    }
+    &--disabled {
+      color: $radio-label-disable-color;
+      border: none;
+    }
+  }
+
   &__label {
     margin-left: 15px;
-    font-size: 16px;
-    color: $radio-label-color;
+    font-size: 14px;
+    color: $radio-label-font-color;
     &--disabled {
       color: $radio-label-disable-color;
     }
   }
+
   &__icon {
-    color: $primary-color;
+    color: $radio-label-font-active-color;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }

package/dist/packages/radiogroup/index.scss

@@ -1,2 +1,22 @@
 .nut-radiogroup {
+  display: inline-block;
+  .nut-radio {
+    margin-bottom: 5px;
+  }
+  &--vertical {
+  }
+  &--horizontal {
+    .nut-radio {
+      display: inline-flex;
+      margin-right: 10px;
+      &--round {
+        .nut-radio__label {
+          margin: 0 6px;
+        }
+      }
+      &--button {
+        // ...
+      }
+    }
+  }
 }

package/dist/packages/sku/index.scss

@@ -0,0 +1,147 @@
+.nut-sku {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 0px;
+  background: $white;
+  &-header {
+    height: 100px;
+    display: flex;
+    flex-shrink: 0;
+    margin-top: 18px;
+    padding: 0 18px;
+    > img {
+      width: 100px;
+      height: 100px;
+      flex-shrink: 0;
+      margin-right: 12px;
+    }
+    &-right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      &-extra {
+        font-size: 12px;
+        color: $text-color;
+      }
+    }
+  }
+  &-content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    margin-top: 24px;
+    padding: 0 18px;
+  }
+  &-select {
+    &-item {
+      display: flex;
+      flex-direction: column;
+      &-title {
+        height: 13px;
+        font-weight: bold;
+        font-size: 13px;
+        color: $black;
+        margin-bottom: 18px;
+      }
+      &-skus {
+        display: flex;
+        flex-wrap: wrap;
+        &-sku {
+          margin-right: 12px;
+          height: 30px;
+          line-height: 30px;
+          padding: 0 18px;
+          border-radius: 15px;
+          font-size: 11px;
+          color: $black;
+          flex-shrink: 0;
+          margin-bottom: 12px;
+          background: rgba(242, 242, 242, 1);
+          border: 1px solid rgba(242, 242, 242, 1);
+
+          &.active {
+            background: rgba(252, 237, 235, 1);
+            border: $sku-item-border;
+            color: $primary-color;
+          }
+          &.disable {
+            color: $text-color;
+            text-decoration: $sku-item-disable-line;
+          }
+        }
+      }
+    }
+  }
+  &-stepper {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px 0 30px;
+    &-title {
+      font-weight: bold;
+      font-size: 13px;
+      color: $black;
+      margin-right: 12px;
+    }
+    &-limit {
+      flex: 1;
+      display: flex;
+      align-items: center;
+
+      font-size: 12px;
+      color: $text-color;
+    }
+    &-count {
+      display: flex;
+      align-items: center;
+      &-lowestBuy {
+        font-size: 12px;
+        color: $primary-color;
+      }
+    }
+  }
+  &-operate {
+    width: 100%;
+    &-desc {
+      display: block;
+      width: 100%;
+      padding: 10px 0;
+      text-align: center;
+      background: #fbf9da;
+      color: #de6a1c;
+      font-size: 12px;
+    }
+    &-btn {
+      height: 54px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: $white;
+      text-align: center;
+      padding: 0 18px;
+      box-sizing: border-box;
+      &-item {
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        margin-right: 18px;
+        background: $sku-opetate-bg-default;
+        border-radius: 21px;
+        font-size: 15px;
+        color: $white;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      &-buy {
+        background: $sku-opetate-bg-buy;
+      }
+    }
+  }
+}