index.module.scss 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. .B1more {
  2. position: relative;
  3. :global {
  4. video {
  5. width: 100%;
  6. height: 100%;
  7. object-fit: fill;
  8. }
  9. // 底部三个按钮
  10. .A6floorBox {
  11. position: absolute;
  12. bottom: 20px;
  13. left: 50%;
  14. transform: translate(-50%);
  15. display: flex;
  16. z-index: 10;
  17. transition: opacity 1s;
  18. & > div {
  19. width: 100px;
  20. height: 36px;
  21. background-size: 100% 100%;
  22. transition: all 0.3s;
  23. background-image: url('../../assets/img/icon-gengduo.png');
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. color: #fffddc;
  28. margin-right: 10px;
  29. cursor: pointer;
  30. &:last-child {
  31. margin-right: 0;
  32. }
  33. &:hover {
  34. background-image: url('../../assets/img/icon-gengduo1.png');
  35. color: #a55b41;
  36. }
  37. }
  38. .A6FrowAc {
  39. background-image: url('../../assets/img/icon-gengduo1.png');
  40. color: #a55b41;
  41. }
  42. }
  43. // 右下角的按钮
  44. .A6rBtn {
  45. position: absolute;
  46. z-index: 10;
  47. right: 10px;
  48. bottom: 10px;
  49. display: flex;
  50. transition: opacity 1s;
  51. & > div {
  52. cursor: pointer;
  53. width: 50px;
  54. height: 50px;
  55. background-size: 100% 100%;
  56. transition: all 0.3s;
  57. }
  58. .A6rBtn1 {
  59. background-image: url('../../assets/img/icon-mol.png');
  60. &:hover {
  61. background-image: url('../../assets/img/icon-mol1.png');
  62. }
  63. }
  64. .A6rBtn2 {
  65. background-image: url('../../assets/img/icon-xuanju.png');
  66. margin-right: 5px;
  67. &:hover {
  68. background-image: url('../../assets/img/icon-xuanju1.png');
  69. }
  70. }
  71. }
  72. // 6个视频
  73. .A6videoBox {
  74. position: absolute;
  75. top: 0;
  76. left: 0;
  77. width: 100%;
  78. height: 100%;
  79. z-index: 20;
  80. opacity: 0;
  81. pointer-events: none;
  82. // transition: all 1s;
  83. }
  84. .A6videoBoxShow {
  85. opacity: 1;
  86. pointer-events: auto;
  87. }
  88. // 左下角按钮
  89. .A1LeftVideoBtn {
  90. position: absolute;
  91. z-index: 10;
  92. width: 30px;
  93. height: 30px;
  94. cursor: pointer;
  95. bottom: 15px;
  96. left: 20px;
  97. }
  98. #BtnRight {
  99. top: 50%;
  100. bottom: auto;
  101. transform: translateY(-50%);
  102. }
  103. }
  104. }