html, body { background: #f5f5f5; font-family: PingFangSC-Regular; color: #333333; } .tips { background: #fdf8ec; display: flex; flex-direction: column; box-sizing: border-box; padding: 22rpx 32rpx; } .tips > view { display: flex; } .tips > view > text:first-child { background: #ff801a; display: block; width: 4px; height: 4px; border-radius: 50%; margin: 14rpx 16rpx 0 0; } .tips > view > text:last-child { font-size: 24rpx; display: block; width: 660rpx; color: #ff801a; line-height: 18px; text-align: justify; } .header { background: #ffffff; box-sizing: border-box; padding: 32rpx; } .header .title { font-size: 26rpx; color: #999999; } .header .value { font-size: 40rpx; margin-top: 10rpx; } .header .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 60rpx; } .header .top .date { display: flex; flex-direction: column; } .header .bottom { display: flex; justify-content: space-between; align-items: center; } .header .bottom .addr, .header .bottom .hukou { display: flex; flex-direction: column; } .content { margin-top: 24rpx; padding-bottom: 312rpx; } .content .arrow { font-size: 32rpx; color: #808080; } .content .arrow > image { width: 14rpx; height: 24rpx; } switch { zoom: 1.2; } .content > view > view > view { box-sizing: border-box; padding-left: 32rpx; background: #ffffff; } .content > view > view > view > .wrap { box-sizing: border-box; padding: 28rpx 32rpx 28rpx 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 2rpx solid #eeeeee; font-size: 32rpx; } .content > view > view > .switch > .wrap { padding: 20rpx 32rpx 20rpx 0; } .content .first > view:last-child > .wrap, .content .third > view:last-child > .wrap { border-bottom: none; } .content .cardPrice > .wrap > view { text-align: right; display: flex; flex-direction: column; } .content .second { font-family: PingFangSC-Regular; font-size: 26rpx; color: #999999; padding: 34rpx 0 20rpx 32rpx; } .content .isFund, .content .isShebao { box-sizing: border-box; padding-left: 32rpx; background: #ffffff; } .content .isFund > .wrap, .content .isShebao > .wrap { box-sizing: border-box; padding: 28rpx 32rpx 28rpx 0; display: flex; justify-content: space-between; align-items: center; font-size: 32rpx; } input { text-align: right; width: 400rpx; } .content .detail > .wrap { display: flex; flex-direction: column; } .content .detail > .wrap > view { width: 100%; display: flex; justify-content: space-between; line-height: 52rpx; } .content .detail > .wrap > view > text:first-child { font-size: 28rpx; color: #999999; } .content .detail > .wrap > view > text:last-child { font-size: 28rpx; color: #666666; } .content .job > view > .wrap { border-bottom: none; border-top: 2rpx solid #eeeeee; } .content .job > view > .wrap > view { display: flex; align-items: center; } .content .job image { width: 28rpx; height: 28rpx; margin-left: 16rpx; } .footer, .footer-X { position: fixed; bottom: 0; z-index: 900; width: 100%; box-sizing: border-box; padding-left: 32rpx; background: #ffffff; } .footer-X { padding-bottom: 68rpx; } .footer .wrap, .footer-X .wrap { width: 100%; box-sizing: border-box; padding-right: 20rpx; display: flex; justify-content: space-between; align-items: center; } .footer .wrap:first-child, .footer-X .wrap:first-child { height: 120rpx; font-size: 30rpx; color: #333333; } .footer .wrap:first-child > view, .footer-X .wrap:first-child > view { display: flex; flex-direction: column; justify-content: space-between; text-align: right; } .footer .wrap:last-child, .footer-X .wrap:last-child { height: 112rpx; border-top: 2rpx solid #eeeeee; } .footer .wrap:last-child > view:first-child, .footer-X .wrap:last-child > view:first-child { display: flex; align-items: center; } .footer .wrap:last-child > text:first-child, .footer-X .wrap:last-child > text:first-child { font-size: 30rpx; color: #333333; } .footer .wrap:last-child .totalPrice > text, .footer-X .wrap:last-child .totalPrice > text { font-size: 40rpx; color: #FF5E5E; } .footer .wrap:last-child .totalPrice > text:last-child, .footer-X .wrap:last-child .totalPrice > text:last-child { font-size: 28rpx; } .footer .wrap:last-child > .btn, .footer-X .wrap:last-child > .btn { width: 280rpx; height: 84rpx; line-height: 84rpx; background: #3296FB; border-radius: 42rpx; font-family: PingFangSC-Semibold; font-size: 30rpx; color: #FFFFFF; text-align: center; } .modal { position: fixed; top: 0; width: 750rpx; height: 100%; background: rgba(0, 0, 0, 0.56); z-index: 999; display: flex; flex-direction: column; } .modal > view:first-child { flex: 1; } .modal > .detail { width: 100%; position: absolute; bottom: -500px; background: #f8f8f8; } .modal > .detail .header { display: flex; justify-content: space-between; align-items: center; padding: 26rpx 20rpx 26rpx 32rpx; background: #ffffff; } .modal > .detail .header > view { font-family: PingFangSC-Medium; font-size: 32rpx; display: flex; align-items: center; } .modal > .detail .header > view > view { width: 6rpx; height: 32rpx; background: #3296fb; margin-right: 22rpx; } .modal > .detail .header > image { width: 48rpx; height: 48rpx; } .modal > .detail > .box { width: 100%; height: 692rpx; box-sizing: border-box; padding-bottom:68rpx; background: #ffffff; } .modal > .detail > .-X{ height: 760rpx; padding-bottom:136rpx; } .modal > .detail > .box .item { box-sizing: border-box; padding: 0 60rpx; display: flex; flex-direction: column; font-family: PingFangSC-Regular; font-size: 26rpx; color: #666666; line-height: 40rpx; } .modal > .detail > .box .item > .blue { font-family: PingFangSC-Semibold; font-size: 34rpx; color: #3296FB; line-height: 52rpx; margin-top: 50rpx; } .modal > .detail > .box .item > .black { font-family: PingFangSC-Regular; font-size: 30rpx; color: #333333; line-height: 48rpx; margin-top: 12rpx; } .modal > .detail > .box .line{ width: 100%; height: 2rpx; background: #eeeeee; }