|
|
@@ -69,24 +69,20 @@
|
|
|
{{ item.categoryName }}
|
|
|
</div>
|
|
|
</template>
|
|
|
- <el-row class="task-item" :gutter="8">
|
|
|
- <el-col class="mb-[6px]" :lg="6" :xl="4" :md="8" :xs="24" v-for="process in item.processList" :key="process.processId">
|
|
|
- <div class="card-in" @click="testEv(process)">
|
|
|
- <LeIcon class="flow-icon" :icon-class="`${flowIconPrefix}${process.processIcon}`" />
|
|
|
- <!-- <div class="flow-icon">
|
|
|
- <img :src="getAssetsFile(process.processIcon + '.svg')" />
|
|
|
- </div>-->
|
|
|
- <div class="space space-vertical">
|
|
|
+ <el-row class="task-item" :gutter="16">
|
|
|
+ <el-col v-for="process in item.processList" :key="process.processId" :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-4">
|
|
|
+ <div class="card-in hover:shadow-md transition-all duration-300" @click="testEv(process)">
|
|
|
+ <LeIcon class="flow-icon text-4xl text-primary mr-2" :icon-class="`${flowIconPrefix}${process.processIcon}`" />
|
|
|
+ <div class="space space-vertical flex-grow overflow-hidden">
|
|
|
<div class="space-item">
|
|
|
- <div class="first-edit" :title="process.processName">
|
|
|
- <span>{{ process.processName }}</span>
|
|
|
+ <div class="first-edit font-semibold text-lg truncate" :title="process.processName">
|
|
|
+ {{ process.processName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- <div class="space-item">
|
|
|
- <div>{{ process.createTime }}</div>
|
|
|
- </div>-->
|
|
|
- <div class="space-item" :title="process.processKey">
|
|
|
- <div>{{ process.processKey }}</div>
|
|
|
+ <div class="space-item">
|
|
|
+ <div class="text-sm text-gray-600 truncate" :title="process.processKey">
|
|
|
+ {{ process.processKey }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -163,62 +159,21 @@ onMounted(() => {
|
|
|
}
|
|
|
}
|
|
|
.card-in {
|
|
|
- //height: 100px;
|
|
|
border-radius: 8px;
|
|
|
- padding: 8px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: center;
|
|
|
- width: 100%;
|
|
|
- border: 1px solid #d9d9d9;
|
|
|
background: var(--component-background);
|
|
|
- cursor: pointer;
|
|
|
- > div:nth-child(1) {
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- > div:nth-child(2) {
|
|
|
- flex: 0 1 100%;
|
|
|
- margin-left: 12px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- line-height: 1.4;
|
|
|
- .first-edit {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 500;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- > div {
|
|
|
- cursor: default;
|
|
|
- width: 100%;
|
|
|
- white-space: nowrap;
|
|
|
- text-overflow: ellipsis;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ @apply flex items-center p-2 rounded-lg cursor-pointer;
|
|
|
+ border: 1px solid var(--el-border-color-light);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ border-color: var(--el-color-primary);
|
|
|
}
|
|
|
+
|
|
|
.flow-icon {
|
|
|
- font-size: 50px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
- .space {
|
|
|
- display: inline-flex;
|
|
|
+ @apply flex-shrink-0;
|
|
|
}
|
|
|
+
|
|
|
.space-vertical {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- border: 1px solid var(--el-color-primary);
|
|
|
- box-shadow: 0 0 4px #ddd;
|
|
|
- }
|
|
|
- .el-dropdown-link {
|
|
|
- cursor: pointer;
|
|
|
- color: var(--el-color-primary);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
+ @apply flex flex-col;
|
|
|
}
|
|
|
}
|
|
|
|
luoyali