修改了对应的样式

feige

2024-11-26 a2c92276402a4c5ad6373928986e040cf1a87483

 ruoyi-ui/src/views/homeRoot/personInfo.vue

@@ -1,278 +1,206 @@
<template>
  <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="center" label-width="100px">
      <div id="building" v-if="isshow">
          <el-form  ref="elForm" :model="personInfos" :rules="rules" size="medium" label-position="center" 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[0].url" prop="url">
                        <el-avatar shape="square" :size=200 >
                          <el-image
                            :src="'http://47.93.189.255:8080/'+ personInfos[0].url"
                            :fit="fit"
                            :src="'https://www.bendudu.com:8080/'+personInfos[0].url"
                            style="width: 100%;height: 100%;"
                          ></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-col>
                    <el-row :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[0].nickName" placeholder="请输入姓名" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :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[0].identity" placeholder="请输入身份" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :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[0].oldName" placeholder="请输入曾用名" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :span="8">
                      <el-form-item label="生肖" prop="shengXiao" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[0].shengXiao" placeholder="请输入生肖" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                      <el-form-item label="星座" prop="constellation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[0].constellation" placeholder="请输入星座" clearable :style="{width: '100%'}" :disabled="dsb">
                    </el-row>

                    <el-row :span="8">
                      <el-form-item label="户籍地址" prop="locationAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input type="textarea" v-model="personInfos[0].locationAddress" placeholder="请输入户籍地址" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>

                  </el-row>
                </el-container>
                    </el-row>
                  </el-col>
              </div>
              <div style="padding-left:30px;padding-top: 15px">
                <el-container>
                  <el-row>
                    <el-cow :span="8">
                  <el-col>
                    <el-row :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="personInfos[0].sex === 1 ? '男':'女'" placeholder="请输入性别" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                        <el-input v-model="personInfos[0].sex === 0 ? '男':'女'" placeholder="请输入性别" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :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="personInfos[0].nation" placeholder="请输入民族" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :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="personInfos[0].phoneNumber" placeholder="请输入联系方式" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :span="8">
                      <el-form-item label="微信号" prop="wxNo" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[0].wxNo" 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="personInfos[0].unit" placeholder="请输入单位" clearable :style="{width: '100%'}" :disabled="dsb">
                    </el-row>
    <el-row :span="8">
                      <el-form-item label="常住地址" prop="alwaysAddress" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input type="textarea" v-model="personInfos[0].alwaysAddress" placeholder="请输入常住地址" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                  </el-row>
                </el-container>
                    </el-row>
                  </el-col>
              </div>
              <div style="padding-left:30px;padding-top: 15px">
                <el-container>
                  <el-row>
                    <el-cow :span="8">
                  <el-col>
                    <el-row :span="8">
                      <el-form-item label="婚姻状况" prop="maritalStatus" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[0].maritalStatus === 1 ? '已婚':'未婚'" placeholder="请输入婚姻状况" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>
                    <el-row :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[1].nickName" placeholder="请输入配偶" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                        <el-input v-if="personInfos[1]!=null" v-model="personInfos[1].nickName" placeholder="请输入配偶" clearable :style="{width: '100%'}" :disabled="dsb">
                         <template slot="suffix">
         <a @click="handleCheck(personInfos[1].userId)" class="aft">查看详情</a>
                            </template>
                  </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="personInfos[0].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="personInfos[0].alwaysAddress" placeholder="请输入常住地址" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                    </el-row>


                    <el-row :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="personInfos[0].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[1].nickName" placeholder="请输入姓名" clearable :style="{width: '100%'}" :disabled="dsb">
                    </el-row>
                    <el-row :span="8">
                      <el-form-item label="星座" prop="constellation" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[0].constellation" 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[1].identity" placeholder="请输入身份" clearable :style="{width: '100%'}" :disabled="dsb">
                    </el-row>
                    <el-row :span="8">
                      <el-form-item label="单位" prop="unit" label-width="68px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input type="textarea" v-model="personInfos[0].unit" 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[1].oldName" placeholder="请输入曾用名" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                      <el-form-item label="生肖" prop="shengXiao" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[1].shengXiao" placeholder="请输入生肖" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                      <el-form-item label="星座" prop="constellation" label-width="50px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[1].constellation" 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="personInfos[1].sex=== 1 ? '男':'女'" 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="personInfos[1].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="personInfos[1].phoneNumber" placeholder="请输入联系方式" clearable :style="{width: '100%'}" :disabled="dsb">
                        </el-input>
                      </el-form-item>
                    </el-cow>
                    <el-cow :span="8">
                      <el-form-item label="微信号" prop="wxNo" label-width="68px" style="background: #D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[1].wxNo" 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="personInfos[1].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="maritalStatus" label-width="68px" style="background:#D8E6F5;border-radius: 7px 7px 7px 7px;opacity: 1;">
                        <el-input v-model="personInfos[1].maritalStatus === 1 ? '已婚':'未婚'" placeholder="请输入婚姻状况" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                      </el-form-item>
                    </el-cow>
                    <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[0].nickName" 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="personInfos[1].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="personInfos[1].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="personInfos[1].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[1].url" prop="url">
                        <el-avatar shape="square" :size=200 >
                          <el-image
                            :src="'http://47.93.189.255:8080/'+ personInfos[1].url"
                            :fit="fit"
                          ></el-image>
                        </el-avatar>
                      </el-col>
                    </div>
                    </el-row>
                  </el-col>
                </el-container>
              </div>
            </el-container>
	
            <el-divider />
         <div>
           <el-tabs type="border-card"
              >
		
							 
			   
            <div style="margin-bottom: 20px;"  v-if="cid==uid">
            <el-button size='mini' type="text" class="btn_edit" @click="editAutography" style='top: 0px; bottom:20px;right: 20px;'>
              <sapn v-if="cid==uid" v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
              <span v-if="cid==uid">{{ editMode ? this.bstn='保存' : this.bstn='修改' }}</span>
            </el-button>
            </div>
            <el-tab-pane
                         label="个人简介">
              <template v-if="editMode">
            <div style="padding-top: 20px;margin-top: 10px;width: 90%;">
               <el-input  v-model="autoGrahpy"  autosize type="textarea"     maxlength="1024"
