view { box-sizing: border-box; } .container { min-height: 100vh; background: #F7F8FB; padding-bottom: 50rpx; .bgBox{ // background: #F7F8FB; // min-height: 100vh; background-size: 100% 466rpx; background-repeat: no-repeat; .topBox{ padding-top: 48rpx; padding-left: 50rpx; padding-right: 50rpx; .userBox{ font-size: 28rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; color: #FFFFFF; display: flex; align-items: center; .avatar{ width: 48rpx; height: 48rpx; border-radius: 50%; margin-right: 16rpx; } .flag{ font-size: 20rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; color: #4E2A1E; width: 128rpx; height: 28rpx; // background: linear-gradient(90deg, #FFEDDD 0%, #C7977A 100%); // border: 1rpx solid; // border-image: linear-gradient(251deg, rgba(255, 255, 255, 0.32), rgba(255, 249, 237, 0.4)) 1 1; display: flex; align-items: center; justify-content:flex-start; margin-left: 16rpx; background-size: 100% 100%; background-repeat: no-repeat; padding-left: 14rpx; .hg_i{ width: 23rpx; height: 17rpx; margin-left: 4rpx; } } } } .addBg{ background-size: 100% 100%; background-repeat: no-repeat; padding: 0 10rpx; .cardTop{ height: 186rpx; // background: linear-gradient(360deg, #EAEEFD 0%, #F6FAFF 100%); // border-radius: 16rpx 16rpx 0 0; padding-top: 40rpx; padding-left: 68rpx; display: flex; position: relative; margin-top: 32rpx; .water_coin{ height: 126rpx; width: 272rpx; position: absolute; right: 0; bottom: 0; z-index: 0; } .left{ } .right{ margin-left: 172rpx; position: relative; z-index: 1; } .txt{ font-size: 24rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: 400; color: #666666; margin-bottom: 18rpx; } .money{ font-size: 48rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: 800; color: #333333; } } .cardBot{ // width: 690rpx; height: 176rpx; // background: #FFFFFF; // box-shadow: 0rpx -2rpx 20rpx 0rpx rgba(0,0,0,0.05); // border-radius: 0rpx 0rpx 32rpx 32rpx; padding-top: 32rpx; padding-left: 44rpx; padding-right: 44rpx; .btn{ height: 96rpx; background: linear-gradient(132deg, #0298FF 0%, #017AFF 100%); box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,122,255,0.2); border-radius: 54rpx; display: flex; align-items: center; justify-content: center; font-size: 32rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; color: #FFFFFF; } } } .botContent{ padding:0 30rpx; .titleBox{ margin-top: 50rpx; background: #F0F1F4; background: linear-gradient(270deg, #F7F8FB 0%, #F0F1F4 100%); height: 62rpx; width: 60%; border-radius: 32rpx 0rpx 0rpx 0rpx; font-size: 32rpx; font-family: SourceHanSansCN, SourceHanSansCN; font-weight: bold; color: #333333; display: flex; align-items: center; padding-left: 32rpx; position: relative; .starIcon{ width: 24rpx; height: 24rpx; position: absolute; right: 50%; top: -5rpx; } } .list{ margin-top: 28rpx; .item{ // height: 206rpx; // background: #FFFFFF; // box-shadow: 0rpx 4rpx 16rpx -8rpx rgba(0,103,104,0.16); border-radius: 32rpx; padding-top: 40rpx; padding-left: 32rpx; padding-right: 32rpx; display: flex; flex-direction: column; padding-bottom: 32rpx; margin-bottom: 8rpx; position:relative; background-size: 100% 100%; background-repeat: no-repeat; .water2{ position: absolute; bottom: 0; left: 0; width: 114rpx; height: 172rpx; z-index: 0; } .top{ display: flex; justify-content: space-between; padding-bottom: 24rpx; border-bottom: 2rpx solid #F4F4F4; position: relative; z-index: 0; .left{ display: flex; align-items: center; .avatar{ width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 32rpx; } .des{ .name{ font-size: 28rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; color: #333333; } .time{ font-size: 24rpx; font-family: PingFang-SC, PingFang-SC; font-weight: 500; color: #999999; margin-top: 16rpx; } } } .right{ font-size: 32rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; color: #333333; padding-right: 26rpx; } } .bot{ position: relative; z-index: 0; font-size: 24rpx; font-family: PingFang-SC, PingFang-SC; font-weight: 500; color: #999999; padding-top: 22rpx; } } } } } }