game-sdk/public/static/mini/happy_test/pages/box/box.wxss

page {
  background-color: #f9f9f9;
}

.fixed {
  height: 100vh;
  overflow: hidden;
}

.banner {
  height: 243rpx;
  width: 100%;
  overflow: hidden;
  background-color: #FFFFFF;
}

.banner image {
  width: 100%;
  display: block;
}

.boxTop {
  padding: 0 32rpx;
  position: relative;
  background-color: #fff;
  box-shadow: 0 5rpx 8rpx 0 rgba(0, 0, 0, 0.10);
}

.boxTop .boxTop_head {
  width: 186rpx;
  height: 186rpx;
  position: absolute;
  top: -82rpx;
  left: 50rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.10);
}

.boxTop .boxTop_head image, open-data {
  width: 172rpx;
  height: 172rpx;
  border-radius: 50%;
  overflow: hidden;
}

.boxTop .boxTop_info {
  width: 100%;
  min-height: 185rpx;
  padding: 0rpx 0 20rpx 235rpx;
  border-bottom: 2rpx solid #e7e7e7;
}

.boxTop .boxTop_info text {
  font-size: 28rpx;
  color: #888;
  display: block;
  line-height: 40rpx;
}

.boxTop .boxTop_info .username {
  margin-bottom: 10rpx;
  margin-top: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 32rpx;
  color: #333;
  line-height: 48rpx;
}

.boxTop .boxTop_info .sign {
  font-size: 28rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.boxTop .boxTop_info .nickname {
  display: flex;
  align-items: center;
}

.boxTop .boxTop_info .nickname text {
  max-width: 350rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: 700;
  line-height: 50rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boxTop .boxTop_info .nickname image {
  width: 36rpx;
  height: 36rpx;
  margin-left: 22rpx;
}

.boxTop .boxTop_users {
  padding-bottom: 27rpx;
}

.boxTop .boxTop_users .title {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
  padding: 25rpx 10rpx;
  font-weight: 700;
}

.boxTop .boxTop_users .change {
  background: #ff6b3f;
  border-radius: 90px;
  height: 30rpx;
  font-size: 20rpx;
  line-height: 30rpx;
  display: inline-block;
  color: #fff;
  margin-left: 10rpx;
  padding: 0 13rpx;
  font-weight: 400;
}

.boxTop .boxTop_users .more {
  color: #1A93FF;
  font-size: 24rpx;
  font-weight: bold;
  float: right;
}

.boxTop .boxTop_users .list {
  overflow-x: auto;
  padding: 0 10rpx;
  white-space: nowrap;
}

.boxTop .boxTop_users .list__item {
  width: 80rpx;
  height: 80rpx;
  display: inline-block;
  border-radius: 50%;
  margin-right: 28rpx;
  position: relative;
}
.boxTop .boxTop_users .list__item:last-child {
  margin-right: 0;
}
.boxTop .boxTop_users .list__item image {
  border-radius: 50%;
  height: 100%;
  width: 100%;
}
.boxTop .boxTop_users .list__item label {
  background-color: #FD0808;
  border-radius: 16rpx;
  color: #fff;
  font-size: 16rpx;
  height: 32rpx;
  left: 30rpx;
  line-height: 32rpx;
  position: absolute;
  text-align: center;
  top: 48rpx;
  white-space: nowrap;
  width: 68rpx;
}

/*  如何赚钱  */

.Prompt {
  position: relative;
}

.Prompt .tipsLable {
  width: 137rpx;
  color: #fff;
  background: #ff6b3f;
  border-bottom-left-radius: 13rpx;
  border-bottom-right-radius: 13rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  text-align: center;
  position: absolute;
  right: 32rpx;
  top: 0;
}

.Prompt .Prompt_content {
  height: 380rpx;
  position: relative;
}

.Prompt .close {
  position: absolute;
  right: 32rpx;
  top: 35rpx;
}

.Prompt .close image {
  width: 37rpx;
  height: 37rpx;
}

.Prompt .title {
  width: 137rpx;
  color: #fff;
  height: 80rpx;
  background: #ff6b3f;
  border-radius: 13rpx;
  font-size: 24rpx;
  left: 32rpx;
  top: 27rpx;
  text-align: center;
  padding-top: 13rpx;
  position: absolute;
}

.Prompt .tips {
  position: absolute;
  box-shadow:0 2rpx 8rpx 0 rgba(0, 0, 0, 0.10);
  top: 82rpx;
  left: 32rpx;
  background-color: #fff;
  padding-left: 45rpx;
  padding-right: 73rpx;
  width: 688rpx;
  border-radius: 19rpx;
  padding-top: 26rpx;
  padding-bottom: 30rpx;
}

.Prompt .tips view {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
  line-height: 42rpx;
}
.Prompt .tips view:last-child {
  margin-bottom: 0;
}
/* 我的盒子 */

.mybox {
  background-color: #fff;
}

.mybox .title {
  padding-top: 34rpx;
  padding-bottom: 10rpx;
  /* display: flex; */
  align-items: center;
  padding-left: 42rpx;
  padding-right: 54rpx;
  justify-content: space-between;
}

.mybox .title .left {
  font-size: 36rpx;
  font-weight: 700;
  color: #333;
  line-height: 45rpx;
  margin-right: 20rpx;
}

.mybox .title .left text {
  font-size: 20rpx;
  color: #fff;
  height: 30rpx;
  background-color: rgba(255,107,63,1);
  border-radius: 16rpx;
  padding: 0 10rpx;
  vertical-align: 7rpx;
}
.sub {
  color: #999;
  font-size: 28rpx;
}
.primary {
  color: #f00;
}

.mybox .title .right {
  height: 45rpx;
  display: flex;
  align-items: center;
}

.mybox .title .right text {
  font-size: 28rpx;
  margin-left: 10rpx;
  color: #666;
}

.mybox .title .right image {
  width: 31rpx;
  height: 31rpx;
}

.editInfo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editInfo .task {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  width: 100%;
  z-index: 9;
  height: 100%;
}

.editInfo .content {
  width: 632rpx;
  position: absolute;
  z-index: 100;
  padding: 0 52rpx;
  background: #fff;
  border-radius: 20rpx;
}

.editInfo .content .title {
  height: 110rpx;
  text-align: center;
  line-height: 110rpx;
  font-size: 32rpx;
  color: #547cff;
  font-weight: 700;
}

.editInfo .content .label {
  margin: 10rpx 0;
  font-size: 32rpx;
  color: #666;
  line-height: 45rpx;
}

.editInfo .content .input {
  position: relative;
  margin-bottom: 40rpx;
}

.editInfo .content .input input {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  font-size: 32rpx;
  color: #999;
  height: 66rpx;
}

.editInfo .content .num {
  position: absolute;
  line-height: 45rpx;
  font-size: 32rpx;
  color: #999;
  bottom: 11rpx;
  right: 0;
}

.editInfo .content .textarea {
  position: relative;
}

.editInfo .content .textarea textarea {
  width: 100%;
  padding-right: 80rpx;
  border-bottom: 1px solid #f0f0f0;
  font-size: 32rpx;
  color: #999;
  height: 90rpx;
}

.editInfo .content .btn {
  background: #557cff;
  width: 196rpx;
  height: 70rpx;
  font-size: 26rpx;
  display: block;
  margin: 49rpx auto 43rpx auto;
}

/*  */

.earn {
  padding-right: 21rpx;
  width: 100%;
  height: 106rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.10);
  background-color: #fff;
  margin: 10rpx 0;
}

.earn .Carousel {
  float: left;
  height: 106rpx;
  width: 500rpx;
}

.earn .Carousel_item {
  display: flex;
  height: 106rpx;
  align-items: center;
}

.earn .Carousel_item .icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 17rpx;
  margin-left: 40rpx;
  display: block;
}

