变更项目缩写

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

@@ -0,0 +1,169 @@
+<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>