From a9d2b856e0f6be6475319c2dc36bf405c2f908fc Mon Sep 17 00:00:00 2001
From: WXL (wul) <wl_5969728@163.com>
Date: 星期二, 22 九月 2026 14:04:52 +0800
Subject: [PATCH] 测试完成

---
 src/views/patient/patient/profile/index.vue |  792 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 431 insertions(+), 361 deletions(-)

diff --git a/src/views/patient/patient/profile/index.vue b/src/views/patient/patient/profile/index.vue
index edb58b7..20af72e 100644
--- a/src/views/patient/patient/profile/index.vue
+++ b/src/views/patient/patient/profile/index.vue
@@ -1,35 +1,23 @@
 <template>
   <div class="app-container">
-    <!-- 澶撮儴鐩掑瓙 -->
-    <div class="personages">
-      <el-row :gutter="20">
-        <el-col :span="18">
-          <div class="headportrait">
-            <div class="text-center">
-              <img
-                v-imgError="require('@/assets/images/shoushuzhudaoyisheng.png')"
-                src=""
-              />
-            </div>
-            <div style="margin-left: 10px">{{ userform.name }}</div>
-            <div style="margin-left: 10px" class="text-title">
-              {{ userform.sex == 1 ? "鐢�" : "濂�" }}
-            </div>
-            <div style="margin-left: 10px" class="text-title">
-              {{ userform.age }}宀�
-            </div>
-            <div style="margin-left: 10px" class="text-title">
-              {{ userform.birthdate }}
-            </div>
-            <div style="margin-left: 10px" class="text-title">
-              {{ userform.nation }}
-            </div>
-            <div style="margin-left: 10px" class="text-title">
-              {{ userform.birthplace }}
-            </div>
-          </div></el-col
-        >
-      </el-row>
+    <!-- 鎮h�呬俊鎭ご閮� -->
+    <div class="profile-header">
+      <div class="profile-header__avatar">
+        <img
+          v-imgError="require('@/assets/images/shoushuzhudaoyisheng.png')"
+          src=""
+        />
+      </div>
+      <div class="profile-header__info">
+        <div class="profile-header__name">{{ userform.name }}</div>
+        <div class="profile-header__chips">
+          <span class="chip">{{ userform.sex == 1 ? "鐢�" : "濂�" }}</span>
+          <span class="chip">{{ userform.age }}宀�</span>
+          <span class="chip">{{ userform.birthdate }}</span>
+          <span class="chip">{{ userform.nation }}</span>
+          <span class="chip">{{ userform.birthplace }}</span>
+        </div>
+      </div>
     </div>
 
     <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
@@ -101,57 +89,45 @@
 
     <!-- 鍋ュ悍妗f妯″潡 -->
     <div class="information-content" v-if="activeName == 'health'">
-      <div class="top-message">
-        <div class="headlines">
-          <div>鍩虹淇℃伅</div>
-          <el-button type="primary" @click="savefile">淇濆瓨鎮h�呮。妗�</el-button>
+      <div class="section-card">
+        <div class="section-card__header">
+          <span class="section-title">鍩虹淇℃伅</span>
+          <el-button type="primary" size="small" @click="savefile">淇濆瓨鎮h�呮。妗�</el-button>
         </div>
-        <div class="detailed">
+        <div class="section-card__body">
           <el-form
             ref="userform"
             :model="userform"
             :rules="rules"
-            label-width="100px"
+            label-width="110px"
+            class="profile-form"
           >
-            <el-row :gutter="20">
+            <el-row :gutter="24">
               <el-col :span="12">
                 <el-form-item label="鎮h�呭鍚�" prop="name">
