From b5aca69eea777e182f2c840a01c749fe9721a1e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B5=85=E5=BF=B5?= <email@sample.com>
Date: Wed, 16 Jul 2025 17:29:39 +0800
Subject: [PATCH] =?UTF-8?q?crm=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crmpc/customer/Add.vue         | 188 +++++
 src/views/crmpc/customer/Edit.vue        | 188 +++++
 src/views/crmpc/customer/Followadd.vue   | 381 ++++++++++
 src/views/crmpc/customer/Show.vue        | 924 +++++++++++++++++++++++
 src/views/crmpc/customer/index.vue       | 270 +++++++
 src/views/crmpc/highseas/index.vue       | 282 +++++++
 src/views/crmpc/home/index.vue           |  21 +
 src/views/crmpc/home/style.scss          |  43 ++
 src/views/crmpc/home/widget/CardList.vue | 376 +++++++++
 src/views/crmpc/recycle/Recycle.vue      |  61 ++
 10 files changed, 2734 insertions(+)
 create mode 100644 src/views/crmpc/customer/Add.vue
 create mode 100644 src/views/crmpc/customer/Edit.vue
 create mode 100644 src/views/crmpc/customer/Followadd.vue
 create mode 100644 src/views/crmpc/customer/Show.vue
 create mode 100644 src/views/crmpc/customer/index.vue
 create mode 100644 src/views/crmpc/highseas/index.vue
 create mode 100644 src/views/crmpc/home/index.vue
 create mode 100644 src/views/crmpc/home/style.scss
 create mode 100644 src/views/crmpc/home/widget/CardList.vue
 create mode 100644 src/views/crmpc/recycle/Recycle.vue

