.use_template { position: relative; width: 100%; padding-bottom: 34rpx; } .use_product { width: 100%; height: 208rpx; padding: 30rpx 20rpx; box-sizing: border-box; } .use_product .img { display: block; width: 124rpx; height: 124rpx; float: left; /*margin-right: 20rpx;*/ } .use_product .info { float: left; /*width: 500rpx;*/ width: 70%; font-size: 28rpx; color: #2b2b2b; padding-left: 20rpx; box-sizing: border-box; } .use_product .left { margin-top: 20rpx; font-size: 24rpx; color: #999999; } .use_product text { color: #eab86a; } .use_product .ellipsisLn { -webkit-line-clamp: 2; } .use_tab { position: relative; width: 100%; height: 90rpx; line-height: 90rpx; font-size: 28rpx; color: #4c4c4c; text-align: center; border-bottom: 1rpx solid #f1f5f9; } .use_tab text { display: inline-block; /* width: 33.3%; */ width: 50%; } .border_bottom { position: absolute; /* width: 33.3%; */ width: 50%; height: 4rpx; background: #eab86a; transition: left 0.4s; -webkit-transition: left 0.4s; } .use_state { width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; font-size: 28rpx; } .use_state text { display: inline-block; width: 100%; height: 80rpx; } .use_state .not { color: #5ebf62; background: #f1f5f9; } .use_state .had { color: #f4aa7d; background: #fff1eb; } .use_state .doing { color: #7f93ae; background: #d2dae4; } .use_info { width: 100%; } .use_info .mt { margin-top: 80rpx; } .use_info .returnTitle { font-size: 28rpx; color: #b8c6d9; margin-top: 80rpx; margin-bottom: 8rpx; } .use_info .wid { width: 630rpx; margin: 0 auto; text-align: center; } .use_info .wid text { display: inline-block; width: 50%; text-align: center; } .use_info .title { font-size: 28rpx; color: #b8c6d9; margin-top: 40rpx; margin-bottom: 10rpx; } .use_info .price1 { font-size: 48rpx; color: #7f93ae; } .use_info .price2 { font-size: 48rpx; color: #eab86a; } .use_sell { width: 500rpx; height: 84rpx; line-height: 84rpx; border-radius: 42rpx; margin: 20rpx auto 0; background: #f1f5f9; font-size: 28rpx; color: #b8c6d9; text-align: center; } .use_sell text { color: #7f93ae; } .use_set { text-align: center; font-size: 28rpx; color: #7f93ae; margin-top: 40rpx; margin-bottom: 20rpx; } .use_set .title{ font-size: 28rpx; color: #7f93ae; margin-bottom: 10rpx; } .use_set .gary { color: #b8c6d9; } .use_set .gary text { color: #eab86a; } .use_copies { width: 588rpx; margin: 0 auto; } .use_copies .img { position: relative; top: 22rpx; float: left; width: 44rpx; height: 44rpx; background-color: #eab86a; border-radius: 4rpx; } .use_copies .img image { display: block; position: relative; top: 6rpx; width: 32rpx; height: 32rpx; margin: 0 auto; } .use_copies .input { display: block; float: left; width: 468rpx; height: 88rpx; background: #f1f5f9; border-radius: 4rpx; text-align: center; font-size: 28rpx; color: #4c4c4c; margin-left: 16rpx; margin-right: 16rpx; } .use_copies .input1 { display: block; width: 468rpx; height: 88rpx; margin: 0 auto; background: #f1f5f9; border-radius: 4rpx; text-align: center; font-size: 28rpx; color: #4c4c4c; /*margin-left: 16rpx; margin-right: 16rpx;*/ } .use_desc { width: 100%; margin: 50rpx auto 0; font-size: 24rpx; color: #bec9d9; border-top: 1rpx solid #e8ebf0; padding-top: 35rpx; box-sizing: border-box; } .use_desc .desc { width: 675rpx; margin: 0 auto 20rpx; line-height: 42rpx; } .use_desc .date { width: 670rpx; margin: 0 auto 20rpx; line-height: 42rpx; } .use_desc .date .fr { color: #7f93ae; } .use_wid { width: 100%; padding: 0 20rpx; box-sizing: border-box; } .use_btn { float: right; width: 49%; height: 100rpx; line-height: 100rpx; font-size: 28rpx; color: #fff; margin: 35rpx auto 0; text-align: center; border-radius: 8rpx; background: linear-gradient(0deg, #eab86a 0%, #e23232 100%); } .share_btn { float: left; display: inline-block; width: 49%; height: 100rpx; line-height: 100rpx; font-size: 28rpx; color: #eab86a; margin: 35rpx auto 0; text-align: center; border-radius: 8rpx; border: 1rpx solid #eab86a; box-sizing: border-box; background: #fff; } .confirm_btn { width: 690rpx; height: 100rpx; line-height: 100rpx; font-size: 28rpx; color: #fff; margin: 35rpx auto 20rpx; text-align: center; border-radius: 8rpx; background: linear-gradient(0deg, #eab86a 0%, #e23232 100%); } .use_buy { width: 100%; background: #f1f5f9; border-radius: 8rpx; margin: 30rpx auto; padding-left: 20rpx; box-sizing: border-box; } .use_buy .title { width: 100%; height: 90rpx; line-height: 90rpx; font-size: 28rpx; color: #7f93ae; text-align: center; border-bottom: 1rpx solid #dae2ec; } .use_buy .none { margin-top: 70rpx; padding-bottom: 80rpx; text-align: center; font-size: 28rpx; color: #b8c6d9; } .use_modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 0 20rpx; background: rgba(0, 0, 0, 0.3); box-sizing: border-box; z-index: 200; } .use_modal .content { position: relative; width: 100%; height: 492rpx; background: #fff; margin: 320rpx auto 0; border-radius: 8rpx; box-sizing: border-box; } .use_modal .title { width: 100%; height: 100rpx; text-align: center; font-size: 32rpx; color: #7f93ae; line-height: 100rpx; border-bottom: 1rpx solid #e8ebf0; margin: 0 auto; } .use_modal .info { width: 100%; text-align: center; padding-top: 40rpx; } .use_modal .secTitle { font-size: 24rpx; color: #bec9d9; margin-bottom: 20rpx; } .use_modal .num { font-size: 36rpx; color: #eab86a; margin-bottom: 40rpx; } .use_modal .tip { font-size: 28rpx; color: #7f93ae; } .use_modal .btn { position: absolute; bottom: 0; width: 100%; height: 100rpx; border-bottom-left-radius: 8rpx; border-bottom-right-radius: 8rpx; } .use_modal .btn text { display: inline-block; width: 50%; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 28rpx; } .use_modal .btn .bblr { border-bottom-left-radius: 8rpx; background: linear-gradient(0deg, #e5e9ec 0%, #cfd9e0 100%); color: #7f93ae; } .use_modal .btn .bbrr { border-bottom-right-radius: 8rpx; background: linear-gradient(0deg, #eab86a 0%, #e23232 100%); color: #fff; } .use_modal .btn .closeBtn { width: 100%; height: 100rpx; line-height: 100rpx; text-align: center; font-size: 28rpx; background: linear-gradient(0deg, #e5e9ec 0%, #cfd9e0 100%); color: #7f93ae; border-bottom-left-radius: 8rpx; border-bottom-right-radius: 8rpx; } .use_modal .apply { width: 100%; padding: 120rpx 0; text-align: center; color: #7f93ae; font-size: 28rpx; } .use_address { width: 100%; margin: 80rpx auto 50rpx; } .use_address .title { text-align: center; font-size: 28rpx; color: #7f93ae; } .use_address .address { width: 100%; background: #f1f5f9; border-radius: 4rpx; line-height: 48rpx; font-size: 24rpx; color: #7f93ae; padding: 20rpx 40rpx; box-sizing: border-box; margin-top: 20rpx; } .use_address .info { } .use_mine { width: 100%; margin: 50rpx auto 0; } .use_mine .title { font-size: 28rpx; color: #7f93ae; text-align: center; margin-bottom: 30rpx; } .use_mine .bg { width: 100%; background: #f1f5f9; border-radius: 8rpx; padding: 0 20rpx; margin-bottom: 20rpx; box-sizing: border-box; } .use_mine .num { height: 80rpx; line-height: 80rpx; font-size: 28rpx; color: #7f93ae; border-bottom: 1rpx solid #dee2e8; } .use_mine .name { font-size: 24rpx; color: #bec9d9; line-height: 42rpx; padding: 20rpx 0; } .use_arrow { width: 30rpx; height: 30rpx; margin-left: 1rpx; } .use_arrow:after { content: " "; height: 18rpx; width: 18rpx; border-width: 4rpx 4rpx 0 0; border-color: #c0ccdc; border-style: solid; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); position: absolute; top: 50%; right: 40rpx; } .use_custom { /*float: left; width: 48rpx; margin-right: 20rpx; margin-bottom: 10rpx; text-align: center; font-size: 0;*/ padding-bottom: 40rpx; margin-bottom: 10rpx; } .user_custom__mt { margin-top: 20rpx; } .use_custom image { /*width: 48rpx; height: 48rpx;*/ } .use_custom .count { font-size: 28rpx; color: #b8c6d9; margin-top: 4rpx; } .use_rule { width: 100%; background: #f1f5f9; margin-top: 30rpx; } .use_rule .title1 { position: relative; width: 100%; height: 80rpx; line-height: 80rpx; font-size: 28rpx; color: #7f93ae; text-align: center; background: #f1f5f9; } .use_rule .title1 .arrow { position: absolute; top: 28rpx; right: 30rpx; width: 15rpx; height: 15rpx; border-top: 4rpx solid #b8c6d9; border-right: 4rpx solid #b8c6d9; transform: rotate(135deg); } .use_rule .info { width: 100%; background: #f1f5f9; border-top: 1rpx solid #dae2ec; font-size: 24rpx; line-height: 40rpx; color: #7f93ae; padding: 32rpx 14rpx 50rpx; box-sizing: border-box; } .use_rule .seTitle { font-weight: bold; font-size: 36rpx; color: #7f93ae; margin-bottom: 15rpx; } .use_rule .friend { color: #3d88ec; } .use_rule .mt { margin-top: 50rpx; } .use_custom__all { width: 100%; height: .8rem; line-height: .8rem; padding: 0 30rpx; box-sizing: border-box; } .use_custom__left { float: left; font-size: 28rpx; color: #b8c6d9; line-height: 50rpx; } .use_custom__left image { display: inline-block; width: 50rpx; height: 50rpx; border-radius: 50%; margin-right: 30rpx; vertical-align: middle; } .use_custom__right { float: right; font-size: 28rpx; color: #b8c6d9; line-height: 50rpx; } .use_custom__right .date { color: #fb5252; margin-left: 10rpx; }