From d6aec1c7bfed72bb3dbb3cde615099f705511e44 Mon Sep 17 00:00:00 2001
From: Tcsm <1377977403@qq.com>
Date: 星期一, 08 五月 2023 22:22:23 +0800
Subject: [PATCH] 家根网页面
---
ruoyi-ui/src/views/homeRoot/index.vue | 244 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 221 insertions(+), 23 deletions(-)
diff --git a/ruoyi-ui/src/views/homeRoot/index.vue b/ruoyi-ui/src/views/homeRoot/index.vue
index 7f666b4..4f19834 100644
--- a/ruoyi-ui/src/views/homeRoot/index.vue
+++ b/ruoyi-ui/src/views/homeRoot/index.vue
@@ -1,6 +1,6 @@
<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">
@@ -9,52 +9,147 @@
<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(){
+
}
}
}
@@ -73,4 +168,107 @@
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>
--
Gitblit v1.9.1