xt_pad/src/pages/main/today/detailsInfo.vue

<template>
  <div class="info">
    <h2 class="plateTitle">
      <span class="line"></span>
      <p>基本信息</p>
      <span class="line"></span>
    </h2>

    <div class="ui-step clearfix">
      <ul class="ui-step-ul">
        <li
          v-for="(item, index) in step_data"
          :key="index"
          class="ui-step-done"
        >
          <div
            class="ui-step-number"
            :style="
              item.value == 1
                ? ''
                : 'background:#fff;border: 1px $main-color solid;'
            "
          >
            <i :style="item.value == 1 ? '' : 'border:0;'" />
          </div>
          <div class="ui-step-title">{{ item.title }}</div>
        </li>
      </ul>
    </div>

    <ul class="clearfix newWidth">
      <li>
        <label>姓名 :</label>
        <span>{{ patient.name }}</span>
      </li>
      <li>
        <label>性别 :</label>
        <span>{{ patient.gender == 1 ? "男" : "女" }}</span>
      </li>
      <li>
        <label>年龄 :</label>
        <span>{{ age }}</span>
      </li>
      <li>
        <label>透析号 :</label>
        <span>{{ patient.dialysis_no }}</span>
      </li>
      <li>
        <label>床位号 :</label>
        <span>{{ device_number }}</span>
      </li>
      <li>
        <label>来源 :</label>
        <span>{{ source }}</span>
      </li>
      <li>
        <label>住院号 :</label>
        <span>{{ patient.admission_number }}</span>
      </li>
      <li>
        <label>透析日期 :</label>
        <span>{{ dialysis_date }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { parseTime } from "@/utils";
import { jsGetAge } from "@/utils/tools";

export default {
  name: "DetailsInfo",
  data() {
    return {

      steps: [
        { title: "透析处方" },
        { title: "接诊评估" },
        { title: "透前评估" },
        { title: "临时医嘱" },
        { title: "透析上机" },
        { title: "双人核对" },
        { title: "透析监测" },
        { title: "透析下机" },
        { title: "透后评估" },
        { title: "治疗小结" }
      ]
    };
  },
  props: {
    step_data: {
      type: Array
    },
    patient: {
      type: Object,
      default: function() {
        return {
          name: "",
          gender: 1,
          birthday: "",
          dialysis_no: "",
          // device_number: "",
          source: "",
          admission_number: ""
        };
      }
    },
    device_number: {
      type: String
    }
  },
  computed: {
    dialysis_date: function() {
      return parseTime(this.$route.query.date, "{y}/{m}/{d}");
    },
    age: function() {
      if (this.patient.age == 0) {
        return jsGetAge(parseTime(this.patient.birthday, "{y}-{m}-{d}"), "-");
      } else {
        return this.patient.age;
      }
    },
    source: function() {
      return this.patient.source == 1 ? "门诊" : "住院";
    }
  },
  methods: {

  },
  created() {}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.info {
  background: $text-color;
  ul {
    padding: 0.4rem 0.8rem;
    li {
      float: left;
      width: 25%;
      font-size: 0.34rem;
      height: 0.53rem;
    }
  }
  .ui-step {
    margin: 0 0 0.8rem 0;
    padding: 0.1rem 0 0 0;
    zoom: 1;
    background: #fff;
    .ui-step-tit {
      font-size: 0.24rem;
      text-align: center;
      color: #34495e;
    }
    .ui-step-ul {
      list-style: none;
      .ui-step-done {
        float: left;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        width: 10%;
        &:before,
        &:after {
          position: absolute;
          left: 0;
          top: 0.26rem;
          display: block;
          content: " ";
          width: 50%;
          height: 1px;
          background: #409eff;
          z-index: 1;
        }
        &:after {
          left: 50%;
        }
        &:first-child:before,
        &:last-child::after {
          width: 0;
        }
        .ui-step-title {
          color: #34495e;
          font-size: 0.34rem;
          font-weight: normal;
          @media only screen and (max-width: 415px) {
            width: 0.8rem;
            margin-left: 4px;
          }
          @media only screen and (min-width: 415px) and (max-width: 767px) {
            width: 0.8rem;
            margin-left: 0.25rem;
          }
          @media only screen and (min-width: 768px) {
            width: 1rem;
            margin-left: 10px;
          }
        }
        .ui-step-number {
          position: relative;
          display: inline-block;
          width: 0.45rem;
          height: 0.45rem;
          margin: 0.05rem 0;
          line-height: 0.22rem;
          background: #409eff;
          color: #fff;
          border-radius: 100%;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          z-index: 2;
          border: 1px #409eff solid;
          i {
            position: absolute;
            left: 0.09rem;
            top: 0.1rem;
            width: 0.26rem;
            height: 0.14rem;
            border: 2px #fff solid;
            color: #fff;
            z-index: 9;
            border-top: none;
            border-right: none;
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
          }
        }
      }
    }
  }
}
.newWidth {
  li {
    @media only screen and (min-width: 375px) {
      width: 33.3% !important;
    }
    @media only screen and (max-width: 320px) {
      width: 33.3% !important;
    }
    @media only screen and (min-width: 667px) {
      width: 25% !important;
    }
  }
}
</style>