vipCard.wxss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. .tabs-radius {
  2. background: #fff;
  3. /* opacity: 0.8; */
  4. border-radius: 24rpx;
  5. }
  6. .tabs {
  7. padding: 0 30rpx;
  8. }
  9. .tabs-wrap {
  10. height: 96rpx;
  11. margin-top: 16rpx;
  12. opacity: 0.8;
  13. justify-content: space-around;
  14. }
  15. .tabs-wrap .item {
  16. /* width: 33.33%; */
  17. height: 100%;
  18. font-size: 28rpx;
  19. color: #666666;
  20. position: relative;
  21. }
  22. .tabs-wrap .item.line::before {
  23. content: '';
  24. position: absolute;
  25. right: -80rpx;
  26. top: 26rpx;
  27. width: 2rpx;
  28. height: 44rpx;
  29. background-color: #EEEEEE;
  30. border-radius: 16rpx;
  31. }
  32. .tabs-wrap .item.active {
  33. font-family: PingFangSC-Semibold;
  34. font-size: 28rpx;
  35. color: #333;
  36. /* color: #85DBD8; */
  37. border-bottom: 4rpx solid #FA7D22;
  38. }
  39. .tabs-content .item {
  40. margin: 20rpx 0;
  41. background: #fff;
  42. box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55);
  43. }
  44. .tabs-content .item-top {
  45. height: 102rpx;
  46. padding: 0 30rpx;
  47. }
  48. .tabs-content .item-top text:first-child {
  49. flex: 1;
  50. font-family: PingFangSC-Semibold, PingFang SC;
  51. font-weight: 600;
  52. }
  53. .tabs-content .item-top text:last-child {
  54. color: #FF6877;
  55. margin-left: 20rpx;
  56. font-family: PingFangSC-Medium, PingFang SC;
  57. }
  58. .tabs-content .item-content {
  59. border-top: 1rpx solid rgba(0, 0, 0, 0.10);
  60. border-bottom: 1rpx solid rgba(0, 0, 0, 0.10);
  61. padding: 30rpx;
  62. }
  63. .tabs-content .item-content image {
  64. width: 168rpx;
  65. height: 168rpx;
  66. /* background: #EDEDED; */
  67. margin-right: 12rpx;
  68. box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
  69. border-radius: 16px;
  70. }
  71. .tabs-content .item-content .content {
  72. justify-content: space-around;
  73. }
  74. .tabs-content .item-btn {
  75. height: 130rpx;
  76. justify-content: flex-end;
  77. }
  78. .tabs-content .item-btn .btn {
  79. margin-right: 30rpx;
  80. }
  81. .tabs-content .item-btn .cancel-btn {
  82. font-size: 28rpx;
  83. color: #666666;
  84. }
  85. .tabs-content .item-btn .use-btn {
  86. width: 166rpx;
  87. height: 70rpx;
  88. background: #FA7D22;
  89. border-radius: 35rpx;
  90. font-size: 28rpx;
  91. color: #FFFFFF;
  92. box-shadow: 4rpx 24rpx 50rpx -8rpx rgba(255, 119, 176, 0.55);
  93. }
  94. .use-popup {
  95. width: 558rpx;
  96. height: 508rpx;
  97. background: #FFFFFF;
  98. border-radius: 40rpx;
  99. justify-content: center;
  100. /* justify-content: space-evenly; */
  101. }
  102. /* .use-popup .red {
  103. font-size: 24rpx;
  104. font-family: PingFangSC-Regular, PingFang SC;
  105. font-weight: 400;
  106. color: #E95564;
  107. } */
  108. .use-btn .btn {
  109. /* width: 208rpx; */
  110. height: 92rpx;
  111. margin: 0 48rpx;
  112. font-size: 36rpx;
  113. color: #FA7D22;
  114. border-radius: 52rpx;
  115. border: 2rpx solid #FA7D22;
  116. }
  117. .use-btn .confirm {
  118. margin-top: 28rpx;
  119. /* margin-left: 46rpx; */
  120. background-color: #FA7D22;
  121. color: #fff;
  122. }