| | |
| | | <img src="../../assets/images/Frame.png"> |
| | | </span> |
| | | <el-dropdown-menu slot="dropdown" > |
| | | <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)">{{ item.name }} |
| | | <el-dropdown-item v-for="item in dropdownList" :key="item.src" @click.native="getInfo(item.src)" > |
| | | <!-- {{ item.name }}--> |
| | | <span v-on:click="getFunc(item.name)">{{ item.name }}</span> |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </el-dropdown> |
| | |
| | | <!-- 背景大图--> |
| | | <img v-if="imageSrc" :src="imageSrc" alt="" class="background"/> |
| | | <!-- 用户头像--> |
| | | <div v-model="rootList.url" prop="url"> |
| | | <div v-model="rootList.url" > |
| | | <el-avatar shape="circle" class="avater_1_1"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </el-avatar> |
| | | |
| | | <el-avatar shape="circle" class="avater_3_1" 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_2" 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_5" 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_3"> |
| | | <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> |
| | | </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_10" 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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | |
| | | url:undefined, |
| | | familyId:undefined, |
| | | secondFamilyId: undefined, |
| | | childList:undefined |
| | | childList:[{ |
| | | userId: undefined, |
| | | nickName: undefined, |
| | | oldName: undefined, |
| | | sex: undefined, |
| | | nationality: undefined, |
| | | nation: undefined, |
| | | maritalStatus: undefined, |
| | | politicalOutlook: undefined, |
| | | phoneNumber:undefined, |
| | | idNum: undefined, |
| | | locationAddress: undefined, |
| | | alwaysAddress:undefined, |
| | | locationPolice: undefined, |
| | | alwaysPolice: undefined, |
| | | unit: undefined, |
| | | position:undefined, |
| | | outStatus:undefined, |
| | | idNo: undefined, |
| | | img: undefined, |
| | | spouseId: undefined, |
| | | fatherId: undefined, |
| | | momId: undefined, |
| | | birth: undefined, |
| | | url:undefined, |
| | | familyId:undefined, |
| | | secondFamilyId: undefined, |
| | | childList:[{ |
| | | userId: undefined, |
| | | nickName: undefined, |
| | | oldName: undefined, |
| | | sex: undefined, |
| | | nationality: undefined, |
| | | nation: undefined, |
| | | maritalStatus: undefined, |
| | | politicalOutlook: undefined, |
| | | phoneNumber:undefined, |
| | | idNum: undefined, |
| | | locationAddress: undefined, |
| | | alwaysAddress:undefined, |
| | | locationPolice: undefined, |
| | | alwaysPolice: undefined, |
| | | unit: undefined, |
| | | position:undefined, |
| | | outStatus:undefined, |
| | | idNo: undefined, |
| | | img: undefined, |
| | | spouseId: undefined, |
| | | fatherId: undefined, |
| | | momId: undefined, |
| | | birth: undefined, |
| | | url:undefined, |
| | | familyId:undefined, |
| | | secondFamilyId: undefined, |
| | | childList:undefined |
| | | }] |
| | | }] |
| | | } |
| | | |
| | | } |
| | |
| | | { |
| | | this.imageSrc = require('../../assets/images/'+src) |
| | | }, |
| | | getFunc(name){ |
| | | switch (name) { |
| | | case '显示至第二代': |
| | | this.generation_2() |
| | | break |
| | | case '显示至第三代': |
| | | this.generation_3() |
| | | break |
| | | case '显示全部': |
| | | this.generation_4() |
| | | break |
| | | default: |
| | | this.generation_1() |
| | | break |
| | | } |
| | | }, |
| | | generation_1(){ |
| | | this.isShow_2=false |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | }, |
| | | generation_2(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | }, |
| | | generation_3(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=false |
| | | }, |
| | | generation_4(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=true |
| | | }, |
| | | getList() { |
| | | this.loading = true; |
| | | // console.log(this.queryParams) |
| | |
| | | } |
| | | ); |
| | | }, |
| | | handleEdit_1(){ |
| | | |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_1{ |
| | | position: absolute; |
| | | top: 82%; |
| | | left: 36%; |
| | | transform: translate(-50%, -50%); |
| | | width: 47px; |
| | | height: 47px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_2{ |
| | | position: absolute; |
| | | top: 80%; |
| | | left: 24%; |
| | | transform: translate(-50%, -50%); |
| | | width: 40px; |
| | | height: 41px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_3{ |
| | | position: absolute; |
| | | top: 65%; |
| | | left: 20%; |
| | | transform: translate(-50%, -50%); |
| | | width: 52px; |
| | | height: 53px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_4{ |
| | | position: absolute; |
| | | top: 62%; |
| | | left: 30%; |
| | | transform: translate(-50%, -50%); |
| | | width: 37px; |
| | | height: 38px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_5{ |
| | | position: absolute; |
| | | top: 48%; |
| | | left: 29%; |
| | | transform: translate(-50%, -50%); |
| | | width: 42px; |
| | | height: 43px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_6{ |
| | | position: absolute; |
| | | top: 31%; |
| | | left: 23%; |
| | | transform: translate(-50%, -50%); |
| | | width: 46px; |
| | | height: 47px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_7{ |
| | | position: absolute; |
| | | top: 37%; |
| | | left: 31%; |
| | | transform: translate(-50%, -50%); |
| | | width: 46px; |
| | | height: 47px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_8{ |
| | | position: absolute; |
| | | top: 22%; |
| | | left: 34%; |
| | | transform: translate(-50%, -50%); |
| | | width: 56px; |
| | | height: 58px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_9{ |
| | | position: absolute; |
| | | top: 39%; |
| | | left: 38%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | | height: 35px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_10{ |
| | | position: absolute; |
| | | top: 42%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 41px; |
| | | height: 42px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_11{ |
| | | position: absolute; |
| | | top: 28%; |
| | | left: 45%; |
| | | transform: translate(-50%, -50%); |
| | | width: 32px; |
| | | height: 33px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_12{ |
| | | position: absolute; |
| | | top: 18%; |
| | | left: 51%; |
| | | transform: translate(-50%, -50%); |
| | | width: 49px; |
| | | height: 50px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_13{ |
| | | position: absolute; |
| | | top: 37%; |
| | | left: 51%; |
| | | transform: translate(-50%, -50%); |
| | | width: 41px; |
| | | height: 42px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_14{ |
| | | position: absolute; |
| | | top: 33%; |
| | | left: 57%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | | height: 35px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_15{ |
| | | position: absolute; |
| | | top: 35%; |
| | | left: 64%; |
| | | transform: translate(-50%, -50%); |
| | | width: 38px; |
| | | height: 39px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_16{ |
| | | position: absolute; |
| | | top: 18%; |
| | | left: 69%; |
| | | transform: translate(-50%, -50%); |
| | | width: 49px; |
| | | height: 51px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_17{ |
| | | position: absolute; |
| | | top: 56%; |
| | | left: 71%; |
| | | transform: translate(-50%, -50%); |
| | | width: 32px; |
| | | height: 33px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_18{ |
| | | position: absolute; |
| | | top: 46%; |
| | | left: 76%; |
| | | transform: translate(-50%, -50%); |
| | | width: 43px; |
| | | height: 43px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_19{ |
| | | position: absolute; |
| | | top:62%; |
| | | left: 79%; |
| | | transform: translate(-50%, -50%); |
| | | width: 38px; |
| | | height: 39px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_20{ |
| | | position: absolute; |
| | | top: 73%; |
| | | left: 74%; |
| | | transform: translate(-50%, -50%); |
| | | width: 33px; |
| | | height: 33px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_3_21{ |
| | | position: absolute; |
| | | top: 81%; |
| | | left: 65%; |
| | | transform: translate(-50%, -50%); |
| | | width: 37px; |
| | | height: 38px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_1{ |
| | | position: absolute; |
| | | top: 50%; |
| | | left: 21%; |
| | | transform: translate(-50%, -50%); |
| | | width: 51px; |
| | | height: 52px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_2{ |
| | | position: absolute; |
| | | top: 23%; |
| | | left: 40%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | | height: 35px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_3{ |
| | | position: absolute; |
| | | top: 11%; |
| | | left: 46%; |
| | | transform: translate(-50%, -50%); |
| | | width: 47px; |
| | | height: 47px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_4{ |
| | | position: absolute; |
| | | top: 17%; |
| | | left: 57%; |
| | | transform: translate(-50%, -50%); |
| | | width: 39px; |
| | | height: 39px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_5{ |
| | | position: absolute; |
| | | top: 23%; |
| | | left: 61%; |
| | | transform: translate(-50%, -50%); |
| | | width: 34px; |
| | | height: 34px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_4_6{ |
| | | position: absolute; |
| | | top: 32%; |
| | | left: 73%; |
| | | transform: translate(-50%, -50%); |
| | | width: 41px; |
| | | height: 43px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | </style> |