productBottom.wxss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. .page-bottom {
  2. position: fixed;
  3. bottom: 0rpx;
  4. z-index: 95;
  5. width: 750rpx;
  6. height: 120rpx;
  7. background-color: #fff;
  8. }
  9. .page-bottom,.page-bottom .p-b-btn {
  10. display: flex;
  11. -webkit-box-pack: center;
  12. justify-content: center;
  13. -webkit-box-align: center;
  14. align-items: center;
  15. }
  16. .page-bottom .p-b-btn {
  17. -webkit-box-orient: vertical;
  18. -webkit-box-direction: normal;
  19. flex-direction: column;
  20. font-size: 24rpx;
  21. color: #606266;
  22. width: 96rpx;
  23. height: 80rpx;
  24. }
  25. .page-bottom .p-b-btn .iconfont {
  26. font-size: 40rpx;
  27. line-height: 48rpx;
  28. color: #909399;
  29. }
  30. .page-bottom .p-b-btn.active,.page-bottom .p-b-btn.active .iconfont {
  31. color: #dd524d;
  32. }
  33. .page-bottom .p-b-btn .iconlikefill {
  34. font-size: 46rpx;
  35. }
  36. .page-bottom .p-b-btn image {
  37. width: 56rpx;
  38. height: 58rpx;
  39. }
  40. .page-bottom .action-btn-group {
  41. display: flex;
  42. height: 76rpx;
  43. border-radius: 100px;
  44. overflow: hidden;
  45. margin-left: 20rpx;
  46. position: relative;
  47. }
  48. .page-bottom .action-btn-group:after {
  49. content: "";
  50. position: absolute;
  51. top: 50%;
  52. right: 50%;
  53. transform: translateY(-50%);
  54. height: 28rpx;
  55. width: 0;
  56. border-right: 1px solid hsla(0,0%,100%,.5);
  57. }
  58. .page-bottom .action-btn-group .action-btn {
  59. display: flex;
  60. -webkit-box-align: center;
  61. align-items: center;
  62. -webkit-box-pack: center;
  63. justify-content: center;
  64. width: 270rpx;
  65. height: 100%;
  66. font-size: 28rpx;
  67. padding: 0;
  68. border-radius: 0;
  69. background: transparent;
  70. }
  71. .page-bottom .action-btn-group .action-btn.buy-now-btn {
  72. background-color: #303e49;
  73. }
  74. .page-bottom .action-btn-group .action-btn.add-cart-btn {
  75. background-color: #5dbc7c;
  76. }
  77. .p-b-btn {
  78. display: flex;
  79. -webkit-box-orient: vertical;
  80. -webkit-box-direction: normal;
  81. flex-direction: column;
  82. -webkit-box-align: center;
  83. align-items: center;
  84. -webkit-box-pack: center;
  85. justify-content: center;
  86. font-size: 24rpx;
  87. color: #606266;
  88. width: 96rpx;
  89. height: 80rpx;
  90. }
  91. .p-b-btn .iconfont {
  92. font-size: 40rpx;
  93. line-height: 48rpx;
  94. color: #909399;
  95. }
  96. .p-b-btn.active,.p-b-btn.active .iconfont {
  97. color: #dd524d;
  98. }
  99. .p-b-btn .icon-fenxiang2 {
  100. font-size: 42rpx;
  101. transform: translateY(-2rpx);
  102. }
  103. .p-b-btn .iconlikefill {
  104. font-size: 46rpx;
  105. }