From 7979a31e361d18f3d2db078dc802f037033f6bbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 23 Jul 2025 14:40:02 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BB=A3=E7=A0=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crmpc/customer/Add.vue       | 433 +++++++-------
 src/views/crmpc/customer/Edit.vue      |   4 +-
 src/views/crmpc/customer/Followadd.vue | 747 ++++++++++++-----------
 src/views/crmpc/customer/Show.vue      | 795 +++++++++++++------------
 4 files changed, 1022 insertions(+), 957 deletions(-)

diff --git a/src/views/crmpc/customer/Add.vue b/src/views/crmpc/customer/Add.vue
index e6c7b46..1feecaf 100644
--- a/src/views/crmpc/customer/Add.vue
+++ b/src/views/crmpc/customer/Add.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="customer-form-page">
     <div class="form-header">
-      <el-link  :underline="false" @click="goBack">
-        <i class="iconfont-sys icon-reverse">&#xe772;</i>  返回
+      <el-link underline="never" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
       </el-link>
       <span class="border"></span><span class="form-title">新增客户资料</span>
     </div>
@@ -18,19 +18,29 @@
         <el-col :span="24">
           <el-form-item label="客户渠道" prop="channel_id">
             <el-select v-model="form.channel_id" filterable placeholder="请选择客户渠道">
-              <el-option v-for="item in channelOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in channelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="客户商机" prop="magnitude">
             <el-select v-model="form.magnitude" placeholder="请选择客户商机">
-              <el-option v-for="item in opportunityOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in opportunityOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="客户名称" prop="contacts">
             <el-input v-model="form.contacts" placeholder="请输入客户名称" />
           </el-form-item>
-          <el-form-item label="客户性别" prop="sex" >
-            <el-radio-group v-model="form.sex" style="justify-content: flex-end;width: 100%;">
+          <el-form-item label="客户性别" prop="sex">
+            <el-radio-group v-model="form.sex" style="justify-content: flex-end; width: 100%">
               <el-radio label="0">未知</el-radio>
               <el-radio label="1">男</el-radio>
               <el-radio label="2">女</el-radio>
@@ -52,16 +62,31 @@
           </el-form-item> -->
           <el-form-item label="客户分级" prop="grade">
             <el-select v-model="form.grade" placeholder="请选择客户分级">
-              <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
+              <el-option
+                v-for="item in levelOptions"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="国家" prop="country_id">
             <el-select v-model="form.country_id" filterable placeholder="请选择国家">
-              <el-option v-for="item in countryOptions" :key="item.id" :label="item.cn_addr" :value="item.id" />
+              <el-option
+                v-for="item in countryOptions"
+                :key="item.id"
+                :label="item.cn_addr"
+                :value="item.id"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="公司" prop="company">
-            <el-input v-model="form.company" placeholder="请输入公司" @click="showMapDialog = true" readonly />
+            <el-input
+              v-model="form.company"
+              placeholder="请输入公司"
+              @click="showMapDialog = true"
+              readonly
+            />
           </el-form-item>
           <el-form-item label="备注" prop="describe">
             <el-input v-model="form.describe" type="textarea" :rows="3" placeholder="请输入备注" />
@@ -69,15 +94,15 @@
         </el-col>
       </el-row>
       <el-form-item class="submit-row">
-        <el-button type="primary" style="width:100%" @click="submitForm">提交</el-button>
-     </el-form-item>
+        <el-button type="primary" style="width: 100%" @click="submitForm">提交</el-button>
+      </el-form-item>
     </el-form>
   </div>
   <!-- 谷歌地图选点弹窗 -->
   <el-dialog v-model="showMapDialog" title="选择公司地址" width="800px">
-    <div style="height:400px;position:relative;">
+    <div style="height: 400px; position: relative">
       <!-- <input id="map-search" type="text" placeholder="搜索地点" style="position:absolute;z-index:2;top:10px;left:10px;width:300px;" /> -->
-      <div id="google-map" style="width:100%;height:100%;"></div>
+      <div id="google-map" style="width: 100%; height: 100%"></div>
     </div>
     <template #footer>
       <el-button @click="showMapDialog = false">取消</el-button>
@@ -87,221 +112,207 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue'
-import { ElMessage } from 'element-plus'
-import { useRouter } from 'vue-router'
-import { CrmService } from '@/api/crmApi'
+  import { ref, onMounted, watch, nextTick } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { useRouter } from 'vue-router'
+  import { CrmService } from '@/api/crmApi'
 
