/*公共*/ .vent-flex-row { display: flex; align-items: center; } .vent-flex-row-between { display: flex; align-items: center; justify-content: space-between; } .vent-flex-row-wrap { display: flex; flex-wrap: wrap; } .vent-row-center{ display: flex; justify-content: center; align-items: center; } .vent-column-center { display: flex; flex-direction: column; justify-content: center; align-items: center; } .vent-right{ text-align: right; } .vent-margin-b-20{ margin-bottom: 20px; } .vent-margin-b-10 { margin-bottom: 10px; } .vent-margin-b-5 { margin-bottom: 5px; } .vent-margin-t-20 { margin-top: 20px !important; } .vent-margin-t-15 { margin-top: 15px !important; } .vent-margin-t-10 { margin-top: 10px; } .vent-margin-l-5 { margin-left: 5px; } .vent-margin-l-8 { margin-left: 8px; } .vent-margin-l-10 { margin-left: 10px; } .vent-margin-l-15 { margin-left: 15px; } .vent-margin-l-20 { margin-left: 20px; } .vent-margin-r-8 { margin-right: 8px; } .vent-margin-r-10 { margin-right: 10px; } .vent-margin-r-5 { margin-right: 5px; } .vent-padding-lr-5{ padding: 0 5px } .vent-padding-lr-10 { padding: 0 10px } .table-action-link { color: #00e7ff; padding: 0 5px; } .signal-round { display: inline-block; width: 8px; height: 8px; border-radius: 50%; // margin: 0 10px; position: relative; &::after { display: block; content: ''; position: absolute; width: 12px; height: 12px; top: -2px; left: -2px; border-radius: 50%; } } .signal-round-gry { background-color: #858585; &::after { background-color: #85858544; box-shadow: 0 0 1px 1px #85858599; } } .signal-round-run { background-color: #67fc00; &::after { background-color: #67fc0044; box-shadow: 0 0 1px 1px #c6ff77; } } .signal-round-blue { background-color: #00ffe1; &::after { background-color: #00b2de66; box-shadow: 0 0 1px 1px rgba(105, 238, 255, 0.3); } } .signal-round-warning { background-color: #e9170b; &::after { background-color: #e9170b44; box-shadow: 0 0 1px 1px #e9170b; } } .vent-breathe-zc { display: inline-block; position: relative; width: 14px; height: 14px; line-height: 14px; border: 1px solid #008000; border-radius: 10px; color: #fff; font-size: 20px; text-align: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden; background-color: #00FF00; animation: ease-in-out breathe 500ms infinite alternate; } .vent-breathe-yc { position: relative; width: 14px; height: 14px; line-height: 14px; border: 1px solid #008000; border-radius: 10px; color: #fff; font-size: 20px; text-align: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); overflow: hidden; background-color: #FF0000; animation: ease-in-out breathe 100ms infinite alternate; } @keyframes breathe { 0% { opacity: .2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1); } 100% { opacity: 1; border: 1px solid rgba(59, 235, 235, 1); box-shadow: 0 1px 30px rgba(59, 255, 255, 1); } }