gubersail-platform-ui/src/views/survey/index-avue.scss

// Survey模块avue-crud样式定制
.survey-management-avue {
  // 搜索区域样式
  .avue-crud__search {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .avue-form {
      .el-form-item {
        margin-bottom: 18px;

        .el-form-item__label {
          font-weight: 500;
          color: #303133;
        }

        .el-input,
        .el-select,
        .el-date-editor {
          width: 100%;
        }
      }
    }
  }

  // 表格区域样式
  .avue-crud__menu {
    margin-bottom: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-button {
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  // 表格样式
  .avue-crud {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-table {
      .el-table__header {
        background-color: #f5f7fa;

        th {
          background-color: #f5f7fa;
          color: #606266;
          font-weight: 600;
        }
      }

      .el-table__row {
        &:hover {
          background-color: #f5f7fa;
        }
      }
    }

    // 状态标签样式
    .el-tag {
      font-weight: 500;
      border-radius: 4px;

      &.el-tag--success {
        background-color: #f0f9ff;
        border-color: #67c23a;
        color: #67c23a;
      }

      &.el-tag--warning {
        background-color: #fdf6ec;
        border-color: #e6a23c;
        color: #e6a23c;
      }

      &.el-tag--info {
        background-color: #f4f4f5;
        border-color: #909399;
        color: #909399;
      }
    }

    // 操作按钮样式
    .el-button--text {
      padding: 2px 8px;
      font-size: 12px;

      &:hover {
        background-color: #f0f9ff;
        color: #409eff;
      }
    }
  }

  // 分页样式
  .avue-crud__pagination {
    padding: 20px 0;
    text-align: right;
    background: #fff;
    border-radius: 4px;
    margin-top: 16px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .el-pagination {
      .el-pagination__total,
      .el-pagination__sizes,
      .el-pagination__jump {
        color: #606266;
      }
    }
  }
}

// 题目编辑弹窗样式
.question-editor-dialog {
  .el-dialog__header {
    background-color: #f5f7fa;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;

    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }

  .el-dialog__body {
    padding: 10px 20px;
    max-height: 70vh;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #c0c4cc;
      border-radius: 3px;
    }

    &::-webkit-scrollbar-track {
      background-color: #f5f7fa;
      border-radius: 3px;
    }
  }

  .el-dialog__footer {
    padding: 16px 20px;
    background-color: #f5f7fa;
    border-top: 1px solid #e4e7ed;
    text-align: center;

    .el-button {
      margin: 0 8px;
      min-width: 80px;
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .survey-management-avue {
    .avue-crud__search {
      padding: 15px;
    }

    .avue-crud__menu {
      padding: 12px 15px;

      .el-button {
        margin-bottom: 8px;
        font-size: 12px;
      }
    }
  }
}

@media (max-width: 768px) {
  .survey-management-avue {
    .avue-crud__search {
      padding: 10px;

      .avue-form {
        .el-form-item {
          margin-bottom: 12px;
        }
      }
    }

    .avue-crud__menu {
      padding: 10px;

      .el-button {
        width: 100%;
        margin-bottom: 8px;
        margin-right: 0;
      }
    }

    .avue-crud {
      .el-table {
        font-size: 12px;

        .el-table__header th {
          padding: 8px 4px;
        }

        .el-table__row td {
          padding: 8px 4px;
        }
      }

      .el-button--text {
        padding: 4px 6px;
        font-size: 11px;
      }
    }

    .avue-crud__pagination {
      padding: 15px 0;
      text-align: center;

      .el-pagination {
        justify-content: center;

        .el-pagination__sizes,
        .el-pagination__jump {
          display: none;
        }
      }
    }
  }

  .question-editor-dialog {
    width: 95% !important;
    margin-top: 5vh !important;

    .el-dialog__body {
      padding: 8px 15px;
    }
  }
}

@media (max-width: 480px) {
  .survey-management-avue {
    .avue-crud__search {
      .avue-form {
        .el-form-item {
          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              font-size: 14px;
            }
          }
        }
      }
    }

    .avue-crud {
      .el-table {
        .el-table__header th,
        .el-table__row td {
          padding: 6px 2px;
          font-size: 11px;
        }

        .cell {
          padding: 0 2px;
        }
      }
    }
  }
}

// 动画效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

// 加载状态样式
.avue-crud {
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);

    .el-loading-spinner {
      .path {
        stroke: #409eff;
      }
    }
  }
}

// 工具提示样式
.el-tooltip__popper {
  max-width: 300px;
  line-height: 1.5;
}