-                  <el-input
-                    v-model="userform.name"
-                    placeholder="璇疯緭鍏ュ鍚�"
-                    maxlength="30"
-                  ></el-input> </el-form-item
-              ></el-col>
-              <el-col :span="12"
-                ><el-form-item label="鑱旂郴鏂瑰紡" prop="telcode">
-                  <el-input
-                    v-model="userform.telcode"
-                    placeholder="璇疯緭鍏ヨ仈绯绘柟寮�"
-                    maxlength="30"
-                  /> </el-form-item
-              ></el-col>
-            </el-row>
-            <el-row :gutter="20">
+                  <el-input v-model="userform.name" placeholder="璇疯緭鍏ュ鍚�" maxlength="30"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="鑱旂郴鏂瑰紡" prop="telcode">
+                  <el-input v-model="userform.telcode" placeholder="璇疯緭鍏ヨ仈绯绘柟寮�" maxlength="30"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="浜插睘鑱旂郴鏂瑰紡" prop="name">
+                  <el-input v-model="userform.telcodewx" placeholder="璇疯緭鍏ュ鍚�" maxlength="30"></el-input>
+                </el-form-item>
+              </el-col>
               <el-col :span="24">
                 <el-form-item label="鍑虹敓鍦�" prop="birthplace">
-                  <el-input
-                    v-model="userform.birthplace"
-                    placeholder="鍥姐�佺渷銆佸湴甯傘�佸尯鍘裤�佽閬撶瓑璇︾粏淇℃伅"
-                    maxlength="50"
-                  /> </el-form-item
-              ></el-col>
-            </el-row>
-            <el-row :gutter="20">
-              <el-col :span="24"
-                ><el-form-item label="灞呬綇鍦�" prop="placeOfResidence">
-                  <el-input
-                    v-model="userform.placeOfResidence"
-                    placeholder="鍥姐�佺渷銆佸湴甯傘�佸尯鍘裤�佽閬撶瓑璇︾粏淇℃伅"
-                    maxlength="50"
-                  /> </el-form-item
-              ></el-col>
-            </el-row>
-            <el-row :gutter="20">
+                  <el-input v-model="userform.birthplace" placeholder="鍥姐�佺渷銆佸湴甯傘�佸尯鍘裤�佽閬撶瓑璇︾粏淇℃伅" maxlength="50"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="灞呬綇鍦�" prop="placeOfResidence">
+                  <el-input v-model="userform.placeOfResidence" placeholder="鍥姐�佺渷銆佸湴甯傘�佸尯鍘裤�佽閬撶瓑璇︾粏淇℃伅" maxlength="50"></el-input>
+                </el-form-item>
+              </el-col>
               <el-col :span="24">
                 <el-form-item label="鏍囩" prop="desc">
                   <div class="xinz-inf">
@@ -183,7 +159,6 @@
                       >
                       </el-option>
                     </el-select>
-
                     <el-button
                       v-else
                       class="button-new-tag"
@@ -198,56 +173,36 @@
           </el-form>
         </div>
       </div>
-      <div class="top-message">
-        <div class="headline">鐥呭彶</div>
-        <div class="detailed">
-          <el-form :model="form" label-width="100px">
-            <el-row>
+      <div class="section-card">
+        <div class="section-card__header">
+          <span class="section-title">鐥呭彶</span>
+        </div>
+        <div class="section-card__body">
+          <el-form :model="form" label-width="110px" class="profile-form">
+            <el-row :gutter="24">
               <el-col :span="8">
                 <el-form-item label="杩囧線鐤剧梾" prop="name">
-                  <el-input
-                    v-model="form.pastIllnesses"
-                    placeholder="璇疯緭鍏�"
-                    maxlength="30"
-                  />
+                  <el-input v-model="form.pastIllnesses" placeholder="璇疯緭鍏�" maxlength="30" />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="鑽墿杩囨晱" prop="sex">
-                  <el-input
-                    v-model="form.drugAllergy"
-                    placeholder="璇疯緭鍏ュ叿浣撹嵂鐗�/鏃�"
-                    maxlength="30"
-                  />
+                  <el-input v-model="form.drugAllergy" placeholder="璇疯緭鍏ュ叿浣撹嵂鐗�/鏃�" maxlength="30" />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="瀹舵棌鐥呭彶" prop="age">
-                  <el-input
-                    v-model="form.familyHistory"
-                    placeholder="璇疯緭鍏ュ叿浣撶柧鐥�/鏃�"
-                    maxlength="30"
-                  />
+                  <el-input v-model="form.familyHistory" placeholder="璇疯緭鍏ュ叿浣撶柧鐥�/鏃�" maxlength="30" />
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row>
               <el-col :span="8">
                 <el-form-item label="鎵嬫湳鍙�" prop="name">
