From bcac500a760877dc9140f1f381739793706c1af6 Mon Sep 17 00:00:00 2001
From: feige <feige@qq.com>
Date: 星期五, 10 十一月 2023 10:29:38 +0800
Subject: [PATCH] 修改图片大小

---
 ruoyi-ui/src/views/self/show.vue |  590 ++++++++++++++++++++++++++++++++++++++--------------------
 1 files changed, 385 insertions(+), 205 deletions(-)

diff --git a/ruoyi-ui/src/views/self/show.vue b/ruoyi-ui/src/views/self/show.vue
index 1b1e0c2..e9a7273 100644
--- a/ruoyi-ui/src/views/self/show.vue
+++ b/ruoyi-ui/src/views/self/show.vue
@@ -1,16 +1,47 @@
 <template>
-  <div class="app-container">
+  <div class="app-container" id="printable-content">
+    <!--  鍒锋柊椤甸潰  -->
+<!--    <MyComponent :key="componentKey" />-->
     <!--    鍥炲埌椤堕儴-->
     <el-backtop :bottom="150" :right="30">
       <el-button type="primary" circle
                  class="el-icon-top"
       ></el-button>
     </el-backtop>
-    <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;">
+    <h1 style="font-size:21px;padding-top:30px;display: flex;">
       <span>涓汉绠�鍘�</span>
+      <div class="button-container" >
+          <el-button
+            size="mini"
+            style="background: #E0EEFE;
+            border-radius: 7px 7px 7px 7px;opacity: 1; margin-left: 20px;"
+            @click="handleEdit()"
+            v-if="isShow"
+            v-hasPermi="['system:role:edit']"
+          >缂栬緫</el-button>
+          <el-button v-if="isShow_2" size="mini"
+                     style=" width: 67px;height: 27px;background:#E0EEFE;
+            border-radius: 7px 7px 7px 7px;opacity: 1;margin-left: 20px; "@click="submitForm" :disabled="dsb">瀹屾垚</el-button>
+
+          <el-button
+            size="mini"
+            style=" width: 67px;height: 27px;background: #D2F3E0;
+            border-radius: 7px 7px 7px 7px;opacity: 1;margin-left: 20px; "
+            @click="handleExport"
+            v-hasPermi="['family:note:export']"
+          >瀵煎嚭</el-button>
+
+          <el-button
+            size="mini"
+            style=" width: 67px;height: 27px;background: #FFDDE3;
+            border-radius: 7px 7px 7px 7px;opacity: 1; margin-left: 20px;"
+            v-print="'#printable-content'"
+            v-hasPermi="['family:note:export']"
+          >鎵撳嵃</el-button>
+      </div>
       <div   style="display: flex; align-items: center;">
-        <el-button size="mini" type="text" @click="toMemo" v-hasPermi="['person:information:memo']">
-          <div class="form" ><el-icon  style="padding-right:110px;"></el-icon>
+        <el-button size="mini" type="text" @click="toMemo" v-hasPermi="['person:information:memo']" style="margin-left: 20px">
+          <div class="form" ><el-icon  style="padding-right:100px;"></el-icon>
           <span class="text" style="width: 69px;height: 26px;font-size: 16px;
             font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">涓汉璁颁簨鏈�</span></div>
         </el-button>
@@ -25,19 +56,19 @@
           <el-col >
             <el-form ref="elForm" :model="individualList" :rules="rules" size="medium"  label-position="left"
                      v-loading="loading" :data="individualList" @selection-change="handleSelectionChange" >
-              <el-row :span="5">
+              <el-row :span="6">
                 <el-form-item label="濮撳悕" prop="nickName" label-width="40px">
                   <el-input v-model="individualList.nickName" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">
                   </el-input>
                 </el-form-item>
               </el-row>
-              <el-row :span="5">
+              <el-row :span="6">
                 <el-form-item label="鏇剧敤鍚�" prop="oldName" label-width="60px">
                   <el-input v-model="individualList.oldName" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">
                   </el-input>
                 </el-form-item>
               </el-row>
-              <el-row :span="5">
+              <el-row :span="6">
                 <el-form-item label="韬唤璇佸彿" prop="idNum" label-width="70px">
                   <el-input v-model="individualList.idNum" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">
                   </el-input>
@@ -47,7 +78,7 @@
           </el-col>
         </el-container>
       </div>
-      <div style="padding-left:30px">
+      <div style="padding-left:60px">
         <el-container>
           <el-col v-loading="loading" :data="individualList" @selection-change="handleSelectionChange">
             <el-form ref="elForm" :model="individualList" :rules="rules" size="medium"  label-position="left">
@@ -56,12 +87,12 @@
 <!--                  <el-input v-model="individualList.sex === 1 ? '鐢�':'濂�' " placeholder="" clearable :style="{width: '100%'}" :disabled="dsb">-->
 <!--                  </el-input>-->
                   <template v-if="!isEditing">
-                    <el-input v-model="individualList.sex === 1 ? '鐢�':'濂�'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
+                    <el-input v-model="individualList.sex === 1 ? inds='鐢�':inds='濂�'" placeholder="" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
                   </template>
                   <template v-else>
-                    <el-select v-model="individualList.sex" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}">
-                      <el-option label="鐢�" value="1"></el-option>
-                      <el-option label="濂�" value="0"></el-option>
+                    <el-select v-model="inds" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}" :disabled="dsb">
+                      <el-option label="鐢�" value='1'></el-option>
+                      <el-option label="濂�" value='0'></el-option>
                     </el-select>
                   </template>
                 </el-form-item>
