jhbigscreen/src/pages/woorktrain/indexDlg.vue

<template>
    <MyDialog v-if="show" v-model="show" width="1200px" height="550px" class="worktrain-dlg">
        <template slot="title">{{title}}</template>
        <div class="col-2 scroll" style="max-height: 750px;overflow: auto;padding: 12px 0px;">
            <div class="prj-info-list" v-if="data && JSON.stringify(data) != '{}'">
            <div class="col-1" style="width:500px;padding-top:12px;">
                <el-carousel height="500px" v-if="data && data.mainImage && data.mainImage.length > 0">
                    <div style="display: flex;align-items: center;justify-content: center;height: 500px;width:500px;">
                        <img :src="$apiPath + data.mainImage" style="width:100%">
                    </div>
                </el-carousel>
                <div v-else style="text-align: center;margin-top: 140px;">
                    <img src="images/nodata.png" style="width: 240px;">
                    <div style="text-align: center;">暂无图片</div>
                </div>
            </div>
            <div class="col-2 scroll"
                style="flex-grow: 1;overflow: auto;width: calc(100% - 505px);margin-top:8px;">
                <template v-if="scheduleInfo.plannedNode">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">计划节点</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.plannedNode }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.actualNode">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">实际节点</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.actualNode }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.purchaseProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">融资、招采进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.purchaseProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.designProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">报建、设计进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.designProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.constructionProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">施工进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.constructionProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.acceptanceProgress">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">验收进展</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.acceptanceProgress }}</div>
                    </div>
                </template>
                <template v-if="scheduleInfo.planForNextWeek">
                    <div><img src="images/title_icon.png"><span class="sp-lbl">下周计划</span></div>
                    <div class="div-text ">
                        <div>{{ scheduleInfo.planForNextWeek }}</div>
                    </div>
                </template>
            </div>
        </div>
        <div v-else style="text-align: center;padding-top: 150px;min-height: 500px;">
            <img src="images/nodata.png" style="width: 240px;">
            <div style="text-align: center;">暂无数据</div>
        </div>
        </div>
    </MyDialog>
</template>

<script>
import '@/components/module/module-one-1-1'
import MyDialog from '../components/MyDialog'
export default {
    components: {
        MyDialog,
    },
    name: 'worktrainDlg',
    data() {
        return {
            title:'',
            data: null,
            show: false
        };
    },

    /**项目季度考核目标数据 */
    mounted() {
        this.data = null;
    },

    methods: {
        showDialog(it) {
            this.data = it;
            this.title = it.title;
            this.show = true;
        }
    },
};
</script>

<style lang="less" scoped>
.mytable {
    /deep/ th .cell {
        color: aquamarine;
    }
}
</style>
style lang="less">
.my-dialog.progress-dlg3 {
    .popup-project-introduction-min {
        transform: translateY(100px);
    }

    &.font-size-2 {
        .popup-project-introduction-details {
            .col-2 {
                font-size: 32px;
                line-height: 64px;

                .div-text {
                    line-height: 64px;
                }
            }
        }
    }

    &.font-size-1 {
        .popup-project-introduction-details {
            .col-2 {
                font-size: 24px;
                line-height: 48px;

                .div-text {
                    line-height: 48px;
                }
            }
        }
    }

    .font-size-tools {
        position: absolute;
        top: 18px;
        right: 400px;
    }

    .popup-project-introduction-details {
        padding: 0px;

        &:hover {
            .modify-btn {
                display: flex;
            }
        }

        .quality-table {
            padding: 0px;

            .prj-info-list {
                padding: 0px;
            }
        }

        .modify-btn {
            display: none;
            position: absolute;
            top: 450px;
            z-index: 100;
            cursor: pointer;
            padding: 0px;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            &:hover {
                background-color: rgba(255, 255, 255, 0.2);

                svg {
                    * {
                        fill: #fff;
                    }
                }
            }

            &.btn-right {
                right: 20px;
            }

            &.btn-left {
                left: 20px;
            }
        }

        .col-2 {
            line-height: 30px;

            .div-text {
                line-height: 30px;
            }
        }
    }

    .head-title-select {
        width: 300px;
        padding-top: 0px;
    }
}</style>