| | |
| | | class="arrowsItem" |
| | | v-for="(item, index) in list" |
| | | :key="index" |
| | | :style="item.status === 'active' && index === 0 ? { background: '#495057' } : ''" |
| | | :style="item.status === 'active' && index === 0 ? { background: '#2a78fb' } : ''" |
| | | > |
| | | <div |
| | | class="arrows_up arrows" |
| | |
| | | <!-- Add "scoped" attribute to limit CSS to this component only --> |
| | | <style lang="scss" scoped> |
| | | .common-status { |
| | | overflow: hidden; |
| | | border: 1px solid #e9e9e9; |
| | | // overflow: hidden; |
| | | // border: 1px solid #e9e9e9; |
| | | display: flex; |
| | | align-items: center; |
| | | margin: 10px 30px; |
| | | padding-bottom: 10px; |
| | | border-bottom: 1px solid #e9e9e9; |
| | | .arrowsBox { |
| | | margin-left: auto; |
| | | display: flex; |
| | |
| | | position: relative; |
| | | height: 100%; |
| | | width: 80px; |
| | | z-index: 9999; |
| | | .arrows_up { |
| | | box-sizing: border-box; |
| | | transform-origin: right top; |
| | | transform: skewX(30deg); |
| | | border-top: 1px solid #e9e9e9; |
| | | border-right: 1px solid #e9e9e9; |
| | | } |
| | | .arrows_down { |
| | | box-sizing: border-box; |
| | | transform-origin: right bottom; |
| | | transform: skewX(-30deg); |
| | | border-right: 1px solid #e9e9e9; |
| | | border-bottom: 1px solid #e9e9e9; |
| | | } |
| | | &:first-child { |
| | | border-left: 1px solid #e9e9e9; |
| | |
| | | // background: #edf9ff; |
| | | // } |
| | | .arrows_active { |
| | | background: #495057; |
| | | background: #2a78fb; |
| | | } |
| | | // .arrows_todo { |
| | | // background: #2c2c2c; |