@@ -82,7 +113,7 @@
           </el-col>
         </el-container>
       </div>
-      <div style="padding-left:30px">
+      <div style="padding-left:60px">
         <el-container>
           <el-col v-loading="loading" :data="individualList" @selection-change="handleSelectionChange">
             <el-form ref="elForm" :model="individualList" :rules="rules" size="medium"  label-position="left":disabled="dsb">
@@ -97,13 +128,14 @@
                   <template v-if="!isEditing" >
                     <el-input v-if="individualList.maritalStatus===0" placeholder="鏈"></el-input>
                     <el-input v-if="individualList.maritalStatus===1" placeholder="宸插"></el-input>
-                    <el-input v-if="individualList.maritalStatus===2" placeholder="绂诲"></el-input>
+                    <el-input v-if="individualList.maritalStatus===2" placeholder="鏈"></el-input>
+
                   </template>
                   <template v-else>
-                    <el-select v-model="individualList.maritalStatus" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}">
-                      <el-option label="鏈" value="0"></el-option>
-                      <el-option label="宸插" value="1"></el-option>
-                      <el-option label="绂诲" value="2"></el-option>
+                    <el-select v-model="mrs" placeholder="璇烽�夋嫨鎬у埆" clearable :style="{width: '100%'}">
+                      <el-option label="鏈" value='0'></el-option>
+                      <el-option label="宸插" value='1'></el-option>
+                      <el-option label="绂诲" value='2'></el-option>
                     </el-select>
                   </template>
                 </el-form-item>
@@ -113,67 +145,58 @@
           </el-col>
         </el-container>
       </div>
-      <div style="padding-left:30px;padding-top:30px">
+      <div style="padding-left:100px;padding-top:30px">
         <el-col :span="6" :data="individualList">
-          <div class="block" :model="individualList" >
-            <el-col v-model="individualList.img" prop="img">
-              <el-avatar shape="square" style="width: 200px;height: 150px;" >
+          <div class="block" :model="individualList">
+            <div v-if="!isEditing">
+              <el-avatar shape="square" style="width: 200px; height: 150px;">
                 <el-image
-                  :src="'http://47.93.189.255:8080/'+ individualList.img"
+                  class="el-upload-list__item-thumbnail"
+                  v-if="!individualList.img"
+                  src="default-avatar-url"
                   :fit="fit"
-                  style="width: 100%;height: 100%;"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+                <el-image
+                  v-else
+                  :src="'http://47.93.189.255:8080/' + individualList.img"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
                 ></el-image>
               </el-avatar>
-<!--              <el-upload-->
-<!--                action="#"-->
-<!--                list-type="picture-card"-->
-<!--                multiple-->
-<!--                :http-request="requestUpload"-->
-<!--                :file-list="fileList"-->
-<!--              >-->
-<!--                <i slot="default" class="el-icon-plus"></i>-->
-<!--                <div slot="file" slot-scope="{file}">-->
-<!--                  <img-->
-<!--                    class="el-upload-list__item-thumbnail"-->
-<!--                    :src="file.url"-->
-<!--                    alt=""-->
-<!--                    style="width: 147px; height: 147px"-->
-<!--                    fit="cover"-->
-<!--                    :preview-src-list="[file.url]"-->
-<!--                  >-->
-<!--                </div>-->
-<!--              </el-upload>-->
-         </el-col>
+            </div>
+            <el-upload v-else
+                       class="upload-demo"
+                       action="#"
+                       :auto-upload="false"
+                       :http-request="requestUpload"
+                       :limit="1"
+                       :file-list="fileList"
+            >
+              <el-avatar shape="square" style="width: 200px; height: 150px;">
+                <el-image
+                  class="el-upload-list__item-thumbnail"
+                  v-if="!individualList.img"
+                  src="default-avatar-url"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+                <el-image
+                  v-else
+                  :src="'http://47.93.189.255:8080/' + individualList.img"
+                  :fit="fit"
+                  style="width: 100%; height: 100%;"
+                ></el-image>
+              </el-avatar>
+            </el-upload>
+            <div class="edit-text" v-if="isEditing" @click="uploadImage">鐐瑰嚮鏇存崲鍥剧墖</div>
           </div>
-
         </el-col>
 
       </div>
 
       <div style="padding-left:30px;padding-top:30px" >
-        <el-container >
-          <el-row  >
-            <el-button
-              type="primary"
-              @click="handleEdit()"
-              v-if="isShow"
-              v-hasPermi="['system:role:edit']"
-            >缂栬緫</el-button>
-            <el-button v-if="isShow_2" type="primary" @click="submitForm" :disabled="dsb">瀹屾垚</el-button>
-            <br>
-            <el-button
-              type="primary"
-              @click="handleExport"
-              v-hasPermi="['family:note:export']"
-            >瀵煎嚭</el-button>
-            <br>
-            <el-button
-              type="primary"
-              v-hasPermi="['family:note:export']"
-            >鎵撳嵃</el-button>
-          </el-row>
 
-        </el-container>
       </div>
       <!--      </el-dialog> self:user:export-->
     </el-container>
@@ -205,7 +228,7 @@
           </el-col>
         </el-container>
       </div>
-      <div style="padding-left:30px">
+      <div style="padding-left:60px">
         <el-container>
           <el-col v-loading="loading" :data="individualList" @selection-change="handleSelectionChange">
             <el-form ref="elForm" :model="individualList" :rules="rules" size="medium"  label-position="left">
@@ -239,7 +262,7 @@
       <div>
         <el-form v-loading="loading" :data="individualList" @selection-change="handleSelectionChange">
           <el-form-item label="鏄惁鎷ユ湁澶栫睄銆佸澶栧眳鐣欐潈銆侀暱鏈熷眳鐣欒鍙�" >
