index.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. page {
  2. // background: #f2f2f2;
  3. }
  4. .pos{
  5. height: 45px;
  6. }
  7. view {
  8. box-sizing: border-box;
  9. }
  10. .container{
  11. // padding-bottom:85rpx;
  12. width: 100%;
  13. height: 100%;
  14. .context{
  15. padding: 40rpx;
  16. width: 100%;
  17. height: 100%;
  18. video{
  19. width: 100%;
  20. height:calc(100vh - 200rpx);
  21. }
  22. }
  23. }
  24. /* 全屏轮播 start*/
  25. .card-swiper {
  26. height: calc(100vh - 85px)!important;
  27. }
  28. .card-swiper swiper-item {
  29. width: 750rpx !important;
  30. left: 0rpx;
  31. box-sizing: border-box;
  32. overflow: initial;
  33. background: #000;
  34. }
  35. .card-swiper swiper-item .swiper-item {
  36. // width: 100%;
  37. // display: block;
  38. // height: 100vh;
  39. // border-radius: 0rpx;
  40. // transform: scale(0.9);
  41. // transition: all 0.2s ease-in 0s;
  42. // will-change: transform;
  43. // overflow: hidden;
  44. display: flex;
  45. align-items: center;
  46. justify-content: center;
  47. height: 100%;
  48. background: #000;
  49. }
  50. .card-swiper swiper-item.cur .swiper-item {
  51. transform: scale(1);
  52. transition: all 0.2s ease-in 0s;
  53. will-change: transform;
  54. }
  55. .image-banner {
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. }
  60. .image-banner image {
  61. width: 100%;
  62. // height: 100%;
  63. }
  64. /* 轮播指示点 start*/
  65. .indication {
  66. z-index: 9999;
  67. width: 100%;
  68. height: 36rpx;
  69. position: fixed;
  70. display: flex;
  71. flex-direction: row;
  72. align-items: center;
  73. justify-content: center;
  74. }
  75. .spot {
  76. background-color: #FFFFFF;
  77. opacity: 0.6;
  78. width: 10rpx;
  79. height: 10rpx;
  80. border-radius: 20rpx;
  81. top: calc(-280rpx - env(safe-area-inset-bottom) / 2);
  82. top: calc(-280rpx - constant(safe-area-inset-bottom));
  83. margin: 0 8rpx !important;
  84. position: relative;
  85. }
  86. .spot.active {
  87. opacity: 1;
  88. width: 30rpx;
  89. background-color: #FFFFFF;
  90. }
  91. .lazy-load {
  92. background: #000;
  93. display: grid;
  94. align-items: center;
  95. padding-bottom: env(safe-area-inset-bottom);
  96. // height: 100%;
  97. }
  98. .lazy-load view {
  99. width: 100%;
  100. }
  101. .lazy-loading{
  102. background: #000;
  103. height: 100%;
  104. }