.earn .Carousel_item .text {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

.earn .Carousel_item .text text {
  color: red;
}

.earn .to {
  padding-left: 21rpx;
  padding-right: 10rpx;
  float: right;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.earn .to::before {
  content: '';
  position: absolute;
  left: 0;
  top: 31rpx;
  width: 2px;
  height: 44rpx;
  background-color: #e3e3e3;
}

.earn .to button {
  width: 176rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #fff;
  height: 64rpx;
  background: #ff6b3f;
  box-shadow: 0 2px 8px 0 rgba(60, 45, 45, 0.50);
  border-radius: 102rpx;
}

/* 波浪 */
.waveBox {
  width: 100vw;
  height: 377rpx;
  border-radius: 5px;
  box-shadow: 0 2rpx 12rpx 0 rgba(0,0,0,0.10);
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  padding-top:190rpx;
}

.wave {
  opacity: .4;
  position: absolute;
  top: -234rpx;
  left: 50%;
  background: #1A93FF;
  width: 1100rpx;
  height: 1000rpx;
  margin-left: -500rpx;
  margin-top: -500rpx;
  -webkit-transform-origin: 50% 48%;
          transform-origin: 50% 48%;
  border-radius: 43%;
  -webkit-animation: drift 3000ms infinite linear;
          animation: drift 3000ms infinite linear;
}

.wave.-three {
  -webkit-animation: drift 2500ms infinite linear;
          animation: drift 2500ms infinite linear;
}

.wave.-two {
  -webkit-animation: drift 5000ms infinite linear;
          animation: drift 5000ms infinite linear;
  opacity: .1;
  background: yellow;
}

.box::after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(top, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
  background: linear-gradient(to bottom, #ee88aa, rgba(221, 238, 255, 0) 80%, rgba(255, 255, 255, 0.5));
  z-index: 11;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}


@-webkit-keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes drift {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  from {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/*  分享  */

.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;
}


.wrap_info {
  padding: 8rpx 0;
}
.player__avatar {
  border-radius: 50%;
  height: 40rpx;
  margin-right: 8rpx;
  vertical-align: middle;
  width: 40rpx;
}
.player__info {
  color: #8B8B8B;
  font-size: 26rpx;
  line-height: 40rpx;
  margin-left: 8rpx;
}