<template>
|
<div class="app-container">
|
<div class="container">
|
<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 }}-->
|
<span v-on:click="getFunc(item.name)">{{ item.name }}</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
</h1>
|
|
<div v-loading="loading" :data="rootList" >
|
<!-- 背景大图-->
|
<img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
|
<!-- 用户头像-->
|
|
<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" v-if="isShow_1">
|
<img :src="'http://47.93.189.255:8080/'+ rootList[1].url"
|
@click="getPersonInfo(rootList[1].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][0].url"
|
@click="getPersonInfo(rootSecList[0][0].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][1].url"
|
@click="getPersonInfo(rootSecList[0][1].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][0].url"
|
@click="getPersonInfo(rootSecList[1][0].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][1].url"
|
@click="getPersonInfo(rootSecList[1][1].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][0].url"
|
@click="getPersonInfo(rootSecList[2][0].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][1].url"
|
@click="getPersonInfo(rootSecList[2][1].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][0].url"
|
@click="getPersonInfo(rootSecList[3][0].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][1].url"
|
@click="getPersonInfo(rootSecList[3][1].userId)">
|
</el-avatar>
|
<el-avatar shape="circle" class="avater_3_1" v-if="isShow_3">
|
<img :src="'http://47.93.189.255:8080/'+ rootSecList[0][0].url"
|
@click="getPersonInfo(rootSecList[0][0].userId)">
|
</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_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>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
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 407.png' },
|
{ name: '显示至第二代', src: 'Group 407.png' },
|
{ name: '显示至第三代', src: 'Group 445.png' },
|
{ name: '显示全部', src: 'Group 407.png' }
|
],
|
rootList:[],
|
rootSecList:[],
|
loading: true,
|
formData:[],
|
isShow_1:false,
|
isShow_2:false,
|
isShow_3:false,
|
isShow_4:false,
|
formDat:{
|
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,
|
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.setGreeting();
|
this.getUser();
|
},
|
mounted() {
|
this.getList(1);
|
},
|
methods:{
|
getInfo(src)
|
{
|
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(){
|
// alert(127)
|
// this.getList(1)
|
listRoot(1).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(){
|
|
// alert(2356)
|
//this.getList(2);
|
let st = new Map()
|
this.rootSecList = []
|
listRoot(2).then(response => {
|
this.rootList = response.data
|
// console.log(this.rootList[0].childList)
|
// alert(this.rootList[0].childList.length)
|
for(let i = 0; i < this.rootList[0].childList.length; i++)
|
{
|
// alert(343)
|
if(st.has(this.rootList[0].childList[i].userId)!=true)
|
{
|
// alert(35)
|
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])
|
for(let j = 0; j < this.rootList[0].childList.length; j++)
|
{
|
if(this.rootList[0].childList[j].userId==spid)
|
{
|
gen.push(this.rootList[0].childList[j])
|
break
|
}
|
}
|
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(3);
|
this.isShow_2=true
|
this.isShow_3=true
|
this.isShow_4=false
|
},
|
generation_4(){
|
this.getList(4);
|
this.isShow_2=true
|
this.isShow_3=true
|
this.isShow_4=true
|
},
|
getList(depth) {
|
this.loading = true;
|
// alert(23)
|
// alert(45)
|
// console.log(this.queryParams)
|
|
// listProperty(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
|
listRoot(depth).then(response => {
|
// alert(123)
|
// alert(123)
|
// console.log(response.data)
|
// alert(90)
|
this.rootList = response.data;
|
this.isShow_1=true
|
// alert(this.rootList[0].url)
|
// this.total = response.data.total;
|
this.loading = false;
|
}
|
);
|
},
|
|
//问候（时间判断）
|
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;
|
|
});
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.app-container{
|
background-color: #FEF7FC;
|
}
|
.el-dropdown{
|
margin-left: auto;
|
}
|
.background {
|
width: auto;
|
height: auto;
|
max-width: 100%;
|
max-height: 100%;
|
}
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.avater_1_1 {
|
position: absolute;
|
top: 95%;
|
left: 51%;
|
transform: translate(-50%, -50%);
|
width: 54px;
|
height: 54px;
|
opacity: 1;
|
border-radius: 133px 133px 133px 133px ;
|
}
|
.avater_1_2{
|
position: absolute;
|
top: 85%;
|
left: 48%;
|
transform: translate(-50%, -50%);
|
width: 45px;
|
height: 45px;
|
opacity: 1;
|
}
|
.avater_2_1{
|
position: absolute;
|
top: 75%;
|
left: 43%;
|
transform: translate(-50%, -50%);
|
width: 44px;
|
height: 44px;
|
opacity: 1;
|
}
|
.avater_2_2{
|
position: absolute;
|
top: 67%;
|
left: 47%;
|
transform: translate(-50%, -50%);
|
width: 44px;
|
height: 44px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_3{
|
position: absolute;
|
top: 67%;
|
left: 55%;
|
transform: translate(-50%, -50%);
|
width: 44px;
|
height: 44px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_4{
|
position: absolute;
|
top: 76%;
|
left: 59%;
|
transform: translate(-50%, -50%);
|
width: 36px;
|
height: 37px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_5{
|
position: absolute;
|
top: 73%;
|
left: 38%;
|
transform: translate(-50%, -50%);
|
width: 37px;
|
height: 39px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_6{
|
position: absolute;
|
top: 62%;
|
left: 43%;
|
transform: translate(-50%, -50%);
|
width: 34px;
|
height: 35px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_7{
|
position: absolute;
|
top: 62%;
|
left: 59%;
|
transform: translate(-50%, -50%);
|
width: 35px;
|
height: 37px;
|
border-radius: 133px 133px 133px 133px;
|
opacity: 1;
|
}
|
.avater_2_8{
|
position: absolute;
|
top: 73%;
|
left: 64%;
|
transform: translate(-50%, -50%);
|
width: 45px;
|
height: 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>
|
