init

miniprogram/pages/goods/details/components/buy-bar/index.wxss

@@ -0,0 +1,181 @@
+.footer-cont {
+  background-color: #fff;
+  padding: 12rpx 12rpx calc(env(safe-area-inset-bottom) + 12rpx) 12rpx;
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.05);
+  box-sizing: border-box;
+}
+
+.icon-warp {
+  width: 100rpx;
+  height: 80rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background: #f8f8f8;
+  border-radius: 16rpx;
+  border: 1rpx solid #f0f0f0;
+  transition: all 0.3s ease;
+}
+
+.icon-warp:active {
+  background: #f0f0f0;
+  transform: scale(0.95);
+}
+
+.operate-wrap {
+  position: relative;
+  flex: 1;
+}
+
+.bottom-operate-left {
+  display: flex;
+  gap: 12rpx;
+  flex: none;
+  min-width: 0;
+}
+
+.bottom-operate-left .icon-warp {
+  width: 100rpx;
+  flex: none;
+}
+
+.tag-cart-num {
+  display: inline-block;
+  position: absolute;
+  left: 50rpx;
+  right: auto;
+  top: 6rpx;
+  color: #fff;
+  line-height: 24rpx;
+  text-align: center;
+  z-index: 99;
+  white-space: nowrap;
+  min-width: 28rpx;
+  border-radius: 14rpx;
+  background-color: #fa550f !important;
+  font-size: 20rpx;
+  font-weight: 400;
+  padding: 2rpx 6rpx;
+}
+
+.operate-text {
+  color: #666;
+  font-size: 20rpx;
+  margin-top: 4rpx;
+  font-weight: 400;
+}
+
+.soldout {
+  height: 80rpx;
+  background: linear-gradient(135deg, #ccc 0%, #aaa 100%);
+  width: 100%;
+  color: #fff;
+  border-radius: 16rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+}
+
+.addCart-disabled,
+.bar-addCart-disabled {
+  background: linear-gradient(135deg, #ddd 0%, #ccc 100%) !important;
+  color: #fff !important;
+  font-size: 28rpx;
+  border-radius: 16rpx 0 0 16rpx !important;
+}
+
+.buyNow-disabled,
+.bar-buyNow-disabled {
+  background: linear-gradient(135deg, #ccc 0%, #aaa 100%) !important;
+  color: #fff !important;
+  font-size: 28rpx;
+  border-radius: 0 16rpx 16rpx 0 !important;
+}
+
+.bar-separately,
+.bar-buy {
+  height: 80rpx;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28rpx;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  box-shadow: 0 4rpx 12rpx rgba(250, 65, 38, 0.2);
+  flex: 1 1 auto;
+  min-width: 160rpx;
+  box-sizing: border-box;
+}
+
+.bar-separately {
+  background: linear-gradient(135deg, #fff5f4 0%, #ffece9 100%);
+  color: #fa4126;
+  border-radius: 16rpx 0 0 16rpx;
+  border: 2rpx solid #fa4126;
+  box-shadow: 0 4rpx 12rpx rgba(250, 65, 38, 0.1);
+}
+
+.bar-separately:active {
+  background: linear-gradient(135deg, #ffece9 0%, #ffe0dc 100%);
+  transform: scale(0.98);
+}
+
+.bar-buy {
+  background: linear-gradient(135deg, #fa4126 0%, #e63312 100%);
+  border-radius: 0 16rpx 16rpx 0;
+}
+
+.bar-buy:active {
+  background: linear-gradient(135deg, #e63312 0%, #d12a0f 100%);
+  transform: scale(0.98);
+}
+
+/* 收藏按钮样式 */
+.favorite-wrap {
+  position: relative;
+}
+
+.favorite-wrap .operate-text {
+  color: #666;
+  transition: color 0.3s ease;
+}
+
+.favorite-wrap:active .operate-text {
+  color: #ff4757;
+}
+
+.flex {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.flex-center {
+  justify-content: center;
+  -webkit-justify-content: center;
+  align-items: center;
+  -webkit-align-items: center;
+}
+
+.flex-between {
+  justify-content: space-between;
+  -webkit-justify-content: space-between;
+}
+
+/* 购买按钮容器自适应剩余空间 */
+.buy-buttons {
+  display: flex;
+  gap: 0;
+  flex: 1 1 auto;
+  min-width: 0;
+}