-            <el-radio-group v-model="individualList.outStatus" style="margin-bottom: 0;color: #FEF7FC;">
+            <el-radio-group v-model="individualList.outStatus" style="margin-bottom: 0;color: #FEF7FC;" :disabled="dsb">
               <el-radio :label="1">鏄�</el-radio>
               <el-radio :label="0">鍚�</el-radio>
             </el-radio-group>
@@ -264,9 +287,9 @@
       <el-collapse-item name="1"  >
         <template v-slot:title>
           <div class="title-wrapper">
-            涓昏瀛︿範鍙婂伐浣滅粡鍘�
+            <div class="left-content">涓昏瀛︿範鍙婂伐浣滅粡鍘�</div>
             <div>
-            <el-button class="button" size="mini" type="text"  @click="showDialog('open')">
+            <el-button class="button" size="mini" type="text"  @click="showDialog('open')" >
               <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
             </div>
           </div>
@@ -275,13 +298,18 @@
           <el-table-column label="寮�濮嬫棩鏈�" prop="startDate" sortable width="250" align="center" >
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startDate }}</template>
-              <template v-else><el-input v-model="scope.row.startDate"></el-input></template>
+              <template v-else>
+                <el-date-picker v-model="scope.row.startDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                    :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+              ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃ユ湡" prop="endDate" sortable width="250" align="center" >
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endDate }}</template>
-              <template v-else><el-input v-model="scope.row.endDate"></el-input></template>
+              <template v-else><el-date-picker v-model="scope.row.endDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                     :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+              ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content" sortable width="350" align="center" >
@@ -313,10 +341,11 @@
       <el-collapse-item name="2" >
         <template v-slot:title>
           <div class="title-wrapper">
-            瀹跺涵鎴愬憳鍙婁富瑕佺ぞ浼氬叧绯绘儏鍐�
+            <div class="left-content">瀹跺涵鎴愬憳鍙婁富瑕佺ぞ浼氬叧绯绘儏鍐�</div>
             <div>
-            <el-button class="button2" size="mini" type="text"  @click="showDialog('relation1')">
-              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button></div>
+            <el-button class="button" size="mini" type="text"  @click="showDialog('relation1')">
+              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
+            </div>
           </div>
         </template>
         <el-table v-loading="loading" :data="relationList" @selection-change="handleSelectionChange"
@@ -367,8 +396,8 @@
       <el-collapse-item  name="4">
         <template v-slot:title>
           <div class="title-wrapper">
-            鎸佹湁鍑哄叆澧冭瘉浠舵儏鍐�
-            <el-button class="button4" size="mini" type="text"  @click="showDialog('certificate')">
+            <div class="left-content">鎸佹湁璇佷欢鎯呭喌</div>
+            <el-button class="button" size="mini" type="text"  @click="showDialog('certificate')">
               <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
           </div>
         </template>
@@ -401,13 +430,19 @@
           <el-table-column label="寮�濮嬫椂闂�" prop="startTime"  sortable width="230" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
-              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
+              <template v-else>
+                <el-date-picker v-model="scope.row.startTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                    :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+              ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃堕棿" prop="endTime"  sortable width="230" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
-              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
+              <template v-else>
+                <el-date-picker v-model="scope.row.endTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                      :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+              ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width">
@@ -426,8 +461,8 @@
       <el-collapse-item  name="5">
         <template v-slot:title>
           <div class="title-wrapper">
-            鍑哄浗锛堝锛夋儏鍐�
-            <el-button class="button5" size="mini" type="text"  @click="showDialog('abroad')">
+            <div class="left-content">鍑哄浗锛堝锛夋儏鍐�</div>
+            <el-button class="button" size="mini" type="text"  @click="showDialog('abroad')">
               <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn></el-button>
           </div>
         </template>
@@ -436,13 +471,19 @@
           <el-table-column label="寮�濮嬫椂闂�" prop="startTime"  sortable width="200" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.startTime }}</template>
-              <template v-else><el-input v-model="scope.row.startTime"></el-input></template>
+              <template v-else>
+                <el-date-picker v-model="scope.row.startTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                                :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+                ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="缁撴潫鏃堕棿" prop="endTime"  sortable width="200" align="center">
             <template slot-scope="scope">
               <template v-if="!scope.row.isEdit">{{ scope.row.endTime }}</template>
-              <template v-else><el-input v-model="scope.row.endTime"></el-input></template>
+              <template v-else>
+                <el-date-picker v-model="scope.row.endTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                                :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+                ></el-date-picker></template>
             </template>
           </el-table-column>
           <el-table-column label="鎵�鍒板浗瀹舵垨鑰呭湴鍖�" prop="destination" sortable width="300" align="center" >
@@ -469,39 +510,42 @@
           </el-table-column>
         </el-table>
       </el-collapse-item>
+      <!--    鑷紶-->
+      <el-collapse-item  name="6">
+        <template v-slot:title>
+          <div class="title-wrapper">
+            <div class="left-content">鑷紶</div>
+            <div>
+              <el-button size='mini' type="text" class="button" @click="showDialog('autobiography')" >
+                <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
+              </el-button>
+            </div>
+          </div>
+        </template>
+        <el-contain>
+          <div>
+            <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"
+                     v-loading="loading" :data="AutobiographyList" >
+              <el-tab-pane v-for="(item, index) in AutobiographyList"
+                           :key='item.id' :label="item.ageBegin+'~'+item.ageEnd+'宀�'+'('+item.term+')'">
+                <div>{{ item.content }}</div>
+                <el-button size='mini' type="text" class="btn_edit" @click="editAutobiography(item)" style='position: absolute;right:40px;top:5px;'>
+                  <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
+                </el-button>
+
+                <el-button size="mini" type="text" class="btn_del" @click="handleAutobiography(item)" style='position: absolute;right:10px;top:5px;'>
+                  <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
+                </el-button>
+
+              </el-tab-pane>
+            </el-tabs></div>
+        </el-contain>
+      </el-collapse-item>
+
     </el-collapse>
 
