body { background: #ffba19; width: 100vw; min-height: 100vh; } #guafenguize { width: 0.94rem; height: 0.31rem; background: linear-gradient(180deg, #FFC01B, #FFE200); border-radius: 0 0.18rem 0.18rem 0; box-shadow: 0px 0.04rem 0.05rem 0px #ff9b1b; line-height: 0.31rem; font-size: 0.15rem; text-align: center; color: #FFFFFF; position: absolute; top: 0.23rem; left: 0; z-index: 1; } #wodezhanji { width: 0.94rem; height: 0.31rem; background: linear-gradient(180deg, #FFC01B, #FFE200); border-radius: 0.18rem 0 0 0.18rem; box-shadow: 0px 0.04rem 0.05rem 0px #ff9b1b; line-height: 0.31rem; font-size: 0.15rem; text-align: center; color: #FFFFFF; position: fixed; top: 0.23rem; right: 0; z-index: 1; } #container { padding-bottom: 0.89rem; } #content{ position: relative; } .banner { width: 100%; height: 3.13rem; position: relative; } .banner img { width: 100%; } .banner p { position: absolute; top: 1.66rem; height: 0.42rem; width: 100%; color: #fff; font-size: 0.4rem; line-height: 0.42rem; text-align: center; } .content_01 { width: 3.27rem; border-radius: 0.15rem; margin: auto; background: #FFFFFF; overflow: hidden; } .content_01 .number_people { width: 100%; height: 1.71rem; background: linear-gradient(180deg, #FFFFFF, #F9E7E7); } .content_01 .number_people .title { width: 2.18rem; height: 0.33rem; margin: auto; background: linear-gradient(180deg, #FFB56A, #FB6746); box-shadow: 0px 0.02rem 0.02rem 0px #f59786; font-size: 0.16rem; line-height: 0.33rem; text-align: center; border-radius: 0 0 0.33rem 0.33rem; color: #FFFFFF; } .content_01 .number_people p { font-size: 0.14rem; line-height: 0.2rem; color: #733232; text-align: center; } .content_01 .number_people .number { display: flex; max-width: 100%; align-items: center; justify-content: center; margin-top: 0.25rem; margin-bottom: 0.24rem; } .content_01 .number_people .number span { padding-left: 0.02rem; font-size: 0.2rem; color: #733232; } .content_01 .number_people .number ul { max-width: 2.64rem; padding-left: 0.2rem; display: flex; justify-content: center; align-items: center; margin: 0; } .content_01 .number_people .number ul li { width: 0.44rem; height: 0.55rem; border: 0.01rem solid #979797; border-radius: 0.1rem; line-height: 0.55rem; margin: 0 0.05rem; color: #733232; font-size: 0.48rem; text-align: center; } .content_01 .operation { width: 100%; background: #FBA010; box-shadow: 0px 0rem 0.16rem 0.06rem rgba(251, 142, 16, 0.51); padding-bottom: 0.34rem; } .content_01 .operation .userImges { padding-top: 0.28rem; } .content_01 .operation .userImges ul { display: flex; align-items: center; justify-content: center; padding-left: 0.13rem; } .content_01 .operation .userImges ul li { width: 0.5rem; border-radius: 50%; overflow: hidden; margin-left: -0.13rem; background: #FFFFFF; box-shadow: 0px 0.02rem 0.03rem 0px #de8c0a; } .content_01 .operation .userImges ul li img { width: 100%; height: 100%; } .content_01 .operation .onePrice { width: 2.4rem; height: 0.31rem; margin: auto; margin-top: 0.24rem; background: linear-gradient(180deg, #3C95FF, #7639FF); border-radius: 0.37rem; color: #FFFFFF; font-size: 0.18rem; box-shadow: 0px 0.02rem 0.01rem 0px #ea8905; text-align: center; line-height: 0.31rem; } .content_01 .operation .inviting_friends { width: 2.4rem; height: 0.31rem; margin: auto; margin-top: 0.18rem; background: linear-gradient(180deg, #FF783C, #FF3C39); border-radius: 0.37rem; color: #FFFFFF; font-size: 0.18rem; box-shadow: 0px 2px 2px 0px #ee7810; text-align: center; line-height: 0.31rem; } .content_02 { height: 1.57rem; background: url(../img/Rectangle.png) #FBA010 no-repeat; background-size: 100% 100%; } .content_02 .state_01 { font-size: 0.18rem; line-height: 0.25rem; color: #FFFFFF; text-align: center; } .content_02 .state_01 img { width: 1.35rem; margin: auto; margin-top: 0.15rem; } .content_02 .state_01 p { margin-top: -0.3rem; } .content_03 { height: 1.44rem; display: flex; align-items: center; background: url(../img/Rectangle.png) #FBA010 no-repeat; background-size: 100% 100%; } .content_03 ul { width: 100%; margin: 0 0.23rem; display: flex; align-items: center; justify-content: space-around; } .content_03 ul li { text-align: center; } .content_03 ul li span { color: #FFFFFF; font-size: 0.14rem; line-height: 0.2rem; display: block; text-align: center; margin-top: 0.08rem; } .content_03 ul li img { width: 0.9rem; } .content_04 { padding: 0.17rem 0 0.39rem; background: #FBA010; } .content_04 .title { color: #ffffff; font-size: 0.18rem; line-height: 0.2rem; position: relative; width: 100%; text-align: center; } .content_04 .title::after { content: ''; display: block; width: 0.68rem; height: 0.01rem; background: #ffffff; position: absolute; left: 0.35rem; top: 0rem; bottom: 0rem; margin: auto; } .content_04 .title::before { content: ''; display: block; width: 0.68rem; height: 0.01rem; background: #ffffff; position: absolute; right: 0.35rem; top: 0rem; bottom: 0rem; margin: auto; } .content_04 ul { padding: 0 0.28rem; } .content_04 ul li { display: flex; align-items: center; margin-top: 0.16rem; justify-content: space-between; } .content_04 ul li .left { display: flex; align-items: center; } .content_04 ul li .left img { width: 0.5rem; height: 0.5rem; border-radius: 50%; } .content_04 ul li .left .leftCon { padding-left: 0.11rem; } .content_04 ul li .left .leftCon p { color: #FFFFFF; font-size: 0.14rem; line-height: 0.2rem; width: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 0.04rem; } .content_04 ul li .left .leftCon span { color: #FFFFFF; font-size: 0.12rem; height: 0.17rem; } .content_04 ul li .right { width: 1.02rem; height: 0.24rem; color: #6B2A0A; font-size: 0.12rem; line-height: 0.24rem; background: #FFDD7C; border-radius: 0.16rem; display: flex; align-items: center; vertical-align: middle; } .content_04 ul li .right i { display: inline-block; width: 0.13rem; height: 0.13rem; background: #ffffff; margin-left: 0.1rem; vertical-align: middle; margin-right: 0.09rem; } .content_04 ul li .rightActive { background: #F95D1B; color: #ffffff; } .content_02, .content_03, .content_04 { width: 3.27rem; margin: auto; border-radius: 0.2rem; margin-top: 0.1rem; position: relative; overflow: hidden; } .content_02 .title, .content_03 .title { background: #ff623b; box-shadow: 0px 2px 4px 0px rgba(249, 112, 7, 0.69); font-size: 0.14rem; color: #FFFFFF; height: 0.3rem; line-height: 0.3rem; transform: rotate(-45deg); -ms-transform: rotate(-45deg);/* IE 9 */ -moz-transform: rotate(-45deg);/* Firefox */ -webkit-transform: rotate(-45deg);/* Safari 和 Chrome */ -o-transform: rotate(-45deg);/* Opera */ position: absolute; top: 0.21rem; left: -0.40rem; width: 1.50rem; text-align: center; } .invite_friends_zzc { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); display: none; z-index: 2; } .invite_friends_zzc .content { width: 100%; height: 2.14rem; background: #27292C; position: absolute; bottom: 0; } .invite_friends_zzc .content .title { font-size: 0.14rem; height: 0.2rem; color: rgba(255, 255, 255, 0.6156); text-align: center; padding-top: 0.21rem; } .invite_friends_zzc .content ul { display: flex; align-items: center; margin-top: 0.3rem; } .invite_friends_zzc .content ul li { width: 50%; text-align: center; color: #ffffff; } .invite_friends_zzc .content ul li img { width: 0.55rem; height: 0.55rem; border-radius: 50%; margin: auto; margin-bottom: 0.15rem; } .invite_friends_zzc .content .bottom_close { width: 100%; height: 0.38rem; background: #35373A; font-size: 0.14rem; line-height: 0.38rem; color: #ffffff; text-align: center; position: absolute; bottom: 0; } .wechat_zhifu_zzc { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.3); display: none; z-index: 2; } .wechat_zhifu_zzc .content { width: 100%; height: 0.94rem; background: #FFFFFF; position: absolute; bottom: 0; display: flex; justify-content: center; align-items: center; } .wechat_zhifu_zzc .content div { width: 2.15rem; height: 0.52rem; border-radius: 0.06rem; background: #00aaef; color: #FFFFFF; font-size: 0.2rem; text-align: center; line-height: 0.52rem; } /*# sourceMappingURL=index.css.map */