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.

227 lines
3.5 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul,
  6. li {
  7. list-style: none;
  8. }
  9. /*遮罩*/
  10. .mask {
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. z-index: 99;
  15. background: rgba(245, 224, 182, 0.4);
  16. display: none;
  17. }
  18. .imgs {
  19. /*background: url(../img/5.jpg) no-repeat;*/
  20. /*background-size: 100% 100%;*/
  21. position: relative;
  22. overflow: hidden;
  23. }
  24. .imgs img {
  25. width: 100%;
  26. height: 100%;
  27. position: absolute;
  28. }
  29. #container {
  30. position: absolute;
  31. left: 50%;
  32. top: 50%;
  33. transform: translate(-50%, -50%);
  34. /*z-index: 999;*/
  35. width: 55%;
  36. height: 90%;
  37. }
  38. #container canvas {
  39. width: 100% !important;
  40. height: 100% !important;
  41. opacity: 1;
  42. border-radius: 50%;
  43. }
  44. /*.xuanwo{
  45. position: absolute;
  46. left: 50%;
  47. top: 50%;
  48. transform: translate(-50%,-50%);
  49. width: 2rem;
  50. height: 2rem;
  51. }
  52. .xuanwo img{
  53. width: 100%;
  54. height: 100%;
  55. }*/
  56. /*翻书结束后的文字*/
  57. .bookImg {
  58. width: 100%;
  59. height: 100%;
  60. position: absolute;
  61. left: 0;
  62. top: 0;
  63. z-index: 9999;
  64. /*display: none;*/
  65. opacity: 0;
  66. }
  67. .bookImg img {
  68. width: 100%;
  69. height: 100%;
  70. }
  71. .word {
  72. position: absolute;
  73. left: 50%;
  74. top: 20%;
  75. display: none;
  76. /*display: flex;*/
  77. width: 65%;
  78. -webkit-transform: rotateX(30deg);
  79. -ms-transform: rotateX(30deg);
  80. -o-transform: rotateX(30deg);
  81. transform: rotateX(30deg);
  82. transform: translateX(-50%);
  83. }
  84. .word p {
  85. font-size: .25rem;
  86. }
  87. .word p.title {
  88. flex: 1;
  89. text-align: center;
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. font-size: .45rem;
  94. margin-right: 2rem;
  95. margin-top: -.5rem;
  96. height: 4.5rem;
  97. font-weight: bold;
  98. }
  99. .word p.contWord {
  100. width: 44%;
  101. height: 4.5rem;
  102. overflow-y: auto;
  103. display: none;
  104. }
  105. .word p.contWord::-webkit-scrollbar-track-piece {
  106. background-color: #999;
  107. border-left: 1px solid #999;
  108. }
  109. .word p.contWord::-webkit-scrollbar {
  110. width: 1px;
  111. height:.13rem;
  112. -webkit-border-radius: 1px;
  113. -moz-border-radius: 1px;
  114. border-radius: 1px;
  115. }
  116. .word p.contWord::-webkit-scrollbar-thumb {
  117. background-color: rgba(0, 0, 0, 0.5);
  118. background-clip: padding-box;
  119. -webkit-border-radius: 1px;
  120. -moz-border-radius: 1px;
  121. border-radius: 1px;
  122. min-height: pxTorem(28px);
  123. }
  124. .word p.contWord::-webkit-scrollbar-thumb:hover {
  125. background-color: rgba(0, 0, 0, 0.5);
  126. -webkit-border-radius: 1px;
  127. -moz-border-radius: 1px;
  128. border-radius: 1px;
  129. }
  130. .bookImg .btn1 {
  131. position: absolute;
  132. left: 50%;
  133. bottom: 3%;
  134. z-index: 99999;
  135. display: none;
  136. transform: translateX(-50%);
  137. /*background: url(../img/game2/titleIcon.png) no-repeat;*/
  138. }
  139. .bookImg .btn1 span {
  140. font-size: .36rem;
  141. color: #fff;
  142. display: flex;
  143. /* margin: 0 auto; */
  144. justify-content: center;
  145. align-items: flex-end;
  146. width: 3.83rem;
  147. height: .72rem;
  148. line-height: .72rem;
  149. position: absolute;
  150. border-radius: 12px;
  151. left: 50%;
  152. bottom: 0%;
  153. background: rgba(0, 0, 0, 0.5);
  154. transform: translateX(-50%);
  155. }
  156. .bookImg .btn1 p {
  157. width: 3.83rem;
  158. height: .72rem;
  159. background: #999;
  160. border-radius: 12px;
  161. margin: 0.5rem auto 0;
  162. color: #fff;
  163. font-size: .36rem;
  164. text-align: center;
  165. line-height: .82rem;
  166. }
  167. .bookImg .btn1 p.active {
  168. background: #E40006;
  169. }
  170. /*提示框*/
  171. .maskBox{
  172. width: 100%;
  173. height: 100%;
  174. position: fixed;
  175. left: 0;
  176. top: 0;
  177. background: #000;
  178. opacity: 1;
  179. z-index: 99999;
  180. display: flex;
  181. flex-direction: column;
  182. align-items: center;
  183. justify-content: center;
  184. display: none;
  185. }
  186. .maskBox p{
  187. color: #fff;
  188. font-size: .4rem;
  189. line-height: .8rem;
  190. text-align: center;
  191. }
  192. .maskBox p.gjIcon{
  193. width: 1.5rem !important;
  194. height: 1.5rem !important;
  195. margin-top: 1rem;
  196. }
  197. .maskBox p.gjIcon img{
  198. width: 100% !important;
  199. height: 100% !important;
  200. }