index.css 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. @import url('./common.css');
  2. main {
  3. width: 100%;
  4. height: 100%;
  5. overflow: hidden;
  6. /*margin-top: 0.88rem;*/
  7. }
  8. .swiper-container {
  9. width: 100%;
  10. height: 100%;
  11. }
  12. .swiper-slide {
  13. overflow: hidden;
  14. position: relative;
  15. }
  16. /*.swiper-video {*/
  17. /* margin-top: -0.88rem;*/
  18. /*}*/
  19. .swiper-notice {
  20. overflow: auto;
  21. }
  22. .swiper-pagination {
  23. z-index: 100;
  24. position: fixed;
  25. }
  26. .swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  27. margin: 0.4rem 0;
  28. }
  29. .swiper-pagination-bullet {
  30. background-color: #D4AA68;
  31. width: 0.2rem;
  32. height: 0.2rem;
  33. }
  34. .swiper-pagination-bullet-active {
  35. opacity: 1;
  36. background-color: #D4AA68
  37. }
  38. .fadeInShrink {
  39. -webkit-animation-name: bgShrink;
  40. animation-name: bgShrink;
  41. -webkit-animation-duration: 5s;
  42. animation-duration: 5s;
  43. -webkit-animation-fill-mode: both;
  44. animation-fill-mode: both;
  45. }
  46. @keyframes bgShrink {
  47. 0% {
  48. transform: scale(1.15, 1.15);
  49. opacity: 1;
  50. }
  51. 100% {
  52. transform: scale(1, 1);
  53. opacity: 1;
  54. }
  55. }
  56. .swiper-slide .advantage {
  57. width: 5.1rem;
  58. height: 0.76rem;
  59. position: absolute;
  60. top: 0.48rem;
  61. left: 50%;
  62. transform: translateX(-50%);
  63. z-index: 100;
  64. }
  65. .swiper-slide ul {
  66. display: flex;
  67. flex-wrap: wrap;
  68. width: 100%;
  69. }
  70. .swiper-slide ul li {
  71. width: 50%;
  72. height: calc(100vh / 2);
  73. background: url('https://cookhome-images-1.oss-cn-hangzhou.aliyuncs.com/guangwangindex/h5/index_slide1.png') no-repeat center;
  74. background-size: cover;
  75. position: relative;
  76. }
  77. .swiper-slide ul li:nth-child(2) {
  78. background: url('https://cookhome-images-1.oss-cn-hangzhou.aliyuncs.com/guangwangindex/h5/index_slide2.png') no-repeat center;
  79. background-size: cover;
  80. }
  81. .swiper-slide ul li:nth-child(3) {
  82. background: url('https://cookhome-images-1.oss-cn-hangzhou.aliyuncs.com/guangwangindex/h5/index_slide3.png') no-repeat center;
  83. background-size: cover;
  84. }
  85. .swiper-slide ul li:nth-child(4) {
  86. background: url('https://cookhome-images-1.oss-cn-hangzhou.aliyuncs.com/guangwangindex/h5/index_slide4.png') no-repeat center;
  87. background-size: cover;
  88. }
  89. .swiper-slide ul li img {
  90. width: 2.4rem;
  91. height: 1.3rem;
  92. position: absolute;
  93. top: 50%;
  94. left: 20%;
  95. transform: translateY(-50%);
  96. cursor: pointer;
  97. }
  98. .swiper-slide ul li:hover {
  99. opacity: 0.7;
  100. }
  101. .swiper-slide ul li:hover img {
  102. transition: opacity 1s, all 0.5s, -webkit-transform 0.5s;
  103. transform: translate3d(0, -1.9rem, 0);
  104. opacity: 1;
  105. }
  106. .swiper-img3 {
  107. margin-top: -0.88rem;
  108. }
  109. .swiper-img img {
  110. width: 100%;
  111. object-fit: cover;
  112. }
  113. .swiper-video video {
  114. width: 100%;
  115. object-fit: cover;
  116. }
  117. .swiper-box {
  118. margin-top: 0.88rem;
  119. }
  120. .notice {
  121. width: 100%;
  122. padding: 0.32rem 0.32rem 0.6rem;
  123. overflow: hidden;
  124. }
  125. .notice_title {
  126. margin-bottom: 0.32rem;
  127. }
  128. .notice_title p {
  129. font-size: 0.36rem;
  130. color: #333;
  131. font-family: PingFang SC-Medium, PingFang SC;
  132. font-weight: 500;
  133. }
  134. .notice_title .more {
  135. display: flex;
  136. align-items: center;
  137. cursor: pointer;
  138. }main .single .title
  139. .notice_title .more span {
  140. font-size: 0.24rem;
  141. }
  142. .notice_title .more img {
  143. width: 0.48rem;
  144. height: 0.48rem;
  145. vertical-align: middle;
  146. margin-left: 0.02rem;
  147. }
  148. .notice_title .more .icon_more {
  149. display: block;
  150. }
  151. .notice_title .more .icon_more_active {
  152. display: none;
  153. }
  154. .notice_title .more:hover .icon_more {
  155. display: none;
  156. }
  157. .notice_title .more:hover .icon_more_active {
  158. display: block;
  159. }
  160. .notice_title .more:hover span {
  161. color: #D4AA68;
  162. }
  163. .notice .single {
  164. width: 100%;
  165. background-color: #F7F7F7;
  166. padding-bottom: 0.48rem;
  167. margin-bottom: 0.24rem;
  168. overflow: hidden;
  169. }
  170. .notice .single img {
  171. width: 100%;
  172. height: 3.34rem;
  173. object-fit: cover;
  174. }
  175. .notice .single .title {
  176. font-size: 0.32rem;
  177. margin: 0.24rem 0;
  178. padding: 0 0.24rem;
  179. }
  180. .notice .single .sub_title {
  181. text-align: left;
  182. line-height: 0.34rem;
  183. font-size: 0.28rem;
  184. padding: 0 0.24rem;
  185. }