完善模块搜索框样式

Tcsm

2023-09-25 e103f6c980d575765eb7aa7aaee9426749c30e9e

 ruoyi-ui/src/views/homeRoot/index.vue

@@ -1,7 +1,7 @@
<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">
@@ -24,152 +24,159 @@
        <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)"></img>
            @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)"></img>
            <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[0][0].url"
            @click="getPersonInfo(rootSecList[0][0].userId)"></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_2" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[0][1].url"
            @click="getPersonInfo(rootSecList[0][1].userId)"></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_3" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][0].url"
             @click="getPersonInfo(rootSecList[1][0].userId)"></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">
          <img :src="'http://47.93.189.255:8080/'+ rootSecList[1][1].url"
            @click="getPersonInfo(rootSecList[1][1].userId)"></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_5" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][0].url"
                @click="getPersonInfo(rootSecList[2][0].userId)"></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_6" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[2][1].url"
                 @click="getPersonInfo(rootSecList[2][1].userId)"></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_7" v-if="isShow_2">
            <img :src="'http://47.93.189.255:8080/'+ rootSecList[3][0].url"
                 @click="getPersonInfo(rootSecList[3][0].userId)"></img>
            <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][1].url"
                 @click="getPersonInfo(rootSecList[3][1].userId)"></img>
            <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[0][0].url"
                 @click="getPersonInfo(rootSecList[0][0].userId)"></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_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">
            <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_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_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>
            <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>
@@ -181,20 +188,25 @@
<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' },
        { name: '显示全部', src: 'Group 407.png' }
      ],
      rootList:[],
      rootSecList:[],
      rootThiList:[],
      rootFouList:[],
      loading: true,
      formData:[],
      isShow_1:false,
@@ -292,15 +304,10 @@
    }

  },
  created() {

    // this.getCateInfor()
    // for (let i = 0; i < this.contactList.length; i++) {
    //   this.formDat[i] = this.contactList[i];
    // }
  },
  mounted() {
     this.getList(1);
  created(){
    this.setGreeting();
    this.getUser();
  },
  methods:{
    getInfo(src)
@@ -324,99 +331,132 @@
      }
    },
    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
            })
      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);
      // this.$router.push("/familymodel/jiagenwang/personInfo/" + id);
      //alert(id)
    },
    generation_2(){

     // alert(2356)
      //this.getList(2);
      let st = new Map()
    //  let st = new Map()
      this.rootSecList = []
       listRoot(2).then(response => {
       listRoot(4).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 = []
         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)
      //  // }

          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)
       // console.log(this.rootSecList)
      })


    },
    generation_3(){
      this.getList(3);
      this.getList(4);
      //写第3代的代码逻辑，用两个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;
     // 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)
         // 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>
@@ -460,8 +500,8 @@
}
.avater_2_1{
  position: absolute;
  top: 72%;
  left: 44%;
  top: 73%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
@@ -469,8 +509,8 @@
}
.avater_2_2{
  position: absolute;
  top: 65%;
  left: 48%;
  top: 67%;
  left: 47%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
@@ -479,7 +519,7 @@
}
.avater_2_3{
  position: absolute;
  top: 64%;
  top: 66%;
  left: 55%;
  transform: translate(-50%, -50%);
  width: 44px;
@@ -489,7 +529,7 @@
}
.avater_2_4{
  position: absolute;
  top: 73%;
  top: 75%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 36px;
@@ -499,8 +539,8 @@
}
.avater_2_5{
  position: absolute;
  top: 70%;
  left: 39%;
  top: 72%;
  left: 38%;
  transform: translate(-50%, -50%);
  width: 37px;
  height: 39px;
@@ -509,8 +549,8 @@
}
.avater_2_6{
  position: absolute;
  top: 58%;
  left: 44%;
  top: 60%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 35px;
@@ -519,7 +559,7 @@
}
.avater_2_7{
  position: absolute;
  top: 58%;
  top: 60%;
  left: 59%;
  transform: translate(-50%, -50%);
  width: 35px;
@@ -529,7 +569,7 @@
}
.avater_2_8{
  position: absolute;
  top: 70%;
  top: 73%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 45px;
@@ -578,7 +618,7 @@
}
.avater_3_5{
  position: absolute;
  top: 48%;
  top: 51%;
  left: 29%;
  transform: translate(-50%, -50%);
  width: 42px;
@@ -608,8 +648,8 @@
}
.avater_3_8{
  position: absolute;
  top: 22%;
  left: 34%;
  top: 26%;
  left: 33%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 58px;
@@ -627,7 +667,7 @@
}
.avater_3_10{
  position: absolute;
  top: 42%;
  top: 44%;
  left: 43%;
  transform: translate(-50%, -50%);
  width: 41px;
@@ -657,7 +697,7 @@
}
.avater_3_13{
  position: absolute;
  top: 37%;
  top: 40%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 41px;
@@ -667,7 +707,7 @@
}
.avater_3_14{
  position: absolute;
  top: 33%;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 35px;
@@ -677,7 +717,7 @@
}
.avater_3_15{
  position: absolute;
  top: 35%;
  top: 38%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 38px;
@@ -697,7 +737,7 @@
}
.avater_3_17{
  position: absolute;
  top: 56%;
  top: 59%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 32px;
@@ -756,7 +796,7 @@
}
.avater_4_2{
  position: absolute;
  top: 23%;
  top: 26%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 35px;
@@ -766,7 +806,7 @@
}
.avater_4_3{
  position: absolute;
  top: 11%;
  top: 14%;
  left: 46%;
  transform: translate(-50%, -50%);
  width: 47px;
@@ -776,7 +816,7 @@
}
.avater_4_4{
  position: absolute;
  top: 17%;
  top: 20%;
  left: 57%;
  transform: translate(-50%, -50%);
  width: 39px;