werun-wxapp/nova-werun/pages/home/sport/sport-home/index.wxss

/* nova-werun/pages/home/sport/sport-home/index.wxss */
.all {
  width: 100vw;
  padding-left: 40rpx;
  padding-right: 40rpx;
  padding-top: 20rpx;
  background: linear-gradient(to bottom, #4F9AF7, #FFFFFF);
  /* 竖直渐变 */
}
.all .tab-bar {
  display: flex;
  justify-content: space-around;
}
.all .tab-item {
  padding: 10rpx 0;
  text-align: center;
  position: relative;
  color: black;
  font-size: 32rpx;
}
.all .tab-item.active {
  position: relative;
  color: #0178EE;
  font-size: 32rpx;
  font-family: 'NotoSans-Bold-5', sans-serif;
}
.all .tab-item.active::after {
  content: "";
  width: 64rpx;
  position: absolute;
  left: calc(50% - 32rpx);
  right: calc(50% - 32rpx);
  bottom: 0;
  height: 2rpx;
  background-color: #0178EE;
  border-radius: 4rpx;
}
.all .textbox {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  margin-top: 40rpx;
  background-color: white;
}
.all .textbox .text {
  font-size: 30rpx;
  margin-left: 20rpx;
}
.all .textbox .number {
  font-size: 32rpx;
  margin-left: auto;
  margin-right: 20rpx;
}
.all .mapbox {
  width: 100%;
  height: 60vh;
  border-radius: 15rpx;
  position: relative;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
}
.all .mapbox .map {
  width: 100%;
  height: 100%;
  border-radius: 15rpx;
  overflow: hidden;
}
.all .mapbox .button {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  background-color: #4F9AF7;
  color: white;
  position: absolute;
  left: 38%;
  bottom: 100rpx;
}
.model {
  width: 80vw;
  height: 300rpx;
}
.model .content {
  width: 100%;
  padding: 40rpx;
  background-size: cover;
}
.model .content .close {
  height: 50rpx;
  width: 100%;
  display: flex;
}
.model .content .close .h2 {
  margin: auto;
  text-align: center;
  font-size: 40rpx;
  font-weight: bold;
}
.model .content .close van-icon {
  color: #807d7d;
  float: right;
}
.model .content .btnBox {
  margin-top: 50rpx;
  display: flex;
}
.model .content .btnBox .btn {
  font-size: 35rpx;
  width: 40%;
  background: #4F9AF7;
  margin: auto;
  color: white;
  padding: 20rpx;
  text-align: center;
  border-radius: 100rpx;
}