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

/* 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); /* 竖直渐变 */
    .tab-bar {
        display: flex;
        justify-content: space-around;
      }
      
      .tab-item {
        padding: 10rpx 0;
        text-align: center;
        position: relative;
        color: black;
        font-size: 32rpx;
      }
      
      .tab-item.active {
        position: relative;
        color: #0178EE;
        font-size: 32rpx;
        font-family: 'NotoSans-Bold-5', sans-serif;
      }
      
      .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;
        
      }
    .textbox{
        width: 100%;
        height: 80rpx;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        margin-top: 40rpx;
        background-color: white;
        .text{
            font-size: 30rpx;
            margin-left: 20rpx;
        }
        .number{
            font-size: 32rpx;
            margin-left: auto;
            margin-right: 20rpx;
        }
    }
    .mapbox{
        width: 100%;
        height: 1100rpx;
        border-radius: 15rpx;
        position: relative;
        margin-top: 30rpx;
        margin-bottom: 40rpx;
        .map{
            width:  100%;
            height: 100%;
            border-radius: 15rpx;
            overflow: hidden;
        }
        .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;
        }
    }
}