-                  <el-input
-                    v-model="form.surgicalHistory"
-                    placeholder="璇疯緭鍏ユ墜鏈�/鏃�"
-                    maxlength="30"
-                  />
+                  <el-input v-model="form.surgicalHistory" placeholder="璇疯緭鍏ユ墜鏈�/鏃�" maxlength="30" />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
                 <el-form-item label="鐢熻偛鍙�" prop="age">
-                  <el-input
-                    v-model="form.reproductiveHistory"
-                    placeholder="璇疯緭鍏ヨ儙鏁�/鏃�"
-                    maxlength="30"
-                  />
+                  <el-input v-model="form.reproductiveHistory" placeholder="璇疯緭鍏ヨ儙鏁�/鏃�" maxlength="30" />
                 </el-form-item>
               </el-col>
               <el-col :span="8">
@@ -258,8 +213,6 @@
                   </el-radio-group>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row>
               <el-col :span="8">
                 <el-form-item label="鍚哥儫鎯呭喌" prop="smoking">
                   <el-radio-group v-model="form.smoking">
@@ -284,8 +237,6 @@
                   </el-radio-group>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row>
               <el-col :span="12">
                 <el-form-item label="楗鎯呭喌" prop="diet">
                   <el-radio-group v-model="form.diet">
@@ -293,8 +244,9 @@
                     <el-radio label="2">姝e父楗</el-radio>
                     <el-radio label="3">椋熸涓嶆尟</el-radio>
                   </el-radio-group>
-                </el-form-item> </el-col
-              ><el-col :span="12">
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
                 <el-form-item label="蹇冪悊鎯呭喌" prop="psychology">
                   <el-radio-group v-model="form.psychology">
                     <el-radio label="1">蹇冩儏鎰夋偊</el-radio>
@@ -307,22 +259,23 @@
           </el-form>
         </div>
       </div>
-      <!-- 鑱旂郴鐢佃瘽 -->
-      <div class="bottom-message">
-        <div class="headline">
-          浜插睘鍙风爜缁存姢<span style="margin-right: 60px">&nbsp;&nbsp;</span>
-          <el-button type="primary" @click="addcompiletb">+鏂板</el-button>
+      <!-- 浜插睘鍙风爜缁存姢 -->
+      <div class="section-card">
+        <div class="section-card__header">
+          <span class="section-title">浜插睘鍙风爜缁存姢</span>
+          <el-button type="primary" size="small" icon="el-icon-plus" @click="addcompiletb">鏂板</el-button>
         </div>
-        <div class="Table-screen">
+        <div class="section-card__body">
           <el-table
             :data="tableData"
             style="width: 100%"
             :row-class-name="tableRowClassName"
+            stripe
+            border
           >
             <el-table-column prop="id" label="搴忓彿" width="180">
             </el-table-column>
-            <el-table-column prop="contactname" label="濮撳悕"
-          width="100" >
+            <el-table-column prop="contactname" label="濮撳悕" width="100">
             </el-table-column>
             <el-table-column prop="contactway" label="鑱旂郴鏂瑰紡" width="180">
             </el-table-column>
@@ -346,7 +299,6 @@
                   size="small"
                   >缂栬緫</el-button
                 >
-
                 <el-button @click="deltb(scope.row)" type="danger" size="small"
                   >鍒犻櫎</el-button
                 >
@@ -360,13 +312,12 @@
     <div class="medical-record" v-else-if="activeName == 'medical'">
       <!-- 闂ㄨ瘖 -->
       <div v-if="sonactiveName == 'outpatient'">
