kuangshan-project/src/views/zaoquan/yiqing/yiqing-chushengdetail.vue

<template>
  <div class="page">
    <div class="content">
      <div class="title">{{detail.name}}</div>
      <div class="list">
        <div class="item">
          <div class="left">工作单位</div>
          <div class="right">{{detail.work_unit}}</div>
        </div>
        <div class="item">
          <div class="left">年龄</div>
          <div class="right">{{detail.age}}</div>
        </div>
        <div class="item">
          <div class="left">籍贯</div>
          <div class="right">{{detail.native_place}}</div>
        </div>
        <div class="item">
          <div class="left">出发地点</div>
          <div class="right">{{detail.province}}-{{detail.city}}-{{detail.district}}</div>
        </div>
        <div class="item">
          <div class="left">来宁时间</div>
          <div class="right">{{detail.time}}</div>
        </div>
        <div class="item">
          <div class="left">交通工具</div>
          <div class="right">{{detail.traffic}}</div>
        </div>
        <div class="item">
          <div class="left">车票机票</div>
          <div class="right">{{detail.ticketing}}</div>
        </div>
        <div class="item">
          <div class="left">现居住地址</div>
          <div class="right">{{detail.now_address}}</div>
        </div>
        <div class="item">
          <div class="left">家庭成员</div>
          <div class="right">{{detail.member_family}}</div>
        </div>
        <div class="item">
          <div class="left">密切接触人员</div>
          <div class="right">{{detail.close_contacts_staff}}</div>
        </div>
        <div class="item">
          <div class="left">人员密集活动情况</div>
          <div class="right">{{detail.close_contacts_staff_activity}}</div>
        </div>
        <div class="item">
          <div class="left">到岗情况</div>
          <div class="right">{{detail.isolate}}</div>
        </div>
        <div class="item">
          <div class="left">身体发热（是否有发热、咳嗽和呕吐等症状）</div>
          <div class="right">{{detail.health}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";

export default {
  data() {
    return {
      id: 0,
      detail:{}
    };
  },
  mounted() {
    document.body.style.backgroundColor = "#00A1E9"; //背景色

    this.id = getAllUrlParams(window.location.href).id;

    console.log(this.id);
    this.get_detail(this.id);
  },
  methods: {
    get_detail(id) {
      this.$http
        .post(
          "http://zaoquan.nxjiewei.com:8011/api/workbench/put_on_record/get_person_detail",
          {
            id: id,
          }
        )
        .then((res) => {
          console.log(res);
          this.detail = res.data.data
        });
    },
  },
};
</script>

<style scoped>
.page {
  box-sizing: border-box;
  padding: 15px 12px;
}

.content {
  width: 350px;
  background-color: #fff;
  border-radius: 10px;

  box-sizing: border-box;
  padding: 10px;
}
.content .title {
  font-size: 18px;
  font-weight: 700;
  color: #00a1e9;
  text-align: center;
  line-height: 40px;
  border-bottom: 2px solid #00a1e9;
}
.content .list {
  font-size: 14px;
}
.content .list .item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #e7e7e7;
}
.content .list .item .left {
  color: #9d9d9d;
  width: 130px;
}
.content .list .item .right {
  color: #000000;
  width: 200px;
  text-align: right;
}
</style>