.open_member { background: #f5f5f5; /* padding-top: 40px; */ padding-bottom: 40rpx; } .open_member .content .type_a { background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/card_a.png'); background-size: 600rpx 354rpx; background-repeat: no-repeat; } .open_member .content .type_a .name { background: linear-gradient(to right, rgba(224, 203, 164, 0), #b89763); } .open_member .content .type_a .info_c span { background: linear-gradient(to right, #b89763, #e0cba4); } .open_member .content .type_b { background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/card_b.png'); background-size: 600rpx 354rpx; background-repeat: no-repeat; } .open_member .content .type_b .name { background: linear-gradient(to right, rgba(119, 118, 130, 0), #434247); } .open_member .content .type_b .info_c span { background: linear-gradient(to right, #434247, #777682); } .open_member .content .type_c { background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/card_c.png'); background-size: 600rpx 354rpx; background-repeat: no-repeat; } .open_member .content .type_c .name { background: linear-gradient(to right, rgba(143, 133, 133, 0), #564740); } .open_member .content .type_c .info_c span { background: linear-gradient(to right, #564740, #8f8585); } .open_member .content .type_a, .open_member .content .type_b, .open_member .content .type_c { width: 600rpx; height: 354rpx; border-radius: 16rpx; margin: 40rpx auto; box-shadow: 0rpx 4rpx 16rpx #ccc; } .open_member .content .type_a .top, .open_member .content .type_b .top, .open_member .content .type_c .top { display: flex; justify-content: space-between; align-items: center; padding: 32rpx 24rpx; } .open_member .content .type_a .top .li:first-child, .open_member .content .type_b .top .li:first-child, .open_member .content .type_c .top .li:first-child { padding: 0 20rpx; color: #fff; font-size: 14px; display: flex; line-height: 56rpx; } .open_member .content .type_a .top .li:first-child i, .open_member .content .type_b .top .li:first-child i, .open_member .content .type_c .top .li:first-child i { font-size: 40rpx; color: #fff; line-height: 56rpx; margin-right: 12rpx; } .open_member .content .type_a .top .li:last-child button, .open_member .content .type_b .top .li:last-child button, .open_member .content .type_c .top .li:last-child button { border: none; width: 140rpx; height: 48rpx; border-radius: 60rpx; background: #fff; color: #333; font-size: 13px; } .open_member .content .type_a .info, .open_member .content .type_b .info, .open_member .content .type_c .info { color: #fff; } .open_member .content .type_a .info .info_a, .open_member .content .type_b .info .info_a, .open_member .content .type_c .info .info_a { font-size: 16px; } .open_member .content .type_a .info .info_a span, .open_member .content .type_b .info .info_a span, .open_member .content .type_c .info .info_a span { font-size: 36px; font-weight: bold; } .open_member .content .type_a .info .info_b, .open_member .content .type_b .info .info_b, .open_member .content .type_c .info .info_b { font-size: 14px; line-height: 56rpx; } .open_member .content .type_a .info .info_c span, .open_member .content .type_b .info .info_c span, .open_member .content .type_c .info .info_c span { font-size: 14px; line-height: 56rpx; padding: 4rpx 20rpx; } .open_member .content .vip_box { width: 710rpx; border-radius: 8rpx; margin: 20rpx auto; background: #fff; display: flex; align-items: center; padding: 40rpx 28rpx; position: relative; box-sizing: border-box; } .open_member .content .vip_box .img { width: 142rpx; height: 142rpx; border-radius: 120rpx; background: #ccc; overflow: hidden; margin-right: 20rpx; } .open_member .content .vip_box .img image { width: 142rpx; height: 142rpx; } .open_member .content .vip_box .text { text-align: left; } .open_member .content .vip_box .text .text_a { font-size: 18px; font-weight: bold; line-height: 60rpx; } .open_member .content .vip_box .text .text_b, .open_member .content .vip_box .text .text_c { font-size: 14px; color: #8c8c8c; line-height: 48rpx; } .open_member .content .vip_box .btn { position: absolute; right: 20rpx; } .open_member .content .vip_box .btn button { border: none; background: #daac5e; color: #fff; border-radius: 8rpx; height: 72rpx; font-size: 16px; display: flex; justify-content: center; align-items: center; }