songshankun
2023-10-17 b12ea16fa2d9440e9680127d126a4f3af450afd2
src/components/makepager/StatusCommonView.vue
@@ -10,7 +10,7 @@
        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"
@@ -87,10 +87,13 @@
<!-- 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;
@@ -102,15 +105,20 @@
      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;
@@ -132,7 +140,7 @@
      //   background: #edf9ff;
      // }
      .arrows_active {
        background: #495057;
        background: #2a78fb;
      }
      // .arrows_todo {
      //   background: #2c2c2c;