detail.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. /* group/detail/detail.wxss */
  2. .banner{overflow: hidden;position: relative;}
  3. .swiper,.swiper image{width: 100%;height: 750rpx;}
  4. .dots{position: absolute;left: 0;right: 0;bottom: 11rpx;align-items: center;justify-content: center;}
  5. .dot{background:var(--mina) ;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
  6. .dot.active{width: 30rpx;}
  7. .group{position: relative;height: 120rpx;}
  8. .ptbg{width: 100%;height: 120rpx;position: absolute;top: 0;left: 0;z-index: 1;}
  9. .groups{position: relative;z-index: 2;align-items: center;padding: 0 30rpx;justify-content: space-between;height: 120rpx;}
  10. /* .price{font-size: 28rpx;color: #FE0419;}
  11. .price text{font-size: 40rpx;font-weight: bold;}
  12. .pin text{font-weight: normal;font-size: 24rpx;text-decoration: line-through;}
  13. .price text{color: #999;} */
  14. .price{font-size: 28rpx;color: #FE0419;}
  15. .price text{font-size: 40rpx;font-weight: bold;}
  16. .price text.origin{font-weight: normal;font-size: 24rpx;color: #999;text-decoration: line-through;margin-left: 10rpx;}
  17. .left .price,.left .price text.origin{color: #fff;}
  18. .pin{font-size: 22rpx;color: #fff;}
  19. .tuan{width: 154rpx;height: 40rpx;float: right;}
  20. .endtime{align-items: center;font-size: 22rpx;color: #fff;line-height: 36rpx;margin-top: 47rpx;overflow: hidden;clear: both;}
  21. .endtime view{margin-right: 15rpx;}
  22. .endtime text{display: block;width:36rpx;height:36rpx;background:rgb(0,0,0,.4);border-radius:6rpx;font-size: 24rpx;color: #fff;text-align: center;line-height: 36rpx;margin:0 5rpx}
  23. .info{padding: 30rpx 30rpx 40rpx;}
  24. .infos{align-items: center;justify-content: space-between;}
  25. .share{font-size: 20rpx;color: #999;text-align: center;position: relative;margin-left: 45rpx !important;}
  26. .share::after{content: '';display: block;width: 2rpx;height: 45rpx;background: #e7e7e7;position: absolute;top: 50%;transform: translateY(-50%);left: -30rpx;}
  27. .share image{width: 31rpx;height: 31rpx;margin: 0 auto 10rpx;}
  28. .title{font-size: 30rpx;color: #222;line-height: 40rpx;font-weight: bold;}
  29. .tag{width: 82rpx;height: 36rpx;display: inline-block;margin: 0 10rpx 0 0;position: relative;top: 7rpx;}
  30. .detinfo .item{padding: 30rpx;border-bottom: 1rpx solid #f6f6f6;}
  31. .detinfo .item:last-child{border-bottom: none;}
  32. .item label{display: block;width: 130rpx;font-size: 28rpx;color: #222;font-weight: bold;line-height: 40rpx;}
  33. .quan .flex{align-items: center;}
  34. .quan text{display: block;background: #FDF5F3;padding: 0 13rpx;height: 40rpx;line-height: 40rpx;font-size: 24rpx;color: #FF5F08;margin-right: 10rpx;}
  35. .ling{font-size: 24rpx;color: #FF5F08;align-items: center;}
  36. .ling image{width: 14rpx;height: 24rpx;margin-left: 11rpx;}
  37. .address{font-size: 28rpx;color: #333;line-height: 40rpx;}
  38. .huo{font-size: 24rpx;color: #666;line-height: 40rpx;}
  39. .huo text{color: #FE0419;}
  40. .more{width: 36rpx;height: 10rpx;margin-top: 15rpx;}
  41. /* .user{width: 68rpx;height: 68rpx;border-radius: 50%;margin-right: 15rpx;} */
  42. .name{font-size: 28rpx;color: #666;line-height: 68rpx;justify-content: space-between;align-items: center;}
  43. .pinglun{font-size: 28rpx;color: #333;margin: 15rpx 0 0;line-height: 44rpx;}
  44. .huifu{background: #F2F2F2;border-radius: 6rpx;margin: 25rpx 0 0;line-height: 42rpx;padding: 20rpx 30rpx;position: relative;}
  45. .huifu::after{content: '';display: block;width: 0;height: 0;border: 9rpx solid transparent;border-bottom-color: #F2F2F2;border-top: none;position: absolute;top: -8rpx;left: 39rpx;}
  46. .show{display: block;}
  47. .hide{display: none;}
  48. .bot{height: 80rpx;align-items: center;padding: 20rpx 30rpx 20rpx 0;justify-content: space-between;}
  49. .botbtn{font-size: 22rpx;color: #6A6A6A;width: 145rpx !important;text-align: center;position: relative;}
  50. .botbtn image{width: 40rpx;height: 34rpx;margin: 10rpx auto 5rpx;}
  51. .message{background: #DF1A14;height: 28rpx;line-height: 28rpx;font-size: 20rpx;color: #fff;text-align: center;border-radius: 15rpx;box-sizing: border-box;min-width: 21rpx;padding: 0 8rpx;position: absolute;top: 0;right: 25%;}
  52. .gmbtn{width: 276rpx;height: 76rpx;border-radius: 40rpx;text-align: center;line-height: 76rpx;font-size: 30rpx;color: #FD3C31;border: 2rpx solid #FD3C31;margin-right: 20rpx;}
  53. .ctbtn{width: 280rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;}
  54. .yybtn{width: 430rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;align-items: center;justify-content: center;}
  55. .cancel-yy{width: 426rpx;height: 76rpx;border: 2rpx solid #05C379;border-radius: 40rpx;text-align: center;line-height: 76rpx;font-size: 30rpx;color: #05C379;align-items: center;justify-content: center;}
  56. .yybtn .icon,.cancel-yy .icon{font-size: 30rpx;margin-right: 15rpx;}
  57. /* 参团情况 */
  58. .cantuan{padding: 35rpx 55rpx 30rpx;}
  59. .can-info{text-align: center;font-size: 40rpx;color: #333;}
  60. .can-info text{font-size: 43rpx;color: #FE0419;}
  61. .can-infos{flex-wrap: wrap;padding: 0 35rpx;}
  62. .can-infos .li{width: 90rpx;height: 90rpx;position: relative;margin-right: 30rpx;margin-top: 55rpx;}
  63. .can-infos .li:nth-child(5n){margin-right: 0;}
  64. .can-infos .li image{width: 90rpx;height: 90rpx;border-radius: 50%;}
  65. .can-infos .li text{display: block;width: 78rpx;height: 32rpx;border-radius: 17rpx;border: 2rpx solid #fff;background: #FD4534;font-size: 20rpx;color: #fff;text-align: center;line-height: 32rpx;position: absolute;left: 50%;transform: translateX(-50%);bottom: -12rpx;}
  66. .can-btn{height: 90rpx;border-radius: 45rpx;font-size: 30rpx;color: #fff;text-align: center;line-height: 90rpx;margin-top: 50rpx;}
  67. /* 组团情况 */
  68. .zu-tit{height: 100rpx;align-items: center;justify-content: space-between;padding: 0 30rpx;border-bottom: 2rpx solid #f5f6f7;font-size: 30rpx;}
  69. .zu-tit .icon{color: #C1C1C1;font-size: 18rpx;width: 40rpx;
  70. height: 40rpx;}
  71. .zu-list .li{border-bottom: 2rpx solid #f5f6f7;height: 120rpx;padding: 0 30rpx;align-items: center;}
  72. .zu-list .li:last-child{border-bottom: none;}
  73. .zu-list .li image{width: 72rpx;height: 72rpx;border-radius: 50%;}
  74. .zu-name{font-size: 28rpx;margin: 0 20rpx;}
  75. .zu-ren{text-align: right;margin-right: 20rpx;}
  76. .cha{font-size: 24rpx;color: #333;}
  77. .cha text{color: #FE0419;}
  78. .zu-time{font-size: 22rpx;margin-top: 8rpx;}
  79. .zu-time text{color: #666;}
  80. .zu-btn{width: 150rpx;height: 60rpx;border-radius: 30rpx;font-size: 24rpx;color: #fff;text-align: center;line-height: 60rpx;}
  81. /* 玩法 */
  82. .wanfa{padding: 35rpx 30rpx;}
  83. .wan-tit{font-size: 30rpx;color: #333;}
  84. .wan-info{justify-content: space-around;margin-top: 35rpx;}
  85. .icon-right{margin: 0 25rpx;font-size: 24rpx;color: #C1C1C1;}
  86. .wan-info .li{font-size: 24rpx;color: #333;line-height: 36rpx;align-items: center;}
  87. .wan-info .li .icon{width: 42rpx;height: 42rpx;border: 2rpx solid #fe1a2c;border-radius: 50%;color: #fe1a2c;font-size: 24rpx;margin-right: 7rpx;font-weight: bold;}
  88. .wan-info .li text{display: block;}
  89. /* 小店相关 */
  90. .xiaodian{position: relative;height: 122rpx;padding: 0 26rpx 0 110rpx;align-items: center;margin: 35rpx 30rpx 0;}
  91. .xdbg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
  92. .shouyi{position: relative;z-index: 2;color: #fff;margin-right: 10rpx;}
  93. .shouyi view{font-size: 40rpx;font-weight: bold;margin-top: 8rpx;}
  94. .shouyi text{font-weight: normal;font-size: 24rpx;}
  95. .addshop{height: 62rpx;padding: 0 25rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
  96. .fenxiang{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
  97. .goShop{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
  98. .suc{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;width: 536rpx;border-radius: 20rpx;z-index: 100;text-align: center;padding-bottom: 47rpx;}
  99. .tjcg1{width: 100%;height: 284rpx;}
  100. .tjcg{width: 195rpx;height: 38rpx;margin: 52rpx auto 15rpx;}
  101. .suc text{display: block;font-size: 24rpx;color: #333;}
  102. .shopcc{justify-content: center;}
  103. .shop{width:220rpx;height:80rpx;background:linear-gradient(123deg,rgba(255,130,130,1) 0%,rgba(220,21,21,1) 100%);font-size: 30rpx;color: #fff;line-height: 80rpx;border-radius: 40rpx;margin: 45rpx 15rpx 40rpx;}
  104. .share-btn{justify-content: space-between;padding: 0 54rpx;}
  105. .wxfriend,.wxposter{width: 196rpx !important;height: 76rpx !important;align-items: center;justify-content: center;font-size: 30rpx;color: #666;border: 2rpx solid #D8D8D8;border-radius: 40rpx !important;}
  106. .wxfriend image,.wxposter image{width: 31rpx;height: 31rpx;margin-right: 13rpx;}
  107. .suc-close{position: absolute;left: 50%;transform: translateX(-50%);bottom: -102rpx;width: 62rpx;height: 62rpx;}
  108. .sellStock{text-align: right; color: #999;position: relative; left: 145rpx;}
  109. .sellStock text{ color:#222 ;}
  110. .protext{color: #999;margin-top: 15rpx;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; }
  111. /* 更多拼团 */
  112. .ptuanmode{position: fixed;z-index: 100;background: #fff;width: 90%; border-radius:30rpx 30rpx;left: 50%;top: 50%; transform: translate(-50%, -50%);}
  113. .tole{font-size: 24rpx;color: #999;text-align: center;padding: 0 0 10rpx 0;}
  114. .pttop{padding: 30rpx 0;text-align: center;font-size: 34rpx;border-bottom: 2rpx solid #9999;}
  115. /* .zutuan{position: relative;} */
  116. .page{position: fixed;z-index: 100;}
  117. .end{background: #999999;}
  118. .guarantee{border-top: 1rpx solid #f6f6f6;padding: 15rpx 0 0 0; margin-top: 15rpx;}
  119. .guarantee .cont{flex-wrap: wrap;font-size: 26rpx;}
  120. .guarantee .cont .li{align-items: center;margin-right: 20rpx;
  121. margin-bottom: 10rpx;}
  122. .guarantee .cont image{ width: 30rpx;
  123. height: 30rpx;}
  124. .pro-sel{align-items: center;}
  125. .pro-sel .flex{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  126. .mrico{width: 16rpx;height: 27rpx;}