
<template>
  <div>
    <div class="left">
      <div class="flex user-top">
        <img
          class="user-img"
          src="../../../assets/pass/build-icon.png"
          alt=""
        />
        <div class="user-msg">
          <div class="one">蒋友海</div>
          <div class="two">2300001</div>
          <div class="three">空港科技·维保</div>
          <img
            class="build-icon"
            src="../../../assets/pass/build-1icon-1.png"
            alt=""
          />
        </div>
      </div>
      <div class="flex area-top">
        <span class="area choose-area" v-for="item in areaList" :key="item">{{
          item
        }}</span>
      </div>
      <div class="flex1 time-top">
        <div class="time-box">
          <!-- <div class="text">失效日期</div> -->
          <img class="type" src="../../../assets/pass/build-type.png" alt="" />
          <div class="time">2023/08/31</div>
        </div>
        <img class="qrcode" src="../../../assets/pass/build-icon.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    areaList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  components: {},
  filters: {},
  computed: {},
  data() {
    return {};
  },
  created() {},
  watch: {},
  methods: {
  },
};
</script>
<style scoped lang="scss">
.user-top {
  margin-top: 43px;
}
.left {
  width: 222px;
  height: 345px;
  background-color: #babdaf;
  padding: 10px 8px 9px 14px;
  margin: 4px 6px;
  background: url("../../../assets/pass/build-bg.png") no-repeat;
  background-position: center 0px;
  background-size: cover;
  .user-img {
    width: 100px;
    height: 138px;
    margin-right: 20px;
  }
  .user-msg {
    color: #665239;
    font-weight: 700;
    .one {
      font-size: 22px;
      margin-top: 7px;
    }
    .two {
      font-size: 12px;
      margin: 5px 0 7px 0;
    }
    .three {
      font-size: 15px;
      margin-top: 11px;
      width: 80px;
      margin-bottom: 10px;
    }
    .build-icon {
      width: 38px;
      height: 33px;
    }
  }
}
.area {
  width: 37px;
  height: 23px;
  line-height: 22.5px;
  border-radius: 2px;
  text-align: center;
  /* background: pink; */
  margin-right: 3px;
  margin-bottom: 2px;
  color: rgba(201, 184, 139, 0.5);
  font-size: 14px;
  font-weight: 900;
}
.choose-area {
  color: #665239;
}
.flex1 {
  display: flex;
  justify-content: space-between;
}
.time-top {
  margin-top: 3px;
  padding: 0px 11px 0 11px;
}
.time-box {
  color: #665239;
  font-size: 16px;
  font-weight: 700;
  .time {
    font-size: 20px;
  }
  .text {
    margin: 3px 0 8px 0;
  }
}
.qrcode {
  width: 50px;
  height: 50px;
}
.type {
  width: 117px;
  height: 34px;
}
</style>
