| | |
| | | @click="getPersonInfo(rootList[0].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_1" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[0].url" |
| | | @click="getPersonInfo(rootSecList[0].userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[2].url" |
| | | @click="getPersonInfo(rootSecList[2].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_2" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[0].spouse.url" |
| | | @click="getPersonInfo(rootSecList[0].spouse.userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[0].url" |
| | | @click="getPersonInfo(rootSecList[0].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_3" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[1].url" |
| | | @click="getPersonInfo(rootSecList[1].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_4" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[1].url" |
| | | @click="getPersonInfo(rootSecList[1].spouse.userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[3].url" |
| | | @click="getPersonInfo(rootSecList[3].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_5" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[2].url" |
| | | @click="getPersonInfo(rootSecList[2].userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[2].spouse.url" |
| | | @click="getPersonInfo(rootSecList[2].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_6" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[2].spouse.url" |
| | | @click="getPersonInfo(rootSecList[2].spouse.userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[0].spouse.url" |
| | | @click="getPersonInfo(rootSecList[0].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_7" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[3].url" |
| | | @click="getPersonInfo(rootSecList[3].userId)"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[1].spouse.url" |
| | | @click="getPersonInfo(rootSecList[1].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_8" v-if="isShow_2"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[3].spouse.url" |
| | | @click="getPersonInfo(rootSecList[3].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_1" v-if="isShow_3"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[4].url" |
| | | @click="getPersonInfo(rootSecList[4].userId)"> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_1" v-if="isShow_3">--> |
| | | <!-- <img :src="'http://47.93.189.255:8080/'+ rootThiList[0].url"--> |
| | | <!-- @click="getPersonInfo(rootThiList[0].userId)">--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_2" v-if="isShow_3"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[4].spouse.url" |
| | | @click="getPersonInfo(rootSecList[4].spouse.userId)"> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_2" v-if="isShow_3">--> |
| | | <!-- <img :src="'http://47.93.189.255:8080/'+ rootThiList[0].url"--> |
| | | <!-- @click="getPersonInfo(rootThiList[0].userId)">--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_3" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_3" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_4" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_4" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_5" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[0].url" |
| | | @click="getPersonInfo(rootThiList[0].userId)"> |
| | | </el-avatar> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_6" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_6" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_7" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_7" v-if="isShow_4">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_8" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[0].spouse.url" |
| | | @click="getPersonInfo(rootThiList[0].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_9" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_9" v-if="isShow_3">--> |
| | | <!-- <img :src="'http://47.93.189.255:8080/'+ rootThiList[0].spouse.url"--> |
| | | <!-- @click="getPersonInfo(rootThiList[0].spouse.userId)">--> |
| | | <!-- </el-avatar>--> |
| | | <el-avatar shape="circle" class="avater_3_10" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[1].url" |
| | | @click="getPersonInfo(rootThiList[1].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_11" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_12" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_11" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_3_12" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <el-avatar shape="circle" class="avater_3_13" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[1].spouse.url" |
| | | @click="getPersonInfo(rootThiList[1].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_14" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[2].url" |
| | | @click="getPersonInfo(rootThiList[2].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_15" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[2].spouse.url" |
| | | @click="getPersonInfo(rootThiList[2].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_16" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_16" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <el-avatar shape="circle" class="avater_3_17" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootThiList[3].url" |
| | | @click="getPersonInfo(rootThiList[3].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_18" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_19" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_20" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_3_21" v-if="isShow_3"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_4_1" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_3_18" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_3_19" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_3_20" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_3_21" v-if="isShow_3">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_4_1" v-if="isShow_4">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <el-avatar shape="circle" class="avater_4_2" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootFouList[0].url" |
| | | @click="getPersonInfo(rootFouList[0].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_4_3" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootFouList[1].url" |
| | | @click="getPersonInfo(rootFouList[1].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_4_4" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootFouList[2].url" |
| | | @click="getPersonInfo(rootFouList[2].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_4_5" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_4_6" v-if="isShow_4"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | <!-- <el-avatar shape="circle" class="avater_4_5" v-if="isShow_4">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | <!-- <el-avatar shape="circle" class="avater_4_6" v-if="isShow_4">--> |
| | | <!-- <el-img :src="'http://47.93.189.255:8080'+ rootList.url"--> |
| | | <!-- ></el-img>--> |
| | | <!-- </el-avatar>--> |
| | | |
| | | </div> |
| | | </div> |
| | |
| | | greeting: "", |
| | | imageSrc: require('../../assets/images/Group 407.png') , |
| | | dropdownList: [ |
| | | { name: '只显示第一代', src: 'Group 445.png' }, |
| | | { name: '显示至第二代', src: 'Group 445.png' }, |
| | | { name: '显示至第三代', src: 'Group 445.png' }, |
| | | { name: '只显示第一代', src: 'Group 407.png' }, |
| | | { name: '显示至第二代', src: 'Group 407.png' }, |
| | | { name: '显示至第三代', src: 'Group 407.png' }, |
| | | { name: '显示全部', src: 'Group 407.png' } |
| | | ], |
| | | rootList:[], |
| | |
| | | //写第3代的代码逻辑,用两个for循环写第3代 |
| | | this.getGenByNum(this.rootThiList, this.rootList[0], 1, 3) |
| | | console.log(this.rootThiList) |
| | | console.log('-=-------') |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=false |
| | |
| | | } |
| | | .avater_2_1{ |
| | | position: absolute; |
| | | top: 75%; |
| | | top: 73%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | |
| | | } |
| | | .avater_2_3{ |
| | | position: absolute; |
| | | top: 67%; |
| | | top: 66%; |
| | | left: 55%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | |
| | | } |
| | | .avater_2_4{ |
| | | position: absolute; |
| | | top: 76%; |
| | | top: 75%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 36px; |
| | |
| | | } |
| | | .avater_2_5{ |
| | | position: absolute; |
| | | top: 73%; |
| | | top: 72%; |
| | | left: 38%; |
| | | transform: translate(-50%, -50%); |
| | | width: 37px; |
| | |
| | | } |
| | | .avater_2_6{ |
| | | position: absolute; |
| | | top: 62%; |
| | | top: 60%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 34px; |
| | |
| | | } |
| | | .avater_2_7{ |
| | | position: absolute; |
| | | top: 62%; |
| | | top: 60%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | |
| | | } |
| | | .avater_3_5{ |
| | | position: absolute; |
| | | top: 48%; |
| | | top: 51%; |
| | | left: 29%; |
| | | transform: translate(-50%, -50%); |
| | | width: 42px; |
| | |
| | | } |
| | | .avater_3_8{ |
| | | position: absolute; |
| | | top: 22%; |
| | | left: 34%; |
| | | top: 26%; |
| | | left: 33%; |
| | | transform: translate(-50%, -50%); |
| | | width: 56px; |
| | | height: 58px; |
| | |
| | | } |
| | | .avater_3_10{ |
| | | position: absolute; |
| | | top: 42%; |
| | | top: 44%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 41px; |
| | |
| | | } |
| | | .avater_3_13{ |
| | | position: absolute; |
| | | top: 37%; |
| | | top: 40%; |
| | | left: 51%; |
| | | transform: translate(-50%, -50%); |
| | | width: 41px; |
| | |
| | | } |
| | | .avater_3_14{ |
| | | position: absolute; |
| | | top: 33%; |
| | | top: 36%; |
| | | left: 57%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | |
| | | } |
| | | .avater_3_15{ |
| | | position: absolute; |
| | | top: 35%; |
| | | top: 38%; |
| | | left: 64%; |
| | | transform: translate(-50%, -50%); |
| | | width: 38px; |
| | |
| | | } |
| | | .avater_3_17{ |
| | | position: absolute; |
| | | top: 56%; |
| | | top: 59%; |
| | | left: 71%; |
| | | transform: translate(-50%, -50%); |
| | | width: 32px; |
| | |
| | | } |
| | | .avater_4_2{ |
| | | position: absolute; |
| | | top: 23%; |
| | | top: 26%; |
| | | left: 40%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | |
| | | } |
| | | .avater_4_3{ |
| | | position: absolute; |
| | | top: 11%; |
| | | top: 14%; |
| | | left: 46%; |
| | | transform: translate(-50%, -50%); |
| | | width: 47px; |
| | |
| | | } |
| | | .avater_4_4{ |
| | | position: absolute; |
| | | top: 17%; |
| | | top: 20%; |
| | | left: 57%; |
| | | transform: translate(-50%, -50%); |
| | | width: 39px; |