yuminge-app/yun-min-program-plugin-master/packageH/turmaroundTime/turmaroundIndex/turmaroundIndex.wxss

/* packageH/turmaroundTime/turmaroundIndex/turmaroundIndex.wxss */
page {
  background-color: #fff;
}

.turmaround_poS {
  padding-bottom: 120rpx;
  background: #fff;
  box-sizing: border-box;
}

/* 顶部导航 */
.head {
  width: 100%;

  /* height: 148rpx; */
  padding: 0 30rpx;
  padding-top: 21rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.headBox {
  width: 212rpx;
  height: 127rpx;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  font-size: 35.19rpx;
  color: #fefefe;
  line-height: 70rpx;
  font-weight: 600;
}

.rank {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeRank.png');
}

.myGrade {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimemyGrade.png');
}

.currentTime {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTime.png');
}

/* 榜单类型 */
.navlist {
  background-color: #fff;
  padding: 0 34rpx;
  height: 57rpx;
  display: flex;
  box-sizing: border-box;
}

.navlis {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30.01rpx;
  color: #45c5f7;
}

.selectNav {
  background-color: #45c5f7;
  color: #fefefe;
  position: relative;
  transition: 0.5s;
}

.selectNav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 45%;
  width: 0;
  height: 0;
  border: 11rpx solid;
  border-color: transparent transparent #fff;
}

/* 时间 */
.calendar {
  height: 68rpx;
  background-color: #fff;
}