-        <el-table :data="serviceData" style="width: 100%">
+        <el-table :data="serviceData" style="width: 100%" stripe border>
           <el-table-column
             label="灏辫瘖鏃堕棿"
             align="center"
             key="admitdate"
             prop="admitdate"
-            width="160"
           >
             <template slot-scope="scope">
               <span>{{ formatTime(scope.row.admitdate) }}</span>
@@ -374,14 +325,15 @@
           </el-table-column>
 
           <el-table-column
-            label="闂ㄨ瘖鍙�"
+            label="鐥呮鍙�"
+            width="100"
             align="center"
-            key="patid"
-            prop="patid"
+            key="outhospno"
+            prop="outhospno"
           />
           <el-table-column
             label="濮撳悕"
-          width="100"
+            width="100"
             align="center"
             key="patname"
             prop="patname"
@@ -449,7 +401,7 @@
       </div>
       <!-- 浣忛櫌 -->
       <div v-if="sonactiveName == 'inhospital'">
-        <el-table :data="serviceDatary" style="width: 100%">
+        <el-table :data="serviceDatary" style="width: 100%" stripe border>
           <el-table-column
             label="浣忛櫌鍙�"
             align="center"
@@ -459,7 +411,7 @@
           />
           <el-table-column
             label="濮撳悕"
-          width="100"
+            width="100"
             align="center"
             key="patname"
             prop="patname"
@@ -522,12 +474,11 @@
             prop="bedNo"
             width="120"
           />
-
         </el-table>
       </div>
       <!-- 鍑洪櫌 -->
       <div v-if="sonactiveName == 'checkout'">
-        <el-table :data="serviceDatacy" style="width: 100%">
+        <el-table :data="serviceDatacy" style="width: 100%" stripe border>
           <el-table-column
             label="浣忛櫌鍙�"
             align="center"
@@ -537,7 +488,7 @@
           />
           <el-table-column
             label="濮撳悕"
-          width="100"
+            width="100"
             align="center"
             key="patname"
             prop="patname"
@@ -601,100 +552,12 @@
             prop="bedNo"
             width="120"
           />
-
         </el-table>
       </div>
     </div>
 
     <!-- 鏈嶅姟璁板綍 -->
-    <div
-      class="medical-recordc"
-      style="margin-top: 20px; font-size: 20px !important"
-      v-else-if="activeName == 'serve'"
-    >
-      <div style="margin-bottom: 15px" v-for="item in record">
-        <el-card class="box-card">
-          <div
-            style="
-              font-size: 22px;
-              padding-left: 5px;
-              margin: 15px 0;
-              border-left: 4px solid rgb(190, 65, 134);
-            "
-          >
-          <span v-if="item.serviceType==2">鍑洪櫌闅忚</span>
-          <span v-if="item.serviceType==1">蹇冪數闅忚</span>
-          <span v-if="item.serviceType==3">褰卞儚闅忚</span>
-          <span v-if="item.serviceType==4">瀹f暀鍏虫��</span>
-          </div>
-          <el-divider></el-divider>
-          <div style="margin-top: 10px">
-            鏈嶅姟鍚嶇О锛�<span style="color: #2775b6"
-              >{{ item.templatename }}</span
-            >
-          </div>
-          <div style="margin-top: 10px">
-            鍒涘缓鏃堕棿锛�<span style="color: #2775b6"
-              >{{item.createTime}}</span
-            >
-          </div>
-          <div style="margin-top: 10px">
-            瀹屾垚鏃堕棿锛�<span style="color: #2775b6"
-              >{{ item.finishtime }}</span
-            >
-          </div>
-          <div style="margin-top: 10px">
-            <el-row :gutter="20">
-              <el-col :span="12"
-                >绉戝锛�
-                <span style="color: #2775b6">{{ item.deptname }}</span></el-col
-              >
-              <el-col :span="12"
-                >鐥呭尯锛�
-                <span style="color: #2775b6">{{ item.leavehospitaldistrictname }}</span></el-col
-              >
-
-            </el-row>
-          </div>
-
-          <div
-            style="
-              font-size: 20px;
-              padding-left: 5px;
-              margin: 15px 0;
-              border-left: 4px solid rgb(65, 161, 190);
-            "
-          >
-            浜哄伐璁板綍
-          </div>
-          <div style="margin-top: 10px">
-            <el-row :gutter="20">
-              <el-col :span="6"
-                >璐熻矗浜猴細
-                <span style="color: #2775b6">{{ item.createBy }}</span></el-col
-              >
-              <el-col :span="6"
-                >涓绘不鍖荤敓锛�
-                <span style="color: #2775b6">{{ item.drname }}</span></el-col
-              >
-              <el-col :span="6"
-                >璐d换鎶ゅ+ <span style="color: #2775b6">{{ item.nurseName }}</span></el-col
-              >
-            </el-row>
-          </div>
-          <div style="margin-top: 10px">
-            缁撴灉鐘舵�侊細
-            <span style="color: #2775b6" v-if="item.excep==0">鏈嶅姟姝e父</span>
-            <span style="color: #B55E54" v-if="item.excep==1">寮傚父</span>
-
-          </div>
-          <!-- <div style="margin-top: 10px">
-            澶囨敞锛�
-            <span style="color: #2775b6">鎻愰啋娉ㄦ剰楗鍋ュ悍</span>
-          </div> -->
-        </el-card>
-      </div>
-    </div>
+    <ServiceRecords v-else-if="activeName == 'serve'" :patid="id" />
     <!-- 鍋ュ悍鐩戞祴 -->
     <!-- <div class="medical-record" v-show="activeName == 'monitor'">
       <div v-show="sontwoactiveName == 'blood'" style="display: flex">
