.bg { width: 100%; height: 100vh; position: fixed; z-index: 0; image { width: 100%; height: 100vh; } } .listBox{ position: relative; z-index: 1; } .content { width: 100%; } .my-top{ .head{ .logo-title{ width: 20%; color: #fff; padding-left: 20rpx; } .title{ color: #fff; font-size: 30rpx; margin-left: 20rpx; } .setting-mess{ width: 20%; display: flex; align-items: center; height: 100%; margin-right: 20rpx; .setting{ display: flex; justify-content: center; align-items: center; width: 80rpx; height: 100%; text{ font-size: 38rpx; } } .mess{ display: flex; justify-content: center; align-items: center; width: 80rpx; height: 100%; text{ font-size: 38rpx; } } } } /* 用户信息 */ .user-info{ display: flex; align-items: center; padding: 0 25rpx; margin: 40rpx 0; .portrait{ width: 120rpx; height: 120rpx; margin-right: 20rpx; image{ width: 120rpx; height: 120rpx; border-radius: 20rpx; } } .info{ display: flex; flex-direction: column; justify-content: center; width: 74%; height: 100%; color: #000; .nickname{ width: 100%; padding: 10rpx 0; text{ font-size: 46rpx; font-weight: bold; } } .rank{ display: flex; align-items: center; .rank-img { width: 25rpx; height: 25rpx; margin-left: 10rpx; } image{ width: 35rpx; height: 35rpx; margin-right: 10rpx; } text{ font-size: 24rpx; } } } } .user-right { display: flex; image { width: 30rpx; height: 30rpx; } } } .main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; width: 100%; } .titleall-box { display: flex; justify-content: space-between; padding: 40rpx 20rpx 20rpx 0; .titleall-left { font-size: 32rpx; font-weight: bold; display: flex; align-items: center; .titleall-left-line { width: 16rpx; height: 36rpx; border-radius: 100rpx; background-color: #5D76F4; margin-right: 20rpx; } } .titleall-right { color: #C1C1C1; image { width: 20rpx; height: 20rpx; margin-left: 10rpx; } } } .message-list{ padding: 0 4%; background-color: #FFFFFF; border-radius: 0 0 20rpx 20rpx; margin: 0 25rpx; border-radius: 20rpx; .list{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100rpx; border-bottom: 2rpx solid #f6f6f6; .icon-data{ display: flex; align-items: center; width: 80%; height: 100%; .icon{ display: flex; align-items: center; justify-content: center; width: 40rpx; height: 40rpx; image{ width: 40rpx; height: 40rpx; } } .data{ margin-left: 20rpx; .title{ display: flex; width: 100%; text{ font-size: 30rpx; color: #000; } } } } .more{ display: flex; align-items: center; text{ font-size: 26rpx; color: #000; } } } } .Affirm-invoice { .service-list .list { width: 20% !important; } } /* 我的服务 */ .my-service{ background-color: #FFFFFF; border-radius: 20rpx; padding: 20rpx; margin: 20rpx; .toptitle { display: flex; justify-content: space-between; margin-bottom: 20rpx; .title{ display: flex; align-items: center; margin-bottom: 20rpx; .line { width: 15rpx; height: 34rpx; background: linear-gradient(to bottom, #74CE6A, #3CB545); border-radius: 100rpx; margin-right: 10rpx; } .line-blue { background: linear-gradient(to bottom, #6BB7F6, #4699E7); } text{ font-size: 32rpx; font-weight: bold; color: #212121; } } .title-more { color: #C1C1C1; font-size: 28rpx; image { width: 24rpx; height: 24rpx; } } } .service-list{ display: flex; flex-wrap: wrap; padding: 0 4%; .list{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 25%; height: 140rpx; .thumb{ width: 60rpx; height: 60rpx; image{ width: 100%; height: 100%; } } .name{ display: flex; align-items: center; justify-content: center; height: 80rpx; text{ color: #212121; font-size: 24rpx; } } } } }