|
@@ -1,21 +1,31 @@
|
|
<template>
|
|
<template>
|
|
<div class="radio-wrap" v-if="item">
|
|
<div class="radio-wrap" v-if="item">
|
|
<p class="quest">{{item.name}}</p>
|
|
<p class="quest">{{item.name}}</p>
|
|
- <p v-for="(it,index) in item.questionDetailList" class="list">
|
|
|
|
- <img src="../images/radio-default.png">
|
|
|
|
|
|
+ <img :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url">
|
|
|
|
+ <p v-for="(it,index) in item.questionDetailList" :key="it.id" class="list">
|
|
|
|
+ <img :src="index==current?check:defaultPic" @click="handleClick(it,index)">
|
|
<span>{{it.name}}</span>
|
|
<span>{{it.name}}</span>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
|
|
+import icon from '../images/radio-default.png'
|
|
|
|
+import checkIcon from '../images/radio-check.png'
|
|
export default{
|
|
export default{
|
|
name:'Radio',
|
|
name:'Radio',
|
|
data(){
|
|
data(){
|
|
return{
|
|
return{
|
|
-
|
|
|
|
|
|
+ defaultPic:icon,
|
|
|
|
+ check:checkIcon,
|
|
|
|
+ current:null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- props:['item']
|
|
|
|
|
|
+ props:['item'],
|
|
|
|
+ methods:{
|
|
|
|
+ handleClick(item,index){
|
|
|
|
+ this.current = index;console.log(123,item)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@@ -25,10 +35,14 @@
|
|
color:#000;
|
|
color:#000;
|
|
margin-bottom: .2rem;
|
|
margin-bottom: .2rem;
|
|
}
|
|
}
|
|
|
|
+ img{
|
|
|
|
+ width:100%;
|
|
|
|
+ }
|
|
.list{
|
|
.list{
|
|
color: #7C828E;
|
|
color: #7C828E;
|
|
- margin-bottom: .1rem;
|
|
|
|
|
|
+ margin:0 .1rem .1rem 0;
|
|
padding: .12rem .1rem;
|
|
padding: .12rem .1rem;
|
|
|
|
+ display: inline-block;
|
|
img{
|
|
img{
|
|
width: .38rem;
|
|
width: .38rem;
|
|
vertical-align: middle;
|
|
vertical-align: middle;
|