diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less
index 5f81e6c6..574a806e 100644
--- a/packages/goods-action-button/index.less
+++ b/packages/goods-action-button/index.less
@@ -1,3 +1,41 @@
+@import '../common/style/var.less';
+
 :host {
   flex: 1;
 }
+
+.van-goods-action-button {
+  height: 36px !important;
+  font-weight: 500 !important;
+  font-size: @font-size-md !important;
+  line-height: 34px !important;
+  border: none !important;
+
+  &--first {
+    display: block !important;
+    width: auto !important;
+    margin-left: 5px;
+    border-top-left-radius: 18px !important;
+    border-bottom-left-radius: 18px !important;
+  }
+
+  &--last {
+    display: block !important;
+    width: auto !important;
+    margin-right: 5px;
+    border-top-right-radius: 18px !important;
+    border-bottom-right-radius: 18px !important;
+  }
+
+  &--warning {
+    background: linear-gradient(to right, #ffd01e, #ff8917);
+  }
+
+  &--danger {
+    background: linear-gradient(to right, #ff6034, #ee0a24);
+  }
+
+  @media (max-width: 321px) {
+    font-size: 13px;
+  }
+}
diff --git a/packages/goods-action-button/index.ts b/packages/goods-action-button/index.ts
index 9112c122..b59ed951 100644
--- a/packages/goods-action-button/index.ts
+++ b/packages/goods-action-button/index.ts
@@ -6,7 +6,13 @@ import { Weapp } from 'definitions/weapp';
 
 VantComponent({
   mixins: [link, button, openType],
-
+  relation: {
+    type: 'ancestor',
+    name: 'goods-action',
+    linked(parent) {
+      this.parent = parent;
+    }
+  },
   props: {
     text: String,
     color: String,
@@ -18,10 +24,31 @@ VantComponent({
     }
   },
 
+  mounted: function() {
+    this.updateStyle();
+  },
+
   methods: {
     onClick(event: Weapp.Event) {
       this.$emit('click', event.detail);
       this.jumpLink();
+    },
+    updateStyle() {
+      const parent = this.parent;
+      const { children = [] } = parent;
+      const index = children.indexOf(this);
+      const length = children.length;
+      let isFirst = false, isLast = false;
+      if ( index === 0 ) {
+        isFirst = true;
+      }
+      if (index === length - 1) {
+        isLast = true;
+      }
+      this.setData({
+        isFirst,
+        isLast
+      });
     }
   }
 });
diff --git a/packages/goods-action-button/index.wxml b/packages/goods-action-button/index.wxml
index 052b9210..366b8cd7 100644
--- a/packages/goods-action-button/index.wxml
+++ b/packages/goods-action-button/index.wxml
@@ -1,3 +1,4 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
 <van-button
   square
   id="{{ id }}"
@@ -8,7 +9,7 @@
   loading="{{ loading }}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"
-  custom-class="custom-class"
+  custom-class="{{ utils.bem('goods-action-button', [type, { first: isFirst, last: isLast }]) }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
   app-parameter="{{ appParameter }}"
diff --git a/packages/goods-action-icon/index.wxml b/packages/goods-action-icon/index.wxml
index a3972b22..f3f00522 100644
--- a/packages/goods-action-icon/index.wxml
+++ b/packages/goods-action-icon/index.wxml
@@ -22,7 +22,7 @@
   bindgetphonenumber="bindGetPhoneNumber"
   bindlaunchapp="bindLaunchApp"
 >
-  <view class="van-goods-action-icon__content van-hairline--right">
+  <view class="van-goods-action-icon__content">
     <van-icon
       wx:if="{{ icon }}"
       size="20px"
diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less
index c6d6c4b9..5467bc6c 100644
--- a/packages/goods-action/index.less
+++ b/packages/goods-action/index.less
@@ -7,6 +7,7 @@
   bottom: 0;
   left: 0;
   display: flex;
+  align-items: center;
   .theme(background-color, '@white');
 
   &--safe {
diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts
index dc9ad2a5..8d853521 100644
--- a/packages/goods-action/index.ts
+++ b/packages/goods-action/index.ts
@@ -1,6 +1,19 @@
 import { VantComponent } from '../common/component';
 
 VantComponent({
+  relation: {
+    type: 'descendant',
+    name: 'goods-action-button',
+    linked(child) {
+      this.children.push(child);
+    },
+    unlinked(child) {
+      this.children = this.children.filter((item) => item !== child);
+    }
+  },
+  beforeCreate() {
+    this.children = [];
+  },
   props: {
     safeAreaInsetBottom: {
       type: Boolean,