@charset "UTF-8"; /* 页面左右间距 */ /* 文字尺寸 */ /*文字颜色*/ /* 边框颜色 */ /*颜色*/ /* 图片加载中颜色 */ /* 行为相关颜色 */ /* 功能栏字体大小 */ /*功能栏左侧小图标*/ page { height: 100%; } .tj-sction .tj-item, .item-box .order-section .order-item { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; align-items: center; } .tj-sction, .item-box .order-section { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-align-content: center; align-content: center; background: #fff; -webkit-border-radius: 10rpx; border-radius: 10rpx; } .container { height: 100%; background-color: #f8f8f8; } .content-box { height: 100%; } .vheigh { height: 25px; background-color: #5dbc7c; } .user-section { height: 435rpx; padding: 15rpx 30rpx 0; position: relative; } .user-section .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #5dbc7c; } .user-info-box { height: 180rpx; color: white; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; position: relative; z-index: 1; } .user-info-box .detail { height: 130rpx; } .user-info-box .detail .portrait-box { height: 100%; } .user-info-box .detail .portrait-box .portrait { width: 130rpx; height: 100%; border: 5rpx solid #fff; -webkit-border-radius: 50%; border-radius: 50%; } .user-info-box .detail .info-box { margin-left: 20rpx; line-height: 1.5; } .user-info-box .detail .info-box .username { font-size: 38rpx; height: 100%; } .user-info-box .config { font-size: 48rpx; height: 130rpx; } .user-info-box .config .setting { margin-right: 51rpx; } .vip-card-box { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; color: #f7d680; height: 240rpx; background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.7)), to(rgba(0, 0, 0, 0.8))); background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)); background: linear-gradient(left, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)); -webkit-border-radius: 16rpx 16rpx 0 0; border-radius: 16rpx 16rpx 0 0; overflow: hidden; position: relative; padding: 20rpx 24rpx; } .vip-card-box .card-bg { position: absolute; top: 20rpx; right: 0; width: 380rpx; height: 260rpx; } .vip-card-box .b-btn { position: absolute; right: 20rpx; top: 16rpx; width: 132rpx; height: 40rpx; text-align: center; line-height: 40rpx; font-size: 22rpx; color: #36343c; -webkit-border-radius: 20px; border-radius: 20px; background: -webkit-gradient(linear, left top, right top, from(#f9e6af), to(#ffd465)); background: -webkit-linear-gradient(left, #f9e6af, #ffd465); background: linear-gradient(left, #f9e6af, #ffd465); z-index: 1; } .vip-card-box .tit { font-size: 30rpx; color: #f7d680; margin-bottom: 28rpx; } .vip-card-box .tit .iconfont { color: #f6e5a3; margin-right: 16rpx; } .vip-card-box .e-b { font-size: 24rpx; color: #d8cba9; margin-top: 10rpx; } .cover-container { background: #f8f8f8; margin-top: -150rpx; padding: 0 30rpx; position: relative; background: #f5f5f5; padding-bottom: 20rpx; } .cover-container .arc { position: absolute; left: 0; top: -34rpx; width: 100%; height: 36rpx; } .tj-sction .tj-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; height: 140rpx; font-size: 24rpx; color: #75787d; } .tj-sction .num { font-size: 32rpx; color: #303133; margin-bottom: 8rpx; } .item-box { -webkit-border-radius: 10rpx; border-radius: 10rpx; background-color: white; margin-top: 20rpx; } .item-box .box-title { line-height: 1; padding: 30rpx; } .item-box .box-title .title { font-size: 32rpx; font-weight: bold; } .item-box .box-title .link { font-size: 26rpx; color: #909399; } .item-box .order-section { padding: 28rpx 0; } .item-box .order-section .order-item { width: 120rpx; height: 120rpx; -webkit-border-radius: 10rpx; border-radius: 10rpx; font-size: 24rpx; color: #303133; } .item-box .order-section .iconfont { font-size: 48rpx; margin-bottom: 18rpx; color: #fa436a; } .item-box .order-section .icon-shouhoutuikuan { font-size: 44rpx; } .item-box .order-section .icon { height: 50rpx; width: 48rpx; margin-bottom: 18rpx; background-size: 100%; background-repeat: no-repeat; background-position: center; } .item-box .order-section .icon .icon-img { width: 100%; height: 100%; } .history-section { margin-top: 20rpx; background: #fff; -webkit-border-radius: 10rpx; border-radius: 10rpx; } .history-section .sec-header { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: 28rpx; color: #303133; line-height: 40rpx; margin-left: 30rpx; padding-top: 30rpx; } .history-section .sec-header .iconfont { font-size: 44rpx; color: #dd524d; margin-right: 16rpx; line-height: 40rpx; } .history-section .h-list { white-space: nowrap; padding: 30rpx 30rpx 0; } .history-section .h-list .h-list-image { display: inline-block; width: 160rpx; height: 160rpx; margin-right: 20rpx; -webkit-border-radius: 10rpx; border-radius: 10rpx; }