.container { align-items: center; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; justify-content: space-between; padding: 200rpx 0; } navigator { -webkit-tap-highlight-color: rgba(0,0,0,0); } .clear:after { clear: both; content: " "; display: block; font-size: 0; height: 0; overflow: hidden; visibility: hidden; } button::after { border: 0; } .inpbox { background: #fff; border-radius: 82rpx; margin: 60rpx auto 0; width: 446rpx; } .inpbox,.inpbox .text { height: 82rpx; overflow: hidden; } .inpbox .text { background: none; box-sizing: border-box; color: #a9a9a9; display: block; font-size: 36rpx; line-height: 82rpx; padding: 0 30rpx; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .inpbox .notempty,.notempty { color: #5088eb; } .bg_t { background: url(http://api.xzw.com/static/image/xcx/qq/bg_t.png) no-repeat 0 0; background-size: 100% 447rpx; height: 447rpx; position: fixed; top: 0; } .bg,.bg_t { width: 100%; } .bg { background-attachment: fixed; background-size: cover; height: 100%; } .b_cloud { background-size: 100% 130rpx; height: 130rpx; left: 0; position: fixed; width: 100%; } .mainbox { background: rgba(0,0,0,.15); border-radius: 25rpx; margin-top: 10rpx; padding: 20rpx; } .star1,.star1 .star_on { background: url(https://m.xzw.com/static/public/images/icon_star_sx.png) repeat 0 0; background-size: 60rpx 120rpx; height: 60rpx; } .star1 { width: 300rpx; } .star1 .star_on { background-position: 0 -60rpx; } .star2,.star2 .star_on { background: url(https://m.xzw.com/static/public/images/icon_star_ap.png) repeat-x 0 0; background-size: 35rpx 70rpx; height: 35rpx; } .star2 { width: 175rpx; } .star2 .star_on { background-position: 0 -35rpx; } .layer { background: rgba(0,0,0,.6); height: 100%; left: 0; top: 0; z-index: 99; } .float_box,.layer { position: fixed; width: 100%; } .float_box { bottom: -100%; z-index: 9999; } .float_box .f_title { height: 80rpx; } .float_box .f_title .f_titleimg { height: 80rpx; width: 100%; } .float_box .f_main { background: #fff; position: relative; } .float_box .f_main .f_ul { padding: 20rpx 20rpx 0; } .float_box .f_main .f_ul .f_li { float: left; margin-bottom: 30rpx; text-align: center; width: 25%; } .float_box .f_main .f_ul .f_li .f_libg { background: #f3f3ff; border-radius: 140rpx; display: block; height: 110rpx; margin: 0 auto 5rpx; padding: 10rpx; width: 110rpx; } .float_box .f_main .f_ul .f_li .f_libg .f_liimg { height: 110rpx; width: 110rpx; } .float_box .f_main .f_ul .f_li .f_litxt { color: #888; font-size: 28rpx; } .float_box .f_main .ico { height: 52rpx; padding: 10rpx; position: absolute; top: -50rpx; width: 52rpx; } .float_box .f_main .ico_no { left: 10rpx; } .float_box .f_main .ico_yes { right: 10rpx; } .float_box .f_main .ico_img { height: 52rpx; width: 52rpx; } .float_box .f_main .pair_con { float: left; overflow-x: hidden; padding: 10rpx 0; position: relative; width: 180rpx; } .float_box .f_main .pair_con .swiper-wrapper { box-sizing: border-box; height: 600rpx; padding: 0 12rpx; width: 204rpx; } .float_box .f_main .pair_con .swiper-slide { height: 180rpx; padding: 16rpx 0; text-align: center; transition: .4s; width: 180rpx; } .float_box .f_main .pair_con .swiper-slide .pair_conbg { background: #eee; border-radius: 130rpx; display: inline-block; height: 100rpx; padding: 15rpx; width: 100rpx; } .float_box .f_main .pair_con .swiper-slide .pair_conbg .pair_conimg { height: 100rpx; opacity: .5; width: 100rpx; } .float_box .f_main .pair_con .swiper-slide .pair_context { color: #999; display: block; font-size: 28rpx; margin-top: 10rpx; } .float_box .f_main .pair_con .swiper-slide-active { transform: scale(1.2); } .float_box .f_main .pair_con .swiper-slide-active .pair_conbg .pair_conimg { opacity: 1; } .float_box .f_main .male_con .swiper-slide-active .pair_conbg { background: #e2eaff; } .float_box .f_main .female_con .swiper-slide-active .pair_conbg { background: #ffe9e9; } .float_box .f_main .male_con .swiper-slide-active .pair_context { color: #6d96f0; } .float_box .f_main .female_con .swiper-slide-active .pair_context { color: #f65170; } .float_box .f_main .pair_female,.float_box .f_main .pair_male { color: #aaa; font-size: 32rpx; margin-top: 270rpx; padding: 0 18rpx; } .float_box .f_main .pair_male { float: left; } .float_box .f_main .pair_female { float: right; } .float_box .f_main .pair_line { float: left; margin: 260rpx 20rpx; } .float_box .f_main .pair_line .pair_lineimg { height: 72rpx; width: 150rpx; } .tip_box { border-radius: 14rpx; box-shadow: 0 2px 8px rgba(0,0,0,.3); height: 238rpx; left: 50%; margin: -119rpx 0 0 -205rpx; text-align: center; top: 50%; width: 410rpx; } .tip_box .ico_tip { display: block; height: 90rpx; margin: 0 auto 30rpx; width: 90rpx; } .tip_box .text_tip { color: #555; display: block; font-size: 34rpx; } .slidedown { bottom: -100%; } .slideup { bottom: 0; } @-webkit-keyframes slidedown { from { bottom: 0; } to { bottom: -100%; } } @keyframes slidedown { from { bottom: 0; } to { bottom: -100%; } } @-webkit-keyframes slideup { from { bottom: -100%; } to { bottom: 0; } } @keyframes slideup { from { bottom: -100%; } to { bottom: 0; } } .bg { background-image: url(http://api.xzw.com/static/image/xcx/qq/bg3.jpg); } .b_cloud { background-image: url(http://api.xzw.com/static/image/xcx/qq/bcloud.png); } .bg { height: 530rpx; } .bg_t { height: 480rpx; padding-top: 50rpx; position: relative; } .b_cloud { background-size: 100% 170rpx; bottom: 0; height: 170rpx; position: absolute; } .tit image { display: block; height: 99rpx; margin: 0 auto; width: 292rpx; } .inpbox { margin-top: 30rpx; } .inpbox .text { color: #e85a64; } .inpbtn { background: linear-gradient(-10deg,#ffa250,#ffc276); border-radius: 80rpx; box-shadow: 0 5px 8px rgba(221,96,90,.3); color: #fff!important; height: 80rpx; line-height: 80rpx; margin-top: 40rpx; position: relative; width: 300rpx; z-index: 1; } .h1 { color: #e44b52; font-size: 40rpx; font-weight: 700; text-align: center; } .main_box { margin: 0 30rpx 40rpx; } .main_box .dl { margin-top: 80rpx; } .main_box .dl .dt { background: linear-gradient(0deg,#ffebeb,#fff6f6); border-radius: 15rpx; height: 140rpx; position: relative; } .main_box .dl .dt::after { background: url(https://m.xzw.com/static/public/images/cx/sx_top.png) no-repeat 0 -348rpx; background-size: 116rpx 348rpx; content: ""; height: 116rpx; position: absolute; right: -20rpx; top: -66rpx; width: 116rpx; } .main_box .dl:nth-child(1) .dt::after { background-position: 0 0; } .main_box .dl:nth-child(2) .dt::after { background-position: 0 -117rpx; } .main_box .dl:nth-child(3) .dt::after { background-position: 0 -234rpx; } .main_box .dl .dt .span { color: #555; float: left; font-size: 26rpx; margin: -40rpx 70rpx 0 25rpx; text-align: center; width: 120rpx; } .main_box .dl .dt .span image { background: #fef3f3; border: 5rpx solid #fff; border-radius: 100%; height: 110rpx; margin-bottom: 5rpx; width: 110rpx; } .main_box .dl .dt .fen { float: left; margin-top: 10rpx; } .main_box .dl .dt .fen .em { color: #ff5454; font-size: 54rpx; letter-spacing: 2rpx; text-indent: 2rpx; } .main_box .dl .dt .fen .em .small { font-size: 28rpx; } .main_box .dl .dt .fen .b { border-radius: 40rpx; color: #fff; display: inline-block; font-size: 26rpx; font-weight: 400; height: 40rpx; line-height: 40rpx; margin-left: 10rpx; padding: 0 8rpx; text-align: center; vertical-align: text-bottom; } .bg_red { background: #ff7a7e; } .bg_yellow { background: #ffb668; } .bg_blue { background: #94a3fc; } .bg_green { background: #75d4c3; } .main_box .dl .dt .fen .dy { color: #555; font-size: 30rpx; font-weight: 700; letter-spacing: 5rpx; position: relative; text-indent: 5rpx; } .main_box .dl .dt .fen .dy::after,.main_box .dl .dt .fen .dy::before { background: url(https://m.xzw.com/static/public/images/icon_quotes.png) no-repeat 0 -150rpx; background-size: 24rpx auto; content: ""; height: 30rpx; left: -25rpx; position: absolute; top: 5rpx; width: 24rpx; } .main_box .dl .dt .fen .dy::after { background-position: 0 -222rpx; left: auto; right: -25rpx; } .main_box .dl .dd { margin-top: 20rpx; } .main_box .dl .dd label { color: #ccc; font-size: 24rpx; font-weight: 700; } .main_box .dl .dd label text { border-radius: 10rpx; display: inline-block; font-size: 28rpx; line-height: 40rpx; padding: 0 10rpx; } .main_box .dl .dd label text:first-child { margin-right: 10rpx; } .main_box .dl .dd label text:last-child { margin-left: 10rpx; } .main_box .dl .dd:nth-child(2) label text:first-child,.main_box .dl .dd:nth-child(3) label text:last-child { background: #e8f1fb; color: #439cf9; } .main_box .dl .dd:nth-child(2) label text:last-child,.main_box .dl .dd:nth-child(3) label text:first-child { background: #f9eeee; color: #e84141; } .main_box .dl .dd navigator { color: #555; font-size: 30rpx; line-height: 46rpx; margin-top: 15rpx; padding: 0 5rpx; text-align: justify; } .main_box .dl .dd navigator text { color: #2c7fd5; } .bottom { background: #f8f8f8; color: #ccc; font-size: 26rpx; line-height: 80rpx; text-align: center; } .bottom text { border: 10rpx solid transparent; border-bottom-color: #ddd; display: inline-block; margin: 1rpx 0 0 15rpx; position: relative; vertical-align: text-top; } .bottom text::before { border: 1rpx solid #ccc; border-radius: 100%; content: ""; height: 30rpx; left: -15rpx; position: absolute; top: -10rpx; width: 30rpx; } @media screen and (min-height:700px) { .bottom text { margin: 5rpx 0 0 15rpx; } .bottom text::before { left: -17rpx; top: -11rpx; } }