.container { position: relative; } .swiper { width: 100vw; } .swiper image { width: 100vw; } .indicatorDots { display: flex; padding: 20rpx auto 0; justify-content: center; align-items: flex-end; height: 40rpx; z-index: 10; } .indicatorDots .inner { display: inline-flex; height: 20rpx; border-radius: 40rpx; align-items: center; } .indicatorDots .inner .i { display: inline-flex; margin-left: 12rpx; width: 12rpx; height: 12rpx; background-color: #ccc; border-radius: 50%; } .indicatorDots-inner { position: absolute; right: 30rpx; bottom: 10rpx; } .indicatorDots-inner .inner { padding: 0; } .indicatorDots-inner .inner .i { background: #cacaca; } .indicatorDots-inner2 { position: absolute; right: 30rpx; bottom: 40rpx; height: auto; } .indicatorDots-inner2 .inner { height: auto; } .indicatorDots-inner2 .inner .i { background: #f1f1f1; } .indicatorDots .inner .active { background: #C63E3A; } .submit-form { display: block; /* position: relative; */ } .info-list .submit-form { padding: 44rpx 30rpx; } .submit-form button { background: transparent; border: none; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; } .submit-form button::before, .submit-form button::after { border: none; } .text { position: absolute; bottom: 20rpx; right: 40rpx; color: #fff; font-size: 22rpx; background: rgba(0, 0, 0, 0.4); border-radius: 20rpx; height: 40rpx; line-height: 40rpx; display: flex; align-items: center; justify-content: center; padding: 0 14rpx; } .img-box .play { position: absolute; width: 100rpx; height: 100rpx; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; border: 1px solid #fff; z-index: 14; } .container .img-box .play image { flex: 0 0 36rpx; width: 36rpx; height: 36rpx; margin-left: 8rpx; } .tab { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; /* width: 200rpx; */ height: 80rpx; align-items: center; } .tab .item { display: inline-flex; flex: 1; height: 100%; align-items: center } .tab .item .inner { display: inline-flex; /* flex: 1; */ background: rgba(255, 255, 255, 0.9); height: 42rpx; width: 84rpx; font-size: 22rpx; } .tab .item:first-of-type .inner { border-radius: 20rpx 0 0 20rpx; } .tab .item:last-of-type .inner { border-radius: 0 20rpx 20rpx 0; } .tab .item .texts { display: inline-flex; flex: 1; border-radius: 20rpx; justify-content: center; align-items: center; color: #555555; } .tab .item.active .texts { color: #fff; background: rgba(249, 93, 93, 1); } .video-box { width: 100vw; height: 100vh; z-index: 1000; background: rgba(0, 0, 0, 0.8); position: fixed; left: 0; top: 0; } .video-box .close { position: fixed; left: 20rpx; top: 20rpx; width: 50rpx; height: 50rpx; z-index: 1001 } .video-box video { width: 100vw; height: 100vh; z-index: 1001 } .cover { position: fixed; left: 5px; top: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box; } .cover .image { width: 30rpx; height: 30rpx; } .newcontainer { padding: 0 30rpx; } .newcontainer .swiper { width: 690rpx; } .newcontainer .swiper image { width: 690rpx; height: 459rpx; border-radius: 40rpx; box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.0823529411764706); } .newcontainer .swiper .play-btn { position: absolute; top: 50%; left: 50%; width: 75rpx; height: 75rpx; transform: translate(-50%, -50%); }