page { width: 100%; height: auto; min-height: 100vh; overflow-y: auto; } .diff-plugg { width: 100%; height: 100%; background: #f7f6fb; } .diff-plugg .banner { width: 100%; height: 270rpx; } .diff-plugg .banner image { width: 100%; height: 100%; } .diff-plugg .tab-bar { width: 100%; height: 80rpx; background: #fff; display: flex; justify-content: space-around; position: relative; } .diff-plugg .tab-bar .tab { flex: 1; height: 100%; text-align: center; line-height: 80rpx; font-size: 30rpx; color: #999; } .diff-plugg .tab-bar .tab.select { color:#29B9A5; font-size: 32rpx; font-weight: bold; } .diff-plugg .tab-bar .select-bar { position: absolute; bottom: 0rpx; width: 30rpx; height: 8rpx; border-radius: 4rpx; background: #29B9A5; left: calc(16% - 15rpx); transition: left 0.4s linear; } .diff-plugg .tab-bar .select-bar.tab1 { left: calc(16% - 15rpx); transition: left 0.4s linear; } .diff-plugg .tab-bar .select-bar.tab2 { left: calc(50% - 15rpx); transition: left 0.4s linear; } .diff-plugg .tab-bar .select-bar.tab3 { left: calc(83% - 15rpx); transition: left 0.4s linear; } .diff-plugg .content { width: 100%; margin-top: 20rpx; } .diff-plugg .content .condition { width: 100%; height: 120rpx; box-sizing: border-box; padding: 0 20rpx; display: flex; justify-content: space-between; background: #fff; border-bottom: 1rpx solid #f6f5f8; } .diff-plugg .content .condition .left { height: 120rpx; display: flex; align-items: center; } .diff-plugg .content .condition .left button { width: 160rpx; height: 56rpx; min-height: 56rpx; color:#29B9A5; font-size: 28rpx; font-weight: normal; line-height: 51rpx; text-align:center; border-radius: 56rpx; border: 1rpx solid #29B9A5; background: #fff; padding: 0; margin: 0; } .diff-plugg .content .condition .left button.end { width: 200rpx; margin-right: 20rpx; } .diff-plugg .content .condition .left button.select { background: #29B9A5; color: #fff; } .diff-plugg .content .condition .left .hover-button { background: #29B9A5; color: #fff; } .diff-plugg .content .condition .right { display: flex; align-items: center; justify-content: flex-end; width: 164rpx; position: relative; } .diff-plugg .content .condition .right .time { color: #B6BAC6; font-size: 26rpx; } .diff-plugg .content .condition .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; } .diff-plugg .content .condition .right .trigger.rotate { transform: rotate(180deg); transform-origin: center 7rpx; transition: transform 0.4s; } .diff-plugg .content .condition .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; } .diff-plugg .content .condition .right .time-list .time-item { color: #B6BAC6; font-size: 26rpx; line-height: 50rpx; } .diff-plugg .content .list-item + .list-item { margin-top: 20rpx; } .no-data { width: 100%; height: calc(100vh - 570rpx); display: flex; align-items: center; justify-content: center; }