| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- .B1more {
- position: relative;
- :global {
- video {
- width: 100%;
- height: 100%;
- object-fit: fill;
- }
- // 底部三个按钮
- .A6floorBox {
- position: absolute;
- bottom: 20px;
- left: 50%;
- transform: translate(-50%);
- display: flex;
- z-index: 10;
- transition: opacity 1s;
- & > div {
- width: 100px;
- height: 36px;
- background-size: 100% 100%;
- transition: all 0.3s;
- background-image: url('../../assets/img/icon-gengduo.png');
- display: flex;
- justify-content: center;
- align-items: center;
- color: #fffddc;
- margin-right: 10px;
- cursor: pointer;
- &:last-child {
- margin-right: 0;
- }
- &:hover {
- background-image: url('../../assets/img/icon-gengduo1.png');
- color: #a55b41;
- }
- }
- .A6FrowAc {
- background-image: url('../../assets/img/icon-gengduo1.png');
- color: #a55b41;
- }
- }
- // 右下角的按钮
- .A6rBtn {
- position: absolute;
- z-index: 10;
- right: 10px;
- bottom: 10px;
- display: flex;
- transition: opacity 1s;
- & > div {
- cursor: pointer;
- width: 50px;
- height: 50px;
- background-size: 100% 100%;
- transition: all 0.3s;
- }
- .A6rBtn1 {
- background-image: url('../../assets/img/icon-mol.png');
- &:hover {
- background-image: url('../../assets/img/icon-mol1.png');
- }
- }
- .A6rBtn2 {
- background-image: url('../../assets/img/icon-xuanju.png');
- margin-right: 5px;
- &:hover {
- background-image: url('../../assets/img/icon-xuanju1.png');
- }
- }
- }
- // 6个视频
- .A6videoBox {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 20;
- opacity: 0;
- pointer-events: none;
- // transition: all 1s;
- }
- .A6videoBoxShow {
- opacity: 1;
- pointer-events: auto;
- }
- // 左下角按钮
- .A1LeftVideoBtn {
- position: absolute;
- z-index: 10;
- width: 30px;
- height: 30px;
- cursor: pointer;
- bottom: 15px;
- left: 20px;
- }
- #BtnRight {
- top: 50%;
- bottom: auto;
- transform: translateY(-50%);
- }
- }
- }
|