navigation/pages/main/main.wxss

/* pages/main/main.wxss */

/* 轮播图区域 */
.noBanners{
    display: flex;
    font-size: 40rpx;
    color: gray;
    justify-content: center;
    line-height: 400rpx;
}
.banners {
    width: 100%;
    height: 400rpx;
    padding: 2rpx 0;
}

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

/* 公告区 */
.notice {
    display: flex;
    height: 60rpx;
    background-color: rgb(171, 188, 236);
    align-items: center;
    margin-top: 20rpx;
}
/* 公告详情、公告标题 */
.noticeTitle,
.noticeDetail {
    font-size: 36rpx;
    height: 60rpx;
    line-height: 60rpx;
}
.noticeTitle{
    margin-left: 20rpx;
}

/* 公告图标 */
.noticeIcon {
    width: 40rpx;
}

/* 公告内容 */
.noticeContent {
    height: 60rpx;
    width: 52%;
    margin-left: 20rpx;
    overflow: hidden;
    flex-wrap: nowrap;
}
/* 公告文字 */
.noticeDetail {
    white-space: nowrap;
    animation: loop 10s 0.5s linear infinite normal;
    display: inline-block;
    vertical-align: top;
    font-size: 32rpx;
    color: #fff;
}
/* 公告文字滚动 */
@keyframes loop {
    0% {
        transform: translateX(400rpx);
        -webkit-transform: translateX(400rpx);
    }
    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes loop {
    0% {
      transform: translateX(600rpx);
      -webkit-transform: translateX(600rpx);
    }  
    100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
    }
  }
/* 查看详情 */
.toNoticeDetail {
    /* background-color: #fff; */
    /* border-radius: 40rpx; */
    padding: 16rpx;
    /* margin-right: 20rpx; */
}

/* 轮播图下方导航模块 */
.navList {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    padding: 20rpx;
    justify-content: space-around;
    text-align: center;
}

.title {
    font-size: 40rpx;
    color: #fff;
    line-height: 200rpx;
}

/* 导航模块公共样式 */
.mainIntro,
.secondIntro,
.scenicList,
.recommendCate {
    width: 45%;
    height: 200rpx;
    margin-top: 40rpx;
    border-radius: 20rpx;
}

/* 单独设置导航模块的背景色 */
.mainIntro {
    background-color: #48D881;
}

.secondIntro {
    background-color: #F9AC42;
}

.scenicList {
    background-color: #f76c71;
}

.recommendCate {
    background-color: #3FA6F5;
}
/* 反馈建议 */
.suggest{
    margin-top: 100rpx;
}