zdsz_vue/src/components/ConstructionDetails/index.vue

 <!-- 
    *@description: 房间详情
    *@author: yh Fu
    *@date: 2023-12-27 11:04:23
    *@version: V1.0.5 
-->

<template>
    <el-dialog 
        :visible.sync="dialogVisible" 
        title="" 
        width="60%"
        append-to-body
        custom-class="ConstructionDetailsDialog">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="projectTabs">
            <el-tab-pane label="拆旧管" name="0">
                <el-collapse v-model="activeNames" class="rmOldPie">
                    <el-collapse-item  name="1">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-12-25</h2>
                            </div>
                            
                        </template>
                        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-30</h2>
                            </div>
                        </template>
                        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
                        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-27</h2>
                            </div>
                        </template>
                        <div>简化流程：设计简洁直观的操作流程；</div>
                        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
                        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
                    </el-collapse-item>
                    <el-collapse-item name="4">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-20</h2>
                            </div>
                        </template>
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                    <el-collapse-item name="5">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-15</h2>
                            </div>
                        </template>
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                    <el-collapse-item name="6">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-7</h2>
                            </div>
                        </template>
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                    <el-collapse-item name="7">
                        <template slot="title">
                            <div style="display: flex;width: 100%;height: 100%;">
                                <div style="width: 3%;height: 29px;margin: auto 0;border-radius: 73%;background-color: rgb(0, 157, 217);box-shadow: 1px 1px #BFBFBF;">
                                </div>
                                <h2 style="margin-left: 1%;font-weight: 700;">2023-11-1</h2>
                            </div>
                        </template>
                        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
                        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
                    </el-collapse-item>
                </el-collapse>

            </el-tab-pane>
            <el-tab-pane label="立杠" name="1">立杠</el-tab-pane>
            <el-tab-pane label="挂表" name="2">挂表</el-tab-pane>
            <el-tab-pane label="表后管" name="3">表后管</el-tab-pane>
            <el-tab-pane label="管和阀" name="4">管和阀</el-tab-pane>
            <el-button class="check" @click="checkWorking">审核</el-button>
        </el-tabs>
    </el-dialog>
</template>

<script>
export default {
    name:'ConstructionDetails',
    data(){
        return {
            dialogVisible:true,
            activeNames: ['0']
        }
    },
    methods:{
        // 单项审核
        checkWorking(){

        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
    height: 85%;
    .el-dialog__body{
        overflow: hidden;
        height: 94%;
    }
}
.ConstructionDetailsDialog{
    position: absolute;
    .projectTabs{
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        margin-top: 4%;
        ::v-deep .el-tabs__content{
            margin-top: 1%;
        }
        ::v-deep .el-tabs__nav{
            border: none;
        }
        ::v-deep .el-tabs__item{
            width: 47%;
            border: 1px solid #797979;
            border-radius: 5px;
        }
        ::v-deep .el-tabs__item.is-active{
            background-color: #169BD5;
            color: #fff;
        }
        ::v-deep .el-tabs__header{
            position: fixed;
            width: 53%;
            border: none;
            top: 13%;
        }
        ::v-deep .el-collapse-item__wrap{
            padding: 0 4%;
        }
        .check{
            position: fixed;
            right: 22.1%;
            top: 13.1%;
            height: 4.6%;
            background-color: #CC9900;
            color: #fff;
        }
    }
    .projectTabs::-webkit-scrollbar{
        display: none;
    }
    ::v-deep .rmOldPie{
        .el-collapse-item{
            border: none;
        }
    }
}
</style>