<template>
  <box title="风险收益特征">
    <div class="content-box">
      <input v-for="(item, index) in data.completions" :key="index" v-model="item.commit_answer" type="text" :class="`input-id${index + 1}`" placeholder="请输入基金类型">
    </div>
  </box>
</template>

<script>
import Box from './Box.vue'
export default {
  components: { Box },
  props: {
    data: { type: Object }
  },
  mounted() {
    console.log(this.data)
  }
}
</script>

<style lang="scss" scoped>
.content-box{
  position: relative;
  margin: 29px 0 0 19px;
  width: 491px;
  height: 325px;
  background: url(https://webapp-pub.ezijing.com/x-training-new/features-bg.png);
  background-size: 100% 100%;
  input{
    width: 110px;
    font-size: 16px;
    color: #666666;
    background: none;
    outline: none;
  }
  .input-id1{
    position: absolute;
    top: 45px;
    right: -10px;
  }
  .input-id2{
    position: absolute;
    top: 106px;
    right: -45px;
  }
  .input-id3{
    position: absolute;
    top: 170px;
    right: -80px;
  }
  .input-id4{
    position: absolute;
    top: 238px;
    right: -118px;
  }
}
</style>
