98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<el-dialog
|
|
:visible.sync="visible"
|
|
:title="title"
|
|
width="80%"
|
|
top="30%"
|
|
class="dishes_detail_dialog_wrapper"
|
|
>
|
|
<section class="section_zone">
|
|
<div class="section_title">
|
|
食材<em class="el-icon-shopping-cart-1" style="margin-left: 8px" />
|
|
</div>
|
|
<div v-for="igd in data.igdList" :key="igd.id" class="igd_item">
|
|
<span>{{ igd.name }}</span>
|
|
<span class="cusstr_style">
|
|
<span>{{ igd.cusStr }}</span>
|
|
<span>{{ igd.weight }}克</span>
|
|
</span>
|
|
</div>
|
|
</section>
|
|
<section class="section_zone" v-if="data.methods">
|
|
<div class="section_title">
|
|
做法<em class="el-icon-dish" style="margin-left: 8px" />
|
|
</div>
|
|
<div class="section_content">{{ data.methods }}</div>
|
|
</section>
|
|
<section class="section_zone" v-if="data.remark">
|
|
<div class="section_title">
|
|
备注<em class="el-icon-warning-outline" style="margin-left: 8px" />
|
|
</div>
|
|
<div class="section_content">{{ data.remark }}</div>
|
|
</section>
|
|
</el-dialog>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "dishesDetailDialog",
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
data: {},
|
|
title: "",
|
|
};
|
|
},
|
|
methods: {
|
|
showDialog(data) {
|
|
if (!data || !data.igdList.length) {
|
|
return;
|
|
}
|
|
this.data = data;
|
|
this.visible = true;
|
|
this.title = `${data.name}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.dishes_detail_dialog_wrapper {
|
|
.section_zone {
|
|
margin-bottom: 16px;
|
|
.section_title {
|
|
color: #262626;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
.igd_item {
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #dfe6ec;
|
|
|
|
.cusstr_style {
|
|
width: 40%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.section_content {
|
|
padding: 0 8px;
|
|
margin-top: 14px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.el-dialog__body {
|
|
padding: 12px 18px;
|
|
}
|
|
.dishes_detail_dialog_wrapper {
|
|
.el-dialog:not(.is-fullscreen) {
|
|
margin-top: 20vh !important;
|
|
}
|
|
}
|
|
</style>
|