diff --git a/src/views/crmpc/customer/Add.vue b/src/views/crmpc/customer/Add.vue
new file mode 100644
index 0000000..5fa9966
--- /dev/null
+++ b/src/views/crmpc/customer/Add.vue
@@ -0,0 +1,188 @@
+<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>
+      <span class="border"></span><span class="form-title">新增客户资料</span>
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      class="customer-form"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="客户渠道" prop="channel">
+            <el-select v-model="form.channel" placeholder="请选择客户渠道">
+              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户商机" prop="opportunity">
+            <el-select v-model="form.opportunity" placeholder="请选择客户商机">
+              <el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入客户名称" />
+          </el-form-item>
+          <el-form-item label="客户商机" prop="gender" >
+            <el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
+              <el-radio label="未知">未知</el-radio>
+              <el-radio label="男">男</el-radio>
+              <el-radio label="女">女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="contact">
+            <el-input v-model="form.contact" placeholder="请输入联系方式" />
+          </el-form-item>
+          <el-form-item label="Email" prop="email">
+            <el-input v-model="form.email" placeholder="请输入Email" />
+          </el-form-item>
+          <el-form-item label="WhatsApp" prop="whatsapp">
+            <el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
+          </el-form-item>
+          <el-form-item label="客户意向" prop="intention">
+            <el-select v-model="form.intention" placeholder="请选择客户意向">
+              <el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户分级" prop="level">
+            <el-select v-model="form.level" placeholder="请选择客户分级">
+              <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="国家" prop="country">
+            <el-select v-model="form.country" placeholder="请选择国家">
+              <el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="公司" prop="company">
+            <el-input v-model="form.company" placeholder="请输入公司" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+          </el-form-item>
+        </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-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const formRef = ref()
+const form = ref({
+  channel: '',
+  opportunity: '',
+  name: '',
+  gender: '未知',
+  contact: '',
+  email: '',
+  whatsapp: '',
+  intention: '',
+  level: '',
+  country: '',
+  company: '',
+  remark: ''
+})
+
+const rules = {
+  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
+}
+
+const channelOptions = [
+  { label: '渠道A', value: 'A' },
+  { label: '渠道B', value: 'B' }
+]
+const opportunityOptions = [
+  { label: '商机A', value: 'A' },
+  { label: '商机B', value: 'B' }
+]
+const intentionOptions = [
+  { label: '意向A', value: 'A' },
+  { label: '意向B', value: 'B' }
+]
+const levelOptions = [
+  { label: '高', value: 'high' },
+  { label: '中', value: 'mid' },
+  { label: '低', value: 'low' }
+]
+const countryOptions = [
+  { label: '中国', value: 'china' },
+  { label: '美国', value: 'usa' }
+]
+
+function goBack() {
+  router.back()
+}
+
+function submitForm() {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success('提交成功！')
+      // 这里可以提交表单数据到后端
+    }
+  })
+}
+</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 {
+    width: 98%;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    justify-content: flex-start; /* 新增，左对齐 */
+}
+.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
diff --git a/src/views/crmpc/customer/Edit.vue b/src/views/crmpc/customer/Edit.vue
new file mode 100644
index 0000000..571fb16
--- /dev/null
+++ b/src/views/crmpc/customer/Edit.vue
@@ -0,0 +1,188 @@
+<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>
+      <span class="border"></span><span class="form-title">编辑客户资料</span>
+    </div>
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      label-width="100px"
+      class="customer-form"
+      label-position="right"
+    >
+      <el-row :gutter="24">
+        <el-col :span="24">
+          <el-form-item label="客户渠道" prop="channel">
+            <el-select v-model="form.channel" placeholder="请选择客户渠道">
+              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户商机" prop="opportunity">
+            <el-select v-model="form.opportunity" placeholder="请选择客户商机">
+              <el-option v-for="item in opportunityOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户名称" prop="name">
+            <el-input v-model="form.name" placeholder="请输入客户名称" />
+          </el-form-item>
+          <el-form-item label="客户商机" prop="gender" >
+            <el-radio-group v-model="form.gender" style="justify-content: flex-end;width: 100%;">
+              <el-radio label="未知">未知</el-radio>
+              <el-radio label="男">男</el-radio>
+              <el-radio label="女">女</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="contact">
+            <el-input v-model="form.contact" placeholder="请输入联系方式" />
+          </el-form-item>
+          <el-form-item label="Email" prop="email">
+            <el-input v-model="form.email" placeholder="请输入Email" />
+          </el-form-item>
+          <el-form-item label="WhatsApp" prop="whatsapp">
+            <el-input v-model="form.whatsapp" placeholder="请输入WhatsApp" />
+          </el-form-item>
+          <el-form-item label="客户意向" prop="intention">
+            <el-select v-model="form.intention" placeholder="请选择客户意向">
+              <el-option v-for="item in intentionOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="客户分级" prop="level">
+            <el-select v-model="form.level" placeholder="请选择客户分级">
+              <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="国家" prop="country">
+            <el-select v-model="form.country" placeholder="请选择国家">
+              <el-option v-for="item in countryOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="公司" prop="company">
+            <el-input v-model="form.company" placeholder="请输入公司" />
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+          </el-form-item>
+        </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-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const formRef = ref()
+const form = ref({
+  channel: '',
+  opportunity: '',
+  name: '',
+  gender: '未知',
+  contact: '',
+  email: '',
+  whatsapp: '',
+  intention: '',
+  level: '',
+  country: '',
+  company: '',
+  remark: ''
+})
+
+const rules = {
+  channel: [{ required: true, message: '请选择客户渠道', trigger: 'change' }],
+  name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
+  intention: [{ required: true, message: '请选择客户意向', trigger: 'change' }]
+}
+
+const channelOptions = [
+  { label: '渠道A', value: 'A' },
+  { label: '渠道B', value: 'B' }
+]
+const opportunityOptions = [
+  { label: '商机A', value: 'A' },
+  { label: '商机B', value: 'B' }
+]
+const intentionOptions = [
+  { label: '意向A', value: 'A' },
+  { label: '意向B', value: 'B' }
+]
+const levelOptions = [
+  { label: '高', value: 'high' },
+  { label: '中', value: 'mid' },
+  { label: '低', value: 'low' }
+]
+const countryOptions = [
+  { label: '中国', value: 'china' },
+  { label: '美国', value: 'usa' }
+]
+
+function goBack() {
+  router.back()
+}
+
+function submitForm() {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      ElMessage.success('提交成功！')
+      // 这里可以提交表单数据到后端
+    }
+  })
+}
+</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 {
+    width: 98%;
+    margin-bottom: 24px;
+    display: flex;
+    align-items: center;
+    font-size: 18px;
+    justify-content: flex-start; /* 新增，左对齐 */
+}
+.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
diff --git a/src/views/crmpc/customer/Followadd.vue b/src/views/crmpc/customer/Followadd.vue
new file mode 100644
index 0000000..f0a85f7
--- /dev/null
+++ b/src/views/crmpc/customer/Followadd.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="follow-add-page">
+    <div class="boxshadow pad20">
+      <el-link :underline="false" @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>
+    </div>
+    <div class="edit-header boxshadow" style="position:relative;">
+      <!-- 右上角三角形角标 -->
+      <div class="corner-tag"><span class="corner-text">跟进中</span></div>
+      <el-row :gutter="20" style="flex: 1;">
+            <el-col :sm="24" :md="6" :lg="4">
+                <span>客户名称：{{ customerName }}</span>
+            </el-col>
+            <el-col :sm="24" :md="6" :lg="4">
+                <span>渠道：阿里</span>
+            </el-col>
+            <el-col :sm="24" :md="6" :lg="5">
+                <span>联系方式：16532014121</span>
+            </el-col>
+            <el-col :sm="24" :md="6" :lg="4">
+                <span>客户偏好：小轿车</span>
+            </el-col>
+            <el-col :sm="24" :md="6" :lg="4">
+                <span>客户商机：金牌商机</span>
+            </el-col>
+        </el-row>
+    </div>
+    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-row">
+        <span class="edit-title">客户分级</span>
+        <el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
+          <el-option label="A" value="A" />
+          <el-option label="B" value="B" />
+        </el-select>
+      </div>
+    </el-card>
+    <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="followType">
+          <el-radio label="1">在线跟进</el-radio>
+          <el-radio label="0">拜访</el-radio>
+        </el-radio-group>
+      </div>
+    </el-card>
+    <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="followTime" type="datetime" style="width: 200px;" />
+      </div>
+    </el-card>
+    <el-card v-if="followType=='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="#"
+          :show-file-list="false"
+        >
+          <img :src="imageUrl" class="avatar" />
+        </el-upload>
+      </div>
+    </el-card>
+    <el-card v-if="followType=='1'" class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-top">
+        <span class="edit-title">跟进描述</span>
+        <el-input v-model="followDesc" type="textarea" placeholder="请输入跟进描述" />
+      </div>
+    </el-card>
+    <el-card v-if="followType=='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="#"
+          :show-file-list="false"
+        >
+          <img :src="imageUrl" class="avatar" />
+        </el-upload>
+      </div>
+    </el-card>
+    <el-card v-if="followType=='0'" class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-top">
+        <span class="edit-title">拜访内容</span>
+        <el-input v-model="followDesc" type="textarea" placeholder="请输入拜访内容" />
+      </div>
+    </el-card>
+    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-top">
+        <span class="edit-title">备注</span>
+        <el-input v-model="remark" type="textarea" placeholder="请输入备注" />
+      </div>
+    </el-card>
+    <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>
+      </div>
+      <div class="follow-list">
+        <ElScrollbar >
+          <template v-if="followList.length > 0">
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="item in followList"
+                :key="item.time"
+                :placement="TIMELINE_PLACEMENT"
+                :color="activecolor"
+                :center="true"
+              >
+                <div class="timeline-item">
+                  <div class="timeline-content-row">
+                    <div class="timeline-content">
+                      <p class="timeline-text">在线跟进  <span class="timeline-mom">{{ item.time }}</span></p>
+                      <p class="timeline-mom">跟进描述 {{ item.content }}</p>
+                    </div>
+                    <img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
+                  </div>
+                </div>
+              </ElTimelineItem>
+            </ElTimeline>
+          </template>
+          <template v-else>
+            <!-- 使用 Element Plus 的空状态组件 -->
+            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <!-- <el-empty /> -->
+            <!-- 或者自定义图片 -->
+            <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
+          </template>
+        </ElScrollbar>
+      </div>
+    </el-card>
+
+    <el-button type="primary" class="submit-btn" @click="handleSubmit">提交</el-button>
+  </div>
+  <!-- 提交成功弹出层 -->
+  <el-dialog
+    v-model="successDialogVisible"
+    width="400px"
+    align-center
+    :show-close="true"
+    class="success-dialog"
+  >
+    <div class="success-dialog-content">
+      <img src="@/assets/img/crm/succes.png" alt="成功" class="success-img" />
+      <div class="conts">
+        <div class="success-title">提交成功</div>
+        <div class="remind-title">下次跟进提醒设置</div>
+        <div class="remind-options">
+          <div
+            v-for="(item, idx) in remindOptions.filter(opt => opt.value !== 'custom')"
+            :key="item.value"
+            :class="['remind-btn', { active: remindValue === item.value }]"
+            @click="remindValue = item.value"
+          >
+            {{ item.label }}
+          </div>
+        </div>
+        <el-date-picker
+            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>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import emptyimg from '@/assets/img/crm/empty.png'
+import imageUrl from '@/assets/img/crm/upimg.png'
+import { ElMessage } from 'element-plus'
+import { ElTimeline, ElTimelineItem, ElScrollbar } from 'element-plus'
+const TIMELINE_PLACEMENT = 'top'
+const router = useRouter()
+const route = useRoute()
+const customerName = route.query.name || '王先生'
+const customerLevel = ref('需求沟通')
+const followType = ref('1')
+const followTime = ref(new Date())
+const followDesc = ref('')
+const remark = ref('')
+const activecolor = "#3471FF"
+const followList: any[] = []
+const successDialogVisible = ref(true) // 控制弹窗显示
+const remindValue = ref('1')
+const customDate = ref('')
+
+const remindOptions = [
+  { label: '1天后', value: '1' },
+  { label: '3天后', value: '3' },
+  { label: '7天后', value: '7' }
+]
+
+function disabledPastDate(time: Date) {
+  return time.getTime() < Date.now() - 86400000
+}
+
+function formatDate(val: any) {
+  if (!val) return ''
+  const d = new Date(val)
+  const pad = (n: number) => n < 10 ? '0' + n : n
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
+}
+
+function handleSuccessConfirm() {
+  if (remindValue.value === 'custom') {
+    if (!customDate.value) {
+      return ElMessage.warning('请选择自定义日期时间')
+    }
+    // 处理自定义日期时间
+    console.log('自定义日期时间:', customDate.value)
+  } else {
+    // 处理固定天数
+    console.log('天数:', remindValue.value)
+  }
+  successDialogVisible.value = false
+}
+function goBack() {
+  router.back()
+}
+function handleSubmit() {
+  // 提交逻辑
+  alert('提交成功')
+}
+</script>
+
+<style scoped>
+.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
diff --git a/src/views/crmpc/customer/Show.vue b/src/views/crmpc/customer/Show.vue
new file mode 100644
index 0000000..28f7acc
--- /dev/null
+++ b/src/views/crmpc/customer/Show.vue
@@ -0,0 +1,924 @@
+<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>
+    </div>
+    <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">跟进中</span></div>
+      <div class="info-row-bar">
+        <el-row :gutter="20" style="flex: 1;">
+                <el-col :sm="24" :md="6" :lg="4">
+                    <span>客户名称：{{ customerName }}</span>
+                </el-col>
+                <el-col :sm="24" :md="6" :lg="4">
+                    <span>渠道：阿里</span>
+                </el-col>
+                <el-col :sm="24" :md="6" :lg="5">
+                    <span>联系方式：16532014121</span>
+                </el-col>
+                <el-col :sm="24" :md="6" :lg="4">
+                    <span>客户偏好：小轿车</span>
+                </el-col>
+                <el-col :sm="24" :md="6" :lg="4">
+                    <span>客户商机：金牌商机</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;">
+      <div class="">
+        <span class="border"></span><span class="edit-title">客户画像</span>
+        <el-button @click="tagDialogVisible = true" type="primary" size="small" style="float: right;">添加标签</el-button>
+      </div>
+      <div class="tag-list">
+        <el-tag type="primary">潜在高价值</el-tag>
+        <el-tag type="primary">新客户</el-tag>
+        <el-tag type="primary">Tag 1</el-tag>
+      </div>
+    </el-card>
+
+    <el-card class="info-card" shadow="never" style="margin-top: 16px;">
+      <div class="info-row">
+        <span class="edit-title">客户分级</span>
+        <el-select v-model="customerLevel" placeholder="客户需求" style="width: 120px; margin-left: 16px;">
+          <el-option label="A" value="A" />
+          <el-option label="B" value="B" />
+        </el-select>
+      </div>
+    </el-card>
+
+    <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;">+ 添加跟进</el-button>
+      </div>
+      <div class="follow-list">
+        <ElScrollbar >
+          <template v-if="followList.length > 0">
+            <ElTimeline>
+              <ElTimelineItem
+                v-for="item in followList"
+                :key="item.time"
+                :placement="TIMELINE_PLACEMENT"
+                :color="activecolor"
+                :center="true"
+              >
+                <div class="timeline-item">
+                  <div class="timeline-content-row">
+                    <div class="timeline-content">
+                      <p class="timeline-text">在线跟进  <span class="timeline-mom">{{ item.time }}</span></p>
+                      <p class="timeline-mom">跟进描述 {{ item.content }}</p>
+                    </div>
+                    <img v-if="item.img" :src="item.img" class="timeline-img" alt="图片" />
+                  </div>
+                </div>
+              </ElTimelineItem>
+            </ElTimeline>
+          </template>
+          <template v-else>
+            <!-- 使用 Element Plus 的空状态组件 -->
+            <el-empty :image="emptyimg"  description="暂无跟进记录" />
+            <!-- <el-empty /> -->
+            <!-- 或者自定义图片 -->
+            <!-- <img src="你的空图片地址.png" alt="暂无数据" class="empty-img" /> -->
+          </template>
+        </ElScrollbar>
+      </div>
+    </el-card>
+  </div>
+  <el-dialog
+    v-model="tagDialogVisible"
+    title="添加标签"
+    width="420px"
+    align-center
+    :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
+            class="col4 tagitem"
+            style="cursor: pointer;"
+            v-for="(item1, index1) in group.tags"
+            :class="{ 'tagactive': isActive(item1.group_id, item1.id) }"
+            @click="tagSelect(item1)"
+            :key="index1"
+          >
+            {{ item1.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer-center">
+        <el-button @click="handleCancel">取消</el-button>
+        <el-button type="primary" @click="handleConfirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref,reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import emptyimg from '@/assets/img/crm/empty.png'
+// 常量配置
+const TIMELINE_PLACEMENT = 'top'
+const router = useRouter()
+const route = useRoute()
+const customerLevel = ref('A')
+const activecolor = "#3471FF"
+const followList: any[] = []
+// const followList = ref([
+//   {
+//     type: '在线跟进',
+//     time: '2025-07-01 09:20:10',
+//     content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
+//     img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+//   },
+//   {
+//     type: '拜访',
+//     time: '2025-07-01 09:20:10',
+//     content: '跟进描述：111111111111111111111111111111111111111111111111111111111111111111',
+//     img: 'https://img0.baidu.com/it/u=123456789,123456789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+//   }
+// ])
+const tagDialogVisible = ref(false)
+const selectedTags = ref<string[]>([])
+
+// 标签分组数据
+const tagGroups = [
+    {
+        "id": 1,
+        "name": "价值标签",
+        "names": {
+            "zh_CN": "价值标签",
+            "en": "Value tags",
+            "ru": "Значок стоимости"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 1,
+                "group_id": 1,
+                "name": "高价值",
+                "names": {
+                    "zh_CN": "高价值",
+                    "en": "High value",
+                    "ru": "Высокая ценность"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 2,
+                "group_id": 1,
+                "name": "中价值",
+                "names": {
+                    "zh_CN": "中价值",
+                    "en": "Medium value",
+                    "ru": "Средняя стоимость"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 3,
+                "group_id": 1,
+                "name": "低价值",
+                "names": {
+                    "zh_CN": "低价值",
+                    "en": "Low value",
+                    "ru": "Низкая стоимость"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 4,
+                "group_id": 1,
+                "name": "潜在高价值",
+                "names": {
+                    "zh_CN": "潜在高价值",
+                    "en": "Potential high",
+                    "ru": "Потенциально высокая стоимость"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "name": "生命周期标签",
+        "names": {
+            "zh_CN": "生命周期标签",
+            "en": "Lifecycle tags",
+            "ru": "Метки жизненного цикла"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 5,
+                "group_id": 2,
+                "name": "新客户",
+                "names": {
+                    "zh_CN": "新客户",
+                    "en": "New",
+                    "ru": "Новые клиенты"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 6,
+                "group_id": 2,
+                "name": "活跃",
+                "names": {
+                    "zh_CN": "活跃",
+                    "en": "Active",
+                    "ru": "Активный"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 7,
+                "group_id": 2,
+                "name": "沉默",
+                "names": {
+                    "zh_CN": "沉默",
+                    "en": "Silent",
+                    "ru": "Молчание"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 8,
+                "group_id": 2,
+                "name": "流失",
+                "names": {
+                    "zh_CN": "流失",
+                    "en": "Loss",
+                    "ru": "Утечка"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 3,
+        "name": "行为标签",
+        "names": {
+            "zh_CN": "行为标签",
+            "en": "Behavior tags",
+            "ru": "Поведение"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 9,
+                "group_id": 3,
+                "name": "高频购买",
+                "names": {
+                    "zh_CN": "高频购买",
+                    "en": "Buy more",
+                    "ru": "ВЧ - покупка"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 10,
+                "group_id": 3,
+                "name": "大单",
+                "names": {
+                    "zh_CN": "大单",
+                    "en": "Big order",
+                    "ru": "Большой список"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 11,
+                "group_id": 3,
+                "name": "促销敏感",
+                "names": {
+                    "zh_CN": "促销敏感",
+                    "en": "Promotion",
+                    "ru": "Рекламная чувствительность"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 12,
+                "group_id": 3,
+                "name": "忠诚",
+                "names": {
+                    "zh_CN": "忠诚",
+                    "en": "Loyalty",
+                    "ru": "Верность"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 4,
+        "name": "需求标签",
+        "names": {
+            "zh_CN": "需求标签",
+            "en": "Requirement tags",
+            "ru": "Требования"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 13,
+                "group_id": 4,
+                "name": "价格敏感",
+                "names": {
+                    "zh_CN": "价格敏感",
+                    "en": "Price Sensitive",
+                    "ru": "Чувствительность цен"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 14,
+                "group_id": 4,
+                "name": "品质追求",
+                "names": {
+                    "zh_CN": "品质追求",
+                    "en": "Quality pursuit",
+                    "ru": "Стремление к качеству"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 15,
+                "group_id": 4,
+                "name": "服务",
+                "names": {
+                    "zh_CN": "服务",
+                    "en": "Service",
+                    "ru": "Услуги"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 16,
+                "group_id": 4,
+                "name": "定制化",
+                "names": {
+                    "zh_CN": "定制化",
+                    "en": "Customize",
+                    "ru": "Индивидуализация"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 5,
+        "name": "来源标签",
+        "names": {
+            "zh_CN": "来源标签",
+            "en": "Source tags",
+            "ru": "Метка источника"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 17,
+                "group_id": 5,
+                "name": "线上",
+                "names": {
+                    "zh_CN": "线上",
+                    "en": "On-line",
+                    "ru": "Линия"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 18,
+                "group_id": 5,
+                "name": "线下",
+                "names": {
+                    "zh_CN": "线下",
+                    "en": "Offline",
+                    "ru": "Под линией"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 19,
+                "group_id": 5,
+                "name": "推荐",
+                "names": {
+                    "zh_CN": "推荐",
+                    "en": "Recommend",
+                    "ru": "Рекомендации"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 20,
+                "group_id": 5,
+                "name": "合作伙伴",
+                "names": {
+                    "zh_CN": "合作伙伴",
+                    "en": "Partnership",
+                    "ru": "Партнеры"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 6,
+        "name": "风险标签",
+        "names": {
+            "zh_CN": "风险标签",
+            "en": "Risk tags",
+            "ru": "Маркировка рисков"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 21,
+                "group_id": 6,
+                "name": "高风险",
+                "names": {
+                    "zh_CN": "高风险",
+                    "en": "High risk",
+                    "ru": "Высокий риск"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 22,
+                "group_id": 6,
+                "name": "中风险",
+                "names": {
+                    "zh_CN": "中风险",
+                    "en": "Medium risk",
+                    "ru": "Риск"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 23,
+                "group_id": 6,
+                "name": "低风险",
+                "names": {
+                    "zh_CN": "低风险",
+                    "en": "Low risk",
+                    "ru": "Низкий риск"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 7,
+        "name": "满意度标签",
+        "names": {
+            "zh_CN": "满意度标签",
+            "en": "Satisfaction tags",
+            "ru": "Метка Удовлетворенность"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 24,
+                "group_id": 7,
+                "name": "非常满意",
+                "names": {
+                    "zh_CN": "非常满意",
+                    "en": "Very satisfied",
+                    "ru": "Очень доволен."
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 25,
+                "group_id": 7,
+                "name": "满意",
+                "names": {
+                    "zh_CN": "满意",
+                    "en": "Satisfied",
+                    "ru": "Удовлетворительно"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 26,
+                "group_id": 7,
+                "name": "不满意",
+                "names": {
+                    "zh_CN": "不满意",
+                    "en": "Unsatisfied",
+                    "ru": "Неудовлетворительно."
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:13:46.000000Z",
+                "deleted_at": null
+            }
+        ]
+    },
+    {
+        "id": 8,
+        "name": "忠诚度标签",
+        "names": {
+            "zh_CN": "忠诚度标签",
+            "en": "Loyalty tags",
+            "ru": "Маркировка лояльности"
+        },
+        "type": "radio",
+        "created_at": "2025-03-27T01:49:11.000000Z",
+        "updated_at": "2025-03-31T08:13:46.000000Z",
+        "deleted_at": null,
+        "tags": [
+            {
+                "id": 27,
+                "group_id": 8,
+                "name": "‌忠实客户",
+                "names": {
+                    "zh_CN": "‌忠实客户",
+                    "en": "Loyal",
+                    "ru": "Верный клиент"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:19:03.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 28,
+                "group_id": 8,
+                "name": "稳定客户",
+                "names": {
+                    "zh_CN": "稳定客户",
+                    "en": "Stable",
+                    "ru": "Стабилизация клиентов"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:19:03.000000Z",
+                "deleted_at": null
+            },
+            {
+                "id": 29,
+                "group_id": 8,
+                "name": "游离客户",
+                "names": {
+                    "zh_CN": "游离客户",
+                    "en": "Floating",
+                    "ru": "Свободные клиенты"
+                },
+                "created_at": "2025-03-27T01:49:11.000000Z",
+                "updated_at": "2025-03-31T08:19:03.000000Z",
+                "deleted_at": null
+            }
+        ]
+    }
+]
+// 1. 定义类型
+type ActiveMapType = { [key: string]: number }
+
+// 2. 响应式选中映射
+const activeMap = reactive({} as ActiveMapType)
+
+// 3. 判断标签是否选中
+function isActive(groupId: string | number, tagId: number) {
+  return activeMap[String(groupId)] === tagId
+}
+
+// 4. 点击标签
+function tagSelect(item: { group_id: string | number; id: number }) {
+  const key = String(item.group_id)
+  if (activeMap[key] === item.id) {
+    delete activeMap[key] // 取消选中
+  } else {
+    activeMap[key] = item.id // 选中
+  }
+}
+
+// 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
+}
+
+function handleCancel() {
+  tagDialogVisible.value = false
+}
+const customerName = route.query.name || '王先生'
+function goEdit() {
+  router.push({
+      path: '/crmpc/customer/edit',
+      query: { name: customerName }
+  })
+}
+function goBack() {
+  router.back()
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+.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;
+}
+
+/* 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
diff --git a/src/views/crmpc/customer/index.vue b/src/views/crmpc/customer/index.vue
new file mode 100644
index 0000000..badc950
--- /dev/null
+++ b/src/views/crmpc/customer/index.vue
@@ -0,0 +1,270 @@
+<template>
+    <div class="customer-page">
+      <!-- 顶部操作栏 -->
+      <div class="customer-toolbar boxshadow">
+        <el-button type="primary" @click="goAdd"><el-icon><Plus /></el-icon>添加</el-button>
+        <div class="customer-search-group">
+            <el-input v-model="searchValue" placeholder="请输入客户名称或电话" />
+            <el-select v-model="searchValue">
+                <el-option
+                v-for="v in selectOptions"
+                :key="v.value"
+                :label="v.label"
+                :value="v.value"
+                >
+                </el-option>
+            </el-select>
+        </div>
+      </div>
+  
+      <!-- 筛选标签 -->
+      <div class="customer-tags boxshadow">
+        <div class="filter-row">
+          <span class="filter-label">价值标签：</span>
+          <div class="filter-tags">
+            <span v-for="item in valueTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
+          </div>
+        </div>
+        <div class="filter-row">
+          <span class="filter-label">生命周期标签：</span>
+          <div class="filter-tags">
+            <span v-for="item in lifeTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
+          </div>
+        </div>
+        <div class="filter-row">
+          <span class="filter-label">行为标签：</span>
+          <div class="filter-tags">
+            <span v-for="item in actionTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
+           
+          </div>
+        </div>
+        <transition name="fade">
+          <div v-if="showMore" class="filter-row">
+            <span class="filter-label">更多标签：</span>
+            <div class="filter-tags">
+              <span v-for="item in moreTags" :key="item.label" >{{ item.label }}({{ item.count }})</span>
+            </div>
+          </div>
+        </transition>
+        <div class="filter-more-btn">
+          <el-link :underline="false" @click="showMore = !showMore">
+            {{ showMore ? '收起' : '更多' }}
+            <i v-if="showMore" class="iconfont-sys"> &#xe864;</i>
+            <i v-else  class="iconfont-sys">&#xe867;</i>
+          </el-link>
+        </div>
+      </div>
+      <div class="boxshadow">
+          <!-- Tab切换 -->
+        <el-tabs v-model="activeTab" class="customer-tabs">
+            <el-tab-pane label="全部" name="all"></el-tab-pane>
+            <el-tab-pane label="跟进中" name="following"></el-tab-pane>
+            <el-tab-pane label="已成交" name="dealed"></el-tab-pane>
+            <el-tab-pane label="已丢失" name="lost"></el-tab-pane>
+        </el-tabs>
+    
+        <!-- 表格 -->
+        <ArtTable :data="tableData" class="customer-table">
+            <template #default>
+            <el-table-column prop="name" label="客户名称" align="center" />
+            <el-table-column prop="mobile" label="客户手机号" align="center" />
+            <el-table-column prop="channel" label="渠道" align="center" />
+            <el-table-column prop="phone" label="电话" align="center" />
+            <el-table-column prop="demand" label="需求" align="center" />
+            <el-table-column prop="status" label="状态" align="center">
+                <template #default="scope">
+                <span :class="statusClass(scope.row.status)">
+                    {{ scope.row.statusText }}
+                </span>
+                </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="200px" align="center">
+                <template #default="scope">
+                <el-link type="primary" :underline="false" style="margin-right: 8px;" @click="goEdit(scope.row)"> <i class="iconfont-sys"> &#xe70f;</i>查看</el-link>
+                <el-link type="primary" :underline="false" @click="goAddFollow(scope.row)"> <i class="iconfont-sys"> &#xe6bf;</i> 添加跟进</el-link>
+                </template>
+            </el-table-column>
+            </template>
+        </ArtTable>  
+      </div>
+      
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  import { Plus } from '@element-plus/icons-vue'
+//   import ArtSearchInput from '@/components/ArtSearchInput'
+//   import ArtSearchSelect from '@/components/ArtSearchSelect'
+//   import ArtTable from '@/components/ArtTable'
+  
+  const searchValue = ref('')
+  const filterType = ref('all')
+  const activeTab = ref('all')
+  const showMore = ref(false)
+  
+  const selectOptions = [
+    { label: '全部', value: 'all' },
+    { label: '高价值', value: 'high' },
+    { label: '中价值', value: 'mid' },
+    { label: '低价值', value: 'low' }
+  ]
+  
+  const valueTags = [
+    { label: '高价值', count: 10 },
+    { label: '中价值', count: 10 },
+    { label: '低价值', count: 10 },
+    { label: '潜在高价值', count: 10 }
+  ]
+  const lifeTags = [
+    { label: '新客户', count: 10 },
+    { label: '活跃', count: 10 },
+    { label: '深度', count: 10 },
+    { label: '流失', count: 10 }
+  ]
+  const actionTags = [
+    { label: '高频购买', count: 10 },
+    { label: '大单', count: 10 },
+    { label: '促销敏感', count: 10 }
+  ]
+  const moreTags = [
+    { label: '标签A', count: 5 },
+    { label: '标签B', count: 3 }
+  ]
+  
+  const tableData = [
+    { name: '王先生', mobile: '登录手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'following', statusText: '跟进中' },
+    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'dealed', statusText: '已成交' },
+    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '二手车', status: 'lost', statusText: '已丢失' },
+    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
+    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' },
+    { name: '王先生', mobile: '注册手机号', channel: '阿里', phone: '16521421014', demand: '新车', status: 'following', statusText: '跟进中' }
+  ]
+  
+  function statusClass(status: string) {
+    if (status === 'following') return 'status-following'
+    if (status === 'dealed') return 'status-dealed'
+    if (status === 'lost') return 'status-lost'
+    return ''
+  }
+
+  const router = useRouter()
+    function goAdd() {
+        router.push('/crmpc/customer/add')
+    }
+    function goEdit(row: any) {
+      router.push({
+        path: '/crmpc/customer/show',
+        query: { name: row.name }
+      })
+    }
+    function goAddFollow(row: any) {
+      router.push({
+        path: '/crmpc/customer/followadd',
+        query: { name: row.customerName } // 可带客户名等参数
+      })
+    }
+
+  </script>
+  
+  <style scoped>
+  :deep(.el-table__header th) {
+        background: #f7f9fa !important;
+        color: #333;
+        font-weight: bold;
+    }
+    :deep(.el-table__body tr.custom-table-row td) {
+        border-bottom: 1px solid #F7F9FA !important;
+        border-right: 1px solid #F7F9FA !important;
+    }
+    :deep(.el-table__body tr td:last-child) {
+        border-right: none !important;
+    }
+    :deep(.el-table__body tr:last-child td) {
+        border-bottom: none !important;
+    }
+    :deep(.el-table__header-wrapper th) {
+        border-bottom: 1px solid #F7F9FA !important;
+        border-right: 1px solid #F7F9FA !important;
+    }
+    :deep(.el-table__header-wrapper th:last-child) {
+        border-right: none !important;
+    }
+    :deep(.el-table) {
+        border: 1px solid #F7F9FA !important;
+        border-radius: 6px;
+    }
+  .customer-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+  .customer-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px 10px;
+    background: var(--art-main-bg-color);
+  }
+  .customer-search-group {
+    display: flex;
+    gap: 12px;
+  }
+  .customer-tags {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .filter-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 14px;
+  }
+  .filter-label {
+    width: 120px;
+    color: #666;
+    margin-right: 8px;
+    flex-shrink: 0;
+    font-size: 14px;
+  }
+  .filter-tags {
+    flex: 1;
+    color: #333;
+    font-weight: 500;
+    font-size: 14px;
+    span{
+        margin-right: 20px;
+    }
+  }
+  .customer-tabs {
+    margin-bottom: 8px;
+  }
+  .status-following {
+    color: #00A43F;
+    font-weight: bold;
+  }
+  .status-dealed {
+    color: #3471FF;
+    font-weight: bold;
+  }
+  .status-lost {
+    color: #FF0000;
+    font-weight: bold;
+  }
+  .customer-table {
+    background: var(--art-main-bg-color);
+    border-radius: 8px;
+    margin-top: 0;
+  }
+  .filter-more-btn {
+    text-align: center;
+    margin-top: 8px;
+  }
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity 0.2s;
+  }
+  .fade-enter-from, .fade-leave-to {
+    opacity: 0;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/crmpc/highseas/index.vue b/src/views/crmpc/highseas/index.vue
new file mode 100644
index 0000000..21454fe
--- /dev/null
+++ b/src/views/crmpc/highseas/index.vue
@@ -0,0 +1,282 @@
+<template>
+    <div class="boxshadow">
+      <div class="heard">
+        <div class="heard-title">跟进提醒</div>
+        <el-select
+          v-model="remindRange"
+          placeholder="请选择"
+          class="heard-select"
+          style="min-width: 120px"
+        >
+          <el-option label="全部" value="all" />
+          <el-option label="近三天" value="3days" />
+          <el-option label="近七天" value="7days" />
+        </el-select>
+      </div>
+      <div class="table">
+        <ArtTable
+          ref="tableRef"
+          row-key="id"
+          :loading="loading"
+          :data="tableData"
+          :currentPage="pagination.currentPage"
+          :pageSize="pagination.pageSize"
+          :total="pagination.total"
+          :marginTop="10"
+          @selection-change="handleSelectionChange"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        >
+          <template #default>
+            <el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
+            <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
+            <el-table-column prop="addr" label="地址" min-width="140"></el-table-column>
+            <el-table-column label="状态" min-width="140">
+                <template #default="scope">
+                <span :class="getCountdownClass(scope.row.nextFollow)">
+                    
+                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
+                    {{ getCountdown(scope.row.nextFollow) }}
+                </span>
+                </template>
+            </el-table-column>
+            <el-table-column fixed="right" label="操作" width="160px">
+                <template #default="scope">
+                <div class="follow-detli" @click="onDetail(scope.row)">
+                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe70f;</i></span>
+                    详情
+                </div>
+                <div class="follow-action" @click="onFollow(scope.row)">
+                    <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe841;</i></span>
+                    领单
+                </div>
+                </template>
+            </el-table-column>
+          </template>
+        </ArtTable>
+      </div>
+    </div>
+    <el-dialog v-model="detailDialogVisible" title="详情" width="400px">
+      <div v-if="detailRow">
+        <p>客户名称1：{{ detailRow.name }}</p>
+        <p>电话：{{ detailRow.phone }}</p>
+        <p>地址：{{ detailRow.addr }}</p>
+        <p>下次跟进时间：{{ detailRow.nextFollow }}</p>
+      </div>
+    </el-dialog>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue'
+  import dayjs from 'dayjs'
+  import { ElMessageBox } from 'element-plus'
+  const loading = ref(false)
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 20,
+    total: 0
+  })
+  const remindRange = ref('all')
+  const tableData = ref([
+    {
+      name: '张三',
+      phone: '13800000000',
+      addr: '迪拜',
+      nextFollow: '2025-07-15 18:00:00',
+    },
+    {
+      name: '李四',
+      phone: '13900000000',
+      addr: '迪拜',
+      nextFollow: '2025-07-16 09:30:00',
+    }
+  ])
+ // 选中的行数据
+   const selectedRows = ref<any[]>([])
+    // 处理表格行选择变化
+    const handleSelectionChange = (selection: any[]) => {
+        selectedRows.value = selection
+    }
+     // 处理表格分页变化
+    const handleSizeChange = (newPageSize: number) => {
+        pagination.pageSize = newPageSize
+        // getUserList()
+    }
+
+    const handleCurrentChange = (newCurrentPage: number) => {
+        pagination.currentPage = newCurrentPage
+        // getUserList()
+    }
+  const timer = ref(0)
+  const refreshKey = ref(0)
+  const detailDialogVisible = ref(false)
+  const detailRow = ref<any>(null)
+  
+  onMounted(() => {
+    timer.value = window.setInterval(() => {
+      refreshKey.value++
+    }, 1000)
+  })
+  
+  onUnmounted(() => {
+    if (timer.value) {
+      clearInterval(timer.value)
+    }
+  })
+  
+  function getCountdown(targetDate: string) {
+    // 让 refreshKey 成为依赖，确保每秒刷新
+    refreshKey.value
+    const now = dayjs()
+    const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+    if (!target.isValid()) return '时间格式错误'
+    const diff = target.diff(now)
+    if (diff <= 0) return '已超时'
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
+    const minutes = Math.floor((diff / (1000 * 60)) % 60)
+    const seconds = Math.floor((diff / 1000) % 60)
+    return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
+  }
+  
+  function getCountdownClass(targetDate: string) {
+    const now = dayjs()
+    const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+    if (!target.isValid() || target.diff(now) <= 0) {
+      return 'countdown-danger'
+    }
+    return 'countdown-success'
+  }
+  
+  function onFollow(row: any) {
+    ElMessageBox.confirm(
+      '确定要领取此客户吗？',
+      '提示',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    ).then(() => {
+      // 用户点击了确定，这里写领取逻辑
+      console.log('领取客户', row)
+      // 你可以在这里调用接口或做后续处理
+    }).catch(() => {
+      // 用户点击了取消
+    })
+  }
+
+  function onDetail(row: any) {
+    detailRow.value = row
+    detailDialogVisible.value = true
+  }
+  </script>
+  
+  <style lang="scss" scoped>
+  .boxshadow {
+    border-radius: 8px;
+    box-shadow: 0 2px 12px 0 rgba(0, 10, 118, 0.1);
+    background:var(--el-card-bg-color);
+    padding: 10px;
+    margin-bottom: 10px;
+  }
+  
+  .heard {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    .heard-title {
+      font-size: 20px;
+      font-weight: bold;
+      color: #333;
+      border-left: 4px solid #3471FF;
+      padding-left: 12px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+    }
+  
+    .heard-date-picker {
+      width: 120px;
+    }
+    .heard-select {
+      width: 120px;
+    }
+  }
+  
+  .dark {
+    .card-list {
+      .art-custom-card {
+        .iconfont-sys {
+          background-color: #232323 !important;
+        }
+      }
+    }
+  }
+  
+  .table {
+    :deep(.el-table__header th) {
+        background: #f7f9fa !important;
+        color: #333;
+        font-weight: bold;
+    }
+    :deep(.el-table__body tr.custom-table-row td) {
+      border-bottom: 1px solid #F7F9FA !important;
+      border-right: 1px solid #F7F9FA !important;
+    }
+    :deep(.el-table__body tr td:last-child) {
+      border-right: none !important;
+    }
+    :deep(.el-table__body tr:last-child td) {
+      border-bottom: none !important;
+    }
+    :deep(.el-table__header-wrapper th) {
+      border-bottom: 1px solid #F7F9FA !important;
+      border-right: 1px solid #F7F9FA !important;
+    }
+    :deep(.el-table__header-wrapper th:last-child) {
+      border-right: none !important;
+    }
+    :deep(.el-table) {
+      border: 1px solid #F7F9FA !important;
+      border-radius: 6px;
+    }
+    :deep(.el-table th),
+    :deep(.el-table td) {
+     text-align: center !important;
+    }
+  }
+  .countdown-danger {
+    color: #FF0000 !important;
+  }
+  .countdown-success {
+    color: #00A43F !important;
+  }
+  .follow-detli{
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: #00A43F;
+    padding: 4px 10px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    &:hover {
+      background: #f5f7fa;
+    }
+  }
+  .follow-action {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    color: #409EFF;
+    padding: 4px 10px;
+    border-radius: 4px;
+    transition: background 0.2s;
+    &:hover {
+      background: #f5f7fa;
+    }
+  }
+  
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/crmpc/home/index.vue b/src/views/crmpc/home/index.vue
new file mode 100644
index 0000000..168e4ef
--- /dev/null
+++ b/src/views/crmpc/home/index.vue
@@ -0,0 +1,21 @@
+<template>
+    <div class="console">
+      <CardList></CardList>
+  
+      <!-- <AboutProject /> -->
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+    import CardList from './widget/CardList.vue'
+    import { useCommon } from '@/composables/useCommon'
+  
+    defineOptions({ name: 'Console' })
+  
+    useCommon().scrollToTop()
+  </script>
+  
+  <style lang="scss" scoped>
+    @use './style';
+  </style>
+  
\ No newline at end of file
diff --git a/src/views/crmpc/home/style.scss b/src/views/crmpc/home/style.scss
new file mode 100644
index 0000000..351c8b4
--- /dev/null
+++ b/src/views/crmpc/home/style.scss
@@ -0,0 +1,43 @@
+@use '@styles/variables.scss' as *;
+
+.console {
+  --card-spacing: 20px;
+
+  // 卡片头部
+  :deep(.card-header) {
+    display: flex;
+    justify-content: space-between;
+    padding: 20px 25px 5px 0;
+
+    .title {
+      h4 {
+        font-size: 18px;
+        font-weight: 500;
+        color: var(--art-gray-900) !important;
+      }
+
+      p {
+        margin-top: 3px;
+        font-size: 13px;
+        color: var(--art-gray-600) !important;
+
+        span {
+          margin-left: 10px;
+          color: #52c41a;
+        }
+      }
+    }
+  }
+
+  // 设置卡片背景色、圆角、间隙
+  :deep(.card-list .card),
+  .card {
+    margin-bottom: var(--card-spacing);
+    background: var(--art-main-bg-color);
+    border-radius: calc(var(--custom-radius) + 4px) !important;
+  }
+
+  @media screen and (max-width: $device-phone) {
+    --card-spacing: 15px;
+  }
+}
diff --git a/src/views/crmpc/home/widget/CardList.vue b/src/views/crmpc/home/widget/CardList.vue
new file mode 100644
index 0000000..f9c3bad
--- /dev/null
+++ b/src/views/crmpc/home/widget/CardList.vue
@@ -0,0 +1,376 @@
+<template>
+  <div class="homeheard">
+    您已陪伴领客 CRM  <span class="daynum"><span class="day">153</span>天</span>
+  </div>
+  <div class="boxshadow">
+    <div class="heard">
+      <div class="heard-title">数据简报</div>
+      <el-date-picker
+        v-model="selectedDate"
+        type="month"
+        format="YYYY-MM"
+        value-format="YYYY-MM"
+        placeholder="选择年月"
+        class="heard-date-picker"
+      />
+    </div>
+    <el-row :gutter="20" class="card-list">
+      <el-col v-for="(item, index) in dataList" :key="index" :sm="12" :md="6" :lg="4" >
+        <div class="card art-custom-card" :style="{ backgroundImage: `url(${item.avatar})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
+          <CountTo
+            class="number box-title"
+            :endVal="item.num"
+            :duration="1000"
+            separator=""
+          ></CountTo>
+          <div class="change-box">
+            <span class="change-text">{{item.des}}</span>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+  <div class="boxshadow">
+    <div class="heard">
+      <div class="heard-title">跟进提醒</div>
+      <el-select
+        v-model="remindRange"
+        placeholder="请选择"
+        class="heard-select"
+        style="min-width: 120px"
+      >
+        <el-option label="全部" value="all" />
+        <el-option label="近三天" value="3days" />
+        <el-option label="近七天" value="7days" />
+      </el-select>
+    </div>
+    <div class="table">
+      <el-table :data="tableData" style="width: 100%" header-cell-class-name="custom-table-header" row-class-name="custom-table-row">
+        <el-table-column prop="name" label="客户名称" min-width="120"></el-table-column>
+        <el-table-column prop="phone" label="电话" min-width="120"></el-table-column>
+        <el-table-column prop="nextFollow" label="下次跟进时间" min-width="140"></el-table-column>
+        <el-table-column label="状态" min-width="140">
+          <template #default="scope">
+            <span :class="getCountdownClass(scope.row.nextFollow)">
+              
+              <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe7b1;</i></span>
+              {{ getCountdown(scope.row.nextFollow) }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="100">
+          <template #default="scope">
+            <div class="follow-action" @click="onFollow(scope.row)">
+              <span class="custom-clock-icon" style="vertical-align: middle; margin-right: 4px;"><i class="iconfont-sys">&#xe6bf;</i></span>
+              跟进
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, onMounted, onUnmounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useSettingStore } from '@/store/modules/setting'
+import { CountTo } from 'vue3-count-to'
+import adduser from '@/assets/img/crm/adduser.png'
+import addbf from '@/assets/img/crm/addbf.png'
+import addgj from '@/assets/img/crm/addgj.png'
+import deal from '@/assets/img/crm/deal.png'
+import gjing from '@/assets/img/crm/gjing.png'
+import loss from '@/assets/img/crm/loss.png'
+import dayjs from 'dayjs'
+import { Clock } from '@element-plus/icons-vue'
+
+const selectedDate = ref('')
+const remindRange = ref('all')
+
+const dataList = reactive([
+  {
+    des: '新增客户',
+    startVal: 0,
+    duration: 1000,
+    num: 0,
+    avatar: adduser
+  },
+  {
+    des: '新增拜访',
+    startVal: 0,
+    duration: 1000,
+    num: 182,
+    avatar: addbf
+  },
+  {
+    des: '新增跟进',
+    startVal: 0,
+    duration: 1000,
+    num: 9520,
+    avatar: addgj
+  },
+  {
+    des: '跟进中',
+    startVal: 0,
+    duration: 1000,
+    num: 156,
+    avatar: gjing
+  },
+  {
+    des: '已成交',
+    startVal: 0,
+    duration: 1000,
+    num: 156,
+    avatar: deal
+  },
+  {
+    des: '已丢失',
+    startVal: 0,
+    duration: 1000,
+    num: 156,
+    avatar: loss
+  }
+])
+
+const tableData = ref([
+  {
+    name: '张三',
+    phone: '13800000000',
+    nextFollow: '2025-07-15 18:00:00',
+  },
+  {
+    name: '李四',
+    phone: '13900000000',
+    nextFollow: '2025-07-16 09:30:00',
+  }
+])
+
+const timer = ref(0)
+const refreshKey = ref(0)
+
+onMounted(() => {
+  timer.value = window.setInterval(() => {
+    refreshKey.value++
+  }, 1000)
+})
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearInterval(timer.value)
+  }
+})
+
+function getCountdown(targetDate: string) {
+  // 让 refreshKey 成为依赖，确保每秒刷新
+  refreshKey.value
+  const now = dayjs()
+  const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+  if (!target.isValid()) return '时间格式错误'
+  const diff = target.diff(now)
+  if (diff <= 0) return '已超时'
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+  const hours = Math.floor((diff / (1000 * 60 * 60)) % 24)
+  const minutes = Math.floor((diff / (1000 * 60)) % 60)
+  const seconds = Math.floor((diff / 1000) % 60)
+  return `${days > 0 ? days + '天' : ''}${hours}小时${minutes}分${seconds}秒`
+}
+
+function getCountdownClass(targetDate: string) {
+  const now = dayjs()
+  const target = dayjs(targetDate, 'YYYY-MM-DD HH:mm:ss')
+  if (!target.isValid() || target.diff(now) <= 0) {
+    return 'countdown-danger'
+  }
+  return 'countdown-success'
+}
+
+function onFollow(row: any) {
+  // 这里可以自定义点击后的逻辑
+  console.log('跟进', row)
+}
+</script>
+
+<style lang="scss" scoped>
+.homeheard{
+  background: 
+    url('@/assets/img/crm/hometop.png') no-repeat center/cover,
+    linear-gradient(90deg, #EDF2FF 0%, #CBE5FC 72.55%);
+    padding: 10px;
+margin-bottom: 10px;
+border-radius: 6px;
+display: flex;
+  align-items: center; /* 垂直居中 */
+  color: #333333;
+
+}
+.daynum{
+  margin-left: 20px;
+  color: #3471FF;
+}
+.day{
+  font-size: 70px;
+  font-weight: bold;
+}
+.card-list {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  background-color: var(--el-card-bg-color) !important;
+
+  .art-custom-card {
+    border: none !important;
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 120px;
+    align-items: end;
+    padding: 0 18px;
+    list-style: none;
+    transition: all 0.3s ease;
+    $icon-size: 52px;
+
+    .iconfont-sys {
+      position: absolute;
+      top: 0;
+      right: 20px;
+      bottom: 0;
+      width: $icon-size;
+      height: $icon-size;
+      margin: auto;
+      overflow: hidden;
+      font-size: 22px;
+      line-height: $icon-size;
+      color: var(--el-color-primary) !important;
+      text-align: center;
+      background-color: var(--el-color-primary-light-9);
+      border-radius: 12px;
+    }
+
+    .des {
+      display: block;
+      height: 14px;
+      font-size: 14px;
+      line-height: 14px;
+    }
+
+    .number {
+      display: block;
+      margin-top: 10px;
+      font-size: 28px;
+      font-weight: 400;
+    }
+
+    .change-box {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+
+      .change-text {
+        display: block;
+        font-size: 13px;
+        // color: var(--art-text-gray-600);
+      }
+
+      .change {
+        display: block;
+        margin-left: 5px;
+        font-size: 13px;
+        font-weight: bold;
+
+        &.text-success {
+          color: var(--el-color-success);
+        }
+
+        &.text-danger {
+          color: var(--el-color-danger);
+        }
+      }
+    }
+  }
+}
+
+.heard {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  .heard-title {
+    font-size: 20px;
+    font-weight: bold;
+    color: #333;
+    border-left: 4px solid #3471FF;
+    padding-left: 12px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+  }
+
+  .heard-date-picker {
+    width: 120px;
+  }
+  .heard-select {
+    width: 120px;
+  }
+}
+
+.dark {
+  .card-list {
+    .art-custom-card {
+      .iconfont-sys {
+        background-color: #232323 !important;
+      }
+    }
+  }
+}
+
+.table {
+  ::v-deep .custom-table-header {
+    background: #F7F9FA !important;
+    color: #333;
+    font-weight: bold;
+  }
+  ::v-deep .el-table__body tr.custom-table-row td {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
+  }
+  ::v-deep .el-table__body tr td:last-child {
+    border-right: none !important;
+  }
+  ::v-deep .el-table__body tr:last-child td {
+    border-bottom: none !important;
+  }
+  ::v-deep .el-table__header-wrapper th {
+    border-bottom: 1px solid #F7F9FA !important;
+    border-right: 1px solid #F7F9FA !important;
+  }
+  ::v-deep .el-table__header-wrapper th:last-child {
+    border-right: none !important;
+  }
+  ::v-deep .el-table {
+    border: 1px solid #F7F9FA !important;
+    border-radius: 6px;
+  }
+}
+.countdown-danger {
+  color: #FF0000 !important;
+}
+.countdown-success {
+  color: #00A43F !important;
+}
+.follow-action {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  color: #409EFF;
+  padding: 4px 10px;
+  border-radius: 4px;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f7fa;
+  }
+}
+</style>
diff --git a/src/views/crmpc/recycle/Recycle.vue b/src/views/crmpc/recycle/Recycle.vue
new file mode 100644
index 0000000..23d60eb
--- /dev/null
+++ b/src/views/crmpc/recycle/Recycle.vue
@@ -0,0 +1,61 @@
+<template>
+    <div class="recycle-page">
+      <el-card class="recycle-card">
+        <div class="recycle-title">
+          <span class="title-dot"></span>回收站
+        </div>
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column prop="name" label="姓名" />
+          <el-table-column prop="phone" label="联系方式" />
+          <el-table-column label="操作" align="right" width="120">
+            <template #default="scope">
+              <el-button type="primary" size="small">恢复客户</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref } from 'vue'
+  
+  const tableData = ref([
+    { name: '刘先生', phone: '15632012141' },
+    { name: '刘先生', phone: '15632012141' },
+    { name: '刘先生', phone: '15632012141' },
+    { name: '刘先生', phone: '15632012141' },
+    { name: '刘先生', phone: '15632012141' },
+    { name: '刘先生', phone: '15632012141' }
+  ])
+  </script>
+  
+  <style scoped>
+  .recycle-page {
+    background: #fafbfc;
+    min-height: 100vh;
+    padding: 24px;
+  }
+  .recycle-card {
+    border-radius: 8px;
+    background: #fff;
+  }
+  .recycle-title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+  }
+  .title-dot {
+    display: inline-block;
+    width: 6px;
+    height: 16px;
+    background: #3471FF;
+    border-radius: 2px;
+    margin-right: 8px;
+  }
+  .el-table .hide-header th {
+    display: none;
+  }
+  </style>
\ No newline at end of file