scene1.scss 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. @import '../base/mixin.scss';
  2. .comment-page{
  3. display: none;
  4. position: fixed;
  5. z-index: 1000;
  6. top: 0;
  7. left: 0;
  8. right: 0;
  9. bottom: 0;
  10. overflow: auto;
  11. background: url('../../img/comment-bg.jpg') center center no-repeat;
  12. background-size: cover;
  13. .book-header{
  14. height: px2rem(100);
  15. line-height: px2rem(100);
  16. background: url('../../img/hunter-logo.png') 10px center no-repeat;
  17. background-size: px2rem(786) px2rem(63);
  18. padding-left: px2rem(900);
  19. }
  20. .mod-btn{
  21. display: inline-block;
  22. width: px2rem(160);
  23. line-height: px2rem(50);
  24. height: px2rem(50);
  25. word-spacing: 4px;
  26. text-align: center;
  27. color: #fffefe;
  28. font-size: px2rem(20);
  29. background-color: #080807;
  30. margin-right: px2rem(46);
  31. cursor: pointer;
  32. &.active{
  33. background-color: #ff6600;
  34. color: #ffffff;
  35. }
  36. }
  37. .go-back-btn{
  38. float: right;
  39. width: px2rem(158);
  40. line-height: px2rem(66);
  41. font-size: px2rem(20);
  42. background-color: #ff6600;
  43. color: #ffffff;
  44. border-radius: px2rem(33);
  45. text-align: center;
  46. margin-top: px2rem(30);
  47. margin-right: px2rem(20);
  48. cursor: pointer;
  49. }
  50. .page-comment{
  51. display: none;
  52. }
  53. .page-book{
  54. overflow: auto;
  55. }
  56. .fl{
  57. float: left;
  58. }
  59. .fr{
  60. float: right;
  61. }
  62. .book-modal{
  63. // position: absolute;
  64. // z-index: 1;
  65. // top: px2rem(100);
  66. // left: px2rem(30);
  67. // right: px2rem(30);
  68. padding: px2rem(20);
  69. margin: 0 px2rem(30);
  70. border-top: 2px solid #ff6600;
  71. background-color: rgba($color: #000000, $alpha: .5);
  72. img{
  73. width: px2rem(350);
  74. height: auto;
  75. &.fr{
  76. margin-left: px2rem(20);
  77. }
  78. &.fl{
  79. margin-right: px2rem(20);
  80. }
  81. }
  82. .info{
  83. margin-right: px2rem(370);
  84. }
  85. h3{
  86. color: #ffffff;
  87. font-size: px2rem(30);
  88. margin-bottom: px2rem(10);
  89. }
  90. p{
  91. color: #ffffff;
  92. font-size: px2rem(24);
  93. line-height: 1.6;
  94. }
  95. }
  96. .book-btn-bottom{
  97. // position: absolute;
  98. // z-index: 10;
  99. // bottom: px2rem(220);
  100. // left: 50%;
  101. display: block;
  102. width: px2rem(208);
  103. margin: px2rem(50) auto;
  104. // margin-left: -px2rem(104);
  105. height: px2rem(70);
  106. line-height: px2rem(70);
  107. cursor: pointer;
  108. background-color: #ff6600;
  109. color: #ffffff;
  110. text-align: center;
  111. text-decoration: none;
  112. }
  113. .poster-wrapper{
  114. // position: absolute;
  115. // cursor: pointer;
  116. // bottom: px2rem(24);
  117. // left: 0;
  118. // right: 0;
  119. // margin-top: px2rem(40);
  120. text-align: center;
  121. img{
  122. display: inline-block;
  123. width: px2rem(272);
  124. margin: 0 px2rem(32);
  125. }
  126. }
  127. video{
  128. width: px2rem(1000);
  129. }
  130. .page-comment{
  131. width: 1100px;
  132. margin: 0 auto;
  133. iframe{
  134. height: px2rem(840);
  135. overflow: auto;
  136. }
  137. }
  138. }