From 0d2875ed014aae9e6c871e74753ea4038244e119 Mon Sep 17 00:00:00 2001
From: Jafeng <2998840497@qq.com>
Date: Tue, 3 Feb 2026 10:45:54 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=A6=96=E9=A1=B5UI=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/article-list.vue     |   7 +-
 pages/home/consult.vue          |  25 ++---
 pages/home/customer-archive.vue | 167 +++++++++++++++++++++++---------
 pages/home/team-head.vue        |  81 ++++++++++++----
 pages/home/team-mate.vue        |  13 +--
 5 files changed, 205 insertions(+), 88 deletions(-)

diff --git a/pages/home/article-list.vue b/pages/home/article-list.vue
index 9e5378e..fd028f5 100644
--- a/pages/home/article-list.vue
+++ b/pages/home/article-list.vue
@@ -11,7 +11,7 @@
       <view v-for="(article, index) in articles" :key="article._id"
         class="article-card flex px-20 py-20"
         :class="{'mb-15': index < articles.length - 1}">
-        <image class="flex-shrink-0 mr-15 cover" :src="article.cover || '/static/book.svg'" mode="aspectFill" />
+        <image class="flex-shrink-0 mr-15 cover" :src="article.cover || '/static/home/健康宣教.png'" mode="aspectFill" />
         <view class="w-0 flex-grow">
           <view class="text-base leading-normal font-semibold truncate mb-10 text-dark">
             {{ article.title }}
