<template>
  <div class="vote">
    <div class="box">
      <div class="user">
        <img :src="detail.photo" />
        {{ `${detail.num}号：${detail.name}` }}
      </div>
    </div>
    <div class="box">
      {{ detail.describe }}
    </div>
  </div>
</template>

<script>
import * as api from '@/api/vote'
export default {
  metaInfo: { title: '投票' },
  data() {
    return {
      detail: {}
    }
  },
  computed: {
    pid() {
      return this.$route.params.id
    }
  },
  methods: {
    getVoteItem() {
      api.getVoteItem(this.pid).then(response => {
        this.detail = response
      })
    }
  },
  beforeMount() {
    this.getVoteItem()
  }
}
</script>

<style scoped src="../../assets/css/vote.css"></style>
<style lang="scss" scoped>
.vote {
  padding: 0.2rem;
}
.box {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
  background-color: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
  border-radius: 0.04rem;
}
.user {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.15rem;
  font-weight: 600;
  color: #222;

  img {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.1rem;
    object-fit: cover;
  }
}
</style>