@@ -803,8 +666,7 @@
 
     <el-dialog :title="titletb" :visible.sync="AddanumberVisible">
       <el-form :model="numberform" label-width="100px">
-        <el-form-item label="濮撳悕"
-          width="100">
+        <el-form-item label="濮撳悕" width="100">
           <el-input v-model="numberform.contactname"></el-input>
         </el-form-item>
         <el-form-item label="鑱旂郴鐢佃瘽">
@@ -843,16 +705,14 @@
   Patientclinic,
 } from "@/api/patient/homepage";
 
-import {
-  getsearchrResults,
-  getTaskservelist,
-} from "@/api/AiCentre/index";
+import { getsearchrResults } from "@/api/AiCentre/index";
+import ServiceRecords from "@/views/patient/archives/components/ServiceRecords.vue";
 import { listPatouthosp } from "@/api/smartor/patouthosp";
 import { listpatient } from "@/api/patient/record";
 
 export default {
   name: "Profile",
-  components: { userAvatar, userInfo, resetPwd, SFtable },
+  components: { userAvatar, userInfo, resetPwd, SFtable, ServiceRecords },
   data() {
     return {
       userform: {},
@@ -877,29 +737,29 @@
       record: [
         {
           name: "瀹f暀浠诲姟",
-          serviceType:'4',
-          templatename:'绠¢ゲ瀹f暀涓�鏈�',
-          createTime:'2024-11-10',
-          finishtime:'2024-11-12',
-          createBy:'鐜嬫斂',
-          drname:'鍒樻槑',
-          nurseName:'寮犳窇鐞�',
-          excep:'0',
-          deptname:'鍛煎惛绉�',
-          leavehospitaldistrictname:'浜旂梾鍖�',
+          serviceType: "4",
+          templatename: "绠¢ゲ瀹f暀涓�鏈�",
+          createTime: "2024-11-10",
+          finishtime: "2024-11-12",
+          createBy: "鐜嬫斂",
+          drname: "鍒樻槑",
+          nurseName: "寮犳窇鐞�",
+          excep: "0",
+          deptname: "鍛煎惛绉�",
+          leavehospitaldistrictname: "浜旂梾鍖�",
         },
         {
           name: "闅忚浠诲姟",
-          serviceType:'2',
-          templatename:'蹇冭绠¢殢璁夸竴鏈�',
-          createTime:'2024-11-11',
-          finishtime:'2024-11-14',
-          createBy:'绔犵▼',
-          drname:'鍒樻槑',
-          nurseName:'鏉庝附',
-          excep:'0',
-          deptname:'鍛煎惛绉�',
-          leavehospitaldistrictname:'浜旂梾鍖�',
+          serviceType: "2",
+          templatename: "蹇冭绠¢殢璁夸竴鏈�",
+          createTime: "2024-11-11",
+          finishtime: "2024-11-14",
+          createBy: "绔犵▼",
+          drname: "鍒樻槑",
+          nurseName: "鏉庝附",
+          excep: "0",
+          deptname: "鍛煎惛绉�",
+          leavehospitaldistrictname: "浜旂梾鍖�",
         },
         // {
         //   name: "闂嵎璋冩煡",
@@ -1054,8 +914,8 @@
         // 闂ㄨ瘖璁板綍
         listPatouthosp({ patid: this.id }).then((response) => {
           if (response.code == 200) {
-            // this.serviceData = response.rows;
-            this.serviceData = [];
+            this.serviceData = response.rows;
+            // this.serviceData = [];
           }
         });
       } else if (type == 1) {
@@ -1069,7 +929,7 @@
           if (response.code == 200) {
             this.serviceDatacy = response.rows;
             console.log(this.serviceDatacy);
-            this.$forceUpdate()
+            this.$forceUpdate();
           }
         });
       }
@@ -1077,6 +937,9 @@
     getcontactlist() {
       listcontactinformation({ patid: this.id }).then((response) => {
         this.tableData = response.rows;
+        if (this.tableData.length) {
+          this.userform.telcodewx = this.tableData[0].contactway;
+        }
       });
     },
     processElement(element) {
@@ -1094,7 +957,7 @@
         this.userform = response.rows[0];
         // this.dynamicTags = response.rows[0].tagList;
         this.dynamicTags = response.rows[0].tagList.map(this.processElement);
-        console.log(this.dynamicTags);
+        this.getcontactlist();
       });
       // 鐥呭彶淇℃伅
       getmedicalhistory({ pid: this.id }).then((res) => {
@@ -1103,7 +966,6 @@
         }
       });
       // 鑱旂郴淇℃伅
