<template>
  <div class="page">
    <img class="person-icon" resize="contain" :src="require('./images/person.png')">
    <text class="center-text">王二小</text>
    <text class="below-text">浙江移动</text>
    <div class="call">
      <img class="reject-icon" resize="contain" :src="require('./images/reject.png')">
      <img class="receive-icon" resize="contain" :src="require('./images/receive.png')">
    </div>
  </div>
</template>

<script>
export default {
  name: "call",
  data() {
    return {
    };
  },
  methods: {
  },
};
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.person-icon {
  height: 88px;
  width: 88px;
  border-radius:88px;
  align-self: center;
  margin-top:24px;
}
.center-text {
  margin-top: 15px;
  color:#ffffff;
  font-size:20px;
  align-self: center;
}
.below-text{
  font-size: 16px;
  align-self: center;
  color: #FFFFFF;
  margin-top: 4px;
  opacity: 0.6;
}
.call {
  flex-direction: row;
  justify-content: space-between;
  margin-top: 42px;
}
.reject-icon {
  height: 72px;
  width: 72px;
  border-radius:72px;
  margin-right: 30px;
}
.receive-icon {
  height: 72px;
  width: 72px;
  border-radius:72px;
  margin-left: 30px;
}
</style>