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