<template>
  <div class="Mdr-container-component">
    <div
      class="Mdrc-component-box"
      v-for="item in dataList"
      :key="item.value"
      @click="select(item.answer)"
    >
      <div class="Mdrcc-box-bg"></div>
      <cr-image class="Mdrcc-box-image" width="" height="" fit="cover" :src="item.image" />
    </div>
  </div>
</template>
<script>
import male from "@/assets/images/user/male@2x.png";
import female from "@/assets/images/user/female@2x.png";

const dataList = [
  {
    image: male,
    value: "male",
    answer: "男神"
  },
  {
    image: female,
    value: "female",
    answer: "女神"
  }
];

export default {
  name: "Age",
  props: {},
  data() {
    return {
      dataList
    };
  },
  methods: {
    select(value) {
      this.$emit("select", value);
    }
  }
};
</script>
<style lang="less" src="../index.less" scoped></style>
