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.

266 lines
3.6 KiB

  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. }
  170. .nextBtn img {
  171. width: 100%;
  172. height: 100%;
  173. }
  174. /*成功后的样子*/
  175. .successCont {
  176. position: absolute;
  177. left: 0;
  178. top: 20%;
  179. width: 100%;
  180. height: 100%;
  181. display: none;
  182. }
  183. .nameList {
  184. display: flex;
  185. width: 100%;
  186. justify-content: flex-end;
  187. }
  188. .nameList li {
  189. width: 18%;
  190. margin-left: .1rem;
  191. }
  192. .nameList li p {
  193. height: .98rem;
  194. width: 100%;
  195. background: url(../img/game2/titleIcon.png) no-repeat;
  196. background-size: 100% 100%;
  197. font-size: .32rem;
  198. text-align: center;
  199. box-sizing: border-box;
  200. padding: .18rem .2rem;
  201. color: #fff;
  202. display: flex;
  203. align-items: center;
  204. justify-content: center;
  205. }
  206. .textList {
  207. margin-left: .5rem;
  208. margin-top: 1rem;
  209. }
  210. .textList ul {
  211. width: 100%;
  212. display: flex;
  213. justify-content: flex-end;
  214. }
  215. .textList li {
  216. width: 18%;
  217. height: 100%;
  218. margin-right: .1rem;
  219. font-size: .18rem;
  220. background: #F4BA78;
  221. border: 1px solid #D01217;
  222. border-radius: 7px;
  223. box-sizing: border-box;
  224. padding: .05rem .1rem;
  225. }
  226. /*成功后的样子end*/