game-sdk/public/static/mini/box/pages/user/index.wxss

/* pages/user/user.wxss */

.banner {
  background-color: #fff;
  height: 592rpx;
  padding-bottom: 285rpx;
}

.banner > image {
  height: 100%;
  width: 100%;
}

.income {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
  display: flex;
  height: 198rpx;
  margin: 13rpx 32rpx 52rpx;
  padding: 63rpx 0 45rpx;
  position: relative;
}

.income_item {
  border-right: 2rpx solid #f0f0f0;
  flex: 1;
  text-align: center;
}

.income_item:last-child {
  border-right: 0 none;
}

.income_price {
  color: #e4536e;
  display: block;
  font-size: 48rpx;
  font-weight: bold;
  line-height: 1;
  margin: -10rpx 0 24rpx;
}

.income_text {
  color: #999;
  display: block;
  font-size: 28rpx;
  line-height: 1;
}

.btn_group {
  display: flex;
  height: 117rpx;
  margin: 0 11rpx;
  padding-bottom: 35rpx;
}

.btn_item {
  align-items: center;
  background-color: #fff;
  border-radius: 41rpx;
  box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.2);
  color: #333;
  display: flex;
  flex: 1;
  font-weight: bold;
  font-size: 32rpx;
  height: 82rpx;
  justify-content: center;
  margin: 0 21rpx;
}

.btn_icon {
  height: 48rpx;
  margin-right: 10rpx;
  vertical-align: -10rpx;
  width: 48rpx;
}

.quick {
  margin: 20rpx 0;
}

.quick_item {
  align-items: center;
  background-color: #fff;
  border-bottom: 2rpx solid #fafafa;
  color: #333;
  display: flex;
  font-size: 30rpx;
  height: 107rpx;
  padding: 0 54rpx 0 44rpx;
}

.quick_icon {
  height: 46rpx;
  margin-right: 28rpx;
  vertical-align: -10rpx;
  width: 46rpx;
}

.quick_text {
  flex: 1;
}

.quick_rarr {
  height: 40rpx;
  width: 40rpx;
}

