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 | 821 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 796 insertions(+), 25 deletions(-) diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue index 7f666b4..8b6a15f 100644 --- a/ruoyi-ui/src/views/homeRoot/index.vue +++ b/ruoyi-ui/src/views/homeRoot/index.vue @@ -1,60 +1,461 @@ <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.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-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: require('../../assets/images/Group 404.png') , + user: {}, + greeting: "", + imageSrc: require('../../assets/images/Group 407.png') , dropdownList: [ - { name: '鍙樉绀虹涓�浠�', src: 'Group 404.png' }, - { name: '鏄剧ず鑷崇浜屼唬', src: 'Group 405.png' }, - { name: '鏄剧ず鑷崇涓変唬', src: 'Group 406.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 + }] + }] + } + } + }, + + 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); + }); + } } } @@ -73,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