首页样式调整

hyingbo

16 小时以前 1598fac6c5769b061dd02e937fbaf969b5e1c20d

 src/views/dashboard/DncManagerSignage.vue

@@ -1,25 +1,31 @@
<template>
  <div class="page-container">
    <div class="content-container">
      <div style="width: 50%" class="left-col">
        <dv-border-box-9 style="padding: 30px 20px 0">
          <div id="running_state_chart" style="width:100%;height: 300px"></div>
          <div id="efficiency_chart" style="width: 100%;height: 465px"></div>
        </dv-border-box-9>
  <div class="home-container">
    <div class="left-card">
      <div class="card">
        <h2 class="card-title">卡片1</h2>
        <div class="card-content">
        </div>
      </div>
    </div>

      <div style="width: 50%" class="middle-col">
        <dv-border-box-9 style="padding: 10px 10px 0">
          <!-- 添加"我的待办"标题 -->
          <div class="flow-todo-title">我的待办</div>

    <!-- 右侧两个小卡片 -->
    <div class="right-cards">
      <div class="card top-card">
        <h2 class="card-title">我的待办</h2>
        <div class="card-content">
          <!-- 嵌入FlowTodo组件并设置默认分类 -->
          <flow-todo
            ref="flowTodo"
            class="embedded-flow-todo"
            :defaultCategories="['drApproval','ggApproval','programConfirmApproval']"
          ></flow-todo>
        </dv-border-box-9>
        </div>
      </div>

      <div class="card bottom-card">
        <h2 class="card-title">卡片2</h2>
        <div class="card-content">
        </div>
      </div>
    </div>
  </div>
@@ -43,7 +49,6 @@
    // 确保组件加载后使用默认分类查询数据
    this.$nextTick(() => {
      if (this.$refs.flowTodo) {
        // 触发查询，使用默认的category条件[1,2]
        this.$refs.flowTodo.searchQuery()
      }
    })
@@ -54,115 +59,103 @@
}
</script>

<style lang="less" scoped>
.page-container {
  background-color: #000b29;
<style scoped>
.home-container {
  display: flex;
  min-height: 100vh;
  padding: 15px;

  .content-container {
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    gap: 15px;

    .left-col, .middle-col {
      display: flex;
      flex-direction: column;
    }

    .middle-col {
      .dv-border-box-9 {
        background-color: #000b29;
        flex-grow: 1;
      }

      .flow-todo-title {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
      }

      .embedded-flow-todo {
        width: 100%;
        height: 340px; /* 控制高度为右侧一半区域 */
        overflow: auto;
        background-color: inherit;
      }
    }
  }
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  background-color: #f5f7fa;
}

// 嵌入组件样式调整
.embedded-flow-todo {
  // 隐藏查询区域、操作按钮和选择提示
  /deep/ .table-page-search-wrapper,
  /deep/ .table-operator,
  /deep/ .ant-alert {
    display: none !important;
  }

  // 隐藏多选框列
  /deep/ .ant-table-selection-column {
    display: none !important;
  }

  // 表格边框样式
  /deep/ .ant-table {
    border: 1px solid rgba(9, 9, 9, 0.1) !important;
    border-collapse: collapse !important;
  }
  /deep/ .ant-table-thead > tr > th {
    border: 1px solid rgba(9, 9, 9, 0.1) !important;
  }
  /deep/ .ant-table-tbody > tr > td {
    border: 1px solid rgba(9, 9, 9, 0.1) !important;
  }

  // 表格样式调整
  /deep/ .ant-table,
  /deep/ .ant-table-tbody > tr > td,
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-thead > tr > th span {
    background-color: transparent !important;
    color: #000000 !important;
  }

  // 分页控件样式
  /deep/ .ant-pagination-item,
  /deep/ .ant-pagination-prev,
  /deep/ .ant-pagination-next {
    background-color: rgb(255, 255, 255) !important;
    border-color: rgb(255, 255, 255) !important;
  }

  /deep/ .ant-pagination-item a,
  /deep/ .ant-pagination-prev a,
  /deep/ .ant-pagination-next a {
    color: #000000 !important;
  }

  /deep/ .ant-pagination-item-active {
    background-color: rgba(33, 186, 198, 0.6) !important;
    border-color: rgba(33, 186, 198, 0.8) !important;
  }

  /deep/ .ant-card {
    background-color: transparent !important;
    border: none !important;
  }

  // 操作列链接样式
  /deep/ .ant-table-tbody > tr > td a {
    color: #40a9ff !important;
  }
.left-card {
  flex: 1;
  min-width: 0;
}

// 边框组件样式
/deep/ .dv-border-box-9 {
  --color: rgba(33, 186, 198, 0.6) !important;
  background-color: #000b29 !important;
.right-cards {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>

.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-card {
  flex: 1;
}

.bottom-card {
  flex: 1;
}

.card-title {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.card-content {
  flex: 1;
  overflow: auto;
}

/* 清除待办页面查询条件、选中条数、复选框 */
.embedded-flow-todo >>> .table-page-search-wrapper {
  display: none !important;
}

.embedded-flow-todo >>> .table-operator {
  display: none !important;
}

.embedded-flow-todo >>> .ant-alert.ant-alert-info {
  display: none !important;
}

.embedded-flow-todo >>> .ant-table-thead .ant-table-selection-column,
.embedded-flow-todo >>> .ant-table-tbody .ant-table-selection-column {
  display: none !important;
}

.embedded-flow-todo >>> .ant-table-selection {
  display: none !important;
}
.embedded-flow-todo >>> .ant-table-row-selected {
  background: transparent !important;
}

.embedded-flow-todo >>> .a-table {
  margin-top: 0 !important;
  border-top: none !important;
}

@media (max-width: 992px) {
  .home-container {
    flex-direction: column;
  }

  .left-card, .right-cards {
    width: 100%;
  }

  .left-card {
    margin-bottom: 20px;
  }
}
</style>