@@ -65,7 +65,6 @@ watch(articleIds, n => {
 </script>
 <style scoped>
 .article-container {
-  padding: 24rpx 30rpx;
   margin: 0 30rpx;
   margin-top: 24rpx;
   padding-bottom: 40rpx;
@@ -81,6 +80,8 @@ watch(articleIds, n => {
   border-radius: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
   transition: all 0.3s;
+  min-height: 168rpx;
+  align-items: center;
 }
 
 .article-card:active {
@@ -90,7 +91,7 @@ watch(articleIds, n => {
 
 .cover {
   width: 160rpx;
-  height: 120rpx;
+  height: 128rpx;
   border-radius: 12rpx;
   object-fit: cover;
 }
diff --git a/pages/home/consult.vue b/pages/home/consult.vue
index 768bf14..798e6b3 100644
--- a/pages/home/consult.vue
+++ b/pages/home/consult.vue
@@ -9,8 +9,8 @@
         :key="item.id"
         @click="handleItemClick(item)"
       >
-        <view class="item-icon" :style="{ background: item.bgColor }">
-          <image :src="item.icon" class="icon-img" mode="aspectFit" />
+        <view class="item-icon">
+          <image :src="item.icon" class="icon-img" mode="aspectFill" />
         </view>
         <view class="item-label">{{ item.label }}</view>
       </view>
@@ -59,28 +59,24 @@ const consultItems = ref([
     id: "chat",
     label: "聊天咨询",
     icon: "/static/home/聊天咨询.png",
-    bgColor: "linear-gradient(135deg, #5DADE2 0%, #3498DB 100%)",
     needSelectConsultant: true,
   },
   {
     id: "education",
     label: "我的宣教",
     icon: "/static/home/我的宣教.png",
-    bgColor: "linear-gradient(135deg, #F4D03F 0%, #F39C12 100%)",
     path: "/pages/article/article-list",
   },
   {
     id: "survey",
     label: "我的问卷",
     icon: "/static/home/我的问卷.png",
-    bgColor: "linear-gradient(135deg, #58D68D 0%, #27AE60 100%)",
     path: "/pages/survey/survey-list",
   },
   {
     id: "rating",
     label: "服务评价",
     icon: "/static/home/服务评价.png",
-    bgColor: "linear-gradient(135deg, #AF7AC5 0%, #8E44AD 100%)",
     path: "",
   },
 ]);
@@ -155,7 +151,6 @@ function handleAddNewArchive() {
 
 <style lang="scss" scoped>
 .consult-container {
-  padding: 24rpx 30rpx;
   margin: 0 30rpx;
   margin-top: 24rpx;
 }
@@ -170,7 +165,7 @@ function handleAddNewArchive() {
 .consult-grid {
   background: #fff;
   border-radius: 32rpx;
-  padding: 32rpx;
+  padding: 24rpx 30rpx;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32rpx;
@@ -181,19 +176,19 @@ function handleAddNewArchive() {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 16rpx;
+  gap: 12rpx;
   cursor: pointer;
 }
 
 .item-icon {
-  width: 112rpx;
-  height: 112rpx;
+  width: 88rpx;
+  height: 88rpx;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+  overflow: hidden;
 }
 
 .consult-item:active .item-icon {
@@ -201,12 +196,12 @@ function handleAddNewArchive() {
 }
 
 .icon-img {
-  width: 64rpx;
-  height: 64rpx;
+  width: 88rpx;
+  height: 88rpx;
 }
 
 .item-label {
-  font-size: 28rpx;
+  font-size: 26rpx;
   color: #333;
   text-align: center;
   font-weight: 500;
diff --git a/pages/home/customer-archive.vue b/pages/home/customer-archive.vue
index e758814..f2b7826 100644
--- a/pages/home/customer-archive.vue
+++ b/pages/home/customer-archive.vue
@@ -16,26 +16,24 @@
     <scroll-view scroll-x="true">
       <view class="flex flex-nowrap pb-5 ">
         <view v-for="i in customers" :key="i._id"
-          class="customer-card flex-shrink-0 min-w-100 mr-10 p-10 rounded-lg relative"
+          class="customer-card flex-shrink-0 mr-15 p-15 rounded-lg relative"
           :class="current && i._id === current._id ? 'current-customer' : ''" @click="toggle(i)">
           <view class="flex flex-col items-center">
-            <view class="text-base leading-normal font-semibold whitespace-nowrap mb-5"
+            <view class="customer-name text-lg leading-normal font-semibold whitespace-nowrap mb-8"
               :class="current && i._id === current._id ? 'text-primary' : 'text-dark'">
               {{ i.name }}
             </view>
-            <view class="flex items-center">
-              <image v-if="i.sex" class="sex-icon mr-5" 
-                :src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'" 
-                mode="aspectFit"></image>
-              <view class="text-base leading-normal"
-                :class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
+            <view class="flex items-center mb-5">
+              <image
+                v-if="i.sex"
+                class="sex-icon mr-5"
+                :src="i.sex === '男' ? '/static/icon/male.png' : '/static/home/女性图标.png'"
+                mode="aspectFit"
+              />
+              <view class="customer-age text-base leading-normal text-gray">
                 {{ i.age > 0 ? i.age + '岁' : '' }}
               </view>
             </view>
-            <view v-if="i.relationship" class="relationship-tag flex-shrink-0 px-5 rounded-sm text-sm leading-normal"
-              :class="current && i._id === current._id ? 'text-primary' : 'text-gray'">
-              {{ i.relationship }}
-            </view>
           </view>
         </view>
       </view>
@@ -48,25 +46,25 @@
         授权
       </view>
     </view>
-    <view v-if="current" class="flex mt-10">
-      <view class="info-card flex-grow mr-10" @click="fillBaseInfo()">
-        <image class="info-bg" src="/static/home/个人基本信息bg.svg" mode="aspectFit"></image>
+    <view v-if="current" class="flex mt-15">
+      <view class="info-card-new flex-grow mr-10" @click="fillBaseInfo()">
+        <view class="info-bg info-bg-base"></view>
         <view class="info-content">
-          <view class="flex items-center justify-between mb-5">
-            <view class="text-lg text-dark">个人基本信息</view>
-            <image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
+          <view class="flex items-center justify-between mb-8">
+            <view class="info-title">个人基本信息</view>
+            <image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
           </view>
-          <view class="text-base text-gray">完善个人信息</view>
+          <view class="info-subtitle">完善个人信息</view>
         </view>
       </view>
-      <view class="info-card flex-grow" @click="toHealthList()">
-        <image class="info-bg" src="/static/home/健康信息bg.svg" mode="aspectFit"></image>
+      <view class="info-card-new flex-grow" @click="toHealthList()">
+        <view class="info-bg info-bg-health"></view>
         <view class="info-content">
-          <view class="flex items-center justify-between mb-5">
-            <view class="text-lg text-dark">个人健康信息</view>
-            <image class="arrow-icon" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
+          <view class="flex items-center justify-between mb-8">
+            <view class="info-title">健康信息</view>
+            <image class="arrow-icon-small" src="/static/home/右箭头-蓝色.png" mode="aspectFit"></image>
           </view>
-          <view class="text-base text-gray">填写健康信息</view>
+          <view class="info-subtitle">上传健康档案</view>
         </view>
       </view>
     </view>
@@ -175,7 +173,7 @@ watch(() => props.corpId, n => {
 .archive-container {
   padding: 24rpx 30rpx;
   margin: 0 30rpx;
-  background: linear-gradient(to bottom, #C2DCFF 0%, #FFFFFF 100%);
+  background: linear-gradient(to bottom, #C2DCFF 0%, #C2DCFF 40%, #FFFFFF 100%);
   border-radius: 32rpx;
   box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
 }
@@ -186,16 +184,67 @@ watch(() => props.corpId, n => {
 }
 
 .customer-card {
-  background: white;
+  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 100%);
   border-radius: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
   transition: all 0.3s;
+  min-width: 180rpx;
+  position: relative;
+  border: 2rpx solid transparent;
+  margin-bottom: 18rpx;
 }
 
 .current-customer {
-  background: linear-gradient(135deg, #E3F2FF 0%, #FFFFFF 100%);
-  border: 2rpx solid #065BD6;
-  box-shadow: 0 4rpx 12rpx rgba(6, 91, 214, 0.2);
+  background: #FFFFFF;
+  border: 2rpx solid #5B9CFF;
+  box-shadow: 0 4rpx 12rpx rgba(91, 156, 255, 0.25);
+}
+
+.current-customer::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -14rpx;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 14rpx solid transparent;
+  border-right: 14rpx solid transparent;
+  border-top: 14rpx solid #5B9CFF;
+}
+
+.current-customer::before {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -12rpx;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 12rpx solid transparent;
+  border-right: 12rpx solid transparent;
+  border-top: 12rpx solid #FFFFFF;
+  z-index: 1;
+}
+
+.customer-name {
+  margin-top: 12rpx;
+}
+
+.customer-age {
+  color: #999999;
+}
+
+.mr-15 {
+  margin-right: 20rpx;
+}
+
+.mt-15 {
+  margin-top: 24rpx;
+}
+
+.mb-8 {
+  margin-bottom: 12rpx;
 }
 
 .sex-icon {
@@ -203,29 +252,28 @@ watch(() => props.corpId, n => {
   height: 32rpx;
 }
 
-.relationship-tag {
-  margin-top: 8rpx;
-  border: 1rpx solid currentColor;
-}
-
-.info-card {
+.info-card-new {
   position: relative;
-  padding: 20rpx;
-  border-radius: 16rpx;
-  background: white;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  background: linear-gradient(135deg, #F0F7FF 0%, #FFFFFF 100%);
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;
-  min-height: 160rpx;
+  height: 140rpx;
+  flex: 1;
 }
 
 .info-bg {
   position: absolute;
+  left: 0;
+  top: 0;
   right: 0;
   bottom: 0;
-  width: 120rpx;
-  height: 120rpx;
-  opacity: 0.8;
-  z-index: 0;
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  background-size: cover;
+  opacity: 0.95;
+  pointer-events: none;
 }
 
 .info-content {
@@ -233,9 +281,34 @@ watch(() => props.corpId, n => {
   z-index: 1;
 }
 
-.arrow-icon {
-  width: 32rpx;
-  height: 32rpx;
+.info-bg-base {
+  background-image: url('/static/home/个人基本信息bg.svg');
+}
+
+.info-bg-health {
+  background-image: url('/static/home/健康信息bg.svg');
+}
+
+
+.info-title {
+  color: #213E80;
+  font-size: 32rpx;
+  font-weight: 500;
+}
+
+.info-subtitle {
+  color: #78808F;
+  font-size: 24rpx;
+}
+
+.arrow-icon-small {
+  width: 24rpx;
+  height: 24rpx;
+  flex-shrink: 0;
+}
+
+.font-medium {
+  font-weight: 500;
 }
 
 .h-80 {
diff --git a/pages/home/team-head.vue b/pages/home/team-head.vue
index 566723f..a29e12a 100644
--- a/pages/home/team-head.vue
+++ b/pages/home/team-head.vue
@@ -1,14 +1,14 @@
 <template>
   <view>
-    <view :style="{ height: statusBarHeight }" class="bg-primary"></view>
-    <view class="relative z-3 flex items-center px-15 py-12 bg-primary">
+    <view :style="{ height: statusBarHeight }" class="status-bar"></view>
+    <view class="relative z-3 flex items-center px-15 py-12 header-bar">
       <view class="flex-shrink-0 mr-5">
         <group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
       </view>
       <view class="w-0 flex-grow ">
-        <view class="flex mb-10">
-          <view class="w-0 flex-grow truncate text-lg font-semibold text-white">{{ team.name }}</view>
-          <view v-if="teams.length > 1" class="flex-shinrk-0 flex items-center switch-btn"
+        <view class="flex items-center mb-10">
+          <view class="flex-shrink-0 text-lg font-semibold text-white">{{ team.name }}</view>
+          <view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
             @click="showDropDown = true">
             <image class="switch-icon" src="/static/home/切换团队.png" mode="aspectFit"></image>
           </view>
@@ -42,9 +42,11 @@
         </scroll-view>
       </view>
     </view>
-    <view v-if="team.teamTroduce" class="px-15 py-12 flex team-introduce">
-      <image class="laba-icon flex-shrink-0 mr-5" src="/static/home/喇叭介绍.png" mode="aspectFit"></image>
-      <view class="w-0 flex-grow text-sm text-white leading-normal line-clamp-2">{{ team.teamTroduce }} </view>
+    <view v-if="team.teamTroduce" class="team-introduce-wrapper">
+      <view class="team-introduce flex items-center">
+        <image class="laba-icon flex-shrink-0 mr-8" src="/static/home/喇叭介绍.png" mode="aspectFit"></image>
+        <view class="flex-grow text-base text-dark leading-relaxed line-clamp-2">{{ team.teamTroduce }}</view>
+      </view>
     </view>
   </view>
   <view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
@@ -92,29 +94,74 @@ onMounted(() => {
 })
 </script>
 <style scoped>
+.status-bar {
+  background: transparent;
+}
+
+.header-bar {
+  background: transparent;
+}
+
 .laba-icon {
-  width: 32rpx;
-  height: 32rpx;
+  width: 48rpx;
+  height: 48rpx;
 }
 
 .switch-icon {
-  width: 48rpx;
-  height: 48rpx;
+  width: 40rpx;
+  height: 40rpx;
 }
 
 .switch-btn {
   padding: 4rpx;
 }
 
-.team-introduce {
-  background: rgba(194, 220, 255, 0.3);
-  border-radius: 16rpx;
-  margin: 0 16rpx;
-  margin-top: -20rpx;
+.ml-10 {
+  margin-left: 12rpx;
+}
+
+.team-introduce-wrapper {
+  padding: 0 30rpx;
+  margin-top: 20rpx;
+  margin-bottom: 30rpx;
   position: relative;
   z-index: 2;
 }
 
+.team-introduce {
+  background: linear-gradient(135deg, #C2DCFF 0%, #E6F2FF 100%);
+  border-radius: 16rpx;
+  padding: 20rpx 24rpx;
+  position: relative;
+  border: 2rpx solid rgba(255, 255, 255, 0.9);
+  box-shadow: 0 2rpx 8rpx rgba(6, 91, 214, 0.08);
+}
+
+.team-introduce::before {
+  content: '';
+  position: absolute;
+  left: 30rpx;
+  top: -14rpx;
+  width: 0;
+  height: 0;
+  border-left: 14rpx solid transparent;
+  border-right: 14rpx solid transparent;
+  border-bottom: 14rpx solid #C2DCFF;
+  filter: drop-shadow(0 -2rpx 0 rgba(255, 255, 255, 0.9));
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+
+.leading-relaxed {
+  line-height: 1.6;
+}
+
 .check-icon {
   width: 40rpx;
   height: 40rpx;
diff --git a/pages/home/team-mate.vue b/pages/home/team-mate.vue
index 5cd3488..f7d1589 100644
--- a/pages/home/team-mate.vue
+++ b/pages/home/team-mate.vue
@@ -72,7 +72,6 @@ watch(teamates, val => {
 </script>
 <style scoped>
 .team-mate-container {
-  padding: 24rpx 30rpx;
   margin: 0 30rpx;
   margin-top: 24rpx;
 }
@@ -102,11 +101,13 @@ watch(teamates, val => {
 }
 
 .add-friend-btn {
-  width: 140rpx;
-  padding: 8rpx 0;
-  border: 1rpx solid #065BD6;
-  border-radius: 24rpx;
-  margin-top: 8rpx;
+  width: 144rpx;
+  padding: 10rpx 0;
+  background: #EAF2FF;
+  color: #2F6BFF;
+  border-radius: 12rpx;
+  margin-top: 10rpx;
+  font-weight: 500;
 }
 
 .h-24 {