From bd40473c9c634005bc7e62e7fc901bcd8b598fa0 Mon Sep 17 00:00:00 2001 From: feige <feige@qq.com> Date: 星期五, 02 二月 2024 15:20:26 +0800 Subject: [PATCH] 提交了修改 --- ruoyi-ui/src/views/homeRoot/index.vue | 435 +++++++++++++++++++++++++++++++++-------------------- 1 files changed, 271 insertions(+), 164 deletions(-) diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue index 5ad025b..8b6a15f 100644 --- a/ruoyi-ui/src/views/homeRoot/index.vue +++ b/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"> @@ -20,155 +20,163 @@ <!-- 鑳屾櫙澶у浘--> <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 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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-img> + <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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <el-img :src="'http://47.93.189.255:8080'+ rootList.url" - ></el-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"> - <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_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> @@ -179,25 +187,32 @@ <script> -import {listRoot} from "@/api/root"; +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 443.png' }, - { name: '鏄剧ず鑷崇浜屼唬', src: 'Group 444.png' }, - { name: '鏄剧ず鑷崇涓変唬', src: 'Group 445.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_2:true, - isShow_3:true, - isShow_4:true, + isShow_1:false, + isShow_2:false, + isShow_3:false, + isShow_4:false, formDat:{ userId: undefined, nickName: undefined, @@ -252,6 +267,7 @@ url:undefined, familyId:undefined, secondFamilyId: undefined, + identity:undefined, childList:[{ userId: undefined, nickName: undefined, @@ -279,6 +295,7 @@ url:undefined, familyId:undefined, secondFamilyId: undefined, + identity:undefined, childList:undefined }] }] @@ -287,12 +304,10 @@ } }, - created() { - this.getList(); - // this.getCateInfor() - // for (let i = 0; i < this.contactList.length; i++) { - // this.formDat[i] = this.contactList[i]; - // } + + created(){ + this.setGreeting(); + this.getUser(); }, methods:{ getInfo(src) @@ -316,40 +331,132 @@ } }, generation_1(){ - this.isShow_2=false - this.isShow_3=false - this.isShow_4=false + // 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(){ - this.isShow_2=true - this.isShow_3=false - this.isShow_4=false + + // 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 }, - getList() { + 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; - // 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; + 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> @@ -374,7 +481,7 @@ } .avater_1_1 { position: absolute; - top: 94%; + top: 95%; left: 51%; transform: translate(-50%, -50%); width: 54px; @@ -384,7 +491,7 @@ } .avater_1_2{ position: absolute; - top: 84%; + top: 85%; left: 48%; transform: translate(-50%, -50%); width: 45px; @@ -393,8 +500,8 @@ } .avater_2_1{ position: absolute; - top: 72%; - left: 44%; + top: 73%; + left: 43%; transform: translate(-50%, -50%); width: 44px; height: 44px; @@ -402,8 +509,8 @@ } .avater_2_2{ position: absolute; - top: 65%; - left: 48%; + top: 67%; + left: 47%; transform: translate(-50%, -50%); width: 44px; height: 44px; @@ -412,7 +519,7 @@ } .avater_2_3{ position: absolute; - top: 64%; + top: 66%; left: 55%; transform: translate(-50%, -50%); width: 44px; @@ -422,7 +529,7 @@ } .avater_2_4{ position: absolute; - top: 73%; + top: 75%; left: 59%; transform: translate(-50%, -50%); width: 36px; @@ -432,8 +539,8 @@ } .avater_2_5{ position: absolute; - top: 70%; - left: 39%; + top: 72%; + left: 38%; transform: translate(-50%, -50%); width: 37px; height: 39px; @@ -442,8 +549,8 @@ } .avater_2_6{ position: absolute; - top: 58%; - left: 44%; + top: 60%; + left: 43%; transform: translate(-50%, -50%); width: 34px; height: 35px; @@ -452,7 +559,7 @@ } .avater_2_7{ position: absolute; - top: 58%; + top: 60%; left: 59%; transform: translate(-50%, -50%); width: 35px; @@ -462,7 +569,7 @@ } .avater_2_8{ position: absolute; - top: 70%; + top: 73%; left: 64%; transform: translate(-50%, -50%); width: 45px; @@ -511,7 +618,7 @@ } .avater_3_5{ position: absolute; - top: 48%; + top: 51%; left: 29%; transform: translate(-50%, -50%); width: 42px; @@ -541,8 +648,8 @@ } .avater_3_8{ position: absolute; - top: 22%; - left: 34%; + top: 26%; + left: 33%; transform: translate(-50%, -50%); width: 56px; height: 58px; @@ -560,7 +667,7 @@ } .avater_3_10{ position: absolute; - top: 42%; + top: 44%; left: 43%; transform: translate(-50%, -50%); width: 41px; @@ -590,7 +697,7 @@ } .avater_3_13{ position: absolute; - top: 37%; + top: 40%; left: 51%; transform: translate(-50%, -50%); width: 41px; @@ -600,7 +707,7 @@ } .avater_3_14{ position: absolute; - top: 33%; + top: 36%; left: 57%; transform: translate(-50%, -50%); width: 35px; @@ -610,7 +717,7 @@ } .avater_3_15{ position: absolute; - top: 35%; + top: 38%; left: 64%; transform: translate(-50%, -50%); width: 38px; @@ -630,7 +737,7 @@ } .avater_3_17{ position: absolute; - top: 56%; + top: 59%; left: 71%; transform: translate(-50%, -50%); width: 32px; @@ -689,7 +796,7 @@ } .avater_4_2{ position: absolute; - top: 23%; + top: 26%; left: 40%; transform: translate(-50%, -50%); width: 35px; @@ -699,7 +806,7 @@ } .avater_4_3{ position: absolute; - top: 11%; + top: 14%; left: 46%; transform: translate(-50%, -50%); width: 47px; @@ -709,7 +816,7 @@ } .avater_4_4{ position: absolute; - top: 17%; + top: 20%; left: 57%; transform: translate(-50%, -50%); width: 39px; -- Gitblit v1.9.1