| | |
| | | <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"> |
| | |
| | | <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-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" 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 404.png') , |
| | | 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 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(){ |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | 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> |