.top-tab{ position: fixed; top: 0; left: 0; right: 0; background: #fff; overflow-x: auto; } .type{ display: flex; } .tab-box{ display: inline-flex; justify-content: center; align-items: center; width: 30%; position: relative; height: 90rpx; font-size: 30rpx; color: #242424; flex-shrink: 0; padding: 0 10rpx; } .tab-box.active{ color: #9F1512; } .tab-box image{ position: absolute; width: 15rpx; height: 40rpx; top: 50%; margin-top: -20rpx; display: none; } .tab-box.active image{ display: block; } .tab-box image.selected-l{ left: 10rpx; } .tab-box image.selected-r{ right: 10rpx; } .area{ overflow-x: auto; white-space: nowrap; position: fixed; top: 90rpx; left: 0; right: 0; border-bottom: 1px solid #DDD; background: #fff; } .area-box{ display: inline-flex; width: 30%; height: 90rpx; /* line-height: 90rpx; text-align: center; */ align-items: center; justify-content: center; padding: 0 20px; box-sizing: border-box; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 30rpx; } .area-box.active{ color: #9F1512; } .area-box image{ position: absolute; width: 15rpx; height: 40rpx; top: 50%; margin-top: -20rpx; display: none; } .area-box.active image{ display: block; } .area-box image.selected-l{ left: 20rpx; } .area-box image.selected-r{ right: 20rpx; } .news{ padding: 0 30rpx; border-bottom: 5px solid #FBFBFB; margin-top: 90rpx; } .news-box{ padding: 30rpx 0; border-bottom: 1px solid #EBEBEB; display: flex; flex-direction: column; } .news-box:first-child{ padding-top: 0; } .news-title{ color: #242424; font-size: 30rpx; font-weight: bold; } .news-info{ color: #949494; margin-top: 15rpx; font-size: 24rpx; } .news-info text{ margin-right: 20rpx; } .news-big-pic, .news-small-pic{ margin-top: 10rpx; } .news-big-pic image{ width: 100%; } .news-small-pic image{ width: 100%; height: 400rpx; } .transverse-news{ flex-direction: row; justify-content: space-between; } .news-row-img{ width: 30%; height: 150rpx; } .news-row-img image{ width: 100%; height: 100%; } .news-row-info{ width: 68%; }