jhbigscreen/src/pages/woorktrain/indexDlg.vue

135 lines
4.7 KiB
Vue

<template>
<MyDialog v-if="show" v-model="show" width="1000px" height="450px" class="worktrain-dlg">
<template slot="title">{{title}}</template>
<div style="display: block;height: 450px;">
<div class="prj-info-list" v-if="data && JSON.stringify(data) != '{}'">
<div class="col-1" style="width:400px;display: inline-block;">
<el-carousel height="400px" v-if="data && data.mainImage && data.mainImage.length > 0">
<div style="width: 100%;align-items: center;justify-content: center;height: 400px;margin-top: 10px;">
<img :src="$apiPath + data.mainImage" style="width: 400px;height: 350px;">
</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;max-height: 450px;min-height:450px;overflow: auto;width: calc(100% - 430px);align-items: center;float:right;margin-top: 10px;">
<div>
<template v-if="data.projectName">
<div><img src="images/title_icon.png"><span class="sp-lbl">项目名称</span></div>
<div class="div-text ">
<div>{{ data.projectName }}</div>
</div>
</template>
<template v-if="data.trainNatureName">
<div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'类型'}}</span></div>
<div class="div-text ">
<div>{{ data.trainNatureName }}</div>
</div>
</template>
<template v-if="data.trainTitle">
<div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'标题'}}</span></div>
<div class="div-text ">
<div>{{ data.trainTitle }}</div>
</div>
</template>
<template v-if="data.trainParticipants">
<div><img src="images/title_icon.png"><span class="sp-lbl">参与人数</span></div>
<div class="div-text ">
<div>{{ data.trainParticipants +' 人'}}</div>
</div>
</template>
<template v-if="data.beginDate && data.endDate">
<div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'时间'}}</span></div>
<div class="div-text ">
<div>{{ data.beginDate }} ~ {{ data.endDate }}</div>
</div>
</template>
<template v-if="data.trainContent">
<div><img src="images/title_icon.png"><span class="sp-lbl">{{data.typeTitle+'内容'}}</span></div>
<div class="div-text ">
<div>{{ data.trainContent }}</div>
</div>
</template>
</div>
</div>
</div>
<div v-else style="text-align: center;padding-top: 150px;min-height: 350px;">
<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:'',
TypeTitle:'',
data: null,
show: false
};
},
/**项目季度考核目标数据 */
mounted() {
this.data = null;
},
methods: {
showDialog(it) {
this.data = it;
this.title = it.title;
this.TypeTitle = it.TypeTitle;
this.show = true;
}
},
};
</script>
<style lang="less" scoped>
.mytable {
/deep/ th .cell {
color: aquamarine;
}
}
</style>
<style lang="less">
.my-dialog.worktrain-dlg {
.popup-project-introduction-min {
transform: translateY(100px);
}
.font-size-tools {
position: absolute;
top: 25px;
}
.quality-table{
padding: 0px !important;
}
.sp-lbl {
display: inline-block;
color: aquamarine;
}
.div-text{
color: #B8C9EE;
line-height: 30px;
padding-left: 20px;
}
.col-2 img{
width: 12px;
height: 12px;
}
}
</style>