Newer
Older
garbageClassificationFront / src / views / overview / components / popwindow.vue
StephanieGitHub on 22 May 2021 1 KB MOD:垃圾分类子系统联调前代码
<!--
 * @Description:
 * @Author: 王晓颖
 * @Date:
 -->
<template>
  <div class="info-window">
    <div v-if="type=='wastebin'" class="info-header">垃圾桶详情</div>
    <div v-if="type=='wastebin'&&data!=null" class="info-body">
      <div>垃圾桶编号:{{ data.code }}</div>
      <div>垃圾桶名称:{{ data.name }}</div>
      <div>垃圾桶类别:{{ data.typeName }}</div>
      <div>位置:{{ data.position }}</div>
      <div>收集单位:{{ data.collectCompany }}</div>
      <div>收集车辆:{{ data.collectCar }}</div>
      <div>收集频率:{{ data.collectFrequency }}</div>
      <div>负责人:{{ data.responsiblePerson }} ( {{ data.responsiblePersonTel }} )</div>
    </div>
    <div v-if="type=='classification'" class="info-header">分类箱详情</div>
    <div v-if="type=='classification'&&data!=null" class="info-body">
      <div>分类箱编号:{{ data.code }}</div>
      <div>分类箱名称:{{ data.name }}</div>
      <div>位置:{{ data.position }}</div>
      <div>收集单位:{{ data.collectCompany }}</div>
      <div>收集车辆:{{ data.collectCar }}</div>
      <div>收集频率:{{ data.collectFrequency }}</div>
      <div>负责人:{{ data.responsiblePerson }} ( {{ data.responsiblePersonTel }} )</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Popwindow',
  props: {
    data: {
      type: Object,
      required: true
    }, // 数据
    type: {
      type: String,
      required: true
    }// 弹窗类型
  },
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .info-window{
    max-width: 250px;
    width:230px;
    /*background-color: lightcyan;*/
    .info-header{
      padding: 0px 0px 5px 0px;
      line-height: 30px;
      font-size:16px;
      font-weight: bold;
      /*background-color: #eaf4ff;*/
    }
    .info-body{
      padding: 5px 0px 10px 0px;
      line-height: 23px;
      font-size: 14px;
    }
  }
</style>