From 86bd523a3d3b90b9761011de2f289ec34217250d Mon Sep 17 00:00:00 2001
From: wujingling0908 <2.com>
Date: Sun, 20 Sep 2026 13:17:31 +0800
Subject: [PATCH] =?UTF-8?q?=E7=8C=9C=E4=BD=A0=E6=83=B3=E9=97=AE=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/abstract.vue | 250 +++++++++++++++++++++++++++++++
 src/components/chat-new.vue | 286 +-----------------------------------
 src/components/welcomes.vue |  48 +++++-
 3 files changed, 300 insertions(+), 284 deletions(-)
 create mode 100644 src/components/abstract.vue

diff --git a/src/components/abstract.vue b/src/components/abstract.vue
new file mode 100644
index 0000000..020f4ed
--- /dev/null
+++ b/src/components/abstract.vue
@@ -0,0 +1,250 @@
+<script setup>
+import { ref, onMounted, computed, inject } from 'vue';
+import { Post } from '@/utils/https'
+const store = inject('appStore', null)
+const businessHandleInfo = ref({})
+const abstractList = computed(() => [
+  {
+    title: '保障状态',
+    num: 3,
+    text: '保单保障中',
+    unit: '张',
+    btnText: '查保单',
+    btnBg: 'linear-gradient(90deg, #025cea 0%, #0595f6 100%)',
+  },
+  {
+    title: '待办任务',
+    num: businessHandleInfo.value?.contents?.length || 0,
+    text: '待办需处理',
+    unit: '个',
+    btnText: '去处理',
+    btnBg: 'linear-gradient(111deg, #ff752a 44%, #feb52d 136%)',
+  },
+  {
+    title: '权益领取',
+    num: 0,
+    text: '生存金权益',
+    unit: '项',
+    btnText: '去领取',
+    btnBg: 'linear-gradient(261deg, #2ed0c6 3%, #08b7ac 65%)',
+  },
+].filter(item => item.num > 0))
+const businessHandle = () => {
+  if (
+    store.source == "95270000" ||
+    store.source == "95320000" ||
+    store.source == "95350000" ||
+    store.source == "95810000"
+  ) {
+    Post("notify/info", { userInfoId: store.userId })
+      .then((res) => {
+        if (res.data?.contents.length > 0) {
+          businessHandleInfo.value = res.data;
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+}
+onMounted(async () => {
+  businessHandle()
+})
+</script>
+<template>
+  <div class="abstract-con" v-if="abstractList.length">
+    <div class="title">
+      <span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.svg" alt="" srcset="" />
+    </div>
+    <div class="list">
+      <div :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`"
+        v-for="(item, index) in abstractList || []" :key="index">
+        <div>
+          <div class="title">{{ item.title }}</div>
+          <div class="content" :style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }">
+            <div class="nums">
+              <div class="num">
+                {{ item.num }}<span>{{ item.unit }}</span>
+              </div>
+            </div>
+            <div class="text" :style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }">
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+        <div class="btn" :style="{ background: item.btnBg }">{{ item.btnText }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.abstract-con {
+  flex-direction: column;
+  justify-content: center;
+  padding: 10rem 12rem;
+  gap: 12rem;
+  align-self: stretch;
+
+  background: linear-gradient(77deg, #fcfdfd80 -1%, #f5f7fee6 99%);
+
+  box-sizing: border-box;
+  border: 1rem solid rgba(255, 255, 255, 0.9);
+
+  backdrop-filter: blur(10rem);
+  border-radius: 12rem;
+
+  .title {
+    font-family: PingFang SC;
+    font-size: 16rem;
+    font-weight: 500;
+    line-height: normal;
+    letter-spacing: 0rem;
+
+    /* 科个中性/正文-标题 17204D */
+    /* 样式描述：用于正文标题 */
+    color: #17204d;
+
+    img {
+      width: 20rem;
+      margin-left: 4.6rem;
+    }
+  }
+
+  .list {
+    margin-top: 13rem;
+    display: flex;
+    gap: 8rem;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      gap: 12rem;
+      flex: 1;
+      border-radius: 8rem;
+      display: flex;
+      flex-direction: column;
+      padding: 12rem;
+      gap: 12rem;
+
+      background: #fcfdfd;
+
+      box-shadow: 0rem 4rem 10rem 0rem #e7effd;
+
+      .title {
+        margin-left: 18rem;
+        font-family: PingFang SC;
+        font-size: 12rem;
+        font-weight: normal;
+        line-height: 16rem;
+        letter-spacing: 0rem;
+
+        /* 科个中性/正文-副标题 7E849F */
+        color: #7e849f;
+      }
+
+      .content {
+        .nums {
+          font-family: DIN-Medium;
+          font-size: 24rem;
+          font-weight: bold;
+          line-height: 24rem;
+          letter-spacing: 0rem;
+
+          font-variation-settings: 'opsz' auto;
+          color: #17204d;
+
+          .num {
+            display: flex;
+            align-items: flex-end;
+          }
+
+          span {
+            font-family: PingFang SC;
+            font-size: 12rem;
+            font-weight: normal;
+            line-height: 16rem;
+            letter-spacing: 0rem;
+            margin: 0 3rem 0 3rem;
+
+            /* 中性/重要文本色 */
+            /* 样式描述：17204D */
+            color: #17204d;
+          }
+        }
+
+        .text {
+          font-family: PingFang SC;
+          font-size: 12rem;
+          font-weight: normal;
+          line-height: 16rem;
+          letter-spacing: 0rem;
+
+          /* 中性/次要文本色 */
+          /* 样式描述：7E849F */
+          color: #7e849f;
+          align-self: flex-end;
+        }
+      }
+
+      .btn {
+        border-radius: 100rem;
+        font-family: PingFang SC;
+        font-size: 14rem;
+        font-weight: 500;
+        line-height: 19rem;
+        text-align: center;
+        letter-spacing: 0rem;
+
+        color: #ffffff;
+        padding: 4rem 12rem;
+        height: 28rem;
+        cursor: pointer;
+      }
+    }
+
+    .singleItem {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+
+      >div {
+        margin-left: 36rem;
+
+        .title {
+          font-family: PingFang SC;
+          font-size: 14rem;
+          font-weight: 500;
+          line-height: normal;
+          letter-spacing: 0rem;
+          margin-left: 0;
+
+          /* 科个中性/正文-标题 17204D */
+          /* 样式描述：用于正文标题 */
+          color: #17204d;
+          margin-bottom: 4rem;
+        }
+
+        .content {
+          .nums {
+            font-size: 12rem;
+            font-weight: normal;
+            line-height: 16rem;
+            letter-spacing: 0rem;
+
+            z-index: 1;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #17204d;
+
+            span {
+              color: #7e849f;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/chat-new.vue b/src/components/chat-new.vue
index 968d1f4..2f0b473 100644
--- a/src/components/chat-new.vue
+++ b/src/components/chat-new.vue
@@ -3,6 +3,8 @@ import { ref, computed, inject, watch, nextTick, onMounted } from 'vue'
 import { showToast } from 'vant';
 import footerBarInput from '@/components/footer-bar-input.vue'
 import hotQuestionNew from '@/components/hot-question-new.vue'
+import welcomes from '@/components/welcomes.vue'
+import abstract from '@/components/abstract.vue'
 import { messageSend } from '@/utils/api'
 defineOptions({
   name: 'chat-new',
@@ -12,54 +14,6 @@ const store = inject('appStore', null)
 const chatArr = inject('chatArr', ref([]))
 const isChatLoading = inject('isChatLoading', ref(false))
 const mainContainerRef = ref(null)
-const welcomeWord = ref('下午好，张先生')
-const welcomeSubWord = ref('我是您的服务管家皮卡丘')
-
-const businessHandleInfo = ref({})
-const abstractList = computed(() => [
-  {
-    title: '保障状态',
-    num: 3,
-    text: '保单保障中',
-    unit: '张',
-    btnText: '查保单',
-    btnBg: 'linear-gradient(90deg, #025cea 0%, #0595f6 100%)',
-  },
-  {
-    title: '待办任务',
-    num: businessHandleInfo.value?.contents?.length || 0,
-    text: '待办需处理',
-    unit: '个',
-    btnText: '去处理',
-    btnBg: 'linear-gradient(111deg, #ff752a 44%, #feb52d 136%)',
-  },
-  {
-    title: '权益领取',
-    num: 0,
-    text: '生存金权益',
-    unit: '项',
-    btnText: '去领取',
-    btnBg: 'linear-gradient(261deg, #2ed0c6 3%, #08b7ac 65%)',
-  },
-].filter(item => item.num > 0))
-const businessHandle = () => {
-  if (
-    store.source == "95270000" ||
-    store.source == "95320000" ||
-    store.source == "95350000" ||
-    store.source == "95810000"
-  ) {
-    Post("notify/info", { userInfoId: store.userId })
-      .then((res) => {
-        if (res.data?.contents.length > 0) {
-          businessHandleInfo.value = res.data;
-        }
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }
-}
 
 function getItemText(item) {
   return item?.message?.[0]?.options?.label || ''
@@ -85,41 +39,14 @@ function handleAskClick(item) {
   sendText(item)
 }
 onMounted(async () => {
-  businessHandle()
 })
 </script>
 
 <template>
   <div class="chat-new">
     <div class="main-container" ref="mainContainerRef">
-      <div class="welcome-con">
-        <div class="welcome-title">{{ welcomeWord }}</div>
-        <div class="sub-title">{{ welcomeSubWord }}</div>
-      </div>
-      <div class="abstract-con" v-if="abstractList.length">
-        <div class="title">
-          <span>今日皮卡丘摘要</span><img src="@/assets/images/chat/star.svg" alt="" srcset="" />
-        </div>
-        <div class="list">
-          <div :class="`item ${(abstractList || []).length === 1 ? 'singleItem' : ''}`"
-            v-for="(item, index) in abstractList || []" :key="index">
-            <div>
-              <div class="title">{{ item.title }}</div>
-              <div class="content" :style="{ display: (abstractList || []).length > 2 ? 'block' : 'flex' }">
-                <div class="nums">
-                  <div class="num">
-                    {{ item.num }}<span>{{ item.unit }}</span>
-                  </div>
-                </div>
-                <div class="text" :style="{ marginTop: (abstractList || []).length > 2 ? '8rem' : '0' }">
-                  {{ item.text }}
-                </div>
-              </div>
-            </div>
-            <div class="btn" :style="{ background: item.btnBg }">{{ item.btnText }}</div>
-          </div>
-        </div>
-      </div>
+      <welcomes />
+      <abstract />
       <hotQuestionNew />
       <div class="message-con" v-if="chatArr.length || showTyping">
         <div v-for="(item, index) in chatArr" :key="index"
@@ -162,211 +89,6 @@ onMounted(async () => {
     flex: 1;
     overflow: auto;
 
-    .welcome-con {
-      padding: 23rem 8rem;
-
-      .welcome-title {
-        font-family: PingFang SC;
-        font-size: 20rem;
-        font-weight: 600;
-        line-height: normal;
-        letter-spacing: 0em;
-
-        font-variation-settings: 'opsz' auto;
-        background: linear-gradient(266deg, #001a9c -18%, #0f194c 82%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        text-fill-color: transparent;
-        margin-bottom: 4rem;
-      }
-
-      .sub-title {
-        font-family: PingFang SC;
-        font-size: 18rem;
-        font-weight: 600;
-        line-height: normal;
-        letter-spacing: 0em;
-        display: inline-block;
-        font-variation-settings: 'opsz' auto;
-        background: linear-gradient(240deg, #176cff 8%, #0f194c 31%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        text-fill-color: transparent;
-      }
-    }
-
-    .abstract-con {
-      flex-direction: column;
-      justify-content: center;
-      padding: 10rem 12rem;
-      gap: 12rem;
-      align-self: stretch;
-
-      background: linear-gradient(77deg, #fcfdfd80 -1%, #f5f7fee6 99%);
-
-      box-sizing: border-box;
-      border: 1rem solid rgba(255, 255, 255, 0.9);
-
-      backdrop-filter: blur(10rem);
-      border-radius: 12rem;
-
-      .title {
-        font-family: PingFang SC;
-        font-size: 16rem;
-        font-weight: 500;
-        line-height: normal;
-        letter-spacing: 0rem;
-
-        /* 科个中性/正文-标题 17204D */
-        /* 样式描述：用于正文标题 */
-        color: #17204d;
-
-        img {
-          width: 20rem;
-          margin-left: 4.6rem;
-        }
-      }
-
-      .list {
-        margin-top: 13rem;
-        display: flex;
-        gap: 8rem;
-
-        .item {
-          display: flex;
-          flex-direction: column;
-          gap: 12rem;
-          flex: 1;
-          border-radius: 8rem;
-          display: flex;
-          flex-direction: column;
-          padding: 12rem;
-          gap: 12rem;
-
-          background: #fcfdfd;
-
-          box-shadow: 0rem 4rem 10rem 0rem #e7effd;
-
-          .title {
-            margin-left: 18rem;
-            font-family: PingFang SC;
-            font-size: 12rem;
-            font-weight: normal;
-            line-height: 16rem;
-            letter-spacing: 0rem;
-
-            /* 科个中性/正文-副标题 7E849F */
-            color: #7e849f;
-          }
-
-          .content {
-            .nums {
-              font-family: DIN-Medium;
-              font-size: 24rem;
-              font-weight: bold;
-              line-height: 24rem;
-              letter-spacing: 0rem;
-
-              font-variation-settings: 'opsz' auto;
-              color: #17204d;
-
-              .num {
-                display: flex;
-                align-items: flex-end;
-              }
-
-              span {
-                font-family: PingFang SC;
-                font-size: 12rem;
-                font-weight: normal;
-                line-height: 16rem;
-                letter-spacing: 0rem;
-                margin: 0 3rem 0 3rem;
-
-                /* 中性/重要文本色 */
-                /* 样式描述：17204D */
-                color: #17204d;
-              }
-            }
-
-            .text {
-              font-family: PingFang SC;
-              font-size: 12rem;
-              font-weight: normal;
-              line-height: 16rem;
-              letter-spacing: 0rem;
-
-              /* 中性/次要文本色 */
-              /* 样式描述：7E849F */
-              color: #7e849f;
-              align-self: flex-end;
-            }
-          }
-
-          .btn {
-            border-radius: 100rem;
-            font-family: PingFang SC;
-            font-size: 14rem;
-            font-weight: 500;
-            line-height: 19rem;
-            text-align: center;
-            letter-spacing: 0rem;
-
-            color: #ffffff;
-            padding: 4rem 12rem;
-            height: 28rem;
-            cursor: pointer;
-          }
-        }
-
-        .singleItem {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-
-          >div {
-            margin-left: 36rem;
-
-            .title {
-              font-family: PingFang SC;
-              font-size: 14rem;
-              font-weight: 500;
-              line-height: normal;
-              letter-spacing: 0rem;
-              margin-left: 0;
-
-              /* 科个中性/正文-标题 17204D */
-              /* 样式描述：用于正文标题 */
-              color: #17204d;
-              margin-bottom: 4rem;
-            }
-
-            .content {
-              .nums {
-                font-size: 12rem;
-                font-weight: normal;
-                line-height: 16rem;
-                letter-spacing: 0rem;
-
-                z-index: 1;
-                font-family: PingFang SC;
-                font-weight: 500;
-                color: #17204d;
-
-                span {
-                  color: #7e849f;
-                  margin-left: 0;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
     .message-con {
       display: flex;
       flex-direction: column;
diff --git a/src/components/welcomes.vue b/src/components/welcomes.vue
index e5e6a79..c156eca 100644
--- a/src/components/welcomes.vue
+++ b/src/components/welcomes.vue
@@ -1,3 +1,47 @@
+<script setup>
+import { ref } from 'vue';
+const welcomeWord = ref('下午好，张先生')
+const welcomeSubWord = ref('我是您的服务管家皮卡丘')
+</script>
 <template>
-  <div></div>
-</template>
\ No newline at end of file
+  <div class="welcome-con">
+    <div class="welcome-title">{{ welcomeWord }}</div>
+    <div class="sub-title">{{ welcomeSubWord }}</div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.welcome-con {
+  padding: 23rem 8rem;
+
+  .welcome-title {
+    font-family: PingFang SC;
+    font-size: 20rem;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0em;
+
+    font-variation-settings: 'opsz' auto;
+    background: linear-gradient(266deg, #001a9c -18%, #0f194c 82%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+    margin-bottom: 4rem;
+  }
+
+  .sub-title {
+    font-family: PingFang SC;
+    font-size: 18rem;
+    font-weight: 600;
+    line-height: normal;
+    letter-spacing: 0em;
+    display: inline-block;
+    font-variation-settings: 'opsz' auto;
+    background: linear-gradient(240deg, #176cff 8%, #0f194c 31%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    text-fill-color: transparent;
+  }
+}
+</style>
\ No newline at end of file