></el-input></div>
            </template>
            <template v-else>
            {{autoGrahpy}}
            </template>
             </el-tab-pane>
           </el-tabs></div>
          </el-form>

      </div>
<el-divider style="top:120px;"/>


    </div>
   <div>
         <el-row>
             <el-col :span="11" class="bordered-col">
               <div class="left-content">我的分享</div>
               <el-divider />
              <el-card class="box-card">
                <div v-for="o in 4" :key="o" class="text item">
                  <a href="www.baidu.com">{{'列表内容 ' + o }}</a>
                </div>
              </el-card>
             </el-col>
             <el-col :span="11"  class="bordered-col">
               <div class="left-content">我的收藏</div>
              <el-divider />
              <el-card class="box-card">
                <div v-for="o in 4" :key="o" class="text item">
                  {{'列表内容 ' + o }}
                </div>
              </el-card>
             </el-col>
           </el-row>
   </div>
  </div>
</template>

<script>
import {getRoot} from "@/api/root/index";
import {listExperience} from "@/api/self";
import {getRoot,updateInfoUser} from "@/api/root/index";
  export default {
    name: "index",
    name: "personInfo",
    data(){
      return{
        cid: undefined,
        uid: undefined,
        bstn: undefined,
        editMode:false,
        autoGrahpy: "姓名__________，性别__________，出生于____年__月__日。我毕业于__________大学的__________专业，获得__________学历。目前就职于__________的__________职位，主要负责__________，通过运用__________技能/方法，成功实现了__________，不仅提升了个人专业能力，也促进了团队与项目的成功。在业余时间，我热衷于__________（如阅读、旅行、摄影等）作为我的兴趣爱好，这些活动不仅丰富了我的生活，也让我在放松的同时不断学习和成长。回顾过往，最令我难忘的一件事是__________（简述事件，如参与的一次重大项目、一次难忘的旅行经历或解决某个难题的过程），这件事不仅让我深刻体会到了__________（如团队合作的力量、坚持不懈的重要性、生活的美好等），也对我的人生观和价值观产生了深远的影响。我具备__________等特质，能够快速适应新环境，勇于挑战，致力于在__________领域中不断追求卓越",
        // 遮罩层
		
        disabled: false,
        personInfos:[],
        personInfos:{},
        personInfo1:{},
        loading: true,
        dsb:true,
        isshow:true,
        formData:{
          userId: undefined,
          nickName: undefined,
@@ -318,67 +246,62 @@
        },
        // 表单校验
        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() {
        const id = this.$route.params && this.$route.params.id;
     const id = this.$route.params && this.$route.params.id;
    this.uid = id; 
     this.getList(id);
  },
  methods:{
     /** 查看详细信息 */
     handleCheck(id){
       // const id = row.userId;
      //alert(id)
       // alert(id)
   //   alert(23)
this.$store.dispatch("tagsView/delView", this.$route); //关闭当前页
      this.$router.replace({ path: "/familymodel/jiagenwang/personInfo/" + id });

    //  this.$router.push("/familymodel/jiagenwang/personInfo/" + id);
     },
	  
     editAutography(data)
     {
        this.editMode = true;
        if(this.bstn=="保存")
        {
			
            this.editMode = false
           var fdt = {
             selfIntroduction: this.autoGrahpy}
             updateInfoUser(fdt).then(response=>{
               this.$modal.msgSuccess("修改成功")
               this.getList(this.uid)
            })
        }
     },
	  
    getList(id)
    {
    //  alert(id)
      this.cid = this.$store.state.user.userId
		
     let _this = this;
      getRoot(id).then(response => {
        console.log(response.data)
         console.log(response.data)
       console.log("-----")
        //这里是夫妻的信息，已经拿到了
        this.personInfos = response.data
        _this.personInfos = response.data
      //  if(_this.personInfos[1]==null)
        //  _this.isshow = false;
        _this.personInfo1 = response.data[0]
      if(response.data[0].selfIntroduction!=null)
      _this.autoGrahpy = response.data[0].selfIntroduction
        //alert(this.personInfos[0].url)

    });

    }
@@ -396,7 +319,7 @@
  background-position: top left;
  background-repeat: no-repeat;
}
#building {
#building building2{
  /*设置透明度*/
  /*opacity: 0.9;*/
  background: rgba(255,255,255,0.8);
@@ -415,4 +338,50 @@
  margin: 2px 0px;
  position: relative;
}
.centered-label .el-form-item__content{
    line-height: 38px;
    padding: 0px;
    margin-left: 50%;
    border: 1px solid red;
    text-align: center;
}
.btn_edit{
  background:center no-repeat url('../../assets/icons/edit.png') ;
   float: right;
  padding-right: 90px;
}
.bordered-col {
  border: 1px solid #d3dce6; /* 设置边框样式 */
  border-radius: 4px; /* 可选：设置圆角 */
  padding: 10px; /* 内边距 */
  margin-right: 20px;
}
.btn_del{
  background:center no-repeat url('../../assets/images/删除2.png') ;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .text {
      font-size: 14px;
    }
  
    .item {
      padding: 18px 0;
    }
  
    .box-card {
      width:100%;
    }
   .aft{
      cursor: pointer;
      color: red; 
      font-weight: bold;
   }
</style>