.to-withdraw {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.to-withdraw_inner {
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
}

.to-withdraw_img {
  height: 350rpx;
  margin-bottom: 70rpx;
  vertical-align: top;
  width: 640rpx;
}

.to-withdraw_btn {
  background-color: #557cff;
  border-radius: 44rpx;
  color: #fff;
  display: inline-block;
  font-size: 36rpx;
  font-weight: bold;
  height: 88rpx;
  width: 526rpx;
}

/* ------------------------------------------------------------------------------- */

page {
  background: #fff;
}

.userTop {
  padding: 64rpx 20rpx;
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.avatar {
}

.avatar .avatar_bg {
  height: 178rpx;
  width: 178rpx;
  background: #eee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar .avatar_bg .icon {
  background: #b7b7b7;
  width: 160rpx;
  height: 160rpx;
  overflow: hidden;
  border-radius: 50%;
  display: block;
}

.avatar .avatar_bg .icon image {
  width: 100%;
  height: 100%;
}

.avatar .avatar_bg .sex {
  position: absolute;
  width: 38rpx;
  height: 38rpx;
  bottom: 9rpx;
  right: 12rpx;
}

.userTop .nickname {
  margin-top: 16rpx;
  height: 24rpx;
}

.userTop .nickname .username {
  font-size: 36rpx;
  color: #333;
}

.cards {
  width: 100%;
  background: #fff;
  padding: 0 44rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cards .cards_item {
  width: 312rpx;
  height: 140rpx;
  border-radius: 14px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding-bottom: 20rpx;
  padding-top: 20rpx;
}

.cards .cards_item:first-child {
  background: #656dff;
}

.cards .cards_item:last-child {
  background: #00aeff;
}

.cards .num {
  line-height: 50rpx;
  font-size: 38rpx;
  font-weight: 700;
}

.cards .label {
  line-height: 40rpx;
  font-size: 28rpx;
}
.cards .label text {
  font-weight: 700;
}

.games {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 50rpx 44rpx 0 50rpx;
}

.games .games_title {
  font-size: 36rpx;
  color: #333;
  padding: 15rpx 0;
  font-weight: 700;
  display: block;
}

.games .games_tips {
  font-size: 28rpx;
  color: #666;
  display: block;
}

.games .games_list {
  padding-top: 46rpx;
  padding-bottom: 35rpx;
  display: flex;
  align-items: center;
}

.games .games_list .item {
  margin-right: 47rpx;
}

.games .games_list .item .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
}

.games .icon {
  width: 130rpx;
  height: 130rpx;
  border-radius: 30rpx;
}

.games .name {
  font-size: 24rpx;
  max-width: 130rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333;
  line-height: 33rpx;
  margin-top: 20rpx;
}

.banner1 {
  background: #FFFFFF;
  height: 340rpx;
  margin-bottom: -170rpx;
}
.banner1 image {
  margin-top: -20rpx;
  width: 100%;
}

/* 用户信息 */

.userinfo {
  background-color: #fff;
  height: 234rpx;
  position: relative;
}

.userinfo .userinfo_avatar {
  position: absolute;
  left: 32rpx;
  top: 32rpx;
  width: 182rpx;
  height: 182rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.20);
}

.userinfo .userinfo_avatar image {
  width: 172rpx;
  height: 172rpx;
  border-radius: 50%;
}

.userinfo .userinfo_nickname {
  display: block;
  font-size: 40rpx;
  color: #333;
  line-height: 40rpx;
  padding-left: 248rpx;
  font-weight: 700;
  padding-top: 50rpx;
}
.userinfo_id {
  color: #999;
  display: block;
  font-size: 26rpx;
  margin-top: 16rpx;
}

.userinfo .userinfo_ft {
  background-color: #fff;
  height: 80rpx;
  padding: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 248rpx;
}

.userinfo_tl {
  /* margin-left: 36rpx; */
}
.userinfo_tl .id {
  font-size: 26rpx;
  color: #333;
  text-indent: 1em;
  font-weight: 700;
  margin-bottom: 8rpx;
  line-height: 37rpx;
}

.userinfo_tl .balance {
  font-size: 24rpx;
  color: #666;
  line-height: 33rpx;
}
.userinfo_tr {
  margin-right: 16rpx;
}
.userinfo_tr button {
  width: 124rpx;
  height: 58rpx;
  background-color: transparent;
  color: #ff9500;
  border-radius: 93px;
  font-size: 24rpx;
  text-decoration: underline;
}
.userinfo_tr .gd {
  background-color: #FF9500;
  border-radius: 228rpx;
  color: #fff;
  height: 44rpx;
  line-height: 44rpx;
  text-decoration: none;
  width: 112rpx;
  font-size: 20rpx;
}

/* 任务列表 */

.taskWrap {
  background-color: #fff;
  margin: 20rpx 0;
}

.taskWrap .taskWrap_cell {
  padding: 22rpx 38rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.taskWrap_cell::before {
  content: '';
  width: 548rpx;
  height: 1px;
  background-color: #e6e6e6;
  position: absolute;
  right: 54rpx;
  bottom: 0;
}

.taskWrap_cell:last-child::before {
  display: none;
}

.taskWrap_cell .icon {
  margin-right: 32rpx;
  height: 80rpx;
  width: 80rpx;
  overflow: hidden;
  border-radius: 50%;
}

.taskWrap_cell .icon image {
  width: 100%;
  height: 100%;
}

.taskWrap_cell .info {
  flex: 1;
}

.taskWrap_cell .info, title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
  line-height: 40rpx;
}

.taskWrap_cell .info .target {
  font-size: 22rpx;
  color: #999;
  margin-top: 6rpx;
  line-height: 30rpx;
}

.taskWrap_cell .right {
  margin-left: auto;
  margin-right: 16rpx;
}

/* 我玩过的游戏 */

.playLog {
  background-color: #fff;
}

.playLog .title {
  height: 96rpx;
  font-size: 32rpx;
  color: #333;
  line-height: 96rpx;
  padding: 0 26rpx;
  font-weight: 700;
}

.gameWrap {
  min-height: 250rpx;
  padding: 0 14rpx;
  padding-bottom: 37rpx;
  align-items: center;
}

.gameWrap .gameWrap_item {
  float: left;
  width: 25%;
}

.gameWrap navigator,
.gameWrap .entrance {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.gameWrap_item .name {
  font-size: 26rpx;
  color: #333;
  text-align: center;
  line-height: 37rpx;
  width: 152rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 15rpx;
  margin-bottom: 7rpx;
  font-weight: 700;
}

.gameWrap_item .icon {
  width: 152rpx;
  height: 152rpx;
  border-radius: 24rpx;
  position: relative;
}

.gameWrap_item .icon image {
  width: 100%;
  height: 100%;
  border-radius: 24rpx;
}

.gameWrap_item .icon text {
  position: absolute;
  right: -5rpx;
  bottom: 0;
  padding: 0 12rpx;
  height: 36rpx;
  background: #ff1a19;
  border-radius: 18rpx 18rpx 18rpx 0;
  font-size: 18rpx;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gameWrap_item .num {
  font-size: 22rpx;
  color: #999;
  text-align: center;
  width: 152rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share {
  position: fixed;
  top: auto;
  right: 30rpx;
  bottom: 54rpx;
  z-index: 99;
}
.share button {
  background-color: transparent;
  height: 80rpx;
  width: 80rpx;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.share button image {
  width: 80rpx;
  height: 80rpx;
}

/*  分享  */

.shareMask {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 100;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
}

.shareMask .menu {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  height: 228rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shareMask .menu_item {
  flex: 1;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.shareMask .menu_item image {
  width: 100rpx;
  height: 100rpx;
}

.shareMask .menu_item text {
  color: #333;
  font-size: 24rpx;
  font-weight: bold;
  margin-top: 12rpx;
}

/*  分享朋友圈  */

.shareCircles {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 100;
  height: 100%;
}

.shareCircles .task {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.shareCircles .content {
  width: 466rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 1005rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

.shareCircles .main_img {
  width: 466rpx;
  height: 828rpx;
}

.shareCircles .main_img image {
  width: 100%;
  height: 100%;
}

.shareCircles .prompt {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #fff;
  margin-top: 17rpx;
  margin-bottom: 32rpx;
  white-space: nowrap;
}

.shareCircles .btn {
  width: 395rpx;
  height: 88rpx;
  border-radius: 100px;
  font-size: 36rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #557cff;
}

.share_close {
  height: 40rpx;
  position: absolute;
  right: 27rpx;
  top: -61rpx;
  width: 40rpx;
}