| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div> |
| | | <div class="container"> |
| | | <h1 style="font-size:21px;padding-top:30px">早上好! |
| | | <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"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-img> |
| | | </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> |
| | | <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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </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> |
| | | </el-avatar> |
| | | <el-avatar shape="circle" class="avater_2_8" v-if="isShow_2"> |
| | | <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"> |
| | | <el-img :src="'http://47.93.189.255:8080'+ rootList.url" |
| | | ></el-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_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_3"> |
| | | <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"; |
| | | |
| | | export default { |
| | | name: "index", |
| | | data(){ |
| | | return{ |
| | | imageSrc: '', |
| | | 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 443.png' }, |
| | | { name: '显示至第二代', src: 'Group 444.png' }, |
| | | { name: '显示至第三代', src: 'Group 445.png' }, |
| | | { name: '显示全部', src: 'Group 407.png' } |
| | | ], |
| | | rootList:[], |
| | | loading: true, |
| | | formData:[], |
| | | isShow_2:true, |
| | | isShow_3:true, |
| | | isShow_4:true, |
| | | 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, |
| | | 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, |
| | | childList:undefined |
| | | }] |
| | | }] |
| | | } |
| | | |
| | | } |
| | | |
| | | }, |
| | | created() { |
| | | this.getList(); |
| | | // this.getCateInfor() |
| | | // for (let i = 0; i < this.contactList.length; i++) { |
| | | // this.formDat[i] = this.contactList[i]; |
| | | // } |
| | | }, |
| | | 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(){ |
| | | this.isShow_2=false |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | }, |
| | | generation_2(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=false |
| | | this.isShow_4=false |
| | | }, |
| | | generation_3(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=false |
| | | }, |
| | | generation_4(){ |
| | | this.isShow_2=true |
| | | this.isShow_3=true |
| | | this.isShow_4=true |
| | | }, |
| | | 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; |
| | | |
| | | this.total = response.data.total; |
| | | this.loading = false; |
| | | } |
| | | ); |
| | | }, |
| | | |
| | | } |
| | | } |
| | |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | | } |
| | | .container { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | .avater_1_1 { |
| | | position: absolute; |
| | | top: 94%; |
| | | left: 51%; |
| | | transform: translate(-50%, -50%); |
| | | width: 54px; |
| | | height: 54px; |
| | | opacity: 1; |
| | | border-radius: 133px 133px 133px 133px ; |
| | | } |
| | | .avater_1_2{ |
| | | position: absolute; |
| | | top: 84%; |
| | | left: 48%; |
| | | transform: translate(-50%, -50%); |
| | | width: 45px; |
| | | height: 45px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_1{ |
| | | position: absolute; |
| | | top: 72%; |
| | | left: 44%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | | height: 44px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_2{ |
| | | position: absolute; |
| | | top: 65%; |
| | | left: 48%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | | height: 44px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_3{ |
| | | position: absolute; |
| | | top: 64%; |
| | | left: 55%; |
| | | transform: translate(-50%, -50%); |
| | | width: 44px; |
| | | height: 44px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_4{ |
| | | position: absolute; |
| | | top: 73%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 36px; |
| | | height: 37px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_5{ |
| | | position: absolute; |
| | | top: 70%; |
| | | left: 39%; |
| | | transform: translate(-50%, -50%); |
| | | width: 37px; |
| | | height: 39px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_6{ |
| | | position: absolute; |
| | | top: 58%; |
| | | left: 44%; |
| | | transform: translate(-50%, -50%); |
| | | width: 34px; |
| | | height: 35px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_7{ |
| | | position: absolute; |
| | | top: 58%; |
| | | left: 59%; |
| | | transform: translate(-50%, -50%); |
| | | width: 35px; |
| | | height: 37px; |
| | | border-radius: 133px 133px 133px 133px; |
| | | opacity: 1; |
| | | } |
| | | .avater_2_8{ |
| | | position: absolute; |
| | | top: 70%; |
| | | 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> |