| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div class="container"> |
| | | <h1 style="font-size:21px;padding-top:30px">早上好! |
| | | <h1 style="font-size: 21px;">{{ greeting +',' + user.userName }} |
| | | <el-dropdown style="float:right"> |
| | | <span class="el-dropdown-link"> |
| | | <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"> |
| | | <el-avatar shape="circle" class="avater_1_1"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | |
| | | <div v-model="rootList.url"> |
| | | <el-avatar shape="circle" class="avater_1_1" v-if="isShow_1"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootList[0].url" |
| | | @click="getPersonInfo(rootList[0].userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_1_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <el-avatar shape="circle" class="avater_1_2" v-if="isShow_1"> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootList[0].spouse.url" |
| | | @click="getPersonInfo(rootList[0].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_1" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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_2" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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_3" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <img :src="'http://47.93.189.255:8080/'+ rootSecList[1].url" |
| | | @click="getPersonInfo(rootSecList[1].spouse.userId)"> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_5" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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_6" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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_7" v-if="isShow_2"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | <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_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_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_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_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> |
| | | </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> |
| | |
| | | |
| | | <script> |
| | | |
| | | import {listRoot} from "@/api/root"; |
| | | import {listRoot} from "@/api/root/index"; |
| | | import { getUserProfile } from "@/api/system/user"; |
| | | |
| | | export default { |
| | | name: "index", |
| | | data(){ |
| | | return{ |
| | | user: {}, |
| | | greeting: "", |
| | | imageSrc: require('../../assets/images/Group 407.png') , |
| | | dropdownList: [ |
| | | { name: '只显示第一代', src: 'Group 443.png' }, |
| | | { name: '显示至第二代', src: 'Group 444.png' }, |
| | | { name: '只显示第一代', src: 'Group 445.png' }, |
| | | { name: '显示至第二代', src: 'Group 445.png' }, |
| | | { name: '显示至第三代', src: 'Group 445.png' }, |
| | | { name: '显示全部', src: 'Group 407.png' } |
| | | ], |
| | | rootList:[], |
| | | rootSecList:[], |
| | | rootThiList:[], |
| | | rootFouList:[], |
| | | loading: true, |
| | | formData:[], |
| | | isShow_2:true, |
| | | isShow_3:true, |
| | | isShow_4:true, |
| | | isShow_1:false, |
| | | isShow_2:false, |
| | | isShow_3:false, |
| | | isShow_4:false, |
| | | formDat:{ |
| | | userId: undefined, |
| | | nickName: undefined, |
| | |
| | | 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, |
| | | identity: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, |
| | | identity:undefined, |
| | | childList:undefined |
| | | }] |
| | | }] |
| | | } |
| | | |
| | | } |
| | | |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | // this.getCateInfor() |
| | | // for (let i = 0; i < this.contactList.length; i++) { |
| | | // this.formDat[i] = this.contactList[i]; |
| | | // } |
| | | |
| | | created(){ |
| | | this.setGreeting(); |
| | | this.getUser(); |
| | | }, |
| | | methods:{ |
| | | getInfo(src) |
| | | { |
| | | this.imageSrc = require('../../assets/images/'+src) |
| | | }, |
| | | getList() { |
| | | this.loading = true; |
| | | // console.log(this.queryParams) |
| | | // listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => { |
| | | listRoot(this.queryParams).then(response => { |
| | | // alert(123) |
| | | // console.log(response.data) |
| | | this.rootList = response.data.data; |
| | | 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(){ |
| | | // alert(127) |
| | | // this.getList(1) |
| | | listRoot(4).then(response => { |
| | | this.rootList = response.data |
| | | this.isShow_1=true |
| | | this.isShow_2=false |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | }) |
| | | }, |
| | | getPersonInfo(id) |
| | | { |
| | | this.$router.push("/familymodel/jiagenwang/personInfo/" + id); |
| | | //alert(id) |
| | | }, |
| | | generation_2(){ |
| | | |
| | | this.total = response.data.total; |
| | | // alert(2356) |
| | | //this.getList(2); |
| | | // let st = new Map() |
| | | this.rootSecList = [] |
| | | listRoot(4).then(response => { |
| | | this.rootList = response.data |
| | | this.getGenByNum(this.rootSecList, this.rootList[0], 1, 2) |
| | | // console.log(this.rootSecList) |
| | | // alert(this.rootSecList[0].url) |
| | | // for(let i = 0; i < this.rootList[0].childList.length; i++) |
| | | // { |
| | | // // if(st.has(this.rootList[0].childList[i].userId)!=true) |
| | | // //{ |
| | | // // st.set(this.rootList[0].childList[i].userId, 1); |
| | | // // st.set(this.rootList[0].childList[i].spouseId,1) |
| | | // // let spid = this.rootList[0].childList[i].spouseId |
| | | // let gen = [] |
| | | // gen.push(this.rootList[0].childList[i]) |
| | | // this.rootSecList.push(gen) |
| | | // // } |
| | | |
| | | |
| | | // } |
| | | this.isShow_2=true |
| | | this.isShow_1=true |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | // console.log(this.rootSecList) |
| | | }) |
| | | |
| | | |
| | | }, |
| | | generation_3(){ |
| | | this.getList(4); |
| | | //写第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 |
| | | }, |
| | | generation_4(){ |
| | | this.getList(4); |
| | | // alert(32) |
| | | this.getGenByNum(this.rootFouList, this.rootList[0], 1, 4) |
| | | console.log(this.rootFouList) |
| | | // console.log('-=23-------') |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=true |
| | | }, |
| | | getGenByNum(genData,data,fir,num) |
| | | { |
| | | //console.log(data) |
| | | if(data==null||fir>num) |
| | | return |
| | | if(fir==num) |
| | | { |
| | | // alert(fir) |
| | | genData.push(data); |
| | | return |
| | | } |
| | | // console.log(data) |
| | | // // console.log(data[0].childList) |
| | | // console.log('----------------') |
| | | for(var i = 0; i < data.childList.length; i++) |
| | | { |
| | | this.getGenByNum(genData, data.childList[i], fir + 1, num); |
| | | } |
| | | }, |
| | | getList(depth) { |
| | | this.loading = true; |
| | | listRoot(depth).then(response => { |
| | | this.rootList = response.data; |
| | | this.isShow_1=true |
| | | // alert(this.rootList[0].url) |
| | | // this.total = response.data.total; |
| | | console.log(this.rootList) |
| | | // alert(45) |
| | | this.loading = false; |
| | | // console.log(this.rootList) |
| | | |
| | | } |
| | | ); |
| | | }, |
| | | handleEdit_1(){ |
| | | |
| | | //问候(时间判断) |
| | | setGreeting() { |
| | | const currentTime = new Date(); |
| | | const currentHour = currentTime.getHours(); |
| | | |
| | | if (currentHour < 12) { |
| | | this.greeting = "早上好"; |
| | | } else if (currentHour < 14) { |
| | | this.greeting = "中午好"; |
| | | } else if (currentHour < 18) { |
| | | this.greeting = "下午好"; |
| | | } else { |
| | | this.greeting = "晚上好"; |
| | | } |
| | | }, |
| | | //问候(获取用户名称) |
| | | getUser() { |
| | | getUserProfile().then(response => { |
| | | this.user = response.data; |
| | | this.getList(4); |
| | | }); |
| | | |
| | | } |
| | | } |
| | |
| | | } |
| | | .avater_1_1 { |
| | | position: absolute; |
| | | top: 94%; |
| | | top: 95%; |
| | | left: 51%; |
| | | transform: translate(-50%, -50%); |
| | | width: 54px; |
| | |
| | | } |
| | | .avater_1_2{ |
| | | position: absolute; |
| | | top: 84%; |
| | | top: 85%; |
| | | left: 48%; |
| | | transform: translate(-50%, -50%); |
| | | width: 45px; |
| | |
| | | } |
| | | .avater_2_1{ |
| | | position: absolute; |
| | | top: 72%; |
| | | left: 44%; |
| | | top: 75%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | | height: 44px; |
| | |
| | | } |
| | | .avater_2_2{ |
| | | position: absolute; |
| | | top: 65%; |
| | | left: 48%; |
| | | top: 67%; |
| | | left: 47%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | | height: 44px; |
| | |
| | | } |
| | | .avater_2_3{ |
| | | position: absolute; |
| | | top: 64%; |
| | | top: 67%; |
| | | left: 55%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | |
| | | } |
| | | .avater_2_4{ |
| | | position: absolute; |
| | | top: 73%; |
| | | top: 76%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 36px; |
| | |
| | | } |
| | | .avater_2_5{ |
| | | position: absolute; |
| | | top: 70%; |
| | | left: 39%; |
| | | top: 73%; |
| | | left: 38%; |
| | | transform: translate(-50%, -50%); |
| | | width: 37px; |
| | | height: 39px; |
| | |
| | | } |
| | | .avater_2_6{ |
| | | position: absolute; |
| | | top: 58%; |
| | | left: 44%; |
| | | top: 62%; |
| | | left: 43%; |
| | | transform: translate(-50%, -50%); |
| | | width: 34px; |
| | | height: 35px; |
| | |
| | | } |
| | | .avater_2_7{ |
| | | position: absolute; |
| | | top: 58%; |
| | | top: 62%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | |
| | | } |
| | | .avater_2_8{ |
| | | position: absolute; |
| | | top: 70%; |
| | | top: 73%; |
| | | left: 64%; |
| | | transform: translate(-50%, -50%); |
| | | width: 45px; |
| | |
| | | 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> |