iview折叠面板Collapse增加进度条

最近开发钉钉的项目，UI使用了iview库，其中有一个折叠面板的效果需要加进度条，效果如下：

稍微研究了一下，很容易就实现了：

<template>
    <div class="wrap">
        <Collapse accordion>
            <Panel v-for="(item,k) in listData.data.projects" :key="k+'-project'" :name="''+k+1" class="txt-left">
                {{item.projectName}}
                <span style="position:absolute;top:0;right:0;color:green;width:200px">{{item.projectManHour}}/{{item.projectOvertimeHour}}</span>
                <span style="position:absolute;top:0;right:0;color:orangered;width:100px;">{{item.projectProgress}}%</span>
                <p slot="content">
                    <List>
                        <ListItem v-for="(val,index) in item['users']" :key="index+'-task'">
                            <ListItemMeta :title="val['name']"/>
                            <template slot="action">
                                <li v-if="val['complete']">
                                    <span style="color:green;">已提交</span>
                                </li>
                                <li v-if="!val['complete']">
                                    <span style="color:red;">未提交</span>
                                </li>
                            </template>
                        </ListItem>
                    </List>
                </p>
                <div class="progress-mask" :style="{width:item.projectProgress+'%'}">

                </div>
            </Panel>
        </Collapse>
    </div>
</template>

<script>
    export default {
        name: "groupWeek",
        mounted() {
            this.getDetail()
        },
        methods: {
            getDetail() {
                this.listData = {
                    "code": 0,
                    "data": {
                        "projects": [
                            {
                                "projectId": 1,
                                "projectName": "项目1",
                                "projectProgress": 90,
                                "projectOvertimeHour": 2.5,
                                "projectManHour": 19,
                                "users": [
                                    {
                                        "complete":true,
                                        "name": "张三",
                                        "userId": 1,

                                    },
                                    {
                                        "complete":false,
                                        "name": "李四",
                                        "userId": 2,

                                    },
                                ]
                            },
                            {
                                "projectId": 2,
                                "projectManHour": 13,
                                "projectName": "项目2",
                                "projectOvertimeHour": 4.5,
                                "projectProgress": 40,
                                "users": [
                                    {
                                        "complete":false,
                                        "name": "jack",
                                        "userId": 3,

                                    },
                                    {
                                        "complete":false,
                                        "name": "lily",
                                        "userId": 4,

                                    },
                                    {
                                        "complete":true,
                                        "name": "tom",
                                        "userId": 5,

                                    },
                                ]
                            },
                        ],
                    },
                    "desc": "success"
                }
            }
        },
        data() {
            return {
                listData:{}
            }
        }
    }
</script>

<style scoped>
    .wrap {
        width: 100%;
        height: 100%;
        /*background:#F7F7F7;*/
        background: #fff;
    }

    .progress-mask {

        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #57a3f3;
        opacity: 0.3;
    }

    .txt-left {
        text-align: left;
        font-weight: bolder;
    }
</style>

主要是利用了一个绝对定位的蒙层，结合透明的背景色即可实现。