You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

1583 lines
41 KiB

  1. <template>
  2. <view class="box">
  3. <view class="content">
  4. <view class="content-tips" @click="goedit()">
  5. <view class="content-first">
  6. <view class="left">
  7. <view v-if="customerInfo.level.length==0"></view>
  8. <view class="img" v-else-if="customerInfo.level==1">A</view>
  9. <view class="img" v-else-if="customerInfo.level==2">B</view>
  10. <view class="img" v-else-if="customerInfo.level==3">C</view>
  11. <view class="img" v-else-if="customerInfo.level==4">D</view>
  12. <view class="test">{{customerInfo.name || '--'}}</view>
  13. <view class="edit" v-if="isEdit">
  14. <image class="screen-sel-img" src="../../../static/images/edit.png" mode=""></image>
  15. </view>
  16. </view>
  17. <view class="right">
  18. <view class="test">销讲执行:<text class="blue">{{ customerInfo.fraction || 0 }}%</text></view>
  19. </view>
  20. </view>
  21. <view class="content-sec">
  22. <view class="content-sec-lab">
  23. <view class="content-sec-lab1">
  24. 手机号码:{{customerInfo.phone&&customerInfo.isShow==1?customerInfo.phone.length==11?customerInfo.phone.substr(0, 3) + '****' + customerInfo.phone.substr(7):customerInfo.phone:customerInfo.phone&&customerInfo.isShow!=1?customerInfo.phone: '--'}}
  25. </view>
  26. <view class="content-sec-lab1" style="width: 44%">到访次数:{{ customerInfo.visitRecord || 0 }}次/{{
  27. customerInfo.mm || 0
  28. }}min</view>
  29. </view>
  30. <view class="content-sec-lab">
  31. <view class="content-sec-lab1">需求挖掘:{{ customerInfo.wordFraction || 0 }}%</view>
  32. <view class="content-sec-lab1" @click.stop="tipupon" style="width: 44%">画像标签:<text
  33. class="look">{{
  34. customerInfo.demand.cusSemanticWordsList?customerInfo.demand.cusSemanticWordsList.length:0}}</text><text
  35. class="look1">查看</text></view>
  36. </view>
  37. <view class="content-sec-lab">
  38. <view class="content-sec-lab1">所属顾问:{{ customerInfo.agentName || "--" }}</view>
  39. <view class="content-sec-lab1" style="width: 44%">客户阶段:{{ customerInfo.stageName || "--" }}
  40. </view>
  41. </view>
  42. <view class="content-sec-lab">
  43. <view class="content-sec-lab1">上次到访:{{ customerInfo.createTime || "--" }}</view>
  44. </view>
  45. </view>
  46. <view class="content-last">
  47. <view class="content-last-con">
  48. 备注:{{customerInfo.remarks ? customerInfo.remarks : "暂无"}}
  49. </view>
  50. </view>
  51. </view>
  52. </view>
  53. <view class="tab">
  54. <view class="tabbox">
  55. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
  56. </view>
  57. <view class="tabbox">
  58. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
  59. </view>
  60. <view class="tabbox">
  61. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">销讲执行率</view>
  62. </view>
  63. <view class="tabbox">
  64. <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">挖掘执行率</view>
  65. </view>
  66. </view>
  67. <view class="tabchange">
  68. <view style="min-height: 700rpx;">
  69. <!-- 接待记录 -->
  70. <view class="tabactive1" v-if="activeTotal==0">
  71. <view v-if="Thevisitingrecords.length==0"
  72. style="width: 100%;height: 100%;display: flex;align-items: center;">
  73. <view style="width: 100%;padding-top: 60rpx;">
  74. <view style="width: 100%;text-align: center;">
  75. <image style="width: 220rpx;height: 200rpx;"
  76. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  77. </view>
  78. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  79. </view>
  80. </view>
  81. <view v-if="Thevisitingrecords.length!=0" class="content-tips"
  82. v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
  83. <view class="content-first">
  84. <view class="left">
  85. <view class="name">{{item.agentName || '--'}}</view>
  86. <view class="status" v-if="item.replaceReception==1">代接待</view>
  87. </view>
  88. </view>
  89. <view class="content-sec">
  90. <view class="left">
  91. <view class="cus" style="line-height: 46rpx;">客户:{{item.name || '--'}} |</view>
  92. <view style="line-height: 46rpx;" class="arriveNum">{{item.visitRecord || '0'}}次到访
  93. </view>
  94. </view>
  95. <view class="right">{{item.fraction || '0'}}%</view>
  96. </view>
  97. <view class="content-last">{{item.createTime}} | {{item.mm || 0}}min</view>
  98. </view>
  99. </view>
  100. <!-- 跟进记录 -->
  101. <view class="tabactive2" v-if="activeTotal==1" style="min-height: 600rpx;">
  102. <view v-if="fllowList.length==0"
  103. style="width: 100%;height:600rpx;display: flex;align-items: center;background-color: #FFFFFF;">
  104. <view style="width: 100%;padding-top: 60rpx;">
  105. <view style="width: 100%;text-align: center;">
  106. <image style="width: 220rpx;height: 200rpx;"
  107. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  108. </view>
  109. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  110. </view>
  111. </view>
  112. <view v-if="fllowList.length!=0" class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
  113. <view class="tab2-first">
  114. <view class="tab2-first-1">
  115. <view class="tab2-first-left">
  116. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  117. <view class="name">{{item.agentName || '||'}}</view>
  118. </view>
  119. <view class="tab2-first-right">{{item.createTime}}</view>
  120. </view>
  121. <view class="tab2-first-foot">跟进内容:{{item.remarks || '暂无'}}</view>
  122. </view>
  123. <!-- <view class="tab2-sec">
  124. <view class="tab-sec-edit">编辑记录</view>
  125. </view> -->
  126. </view>
  127. </view>
  128. <!-- 销讲执行率 -->
  129. <view class="ratecenter" v-if="activeTotal==2">
  130. <view
  131. style="width: 100%;height: 80rpx;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
  132. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 20rpx;">指标
  133. </view>
  134. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 170rpx;">执行率
  135. </view>
  136. </view>
  137. <view v-if="ratelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  138. <view style="width: 100%;padding-top: 60rpx;">
  139. <view style="width: 100%;text-align: center;">
  140. <image style="width: 220rpx;height: 200rpx;"
  141. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  142. </view>
  143. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  144. </view>
  145. </view>
  146. <view class="Level-box" v-if="ratelist.length!=0" v-for="(item,index) in ratelist" :key="index">
  147. <view class="Level1che" @click="changeshow(item,1)">
  148. <view class="title1">{{item.name}}</view>
  149. <view class="leve1-jindu">
  150. <view class="jindutiao">
  151. <view class="huanxing" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
  152. <view class="text">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%
  153. </view>
  154. </view>
  155. </view>
  156. <view class="jiantobox">
  157. <image v-if="!item.show" class="arrow rotatearrow" src="/static/images/down.png"
  158. mode="" />
  159. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  160. </view>
  161. </view>
  162. <view class="hhhbox" v-if="item.show" v-for="(subitem,i) in item.children" :key="i">
  163. <view class="Level2che" @click="changeshow2(subitem,1)">
  164. <view class="title1 u-line-1">{{subitem.name}}</view>
  165. <view class="leve1-jindu">
  166. <view class="zhixing" v-if="!subitem.selected">已执行</view>
  167. <view class="zhixing2" v-else>未执行</view>
  168. </view>
  169. <view class="jiantobox">
  170. <image v-if="!subitem.show" class="arrow rotatearrow" src="/static/images/down.png"
  171. mode="" />
  172. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  173. </view>
  174. </view>
  175. <view class="hsnrtest" v-if="subitem.show">话术内容</view>
  176. <view class="Level3che" @tap="clickaudeopal(che)" v-if="subitem.show"
  177. v-for="(che,inc) in subitem.children" :key='inc'>
  178. <!-- che.selected==0 为本次接待-蓝色 ,viewFlag==1 为2次接待-黄色 未执行-灰色-->
  179. <view class="title1"
  180. :style="che.viewFlag==1?'color:#FF8C13':che.selected!=0?'color: #666':''">
  181. {{inc+1}}.{{che.name}}
  182. </view>
  183. <view class="jiantobox">
  184. <image v-if="che.selected==0&&che.viewFlag != 1" class="arrow"
  185. src="/static/images/rate-checked.png" mode="" />
  186. <image v-else-if="che.selected==0&&che.viewFlag == 1" class="arrow"
  187. src="/static/images/checked-yellow.png" mode="" />
  188. <image v-else class="arrow" src="/static/images/rate-nocheck.png" mode="" />
  189. </view>
  190. </view>
  191. <view v-if="subitem.show" style="width: 100%;height: 30rpx;"></view>
  192. </view>
  193. </view>
  194. </view>
  195. <!-- 需求挖掘执行率 -->
  196. <view class="xuqiu" v-if="activeTotal==3">
  197. <!-- 暂无数据 -->
  198. <view v-if="KeyWordsfractionList.length==0"
  199. style="width: 100%;height: 100%;display: flex;align-items: center;">
  200. <view style="width: 100%;padding-top: 60rpx;">
  201. <view style="width: 100%;text-align: center;">
  202. <image style="width: 220rpx;height: 200rpx;"
  203. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  204. </view>
  205. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  206. </view>
  207. </view>
  208. <!-- 需求挖掘执行率 -->
  209. <view v-if="KeyWordsfractionList.length">
  210. <view class="top-box">
  211. <view style="width:50%;text-align:center">挖掘执行:{{customerInfo.wordFraction||0}}%</view>
  212. <view style="width:50%;text-align:center">挖掘成功:{{percent||0}}%</view>
  213. </view>
  214. <view
  215. style="
  216. width: 100%;
  217. height: 80rpx;
  218. border-bottom: 1rpx solid #e0e0e0;
  219. display: flex;
  220. align-items: center;
  221. background: #fff;
  222. "
  223. >
  224. <view
  225. style="
  226. flex: 1;
  227. font-size: 28rpx;
  228. color: #333333;
  229. font-weight: 600;
  230. text-indent: 50rpx;
  231. "
  232. >指标</view
  233. >
  234. <view
  235. style="
  236. flex: 1;
  237. font-size: 28rpx;
  238. color: #333333;
  239. font-weight: 600;
  240. text-indent: 70rpx;
  241. "
  242. >执行率</view
  243. >
  244. <view
  245. style="
  246. flex: 1;
  247. font-size: 28rpx;
  248. color: #333333;
  249. font-weight: 600;
  250. text-indent: 70rpx;
  251. "
  252. >匹配标签</view
  253. >
  254. <view style="flex: 0 0 30rpx;"></view>
  255. </view>
  256. <!-- 暂无数据 -->
  257. <view
  258. v-if="KeyWordsfractionList.length == 0"
  259. style="width: 100%; height: 100%; display: flex; align-items: center"
  260. >
  261. <view style="width: 100%; padding-top: 60rpx">
  262. <view style="width: 100%; text-align: center">
  263. <image
  264. style="width: 220rpx; height: 200rpx"
  265. src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png"
  266. mode=""
  267. ></image>
  268. </view>
  269. <view
  270. style="
  271. text-align: center;
  272. width: 100%;
  273. margin-top: 20rpx;
  274. color: #999999;
  275. "
  276. >暂无数据</view
  277. >
  278. </view>
  279. </view>
  280. <!-- 挖掘执行话术展示 -->
  281. <view
  282. class="Level-box"
  283. v-else
  284. v-for="(item, index) in KeyWordsfractionList"
  285. :key="index"
  286. >
  287. <view class="Level1che" @click="changeshowlevel1(item, 1)">
  288. <view class="title1" style="flex: 1">{{ item.name }}</view>
  289. <view class="Level1-middle" style="flex: 2; display: flex">
  290. <view class="item" style="flex: 1; text-align: center"
  291. >执行{{ item.fraction || 0 }}%</view
  292. >
  293. <view class="item" style="flex:1;text-align:center;" v-if="item.keywordsList&&item.keywordsList.length">已匹配({{
  294. item.keywordsList&&item.keywordsList.length
  295. }})</view>
  296. <view class="item" v-else style="flex:1;text-align:center;">未匹配</view>
  297. </view>
  298. <view class="jiantobox">
  299. <image
  300. v-if="!item.show"
  301. class="arrow rotatearrow"
  302. src="/static/images/down.png"
  303. mode=""
  304. />
  305. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  306. </view>
  307. </view>
  308. <!-- 话术在一级下 -->
  309. <view v-if="item.children&&item.children.length==0">
  310. <view class="hhhbox" v-if="item.show" style="padding: 30rpx;">
  311. <view class="hsnrtest"
  312. >客户标签:{{ getKeywordsList(item.keywordsList) }}</view
  313. >
  314. <view class="hsnrtest">话术内容</view>
  315. <view class="Level3che" v-for="(che,inc) in item.modelList" :key='inc'>
  316. <view class="title1"
  317. :style="che.selected==2?'color:#FF8C13':che.selected==1?'color: #666':''">
  318. {{inc+1}}.{{che.showFormatExpression || che.keywordsName}}
  319. </view>
  320. <view class="jiantobox">
  321. <!-- 0本次选中 1未选中 2上次选中 -->
  322. <image v-if="che.selected==0" class="arrow"
  323. src="/static/images/rate-checked.png" mode="" />
  324. <image v-else-if="che.selected==2" class="arrow"
  325. src="/static/images/checked-yellow.png" mode="" />
  326. <image v-else class="arrow" src="/static/images/rate-nocheck.png" mode="" />
  327. </view>
  328. </view>
  329. </view>
  330. </view>
  331. <!-- 话术在二级下 -->
  332. <view v-if="item.children&&item.children.length">
  333. <view
  334. class="hhhbox"
  335. v-if="item.show"
  336. v-for="(subitem, i) in item.children"
  337. :key="i"
  338. >
  339. <view class="Level2che" @click="changeshow2(subitem, 1)">
  340. <view class="title1 u-line-1">{{ subitem.name }}</view>
  341. <view class="leve1-jindu">
  342. <view class="zhixing" v-if="subitem.isAskQuestions == 0"
  343. >已执行</view
  344. >
  345. <view class="zhixing2" v-else>未执行</view>
  346. </view>
  347. <view class="leve1-jindu">
  348. <view class="zhixing" v-if="subitem.selected == 0">已匹配</view>
  349. <view class="zhixing2" v-else>未匹配</view>
  350. </view>
  351. <view class="jiantobox">
  352. <image
  353. v-if="!subitem.show"
  354. class="arrow rotatearrow"
  355. src="/static/images/down.png"
  356. mode=""
  357. />
  358. <image
  359. v-else
  360. class="arrow"
  361. src="/static/images/up.png"
  362. mode=""
  363. />
  364. </view>
  365. </view>
  366. <view v-if="subitem.show" style="padding: 30rpx 0">
  367. <view class="hsnrtest"
  368. >客户标签:{{ getKeywordsList(subitem.keywordsList) }}</view
  369. >
  370. <view class="hsnrtest">话术内容</view>
  371. <view
  372. class="Level3che"
  373. v-for="(che, inc) in subitem.modelList"
  374. :key="inc"
  375. >
  376. <view
  377. class="title1"
  378. :style="
  379. che.selected == 2
  380. ? 'color:#FF8C13'
  381. : che.selected == 1
  382. ? 'color: #666'
  383. : ''
  384. "
  385. >{{ inc + 1 }}.{{
  386. che.showFormatExpression || che.keywordsName
  387. }}</view
  388. >
  389. <view class="jiantobox">
  390. <image
  391. v-if="che.selected == 0"
  392. class="arrow"
  393. src="/static/images/rate-checked.png"
  394. mode=""
  395. />
  396. <image
  397. v-else-if="che.selected == 2"
  398. class="arrow"
  399. src="/static/images/checked-yellow.png"
  400. mode=""
  401. />
  402. <image
  403. v-else
  404. class="arrow"
  405. src="/static/images/rate-nocheck.png"
  406. mode=""
  407. />
  408. </view>
  409. </view>
  410. </view>
  411. </view>
  412. </view>
  413. </view>
  414. </view>
  415. </view>
  416. </view>
  417. </view>
  418. <view class="pon-foot" v-if="buttonisshow">
  419. <view class="foot-tab" @click="goRemind">添加提醒</view>
  420. <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
  421. </view>
  422. <!-- closeable -->
  423. <u-popup v-model="tipshow" mode="center" mask-close-able width="560rpx" border-radius="14">
  424. <scroll-view scroll-y="true" style="height: 440rpx;">
  425. <view style="display: flex; flex-wrap: wrap; padding:20rpx;">
  426. <view class="upon-sec-tips" v-for="(item,index) in customerInfo.demand.cusSemanticWordsList"
  427. :key="index">
  428. {{item.name}}
  429. </view>
  430. </view>
  431. </scroll-view>
  432. </u-popup>
  433. <!-- 加载组件 -->
  434. <loading v-model="LOADING"></loading>
  435. </view>
  436. </template>
  437. <script>
  438. import loading from "@/components/loading/index.vue"
  439. export default {
  440. components: {
  441. loading
  442. },
  443. data() {
  444. return {
  445. percent: 0,
  446. tabactive: 0,
  447. activeTotal: 0,
  448. customerId: '',
  449. tipshow: false,
  450. customerInfo: {
  451. name: '',
  452. createTime: '',
  453. agentName: ''
  454. },
  455. Thevisitingrecords: [],
  456. totalRate: [],
  457. ratelist: [],
  458. fllowList: [],
  459. KeyWordsfractionList: [], //需求挖掘话术list
  460. userInfo: {},
  461. buttonisshow: false
  462. }
  463. },
  464. computed: {
  465. isEdit() {
  466. let arr = uni.getStorageSync('weapp_session_Menu_data')
  467. return arr.findIndex(item => {
  468. return item.name == '客户编辑'
  469. }) == -1 ? false : true
  470. }
  471. },
  472. onLoad(options) {
  473. this.LOADING = true
  474. this.customerId = options.id;
  475. },
  476. onShow() {
  477. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  478. if (this.userInfo.dataCode == 6) {
  479. this.buttonisshow = true;
  480. } else {
  481. this.buttonisshow = false
  482. }
  483. this.getCustomerInfo()
  484. this.tabtimetap(0)
  485. },
  486. methods: {
  487. // 计算挖掘执行的完成率
  488. getPercent(){
  489. let countArr = this.KeyWordsfractionList.filter(item=> item.selected==0)
  490. console.log(countArr)
  491. this.percent = (countArr.length / this.KeyWordsfractionList.length)*100
  492. console.log(this.percent.toFixed(0))
  493. this.percent = this.percent.toFixed(0)
  494. },
  495. //挖掘率话术客户标签展示
  496. getKeywordsList(list) {
  497. let keywords = [];
  498. if (list && list.length) {
  499. keywords = list.map((item) => item.name);
  500. } else {
  501. return "--";
  502. }
  503. return keywords.join(",");
  504. },
  505. changeshowlevel1(item, type) {
  506. console.log(item)
  507. item.show = !item.show
  508. },
  509. max100(num) {
  510. if (num > 100) {
  511. return 100;
  512. } else if (!num) {
  513. return 0;
  514. } else {
  515. return num;
  516. }
  517. },
  518. // 客户详情需求挖掘话术
  519. getfindKeyWordsBycusId() {
  520. this.$u
  521. .get("/cusLvStatistics/findKeyWordsBycusId?cusId=" + this.customerId)
  522. .then((res) => {
  523. // console.log(res)
  524. if (res.length) {
  525. res.forEach((item, index) => {
  526. item.show = false;
  527. if (index == 0) {
  528. item.show = true;
  529. }
  530. if (item.children && item.children.length) {
  531. item.children.forEach((obj, i) => {
  532. obj.show = false;
  533. if (i == 0 && index == 0) {
  534. obj.show = true;
  535. }
  536. });
  537. }
  538. });
  539. this.KeyWordsfractionList = res;
  540. this.getPercent()
  541. } else {
  542. this.KeyWordsfractionList = [];
  543. }
  544. });
  545. },
  546. // 获取到访记录
  547. getVisitList() {
  548. this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
  549. this.Thevisitingrecords = res
  550. })
  551. },
  552. // 获取客户信息
  553. getCustomerInfo() {
  554. const that = this;
  555. this.$u.get("/customer/findById", {
  556. id: this.customerId
  557. }).then(res => {
  558. this.LOADING = false
  559. if (res.fraction == null) {
  560. res.fraction = '0';
  561. }
  562. if (res.demand.cusSemanticWordsList != null) {
  563. res.demand.cusSemanticWords = res.demand.cusSemanticWordsList
  564. res.demand.cusSemanticWordsList.forEach(che => {
  565. if (che.isInterval == 0) {
  566. che.name = che.name + che.unit + '-' + che.endName + che.unit;
  567. }
  568. })
  569. // res.demand.cusSemanticWordsList = res.demand.cusSemanticWordsList.slice(0, 3)
  570. }
  571. // console.log(res.demand.cusSemanticWords,'关键字')
  572. this.customerInfo = res;
  573. }).catch(e => {
  574. this.LOADING = false
  575. })
  576. },
  577. tabtimetap(idx) {
  578. this.activeTotal = idx
  579. if (idx == 0) {
  580. this.getVisitList()
  581. } else if (idx == 1) {
  582. this.getFollowList()
  583. } else {
  584. this.getRatelist()
  585. this.getfindKeyWordsBycusId()
  586. }
  587. },
  588. tapThevisiting(item) {
  589. uni.showLoading({
  590. title: '加载中',
  591. mask: true
  592. });
  593. if (item.yon != 0) {
  594. setTimeout(function() {
  595. uni.hideLoading();
  596. }, 2000);
  597. uni.showToast({
  598. icon: 'none',
  599. title: '暂无录音',
  600. duration: 2000
  601. });
  602. return
  603. } else {
  604. const parames = {
  605. pageNum: 1,
  606. pageSize: 100,
  607. query: {
  608. customerId: item.id,
  609. }
  610. }
  611. var item = {
  612. bg: 0,
  613. customerId: item.id,
  614. id: ''
  615. }
  616. uni.setStorageSync("entrance", 1); //写入缓存
  617. uni.setStorageSync("searchobj", item); //写入缓存
  618. this.$u.post("/corpus/findByPage", parames).then(res => {
  619. setTimeout(function() {
  620. uni.hideLoading();
  621. }, 2000);
  622. if (res == null) {
  623. uni.showToast({
  624. icon: "none",
  625. title: "暂无音频"
  626. })
  627. return
  628. }
  629. if (res[0].merge == 0) {
  630. let newobj = res[0];
  631. uni.navigateTo({
  632. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=2&wordFraction=${this.customerInfo.wordFraction}`
  633. })
  634. } else {
  635. let newobj = res[0];
  636. uni.navigateTo({
  637. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=1&wordFraction=${this.customerInfo.wordFraction}`
  638. })
  639. }
  640. })
  641. }
  642. },
  643. // 获取跟进记录
  644. getFollowList() {
  645. this.fllowList = [];
  646. this.$u.post("/customer/getCusStage", {
  647. customerId: this.customerId
  648. }).then(res => {
  649. res.forEach(item => {
  650. item.agentName = this.customerInfo.agentName
  651. })
  652. this.fllowList = res;
  653. })
  654. },
  655. // 新增跟进
  656. followRecordAdd() {
  657. uni.navigateTo({
  658. url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}&level=${this.customerInfo.level}&stageName=${this.customerInfo.stageName}`
  659. })
  660. },
  661. // 去编辑
  662. goedit() {
  663. // console.log('去编辑')
  664. if (!this.isEdit) return
  665. uni.navigateTo({
  666. url: `/pages/center/consumer/edit?id=${this.customerId}&projectId=${this.customerInfo.projectId}`
  667. })
  668. },
  669. // 去添加提醒
  670. goRemind() {
  671. uni.navigateTo({
  672. url: `/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}`
  673. })
  674. },
  675. //评分点击
  676. clickaudeopal(item) {
  677. if (item.selected == 0 && item.viewFlag != 1) {
  678. uni.navigateTo({
  679. url: '/pages/mine/ScoringPlaylist?customerId=' + this.customerId + "&id=" + item
  680. .marketingId + '&type=0'
  681. })
  682. }
  683. },
  684. tipupon() {
  685. if (!this.customerInfo.demand.cusSemanticWordsList) return
  686. this.tipshow = true
  687. },
  688. changeshow(item, type) {
  689. item.show = !item.show
  690. },
  691. changeshow2(item, type) {
  692. item.show = !item.show
  693. },
  694. // 获取评分
  695. getRatelist() {
  696. this.$u.get("/customer/findzkMByCusId", {
  697. cusId: this.customerId
  698. }).then(res => {
  699. if (res.length) {
  700. let level1 = []
  701. res.forEach(item => {
  702. if (item.pid == 0) {
  703. level1.push({
  704. id: item.marketingId,
  705. rate: item.fraction,
  706. name: item.name,
  707. sort: item.sort,
  708. viewFlag: item.viewFlag,
  709. show: false,
  710. ratepercent: 0,
  711. children: []
  712. })
  713. }
  714. })
  715. // this.totalRate = level2rate;
  716. res.forEach(subitem => {
  717. let subitempid = subitem.pid
  718. level1.forEach(item => {
  719. if (subitempid == item.id) {
  720. if (subitem.selected == 0) {
  721. item.ratepercent += subitem.fraction
  722. }
  723. item.children.push({
  724. id: subitem.id,
  725. rate: subitem.fraction,
  726. selected: subitem.selected,
  727. name: subitem.name,
  728. viewFlag: subitem.viewFlag,
  729. show: false,
  730. marketingId: subitem.marketingId,
  731. children: []
  732. })
  733. }
  734. })
  735. })
  736. res.forEach(subitem => {
  737. let subitempid = subitem.pid
  738. level1.forEach(chen => {
  739. chen.children.forEach(zxc => {
  740. if (subitempid == zxc.marketingId) {
  741. zxc.children.push({
  742. id: subitem.id,
  743. rate: subitem.fraction,
  744. selected: subitem.selected,
  745. viewFlag: subitem.viewFlag,
  746. name: subitem.name,
  747. marketingId: subitem.marketingId,
  748. })
  749. }
  750. })
  751. })
  752. })
  753. level1[0].show = true;
  754. level1[0].children[0].show = true;
  755. this.ratelist = level1
  756. }
  757. })
  758. },
  759. }
  760. }
  761. </script>
  762. <style lang="scss" scoped>
  763. .rotatearrow {
  764. transform: rotate(270deg);
  765. }
  766. .top-box{
  767. height: 80rpx;
  768. line-height: 80rpx;
  769. display: flex;
  770. color: #2671E2;
  771. border-bottom: 1rpx solid #ccc;
  772. }
  773. // 评分
  774. .rate-box {
  775. padding: 10rpx 20rpx;
  776. background-color: #FFFFFF;
  777. .date {
  778. width: 300rpx;
  779. height: 33rpx;
  780. font-size: 24rpx;
  781. font-weight: 400;
  782. color: #333333;
  783. line-height: 33rpx;
  784. letter-spacing: 1rpx;
  785. margin-bottom: 8rpx;
  786. }
  787. .title {
  788. width: 100%;
  789. height: 42rpx;
  790. font-size: 30rpx;
  791. font-weight: 500;
  792. color: #333333;
  793. line-height: 42rpx;
  794. letter-spacing: 2rpx;
  795. margin-bottom: 20rpx;
  796. }
  797. .level1 {
  798. display: flex;
  799. align-items: center;
  800. .level-name {
  801. width: 104rpx;
  802. height: 33rpx;
  803. font-size: 24rpx;
  804. font-weight: 500;
  805. color: #333333;
  806. line-height: 33rpx;
  807. letter-spacing: 1rpx;
  808. margin-right: 10rpx;
  809. }
  810. .level-progress {
  811. flex: 1;
  812. border-radius: 11rpx;
  813. height: 21rpx;
  814. background-color: #BEE4FF;
  815. position: relative;
  816. .color {
  817. width: 0;
  818. position: absolute;
  819. top: 0;
  820. left: 0;
  821. height: 21rpx;
  822. border-radius: 11rpx 0 0 11rpx;
  823. background-color: #008EF2;
  824. }
  825. }
  826. .level-rate {
  827. width: 65rpx;
  828. height: 33rpx;
  829. font-size: 24rpx;
  830. font-weight: 500;
  831. color: #333333;
  832. line-height: 33rpx;
  833. letter-spacing: 1rpx;
  834. margin: 0 20rpx 0 15rpx;
  835. }
  836. .arrow {
  837. width: 37rpx;
  838. height: 21rpx;
  839. padding: 5rpx 20rpx;
  840. }
  841. .rotatearrow {
  842. transform: rotate(270deg);
  843. }
  844. }
  845. .level1-subbox {
  846. display: flex;
  847. margin-top: 20rpx;
  848. flex-wrap: wrap;
  849. .sub-name {
  850. width: 50%;
  851. display: flex;
  852. margin-bottom: 18rpx;
  853. .subitem-name {
  854. width: 104rpx;
  855. height: 33rpx;
  856. font-size: 24rpx;
  857. font-weight: 400;
  858. color: #999999;
  859. line-height: 33rpx;
  860. letter-spacing: 1rpx;
  861. margin-right: 12rpx;
  862. }
  863. .checkimg {
  864. width: 27rpx;
  865. height: 27rpx;
  866. }
  867. }
  868. }
  869. }
  870. .Level-box {
  871. padding-bottom: 2rpx;
  872. .hhhbox {
  873. width: 100%;
  874. padding-left: 30rpx;
  875. padding-right: 30rpx;
  876. border-bottom: 1rpx solid #E0E0E0;
  877. background: #FFFFFF;
  878. .hsnrtest {
  879. font-size: 24rpx;
  880. font-weight: 400;
  881. color: #666666;
  882. line-height: 30rpx;
  883. margin-bottom: 20rpx;
  884. }
  885. .Level3che {
  886. width: 100%;
  887. height: 28rpx;
  888. display: flex;
  889. line-height: 28rpx;
  890. align-items: center;
  891. margin-top: 30rpx;
  892. .title1 {
  893. flex: 1;
  894. font-size: 28rpx;
  895. color: #2671E2;
  896. font-weight: 400;
  897. }
  898. .jiantobox {
  899. width: 30rpx;
  900. height: 30rpx;
  901. display: flex;
  902. align-items: center;
  903. .arrow {
  904. width: 28rpx;
  905. height: 28rpx;
  906. }
  907. }
  908. }
  909. }
  910. .Level2che {
  911. width: 100%;
  912. height: 88rpx;
  913. display: flex;
  914. line-height: 88rpx;
  915. align-items: center;
  916. .title1 {
  917. flex: 3;
  918. font-size: 28rpx;
  919. color: #333333;
  920. font-weight: 400;
  921. }
  922. .leve1-jindu {
  923. flex: 3;
  924. display: flex;
  925. justify-content: center;
  926. align-items: center;
  927. .zhixing {
  928. width: 108rpx;
  929. height: 44rpx;
  930. background: #2671E2;
  931. border-radius: 4rpx;
  932. font-size: 28rpx;
  933. text-align: center;
  934. line-height: 44rpx;
  935. color: #FFFFFF;
  936. }
  937. .zhixing2 {
  938. width: 108rpx;
  939. height: 44rpx;
  940. background: #F8F8F8;
  941. border-radius: 4rpx;
  942. font-size: 28rpx;
  943. text-align: center;
  944. line-height: 44rpx;
  945. color: #999999;
  946. }
  947. }
  948. .jiantobox {
  949. width: 30rpx;
  950. height: 30rpx;
  951. display: flex;
  952. align-items: center;
  953. .arrow {
  954. width: 30rpx;
  955. height: 18rpx;
  956. }
  957. }
  958. }
  959. .Level1che {
  960. width: 100%;
  961. height: 94rpx;
  962. background: #F5F5F5;
  963. display: flex;
  964. line-height: 94rpx;
  965. align-items: center;
  966. padding-left: 30rpx;
  967. padding-right: 30rpx;
  968. .title1 {
  969. flex: 2;
  970. font-size: 30rpx;
  971. color: #333333;
  972. font-weight: 400;
  973. }
  974. .leve1-jindu {
  975. flex: 3;
  976. .jindutiao {
  977. width: 96%;
  978. height: 28rpx;
  979. background: #D5EEE2;
  980. line-height: 28rpx;
  981. border-radius: 14rpx;
  982. position: relative;
  983. .huanxing {
  984. height: 100%;
  985. background: #4FC78F;
  986. border-radius: 14rpx;
  987. }
  988. .text {
  989. position: absolute;
  990. top: 0rpx;
  991. right: 0rpx;
  992. font-size: 28rpx;
  993. font-weight: 400;
  994. color: #333333;
  995. }
  996. }
  997. }
  998. .jiantobox {
  999. width: 30rpx;
  1000. height: 30rpx;
  1001. display: flex;
  1002. align-items: center;
  1003. .arrow {
  1004. width: 30rpx;
  1005. height: 18rpx;
  1006. }
  1007. }
  1008. }
  1009. }
  1010. .cccccc {
  1011. text-align: center;
  1012. height: 140rpx;
  1013. line-height: 140rpx;
  1014. font-size: 30rpx;
  1015. }
  1016. .ratecenter {
  1017. background-color: #FFFFFF;
  1018. padding-bottom: 30rpx;
  1019. width: 100%;
  1020. .my-tab {
  1021. padding: 20rpx 0;
  1022. display: flex;
  1023. justify-content: space-around;
  1024. align-items: center;
  1025. border-bottom: 1px solid #E0E0E0;
  1026. .tab-item {
  1027. padding: 0 30rpx;
  1028. height: 56rpx;
  1029. font-size: 28rpx;
  1030. font-family: PingFangSC-Regular, PingFang SC;
  1031. font-weight: 400;
  1032. color: #666666;
  1033. line-height: 56rpx;
  1034. text-shadow: 0px 1px 0px #E0E0E0;
  1035. }
  1036. .tabactive {
  1037. height: 56rpx;
  1038. background: rgba(38, 113, 226, 0.1);
  1039. box-shadow: 0px 1px 0px 0px #E0E0E0;
  1040. border-radius: 28rpx;
  1041. font-weight: 600;
  1042. color: #2671E2;
  1043. }
  1044. }
  1045. .ratetetle {
  1046. padding: 30rpx;
  1047. font-size: 30rpx;
  1048. font-weight: 400;
  1049. color: #333333;
  1050. padding-bottom: 6rpx;
  1051. }
  1052. .rateyuanbox {
  1053. width: 100%;
  1054. height: 210rpx;
  1055. padding-bottom: 30rpx;
  1056. border-bottom: 1rpx solid #E0E0E0;
  1057. display: flex;
  1058. padding-left: 80rpx;
  1059. padding-right: 80rpx;
  1060. .rateyuanboxzuo {
  1061. width: 30%;
  1062. height: 100%;
  1063. }
  1064. .rateyuanboxyou {
  1065. width: 40%;
  1066. height: 100%;
  1067. }
  1068. .boxzuoview {
  1069. width: 100%;
  1070. height: 140rpx;
  1071. }
  1072. }
  1073. }
  1074. .box {
  1075. width: 100%;
  1076. height: 100%;
  1077. background: #F8F8F8;
  1078. }
  1079. .tab {
  1080. position: sticky;
  1081. top: 0;
  1082. height: 88rpx;
  1083. z-index: 999;
  1084. background: #FFFFFF;
  1085. display: flex;
  1086. align-items: center;
  1087. .tabbox {
  1088. flex: 1;
  1089. height: 100%;
  1090. text-align: center;
  1091. line-height: 92rpx;
  1092. color: #666666;
  1093. font-size: 28rpx;
  1094. display: flex;
  1095. justify-content: center;
  1096. .activecllasscet {
  1097. border-bottom: 2px solid #2671E2;
  1098. color: #2671E2;
  1099. font-weight: 600;
  1100. }
  1101. }
  1102. }
  1103. .content {
  1104. // height: 1000rpx;/
  1105. overflow: hidden;
  1106. border-top: 1px solid #E0E0E0;
  1107. .content-tips {
  1108. background: #fff;
  1109. // box-sizing: border-box;
  1110. margin-bottom: 20rpx;
  1111. overflow: hidden;
  1112. .content-first {
  1113. padding: 19rpx 30rpx;
  1114. display: flex;
  1115. justify-content: space-between;
  1116. box-sizing: border-box;
  1117. font-weight: 400;
  1118. color: #292929;
  1119. height: 90rpx;
  1120. font-size: 30rpx;
  1121. line-height: 30rpx;
  1122. .left {
  1123. display: flex;
  1124. .img {
  1125. width: 52rpx;
  1126. height: 52rpx;
  1127. border-radius: 50%;
  1128. text-align: center;
  1129. line-height: 50rpx;
  1130. margin-right: 20rpx;
  1131. color: #fff;
  1132. font-size: 30rpx;
  1133. background: #9f61c8;
  1134. }
  1135. .test {
  1136. margin-top: 11rpx;
  1137. font-weight: 500;
  1138. color: #333333;
  1139. }
  1140. .edit {
  1141. height: 30rpx;
  1142. width: 30rpx;
  1143. margin-left: 30rpx;
  1144. margin-top: 11rpx;
  1145. image {
  1146. width: 100%;
  1147. height: 100%;
  1148. }
  1149. }
  1150. }
  1151. .right {
  1152. display: flex;
  1153. .test {
  1154. margin-top: 11rpx;
  1155. .blue {
  1156. font-size: 32rpx;
  1157. font-family: PingFangSC-Medium, PingFang SC;
  1158. font-weight: 500;
  1159. color: #2671e2;
  1160. }
  1161. }
  1162. }
  1163. }
  1164. .content-sec {
  1165. border-top: 1px solid #E0E0E0;
  1166. padding: 0 30rpx;
  1167. position: relative;
  1168. .content-sec-lab {
  1169. margin-top: 28rpx;
  1170. display: flex;
  1171. justify-content: space-between;
  1172. font-size: 30rpx;
  1173. font-weight: 400;
  1174. color: #666666;
  1175. line-height: 46rpx;
  1176. .content-sec-lab1 {
  1177. color: #333333;
  1178. .look {
  1179. font-size: 32rpx;
  1180. font-family: PingFangSC-Semibold, PingFang SC;
  1181. font-weight: 600;
  1182. color: #2671E2;
  1183. }
  1184. .look1 {
  1185. height: 42rpx;
  1186. font-size: 30rpx;
  1187. font-family: PingFangSC-Regular, PingFang SC;
  1188. font-weight: 400;
  1189. color: #2671E2;
  1190. line-height: 42rpx;
  1191. margin-left: 60rpx;
  1192. }
  1193. }
  1194. .content-sec-tips {
  1195. max-width: 120rpx;
  1196. height: 46rpx;
  1197. background: #F2F2F2;
  1198. border-radius: 6rpx;
  1199. text-align: center;
  1200. line-height: 26rpx;
  1201. overflow: hidden;
  1202. text-overflow: ellipsis;
  1203. white-space: nowrap;
  1204. font-size: 26rpx;
  1205. font-weight: 400;
  1206. color: #333333;
  1207. margin-right: 20rpx;
  1208. box-sizing: border-box;
  1209. padding: 10rpx 24rpx;
  1210. }
  1211. }
  1212. .content-sec-num {
  1213. position: absolute;
  1214. width: 200rpx;
  1215. height: 90rpx;
  1216. background: #F4F8FD;
  1217. border-radius: 12rpx;
  1218. font-weight: 400;
  1219. color: #2671E2;
  1220. line-height: 45rpx;
  1221. bottom: 100rpx;
  1222. right: 30rpx;
  1223. text-align: center;
  1224. }
  1225. }
  1226. .content-last {
  1227. padding: 30rpx;
  1228. .content-last-con {
  1229. width: 690rpx;
  1230. min-height: 108rpx;
  1231. background: #F8F8F8;
  1232. border-radius: 8rpx;
  1233. padding: 14rpx 20rpx;
  1234. font-size: 28rpx;
  1235. font-weight: 400;
  1236. color: #333333;
  1237. line-height: 40rpx;
  1238. }
  1239. }
  1240. }
  1241. }
  1242. .tabchange {
  1243. .tabactive1 {
  1244. padding-bottom: 100rpx;
  1245. .content-tips {
  1246. background: #fff;
  1247. padding: 0 30rpx;
  1248. box-sizing: border-box;
  1249. overflow: hidden;
  1250. margin-bottom: 20rpx;
  1251. .content-first {
  1252. margin-top: 19rpx;
  1253. display: flex;
  1254. justify-content: space-between;
  1255. .left {
  1256. display: flex;
  1257. .img {
  1258. width: 52rpx;
  1259. height: 52rpx;
  1260. background: #FFFFFF;
  1261. border: 1px solid #C9C9C9;
  1262. border-radius: 50%;
  1263. text-align: center;
  1264. line-height: 52rpx;
  1265. margin-right: 20rpx;
  1266. }
  1267. .name {
  1268. font-weight: 600;
  1269. color: #333333;
  1270. // margin-left: 20rpx;
  1271. margin-top: 11rpx;
  1272. }
  1273. .status {
  1274. width: 110rpx;
  1275. height: 42rpx;
  1276. background: #FFF9F5;
  1277. border-radius: 4rpx;
  1278. font-size: 26rpx;
  1279. font-weight: 400;
  1280. color: #EC8D49;
  1281. line-height: 42rpx;
  1282. text-align: center;
  1283. margin-left: 19rpx;
  1284. margin-top: 11rpx;
  1285. }
  1286. }
  1287. .right {
  1288. display: flex;
  1289. margin-top: 11rpx;
  1290. .point {
  1291. width: 12rpx;
  1292. height: 12rpx;
  1293. background: #2B6EFF;
  1294. border-radius: 50%;
  1295. margin-right: 9rpx;
  1296. margin-top: 16rpx;
  1297. }
  1298. }
  1299. }
  1300. .content-sec {
  1301. display: flex;
  1302. justify-content: space-between;
  1303. margin-top: 19rpx;
  1304. .left {
  1305. display: flex;
  1306. .cus {
  1307. font-size: 30rpx;
  1308. font-weight: 400;
  1309. color: #666666;
  1310. line-height: 30rpx;
  1311. }
  1312. .arriveNum {
  1313. font-size: 30rpx;
  1314. font-weight: 400;
  1315. line-height: 30rpx;
  1316. margin-left: 10rpx;
  1317. }
  1318. }
  1319. .right {
  1320. width: 192rpx;
  1321. height: 46rpx;
  1322. background: #F4F8FD;
  1323. border-radius: 6rpx;
  1324. text-align: center;
  1325. line-height: 46rpx;
  1326. font-weight: 400;
  1327. color: #2671E2;
  1328. }
  1329. }
  1330. .content-last {
  1331. margin: 30rpx 0;
  1332. font-size: 30rpx;
  1333. font-weight: 400;
  1334. color: #666666;
  1335. line-height: 30rpx;
  1336. }
  1337. }
  1338. }
  1339. .tabactive2 {
  1340. .tab2-tips {
  1341. background: #fff;
  1342. // height: 270rpx;
  1343. overflow: auto;
  1344. margin-bottom: 20rpx;
  1345. .tab2-first {
  1346. // height: 150rpx;
  1347. border-bottom: 1px solid #E0E0E0;
  1348. padding: 0 30rpx;
  1349. margin-top: 19rpx;
  1350. box-sizing: border-box;
  1351. .tab2-first-1 {
  1352. display: flex;
  1353. justify-content: space-between;
  1354. // height: 75rpx;
  1355. .tab2-first-left {
  1356. display: flex;
  1357. .img {
  1358. width: 52rpx;
  1359. height: 52rpx;
  1360. background: #FFFFFF;
  1361. border: 1px solid #C9C9C9;
  1362. border-radius: 50%;
  1363. text-align: center;
  1364. line-height: 52rpx;
  1365. }
  1366. .name {
  1367. font-weight: 600;
  1368. color: #333333;
  1369. margin-left: 20rpx;
  1370. margin-top: 11rpx;
  1371. }
  1372. }
  1373. .tab2-first-right {
  1374. font-size: 30rpx;
  1375. font-weight: 400;
  1376. color: #666666;
  1377. margin-top: 11rpx;
  1378. }
  1379. }
  1380. .tab2-first-foot {
  1381. margin-top: 19rpx;
  1382. margin-bottom: 30rpx;
  1383. font-size: 30rpx;
  1384. font-weight: 400;
  1385. color: #666666;
  1386. line-height: 30rpx;
  1387. }
  1388. }
  1389. .tab2-sec {
  1390. height: 120rpx;
  1391. padding: 30rpx;
  1392. float: right;
  1393. .tab-sec-edit {
  1394. width: 156rpx;
  1395. height: 60rpx;
  1396. background: #FFFFFF;
  1397. border-radius: 4px;
  1398. border: 1px solid #2671E2;
  1399. text-align: center;
  1400. line-height: 60rpx;
  1401. font-weight: 400;
  1402. color: #2671E2;
  1403. }
  1404. }
  1405. }
  1406. }
  1407. }
  1408. .pon-foot {
  1409. position: sticky;
  1410. bottom: 0;
  1411. width: 750rpx;
  1412. height: 100rpx;
  1413. background: #FFFFFF;
  1414. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  1415. display: flex;
  1416. justify-content: space-around;
  1417. align-items: center;
  1418. // padding-top: 24rpx;
  1419. box-sizing: border-box;
  1420. // padding: ;
  1421. .foot-tab {
  1422. text-align: center;
  1423. width: 270rpx;
  1424. height: 70rpx;
  1425. line-height: 70rpx;
  1426. background: #2671E2;
  1427. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  1428. border-radius: 6rpx;
  1429. font-size: 30rpx;
  1430. font-weight: 400;
  1431. color: #FFFFFF;
  1432. }
  1433. }
  1434. .upon-sec-tips {
  1435. min-width: 96rpx;
  1436. height: 46rpx;
  1437. background: #F2F2F2;
  1438. border-radius: 6rpx;
  1439. text-align: center;
  1440. line-height: 46rpx;
  1441. // overflow: hidden;
  1442. // text-overflow: ellipsis;
  1443. // white-space: nowrap;
  1444. font-size: 26rpx;
  1445. font-weight: 400;
  1446. color: #333333;
  1447. margin: 0 20rpx 20rpx 0;
  1448. padding: 0 10rpx;
  1449. box-sizing: border-box;
  1450. }
  1451. .conmsg-msg-lab-img {
  1452. width: 14rpx;
  1453. height: 30rpx;
  1454. margin-top: 6rpx;
  1455. margin-left: auto;
  1456. image {
  1457. width: 100%;
  1458. height: 100%;
  1459. }
  1460. }
  1461. </style>