bill.wxss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. .button{box-shadow: 0 5rpx 12rpx rgba(0,0,0,.4); font-size: 28rpx; margin-top: 100rpx;}
  2. .shareImage{text-align: center; position: relative; width: 500rpx; margin: 0 auto;}
  3. .shareImage > .bg{width: 100%; height: 887rpx; border-radius: 20rpx;}
  4. .logo,.nickname,.text,.tag,.text-price,.price,.psAttendCount,.qrcode,.avatar,.discountPrice,.act-text{position: absolute;}
  5. .logo{border-radius: 12rpx 12rpx 0 0; width: 480rpx; height: 270rpx;}
  6. .qrcode{width: 140rpx; height: 140rpx;}
  7. .avatar{border-radius: 100%; width: 60rpx;height: 60rpx; z-index: 1;}
  8. .tag{color: #ee3a43; z-index: 2; font-size: 20rpx; max-width: 86%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  9. .text-price{color: #595757; font-size: 22rpx;}
  10. .price{color: #ee3a43; font-size: 22rpx;}
  11. .price-text{font-size: 18rpx;}
  12. .psAttendCount{color: #898989; font-size: 20rpx;}
  13. .nickname{color: #231815; font-size: 26rpx;}
  14. .text{color: #ee3a43;font-size: 24rpx; font-weight: bold; width: 290rpx; text-align: center; display: block;}
  15. .actvity > .logo{top: 150rpx; left: 50rpx; border-radius: 12rpx; width:403rpx; height: 227rpx;}
  16. .actvity > .qrcode{bottom: 60rpx; left: 40rpx;}
  17. .actvity > .avatar{top: 70rpx; left: 50rpx;}
  18. .actvity > .tag{top: 385rpx; left: 50rpx;}
  19. .actvity > .text-price{top: 415rpx; left: 50rpx;}
  20. .actvity > .price{top: 415rpx; left: 135rpx;}
  21. .actvity > .psAttendCount{top: 415rpx; right: 50rpx;}
  22. .actvity > .nickname{top: 68rpx; left: 125rpx;}
  23. .actvity > .text{top: 98rpx; left: 125rpx; width: auto; font-size: 20rpx; color: #231815; text-align: left; font-weight: normal;}
  24. .actvity > .act-text{top: 486rpx; left: 50rpx; font-size: 20rpx; line-height: 36rpx; width: 400rpx; text-align: justify; text-indent: 40rpx;}
  25. .group > .logo{top: 360rpx; left: 13rpx; border-radius: 0;width: 476rpx; height: 250rpx;}
  26. .group > .avatar{top: 176rpx; left: 50%; transform: translate(-50%, 0); width: 92rpx;height: 92rpx;}
  27. .group > .qrcode{bottom: 35rpx; right: 60rpx; width: 140rpx; height: 140rpx;}
  28. .group > .nickname{top: 280rpx; left: 0; display: block; text-align: center; color: #3e3a39; font-size: 24rpx;}
  29. .group > .discountPrice{top: 310rpx; left: 310rpx; color: #ee3a43; font-size: 32rpx;}
  30. .group > .tag{bottom: 250rpx; left: 35rpx;}
  31. .group > .text-price{bottom: 215rpx; left: 35rpx;}
  32. .group > .price{bottom: 215rpx; left: 135rpx;}
  33. .group > .psAttendCount{bottom: 215rpx; right: 35rpx;}
  34. .group > .nickname{bottom: 160rpx; left: 185rpx;}
  35. .group > .text{bottom: 120rpx; left: 185rpx;}
  36. .swiper {height: 900rpx;}
  37. .swiper > swiper {height: 900rpx;}
  38. .swiper-item-image {width: 500rpx; margin: 0 auto;}
  39. .swiper-item-bg {width: 100%;}
  40. .swiper-item-logo {position: absolute;}
  41. /* 底部按钮组 */
  42. .buttom-btn{
  43. position: fixed;
  44. bottom: 0;
  45. width: 100%;
  46. display: flex;
  47. flex-direction: row;
  48. background: #fff;
  49. box-shadow: 0 -2rpx 5rpx rgba(0,0,0,.2);
  50. }
  51. .btn-left,.btn-right{
  52. margin: 10rpx 20rpx;
  53. flex: 1;
  54. }
  55. .buttom-btn .button{
  56. text-align: center;
  57. padding: 10rpx 40rpx;
  58. font-size: 28rpx;
  59. display: flex;
  60. flex-direction: row;
  61. justify-content: space-around;
  62. border-radius: 15rpx;
  63. margin-top: auto;
  64. line-height: 1.8;
  65. font-size: 30rpx;
  66. }
  67. .buttom-btn .btn-left .button{
  68. color: var(--subtitleColor);
  69. border: 2rpx solid var(--subtitleColor);
  70. }
  71. .buttom-btn .btn-right .button{
  72. background: var(--subtitleColor);
  73. color: #fff;
  74. }
  75. /* card栏 */
  76. .borderNone{border-top-left-radius: 0 !important;border-top-right-radius: 0 !important;}
  77. .m-top20{
  78. margin-top: 20rpx;
  79. }
  80. .card{
  81. background: #fff;
  82. padding: 20rpx;
  83. border-radius: 20rpx;
  84. }
  85. .card .card-label{
  86. font-size: 30rpx;
  87. border-bottom: 2rpx solid #ccc;
  88. line-height: 2;
  89. }
  90. .card .card-label text{
  91. border-left: 4rpx solid var(--subtitleColor);
  92. padding-left: 20rpx;
  93. font-weight: bolder;
  94. }
  95. .card .card-content{
  96. padding: 40rpx 0;
  97. font-size: 28rpx;
  98. }
  99. .card .tip{
  100. text-align: center;
  101. font-size: 28rpx;
  102. }