-    <!--    鑷紶-->
-    <div style="padding-top:30px">
-      <el-container>
-        <div style="width:100%"><h2 style="font-size:15px" >鑷紶</h2></div>
-      </el-container>
-      <div style='position: relative;'>
-        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"
-                 v-loading="loading" :data="AutobiographyList" >
-          <el-tab-pane v-for="(item, index) in AutobiographyList"
-                       :key='item.id' :label="item.ageBegin+'~'+item.ageEnd+'宀�'+'('+item.term+')'">
-            <div v-if="item.term === '濠村効'"> {{item.content}}</div>
-            <div v-if="item.term === '骞煎効'"> {{item.content}}</div>
-            <div v-if="item.term === '灏忓'"> {{item.content}}</div>
-            <div v-if="item.term === '鍒濅腑'"> {{item.content}}</div>
-            <div v-if="item.term === '楂樹腑'"> {{item.content}}</div>
-            <div v-if="item.term === '澶у'"> {{item.content}}</div>
-            <div v-if="item.term === '鐮旂┒鐢�'"> {{item.content}}</div>
-            <div v-if="item.term === '宸ヤ綔'"> {{item.content}}</div>
-            <div v-if="item.term === '缁撳鍚�'"> {{item.content}}</div>
-            <el-button size='mini' type="text" class="btn_edit" @click="editData(item)" style='position: absolute;right:10px;top:5px;'>
-              <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
-            </el-button>
-          </el-tab-pane>
-        </el-tabs>
 
-        <el-button size='mini' type="text" class="btn_autobiography" @click="showDialog('autobiography')" style='position: absolute;right:10px;top:5px;'>
-          <sapn v-html="'\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'"></sapn>
-        </el-button>
-      </div>
 
-    </div>
 
     <pagination
       v-show="total>0"
@@ -512,13 +556,17 @@
     />
 
     <!-- 鏂板涓昏缁忓巻淇℃伅閰嶇疆瀵硅瘽妗� -->
-    <el-dialog :title="title" :visible.sync="dialogVisible.open" width="900px" append-to-body>
+    <el-dialog title="鏂板涓昏缁忓巻淇℃伅" :visible.sync="dialogVisible.open" width="900px" append-to-body>
       <el-form ref="elForm1" :model="formDat" :rules="rules" size="medium" label-width="140px">
         <el-form-item label="寮�濮嬫棩鏈�" prop="startDate">
-          <el-input v-model="formDat.startDate" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input>
+          <el-date-picker v-model="formDat.startDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                          :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item label="缁撴潫鏃ユ湡" prop="endDate">
-          <el-input v-model="formDat.endDate" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input>
+          <el-date-picker v-model="formDat.endDate" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                          :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item label="涓昏瀛︿範缁忓巻銆佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" prop="content">
           <el-input v-model="formDat.content" type="textarea" :rows="5" placeholder="璇疯緭鍏ヤ富瑕佸涔犵粡鍘嗐�佸伐浣滃崟浣嶅強浠昏亴鎯呭喌" clearable :style="{width: '100%'}" >
@@ -538,7 +586,7 @@
       </div>
     </el-dialog>
     <!-- 鏂板瀹跺涵鎴愬憳鍙婁富瑕佺ぞ浼氬叧绯绘儏鍐典俊鎭厤缃璇濇 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible.relation1" width="900px" append-to-body>
+    <el-dialog title="鏂板瀹跺涵鎴愬憳鍙婁富瑕佺ぞ浼氬叧绯绘儏鍐�" :visible.sync="dialogVisible.relation1" width="900px" append-to-body>
       <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="140px">
         <el-form-item label="涓庢湰浜哄叧绯�" prop="relation">
           <el-input v-model="formDat.relation" placeholder="璇疯緭鍏ヤ笌鏈汉鍏崇郴" clearable :style="{width: '100%'}" ></el-input>
@@ -568,18 +616,20 @@
         <el-button @click="cancelData">鍙� 娑�</el-button>
       </div>
     </el-dialog>
-    <!-- 鏂板鎸佹湁鍑哄叆澧冭瘉浠舵儏鍐典俊鎭厤缃璇濇 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible.certificate" width="900px" append-to-body>
+    <!-- 鏂板鎸佹湁璇佷欢鎯呭喌淇℃伅閰嶇疆瀵硅瘽妗� -->
+    <el-dialog title="鏂板鎸佹湁璇佷欢鎯呭喌" :visible.sync="dialogVisible.certificate" width="900px" append-to-body>
       <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="140px">
         <el-form-item label="璇佷欢鍚嶇О" prop="cerName">
           <el-input v-model="formDat.cerName" placeholder="璇疯緭鍏ヨ瘉浠跺悕绉�" clearable :style="{width: '100%'}" >
           </el-input>
         </el-form-item>
         <el-form-item label="璇佷欢绫诲瀷" prop="type">
