feat: 发起审批 页面调整

src/views/approve/launch/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="flex-column-page-wrap pageWrap">
 		<!-- 快捷入口 -->
-		<el-row :gutter="10" style="margin-bottom: 10px">
-			<el-col :span="6">
+		<el-row :gutter="10">
+			<el-col :span="6" :xs="24" class="mb-[10px]">
 				<div class="left-item-box box">
 					<div class="launch-todo" @click="jumpOtherPage('待审批')">
 						<el-row :gutter="5">
@@ -12,8 +12,8 @@
 								</div>
 							</el-col>
 							<el-col :span="12">
-								<div class="flex flex-col">
-									<div class="mt-title">待审批的</div>
+								<div class="flex flex-col items-center">
+									<div class="mt-title text-overflow_ellipsis_line_1">待审批的</div>
 									<div class="mt-value leading-[38px]">{{ countNum }}</div>
 								</div>
 							</el-col>
@@ -21,7 +21,7 @@
 					</div>
 				</div>
 			</el-col>
-			<el-col :span="18">
+			<el-col :span="18" :xs="24" class="mb-[10px]">
 				<div class="right-item-box box">
 					<el-row>
 						<el-col :span="6">
@@ -61,38 +61,40 @@
 
 		<!-- 审批列表 -->
 		<el-card class="box-card flex-column-page-wrap" shadow="never">
-			<el-collapse v-model="activeNames" @change="handleChange">
-				<el-collapse-item v-for="item in startList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryName">
-					<template #title>
-						<div class="common_title">
-							{{ item.categoryName }}
-						</div>
-					</template>
-					<div class="task-item">
-						<div v-for="process in item.processList" :key="process.processId" style="padding: 4px">
-							<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">
-									<div class="space-item">
-										<div class="first-edit" :title="process.processName">
-											<span>{{ process.processName }}</span>
-										</div>
-									</div>
-									<!--										<div class="space-item">
-										<div>{{ process.createTime }}</div>
+			<el-scrollbar>
+				<el-collapse v-model="activeNames" @change="handleChange">
+					<el-collapse-item v-for="item in startList" :key="item.categoryId" :title="item.categoryName" :name="item.categoryName">
+						<template #title>
+							<div class="common_title">
+								{{ 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-item" :title="process.processKey">
-										<div>{{ process.processKey }}</div>
+									<div class="space space-vertical">
+										<div class="space-item">
+											<div class="first-edit" :title="process.processName">
+												<span>{{ process.processName }}</span>
+											</div>
+										</div>
+										<!--										<div class="space-item">
+											<div>{{ process.createTime }}</div>
+										</div>-->
+										<div class="space-item" :title="process.processKey">
+											<div>{{ process.processKey }}</div>
+										</div>
 									</div>
 								</div>
-							</div>
-						</div>
-					</div>
-				</el-collapse-item>
-			</el-collapse>
+							</el-col>
+						</el-row>
+					</el-collapse-item>
+				</el-collapse>
+			</el-scrollbar>
 		</el-card>
 		<ItemDrawer v-if="drawerVisible" v-model="drawerVisible" :record="record" />
 	</div>
@@ -264,12 +266,12 @@ onMounted(() => {
 	}
 }
 
-.task-item {
+/*.task-item {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-}
+}*/
 :deep(.box-card) {
-	margin-bottom: 10px;
+	//margin-bottom: 10px;
 	.el-card__body {
 		flex: 1;
 		overflow-y: auto;