html, body { background: #f5f5f5; font-family: PingFangSC-Regular; color: #333333; } .container { width: 100%; height: 100%; } .banner { width: 100%; height: 240rpx; background: #28AFF0; box-sizing: border-box; padding: 0 44rpx 0 32rpx; display: flex; justify-content: space-between; } .banner > view { display: flex; flex-direction: column; font-size: 36rpx; color: #FFFFFF; margin-top: 48rpx; } .banner > view > text:last-child { font-size: 24rpx; margin-top: 8rpx; } .banner image { width: 240rpx; height: 150rpx; margin-top: 32rpx; } .content { width: 710rpx; margin: 0 auto; position: relative; top: -60rpx; } .content > view { width: 100%; background: #FFFFFF; } .content > .detail { box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03); border-radius: 4px; box-sizing: border-box; padding: 32rpx 42rpx; font-size: 30rpx; line-height: 60rpx; margin-bottom: 24rpx; } .content > .detail > view { display: flex; justify-content: space-between; } .content > .detail > view > text:last-child { color: #808080; } .content > .time { margin-bottom: 24rpx; } .content > .time > view { display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 38rpx 30rpx; font-size: 32rpx; position: relative; } .content > .time > .month image { width: 14rpx; height: 24rpx; margin-left: 22rpx; } .content > .time > .month > view > text { color: #808080; } .line { width: 680rpx; height: 2rpx; background: #eeeeee; transform: scaleY(0.5); position: absolute; top: 0; right: 0; } .salary,.inputSalary{ display: flex; justify-content: space-between; box-sizing: border-box; padding: 38rpx 30rpx; position: relative; } .salary image { width: 28rpx; height: 28rpx; margin-left: 32rpx; } .inputSalary > .inputBox { width: 340rpx; } .inputSalary input { text-align: right; } .buyFund, .buySheBao { box-sizing: border-box; padding: 38rpx 30rpx; display: flex; justify-content: space-between; align-items: center; font-size: 32rpx; } switch { transform: scale(1.1); } .content>.btn { margin-top: 48rpx; background: #f5f5f5; } .content>.btn > view { width: 100%; height: 90rpx; font-family: PingFangSC-Medium; font-size: 32rpx; color: #3296FB; text-align: center; line-height: 90rpx; border-radius: 45rpx; margin-bottom: 30rpx; background: #FFFFFF; } .content>.btn > view:first-child{ background: #3296FB; color: #FFFFFF; } .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; }