-          <el-select v-model="formDat.type" placeholder="璇烽�夋嫨绫诲瀷" clearable :style="{width: '100%'}"  >
+          <el-select v-model="formDat.type" placeholder="璇烽�夋嫨璇佷欢绫诲瀷" clearable :style="{width: '100%'}"  >
             <el-option v-for="(item, index) in typeOption" :key="index" :label="item.label" :value="item.value"
             ></el-option>
           </el-select>
+          <el-input v-model="newOption" v-if="showInput" placeholder="鑻ユ湭鍦ㄤ笂杩伴�夐」涓壘鍒板搴旂被鍨嬶紝璇峰湪姝よ緭鍏ユ柊鐨勮瘉浠剁被鍨�" @change="addNewOption"></el-input>
+
         </el-form-item>
         <el-form-item label="鎸佹湁鎯呭喌" prop="ownStatus">
           <el-input v-model="formDat.ownStatus" placeholder="璇疯緭鍏ユ寔鏈夋儏鍐�" clearable :style="{width: '100%'}" >
@@ -590,11 +640,14 @@
           </el-input>
         </el-form-item>
         <el-form-item label="寮�濮嬫棩鏈�" prop="startTime">
-          <el-input v-model="formDat.startTime" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input>
-        </el-form-item>
+            <el-date-picker v-model="formDat.startTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                            :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+            ></el-date-picker>
+         </el-form-item>
         <el-form-item label="缁撴潫鏃ユ湡" prop="endTime">
-          <el-input v-model="formDat.endTime" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input>
-        </el-form-item>
+          <el-date-picker v-model="formDat.endTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                          :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+          ></el-date-picker></el-form-item>
          </el-form>
       <h4 class="form-header"> </h4>
 
@@ -604,14 +657,16 @@
       </div>
     </el-dialog>
     <!-- 鏂板鍑哄浗锛堝锛夋儏鍐典俊鎭厤缃璇濇 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible.abroad" width="900px" append-to-body>
+    <el-dialog title="鏂板鍑哄浗锛堝锛夋儏鍐典俊鎭�" :visible.sync="dialogVisible.abroad" width="900px" append-to-body>
       <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-width="140px">
         <el-form-item label="寮�濮嬫棩鏈�" prop="startTime">
-          <el-input v-model="formDat.startTime" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" ></el-input>
-        </el-form-item>
+          <el-date-picker v-model="formDat.startTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                          :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+          ></el-date-picker></el-form-item>
         <el-form-item label="缁撴潫鏃ユ湡" prop="endTime">
-          <el-input v-model="formDat.endTime" type='date' placeholder='閫夋嫨鏃ユ湡' clearable :style="{width: '100%'}" >
-          </el-input>
+          <el-date-picker v-model="formDat.endTime" type="date" placeholder="璇烽�夋嫨鏃ユ湡"
+                          :editable="false" :clearable="false" :style="{width: '100%'}"  value-format="yyyy-MM-dd"
+          ></el-date-picker>
         </el-form-item>
         <el-form-item label="鎵�鍒板浗瀹舵垨鑰呭湴鍖�" prop="destination">
           <el-input v-model="formDat.destination" type="textarea" :rows="5" placeholder="璇疯緭鍏ユ墍鍒板浗瀹舵垨鑰呭湴鍖�" clearable :style="{width: '100%'}" >
@@ -631,7 +686,7 @@
       </div>
     </el-dialog>
     <!--鏂板鑷紶-->
-    <el-dialog :title="isEdit ? '缂栬緫璁板綍' : '鏂板璁板綍'" :visible.sync="dialogVisible.autobiography" width="900px" append-to-body>
+    <el-dialog :title="isEdit1 ? '缂栬緫璁板綍' : '鏂板璁板綍'" :visible.sync="dialogVisible.autobiography" width="900px" append-to-body>
       <el-col >
         <el-form ref="elForm" :model="formDat" :rules="rules" size="medium" label-position="left" >
           <el-row :span="5">
@@ -650,10 +705,12 @@
               <span> 宀� </span>
           </el-form-item>
             <el-form-item label="鏃舵湡锛�" prop="term">
-              <el-select v-model="formDat.term" placeholder="璇烽�夋嫨鏃舵湡" clearable :style="{width: '50%'}"  >
-                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
-                ></el-option>
-              </el-select>
+<!--              <el-select v-model="formDat.term" placeholder="璇烽�夋嫨鏃舵湡" clearable :style="{width: '50%'}"  >-->
+<!--                <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"-->
+<!--                ></el-option>-->
+<!--              </el-select>-->
+              <el-input v-model="formDat.term"  placeholder="璇疯緭鍏ユ椂鏈�" clearable :style="{width: '100%'}" >
+              </el-input>
             </el-form-item>
             <el-form-item label="鍐呭缂栬緫锛�" prop="content">
               <el-input v-model="formDat.content" type="textarea" :rows="5" placeholder="" clearable :style="{width: '100%'}" >
@@ -670,7 +727,6 @@
       </div>
     </el-dialog>
 
-
   </div>
 </template>
 
@@ -685,8 +741,8 @@
   listExperience, addExperience, updateExperience, delExperience,
   getIndividualRelation, addRelation, updateRelation, delRelation,
   getCertificateList, addCertificate, updateCertificate, delCertificate,
-  getAbroadList, addAbroad, updateAbroad, delAbroad,
-  getAutobiographyList, getAutobiographyTermList, addAutobiography,updateAutobiography,
+  getAbroadList, addAbroad, updateAbroad, delAbroad, listType,
+  getAutobiographyList, getAutobiographyTermList, addAutobiography, updateAutobiography,delAutobiography,
   getCategory,
 } from "@/api/self/index";
 import { delFamilyevent, uploadPic } from '../../api/bignote'
