page { width: 100%; height: auto; min-height: 100vh; background: #f7f6f9; } .banner{ width: 100%; height: 270rpx; } .banner image{ width: 100%; height: 270rpx; } .banner-con{ position: absolute; top:0; width: 100%; height: 270rpx; color: #fff; } .banner-con .title{ padding: 40rpx 0 0 50rpx; font-size: 30rpx; } .banner-con .num{ font-size: 50rpx; padding: 10rpx 0 0 50rpx; } .banner-con .txt{ padding: 16rpx 0 0 50rpx; font-size: 30rpx; } .header-out { height: 100rpx; width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ececec; box-sizing: border-box; padding: 0 20rpx; background: #fff; } .header-title { font-size: 32rpx; color: #666666; } .header-out .right { display: flex; align-items: center; justify-content: flex-end; width: 164rpx; position: relative; } .header-out .right .time { color: #B6BAC6; font-size: 26rpx; } .header-out .right .trigger { width: 0; height: 0; border: 12rpx solid transparent; border-top: 15rpx solid #B6BAC6; margin-left: 10rpx; position: relative; top: 8rpx; transform: rotate(0deg); transform-origin: center 7rpx; transition: transform 0.4s; } .header-out .right .trigger.rotate { transform: rotate(180deg); transform-origin: center 7rpx; transition: transform 0.4s; } .header-out .right .time-list { width: 164rpx; position: absolute; left: 0rpx; top: 80rpx; background: #fff; box-sizing: border-box; padding: 0 10rpx; height: 200rpx; z-index: 100; box-shadow: 1px 1px 10px #ccc; overflow: hidden; transition: height 0.4s; } .header-out .right .time-list .time-item { color: #B6BAC6; font-size: 26rpx; line-height: 50rpx; } .diff-plugg .content .list-item + .list-item { margin-top: 20rpx; } .font { font-family: 'PingFang-SC-Medium'; } .list-item + .list-item { margin-top: 20rpx; } .no-data { width: 100%; height: calc(100vh - 470rpx); display: flex; align-items: center; justify-content: center; }