.calendarTime {
  height: 68rpx;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-fontclass-rili {
  margin-top: -10rpx;
  color: #45c5f7;
}

.timetxt {
  font-size: 30rpx;
  color: #333;
  margin-right: 15rpx;
}

.iconLeft {
  margin-right: 141rpx;
}

.iconRight {
  margin-left: 141rpx;
}

/* 车类导航 */
.carNav {
  background-color: #45c5f7;
  padding: 0 29rpx;
  height: 87rpx;
  display: flex;
  align-items: center;
  width: 100%;
  overflow-x: scroll;
  box-sizing: border-box;
}

.carItem {
  flex-shrink: 0;
  display: flex;

  /* width: 20%; */
  height: 87rpx;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  box-sizing: border-box;
}

.carlis {
  color: #fff;
  font-size: 30.3rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tapCarlis {
  padding: 2rpx 19rpx;
  background-color: #fff;
  border-radius: 4rpx;
  color: #45c5f7;
  transition: 0.5s;
  font-weight: 600;
}

/* 前三名奖台 */
.prizeAwarding {
  height: 386rpx;
  width: 100%;
  box-sizing: border-box;

  /* turmaroundTimeBJ.png */
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeBJ.png');
  background-size: cover;
  overflow: hidden;
}

.headInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 70rpx;
}

.memberHead {
  width: 105rpx;
  height: 214rpx;
  color: #fff;
}

.headOne {
  width: 105rpx;
  height: 150rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeOne.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.headTwo {
  width: 105rpx;
  height: 150rpx;
  position: relative;

  /* background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeTwo.png');
  background-size: cover;
  background-repeat: no-repeat; */
}

.onImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.inImg {
  position: absolute;
  top: 33rpx;
  left: 7rpx;
  width: 94rpx;
  height: 94rpx;
  border-radius: 100%;
}

/* .headTwo image{
  width: 94rpx;
  height: 94rpx;
  border-radius: 50%;
} */

.headThr {
  width: 105rpx;
  height: 150rpx;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeThr.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.memberName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  font-size: 22rpx;
}

.second {
  color: #ffa628;
  text-align: center;
  font-size: 27rpx;
}

/* 成绩列表 */
.gradeList {
  padding: 0 30rpx;
  display: flex;
  background-color: #fff;
  box-sizing: border-box;
}

.gradeList .gradeLis {
  width: 25%;
  text-align: left;
  padding: 31rpx 0 30rpx 0;
  border-bottom: 1rpx solid #45c5f7;
}

.memberLis {
  box-sizing: border-box;
  display: flex;
  background: #fff;
  padding: 26rpx 30rpx;
  position: relative;
  align-items: center;
}

.line:last-child {
  background: #fff;
}

.line {
  width: 690rpx;
  height: 1rpx;
  background: #45c5f7;
  position: absolute;
  bottom: 0;
  left: 30rpx;
}

.no {
  flex: 0 7%;
  text-align: center;
}

.imgbox {
  flex: 0 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imgbox .userName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.img {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background: lightblue;
}

.img image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.carNumber {
  flex: 0 12%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.circle {
  flex: 0 20%;
  text-align: center;
  color: #666;
}

.totalTime {
  flex: 0 20%;
  text-align: center;
  font-size: 24rpx;
  color: #666;
}

.fastest {
  flex: 0 18%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -7rpx;
}

.fastTime {
  color: #f77860;
  font-size: 23rpx;
}

/* 实时成绩 */
.topCurrentTime {
  width: 100%;
  background: #fff;
}

.timeBox {
  margin: 0 20rpx;
  height: 210rpx;
  border: 1rpx solid #45c5f7;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  border-bottom: none;
}

.timeBoxOne {
  height: 67rpx;
  text-align: center;
  border-bottom: 1rpx solid #45c5f7;
  line-height: 67rpx;
  font-size: 26rpx;
  color: #202020;
}

.timeBoxTwo {
  height: 71rpx;
  border-bottom: 1rpx solid #45c5f7;
  font-size: 26rpx;
  color: #202020;
}

.timeBoxTwo_left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.timeBoxTwo_right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.timeBoxTwo_left_ds {
  flex: 1;
  display: flex;

  /* justify-content: space-around; */
  align-items: center;
}

/* 暂无成绩 */
.isNone {
  padding: 113rpx 136rpx;
  background: #fff;
}

.noneImg {
  width: 478rpx;
  height: 242rpx;
}

.noneImg image {
  width: 100%;
  height: 100%;
}

/* 我的成绩 */
.myGradeBox {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeBJ3.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
}

.gradeBoxBj {
  width: 100%;
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/turmaroundTimeBJ2.png');
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 99vh;
}

.userMsg {
  width: 674rpx;
  height: 489rpx;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 25rpx;
  margin: 0 auto;
  margin-top: 69rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.userTop {
  width: 100%;
  height: 330rpx;
  padding-left: 130rpx;
  padding-right: 47rpx;
  display: flex;
  align-items: center;
  margin-top: -35rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.userimg {
  width: 131rpx;
  height: 131rpx;
  background-color: #fff;
  border: solid 4rpx #ffaf3c;
  border-radius: 50%;
  position: relative;
}

.userimg image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(20deg);
}

.userimg_pos {
  position: absolute;
  width: 32rpx;
  height: 32rpx;
  bottom: 17rpx;
  left: 101rpx;
}

.userimg_pos image {
  width: 100%;
  height: 100%;
}

.nickName {
  font-size: 48rpx;
  color: #212121;
  margin-left: 27rpx;
  width: 186rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shareBtn {
  background-color: #ffad37;
  border-radius: 4rpx;
  font-size: 26rpx;
  width: 180rpx;
  height: 60rpx;
  color: #fff;
  text-align: center;
  line-height: 60rpx;
  position: relative;
}

.shareBtn .openBtn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

.userBottom {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-top: 35rpx;
}

.userBottom_left {
  width: 332rpx;
  height: 159rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0rpx 0rpx 0rpx 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.userBottom_left .icon-zb_all_like {
  color: #ffad37;
  font-size: 40rpx;
}

.userBottom_Right {
  width: 332rpx;
  height: 159rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 0rpx 0rpx 20rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.history {
  width: 674rpx;

  /* height: 89rpx; */
  background-color: #fff;
  border-radius: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin-bottom: 60rpx;
}

.historyHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 29rpx 31rpx;
  box-sizing: border-box;
  width: 100%;
}

.historyShow {
  margin-bottom: 20rpx;
  width: 630rpx;
  height: 132rpx;
  background-color: #fff0db;
  border-radius: 20rpx;
  padding: 51rpx 31rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.historyShow_two {
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* 悬浮我的排名 */
.myPos {
  width: 750rpx;
  height: 92rpx;
  background-color: #fff;
  box-shadow: 0rpx -3rpx 9rpx 0rpx rgba(219, 219, 219, 0.69);
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 53rpx 0 43rpx;
  box-sizing: border-box;
}

.myPosImg {
  display: flex;
  align-items: center;
  margin-left: 39rpx;
}

.myposLeft {
  display: flex;
  align-items: center;
}

.myPosImg image {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 6rpx;
}

.myposRight {
  margin-right: 15rpx;
  display: flex;
  align-items: center;
}

.myposRight icon {
  margin-top: -6rpx;
}