ccdi/ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue.backup

<template>
  <div class="quick-entry-container">
    <div class="section-title">
      <i class="el-icon-s-grid title-icon"></i>
      <span>快捷入口</span>
    </div>
    <el-row :gutter="12">
      <el-col :span="6">
        <div class="entry-card" @click="handleImportHistory">
          <div class="card-icon import-icon">
            <i class="el-icon-folder-opened"></i>
          </div>
          <div class="card-content">
            <div class="card-title">导入历史项目</div>
            <div class="card-desc">从历史项目中快速创建新项目</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="entry-card" @click="handleCreateQuarterly">
          <div class="card-icon quarterly-icon">
            <i class="el-icon-date"></i>
          </div>
          <div class="card-content">
            <div class="card-title">创建季度初核</div>
            <div class="card-desc">按季度创建初核排查项目</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="entry-card" @click="handleCreateEmployee">
          <div class="card-icon employee-icon">
            <i class="el-icon-user"></i>
          </div>
          <div class="card-content">
            <div class="card-title">创建新员工排查</div>
            <div class="card-desc">针对新入职员工的初核排查</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="entry-card" @click="handleCreateHighRisk">
          <div class="card-icon highrisk-icon">
            <i class="el-icon-warning"></i>
          </div>
          <div class="card-content">
            <div class="card-title">创建高风险专项</div>
            <div class="card-desc">针对高风险人员的专项排查</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'QuickEntry',
  methods: {
    handleImportHistory() {
      this.$emit('import-history')
    },
    handleCreateQuarterly() {
      this.$emit('create-quarterly')
    },
    handleCreateEmployee() {
      this.$emit('create-employee')
    },
    handleCreateHighRisk() {
      this.$emit('create-highrisk')
    }
  }
}
</script>

<style lang="scss" scoped>
.quick-entry-container {
  margin-top: 12px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #606266;

  .title-icon {
    margin-right: 6px;
    color: #909399;
    font-size: 16px;
  }
}

.entry-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #EBEEF5;
  height: 100%;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: #409EFF;

    .card-icon {
      transform: scale(1.05);
    }
  }

  &:active {
    transform: translateY(0);
  }
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
  font-size: 20px;
  color: white;

  &.import-icon {
    background-color: #667eea;
  }

  &.quarterly-icon {
    background-color: #f5576c;
  }

  &.employee-icon {
    background-color: #4facfe;
  }

  &.highrisk-icon {
    background-color: #F56C6C;
  }
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 2px;
}

.card-desc {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
}
</style>