From ebe31a83ee1c76bfc6546e8b60ae5cf90c554346 Mon Sep 17 00:00:00 2001 From: Tcsm <1377977403@qq.com> Date: 星期一, 29 五月 2023 01:05:32 +0800 Subject: [PATCH] 完成家根网详情页面样式 --- ruoyi-ui/src/views/homeRoot/personInfo.vue | 380 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 files changed, 371 insertions(+), 9 deletions(-) diff --git a/ruoyi-ui/src/views/homeRoot/personInfo.vue b/ruoyi-ui/src/views/homeRoot/personInfo.vue index 08b4762..0d1a56d 100644 --- a/ruoyi-ui/src/views/homeRoot/personInfo.vue +++ b/ruoyi-ui/src/views/homeRoot/personInfo.vue @@ -1,7 +1,261 @@ <template> - <div class="app-container"> - <div class="wrapper"> - <div id="building"> + <div class="app-container" > + <div class="wrapper" style="overflow: auto;"> + <div id="building" > + + <el-form ref="elForm" :model="personInfos" :rules="rules" size="medium" label-position="left" label-width="100px"> + <el-container> + <div style="padding-left:30px;padding-top: 50px"> + <el-container> + <el-col :span="6" :data="personInfos"> + <div class="block" :model="personInfos" > + <el-col v-model="personInfos.url" prop="url"> + <el-avatar shape="square" :size=200 > + <el-image + :src="'http://47.93.189.255:8080/'+ personInfos.url" + :fit="fit" + ></el-image> + </el-avatar> + </el-col> + </div> + </el-col> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 15px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="濮撳悕" prop="nickName" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.nickName" placeholder="璇疯緭鍏ュ鍚�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="韬唤" prop="identity" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.identity" placeholder="璇疯緭鍏ヨ韩浠�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鏇剧敤鍚�" prop="oldName" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.oldName" placeholder="璇疯緭鍏ユ浘鐢ㄥ悕" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鐢熻倴" prop="idNo" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.idNo" placeholder="璇疯緭鍏ョ敓鑲�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鏄熷骇" prop="grade" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.grade" placeholder="璇疯緭鍏ユ槦搴�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + + </el-row> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 15px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="鎬у埆" prop="sex" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.sex" placeholder="璇疯緭鍏ユ�у埆" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="姘戞棌" prop="nation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.nation" placeholder="璇疯緭鍏ユ皯鏃�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鑱旂郴鏂瑰紡" prop="phoneNumber" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.phoneNumber" placeholder="璇疯緭鍏ヨ仈绯绘柟寮�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="寰俊鍙�" prop="nationality" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.nationality" placeholder="璇疯緭鍏ュ井淇″彿" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鍗曚綅" prop="unit" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.unit" placeholder="璇疯緭鍏ュ崟浣�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + </el-row> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 15px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="濠氬Щ鐘跺喌" prop="sex" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.sex" placeholder="璇疯緭鍏ュ濮荤姸鍐�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="閰嶅伓" prop="spouseId" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.spouseId" placeholder="璇疯緭鍏ラ厤鍋�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鎴风睄鍦板潃" prop="locationAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.locationAddress" placeholder="璇疯緭鍏ユ埛绫嶅湴鍧�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="甯镐綇鍦板潃" prop="alwaysAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.alwaysAddress" placeholder="璇疯緭鍏ュ父浣忓湴鍧�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鑱屽姟鑱岀О" prop="position" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.position" placeholder="璇疯緭鍏ヨ亴鍔¤亴绉�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + </el-row> + </el-container> + </div> + </el-container> + <el-divider /> + <el-container> + <div style="padding-left:30px;padding-top: 10px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="濮撳悕" prop="nickName" label-width="50px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.nickName" placeholder="璇疯緭鍏ュ鍚�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="韬唤" prop="identity" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.identity" placeholder="璇疯緭鍏ヨ韩浠�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鏇剧敤鍚�" prop="oldName" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="personInfos.oldName" placeholder="璇疯緭鍏ユ浘鐢ㄥ悕" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鐢熻倴" prop="idNo" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.idNo" placeholder="璇疯緭鍏ョ敓鑲�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鏄熷骇" prop="grade" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.grade" placeholder="璇疯緭鍏ユ槦搴�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + + </el-row> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 10px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="鎬у埆" prop="sex" label-width="45px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.sex" placeholder="璇疯緭鍏ユ�у埆" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="姘戞棌" prop="nation" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.nation" placeholder="璇疯緭鍏ユ皯鏃�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鑱旂郴鏂瑰紡" prop="phoneNumber" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.phoneNumber" placeholder="璇疯緭鍏ヨ仈绯绘柟寮�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="寰俊鍙�" prop="nationality" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.nationality" placeholder="璇疯緭鍏ュ井淇″彿" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鍗曚綅" prop="unit" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.unit" placeholder="璇疯緭鍏ュ崟浣�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + </el-row> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 10px"> + <el-container> + <el-row> + <el-cow :span="8"> + <el-form-item label="濠氬Щ鐘跺喌" prop="sex" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.sex" placeholder="璇疯緭鍏ュ濮荤姸鍐�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="閰嶅伓" prop="spouseId" label-width="50px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.spouseId" placeholder="璇疯緭鍏ラ厤鍋�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鎴风睄鍦板潃" prop="locationAddress" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.locationAddress" placeholder="璇疯緭鍏ユ埛绫嶅湴鍧�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="甯镐綇鍦板潃" prop="alwaysAddress" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.alwaysAddress" placeholder="璇疯緭鍏ュ父浣忓湴鍧�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + <el-cow :span="8"> + <el-form-item label="鑱屽姟鑱岀О" prop="position" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;"> + <el-input v-model="formData.position" placeholder="璇疯緭鍏ヨ亴鍔¤亴绉�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + </el-cow> + </el-row> + </el-container> + </div> + <div style="padding-left:30px;padding-top: 45px"> + <el-container> + <el-col :span="6" :data="personInfos"> + <div class="block" :model="personInfos" > + <el-col v-model="personInfos.url" prop="url"> + <el-avatar shape="square" :size=200 > + <el-image + :src="'http://47.93.189.255:8080/'+ personInfos.url" + :fit="fit" + ></el-image> + </el-avatar> + </el-col> + </div> + </el-col> + </el-container> + </div> + </el-container> + </el-form> </div> </div> @@ -10,12 +264,103 @@ <script> import {getRoot} from "@/api/root/index"; +import {listExperience} from "@/api/self"; export default { name: "index", data(){ return{ - personInfos:[] - } + // 閬僵灞� + disabled: false, + personInfos:[], + loading: true, + formData:{ + 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 + }, + // 鑿滃崟鍒楄〃 + menuOptions: [], + // 閮ㄩ棬鍒楄〃 + deptOptions: [], + // 琛ㄥ崟鍙傛暟 + form: {}, + defaultProps: { + children: "children", + label: "label" + }, + // 琛ㄥ崟鏍¢獙 + rules: { + createTime: [{ + required: true, + message: '璇疯緭鍏ュ垱寤烘椂闂�', + trigger: 'blur' + }], + type: [{ + required: true, + message: '璇疯緭鍏ョ被鍨�', + trigger: 'blur' + }], + name: [{ + required: true, + message: '璇疯緭鍏ュ悕绉�', + trigger: 'blur' + }], + grade: [{ + required: true, + message: '璇疯緭鍏ョ骇鍒�', + trigger: 'blur' + }], + idNo: [{ + required: true, + message: '璇疯緭鍏ヨ瘉浠跺彿/涓撲笟', + trigger: 'blur' + }], + validityDate: [{ + // required: true, + message: '璇疯緭鍏ユ湁鏁堟椂闂�', + trigger: 'blur' + }], + getDate: [{ + // required: true, + message: '璇疯緭鍏ヨ幏寰楁椂闂�', + trigger: 'blur' + }], + location: [{ + // required: true, + message: '璇疯緭鍏ュ瓨鏀句綅缃�', + trigger: 'blur' + }], + remark: [{ + // required: true, + message: '璇疯緭鍏ュ娉�', + trigger: 'blur' + }], + }, + } } , mounted() { @@ -30,7 +375,8 @@ console.log(response.data) //杩欓噷鏄か濡荤殑淇℃伅锛屽凡缁忔嬁鍒颁簡 this.personInfos = response.data - }) + }); + } }, } @@ -42,11 +388,27 @@ background: url("../../assets/images/Group 407.png"); width: 100%; height: 100%; - position: fixed; - background-size: 100% 100%; + background-size: 100%; + background-position: top left; + background-repeat: no-repeat; } #building { /*璁剧疆閫忔槑搴�*/ - opacity: 0.75; + /*opacity: 0.9;*/ + background: rgba(255,255,255,0.8); + /*overflow-y:auto;*/ +} +.app-container{ + background-color: #FEF7FC; + +} +.el-divider { + /*display: inline-block;*/ + weight: 1px; + height: 1px; + background: 0 0; + background-color: rgba(0,0,0,0.3); + margin: 2px 0px; + position: relative; } </style> -- Gitblit v1.9.1