You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

267 lines
3.7 KiB

3 years ago
  1. #wrap {
  2. background: url(../img/game5/game5Bgm.png) no-repeat;
  3. background-size: 100% 100%;
  4. overflow: hidden;
  5. position: relative;
  6. }
  7. .tipsNum {
  8. width: 1.45rem;
  9. height: 3.2rem;
  10. position: absolute;
  11. left: 0;
  12. top: 50%;
  13. transform: translateY(-50%);
  14. }
  15. .tipText {
  16. position: absolute;
  17. top: 40%;
  18. transform: translateY(-40%);
  19. right: .65rem;
  20. width: .8rem;
  21. height: 4.32rem;
  22. }
  23. .tipText ul {
  24. display: flex;
  25. }
  26. .tipText ul li {
  27. flex: 1;
  28. text-align: center;
  29. color: #333;
  30. font-size: .26rem;
  31. }
  32. .tipsNum img {
  33. width: 100%;
  34. height: 100%;
  35. }
  36. .titleIcon {
  37. margin-top: .1rem;
  38. margin-left: .1rem;
  39. }
  40. .titleIcon ul {
  41. display: flex;
  42. justify-content: flex-end;
  43. }
  44. .titleIcon ul li {
  45. width: .98rem;
  46. height: 1.24rem;
  47. }
  48. .titleIcon ul li img {
  49. width: 100%;
  50. height: 100%;
  51. }
  52. /*内容区*/
  53. .cont_wrap {
  54. width: 10rem;
  55. height: 5.17rem;
  56. margin: 0 auto;
  57. background: url(../img/game5/bgm1.png) no-repeat;
  58. background-size: 100% 100%;
  59. overflow: hidden;
  60. }
  61. .contList ul{
  62. margin-top: .5rem;
  63. }
  64. .contList li{
  65. display: none;
  66. }
  67. .cont_wrap li.end {
  68. width: 9rem;
  69. height: .8rem;
  70. margin: 1.2rem auto 0;
  71. color: #9E6538;
  72. font-size: .32rem;
  73. }
  74. /*人物名称*/
  75. .tipList {
  76. width: 9rem;
  77. display: flex;
  78. margin: 0 auto;
  79. }
  80. .tipList div.nameItem{
  81. display: none;
  82. width: 100%;
  83. }
  84. .tipList ul {
  85. width: 100%;
  86. display: flex;
  87. flex-wrap: wrap;
  88. justify-content: space-between;
  89. margin-top: .5rem;
  90. }
  91. .tipList ul li {
  92. width: 19%;
  93. margin-top: .25rem;
  94. position: relative;
  95. }
  96. .tipList ul li p {
  97. font-size: .32rem;
  98. width: 100%;
  99. }
  100. .tipList div.left {
  101. width: 100%;
  102. height: .87rem;
  103. /*background: linear-gradient(to bottom, #F4846B , #F64A32);*/
  104. background: linear-gradient(to bottom, #FFD581, #F4A200);
  105. border-radius: .44rem;
  106. display: flex;
  107. line-height: .87rem;
  108. color: #FFFFFF;
  109. font-size: .32rem;
  110. text-align: center;
  111. }
  112. .tipList div.left p.chose {
  113. height: 0.7rem;
  114. margin-top: .09rem;
  115. margin-left: .33rem;
  116. padding-right: .18rem;
  117. border-right: 1px solid #fff;
  118. display: flex;
  119. align-items: center;
  120. margin-right: .2rem;
  121. }
  122. }
  123. .tipList div.left p.name {
  124. margin-left: .38rem;
  125. }
  126. .tipList ul li.active div.left {
  127. background: linear-gradient(to bottom, #F4846B, #F64A32);
  128. }
  129. .choseIcon {
  130. position: absolute;
  131. right: .1rem;
  132. bottom: 0.1rem;
  133. }
  134. .choseIcon p.trueIcon {
  135. width: .83rem;
  136. height: .63rem;
  137. display: none;
  138. }
  139. .choseIcon p.falseIcon {
  140. width: .61rem;
  141. height: .61rem;
  142. display: none;
  143. }
  144. .choseIcon p img {
  145. width: 100%;
  146. height: 100%;
  147. }
  148. /*按钮*/
  149. .btn {}
  150. .sureBtn {
  151. width: 2.83rem;
  152. height: .72rem;
  153. position: absolute;
  154. bottom: 19%;
  155. left: 50%;
  156. transform: translateX(-50%);
  157. }
  158. .sureBtn img {
  159. width: 100%;
  160. height: 100%;
  161. }
  162. .nextBtn {
  163. display: none;
  164. width: 2.13rem;
  165. height: .72rem;
  166. position: absolute;
  167. bottom: 15%;
  168. right: 0;
  169. font-size: 0;
  170. }
  171. .nextBtn img {
  172. width: 100%;
  173. height: 100%;
  174. }
  175. /*成功后的样子*/
  176. .successCont {
  177. position: absolute;
  178. left: 0;
  179. top: 20%;
  180. width: 100%;
  181. height: 100%;
  182. display: none;
  183. }
  184. .nameList {
  185. display: flex;
  186. width: 100%;
  187. justify-content: flex-end;
  188. }
  189. .nameList li {
  190. width: 18%;
  191. margin-left: .1rem;
  192. }
  193. .nameList li p {
  194. height: .98rem;
  195. width: 100%;
  196. background: url(../img/game2/titleIcon.png) no-repeat;
  197. background-size: 100% 100%;
  198. font-size: .32rem;
  199. text-align: center;
  200. box-sizing: border-box;
  201. padding: .18rem .2rem;
  202. color: #fff;
  203. display: flex;
  204. align-items: center;
  205. justify-content: center;
  206. }
  207. .textList {
  208. margin-left: .5rem;
  209. margin-top: 1rem;
  210. }
  211. .textList ul {
  212. width: 100%;
  213. display: flex;
  214. justify-content: flex-end;
  215. }
  216. .textList li {
  217. width: 18%;
  218. height: 100%;
  219. margin-right: .1rem;
  220. font-size: .18rem;
  221. background: #F4BA78;
  222. border: 1px solid #D01217;
  223. border-radius: 7px;
  224. box-sizing: border-box;
  225. padding: .05rem .1rem;
  226. }
  227. /*成功后的样子end*/