customerNew.html 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <meta name="keywords" content="客户关系管理系统,CRM系统,销售订单管理,随访任务,线索,商机,联系人,产品,智能客户关系管理" />
  7. <meta name="description"
  8. content="智能客户管家是一款结合了人工智能技术的客户关系管理系统(CRM),使用DeepSeek大模型能力帮助企业全面管理客户和订单信息,降低客户流失率,促进成单。可以有效降低企业的营销管理成本。" />
  9. <title>AI智能客户管家|客户关系管理系统|CRM系统|-客户管家是强大易用的客户关系管理系统。销售订单|客户管理|线索|商机|联系人|产品|报表分析|智能BI</title>
  10. <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  11. <link href="css/styles.css" rel="stylesheet">
  12. <link rel="stylesheet" href="./css/reset.css">
  13. <link rel="stylesheet" href="./css/customerNew/customerNew.css">
  14. <link rel="stylesheet" href="./css/element-uiCss.css">
  15. <script src="./js/vue.min.js"></script>
  16. <script src="./js/element-ui.js"></script>
  17. <script src="js/jquery1.42.min.js"></script>
  18. </link>
  19. </head>
  20. <body data-spy="scroll" data-target=".fixed-top" id="body">
  21. <div id="app">
  22. <div class="spinner-wrapper">
  23. <div class="spinner">
  24. <div class="bounce1"></div>
  25. <div class="bounce2"></div>
  26. <div class="bounce3"></div>
  27. </div>
  28. </div>
  29. <!-- 头部 -->
  30. <iframe id="headerIframe" src="./moduleView/header.html" class="iframeClass" onLoad="reinitIframe();"></iframe>
  31. <!-- 咨询客服 -->
  32. <div class="zhixun" id="zhixun" style="display: none">
  33. <p>微信扫码咨询</p>
  34. <img src="./image/codecopy.jpg" alt="">
  35. <p><span style="color: #595959;">联系电话:</span>15895914665</p>
  36. </div>
  37. <!-- 咨询的图标 -->
  38. <div class="consulting" id="consulting">
  39. <img id="consultigImg" src="./image/ions/kefu2.png" alt="">
  40. </div>
  41. <!-- banner -->
  42. <div class="bannar">
  43. <img src="./image/customerNew/banner.gif" alt="" />
  44. <div class="bannar_text">
  45. <div class="bannar_text_title">AI智能客户管家</div>
  46. <div class="bannar_text_item">· 节约企业营销成本<br />· 降低客户流失率<br />· ChatBI+DeepSeek智能数据处理系统</div>
  47. </div>
  48. <div class="bannar_text_btn">
  49. <a href="http://crm.ttkuaiban.com/login" class="btn btn-primary btn-lg">立即免费体验</a>
  50. </div>
  51. </div>
  52. <!-- 客户一体化 -->
  53. <div class="customer_integration">
  54. <div class="customer_integration_conter">
  55. <div class="integrationImg">
  56. <img src="./image/customerNew/integrationImg.png" alt="">
  57. </div>
  58. <div class="integrationText">· 客户管家,独创AI一体化智能管理+DeepSeek</div>
  59. </div>
  60. </div>
  61. <!-- 核心功能 -->
  62. <div class="core">
  63. <div class="core-title">核心功能</div>
  64. <div class="core-text">一站式AI智能报表、客户管理、线索商机、数据分析、产品管理、个性化等功能。</div>
  65. <div class="core-content">
  66. <div class="core-content-item">
  67. <div class="item-img"><img src="./image/customerNew/core1.png" /></div>
  68. <div class="item-title">AI 智能报表</div>
  69. <div class="item-text">通过AI大模型对数据的理解,<br /> 根据用户描述的需求实时生成报表。</div>
  70. </div>
  71. <div class="core-content-item">
  72. <div class="item-img"><img src="./image/customerNew/core2.png" /></div>
  73. <div class="item-title">客户管理</div>
  74. <div class="item-text">管理客户名称、行业、地区、联系人信息等</div>
  75. </div>
  76. <div class="core-content-item">
  77. <div class="item-img"><img src="./image/customerNew/core3.png" /></div>
  78. <div class="item-title">线索商机</div>
  79. <div class="item-text">归纳线索信息、线索转商机、商机可能性、预期收益等</div>
  80. </div>
  81. <div class="core-content-item">
  82. <div class="item-img"><img src="./image/customerNew/core4.png" /></div>
  83. <div class="item-title">数据分析</div>
  84. <div class="item-text">线索分析、来源排行、商机分析、任务统计</div>
  85. </div>
  86. <div class="core-content-item">
  87. <div class="item-img"><img src="./image/customerNew/core5.png" /></div>
  88. <div class="item-title">产品管理</div>
  89. <div class="item-text">产品基础信息、销售时间、产品描述等</div>
  90. </div>
  91. <div class="core-content-item">
  92. <div class="item-img"><img src="./image/customerNew/core6.png" /></div>
  93. <div class="item-title">个性化</div>
  94. <div class="item-text">自定义组件、个性化UI等</div>
  95. </div>
  96. </div>
  97. </div>
  98. <!-- 需求 -->
  99. <div class="demand">
  100. <div class="demand-title">满足您的各类需求</div>
  101. <div class="demand-content">
  102. <img src="./image/customerNew/demand.png" alt="">
  103. <div class="demand-item orientation1">
  104. <div class="demand-item-title">
  105. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  106. 智能销售管理
  107. </div>
  108. <div class="demand-item-text">
  109. 商机信息字段齐全并可自定义;<br />
  110. 商机分阶段处理;<br />
  111. 根据商机创建任务。
  112. </div>
  113. </div>
  114. <div class="demand-item orientation2">
  115. <div class="demand-item-title">
  116. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  117. 提高销售成单率
  118. </div>
  119. <div class="demand-item-text">
  120. 商机信息字段齐全并可自定义;<br />
  121. 商机分阶段处理;<br />
  122. 根据商机创建任务。
  123. </div>
  124. </div>
  125. <div class="demand-item orientation3">
  126. <div class="demand-item-title">
  127. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  128. 便捷用户操作
  129. </div>
  130. <div class="demand-item-text">
  131. 操作逻辑简单易学;<br />
  132. 系统界面简洁明了;<br />
  133. 内容展示完整易读。
  134. </div>
  135. </div>
  136. <div class="demand-item orientation4">
  137. <div class="demand-item-title">
  138. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  139. 降低客户流失率
  140. </div>
  141. <div class="demand-item-text">
  142. 客户信息字段齐全并可自定义;<br />
  143. 客户回访创建;<br />
  144. 客户问题记录。
  145. </div>
  146. </div>
  147. <div class="demand-item orientation5">
  148. <div class="demand-item-title">
  149. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  150. 提高线索转化率
  151. </div>
  152. <div class="demand-item-text">
  153. 线索信息字段齐全并可自定义;<br />
  154. 根据线索创建任务;<br />
  155. 线索长时间未转化自动加入公共池。
  156. </div>
  157. </div>
  158. <div class="demand-item orientation6">
  159. <div class="demand-item-title">
  160. <div class="item-title-img"><img src="./image/customerNew/demandIcon.png" alt=""></div>
  161. 缩短销售周期
  162. </div>
  163. <div class="demand-item-text">
  164. 全流程清晰明了;<br />
  165. 可创建任务协同工作;<br />
  166. 设置提醒防止遗漏。
  167. </div>
  168. </div>
  169. </div>
  170. </div>
  171. <!-- 特色展示 -->
  172. <div class="exhibition">
  173. <div class="exhibition-title">特色展示</div>
  174. <div class="exhibition-content">
  175. <div class="exhibition-item">
  176. <div class="exhibition-item-line">
  177. <div :class="`optFor`" :style="`top: ${exhibitionTop}`"></div>
  178. </div>
  179. <div class="exhibition-item-text">
  180. <div :class="`text ${exhibitionIndex == index ? 'text-On' : ''}`" v-for="(item,index) in exhibitionList"
  181. :key="index" @click="changeExhibitionIndex(index)">{{item.label}}</div>
  182. </div>
  183. </div>
  184. <div class="exhibition-show">
  185. <div class="exhibition-show-carouselImage">
  186. <el-carousel ref="exhibitionRef" direction="vertical" :autoplay="false" arrow="never" height="37.6875rem" indicator-position="none">
  187. <el-carousel-item v-for="(item, index) in exhibitionList" :key="index">
  188. <img :src="item.img" />
  189. </el-carousel-item>
  190. </el-carousel>
  191. </div>
  192. </div>
  193. </div>
  194. </div>
  195. <!-- 行业解决方案 -->
  196. <div class="solution">
  197. <div class="solution-title">行业解决方案</div>
  198. <div class="solution-content">
  199. <div class="solution-item" v-for="(item, index) in solutionList" :key="index">
  200. <div class="solution-item-title">{{ item.title }}</div>
  201. <div class="solution-item-text">{{ item.text }}</div>
  202. </div>
  203. </div>
  204. </div>
  205. <!-- 客户评价 -->
  206. <div class="customerReviews">
  207. <div class="customerReviews-title">客户评价</div>
  208. <div class="customerReviews-content">
  209. <div class="carouselImage">
  210. <el-carousel ref="carouselRef" :interval="5000" height="37.5rem" arrow="never" indicator-position="none">
  211. <el-carousel-item v-for="item in carouselImageList" :key="item">
  212. <div class="carousel-item-box">
  213. <img :src="item.image"></img>
  214. <div class="carousel-item-title">{{ item.title }}</div>
  215. <div class="carousel-item-text" v-html="item.text"></div>
  216. </div>
  217. </el-carousel-item>
  218. </el-carousel>
  219. </div>
  220. <!-- 左右箭头 -->
  221. <div class="icon left" @click="prev()"><img src="./image/customerNew/left.png" alt=""></div>
  222. <div class="icon right" @click="next()"><img src="./image/customerNew/right.png" alt=""></div>
  223. </div>
  224. </div>
  225. <!-- 底部 -->
  226. <iframe id="bottomIframe" src="./moduleView/bottom.html" class="resetIframe resetIframebtn"></iframe>
  227. </div>
  228. </body>
  229. <script>
  230. new Vue({
  231. el: "#app",
  232. data: {
  233. exhibitionIndex: 0,
  234. exhibitionList: [
  235. { label: '线索', img: './image/customerNew/exhibitionListImg1.png' },
  236. { label: '商机', img: './image/customerNew/exhibitionListImg2.png' },
  237. { label: '客户', img: './image/customerNew/exhibitionListImg3.png' },
  238. { label: '任务', img: './image/customerNew/exhibitionListImg4.png' },
  239. { label: '报表', img: './image/customerNew/exhibitionListImg5.png' },
  240. { label: '产品', img: './image/customerNew/exhibitionListImg6.png' },
  241. { label: '联系人', img: './image/customerNew/exhibitionListImg7.png' },
  242. { label: '数据分析', img: './image/customerNew/exhibitionListImg8.png' },
  243. { label: '销售订单', img: './image/customerNew/exhibitionListImg9.png' },
  244. { label: '组织机构', img: './image/customerNew/exhibitionListImg10.png' },
  245. { label: '系统基础设置', img: './image/customerNew/exhibitionListImg11.png' },
  246. ],
  247. solutionList: [
  248. { title: '生产制造业', text: '机械制造业、电子信息制造业、汽车制造业、化工制造业、纺织制造业和食品加工业等。' },
  249. { title: '互联网行业', text: '互联网服务、电子商务、在线娱乐、数字内容、信息技术、人工智能等。' },
  250. { title: '家居装修行业', text: '设计、建筑施工、建材生产、装饰及家具产品制造等。' },
  251. { title: '医疗医药行业', text: '各类医疗机构、药品、医疗器械等。' },
  252. { title: '外贸行业', text: '商品贸易、服务贸易、技术贸易、跨国投资等。' },
  253. { title: '高科技技术制造业', text: '电子信息制造业、航空航天制造业、生物医药制造业、新能源与环保制造业等。' },
  254. { title: '教育培训行业', text: '学校教育、职业教育、语言培训、艺术教育等。' },
  255. { title: '金融行业', text: '银行业、保险业、证券业、基金业、期货与期权业等。' },
  256. { title: 'IT软件行业', text: '软件开发、硬件制造、云计算、大数据、人工智能等。' },
  257. { title: '物流行业', text: '运输、仓储、配送、信息管理等。' },
  258. ],
  259. carouselImageList: [
  260. { title: '高效便捷,一站式服务体验超乎想象!', text: '自从使用了这款客户管家系统,我的工作效率得到了显著提升。<br/>无论是客户信息管理、订单处理还是售后服务跟踪,<br />都实现了无缝对接,大大节省了时间和精力。<br />系统界面友好,操作流畅,客户反馈也更加及时和准确,<br />帮助我们团队赢得了更多客户的信任和好评。', image: './image/customerNew/Customer_Steward_evaluate.png' },
  261. { title: '智能化管理,让客户关系维护变得如此简单!', text: '客户管家系统的智能化功能让我印象深刻。<br />它能够自动分析客户数据,提供创新便捷的交互式报表,<br />帮助我们快速得到想要的数据。<br />这种智能化管理让我们的客户关系维护变得更加简单高效,<br />客户满意度也持续攀升。', image: './image/customerNew/Customer_Steward_evaluate2.png' },
  262. { title: '安全稳定,值得信赖的合作伙伴!', text: '在数据安全日益重要的今天,客户管家系统给我带来了极大的安心。<br />它采用了先进的加密技术和安全防护措施,确保客户信息的绝对保密和完整。<br />系统运行稳定可靠,从未出现过信息泄露或系统故障的情况。<br />这种对安全的承诺和坚持让我深感信赖,<br />也让我们团队更加愿意与客户管家系统长期合作下去。', image: './image/customerNew/Customer_Steward_evaluate3.png' },
  263. ]
  264. },
  265. computed: {
  266. exhibitionTop() {
  267. return `${this.exhibitionIndex * 80}px`
  268. }
  269. },
  270. mounted() {
  271. },
  272. methods: {
  273. prev() {
  274. this.$refs.carouselRef.prev()
  275. },
  276. next() {
  277. this.$refs.carouselRef.next()
  278. },
  279. changeExhibitionIndex(index) {
  280. console.log(index, '<==== 点击的索引')
  281. this.$refs.exhibitionRef.setActiveItem(index)
  282. this.exhibitionIndex = index
  283. }
  284. },
  285. })
  286. </script>
  287. <script src="js/js/jquery.min.js"></script>
  288. <script src="js/js/scripts.js"></script>
  289. <script src="js/iframe.js"></script>
  290. <script>
  291. $('#zhixun').hover(function () {
  292. $("#zhixun").show()
  293. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  294. }, function () {
  295. $("#zhixun").hide()
  296. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  297. })
  298. $('#consulting').hover(function () {
  299. $("#zhixun").show()
  300. $("#consultigImg").attr("src", './image/ions/kefu1.png')
  301. }, function () {
  302. $("#zhixun").hide()
  303. $("#consultigImg").attr("src", './image/ions/kefu2.png')
  304. })
  305. </script>
  306. </html>