.bg{ width: 10rem; margin: 0 auto; } .down{ position: fixed; width: 10rem; height: 1.1rem; z-index: 2500; background: #FF299D; .down-l{ img{ position: absolute; width: 0.9rem; vertical-align: middle; height: 0.9rem; top: 0.1rem; left: 0.2rem; } } } .down-bottom{ position: fixed; width: 10rem; display: none; bottom: 0; height: 1.1rem; z-index: 2500; background: #FF299D; .down-l{ img{ position: absolute; width: 1.1rem; vertical-align: middle; height: 1.4rem; top: -0.6rem; left: 0.2rem; } } .down-font{ position: absolute; color: #ffffff; top: 0.3rem; font-size: 0.33rem; left: 1.5rem; } } .down-font{ position: absolute; color: #ffffff; top: 0.3rem; font-size: 0.33rem; left: 1.3rem; } .down-btn{ position: absolute; height: 0.9rem; width: 2.2rem; background: #ffffff; color: #FF299D; font-size: 0.33rem; text-align: center; line-height: 0.9rem; border-radius: 1rem; top: 0.1rem; right: 0.2rem; } .video-play{ position: relative; overflow: hidden; height: 17rem; width: 10rem; } .video-play-bg{ position: absolute; overflow: hidden; height: 100%; width: 10rem; //background: url("https://zhibocdn.yabolive.net/comm/user/img/434467/222f3e5ea31b43b79efb6a60a2aa2d04.jpg"); //background-size: 100% 100%; background-color: rgba(0,0,0,0.3); -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); //img{ // position: absolute; // z-index: 5; // height: 100%; // width: 10rem; // background-size: 100% 100%; // background-color: rgba(0,0,0,0.3); // -webkit-filter: blur(7px) !important; // -moz-filter: blur(7px) !important; // -ms-filter: blur(7px) !important; // -o-filter: blur(7px) !important; // filter: blur(7px) !important; //} } .box-img{ position: relative; height: 100%; width: 10rem; overflow: hidden; background: #f3f3f3; } .bg-img{ position: absolute; left: 50%; margin-left:-300px; top: 50%; margin-top: -300px; width: 600px; height: 600px; background-color: rgba(0, 0, 0, 0.3); -webkit-filter: blur(15px); -moz-filter: blur(15px); -ms-filter: blur(15px); -o-filter: blur(15px); filter: blur(15px); } .video-play-bg1{ position: absolute; overflow: hidden; height: 100%; width: 10rem; } .more-video{ width: 10rem; height: 15rem; } .more-h1{ height: 1.5rem; width: 10rem; line-height: 1.5rem; text-align: center; color: #FF299D; font-size: 0.5rem; img{ vertical-align: middle; width: 0.5rem; } } .more-ul{ width: 10rem; margin-left: 0.14rem; li{ position: relative; float: left; width: 3.15rem; margin-right: 0.14rem; margin-bottom:0.14rem; height: 3.15rem; img{ width: 3.15rem; height: 3.15rem; } .live{ position: absolute; background: rgba(0, 0, 0, 0.5); border-radius: 0.5rem; text-align: center; width: 1.2rem; height: 0.4rem; font-size: 0.3rem; line-height: 0.4rem; color: #ffffff; right: 0.1rem; top: 0.15rem; .dian{ position: absolute; width: 0.11rem; height: 0.11rem; left: 0.15rem; top: 0.15rem; border-radius: 50%; background: #FF299D; } } } } .live-text{ margin-left: 0.2rem; } .play-btn{ position: absolute; width: 3rem; height: 3rem; top: 50%; left: 50%; margin-top:-1.5rem; margin-left:-1.5rem; z-index: 2000; img{ width: 3rem; height: 3rem; } } .play-bottom{ position: absolute; bottom: 0; width: 9.4rem; height: 1.5rem; margin-left: 0.3rem; z-index: 20; border-top: 0.05rem solid #ffffff; img{ width: 1.2rem; float: right; margin-top: 0.3rem; margin-right: 0.25rem; } input{ height: 1.1rem; margin-top: 0.3rem; margin-left: 0.05rem; width: 7.4rem; border-radius: 1rem; color: #999999; font-size: 0.4rem; text-indent: 0.5rem; background: #FF299D; } } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ffffff; opacity:1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ffffff;opacity:1; } input:-ms-input-placeholder{ color: #ffffff;opacity:1; } input::-webkit-input-placeholder{ color: #ffffff;opacity:1; } .bg{ position: relative; width: 10rem; margin: 0 auto; } .guanzhu{ position: absolute; right: 0.3rem; top: 1.8rem; background: #FF299D; width: 1.5rem; height: 0.6rem; line-height: 0.6rem; color: #ffffff; text-align: center; font-size: 0.35rem; z-index: 500; border-radius: 0.5rem; text-indent: 0.5rem; } .name-more{ position: absolute; left: 0.2rem; top: 1.5rem; z-index: 500; width: 3.5rem; height: 1.2rem; border-radius: 100px; background: rgba(0, 0, 0, 0.3); img{ width: 1rem; height: 1rem; position: absolute; border-radius: 50%; left: 0.1rem; top: 0.1rem; } .name{ display: inline-block; position: absolute; color: #ffffff; font-size: 0.37rem; left: 1.05rem; width: 2.3rem; top: 0.1rem; text-align: center; } .hot{ display: inline-block; position: absolute; color: #ffffff; font-size: 0.4rem; left: 1.05rem; width: 2.2rem; top: 0.65rem; text-align: center; } } .end{ position: absolute; z-index: 2000; left: 50%; margin-left:-2rem; top: 50%; margin-top:-1.5rem; width: 4rem; height: 3rem; .text1{ display: inline-block; width: 4rem; height: 1.5rem; line-height: 1.5rem; color: #ffffff; font-size: 0.8rem; text-align: center; } .text2{ display: inline-block; width: 4rem; background: #ffffff; color: #393939; height: 1rem; border-radius: 0.8rem; line-height: 1rem; text-align: center; font-size: 0.45rem; } } .weixin-img{ position: fixed; width: 100%; height: 100%; background-size: 100% 100%; z-index: 10000; } .add{ font-size: 0.5rem; font-weight: 700; left: -0.3rem; /* top: -0.02rem; */ height: 0.6rem; top: 50%; margin-top: -0.3rem; position: absolute; } .zhuan{ position: absolute; width: 3rem; height: 3rem !important; left:3.5rem; z-index: 5; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); top: 50%; margin-top: -1.5rem; height: 3rem; transform: rotate(0deg); animation: rot 2s linear infinite; } @keyframes rot{ form{transform: rotate(0deg)} to{transform: rotate(360deg)} } .shadow-img{ display: none; width: 10rem; position: fixed; height: 100vh; top: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 10000; img{ position: absolute; top: 0; right: 0; width: 6.98rem; } }