odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : 优化样式

Browse Source
This commit is contained in:
odjbin
2024-05-13 23:30:07 +08:00
parent 1684e49662
commit 9ade24768e
1 changed files with 55 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/workflow/common/OperationRender.vue
View File

@@ -11,24 +11,24 @@
<el-card>
<div style="display: flex;">
<div v-for="(user,index) in operation.userInfo" :key="index" class="avatar_name">
<el-avatar size="large" :src="user.avatar"></el-avatar>
<div v-if="!$slots.dot && operation.userInfo.length > 1"
class="el-timeline-item__node" :style="{
backgroundColor: user.color
}">
<el-icon v-if="user.icon" :class="user.class">
<component :is="user.icon"/>
</el-icon>
</div>
<el-tooltip effect="dark" :content="user.name" placement="bottom-start">
<span class="username">{{ user.name }}</span>
</el-tooltip>
<!-- <el-avatar size="large" :src="user.avatar"></el-avatar>-->
<!-- <div v-if="!$slots.dot && operation.userInfo.length > 1"-->
<!-- class="el-timeline-item__node" :style="{-->
<!-- backgroundColor: user.color-->
<!-- }">-->
<!-- <el-icon v-if="user.icon" :class="user.class">-->
<!-- <component :is="user.icon"/>-->
<!-- </el-icon>-->
<!-- </div>-->
<!-- <el-tooltip effect="dark" :content="user.name" placement="bottom-start">-->
<!-- <span class="username">{{ user.name }}</span>-->
<!-- </el-tooltip>-->
<avatar-ellipsis :row="3" v-if="operation.userInfo.length > 0" :user-info="operation.userInfo"/>
<template v-if="user.auditOpinion">
<div style="margin-top: 10px;background:#f5f5f5;padding: 10px;">
<div>
{{ user.auditOpinion }}
</div>
<div class="username">
<el-tooltip effect="dark" :content="user.auditOpinion" placement="bottom-start">
<div>{{ user.auditOpinion }}</div>
</el-tooltip>
</div>
</template>
</div>
@@ -70,7 +70,7 @@
<script setup>
import {CircleCheckFilled, Close, Loading, MoreFilled} from "@element-plus/icons-vue";
import {ref, defineProps} from 'vue'
import AvatarEllipsis from '../process/common/AvatarEllipsis.vue'
const props = defineProps({
operationList: {
@@ -280,12 +280,28 @@ init()
}
.avatar_name {
width: 45px;
//width: 45px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-right: 5px;
.username {
width: 100px;
margin-top: 10px;
background: #f5f5f5;
padding: 10px;
.el-tooltip__trigger {
width: 90px;
//padding-top: 2px;
//text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
}
}
.el-timeline-item__node {
@@ -294,12 +310,4 @@ init()
right: 1px;
}
.username {
width: 45px;
padding-top: 2px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
</style>