<template>
|
<div class="app-container">
|
<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.native="getInfo(item.src)">{{ item.name }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
|
</h1>
|
|
<div v-loading="loading" :data="rootList" >
|
<!-- 背景大图-->
|
<img v-if="imageSrc" :src="imageSrc" alt="" class="background"/>
|
<!-- 用户头像-->
|
<div v-model="rootList.url" prop="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>
|
|
|
</div>
|
</div>
|
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import {listRoot} from "@/api/root";
|
|
export default {
|
name: "index",
|
data(){
|
return{
|
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' }
|
],
|
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: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)
|
},
|
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;
|
}
|
);
|
},
|
handleEdit_1(){
|
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.app-container{
|
background-color: #FEF7FC;
|
}
|
.el-dropdown{
|
margin-left: auto;
|
}
|
.background {
|
width: auto;
|
height: auto;
|
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;
|
}
|
</style>
|