-      this.getcontactlist();
     },
     // 淇濆瓨鎮h�呮。妗�
     savefile() {
@@ -1231,23 +1093,11 @@
     handleClick(tab, event) {
       if (tab.index == "1") {
         this.getList(1);
-      }else if (tab.index == "2") {
-this.handleClickfw();
       }
     },
     handleClickson(tab, event) {
       console.log(tab, "son");
       this.getList(tab.index);
-    },
-    // 鏌ヨ鏈嶅姟璁板綍
-    handleClickfw(){
-      getTaskservelist({
-        patid: this.id,
-      }).then((res) => {
-        if (res.code == 200) {
-          this.record = res.rows[0].serviceSubtaskList;
-        }
-      });
     },
     // 鑱旂郴鏂瑰紡鏂板
     Addanumber() {},
@@ -1777,134 +1627,354 @@
 </script>
 
 <style lang="scss" scoped>
-.personages {
-  height: 88px;
-  width: 100%;
-  background-color: #5e86f9;
-  border-radius: 5px;
-  padding: 20px;
-  margin-bottom: 10px;
-  line-height: 48px;
-  font-size: 25px;
-  font-weight: 600;
-  color: #ffffff;
-  .headportrait {
-    display: flex;
-    .text-center {
-      width: 55px;
-      height: 55px;
-      margin-right: 10px;
-      img {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-      }
+$primary: #3f6ef0;
+
+// ===== 鎮h�呬俊鎭ご閮� =====
+.profile-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 26px 32px;
+  margin-bottom: 16px;
+  border-radius: 14px;
+  overflow: hidden;
+  color: #fff;
+  background: linear-gradient(120deg, #3f6ef0 0%, #5b8cff 55%, #78a9ff 100%);
+  box-shadow: 0 8px 24px rgba(63, 110, 240, 0.26);
+
+  &::before {
+    content: "";
+    position: absolute;
+    right: -70px;
+    top: -90px;
+    width: 280px;
+    height: 280px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.09);
+  }
+  &::after {
+    content: "";
+    position: absolute;
+    right: 90px;
+    bottom: -130px;
+    width: 230px;
+    height: 230px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.06);
+  }
+
+  &__avatar {
+    position: relative;
+    z-index: 1;
+    width: 76px;
+    height: 76px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    padding: 3px;
+    background: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      object-fit: cover;
+      background: #eef2fb;
     }
-    .text-title {
-      font-size: 20px;
+  }
+
+  &__info {
+    position: relative;
+    z-index: 1;
+    margin-left: 22px;
+    min-width: 0;
+  }
+
+  &__name {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    line-height: 1.3;
+  }
+
+  &__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    margin-top: 12px;
+
+    .chip {
+      padding: 4px 14px;
+      font-size: 13px;
       font-weight: 500;
-      color: #ecfcfc;
+      border-radius: 999px;
+      background: rgba(255, 255, 255, 0.2);
+      border: 1px solid rgba(255, 255, 255, 0.3);
+      color: #f5f8ff;
+      line-height: 1.5;
     }
   }
 }
-.xinz-inf {
-  font-size: 18px;
-  // white-space: nowrap;
+
+// ===== Tabs =====
+::v-deep .el-tabs--border-card {
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
   overflow: hidden;
-  text-overflow: ellipsis;
 
-  line-height: 48px;
+  > .el-tabs__header {
+    margin: 0;
+    background: #fff;
+    border-bottom: 1px solid #eef0f4;
 
-  .el-tag + .el-tag {
-    margin-left: 10px;
+    .el-tabs__nav {
+      border: none;
+
+      .el-tabs__item {
+        height: 54px;
+        line-height: 54px;
+        font-size: 15px;
+        color: #606266;
+        border: none !important;
+
+        .mulsz {
+          font-size: 15px;
+        }
+
+        &.is-active {
+          color: $primary;
+          font-weight: 600;
+          background: #f3f7ff;
+          box-shadow: inset 0 -3px 0 $primary;
+        }
+      }
+    }
   }
+
+  > .el-tabs__content {
+    padding: 0;
+  }
+}
+
+// ===== 鍋ュ悍妗f鍗$墖 =====
+.information-content {
+  margin-top: 16px;
+}
+
+.section-card {
+  margin-bottom: 16px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #f0f2f5;
+
+    .section-title {
+      position: relative;
+      padding-left: 12px;
+      font-size: 16px;
+      font-weight: 600;
+      color: #303133;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 4px;
+        height: 16px;
+        border-radius: 2px;
+        background: $primary;
+      }
+    }
+  }
+
+  &__body {
+    padding: 20px 24px 4px;
+  }
+}
+
+// 琛ㄥ崟
+.profile-form {
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+
+  ::v-deep .el-form-item__label {
+    color: #606266;
+    font-weight: 500;
+  }
+
+  ::v-deep .el-input__inner {
+    border-radius: 6px;
+  }
+}
+
+// 鏍囩
+.xinz-inf {
+  line-height: 40px;
+
+  .el-tag {
+    margin-bottom: 6px;
+    border-radius: 4px;
+
+    & + .el-tag {
+      margin-left: 8px;
+    }
+  }
+
   .button-new-tag {
-    margin-left: 10px;
+    margin-left: 8px;
     height: 32px;
     line-height: 30px;
     padding-top: 0;
     padding-bottom: 0;
   }
+
   .input-new-tag {
     width: 90px;
-    margin-left: 10px;
+    margin-left: 8px;
     vertical-align: bottom;
   }
 }
-.el-tabs--border-card {
-  // font-size: 25px;
-  .mulsz {
-    font-size: 25px;
-    margin-top: 20px;
+
+// ===== 鍖荤枟妗f琛ㄦ牸 =====
+.medical-record {
+  margin-top: 16px;
+  padding: 24px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+  ::v-deep .el-table {
+    th.el-table__cell {
+      background: #f5f7fb;
+      color: #303133;
+      font-weight: 600;
+    }
+
+    .el-table__row td {
+      padding: 10px 0;
+    }
+
+    .el-table__row--striped td {
+      background: #fafbfd;
+    }
+
+    .el-table__row:hover > td {
+      background: #f3f7ff !important;
+    }
   }
 }
-.information-content {
-  margin-top: 20px;
-  background: #ffffff;
-  border: 1px solid #dcdfe6;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
-    0 0 6px 0 rgba(0, 0, 0, 0.04);
-  .top-message {
-    margin-top: 25px;
-    margin-left: 100px;
-    .detailed {
-      width: 88%;
-      border-radius: 8px;
-      padding: 30px;
-      margin-bottom: 30px;
-      background-color: #ddf0f8;
-      .bg-purple {
-        margin-bottom: 20px;
-      }
-      .spanvalue {
-        display: inline-block;
-        min-width: 200px;
-        border-bottom: 1px solid rgb(172, 172, 172);
-      }
+
+// 鍗$墖鍐呰〃鏍硷紙浜插睘鍙风爜锛�
+.section-card__body {
+  ::v-deep .el-table {
+    th.el-table__cell {
+      background: #f5f7fb;
+      color: #303133;
+      font-weight: 600;
+    }
+  }
+}
+
+// ===== 鏈嶅姟璁板綍 =====
+.service-record {
+  margin-top: 16px;
+
+  .service-item {
+    margin-bottom: 16px;
+  }
+
+  .service-card {
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
+
+    ::v-deep .el-card__body {
+      padding: 20px 24px;
     }
   }
 
-  .headline {
-    font-size: 25px;
-    padding-left: 5px;
-    margin-bottom: 10px;
-    border-left: 8px solid rgb(65, 161, 190);
-  }
-  .headlines {
-    font-size: 25px;
+  .service-card__header {
     display: flex;
-    width: 88%;
+    align-items: center;
     justify-content: space-between;
-    padding-left: 5px;
-    margin-bottom: 10px;
-    border-left: 8px solid rgb(65, 161, 190);
+    padding-bottom: 14px;
+    border-bottom: 1px dashed #eef0f4;
   }
-  .bottom-message {
-    margin-bottom: 25px;
-    margin-left: 100px;
-    .Table-screen {
-      width: 88%;
-      padding: 30px;
-      margin-bottom: 30px;
-      border-radius: 8px;
-      background-color: #ddf0f8;
-      font-size: 20px !important;
+
+  .service-card__title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .service-badge {
+    display: inline-block;
+    padding: 4px 12px;
+    font-size: 13px;
+    font-weight: 600;
+    color: $primary;
+    background: #eef4ff;
+    border-radius: 6px;
+  }
+
+  .service-name {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .service-status {
+    padding: 4px 12px;
+    font-size: 13px;
+    border-radius: 999px;
+
+    &.is-ok {
+      color: #12a182;
+      background: #e8f7f1;
+    }
+
+    &.is-bad {
+      color: #e0564c;
+      background: #fdeeee;
+    }
+  }
+
+  .service-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 18px 24px;
+    padding-top: 16px;
+  }
+
+  .service-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    .s-label {
+      font-size: 12px;
+      color: #909399;
+    }
+
+    .s-value {
+      font-size: 14px;
+      color: #303133;
     }
   }
 }
-.medical-record {
-  margin-top: 20px;
-  margin: 20px;
-  padding: 30px;
-  background: #ffffff;
-  border: 1px solid #dcdfe6;
-  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
-    0 0 6px 0 rgba(0, 0, 0, 0.04);
-}
-.sontwoactiveName {
-  margin: 0 auto;
-}
-::v-deep.el-table .warning-row {
-  background: oldlace;
+
+// 榛樿鑱旂郴鏂瑰紡楂樹寒琛�
+::v-deep .el-table .warning-row {
+  background: #fff7e6;
 }
 </style>

--
Gitblit v1.9.3