修改整体样式偏大问题

ali

2025-01-13 2f2b09869423f7e98c64f79dc96c62d9a1696f24

 zhitan-vue/src/views/businessconfiguration/gatewaystatus/gatewayStatus.vue

@@ -22,432 +22,447 @@
</template>

<script setup>


let dataList = ref([{
let dataList = ref([
  {
  name: "网关",
  list: [
    {
      id: 1,
      title_num: "数据库",
      dot: []
        dot: [],
    },
    {
      id: 2,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 3,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 4,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 5,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 6,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 7,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 8,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 9,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 10,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 11,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 12,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 13,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 14,
      title_num: "200331",
      dot: []
        dot: [],
    },
    {
      id: 15,
      title_num: "200461",
      dot: []
        dot: [],
    },
    {
      id: 16,
      title_num: "200475",
      dot: []
        dot: [],
    },
  ]
    ],
},
{
  name: "计算器具",
  list: [{
    list: [
      {
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    ],
  }
  ]
      },
    ],
},
{
  name: "网关",
  list: [{
    list: [
      {
    id: 1,
    title_num: "200505"
        title_num: "200505",
  },
  {
    id: 2,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 3,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 4,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 5,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 6,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 7,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 8,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 9,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 10,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 11,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 12,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 13,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 14,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 15,
    title_num: "200461"
        title_num: "200461",
  },
  {
    id: 16,
    title_num: "200604"
        title_num: "200604",
  },
  ]
    ],
},
{
  name: "计算器具",
  list: [{
    list: [
      {
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    ],
  },
  {
    id: 4,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    {
      id: '005',
      dot_li: ""
            id: "005",
            dot_li: "",
    },
    ],
  },
  {
    id: 5,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    {
      id: '005',
      dot_li: ""
            id: "005",
            dot_li: "",
    },
    {
      id: '006',
      dot_li: ""
            id: "006",
            dot_li: "",
    },
    ],
  }
  ]
      },
    ],
},
{
  name: "网关",
  list: [{
    list: [
      {
    id: 1,
    title_num: "200605"
        title_num: "200605",
  },
  {
    id: 2,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 3,
    title_num: "200331"
        title_num: "200331",
  },
  {
    id: 4,
    title_num: "38081703"
        title_num: "38081703",
  },
  ]
    ],
},
{
  name: "计算器具",
  list: [{
    list: [
      {
    id: 1,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    ],
  },
  {
    id: 2,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    ],
  },
  {
    id: 3,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    ],
  },
  {
    id: 4,
    title_num: "",
    dot: [{
      id: '001',
      dot_li: ""
        dot: [
          {
            id: "001",
            dot_li: "",
    },
    {
      id: '002',
      dot_li: ""
            id: "002",
            dot_li: "",
    },
    {
      id: '003',
      dot_li: ""
            id: "003",
            dot_li: "",
    },
    {
      id: '004',
      dot_li: ""
            id: "004",
            dot_li: "",
    },
    {
      id: '005',
      dot_li: ""
            id: "005",
            dot_li: "",
    },
    ],
  }
  ]
      },
    ],
},
])

</script>

<style lang="scss" scoped>
@import "@/assets/styles/page.scss";

.themeDark {
.border {
  border: 1px solid #fff;
  color: #fff;
@@ -503,7 +518,8 @@
            border-right: none;
          }

          .title_num {}
            .title_num {
            }

          .dot {
            width: 40px;
@@ -529,4 +545,90 @@
    }
  }
}
}

.themeLight {
  .border {
    border: 1px solid #666;
    color: #333;

    .table {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      border-bottom: 1px solid #666;

      &:last-child {
        border-bottom: none;
      }

      .num {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .name {
          width: 6%;
          min-height: 50px;
          height: max-content;
          display: flex;
          align-items: center;
          justify-content: center;
          border-right: none !important;
        }

        .firstLi {
          width: 94%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          border-left: 1px solid #666;

          .li {
            width: 6.25%;
            min-height: 50px;
            height: max-content;
            display: flex;
            align-items: center;
            justify-content: center;
            border-right: 1px solid #666;

            &.hasRightLine {
              border-right: 1px solid #666 !important;
            }

            &:last-child {
              border-right: none;
            }

            .title_num {
            }

            .dot {
              width: 40px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              flex-wrap: wrap;

              .dot_li {
                width: 15px;
                height: 15px;
                border-radius: 4px;
                background: #ff0000;
                margin: 10px auto;

                &:nth-child(2n) {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>