170 lines
3.6 KiB
Vue
170 lines
3.6 KiB
Vue
<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: 50%;
|
|
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: #6B7280;
|
|
}
|
|
|
|
&.quarterly-icon {
|
|
background-color: #3B82F6;
|
|
}
|
|
|
|
&.employee-icon {
|
|
background-color: #10B981;
|
|
}
|
|
|
|
&.highrisk-icon {
|
|
background-color: #F59E0B;
|
|
}
|
|
}
|
|
|
|
.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>
|