@@ -697,6 +753,7 @@
 export default {
   name: "show",
   dicts: ['sys_normal_disable'],
+
   data() {
     return {
       // 閬僵灞�
@@ -704,8 +761,13 @@
 
       loading: true,
       formData:[],
+      componentKey: 0,
       // 閫変腑鏁扮粍
       ids: [],
+      //鎬у埆
+      inds:undefined,
+      //濠氬Щ绫诲埆
+      mrs:undefined,
       // 闈炲崟涓鐢�
       single: true,
       // 闈炲涓鐢�
@@ -722,7 +784,7 @@
       //涓汉淇℃伅鏁版嵁
       individualList:[],
       isEditing: false,
-      // fit:['fill'],
+      fit:['cover'],
       // 涓汉缁忓巻鏁版嵁
       experienceList: [],
       // isEdit:true,
@@ -731,6 +793,7 @@
       relationList:[],
       //鍑哄叆澧冭瘉浠舵儏鍐�
       certificateList:[],
+      typeList:[],
       //鍑哄浗鎯呭喌
       AbroadList:[],
 
@@ -762,8 +825,6 @@
       },
       // 寮瑰嚭灞傛爣棰�
       title: "",
-      // 鏄惁鏄剧ず寮瑰嚭灞�
-      open: false,
 
       // open:true,
       // 鏄惁鏄剧ず寮瑰嚭灞傦紙鏁版嵁鏉冮檺锛�
@@ -782,7 +843,7 @@
       btn:false,
       isShow:true,
       isShow_2:false,
-      isEdit:false,
+      isEdit1:false,
       formDat: {
         //涓汉鍩烘湰淇℃伅
         nickName:undefined,
@@ -941,7 +1002,7 @@
         //鑷紶
         term: [{
           required: true,
-          message: '璇烽�夋嫨鏃舵湡',
+          message: '璇疯緭鍏ユ椂鏈�',
           trigger: 'blur'
         }],
         ageBegin: [{
@@ -958,16 +1019,9 @@
       },
       selectedOption:'',
       typeOptions:[],
-      typeOption: [{
-        value:'鎶ょ収',
-        label:'鎶ょ収'
-      },{
-        value:'閫氳璇�',
-        label:'閫氳璇�'
-      },{
-        value:'韬唤璇�',
-        label:'韬唤璇�'
-      }],
+      typeOption:[],
+      newOption: undefined,
+      showInput: true
     };
   },
   created() {
@@ -982,12 +1036,22 @@
       this.dialogVisible.relation1 = false;
       this.dialogVisible.certificate =false;
       this.dialogVisible.abroad=false;
-      this.dialogVisible.autobiography=false
+      this.dialogVisible.autobiography=false;
+      this.isEdit1 = false;
       this.reset();
+      // 娓呯┖formDat瀵硅薄鐨勬暟鎹�
+      Object.keys(this.formDat).forEach(key => {
+        this.formDat[key] = '';
+      });
     },
+    handleUploadSuccess(response, file) {
+      // 澶勭悊鏂囦欢涓婁紶鎴愬姛鍚庣殑鍥炶皟
+      this.individualList.img = response.url;
+    },
+
     //涓嬫媺
     handleChange(activeNames) {
-      // console.log(val);
+      // console.log(activeNames);
       this.reset();
     },
     showDialog(dialogName) {
@@ -1002,7 +1066,7 @@
     },
     //涓汉鑷紶缂栬緫
     editData(data) {
-      this.isEdit = true; // 璁剧疆涓虹紪杈戞搷浣�
+      this.isEdit1 = true; // 璁剧疆涓虹紪杈戞搷浣�
       // 灏嗚淇敼鐨勬暟鎹~鍏呭埌formDat瀵硅薄涓�
       this.formDat.ageBegin = data.ageBegin;
       this.formDat.ageEnd = data.ageEnd;
@@ -1011,6 +1075,11 @@
 
       // 鎵撳紑寮圭獥
       this.dialogVisible.autobiography = true;
+    },
+    editAutobiography(item) {
+      this.isEdit1 = true;
+      this.dialogVisible.autobiography = true;
+      this.formDat = { ...item };
     },
 
     //闅旇鍙樿壊
@@ -1033,7 +1102,14 @@
         return '鈥斺�斺�斺�斺�斺��'
       }
     },
-
+//绫诲埆
+    addNewOption() {
+      const newOption = this.newOption.trim();
+      if (newOption && !this.typeOption.includes(newOption)) {
+        this.typeOption.push(newOption);
+        this.$set(this.formDat, 'type', newOption); // 鏇存柊formDat.type鐨勫�间负鏂扮殑閫夐」
+      }
+    },
     /** 鏌ヨ瑙掕壊鍒楄〃 */
     getList() {
       this.loading = true;
@@ -1044,7 +1120,7 @@
           //  alert(123)
           //   console.log(response.data)
           this.experienceList = response.data;
-          this.total = response.data.total;
+          // this.total = response.data.total;
           this.loading = false;
         }
       );
@@ -1053,7 +1129,7 @@
           //  alert(123)
           //   console.log(response.data)
           this.relationList = response.data;
-          this.total = response.data.total;
+          // this.total = response.data.total;
           this.loading = false;
         }
       );
@@ -1062,7 +1138,7 @@
           //  alert(123)
           //   console.log(response.data)
           this.individualList = response.data;
-          this.total = response.data.total;
+          // this.total = response.data.total;
           this.loading = false;
         }
       );
@@ -1071,7 +1147,7 @@
           //  alert(123)
           //   console.log(response.data)
           this.certificateList = response.data;
