/* pages/mine/mine.wxss */ page{ height: 100vh; width: 100%; background-color: #f7f7f7; } .header { width: 100%; height: 470rpx; /* position: fixed; top: 0; left: 0; z-index: 1000; */ background: linear-gradient(180deg, #7DB5FF 0%, #F7F7F7 100%); overflow: hidden; } .header .navigation { width: 100%; display: flex; align-items: center; justify-content: center; color: #333333; font-size: 32rpx; position: relative; z-index: 100; } .header .navigation image{ width: 34rpx; height: 34rpx; margin-right: 17rpx; } .header .content{ margin:80rpx 0 0; height: 130rpx; width: 100%; padding: 0 30rpx; box-sizing: border-box; display: flex; justify-content: space-around; } .header .content .left image{ width: 120rpx; height: 120rpx; border-radius: 50%; } .header .content .right{ flex: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 30rpx; } .header .content .right .top b{ font-size: 36rpx; font-family: PingFang SC; color: #000000; } .header .content .right .top text{ margin-left: 19rpx; padding-left: 19rpx; height: 31rpx; font-size: 30rpx; border-left: 1rpx solid #333333 ; } .header .content .right .bto{ display: flex; margin-top: 20rpx; } .header .content .right .bto view{ width: fit-content; padding:7rpx 24rpx 7rpx 17rpx; height: 46rpx; display: flex; align-items: center; background: #FFFFFF; border-radius: 46rpx; font-size: 28rpx; color: #999; margin-right: 10rpx; } .header .content .right .bto image{ width: 32rpx; height: 32rpx; margin-right: 10rpx; } .body{ padding: 0 20rpx; height: auto; position: relative; top: -100rpx; } .body .card { background-color: #ffffff; border-radius: 20rpx; height: auto; } .body .card .item{ height: 100rpx; display: flex; align-items: center; padding: 0 30rpx; box-sizing: border-box; } .body .card .item .left { flex: 1; display: flex; } .body .card .item .left image{ width: 40rpx; height: 40rpx; margin-right: 22rpx; } .body .card .item .right image{ width: 20rpx; height: 20rpx; }