style.scss 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. .packet-bg {
  2. display: inline-block;
  3. width: 281px;
  4. height: 387px;
  5. border-radius: 6px;
  6. background: url('./img/bg.png') no-repeat;
  7. box-sizing: border-box;
  8. background-size: 100%;
  9. vertical-align: middle;
  10. position: relative;
  11. overflow: hidden;
  12. padding-top: 40px;
  13. .el-icon-close {
  14. position: absolute;
  15. top: 6px;
  16. right: 6px;
  17. color: #ffffff;
  18. font-size: 20px;
  19. cursor: pointer;
  20. }
  21. }
  22. .nav-bar {
  23. display: none;
  24. }
  25. .user-info {
  26. text-align: center;
  27. }
  28. .avatar {
  29. display: block;
  30. width: 60px;
  31. height: 60px;
  32. margin: 0 auto;
  33. border-radius: 4px;
  34. overflow: hidden;
  35. &.no-avatar {
  36. line-height: 60px;
  37. text-align: center;
  38. font-size: 16px;
  39. color: #ffffff;
  40. }
  41. }
  42. .name {
  43. color: #f9efc5;
  44. font-size: 14px;
  45. display: inline-block;
  46. margin: 10px 0 12px 0;
  47. }
  48. .text {
  49. color: #f9efc5;
  50. font-size: 16px;
  51. padding: 0 14px;
  52. line-height: 1.4;
  53. }
  54. .open-btn {
  55. position: absolute;
  56. left: 0;
  57. right: 0;
  58. margin: 0 auto;
  59. font-size: 34px;
  60. bottom: 70px;
  61. width: 82px;
  62. height: 82px;
  63. line-height: 82px;
  64. text-align: center;
  65. border-radius: 50%;
  66. margin: 0 auto;
  67. background-color: #e8cca0;
  68. color: #553a1b;
  69. font-family: KaiTi, STKaiti, Microsoft Yahei, PingFang SC;
  70. cursor: pointer;
  71. &:hover {
  72. background-color: #dbbd8b;
  73. }
  74. }
  75. .detail {
  76. position: absolute;
  77. bottom: 20px;
  78. left: 0;
  79. right: 0;
  80. text-align: center;
  81. font-size: 14px;
  82. color: #f9efc5;
  83. cursor: pointer;
  84. }
  85. .detail-bg {
  86. display: inline-block;
  87. width: 281px;
  88. border-radius: 6px;
  89. background: url('./img/bg2.png') no-repeat;
  90. background-size: 100%;
  91. background-color: #ffffff;
  92. box-sizing: border-box;
  93. background-size: 100%;
  94. vertical-align: middle;
  95. position: relative;
  96. overflow: hidden;
  97. padding-top: 30px;
  98. .el-icon-close {
  99. position: absolute;
  100. top: 6px;
  101. right: 6px;
  102. color: #ffffff;
  103. font-size: 20px;
  104. cursor: pointer;
  105. }
  106. .name {
  107. color: #333333;
  108. margin-bottom: 6px;
  109. }
  110. .text {
  111. color: #333333;
  112. font-size: 12px;
  113. }
  114. }
  115. .money {
  116. text-align: center;
  117. font-size: 24px;
  118. color: #333333;
  119. margin: 14px 0;
  120. em {
  121. font-size: 12px;
  122. color: #999999;
  123. }
  124. }
  125. .state {
  126. font-size: 12px;
  127. color: #5a93eb;
  128. margin-bottom: 12px;
  129. }
  130. .state-num {
  131. font-size: 12px;
  132. margin: 4px 0;
  133. color: #999999;
  134. }
  135. .packet-list {
  136. margin: 14px 12px 0 12px;
  137. height: 148px;
  138. overflow: auto;
  139. li {
  140. display: flex;
  141. padding: 6px 0;
  142. border-top: 1px solid #eee;
  143. .avatar {
  144. width: 36px;
  145. height: 36px;
  146. border-radius: 2px;
  147. }
  148. .no-avatar {
  149. line-height: 36px;
  150. }
  151. }
  152. .content {
  153. flex: 1;
  154. margin-left: 10px;
  155. font-size: 12px;
  156. text-align: left;
  157. .top {
  158. color: #333333;
  159. line-height: 1.4;
  160. margin-bottom: 8px;
  161. }
  162. .amount {
  163. float: right;
  164. }
  165. .best{
  166. display: inline-block;
  167. vertical-align: middle;
  168. width: 14px;
  169. height: 16px;
  170. margin-left: 10px;
  171. background: url(../../../assets/crown-icon.png) no-repeat;
  172. }
  173. }
  174. .time {
  175. color: #999999;
  176. }
  177. }
  178. .tips {
  179. color: #999999;
  180. text-align: center;
  181. font-size: 12px;
  182. margin: 12px 0;
  183. }
  184. .redpack-tips {
  185. color: #f9efc5;
  186. font-size: 16px;
  187. line-height: 1.4;
  188. margin-top: 30px;
  189. padding: 0 12px;
  190. }
  191. .small {
  192. margin-top: 40px;
  193. .avatar {
  194. display: inline-block;
  195. vertical-align: middle;
  196. line-height: 30px;
  197. width: 30px;
  198. height: 30px;
  199. margin-right: 10px;
  200. border-radius: 4px;
  201. &.no-avatar {
  202. line-height: 30px;
  203. }
  204. }
  205. .name {
  206. font-size: 16px;
  207. }
  208. }
  209. .loading {
  210. pointer-events: none;
  211. }
  212. /*h5 style*/
  213. .h5-wrap {
  214. .packet-bg {
  215. width: px2rem(623);
  216. height: px2rem(920);
  217. background-image: url('./img/h5_bg.png');
  218. background-size: 100%;
  219. padding-top: 0;
  220. overflow: visible;
  221. }
  222. .detail-bg {
  223. width: 100%;
  224. height: 100%;
  225. box-sizing: border-box;
  226. padding: 0 0 px2rem(108); // padding-top: 10;
  227. border-radius: 0;
  228. background-color: #fff;
  229. background-image: url("./img/h5_bg2.png");
  230. background-size: 100% auto;
  231. @include webkitbox(2);
  232. &.is-quantity{
  233. background-image: url("./img/h5_bg3.png");
  234. .packet-list{
  235. // height: px2rem(400);
  236. }
  237. }
  238. .el-icon-close {
  239. visibility: hidden;
  240. }
  241. .name{
  242. color: #f9efc5;
  243. }
  244. .text{
  245. margin-top: px2rem(18);
  246. color: #f9efc5;
  247. font-size: px2rem(28);
  248. }
  249. .money{
  250. margin: px2rem(50) auto;
  251. font-size: px2rem(62);
  252. font-weight: bold;
  253. color: #fae3b7;
  254. em{
  255. color: #fae3b7;
  256. // font-weight: normal;
  257. }
  258. }
  259. .state{
  260. color: #f9efc5;
  261. }
  262. .state-num{
  263. padding-left: px2rem(34);
  264. margin-top: px2rem(156);
  265. text-align: left;
  266. }
  267. .packet-list{
  268. height: auto;
  269. flex: 1;
  270. .content{
  271. font-size: px2rem(32);
  272. color: #181818;
  273. .bottom{
  274. display: flex;
  275. justify-content: space-between;
  276. }
  277. .time{
  278. font-size: px2rem(26);
  279. color: #b4b4b4;
  280. margin-right: px2rem(10);
  281. }
  282. .best{
  283. font-size: px2rem(28);
  284. color: #fbc463;
  285. }
  286. }
  287. li{
  288. padding: px2rem(30) 0;
  289. }
  290. }
  291. .tips{
  292. position: absolute;
  293. left: 0;
  294. width: 100%;
  295. bottom: px2rem(30);
  296. }
  297. }
  298. .nav-bar {
  299. display: block;
  300. height: px2rem(84);
  301. display: flex;
  302. padding: 0 px2rem(25);
  303. justify-content: space-between;
  304. align-items: center;
  305. color: #f9efc5;
  306. margin-bottom: px2rem(66);
  307. a{
  308. font-size: px2rem(34);
  309. }
  310. }
  311. .avatar {
  312. display: inline-block;
  313. vertical-align: middle;
  314. line-height: 30px;
  315. width: 30px;
  316. height: 30px;
  317. margin-right: 10px;
  318. border-radius: 4px;
  319. &.no-avatar {
  320. line-height: 30px;
  321. }
  322. }
  323. .name {
  324. font-size: px2rem(34);
  325. }
  326. .user-info {
  327. margin-top: px2rem(215);
  328. }
  329. .text,
  330. .redpack-tips {
  331. font-size: px2rem(48);
  332. }
  333. .detail {
  334. font-size: px2rem(32);
  335. &::after {
  336. content: '';
  337. display: inline-block;
  338. width: px2rem(12);
  339. height: px2rem(12);
  340. margin-left: 2px;
  341. border-width: 1px;
  342. border-style: solid;
  343. border-color: #f9efc5 #f9efc5 transparent transparent;
  344. transform: rotate(45deg);
  345. vertical-align: middle;
  346. }
  347. }
  348. .open-btn {
  349. bottom: px2rem(152);
  350. width: px2rem(198);
  351. height: px2rem(198);
  352. line-height: px2rem(198);
  353. font-size: px2rem(94);
  354. font-family: KaiTi, STKaiti, Microsoft Yahei, PingFang SC;
  355. }
  356. .el-icon-close {
  357. top: auto;
  358. left: 50%;
  359. bottom: -px2rem(120);
  360. width: px2rem(80);
  361. height: px2rem(80);
  362. box-sizing: border-box;
  363. transform: translate(-50%);
  364. border: px2rem(4) solid #d2b072;
  365. border-radius: 50%;
  366. font-size: px2rem(48);
  367. color: #d2b072;
  368. line-height: px2rem(72);
  369. }
  370. }