From f468170d79dee3f8efb75705c7e23a1b53e54e91 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期二, 29 七月 2025 22:08:02 +0800
Subject: [PATCH] 修改了内容

---
 ruoyi-ui/src/views/homeRoot/index.vue |  828 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 801 insertions(+), 27 deletions(-)

diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue
index 01217b4..8b6a15f 100644
--- a/ruoyi-ui/src/views/homeRoot/index.vue
+++ b/ruoyi-ui/src/views/homeRoot/index.vue
@@ -1,58 +1,462 @@
 <template>
   <div class="app-container">
-    <div>
-      <h1 style="font-size:21px;padding-top:30px">鏃╀笂濂斤紒
+    <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="imageSrc=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-item >鍙樉绀虹涓�浠�</el-dropdown-item>
-             <el-dropdown-item >鏄剧ず鑷崇浜屼唬</el-dropdown-item>
-             <el-dropdown-item >鏄剧ず鑷崇涓変唬</el-dropdown-item>
-             <el-dropdown-item >鏄剧ず鍏ㄩ儴</el-dropdown-item>-->
         </el-dropdown-menu>
       </el-dropdown>
 
       </h1>
-      <div  >
-        <img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
-<!--        <img v-for="item in list" v-if="item.id==index" :src="item.path">
-        <img
-          src="src/assets/images/Group 407.png"
-          alt=""
-          class="background"
-        />
-        <img
 
-          src="../../assets/images/Group 404.png"
-          alt=""
-          class="background"
-       />-->
+      <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[0].spouse.url"
+            @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[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].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[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].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[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[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/'+ 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/'+ 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_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">
+            <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_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">
+            <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">-->
+<!--            <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">
+            <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_13" v-if="isShow_3">
+            <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">
+            <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">
+            <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_17" v-if="isShow_3">
+            <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_4_2" v-if="isShow_4">
+            <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">
+            <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">
+            <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>-->
+
+        </div>
       </div>
+
     </div>
   </div>
 </template>
 
 <script>
+
+import {listRoot} from "@/api/root/index";
+import { getUserProfile } from "@/api/system/user";
+
 export default {
   name: "index",
   data(){
     return{
-      imageSrc: '',
+      user: {},
+      greeting: "",
+      imageSrc: require('../../assets/images/Group 407.png') ,
       dropdownList: [
-        { name: '鍙樉绀虹涓�浠�', src: require('../../assets/images/Group 404.png') },
-        { name: '鏄剧ず鑷崇浜屼唬', src: require('../../assets/images/Group 405.png') },
-        { name: '鏄剧ず鑷崇涓変唬', src: require('../../assets/images/Group 406.png') },
-        { name: '鏄剧ず鍏ㄩ儴', src: require('../../assets/images/Group 407.png') }
-      ]
+        { name: '鍙樉绀虹涓�浠�', src: 'Group 407.png' },
+        { name: '鏄剧ず鑷崇浜屼唬', src: 'Group 407.png' },
+        { name: '鏄剧ず鑷崇涓変唬', src: 'Group 407.png' },
+        { name: '鏄剧ず鍏ㄩ儴', src: 'Group 407.png' }
+      ],
+      rootList:[],
+      rootSecList:[],
+      rootThiList:[],
+      rootFouList:[],
+      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
+          }]
+        }]
+      }
+
     }
 
   },
-  methods:{
 
+  created(){
+    this.setGreeting();
+    this.getUser();
+  },
+  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(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(){
+
+     // 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浠g殑浠g爜閫昏緫锛岀敤涓や釜for寰幆鍐欑3浠�
+      this.getGenByNum(this.rootThiList, this.rootList[0], 1, 3)
+      console.log(this.rootThiList)
+      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)
+
+        }
+      );
+    },
+
+    //闂�欙紙鏃堕棿鍒ゆ柇锛�
+    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);
+      });
+
+    }
   }
 }
 </script>
@@ -70,4 +474,374 @@
   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: 73%;
+  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: 66%;
+  left: 55%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_2_4{
+  position: absolute;
+  top: 75%;
+  left: 59%;
+  transform: translate(-50%, -50%);
+  width: 36px;
+  height: 37px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_2_5{
+  position: absolute;
+  top: 72%;
+  left: 38%;
+  transform: translate(-50%, -50%);
+  width: 37px;
+  height: 39px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_2_6{
+  position: absolute;
+  top: 60%;
+  left: 43%;
+  transform: translate(-50%, -50%);
+  width: 34px;
+  height: 35px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_2_7{
+  position: absolute;
+  top: 60%;
+  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: 51%;
+  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: 26%;
+  left: 33%;
+  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: 44%;
+  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: 40%;
+  left: 51%;
+  transform: translate(-50%, -50%);
+  width: 41px;
+  height: 42px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_3_14{
+  position: absolute;
+  top: 36%;
+  left: 57%;
+  transform: translate(-50%, -50%);
+  width: 35px;
+  height: 35px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_3_15{
+  position: absolute;
+  top: 38%;
+  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: 59%;
+  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: 26%;
+  left: 40%;
+  transform: translate(-50%, -50%);
+  width: 35px;
+  height: 35px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_4_3{
+  position: absolute;
+  top: 14%;
+  left: 46%;
+  transform: translate(-50%, -50%);
+  width: 47px;
+  height: 47px;
+  border-radius: 133px 133px 133px 133px;
+  opacity: 1;
+}
+.avater_4_4{
+  position: absolute;
+  top: 20%;
+  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>

--
Gitblit v1.9.1