page { background-color: #f4f4f4; } .main { padding-bottom: 88rpx; } .main > view { background-color: white; } .avatar-container { padding-top: 60rpx; padding-bottom: 60rpx; /* background: url(https://mshopimg.yolipai.net/miniapp/images/user_index_powder.jpg) no-repeat 100% 100%; */ position: relative; /* background-size: 100%; */ } .bgImg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .avatar { width: 160rpx; height: 160rpx; border-radius: 50%; background-color: #eee; } .nickname { display: inline-block; background-color: rgba(0,0,0,.5); padding: 4rpx 20rpx; color: white; border-radius: 24rpx; } .pd2622 { padding: 20rpx 60rpx 20rpx 20rpx; } .money::before { content: '¥'; font-size: 24rpx; } /* .bdb { border-bottom: 2rpx solid #f8f8f8; } */ .arrow-r { /* display: relative; */ } .arrow-r::after { font-family: iconfont; content: '\e61f'; position: absolute; right: 20rpx; color: #ddd; } .line { position: relative; } .line::after { content: ''; position: absolute; right: 0; background-color: #f8f8f8; width: 2rpx; height: 30rpx; top: 50%; transform: translateY(-50%); } .circle { width: 80rpx; height: 80rpx; line-height: 80rpx; border-radius: 50%; color: white; margin: 0 auto; background-color: red; } .fs40 { font-size: 40rpx; } .bgBlue { background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); } .bgPink { background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); } .bgRed { background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); } .bgYellow { background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } .bgGreen { background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); } .bgPurple { background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); } .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.5) !important; } .popup { position: fixed; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; border-radius: 12rpx; overflow: hidden; } .icon-container { border-radius: 50%; background-color: #FCEA0D; width: 50rpx; line-height: 50rpx; height: 50rpx; text-align: center; font-size: 28rpx !important; margin-right: 10rpx; flex-shrink: 0; } .item { padding: 20rpx; display: flex; align-items: center; font-size: 26rpx; position: relative; } .title { background-image: linear-gradient( 135deg, #FF6768 10%, #EA5455 100%); color: white; font-size: 28rpx; position: relative; } .icon-close { position: absolute; right: 20rpx; color: white; } .verify { color: white; background-color: #FF6768; padding: 0 20rpx; border-radius: 6rpx; display: flex; align-items: center; margin-left: 10rpx; } .input { border-radius: 6rpx; height: 50rpx; } .item ~ .item .left::before { content: ''; position: absolute; left: 45rpx; top: -45rpx; width: 2rpx; height: 100%; background: linear-gradient(to bottom, #eee, #eee 8rpx, transparent 8rpx, transparent); background-size: 100% 16rpx; z-index: -1; } .left { display: flex; align-items: center; padding-right: 20rpx; } /*checkbox 整体大小 */ checkbox { /* width: 240rpx; height: 90rpx; */ } /*checkbox 选项框大小 */ checkbox .wx-checkbox-input { width: 34rpx; height: 34rpx; border-radius: 50%; } /*checkbox选中后样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked { background-color: #FF6768; border-color: #FF6768; /* color: white; */ } /*checkbox选中后图标样式 */ checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { width: 34rpx; height: 34rpx; line-height: 34rpx; text-align: center; font-size: 24rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); } .item:not(:last-of-type) { display: flex; justify-content: space-between; } .img { width: 400rpx; height: 400rpx; } .btn{ background-color: #57b837; padding: 15rpx 20rpx; border-radius: 10rpx; color: #fff;}