MD_YOSwechat/pages/tabbar/home/index.scss

/* 顶部 */
.header {
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 88rpx;
    background-color: var(--bgColor);

    &_title {
        height: 50rpx;
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        margin: 0 8rpx 0 24rpx;
    }
}

/* 轮播图区域 */
.banner {
    position: relative;
    width: 750rpx;
    height: 170rpx;
    background-color: var(--bgColor);
    padding-top: 24rpx;
    // margin-bottom: 126rpx;

    /* 椭圆底部 */
    &_oval {
        position: absolute;
        height: 50px;
        width: 100%;
        top: 160rpx;
        background-color: var(--bgColor);
        border-radius: 0 0 100% 50% / 100%;
    }

    /* 主内容 */
    &_content {
        position: absolute;
        width: 690rpx;
        height: 300rpx;
        background-color: #FFFFFF;
        box-shadow: inset 0px 2rpx 0px 2rpx rgba(255, 255, 255, 0.16);
        border-radius: 16rpx;
        overflow: hidden;
        margin: 0 !important;
        left: 30rpx;

        swiper-item {
            width: 100%;
            height: 100%;
            border-radius: 16rpx;


            image {
                width: 100%;
                height: 100%;
                border-radius: 16rpx;
            }
        }
    }
}

/* 滚动播放 */
.scroll-area {
    width: 690rpx;
    height: 40rpx;
    margin: 20rpx auto 0;

    .notice-bar {
        flex: 1;
        height: 40rpx;
        line-height: 50rpx;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #666666;

        .iconfont {
            color: #FA8C16;
            margin-right: 20rpx;
        }
    }
}

/* 宫格区域 */
.grld {
    display: flex;
    flex-wrap: wrap;

    .item {
        width: 172rpx;
        height: 170rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;

        .iconfont {
            height: 64rpx;
            line-height: 64rpx;
            font-size: 64rpx;
            color: var(--assist);
            margin-top: 30rpx;
        }

        text {
            font-size: 28rpx;
            font-family: PingFangSC-Regular-, PingFangSC-Regular;
            color: #333333;
            margin-top: 16rpx;
        }
    }
}

/* 概况 */
.general-situation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 671.5rpx;
    height: 40rpx;
    margin: 32rpx auto 0;

    .title {
        font-size: 30rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;

        text {
            color: #FA8C16;
        }
    }

    .time {
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #999999;
    }
}

/* 概况数据展示 */
.data-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 290rpx;

    .item {
        width: 33.33%;
        height: 100rpx;
        margin-top: 30rpx;
        text-align: center;

        .label {
            height: 34rpx;
            line-height: 34rpx;
            font-size: 24rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            color: #999999;
        }

        .nubmer {
            height: 50rpx;
            line-height: 50rpx;
            font-size: 36rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
            margin-top: 14rpx;
        }
    }
}

/* 通告 */
.annunciate {
    .unread {
        display: flex;
        align-items: center;
        height: 34rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        color: #666666;

        .circle {
            width: 16rpx;
            height: 16rpx;
            background: #FF3B30;
            border-radius: 50%;
            margin: 4rpx 10rpx 0;
        }

        .icon {
            margin-top: 3rpx;
        }
    }

    .item-box {
        padding: 20rpx 0;
    }
}