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