-          this.total = response.data.total;
+          // this.total = response.data.total;
           this.loading = false;
         }
       );
@@ -1080,7 +1156,7 @@
           //  alert(123)
           //   console.log(response.data)
           this.AbroadList = response.data;
-          this.total = response.data.total;
+          // this.total = response.data.total;
           this.loading = false;
         }
       );
@@ -1089,7 +1165,7 @@
         //  alert(123)
         //   console.log(response.data)
         this.AutobiographyList = response.data;
-        this.total = response.data.total;
+        // this.total = response.data.total;
         this.loading = false;
 
       });
@@ -1101,6 +1177,32 @@
       //   this.total = response.data.total;
       //   this.loading = false;
       // });
+      listType(this.queryParams).then(response => {
+          this.typeList = response.data;
+          // this.total = response.data.total;
+          // console.log( this.typeList )
+          // 鍦ㄥ洖璋冨嚱鏁颁腑璋冪敤 getTypeOptions()
+          this.getTypeOptions();
+          this.loading = false;
+        }
+      );
+    },
+    getTypeOptions() {
+      const filteredOptions = this.typeList.filter(item => typeof item === 'string' && item !== '');
+      // 鍒涘缓涓�涓┖瀵硅薄鐢ㄤ簬瀛樺偍鍞竴鐨勫瓧绗︿覆閫夐」
+      const uniqueOptions = {};
+      // 鏋勫缓涓嬫媺閫夐」鍒楄〃
+      this.typeOption = filteredOptions.reduce((options, option) => {
+        if (!uniqueOptions[option]) {
+          uniqueOptions[option] = true;
+          options.push({
+            label: option,
+            value: option
+          });
+        }
+        return options;
+      }, []);
+
     },
 
     //鍥剧墖鐨勪笂浼犲強涓婁紶鎸夐挳闅愯棌
@@ -1181,12 +1283,6 @@
       });
     },
 
-    handleRemoveFile(file) {
-      alert(23)
-    },
-    handleRemove(file) {
-      alert("323")
-    },
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
       this.dialogVisible = true;
@@ -1213,31 +1309,35 @@
       this.isShow=false
       this.isShow_2=true
       this.isEditing=true
-      // this.isEdit=false
+      if(this.individualList.maritalStatus == 0)
+          this.mrs = '鏈'
+      else if(this.individualList.maritalStatus == 1)
+          this.mrs = '宸插'
+      else
+          this.mrs = '绂诲'// this.isEdit=false
     },
 
     /** 鏌ヨ鑷紶淇℃伅 */
     getAutobiographyInfor()
     {
       let _this = this
-      getCategory().then(response=>{
-
+      getCategory().then(response => {
         // response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{
         //   _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]})
         // })
         response.data.itemValues.replace("{", "").replace("}", "").split(",").map(elem => {
           const label = elem.split(":")[0].trim();
           const value = parseInt(elem.split(":")[1].trim());
-          _this.typeOptions.push({ "label": label, "value": value });
-          // this.getSrc1(value)
-        })
-      })
 
-      // if(AutobiographyList.ageEnd==null){
-      //   this.AgeEnd='?'
-      // }else{
-      //   this.AgeEnd=this.ageEnd
-      // }
+          // 鍒ゆ柇 typeOptions 鏁扮粍涓槸鍚﹀凡瀛樺湪鐩稿悓鐨� value
+          if (!_this.typeOptions.some(option => option.value === value)) {
+            _this.typeOptions.push({ "label": label, "value": value });
+          }
+          // console.log(_this.typeOptions)
+          // _this.getSrc1(value)
+        });
+      });
+
     },
 
     /** 鎻愪氦鎸夐挳锛堟暟鎹潈闄愶級 */
