diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue index 5c8c7c1..418af30 100644 --- a/src/components/SwipeCards/index.vue +++ b/src/components/SwipeCards/index.vue @@ -15,38 +15,24 @@ - - - {{ card.commodityName }} - - - - - {{ card.specificationPrice }} - - /{{ card.stockUnitLabel }} - - - - - - - - {{ item.photoName }} + + + + + {{ card.commodityName }} + + + + + {{ card.specificationPrice }} + + /{{ card.stockUnitLabel }} + + 购买 diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss index 3362b62..d3bab55 100644 --- a/src/components/SwipeCards/styles/index.scss +++ b/src/components/SwipeCards/styles/index.scss @@ -21,13 +21,6 @@ height: 193px; } -.goods-title { - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 0%, - rgba(0, 0, 0, 0.6) 100% - ); -} .album-item { width: 96px; @@ -38,3 +31,31 @@ background: rgba(0, 0, 0, 0.5); height: 20px; } + +/* 底部价格与购买按钮 */ +.card-footer { + border-top: 1px solid rgba(0,0,0,0.04); +} + +.card-footer .price-left { + display: flex; + align-items: baseline; + color: #171717; +} + +.buy-btn { + background-color: $theme-color-500; + color: #fff; + margin-top: 12px; + padding: 12px 24px; + border-radius: 12px; + font-size: 14px; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; +} + +.buy-btn:active { + opacity: 0.9; +}