app.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. body {
  6. /* min-height: 100vh; */
  7. /* color: var(--color-text);
  8. background: var(--color-background); */
  9. color: #EAEAEA;
  10. background: #000;
  11. transition: color 0.5s, background-color 0.5s;
  12. line-height: 1.6;
  13. font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
  14. Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  15. font-size: 15px;
  16. text-rendering: optimizeLegibility;
  17. -webkit-font-smoothing: antialiased;
  18. -moz-osx-font-smoothing: grayscale;
  19. /* display: grid;
  20. grid-template-columns: 1fr 1fr; */
  21. /* padding: 0 2rem; */
  22. }
  23. ul li {
  24. list-style: none;
  25. }
  26. .quanpinghei {
  27. background: #000;
  28. position: fixed;
  29. top: 0;
  30. left: 0;
  31. width: 100VW;
  32. height: 100vh;
  33. z-index: 999;
  34. }
  35. .firstPage {
  36. text-align: center;
  37. display: none;
  38. }
  39. .firstPageText {
  40. background: #CE5C2A;
  41. border-color: #CE5C2A;
  42. color: #fff;
  43. cursor: default;
  44. font-size: 11px;
  45. padding: 4px 10px;
  46. border-radius: 2px;
  47. color: #FFE0D2;
  48. margin: 10px 3px;
  49. text-decoration: none;
  50. }
  51. /* 登录弹窗 */
  52. .loginBox {
  53. position: fixed;
  54. right: 0;
  55. top: 0;
  56. width: 100%;
  57. height: 100%;
  58. z-index: 9;
  59. background-color: rgba(0, 0, 0, .7);
  60. display: none;
  61. }
  62. .loginCenterBox {
  63. position: fixed;
  64. top: 50%;
  65. left: 50%;
  66. transform: translate(-50%,-50%);
  67. background-color: #262626;
  68. border-radius: 12px;
  69. display: flex;
  70. flex-direction: column;
  71. /* justify-content: center; */
  72. align-items: center;
  73. width: 7rem;
  74. height: 4.5rem;
  75. }
  76. .accountRightText {
  77. background-color: #333333;
  78. border-radius: 15px;
  79. width: 6.46rem;
  80. height: 1.1rem;
  81. line-height: 1.1rem;
  82. font-size: .32rem;
  83. text-align: center;
  84. margin-top: .6rem;
  85. color: #fff;
  86. }
  87. #login {
  88. margin-top: .26rem;
  89. }
  90. .guanbi {
  91. width: .5rem;
  92. height: .5rem;
  93. margin-top: .62rem;
  94. }
  95. /* 账户信息 */
  96. .account {
  97. display: flex;
  98. justify-content: space-between;
  99. align-items: center;
  100. /* height: .88rem; */
  101. height: 44px;
  102. }
  103. .accountLeft {
  104. display: flex;
  105. justify-content: center;
  106. align-items: center;
  107. height: 100%;
  108. }
  109. .logo {
  110. width: 80px;
  111. height: 40px;
  112. }
  113. .LoginBox {
  114. width: 100%;
  115. height: 100%;
  116. position: fixed;
  117. background: rgba(0, 0, 0, 0.8);
  118. z-index: 10;
  119. display: none;
  120. }
  121. body{
  122. font-family: PingFangSC-Regular, sans-serif;;
  123. text-rendering: optimizeLegibility;
  124. -webkit-font-smoothing: antialiased;
  125. -moz-osx-font-smoothing: grayscale;
  126. }
  127. .LoginBoxChild {
  128. width: 6.02rem;
  129. height: 7.2rem;
  130. background: #25252A;
  131. position: fixed;
  132. top: 50%;
  133. left: 50%;
  134. margin-left: -3.01rem;
  135. margin-top: -3.6rem;
  136. border-radius: 0.24rem;
  137. }
  138. .LoginBoxChildTop {
  139. width: 4.66rem;
  140. height: 0.8rem;
  141. font-weight: bold;
  142. font-size: 0.64rem;
  143. color: #DFDFDF;
  144. text-align: center;
  145. margin: 1rem auto 0;
  146. }
  147. .LoginBoxChildMiddle {
  148. width: 4.66rem;
  149. height: 0.96rem;
  150. font-size: 0.3rem;
  151. color: #DFDFDF;
  152. margin: 0.34rem auto 0;
  153. text-align: center;
  154. }
  155. .LoginBoxChildBottom {
  156. width: 4.66rem;
  157. height: 1rem;
  158. background: #CF5731;
  159. font-size: 0.34rem;
  160. color: #DFDFDF;
  161. border-radius: 0.5rem;
  162. margin: 1rem auto 0;
  163. text-align: center;
  164. line-height: 1rem;
  165. }
  166. .LoginBoxChildBottomClose {
  167. width: 100%;
  168. height: 0.6rem;
  169. display: flex;
  170. display: -moz-flex;
  171. display: -o-flex;
  172. display: -webkit-flex;
  173. display: -ms-flex;
  174. justify-content: center;
  175. align-items: center;
  176. margin-top: 0.8rem;
  177. }
  178. .LoginBoxChildBottomClose img {
  179. width: 0.6rem;
  180. height: 0.6rem;
  181. }
  182. .AlertBox {
  183. width: 100%;
  184. height: 100%;
  185. position: fixed;
  186. background: rgba(0, 0, 0, 0.8);
  187. z-index: 10;
  188. display: none;
  189. }
  190. .AlertBoxChild {
  191. width: 6.7rem;
  192. height: 1rem;
  193. background: rgba(30,30,30,0.75);
  194. position: fixed;
  195. top: 50%;
  196. left: 50%;
  197. margin-left: -3.35rem;
  198. margin-top: -0.5rem;
  199. border-radius:0.28rem;
  200. }
  201. .AlertBoxChilds {
  202. width: 6rem;
  203. height: 1rem;
  204. display: flex;
  205. display: -moz-flex;
  206. display: -o-flex;
  207. display: -webkit-flex;
  208. display: -ms-flex;
  209. justify-content: center;
  210. align-items: center;
  211. color: #fff;
  212. font-size: 0.26rem;
  213. margin: 0 auto;
  214. }
  215. .zhedang {
  216. width: 100%;
  217. height: 100%;
  218. position: fixed;
  219. background-color: #151618;
  220. z-index: 199;
  221. }
  222. .box {
  223. width: 100%;
  224. height: 1.2rem;
  225. display: none;
  226. }
  227. .page {
  228. width: 100%;
  229. }
  230. .box1Child{
  231. width:100%;
  232. height:1.2rem;
  233. display: flex;
  234. display: -moz-flex;
  235. display: -o-flex;
  236. display: -webkit-flex;
  237. display: -ms-flex;
  238. justify-content: center;
  239. align-items: center;
  240. }
  241. .boxs {
  242. width: 100%;
  243. height: 1.2rem;
  244. display: none;
  245. }
  246. .page {
  247. width: 100%;
  248. }
  249. .boxs1{
  250. width:100%;
  251. height:1.2rem;
  252. display: none;
  253. }
  254. .boxs1Child{
  255. width:100%;
  256. height:1.2rem;
  257. display: flex;
  258. display: -moz-flex;
  259. display: -o-flex;
  260. display: -webkit-flex;
  261. display: -ms-flex;
  262. justify-content: center;
  263. align-items: center;
  264. }
  265. /* .info {
  266. width: 200px;
  267. height: 34px;
  268. line-height: 34px;
  269. }
  270. .fl {
  271. float: left;
  272. } */
  273. .list_item{
  274. display:inline-block;
  275. width:0.64rem;
  276. height:0.64rem;
  277. background:#CE5C2A;
  278. color: #dfdfdf;
  279. font-size:0.24rem;
  280. text-decoration:none;
  281. border-radius:0.08rem;
  282. text-align:center;
  283. line-height:0.64rem;
  284. }
  285. .list_items{
  286. display:inline-block;
  287. width:0.64rem;
  288. height:0.64rem;
  289. background:#CE5C2A;
  290. color: #dfdfdf;
  291. font-size:0.24rem;
  292. text-decoration:none;
  293. border-radius:0.08rem;
  294. text-align:center;
  295. line-height:0.64rem;
  296. }
  297. /* 未满18岁弹窗 */
  298. .ageTipPageParent{
  299. width:100%;
  300. height:100%;
  301. background:rgba(0,0,0,0.6);
  302. display: none;
  303. z-index:999;
  304. position:fixed;
  305. top:0;
  306. left:0;
  307. }
  308. .ageTipPage {
  309. position: fixed;
  310. top: 50%;
  311. left: 50%;
  312. transform: translate(-50%, -50%);
  313. width: 6.22rem;
  314. height:6.5rem;
  315. z-index: 998;
  316. background:#25252A;
  317. border-radius:0.12rem;
  318. }
  319. .ageTipPageContent {
  320. display: flex;
  321. flex-direction: column;
  322. justify-content: center;
  323. align-items: center;
  324. text-align: center;
  325. }
  326. .ageTipPageTitle {
  327. color: #fff;
  328. font-size: 0.55rem;
  329. margin-top: 0.8rem;
  330. }
  331. .ageTipPageText {
  332. margin-top: 0.46rem;
  333. margin-bottom: 0.4rem;
  334. font-size: 0.5rem;
  335. color: #969b9c;
  336. font-weight:100;
  337. }
  338. .ageTipPageText img{
  339. width:68%;
  340. height:auto;
  341. margin:0 auto;
  342. }
  343. .ageTipPageTip {
  344. font-size: 0.26rem;
  345. color: #a09e9e;
  346. line-height:0.36rem;
  347. }
  348. .confirmBtn {
  349. width:4.66rem;
  350. height:1rem;
  351. border-radius:0.5rem;
  352. line-height:1rem;
  353. text-align: center;
  354. color: #fff;
  355. background-color: #CF5731;
  356. margin-top: 0.5rem;
  357. font-size:0.34rem;
  358. }