@@ -1310,26 +1410,28 @@
       this.$refs["elForm"].validate(valid => {
         if (valid) {
           // 鏍规嵁鍊兼壘鍒伴�変腑鐨勯�夐」瀵硅薄
-          const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term);
+          // const selectedOption = this.typeOptions.find(option => option.value === this.formDat.term);
 
-          if (this.isEdit) {
+          if (this.isEdit1) {
             // 鎵ц淇敼鎿嶄綔
             updateAutobiography(this.formDat).then(response => {
               // 灏嗛�変腑閫夐」鐨勬枃鏈缃负"term"瀛楁鐨勫��
-              this.formDat.term = selectedOption.label;
-              this.formDat.id = selectedOption.id;
+              // this.formDat.term = selectedOption.value;
+              // this.formDat.id = selectedOption.id;
               console.log("1")
               this.$modal.msgSuccess("淇敼鎴愬姛");
               this.dialogVisible.autobiography = false;
+              this.isEdit1 = false;
               this.getList();
             }).catch(error => {
               console.log(error);
+              this.isEdit1 = false;
               this.dialogVisible.autobiography = false;
             });
           } else {
             // 鎵ц鏂板鎿嶄綔
             addAutobiography(this.formDat).then(response => {
-              this.formDat.term = selectedOption.label;
+              // this.formDat.term = selectedOption.label;
               this.$modal.msgSuccess("鏂板鎴愬姛");
               this.dialogVisible.autobiography = false;
               this.getList();
@@ -1345,7 +1447,7 @@
         this.formDat[key] = '';
       });
       // 閲嶇疆isEdit涓篺alse锛屼互渚夸笅娆$偣鍑绘柊澧炴椂涓烘柊澧炴搷浣�
-      this.isEdit = false;
+      this.isEdit1 = false;
     },
 
     editRow(row) {
@@ -1355,6 +1457,16 @@
     //淇敼鍚庣殑淇濆瓨
     //涓汉鍩烘湰淇℃伅
     submitForm() {
+      if(this.inds=='1')
+        this.individualList.sex = 1;
+      else
+        this.individualList.sex = 0;
+      if(this.mrs=='0')
+        this.individualList.maritalStatus = 0
+      else if(this.mrs == '1')
+        this.individualList.maritalStatus = 1
+      else
+        this.individualList.maritalStatus = 2
       let ul = this.fileList.map(function (elem){
         return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
       }).join(",")
@@ -1368,8 +1480,15 @@
           if (this.individualList.userId !== undefined) {
             updateIndividual(this.individualList).then(response => {
               this.$modal.msgSuccess("淇敼鎴愬姛");
+              // 寮哄埗鏇存柊鐩稿叧缁勪欢
+              this.individualList={...this.individualList}
+
               // this.open = false;
+              this.dsb = true
               this.btn=false
+              this.isShow_2=false
+              this.isShow=true
+              this.isEditing = false
             });
           } else {
             this.$modal.msgSuccess("淇敼澶辫触");
@@ -1378,7 +1497,52 @@
         }
       })
       // 鍒锋柊椤甸潰
-      window.location.reload();
+      // window.location.reload();
+    },
+    //澶村儚淇敼
+    uploadImage() {
+      const inputElement = document.createElement("input");
+      inputElement.type = "file";
+      inputElement.accept = "image/*";
+      inputElement.style.display = "none";
+      document.body.appendChild(inputElement);
+
+      inputElement.addEventListener("change", () => {
+        const file = inputElement.files[0];
+        if (file) {
+          const formData = new FormData();
+          formData.append("image", file);
+
+          // 璋冪敤uploadPic鎺ュ彛涓婁紶鍥剧墖
+          axios.post("/common/upload", formData, {
+            headers: {
+              "Content-Type": "multipart/form-data"
+            }
+          }).then(response => {
+            // 涓婁紶鎴愬姛锛岃幏鍙栨柊鍥剧墖鐨刄RL
+            const newImageUrl = response.data.img;
+
+            // 鍋囪individualList鏄竴涓璞★紝鏇存柊individualList.img
+            this.individualList.img =   newImageUrl;
+
+            // 鍋囪fileList鏄竴涓暟缁勶紝鏇存柊fileList涓搴旂殑鍥剧墖URL
+            // const index = this.fileList.findIndex(item => item.id === fileId);
+            // this.fileList[index].url = newImageUrl;
+
+            // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚�
+            document.body.removeChild(inputElement);
+            inputElement.removeEventListener("change", null);
+          }).catch(error => {
+            console.error("涓婁紶澶辫触:", error);
+            // 娓呴櫎input鍏冪礌骞剁Щ闄や簨浠剁洃鍚�
+            document.body.removeChild(inputElement);
+            inputElement.removeEventListener("change", null);
+          });
+        }
+      });
+
+      // 瑙﹀彂鐐瑰嚮浜嬩欢锛屾樉绀烘枃浠堕�夋嫨瀵硅瘽妗�
+      inputElement.click();
     },
     //涓昏缁忓巻
     saveRowExperienceList(row) {
@@ -1528,6 +1692,16 @@
         this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
       }).catch(() => {});
     },
+    /** 鍒犻櫎涓汉鑷紶鎸夐挳鎿嶄綔 */
+    handleAutobiography(row) {
+      const Ids = row.id || this.ids;
+      this.$modal.confirm('鏄惁纭鍒犻櫎鏁版嵁椤癸紵').then(function() {
+        return delAutobiography(Ids);
+      }).then(() => {
+        this.getList();
+        this.$modal.msgSuccess("鍒犻櫎鎴愬姛");
+      }).catch(() => {});
+    },
 
     /** 瀵煎嚭鎸夐挳鎿嶄綔 */
     handleExport() {
@@ -1539,7 +1713,7 @@
 };
 </script>
 
-<style >
+<style scoped="">
 /*.uoloadSty {*/
 /*  width:110px;*/
 /*  height:110px;*/
@@ -1563,38 +1737,44 @@
   background: #FFEFF2;
 
 }
-/*.co-item{*/
-/*  background-color: #EBAFB4;*/
-/*}*/
+
 .el-collapse-item__header {
   background-color:#FEF7FC;
+  width: 100%;
 }
 .title-wrapper {
   display: flex;
   justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 50px);
+}
+.left-content {
+
+  width: 100%;
 }
 .btn_autobiography{
   background:center no-repeat url('../../assets/icons/add1.png') ;
+  margin-left: 76vw;
 }
 .btn_edit{
   background:center no-repeat url('../../assets/icons/edit.png') ;
 }
+.btn_del{
+  background:center no-repeat url('../../assets/images/鍒犻櫎2.png') ;
+}
+.button-container {
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
+}
 .button {
   background:center no-repeat url('../../assets/icons/add1.png') ;
-  margin-left: 69.5vw;
-
-}
-.button2 {
-  background: center no-repeat url('../../assets/icons/add1.png') ;
-  margin-left: 66vw;
-}
-.button4 {
-  background: center no-repeat url('../../assets/icons/add1.png') ;
-  margin-left: 69.5vw;
-}
-.button5 {
-  background:center no-repeat url('../../assets/icons/add1.png') ;
-  margin-left: 71vw;
+  /*margin-right: -10px ;*/
+  flex-shrink: 0;
+  width: 30px;
+  height: 28px;
 }
 .form{
   background:center/11% no-repeat url('../../assets/icons/form.png') ;

--
Gitblit v1.9.1