-const router = useRouter()
-const formRef = ref()
-const form = ref({
-  channel_id: '',
-  magnitude: '',
-  contacts: '',
-  sex: '0',
-  phone: '',
-  email: '',
-  WhatsApp: '',
-  grade: '',
-  country_id: '',
-  company: '',
-  describe: ''
-})
-
-const rules = {
-  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
-  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
-  // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
-}
-
-const channelOptions = ref<any>()
-const opportunityOptions = ref<any>()
-const intentionOptions = ref<any>()
-const levelOptions = ref<any>()
-const countryOptions = ref<any>()
-onMounted(() => {
-  getgetChannel()
-  getMagnitude()
-  getGrade()
-  getarea()
-})
-//渠道
-const getgetChannel = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getChannel()
-    channelOptions.value = res||[]
-  } catch (error) { channelOptions.value = [] }
-}
-//商机
-const getMagnitude = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getMagnitude()
-    opportunityOptions.value = res||[]
-  } catch (error) { opportunityOptions.value = [] }
-}
-//客户等级 
-const getGrade = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getGrade()
-    levelOptions.value = res||[]
-  } catch (error) { levelOptions.value = [] }
-}
-//国家
-const getarea = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getCountry()
-    countryOptions.value = res||[]
-  } catch (error) { countryOptions.value = [] }
-}
-function goBack() {
-  router.back()
-}
-
-function submitForm() {
-  formRef.value.validate(async (valid: boolean) => {
-    if (valid) {
-      try {
-        const res = await CrmService.customerAdd(form.value)
-        ElMessage.success(res?.message || '提交成功！')
-        router.push('/crmpc/customer')
-      } catch (e: any) {
-        ElMessage.error(e?.message || '提交失败')
-      }
-    }
+  const router = useRouter()
+  const formRef = ref()
+  const form = ref({
+    channel_id: '',
+    magnitude: '',
+    contacts: '',
+    sex: '0',
+    phone: '',
+    email: '',
+    WhatsApp: '',
+    grade: '',
+    country_id: '',
+    company: '',
+    describe: ''
   })
-}
 
-const showMapDialog = ref(false)
-const selectedAddress = ref('')
-const selectedLatLng = ref({ lat: null, lng: null })
-
-function confirmMapSelect() {
-  form.value.company = selectedAddress.value
-  // 你也可以保存 selectedLatLng.value 到 form
-  showMapDialog.value = false
-}
-
-let map: any, marker: any, autocomplete: any
-
-function initMap() {
-  const google = (window as any).google;
-  const input = document.getElementById('map-search') as HTMLInputElement;
-  if (!input) {
-    setTimeout(initMap, 100);
-    return;
+  const rules = {
+    channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
+    // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
   }
-  map = new google.maps.Map(document.getElementById('google-map'), {
-    center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
-    zoom: 12
-  })
 
-  marker = new google.maps.Marker({
-    map,
-    draggable: true
+  const channelOptions = ref<any>()
+  const opportunityOptions = ref<any>()
+  const levelOptions = ref<any>()
+  const countryOptions = ref<any>()
+  onMounted(() => {
+    getgetChannel()
+    getMagnitude()
+    getGrade()
+    getarea()
   })
+  //渠道
+  const getgetChannel = async () => {
+    const res = await CrmService.getChannel()
+    channelOptions.value = res || []
+  }
+  //商机
+  const getMagnitude = async () => {
+    const res = await CrmService.getMagnitude()
+    opportunityOptions.value = res || []
+  }
+  //客户等级
+  const getGrade = async () => {
+    const res = await CrmService.getGrade()
+    levelOptions.value = res || []
+  }
+  //国家
+  const getarea = async () => {
+    const res = await CrmService.getCountry()
+    countryOptions.value = res || []
+  }
+  function goBack() {
+    router.back()
+  }
 
-  map.addListener('click', (e: any) => {
-    marker.setPosition(e.latLng)
-    getAddressByLatLng(e.latLng)
-  })
-
-  marker.addListener('dragend', (e: any) => {
-    getAddressByLatLng(e.latLng)
-  })
-
-  autocomplete = new google.maps.places.Autocomplete(input)
-  autocomplete.bindTo('bounds', map)
-  autocomplete.addListener('place_changed', () => {
-    const place = autocomplete.getPlace()
-    if (!place.geometry) return
-    map.panTo(place.geometry.location)
-    marker.setPosition(place.geometry.location)
-    getAddressByLatLng(place.geometry.location)
-  })
-}
-
-function getAddressByLatLng(latlng: any) {
-  const google = (window as any).google;
-  const geocoder = new google.maps.Geocoder()
-  geocoder.geocode({ location: latlng }, (results: any, status: any) => {
-    if (status === 'OK' && results[0]) {
-      selectedAddress.value = results[0].formatted_address
-      selectedLatLng.value = {
-        lat: latlng.lat(),
-        lng: latlng.lng()
-      }
-    }
-  })
-}
-
-watch(showMapDialog, (val) => {
-  if (val) {
-    nextTick(() => {
-      setTimeout(() => {
-        const google = (window as any).google;
-        if (!google || !google.maps) {
-          const script = document.createElement('script')
-          script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
-          script.async = true
-          script.onload = initMap
-          document.head.appendChild(script)
-        } else {
-          initMap()
+  function submitForm() {
+    formRef.value.validate(async (valid: boolean) => {
+      if (valid) {
+        try {
+          const res = await CrmService.customerAdd(form.value)
+          ElMessage.success(res?.message || '提交成功！')
+          router.push('/crmpc/customer')
+        } catch (e: any) {
+          ElMessage.error(e?.message || '提交失败')
         }
-      }, 100)
+      }
     })
   }
-})
+
+  const showMapDialog = ref(false)
+  const selectedAddress = ref('')
+  const selectedLatLng = ref({ lat: null, lng: null })
+
+  function confirmMapSelect() {
+    form.value.company = selectedAddress.value
+    // 你也可以保存 selectedLatLng.value 到 form
+    showMapDialog.value = false
+  }
+
+  let map: any, marker: any, autocomplete: any
+
+  function initMap() {
+    const google = (window as any).google
+    const input = document.getElementById('map-search') as HTMLInputElement
+    if (!input) {
+      setTimeout(initMap, 100)
+      return
+    }
+    map = new google.maps.Map(document.getElementById('google-map'), {
+      center: { lat: 39.9042, lng: 116.4074 }, // 默认北京
+      zoom: 12
+    })
+
+    marker = new google.maps.Marker({
+      map,
+      draggable: true
+    })
+
+    map.addListener('click', (e: any) => {
+      marker.setPosition(e.latLng)
+      getAddressByLatLng(e.latLng)
+    })
+
+    marker.addListener('dragend', (e: any) => {
+      getAddressByLatLng(e.latLng)
+    })
+
+    autocomplete = new google.maps.places.Autocomplete(input)
+    autocomplete.bindTo('bounds', map)
+    autocomplete.addListener('place_changed', () => {
+      const place = autocomplete.getPlace()
+      if (!place.geometry) return
+      map.panTo(place.geometry.location)
+      marker.setPosition(place.geometry.location)
+      getAddressByLatLng(place.geometry.location)
+    })
+  }
+
+  function getAddressByLatLng(latlng: any) {
+    const google = (window as any).google
+    const geocoder = new google.maps.Geocoder()
+    geocoder.geocode({ location: latlng }, (results: any, status: any) => {
+      if (status === 'OK' && results[0]) {
+        selectedAddress.value = results[0].formatted_address
+        selectedLatLng.value = {
+          lat: latlng.lat(),
+          lng: latlng.lng()
+        }
+      }
+    })
+  }
+
+  watch(showMapDialog, (val) => {
+    if (val) {
+      nextTick(() => {
+        setTimeout(() => {
+          const google = (window as any).google
+          if (!google || !google.maps) {
+            const script = document.createElement('script')
+            script.src = `https://maps.googleapis.com/maps/api/js?key=AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I&libraries=places`
+            script.async = true
+            script.onload = initMap
+            document.head.appendChild(script)
+          } else {
+            initMap()
+          }
+        }, 100)
+      })
+    }
+  })
 </script>
 
 <style scoped>
-.border{
-  
-  margin: 0px 10px 0px 40px;
-}
-.submit-row .el-form-item__content {
-  display: flex;
-  justify-content: center;
-}
-.icon-reverse {
-  display: inline-block;
-  transform: rotate(270deg); /* 旋转180度 */
-}
-.customer-form-page {
-  min-height: 100vh;
-  background: #fff;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 18px;
-}
-.form-header {
+  .border {
+    margin: 0px 10px 0px 40px;
+  }
+  .submit-row .el-form-item__content {
+    display: flex;
+    justify-content: center;
+  }
+  .icon-reverse {
+    display: inline-block;
+    transform: rotate(270deg); /* 旋转180度 */
+  }
+  .customer-form-page {
+    min-height: 100vh;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 18px;
+  }
+  .form-header {
     width: 98%;
     margin-bottom: 24px;
     display: flex;
     align-items: center;
     font-size: 18px;
     justify-content: flex-start; /* 新增，左对齐 */
-}
-.form-title{
-  font-weight: bold;
-  color: #222;
-}
+  }
+  .form-title {
+    font-weight: bold;
+    color: #222;
+  }
 
-.customer-form {
-  width: 600px;
-  background: #fff;
-  padding: 10px 24px 16px 24px;
-}
-.el-form-item {
-  margin-bottom: 18px;
-}
-.el-form-item__label {
-  color: #222;
-  font-weight: 500;
-}
-</style> 
\ No newline at end of file
+  .customer-form {
+    width: 600px;
+    background: #fff;
+    padding: 10px 24px 16px 24px;
+  }
+  .el-form-item {
+    margin-bottom: 18px;
+  }
+  .el-form-item__label {
+    color: #222;
+    font-weight: 500;
+  }
+</style>
diff --git a/src/views/crmpc/customer/Edit.vue b/src/views/crmpc/customer/Edit.vue
index fc57507..3b1b692 100644
--- a/src/views/crmpc/customer/Edit.vue
+++ b/src/views/crmpc/customer/Edit.vue
@@ -107,7 +107,7 @@
 
   const rules = {
     channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
-    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+    name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }]
     // car_type_id: [{ required: true, message: '请选择客户偏好', trigger: 'change' }]
   }
 
@@ -245,4 +245,4 @@
     color: #222;
     font-weight: 500;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/crmpc/customer/Followadd.vue b/src/views/crmpc/customer/Followadd.vue
index cc1cb8d..df33770 100644
--- a/src/views/crmpc/customer/Followadd.vue
+++ b/src/views/crmpc/customer/Followadd.vue
@@ -1,41 +1,53 @@
 <template>
   <div class="follow-add-page">
     <div class="boxshadow pad20">
-      <el-link :underline="false" @click="goBack">
+      <el-link underline="never" @click="goBack">
         <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
       </el-link>
-      <span class="border"></span><span class="edit-title" style="margin-left: 12px;">添加跟进</span>
+      <span class="border"></span><span class="edit-title" style="margin-left: 12px">添加跟进</span>
     </div>
-    <div class="edit-header boxshadow" style="position:relative;">
+    <div class="edit-header boxshadow" style="position: relative">
       <!-- 右上角三角形角标 -->
-      <div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
-      <el-row :gutter="20" style="flex: 1;">
-          <el-col :sm="24" :md="6" :lg="4">
-              <span>客户名称：{{ customerInfo.contacts }}</span>
-          </el-col>
-          <el-col :sm="24" :md="6" :lg="4">
-              <span>渠道：{{customerInfo.channel_name}}</span>
-          </el-col>
-          <el-col :sm="24" :md="6" :lg="5">
-              <span>联系方式：{{customerInfo.phone}}</span>
-          </el-col>
-          <el-col :sm="24" :md="6" :lg="4">
-              <span>客户偏好：{{customerInfo.car_type_name}}</span>
-          </el-col>
-          <el-col :sm="24" :md="6" :lg="4">
-              <span>客户商机：{{customerInfo.magnitude_txt}}</span>
-          </el-col>
-        </el-row>
+      <div class="corner-tag"
+        ><span class="corner-text">{{ customerInfo.follow_txt }}</span></div
+      >
+      <el-row :gutter="20" style="flex: 1">
+        <el-col :sm="24" :md="6" :lg="4">
+          <span>客户名称：{{ customerInfo.contacts }}</span>
+        </el-col>
+        <el-col :sm="24" :md="6" :lg="4">
+          <span>渠道：{{ customerInfo.channel_name }}</span>
+        </el-col>
+        <el-col :sm="24" :md="6" :lg="5">
+          <span>联系方式：{{ customerInfo.phone }}</span>
+        </el-col>
+        <el-col :sm="24" :md="6" :lg="4">
+          <span>客户偏好：{{ customerInfo.car_type_name }}</span>
+        </el-col>
+        <el-col :sm="24" :md="6" :lg="4">
+          <span>客户商机：{{ customerInfo.magnitude_txt }}</span>
+        </el-col>
+      </el-row>
     </div>
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">客户分级</span>
-        <el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange">
-          <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
+        <el-select
+          v-model="customerInfo.grade"
+          placeholder="请选择客户分级"
+          style="width: 120px; margin-left: 16px"
+          @change="handleGradeChange"
+        >
+          <el-option
+            v-for="item in levelOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
         </el-select>
       </div>
     </el-card>
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">跟进方式</span>
         <el-radio-group v-model="form.type">
@@ -44,18 +56,23 @@
         </el-radio-group>
       </div>
     </el-card>
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">跟进时间</span>
-        <el-date-picker v-model="form.firstFollowtime" type="datetime" :value-format="'YYYY-MM-DD HH:mm:ss'" style="width: 200px;" />
+        <el-date-picker
+          v-model="form.firstFollowtime"
+          type="datetime"
+          :value-format="'YYYY-MM-DD HH:mm:ss'"
+          style="width: 200px"
+        />
       </div>
     </el-card>
-    <el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type == '1'" class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-top">
         <span class="edit-title">上传跟进截图/聊天截图</span>
         <el-upload
           class="upload-demo"
-          :action="actionImageUplode" 
+          :action="actionImageUplode"
           :headers="uploadHeaders"
           :on-success="handleUploadSuccess"
           :show-file-list="false"
@@ -64,25 +81,31 @@
         </el-upload>
       </div>
     </el-card>
-    <el-card v-if="form.type=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type == '1'" class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-top">
         <span class="edit-title">跟进描述</span>
-        <el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述"  />
+        <el-input v-model="form.audio_text" type="textarea" placeholder="请输入跟进描述" />
       </div>
     </el-card>
-    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">当前位置</span>
-        <el-input v-model="followDesc" type="input" placeholder="请输入当前位置" style="width: 200px;" disabled>
+        <el-input
+          v-model="followDesc"
+          type="input"
+          placeholder="请输入当前位置"
+          style="width: 200px"
+          disabled
+        >
         </el-input>
       </div>
     </el-card>
-    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-top">
         <span class="edit-title">当前位置拍照上传</span>
         <el-upload
           class="upload-demo"
-          :action="actionImageUplode" 
+          :action="actionImageUplode"
           :headers="uploadHeaders"
           :on-success="handleUploadSuccess1"
           :show-file-list="false"
@@ -91,24 +114,25 @@
         </el-upload>
       </div>
     </el-card>
-    <el-card v-if="form.type=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card v-if="form.type == '0'" class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-top">
         <span class="edit-title">拜访内容</span>
         <el-input v-model="form.audio_text" type="textarea" placeholder="请输入拜访内容" />
       </div>
     </el-card>
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-top">
         <span class="edit-title">备注</span>
         <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
       </div>
     </el-card>
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div>
-        <span class="border" style="margin: 0px 10px 0px 0px;"></span><span class="edit-title">跟进记录</span>
+        <span class="border" style="margin: 0px 10px 0px 0px"></span
+        ><span class="edit-title">跟进记录</span>
       </div>
       <div class="follow-list">
-        <ElScrollbar >
+        <ElScrollbar>
           <template v-if="followList.length > 0">
             <ElTimeline>
               <ElTimelineItem
@@ -121,10 +145,21 @@
                 <div class="timeline-item">
                   <div class="timeline-content-row">
                     <div class="timeline-content">
-                      <p class="timeline-text">{{item.type_txt}}  <span class="timeline-mom">{{ item.created_at }}</span></p>
-                      <p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span>  {{ item.audio_text }}</p>
+                      <p class="timeline-text"
+                        >{{ item.type_txt }}
+                        <span class="timeline-mom">{{ item.created_at }}</span></p
+                      >
+                      <p class="timeline-mom"
+                        ><span v-if="item.type == 1">跟进描述</span><span v-else>拜访内容</span>
+                        {{ item.audio_text }}</p
+                      >
                     </div>
-                    <img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
+                    <img
+                      v-if="item.picture_full"
+                      :src="item.picture_full"
+                      class="timeline-img"
+                      alt="图片"
+                    />
                   </div>
                 </div>
               </ElTimelineItem>
@@ -132,7 +167,7 @@
           </template>
           <template v-else>
             <!-- 使用 Element Plus 的空状态组件 -->
-            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <el-empty :image="emptyimg" description="暂无跟进记录" />
             <!-- <el-empty /> -->
             <!-- 或者自定义图片 -->
             <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
@@ -158,7 +193,7 @@
         <div class="remind-title">下次跟进提醒设置</div>
         <div class="remind-options">
           <div
-            v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')"
+            v-for="item in remindOptions.filter((opt) => opt.value !== 'custom')"
             :key="item.value"
             :class="['remind-btn', { active: remindValue === item.value }]"
             @click="remindValue = item.value"
@@ -167,12 +202,12 @@
           </div>
         </div>
         <el-date-picker
-            v-model="customDate"
-            type="datetime"
-            placeholder="自定义"
-            style="width:100%;"
-            CircleClose
-            :disabled-date="disabledPastDate"
+          v-model="customDate"
+          type="datetime"
+          placeholder="自定义"
+          style="width: 100%"
+          CircleClose
+          :disabled-date="disabledPastDate"
         />
         <el-button type="primary" class="confirm-btn" @click="handleSuccessConfirm">确定</el-button>
       </div>
@@ -181,335 +216,329 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import emptyimg from '@/assets/img/crm/empty.png'
-import imageUrl1 from '@/assets/img/crm/upimg.png'
-import { ElMessage } from 'element-plus'
-import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
-import { CrmService } from '@/api/crmApi'
-import { useUploadHeaders } from '@/composables/useUploadHeaders'
-const { uploadHeaders } = useUploadHeaders()
-let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
-const TIMELINE_PLACEMENT = 'top'
-const router = useRouter()
-const route = useRoute()
-const customerId = route.query.id
-const levelOptions = ref<any>()
-const followDesc = ref('')
-const activecolor = "#3471FF"
+  import { ref } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+  import emptyimg from '@/assets/img/crm/empty.png'
+  import imageUrl1 from '@/assets/img/crm/upimg.png'
+  import { ElMessage } from 'element-plus'
+  import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
+  import { CrmService } from '@/api/crmApi'
+  import { useUploadHeaders } from '@/composables/useUploadHeaders'
+  const { uploadHeaders } = useUploadHeaders()
+  let actionImageUplode = `${import.meta.env.VITE_API_URL}/ticket/upload`
+  const TIMELINE_PLACEMENT = 'top'
+  const router = useRouter()
+  const route = useRoute()
+  const customerId = route.query.id
+  const levelOptions = ref<any>()
+  const followDesc = ref('')
+  const activecolor = '#3471FF'
 
-const successDialogVisible = ref(false) // 控制弹窗显示
-const remindValue = ref('1')
-const customDate = ref('')
-const imageUrl = ref(imageUrl1)
-const imageUrls = ref(imageUrl1)
-function getNowStr() {
-  const d = new Date()
-  const pad = (n: any) => n < 10 ? '0' + n : n
-  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
-}
-const form=ref({
-    customer_id:route.query.id,
+  const successDialogVisible = ref(false) // 控制弹窗显示
+  const remindValue = ref('1')
+  const customDate = ref('')
+  const imageUrl = ref(imageUrl1)
+  const imageUrls = ref(imageUrl1)
+  function getNowStr() {
+    const d = new Date()
+    const pad = (n: any) => (n < 10 ? '0' + n : n)
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+  }
+  const form = ref({
+    customer_id: route.query.id,
     type: '1',
     address: '',
     lat: '',
     lng: '',
     firstFollowtime: getNowStr(),
-    audio_text:'',
-    remark:'',
-    picture:''
+    audio_text: '',
+    remark: '',
+    picture: ''
   })
 
-// 定义客户详情类型
-interface CustomerInfo {
-  contacts?: string
-  // 可根据实际接口补充更多字段
-  [key: string]: any
-}
-const customerInfo = ref<CustomerInfo>({})
-const followList = ref<CustomerInfo>({})
-//获取详情
-const getdetilfn = async() => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getcustomerdetail({id:customerId})
+  // 定义客户详情类型
+  interface CustomerInfo {
+    contacts?: string
+    // 可根据实际接口补充更多字段
+    [key: string]: any
+  }
+  const customerInfo = ref<CustomerInfo>({})
+  const followList = ref<CustomerInfo>({})
+  //获取详情
+  const getdetilfn = async () => {
+    const res = await CrmService.getcustomerdetail({ id: customerId })
     customerInfo.value = res
-    console.log(res)
-  } catch (error) { }
-}
-//客户等级 
-const getGrade = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
+  }
+  //客户等级
+  const getGrade = async () => {
     const res = await CrmService.getGrade()
-    levelOptions.value = res||[]
-  } catch (error) { levelOptions.value = [] }
-}
-onMounted(async () => {
-  await getGrade()
-  await getdetilfn()
-  getCurrentLocation()
-  getfollowlist()
-})
-//修改等级
-function handleGradeChange(newGrade: number) {
-  if (!customerId) return
-  CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
-    ElMessage.success(res?.message || '修改成功')
-  }).catch(() => {
-    ElMessage.error('修改失败')
+    levelOptions.value = res || []
+  }
+  onMounted(async () => {
+    await getGrade()
+    await getdetilfn()
+    getCurrentLocation()
+    getfollowlist()
   })
-}
-//跟进记录getfollowlist
-const getfollowlist = async () => {
-  try {
-    const res = await CrmService.getfollowlist({customer_id:route.query.id})
-    followList.value = res||[]
-  } catch (error) { followList.value = [] }
-}
+  //修改等级
+  function handleGradeChange(newGrade: number) {
+    if (!customerId) return
+    CrmService.customergrade({ id: customerId, grade: newGrade })
+      .then((res) => {
+        ElMessage.success(res?.message || '修改成功')
+      })
+      .catch(() => {
+        ElMessage.error('修改失败')
+      })
+  }
+  //跟进记录getfollowlist
+  const getfollowlist = async () => {
+    const res = await CrmService.getfollowlist({ customer_id: route.query.id })
+    followList.value = res || []
+  }
 
+  const remindOptions = [
+    { label: '1天后', value: '1' },
+    { label: '3天后', value: '3' },
+    { label: '7天后', value: '7' }
+  ]
 
-
-const remindOptions = [
-  { label: '1天后', value: '1' },
-  { label: '3天后', value: '3' },
-  { label: '7天后', value: '7' }
-]
-
-function disabledPastDate(time: Date) {
-  return time.getTime() < Date.now() - 86400000
-}
-const handleSuccessConfirm = async () =>{
-  let remindTimestamp = null
-  if (remindValue.value === 'custom') {
-    if (!customDate.value) {
-      return ElMessage.warning('请选择自定义日期时间')
+  function disabledPastDate(time: Date) {
+    return time.getTime() < Date.now() - 86400000
+  }
+  const handleSuccessConfirm = async () => {
+    let remindTimestamp = null
+    if (remindValue.value === 'custom') {
+      if (!customDate.value) {
+        return ElMessage.warning('请选择自定义日期时间')
+      }
+      // 自定义日期转时间戳
+      remindTimestamp = Math.floor(new Date(customDate.value).getTime() / 1000)
+    } else {
+      // 固定天数，当前时间加天数
+      const days = Number(remindValue.value)
+      remindTimestamp = Math.floor((Date.now() + days * 24 * 60 * 60 * 1000) / 1000)
     }
-    // 自定义日期转时间戳
-    remindTimestamp = Math.floor(new Date(customDate.value).getTime() / 1000)
-  } else {
-    // 固定天数，当前时间加天数
-    const days = Number(remindValue.value)
-    remindTimestamp = Math.floor((Date.now() + days * 24 * 60 * 60 * 1000) / 1000)
-  }
-  const res = await CrmService.followNext({id:customerId,follow_next:remindTimestamp})
-  ElMessage.success(res?.message || '提交成功！')
-  successDialogVisible.value = false
-  setTimeout(() => {
-    router.push('/crmpc/customer')
-    }, 1000);
-}
-function goBack() {
-  router.back()
-}
-const handleSubmit = async () => {
-  try {
-    form.value.address=followDesc.value
-    const res = await CrmService.followAdd(form.value)
+    const res = await CrmService.followNext({ id: customerId, follow_next: remindTimestamp })
     ElMessage.success(res?.message || '提交成功！')
-    successDialogVisible.value=true
-    // router.push('/crmpc/customer')
-  } catch (e: any) {
-    ElMessage.error(e?.message || '提交失败')
+    successDialogVisible.value = false
+    setTimeout(() => {
+      router.push('/crmpc/customer')
+    }, 1000)
   }
-}
-// 在 <script setup> 里添加获取地理位置方法
-function getCurrentLocation() {
-  if (navigator.geolocation) {
-    navigator.geolocation.getCurrentPosition(
-      async (position) => {
-        const { latitude, longitude } = position.coords
-        // 可选：调用第三方逆地理编码API获取详细地址
-        const googleKey = 'AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I'
-        const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${googleKey}`
-        try {
-          const res = await fetch(url)
-          const data = await res.json()
-          if (data.status === 'OK' && data.plus_code) {
-            followDesc.value = data.plus_code.compound_code
-          } else {
+  function goBack() {
+    router.back()
+  }
+  const handleSubmit = async () => {
+    try {
+      form.value.address = followDesc.value
+      const res = await CrmService.followAdd(form.value)
+      ElMessage.success(res?.message || '提交成功！')
+      successDialogVisible.value = true
+      // router.push('/crmpc/customer')
+    } catch (e: any) {
+      ElMessage.error(e?.message || '提交失败')
+    }
+  }
+  // 在 <script setup> 里添加获取地理位置方法
+  function getCurrentLocation() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        async (position) => {
+          const { latitude, longitude } = position.coords
+          // 可选：调用第三方逆地理编码API获取详细地址
+          const googleKey = 'AIzaSyCiQdUlA2QrEBEaZthoj7B18HTz6sxU_3I'
+          const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${googleKey}`
+          try {
+            const res = await fetch(url)
+            const data = await res.json()
+            if (data.status === 'OK' && data.plus_code) {
+              followDesc.value = data.plus_code.compound_code
+            } else {
+              followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
+            }
+          } catch (e) {
+            console.error('获取地址失败:', e)
             followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
           }
-        } catch (e) {
-          followDesc.value = `纬度: ${latitude}, 经度: ${longitude}`
+        },
+        (error) => {
+          console.log('定位失败:', error)
+          followDesc.value = '无法获取当前位置'
         }
-      },
-      (error) => {
-        followDesc.value = '无法获取当前位置'
-      }
-    )
-  } else {
-    followDesc.value = '浏览器不支持定位功能'
+      )
+    } else {
+      followDesc.value = '浏览器不支持定位功能'
+    }
+  }
+  function handleUploadSuccess(response: any) {
+    // 假设返回图片地址字段为 response.url 或 response.data.url
+    imageUrl.value = response.url || (response.data && response.data.file_url) || ''
+    // 如需同步到 form.picture
+    form.value.picture = response.url || (response.data && response.data.file_name) || ''
+  }
+  function handleUploadSuccess1(response: any) {
+    // 假设返回图片地址字段为 response.url 或 response.data.url
+    imageUrls.value = response.url || (response.data && response.data.file_url) || ''
+    // 如需同步到 form.picture
+    form.value.picture = response.url || (response.data && response.data.file_name) || ''
   }
-}
-function handleUploadSuccess(response: any) {
-  // 假设返回图片地址字段为 response.url 或 response.data.url
-  imageUrl.value = response.url || (response.data && response.data.file_url) || ''
-  // 如需同步到 form.picture
-  form.value.picture = response.url || (response.data && response.data.file_name) || ''
-}
-function handleUploadSuccess1(response: any) {
-  // 假设返回图片地址字段为 response.url 或 response.data.url
-  imageUrls.value = response.url || (response.data && response.data.file_url) || ''
-  // 如需同步到 form.picture
-  form.value.picture = response.url || (response.data && response.data.file_name) || ''
-}
 </script>
 
 <style scoped>
-.timeline-content-row{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.avatar,.timeline-img{
-  width: 80px;
-}
-.border{
-  margin-left: 30px;
-}
-.info-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between; /* 两端对齐 */
-  font-size: 15px;
-  padding: 0;
-}
-.edit-header{
-  padding: 40px 20px;
-}
-.follow-add-page {
-  background: #f7f9fa;
-  min-height: 100vh;
-  padding: 24px;
-}
-.boxshadow {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
-}
-.pad20 {
-  padding: 20px;
-}
-.edit-title {
-  font-size: 18px;
-  font-weight: bold;
-}
-.info-card {
-  margin-bottom: 0;
-  border-radius: 8px;
-}
+  .timeline-content-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .avatar,
+  .timeline-img {
+    width: 80px;
+  }
+  .border {
+    margin-left: 30px;
+  }
+  .info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* 两端对齐 */
+    font-size: 15px;
+    padding: 0;
+  }
+  .edit-header {
+    padding: 40px 20px;
+  }
+  .follow-add-page {
+    background: #f7f9fa;
+    min-height: 100vh;
+    padding: 24px;
+  }
+  .boxshadow {
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.04);
+  }
+  .pad20 {
+    padding: 20px;
+  }
+  .edit-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .info-card {
+    margin-bottom: 0;
+    border-radius: 8px;
+  }
 
-.submit-btn {
-  display: block;
-  width: 240px;
-  margin: 32px auto 0 auto;
-  font-size: 18px;
-  height: 48px;
-  border-radius: 6px;
-}
-.corner-tag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 90px;
-  height: 90px;
-  background: transparent;
-  z-index: 2;
-  pointer-events: none;
-}
-.corner-tag::before {
-  content: '';
-  position: absolute;
-  top: -9px;
-  right: -9px;
-  width: 90px;
-  height: 75px;
-  background: #3471FF;
-  clip-path: polygon(100% 0, 0 0, 100% 100%);
-  border-top-right-radius: 12px;
-}
-.corner-tag {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  color: #fff;
-  font-size: 16px;
-  font-weight: bold;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 55px;
-  height: 40px;
-  z-index: 3;
-  padding-top: 6px;
-  padding-right: 0px;
-  pointer-events: none;
-}
-.corner-text {
-  display: inline-block;
-  transform: rotate(45deg);
-}
-.info-top span{
-  margin-bottom: 15px;
-  display: inline-block;
-}
-/* 成功弹出层 */
-.success-dialog-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 12px 0 0 0;
-}
-.success-img {
-  width:55%;
-  margin-bottom: 12px;
-}
-.conts{
-  margin-top: -55px;
-}
-.success-title {
-  font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 40px;
-  color: #333;
-  text-align: center;
-}
-.remind-title {
-  font-size: 16px;
-  color: #333;
-  margin-bottom: 20px;
-}
-.remind-options {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-.remind-btn {
-  background: #f4f7fe;
-  color: #3471FF;
-  border-radius: 8px;
-  padding: 6px 18px;
-  cursor: pointer;
-  font-size: 15px;
-  border: 1px solid transparent;
-  transition: all 0.2s;
-  min-width: 64px;
-  text-align: center;
-  flex: 1;
-}
-.remind-btn.active {
-  background: #3471FF;
-  color: #fff;
-  border: 1px solid #3471FF;
-}
-.confirm-btn {
-  width: 100%;
-  height: 44px;
-  font-size: 18px;
-  border-radius: 6px;
-  margin-top: 16px;
-}
-</style>
\ No newline at end of file
+  .submit-btn {
+    display: block;
+    width: 240px;
+    margin: 32px auto 0 auto;
+    font-size: 18px;
+    height: 48px;
+    border-radius: 6px;
+  }
+  .corner-tag {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 90px;
+    height: 90px;
+    background: transparent;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .corner-tag::before {
+    content: '';
+    position: absolute;
+    top: -9px;
+    right: -9px;
+    width: 90px;
+    height: 75px;
+    background: #3471ff;
+    clip-path: polygon(100% 0, 0 0, 100% 100%);
+    border-top-right-radius: 12px;
+  }
+  .corner-tag {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 55px;
+    height: 40px;
+    z-index: 3;
+    padding-top: 6px;
+    padding-right: 0px;
+    pointer-events: none;
+  }
+  .corner-text {
+    display: inline-block;
+    transform: rotate(45deg);
+  }
+  .info-top span {
+    margin-bottom: 15px;
+    display: inline-block;
+  }
+  /* 成功弹出层 */
+  .success-dialog-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 0 0 0;
+  }
+  .success-img {
+    width: 55%;
+    margin-bottom: 12px;
+  }
+  .conts {
+    margin-top: -55px;
+  }
+  .success-title {
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 40px;
+    color: #333;
+    text-align: center;
+  }
+  .remind-title {
+    font-size: 16px;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  .remind-options {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+  .remind-btn {
+    background: #f4f7fe;
+    color: #3471ff;
+    border-radius: 8px;
+    padding: 6px 18px;
+    cursor: pointer;
+    font-size: 15px;
+    border: 1px solid transparent;
+    transition: all 0.2s;
+    min-width: 64px;
+    text-align: center;
+    flex: 1;
+  }
+  .remind-btn.active {
+    background: #3471ff;
+    color: #fff;
+    border: 1px solid #3471ff;
+  }
+  .confirm-btn {
+    width: 100%;
+    height: 44px;
+    font-size: 18px;
+    border-radius: 6px;
+    margin-top: 16px;
+  }
+</style>
diff --git a/src/views/crmpc/customer/Show.vue b/src/views/crmpc/customer/Show.vue
index 9e378c3..fef4472 100644
--- a/src/views/crmpc/customer/Show.vue
+++ b/src/views/crmpc/customer/Show.vue
@@ -1,62 +1,82 @@
 <template>
   <div class="customer-edit-page">
     <div class="boxshadow pad20">
-        <el-link :underline="false" @click="goBack">
-            <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
-        </el-link>
+      <el-link underline="never" @click="goBack">
+        <i class="iconfont-sys icon-reverse">&#xe772;</i> 返回
+      </el-link>
     </div>
-    <div class="edit-header boxshadow pad20" style="position:relative;">
+    <div class="edit-header boxshadow pad20" style="position: relative">
       <span class="border"></span><span class="edit-title">客户资料</span>
       <!-- 右上角三角形角标 -->
-      <div class="corner-tag"><span class="corner-text">{{customerInfo.follow_txt}}</span></div>
+      <div class="corner-tag"
+        ><span class="corner-text">{{ customerInfo.follow_txt }}</span></div
+      >
       <div class="info-row-bar">
-        <el-row :gutter="20" style="flex: 1;">
-                <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户名称：{{ customerInfo.contacts }}</span>
-                </el-col>
-                <el-col :sm="24" :md="6" :lg="4">
-                    <span>渠道：{{customerInfo.channel_name}}</span>
-                </el-col>
-                <el-col :sm="24" :md="6" :lg="5">
-                    <span>联系方式：{{customerInfo.phone}}</span>
-                </el-col>
-                <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户偏好：{{customerInfo.car_type_name}}</span>
-                </el-col>
-                <el-col :sm="24" :md="6" :lg="4">
-                    <span>客户商机：{{customerInfo.magnitude_txt}}</span>
-                </el-col>
-            </el-row>
-        <el-button @click="goEdit" type="primary" class="edit-btn" size="small"><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button>
+        <el-row :gutter="20" style="flex: 1">
+          <el-col :sm="24" :md="6" :lg="4">
+            <span>客户名称：{{ customerInfo.contacts }}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+            <span>渠道：{{ customerInfo.channel_name }}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="5">
+            <span>联系方式：{{ customerInfo.phone }}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+            <span>客户偏好：{{ customerInfo.car_type_name }}</span>
+          </el-col>
+          <el-col :sm="24" :md="6" :lg="4">
+            <span>客户商机：{{ customerInfo.magnitude_txt }}</span>
+          </el-col>
+        </el-row>
+        <el-button @click="goEdit" type="primary" class="edit-btn" size="small"
+          ><i class="iconfont-sys"> &#xe6bf;</i> 编辑资料</el-button
+        >
       </div>
     </div>
 
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="">
         <span class="border"></span><span class="edit-title">客户画像</span>
-        <el-button @click="addtag" type="primary" size="small" style="float: right;">添加标签</el-button>
+        <el-button @click="addtag" type="primary" size="small" style="float: right"
+          >添加标签</el-button
+        >
       </div>
       <div class="tag-list">
-        <el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{item.name}}</el-tag>
+        <el-tag type="primary" v-for="(item, index) in customerInfo.tags" :key="index">{{
+          item.name
+        }}</el-tag>
       </div>
     </el-card>
 
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">客户分级</span>
-        <el-select v-model="customerInfo.grade" placeholder="请选择客户分级" style="width: 120px; margin-left: 16px;" @change="handleGradeChange">
-          <el-option v-for="item in levelOptions" :key="item.id" :label="item.name" :value="item.id" />
+        <el-select
+          v-model="customerInfo.grade"
+          placeholder="请选择客户分级"
+          style="width: 120px; margin-left: 16px"
+          @change="handleGradeChange"
+        >
+          <el-option
+            v-for="item in levelOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
         </el-select>
       </div>
     </el-card>
 
-    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+    <el-card class="info-card" shadow="never" style="margin-top: 16px">
       <div class="info-row">
         <span class="edit-title">跟进记录</span>
-        <el-button type="primary" size="small" style="float: right;" @click="goAddFollow">+ 添加跟进</el-button>
+        <el-button type="primary" size="small" style="float: right" @click="goAddFollow"
+          >+ 添加跟进</el-button
+        >
       </div>
       <div class="follow-list">
-        <ElScrollbar >
+        <ElScrollbar>
           <template v-if="followList.length > 0">
             <ElTimeline>
               <ElTimelineItem
@@ -69,10 +89,21 @@
                 <div class="timeline-item">
                   <div class="timeline-content-row">
                     <div class="timeline-content">
-                      <p class="timeline-text">{{item.type_txt}}  <span class="timeline-mom">{{ item.created_at }}</span></p>
-                      <p class="timeline-mom"><span v-if="item.type==1">跟进描述</span><span v-else>拜访内容</span>  {{ item.audio_text }}</p>
+                      <p class="timeline-text"
+                        >{{ item.type_txt }}
+                        <span class="timeline-mom">{{ item.created_at }}</span></p
+                      >
+                      <p class="timeline-mom"
+                        ><span v-if="item.type == 1">跟进描述</span><span v-else>拜访内容</span>
+                        {{ item.audio_text }}</p
+                      >
                     </div>
-                    <img v-if="item.picture_full" :src="item.picture_full" class="timeline-img" alt="图片" />
+                    <img
+                      v-if="item.picture_full"
+                      :src="item.picture_full"
+                      class="timeline-img"
+                      alt="图片"
+                    />
                   </div>
                 </div>
               </ElTimelineItem>
@@ -80,7 +111,7 @@
           </template>
           <template v-else>
             <!-- 使用 Element Plus 的空状态组件 -->
-            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <el-empty :image="emptyimg" description="暂无跟进记录" />
             <!-- <el-empty /> -->
             <!-- 或者自定义图片 -->
             <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
@@ -97,12 +128,12 @@
     :show-close="false"
   >
     <div class="tag-dialog-scroll">
-      <div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px;">
-        <div style="font-weight: bold; margin-bottom: 6px;">{{ group.name }}</div>
-        <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+      <div v-for="group in tagGroups" :key="group.name" style="margin-bottom: 12px">
+        <div style="font-weight: bold; margin-bottom: 6px">{{ group.name }}</div>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px">
           <div
             class="col4 tagitem"
-            style="cursor: pointer;"
+            style="cursor: pointer"
             v-for="(item1, index1) in group.tags"
             :class="{ 'tagactive': activeMap[group.id] === item1.id }"
             @click="tagSelect(item1)"
@@ -123,73 +154,61 @@
 </template>
 
 <script setup lang="ts">
-import { ref,reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import emptyimg from '@/assets/img/crm/empty.png'
-import { CrmService } from '@/api/crmApi'
-import { ElMessage } from 'element-plus'
-// 常量配置
-const TIMELINE_PLACEMENT = 'top'
-const router = useRouter()
-const route = useRoute()
-const customerLevel = ref('A')
-const activecolor = "#3471FF"
-const tagDialogVisible = ref(false)
-const selectedTags = ref<string[]>([])
-const customerId = route.query.id
-const levelOptions = ref<any>()
-const tagGroups = ref<any[]>([])
-const activeMap = reactive<{ [groupId: string]: number }>({})
-// 定义客户详情类型
-interface CustomerInfo {
-  contacts?: string
-  // 可根据实际接口补充更多字段
-  [key: string]: any
-}
-const customerInfo = ref<CustomerInfo>({})
-//获取详情
-const getdetilfn = async() => {
-  try {
-    // 这里调用获取品牌列表的接口
-    const res = await CrmService.getcustomerdetail({id:customerId})
+  import { ref, reactive } from 'vue'
+  import { useRouter, useRoute } from 'vue-router'
+  import emptyimg from '@/assets/img/crm/empty.png'
+  import { CrmService } from '@/api/crmApi'
+  import { ElMessage } from 'element-plus'
+  // 常量配置
+  const TIMELINE_PLACEMENT = 'top'
+  const router = useRouter()
+  const route = useRoute()
+  const activecolor = '#3471ff'
+  const tagDialogVisible = ref(false)
+  const customerId = route.query.id
+  const levelOptions = ref<any>()
+  const tagGroups = ref<any[]>([])
+  const activeMap = reactive<{ [groupId: string]: number }>({})
+  // 定义客户详情类型
+  interface CustomerInfo {
+    contacts?: string
+    // 可根据实际接口补充更多字段
+    [key: string]: any
+  }
+  const customerInfo = ref<CustomerInfo>({})
+  //获取详情
+  const getdetilfn = async () => {
+    const res = await CrmService.getcustomerdetail({ id: customerId })
     customerInfo.value = res
-    console.log(res)
-  } catch (error) { }
-}
-//客户等级 
-const getGrade = async () => {
-  try {
-    // 这里调用获取品牌列表的接口
+  }
+  //客户等级
+  const getGrade = async () => {
     const res = await CrmService.getGrade()
-    levelOptions.value = res||[]
-  } catch (error) { levelOptions.value = [] }
-}
-//跟进记录getfollowlist
-const followList = ref<CustomerInfo>({})
-const getfollowlist = async () => {
-  try {
-    const res = await CrmService.getfollowlist({customer_id:route.query.id})
-    followList.value = res||[]
-  } catch (error) { followList.value = [] }
-}
-onMounted(async () => {
-  await getGrade()
-  await getdetilfn()
-  // 在 getdetilfn 之后调用 tagGrouplistfn，确保 customerInfo 有数据
-  await tagGrouplistfn()
-  getfollowlist()
-})
-function addtag(){
-  tagDialogVisible.value = true
-  tagGrouplistfn()
-}
-const tagGrouplistfn = async () => {
-  try {
+    levelOptions.value = res || []
+  }
+  //跟进记录getfollowlist
+  const followList = ref<CustomerInfo>({})
+  const getfollowlist = async () => {
+    const res = await CrmService.getfollowlist({ customer_id: route.query.id })
+    followList.value = res || []
+  }
+  onMounted(async () => {
+    await getGrade()
+    await getdetilfn()
+    // 在 getdetilfn 之后调用 tagGrouplistfn，确保 customerInfo 有数据
+    await tagGrouplistfn()
+    getfollowlist()
+  })
+  function addtag() {
+    tagDialogVisible.value = true
+    tagGrouplistfn()
+  }
+  const tagGrouplistfn = async () => {
     const res = await CrmService.tagGrouplist({})
     tagGroups.value = res || []
     // 回显选中
     if (customerInfo.value && Array.isArray(customerInfo.value.tags)) {
-      tagGroups.value.forEach(group => {
+      tagGroups.value.forEach((group) => {
         if (group.tags && Array.isArray(group.tags)) {
           const matched = group.tags.find((item: any) =>
             customerInfo.value.tags.some((t: any) => t.id === item.id)
@@ -200,301 +219,307 @@ const tagGrouplistfn = async () => {
         }
       })
     }
-  } catch (error) { }
-}
-
-// 4. 点击标签
-async function tagSelect(item: { group_id: string | number; id: number }) {
-  const key = String(item.group_id)
-  let tag_id = ''
-  if (activeMap[key] === item.id) {
-    // 取消选中
-    delete activeMap[key]
-    tag_id = ''
-  } else {
-    // 选中
-    activeMap[key] = item.id
-    tag_id = String(item.id)
   }
-  try {
-    const res = await CrmService.tagGroupupdatePivot({ customer_id: customerId, group_id: key, tag_id })
-    ElMessage.success(res?.message || '操作成功')
-    await getdetilfn()
-    await tagGrouplistfn()
-  } catch (e) {
-    ElMessage.error('操作失败')
+
+  // 4. 点击标签
+  async function tagSelect(item: { group_id: string | number; id: number }) {
+    const key = String(item.group_id)
+    let tag_id = ''
+    if (activeMap[key] === item.id) {
+      // 取消选中
+      delete activeMap[key]
+      tag_id = ''
+    } else {
+      // 选中
+      activeMap[key] = item.id
+      tag_id = String(item.id)
+    }
+    try {
+      const res = await CrmService.tagGroupupdatePivot({
+        customer_id: customerId,
+        group_id: key,
+        tag_id
+      })
+      ElMessage.success(res?.message || '操作成功')
+      await getdetilfn()
+      await tagGrouplistfn()
+    } catch (e) {
+      console.error(e)
+      ElMessage.error('操作失败')
+    }
   }
-}
 
-// 5. 获取所有已选中的标签
-// function getSelectedTags() {
-//   const selected: any[] = []
-//   for (const group of tagGroups) {
-//     const key = String(group.id)
-//     const tagId = activeMap[key]
-//     if (tagId) {
-//       const tag = group.tags.find(t => t.id === tagId)
-//       if (tag) selected.push(tag)
-//     }
-//   }
-//   return selected
-// }
+  // 5. 获取所有已选中的标签
+  // function getSelectedTags() {
+  //   const selected: any[] = []
+  //   for (const group of tagGroups) {
+  //     const key = String(group.id)
+  //     const tagId = activeMap[key]
+  //     if (tagId) {
+  //       const tag = group.tags.find(t => t.id === tagId)
+  //       if (tag) selected.push(tag)
+  //     }
+  //   }
+  //   return selected
+  // }
 
-// 6. 示例：确定按钮
-function handleConfirm() {
-  // const selectedTags = getSelectedTags()
-  // console.log('选中的标签：', selectedTags)
-  // 处理选中的标签
-  tagDialogVisible.value = false
-}
+  // 6. 示例：确定按钮
+  function handleConfirm() {
+    // const selectedTags = getSelectedTags()
+    // console.log('选中的标签：', selectedTags)
+    // 处理选中的标签
+    tagDialogVisible.value = false
+  }
 
-function handleCancel() {
-  tagDialogVisible.value = false
-}
-//编辑
-function goEdit() {
-  router.push({
+  function handleCancel() {
+    tagDialogVisible.value = false
+  }
+  //编辑
+  function goEdit() {
+    router.push({
       path: '/crmpc/customer/edit',
       query: { id: customerId }
-  })
-}
-function goBack() {
-  router.back()
-}
-//修改等级
-function handleGradeChange(newGrade: number) {
-  if (!customerId) return
-  CrmService.customergrade({ id: customerId, grade: newGrade }).then(res => {
-    ElMessage.success(res?.message || '修改成功')
-  }).catch(() => {
-    ElMessage.error('修改失败')
-  })
-}
-//添加跟进
-function goAddFollow() {
-  router.push({
-    path: '/crmpc/customer/followadd',
-    query: { id: customerId }
-  })
-}
+    })
+  }
+  function goBack() {
+    router.back()
+  }
+  //修改等级
+  function handleGradeChange(newGrade: number) {
+    if (!customerId) return
+    CrmService.customergrade({ id: customerId, grade: newGrade })
+      .then((res) => {
+        ElMessage.success(res?.message || '修改成功')
+      })
+      .catch(() => {
+        ElMessage.error('修改失败')
+      })
+  }
+  //添加跟进
+  function goAddFollow() {
+    router.push({
+      path: '/crmpc/customer/followadd',
+      query: { id: customerId }
+    })
+  }
 </script>
 
 <style scoped>
-.timeline-content-row{
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.timeline-img{
-  width: 80px;
-}
-.tag-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px; /* 标签间距 */
-  margin-top: 20px;
-}
-.border{
-  margin-right: 10px;
-}
-.pad20{
+  .timeline-content-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .timeline-img {
+    width: 80px;
+  }
+  .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px; /* 标签间距 */
+    margin-top: 20px;
+  }
+  .border {
+    margin-right: 10px;
+  }
+  .pad20 {
     padding: 20px;
-}
-.icon-reverse {
-  display: inline-block;
-  transform: rotate(270deg); /* 旋转180度 */
-}
-.customer-edit-page {
-  background: #f7f9fa;
-  min-height: 100vh;
-  padding: 24px;
-}
-.edit-header {
-  /* display: flex; */
-  /* align-items: center; */
-  /* gap: 12px; */
-  margin-bottom: 16px;
-}
-.edit-title {
-  font-size: 18px;
-  font-weight: bold;
-}
-.edit-status {
-  margin-left: 16px;
-}
-.edit-btn {
-  margin-left: auto;
-}
-.info-card {
-  margin-bottom: 0;
-  border-radius: 8px;
-}
-.info-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between; /* 两端对齐 */
-  font-size: 15px;
-  padding: 0;
-}
-.follow-list {
-  margin-top: 16px;
-}
-.follow-item {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 16px;
-  background: #f7f9fa;
-  border-radius: 6px;
-  padding: 12px;
-}
-.follow-main {
-  flex: 1;
-}
-.follow-title {
-  font-size: 14px;
-  color: #222;
-  margin-bottom: 4px;
-  display: flex;
-  gap: 16px;
-}
-.follow-type {
-  color: #3471FF;
-  font-weight: bold;
-}
-.follow-time {
-  color: #888;
-}
-.follow-content {
-  color: #333;
-  font-size: 14px;
-}
-.follow-img {
-  width: 60px;
-  height: 60px;
-  object-fit: cover;
-  border-radius: 6px;
-  margin-left: 16px;
-}
-.info-row-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 16px 0px;
-}
-.corner-tag {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 90px;
-  height: 90px;
-  background: transparent;
-  z-index: 2;
-  pointer-events: none;
-}
-.corner-tag::before {
-  content: '';
-  position: absolute;
-  top: -10px;
-  right: -10px;
-  width: 90px;
-  height: 80px;
-  background: #3471FF;
-  clip-path: polygon(100% 0, 0 0, 100% 100%);
-  border-top-right-radius: 12px;
-}
-.corner-tag {
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-end;
-  color: #fff;
-  font-size: 16px;
-  font-weight: bold;
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  width: 55px;
-  height: 40px;
-  z-index: 3;
-  padding-top: 6px;
-  padding-right: 0px;
-  pointer-events: none;
-}
-.corner-text {
-  display: inline-block;
-  transform: rotate(45deg);
-}
-.timeline-content-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-.timeline-text{
-  font-size: 16px;
-  margin-bottom: 10px;
-}
-.timeline-mom{
-  color: #999;
-  font-size: 12px;
-}
-.timeline-img {
-  width: 48px;
-  height: 48px;
-  object-fit: cover;
-  border-radius: 6px;
-}
+  }
+  .icon-reverse {
+    display: inline-block;
+    transform: rotate(270deg); /* 旋转180度 */
+  }
+  .customer-edit-page {
+    background: #f7f9fa;
+    min-height: 100vh;
+    padding: 24px;
+  }
+  .edit-header {
+    /* display: flex; */
+    /* align-items: center; */
+    /* gap: 12px; */
+    margin-bottom: 16px;
+  }
+  .edit-title {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .edit-status {
+    margin-left: 16px;
+  }
+  .edit-btn {
+    margin-left: auto;
+  }
+  .info-card {
+    margin-bottom: 0;
+    border-radius: 8px;
+  }
+  .info-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* 两端对齐 */
+    font-size: 15px;
+    padding: 0;
+  }
+  .follow-list {
+    margin-top: 16px;
+  }
+  .follow-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 16px;
+    background: #f7f9fa;
+    border-radius: 6px;
+    padding: 12px;
+  }
+  .follow-main {
+    flex: 1;
+  }
+  .follow-title {
+    font-size: 14px;
+    color: #222;
+    margin-bottom: 4px;
+    display: flex;
+    gap: 16px;
+  }
+  .follow-type {
+    color: #3471FF;
+    font-weight: bold;
+  }
+  .follow-time {
+    color: #888;
+  }
+  .follow-content {
+    color: #333;
+    font-size: 14px;
+  }
+  .follow-img {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 6px;
+    margin-left: 16px;
+  }
+  .info-row-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 16px 0px;
+  }
+  .corner-tag {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 90px;
+    height: 90px;
+    background: transparent;
+    z-index: 2;
+    pointer-events: none;
+  }
+  .corner-tag::before {
+    content: '';
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 90px;
+    height: 80px;
+    background: #3471FF;
+    clip-path: polygon(100% 0, 0 0, 100% 100%);
+    border-top-right-radius: 12px;
+  }
+  .corner-tag {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 55px;
+    height: 40px;
+    z-index: 3;
+    padding-top: 6px;
+    padding-right: 0px;
+    pointer-events: none;
+  }
+  .corner-text {
+    display: inline-block;
+    transform: rotate(45deg);
+  }
+  .timeline-content-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .timeline-text {
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
+  .timeline-mom {
+    color: #999;
+    font-size: 12px;
+  }
+  .timeline-img {
+    width: 48px;
+    height: 48px;
+    object-fit: cover;
+    border-radius: 6px;
+  }
 
-.tagitem{
-  background: #DCE7FF;
-  border-radius: 8px;
-  color: #3471FF;
-  text-align: center;
-  padding: 5px 13px;
-}
-.col4{
-  display: inline-block;
-  margin: 4px 3px;
-}
-.tagactive{
-  background: #3471FF !important;
-  color: #fff !important;
-}
-.tag-dialog-scroll {
-  max-height: 60vh;
-  overflow-y: auto;
-  padding-right: 8px;
-}
-.tag-dialog-scroll {
-  max-height: 60vh;
-  overflow-y: auto;
-  padding-right: 8px;
-  /* 让内容不被滚动条遮挡 */
-}
+  .tagitem {
+    background: #DCE7FF;
+    border-radius: 8px;
+    color: #3471FF;
+    text-align: center;
+    padding: 5px 13px;
+  }
+  .col4 {
+    display: inline-block;
+    margin: 4px 3px;
+  }
+  .tagactive {
+    background: #3471FF !important;
+    color: #fff !important;
+  }
+  .tag-dialog-scroll {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding-right: 8px;
+  }
+  .tag-dialog-scroll {
+    max-height: 60vh;
+    overflow-y: auto;
+    padding-right: 8px;
+    /* 让内容不被滚动条遮挡 */
+  }
 
-/* 优化滚动条样式（Webkit内核浏览器） */
-.tag-dialog-scroll::-webkit-scrollbar {
-  width: 6px;
-  background: transparent;
-}
-.tag-dialog-scroll::-webkit-scrollbar-thumb {
-  background: #d4e0f7;
-  border-radius: 4px;
-  transition: background 0.2s;
-}
-.tag-dialog-scroll::-webkit-scrollbar-thumb:hover {
-  background: #b3c8e6;
-}
-.tag-dialog-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
+  /* 优化滚动条样式（Webkit内核浏览器） */
+  .tag-dialog-scroll::-webkit-scrollbar {
+    width: 6px;
+    background: transparent;
+  }
+  .tag-dialog-scroll::-webkit-scrollbar-thumb {
+    background: #d4e0f7;
+    border-radius: 4px;
+    transition: background 0.2s;
+  }
+  .tag-dialog-scroll::-webkit-scrollbar-thumb:hover {
+    background: #b3c8e6;
+  }
+  .tag-dialog-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-/* Firefox 滚动条优化 */
-.tag-dialog-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: #d4e0f7 transparent;
-}
-.dialog-footer-center {
-  display: flex;
-  justify-content: center;
-  gap: 16px;
-}
-</style> 
\ No newline at end of file
+  /* Firefox 滚动条优化 */
+  .tag-dialog-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: #d4e0f7 transparent;
+  }
+  .dialog-footer-center {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+  }
+</style>