<template>
  <div class="fromList" :class="{'choice':isChoice == data.courseId}">
    <div style="text-align: center;width: 15%;" class="fromCol">{{ index }}</div>
    <div  class="fromCol" style="flex: 1;font-size: 16px;font-weight: 600;">{{data.title}}</div>
    <div  class="perName">{{data.uname}}</div>
  </div>
</template>

<script>
export default {
	props:{
		data:{
			type: Object,
			default: () => {}
		},
		index:{
			type: Number,
			default:0
		},
		isChoice:{
			type:String,
			default:""
		}
	},
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.fromList {
  width: 85%;
  border: 1px #ccc solid;
  border-radius: 10px;
  height: 60px;
  display: flex;
  align-items: center;
  .fromCol {
    color: rgba(54, 129, 252, 1);
    font-size: 24px;
		width: 80%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
  .perName{
    width: 20%;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.6);
  }
}

.choice{
	// border-color: rgba(54, 129, 252, 1);
	border: 2px rgba(54, 129, 252, 1) solid;
}
</style>
