.box{padding:0 20rpx;box-sizing:border-box;background: url('http://img.bbztx.com/image_test/upload/thumbs/20210324/logo/1616579157433042148.png');background-size: 100%;} .column{text-align:center;padding-top:60rpx;padding-bottom: 80rpx;} .icon{ font-size:48rpx; /* margin-right: 20rpx; */ } .yinBox,.xunBox{display:flex;flex-wrap:wrap;justify-content:center;} .yinCol{width:140rpx;height:140rpx;border-radius:18rpx;background-color:#fff;margin:0 8rpx 16rpx 8rpx;} .yinNone{text-align:center;font-size:28rpx;margin-top:40rpx;} .xunBox .lastMedal{width:200rpx;} .xunBox .medal17{width:250rpx;} .xunBox .medal13{width:170rpx;} .xunBox .lastMedal image{width:100%;height: 200rpx;} .xunCol{width:145rpx;padding-top:10rpx;box-sizing:border-box;position:relative;margin:15rpx 11rpx;} .xunCol .pic_box{height: 240rpx;position: relative;} .xunCol .lastMedalHeight{height: 300rpx;position: relative;} .xunCol .pic_box image{width:100%;height:auto;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;} .xunCol .cumulativeDays{font-size: 24rpx;} .xunName{width:100%;font-size:24rpx;text-align:center;line-height:1.5;} .mask{color: #fff;background: #fb8143;box-shadow: 0 0 4rpx 0 #666, inset 0 0 6rpx 0 #fff;padding: 6rpx 0; text-align: center;border-radius: 30rpx;font-size: 20rpx;transform: scale(.8);position: absolute;bottom: 0;width: 100%;} .wall .welfare .welfare_tab{ margin-top: 40rpx; position: relative; } .wall .welfare .welfare_tab .welfare_title{ position: absolute; left: -20rpx; top: 0; background: #e9474d; color: #fff; padding: 6rpx 30rpx; border-top-right-radius: 30rpx; border-bottom-right-radius: 30rpx; } .wall .welfare .welfare_tab image{ margin-top: 80rpx; } page{ background: #fff; } .tabBox{ height: 100rpx; overflow: hidden; display: flex; flex-direction: column-reverse; } .tab{ display: flex; flex-direction: row; align-items: flex-end; height: 58rpx; background: #ee3a43; } .tab .tab-item{ flex: 1; text-align: center; background: #ee3a43; color: #fff; padding: 10rpx; height: 38rpx; font-size: 28rpx; font-weight: 700; line-height: 45rpx; } .tab .tab-item text{ padding: 10rpx; } .tab .active{ color: #ee3a43; background: #fff; font-size: 32rpx; height: 48rpx; line-height:48rpx; box-shadow: 0rpx 0rpx 20rpx 0rpx #333; z-index: 1; } .tab .active text{ border-bottom: 2rpx solid #ee3a43; } .tab .no_active{ box-shadow: inset 0px -15px 10px -15px #333; } .box .column .wall{ border-radius: 20rpx; background: rgba(234, 70, 77, .1); padding: 20rpx; padding-top: 40rpx; position: relative; box-shadow: 0px -50px 2px -49px #f1b9b8; margin-bottom: 80rpx; font-size: 24rpx; } .box .column .wall .head_title{ padding: 10rpx 30rpx; color: #fff; font-weight: 700; display: flex; flex-direction: row; align-items: center; justify-content:space-around; border-radius: 10rpx; width: 50%; position: absolute; left: 0; right: 0; margin: -75rpx auto; box-shadow: 0px 0px 2px 0px #333; background-image: linear-gradient(to right,rgba(238,58,67),rgba(238,58,67,.9),rgba(238,58,67)) } .box .column .wall .head_title .h{ font-size: 32rpx; } .box .column .wall .head_title .point{ color: #f7d1d3; } .box .column .wall .head_title .leftPoint{ margin-left: -30rpx; } .box .column .wall .head_title .rightPoint{ margin-right: -30rpx; } .box .column .wall .head_title image{ width: 35rpx; } .box .column .article .jump_btn{ background: #fff; display: inline-block; border-radius: 30rpx; padding: 10rpx 20rpx; color: #ee3a43; font-weight: 700; box-shadow: inset 0 -5rpx 5rpx rgba(238,58,67,.5); margin: 20rpx 0; }