.list { padding: 20px; &__item { display: flex; flex-direction: row; justify-content: space-between; background: #FFFFFF; padding: 20px; font-size: 28px; border-radius: 10px; margin-bottom: 17px; &__left { width: 100%; display: flex; flex-direction: column; overflow: hidden; &-one { font-size: 32px; margin-bottom: 10px; } &-two { color: #9A9A9A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &-bottom { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 10px; color: #FFFFFF; &_g { width: 49%; background: #1AAD19; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 10px; } &_d { width: 49%; background: #E64340; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 10px; } } } } } .spec { height: 100%; display: flex; flex-direction: column; justify-content: space-between; &-title { text-align: center; font-size: 30px; padding: 20px; } &-info { padding: 0 30px; text-align: center; font-size: 34px; } &-bottom {} } /* 遮罩层样式 */ .mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 998; display: flex; align-items: center; justify-content: center; .count { width: 70%; background: #fff; border-radius: 15px; .title { font-size: 36px; display: flex; flex-direction: row; align-items: center; justify-content: center; margin-top: 20px; } &_top { padding: 30px; margin: 40px 0; &_input { border-bottom: 1px solid #d9d9d9; font-size: 32px; } &_date { border-bottom: 1px solid #d9d9d9; font-size: 32px; margin-top: 30px; } &_dates { border-bottom: 1px solid #d9d9d9; font-size: 32px; margin-top: 30px; color: #757575; } } &_foot { display: flex; flex-direction: row; } } }