Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 

913 rader
23 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">
  14. <image class="screen-sel-img" src="../../../static/images/edit.png" mode=""></image>
  15. </view>
  16. </view>
  17. <!-- <view class="right">
  18. <view class="point"></view>
  19. <view class="test">定金</view>
  20. </view> -->
  21. </view>
  22. <view class="content-sec">
  23. <view class="content-sec-lab">
  24. 手机号码:<view class="content-sec-lab1">{{customerInfo.phone || '--'}}</view>
  25. </view>
  26. <view class="content-sec-lab">
  27. 客户标签:
  28. <text v-if="item.demand.cusSemanticWordsList.length==0">暂无</text>
  29. <view v-else class="content-sec-tips" v-for="(che,ind) in customerInfo.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
  30. </view>
  31. <view class="content-sec-lab">
  32. 顾问姓名:<view class="content-sec-lab1">{{customerInfo.agentName}}</view>
  33. </view>
  34. <view class="content-sec-lab">
  35. 添加时间:<view class="content-sec-lab1">{{customerInfo.createTime}}</view>
  36. </view>
  37. <view class="content-sec-num">
  38. <view class="">{{customerInfo.visitRecord || '--'}}次到访</view>
  39. <view class="">{{customerInfo.fraction || '0'}}% | {{customerInfo.mm || '0'}}<text style="font-size: 24rpx;">min</text></view>
  40. </view>
  41. </view>
  42. <view class="content-last">
  43. <view class="content-last-con">
  44. 备注:{{customerInfo.remarks ? customerInfo.remarks : "暂无"}}
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. <view class="tabchange">
  50. <view class="tab">
  51. <view class="tabbox">
  52. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
  53. </view>
  54. <view class="tabbox">
  55. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
  56. </view>
  57. <view class="tabbox">
  58. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
  59. </view>
  60. </view>
  61. <!-- 接待记录 -->
  62. <view class="tabactive1" v-if="activeTotal==0" style="min-height: 600rpx;">
  63. <view v-if="Thevisitingrecords.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  64. <view style="width: 100%;padding-top: 60rpx;">
  65. <view style="width: 100%;text-align: center;">
  66. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  67. </view>
  68. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  69. </view>
  70. </view>
  71. <view v-if="Thevisitingrecords.length!=0" class="content-tips" v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
  72. <view class="content-first">
  73. <view class="left">
  74. <view v-if="item.level.length==0"></view>
  75. <view class="img" v-else-if="item.level==1">A</view>
  76. <view class="img" v-else-if="item.level==2">B</view>
  77. <view class="img" v-else-if="item.level==3">C</view>
  78. <view class="img" v-else-if="item.level==4">D</view>
  79. <view class="name">{{item.agentName || '--'}}</view>
  80. <view class="status" v-if="item.replaceReception==1">代接待</view>
  81. </view>
  82. <!-- <view class="right">
  83. <view class="point"></view>
  84. <view class="">优秀案例</view>
  85. </view> -->
  86. </view>
  87. <view class="content-sec">
  88. <view class="left">
  89. <view class="cus" style="line-height: 46rpx;">客户:{{item.name || ''}} |</view>
  90. <view style="line-height: 46rpx;" class="arriveNum">{{item.visitRecord || '--'}}次到访</view>
  91. </view>
  92. <view class="right">{{item.fraction || '0'}}%</view>
  93. </view>
  94. <view class="content-last">{{item.createTime}} | {{item.mm || '--'}}min</view>
  95. </view>
  96. </view>
  97. <!-- 跟进记录 -->
  98. <view class="tabactive2" v-if="activeTotal==1" style="min-height: 600rpx;">
  99. <view v-if="fllowList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  100. <view style="width: 100%;padding-top: 60rpx;">
  101. <view style="width: 100%;text-align: center;">
  102. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  103. </view>
  104. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  105. </view>
  106. </view>
  107. <view v-if="fllowList.length!=0" class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
  108. <view class="tab2-first">
  109. <view class="tab2-first-1">
  110. <view class="tab2-first-left">
  111. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  112. <view class="name">{{item.agentName || '||'}}</view>
  113. </view>
  114. <view class="tab2-first-right">{{item.createTime}}</view>
  115. </view>
  116. <view class="tab2-first-foot">跟进内容:{{item.remarks || '暂无'}}</view>
  117. </view>
  118. <!-- <view class="tab2-sec">
  119. <view class="tab-sec-edit">编辑记录</view>
  120. </view> -->
  121. </view>
  122. </view>
  123. <!-- 评分 -->
  124. <view class="ratecenter" v-if="activeTotal==2">
  125. <view class="ratetetle">执行总览</view>
  126. <view class="rateyuanbox">
  127. <view class="rateyuanboxzuo">
  128. <view class="boxzuoview cccccc">{{customerInfo.visitRecord || '--'}}次</view>
  129. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待次数</view>
  130. </view>
  131. <view class="rateyuanboxyou">
  132. <view class="boxzuoview" style="width: 100%;display: flex;justify-content: center;">
  133. <u-circle-progress active-color="#4FC78F" width='139' :percent="customerInfo.fraction">
  134. <view style="text-align: center;color: #4FC78F;">{{customerInfo.fraction}}%</view>
  135. </u-circle-progress>
  136. </view>
  137. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">销讲执行率</view>
  138. </view>
  139. <view class="rateyuanboxzuo">
  140. <view class="boxzuoview cccccc">{{customerInfo.mm}}min</view>
  141. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待时长</view>
  142. </view>
  143. </view>
  144. <view style="width: 100%;height: 80rpx;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
  145. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 20rpx;">指标</view>
  146. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 170rpx;">执行率</view>
  147. </view>
  148. <view v-if="ratelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  149. <view style="width: 100%;padding-top: 60rpx;">
  150. <view style="width: 100%;text-align: center;">
  151. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  152. </view>
  153. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  154. </view>
  155. </view>
  156. <view v-if="ratelist.length!=0" class="rate-box" style="margin-top: 10rpx;">
  157. <!-- <view class="title">总执行率 {{totalRate}}%</view> -->
  158. <view v-for="(item,index) in ratelist" :key="index" class="u-m-b-14">
  159. <view class="level1">
  160. <view class="level-name u-line-1">
  161. {{item.name}}
  162. </view>
  163. <view class="level-progress">
  164. <view class="color" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
  165. </view>
  166. <view class="level-rate">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</view>
  167. <image v-if="!item.show" class="arrow rotatearrow" @click="changeshow(item,1)" src="/static/images/down.png"
  168. mode="" />
  169. <image v-else class="arrow" @click="changeshow(item,0)" src="/static/images/up.png" mode="" />
  170. </view>
  171. <view class="level1-subbox" v-if="item.show">
  172. <view class="sub-name" v-for="(subitem,i) in item.children" :key="i">
  173. <view class="subitem-name u-line-1" @tap="clickaudeopal(subitem)">{{subitem.name}}</view>
  174. <image class="checkimg" v-if="!subitem.selected" src="/static/images/rate-checked.png" mode="" />
  175. <image class="checkimg" v-else src="/static/images/rate-nocheck.png" mode="" />
  176. </view>
  177. </view>
  178. </view>
  179. </view>
  180. </view>
  181. </view>
  182. <view class="pon-foot" v-if="buttonisshow">
  183. <view class="foot-tab" @click="goRemind">添加提醒</view>
  184. <!-- <view class="foot-tab">拨打电话</view> -->
  185. <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
  186. </view>
  187. </view>
  188. </template>
  189. <script>
  190. export default{
  191. data(){
  192. return{
  193. activeTotal: 0,
  194. customerId:'',
  195. customerInfo:{
  196. name:'',
  197. createTime:'',
  198. agentName:''
  199. },
  200. Thevisitingrecords:[],
  201. totalRate:[],
  202. ratelist:[],
  203. fllowList:[],
  204. userInfo:{},
  205. buttonisshow:false
  206. }
  207. },
  208. onLoad(options) {
  209. this.customerId = options.id;
  210. },
  211. onShow() {
  212. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  213. if(this.userInfo.dataCode == 6){
  214. this.buttonisshow=true;
  215. }else{
  216. this.buttonisshow=false
  217. }
  218. this.getCustomerInfo()
  219. this.tabtimetap(0)
  220. },
  221. methods:{
  222. // 获取到访记录
  223. getVisitList() {
  224. this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
  225. this.Thevisitingrecords = res
  226. })
  227. },
  228. // 获取客户信息
  229. getCustomerInfo() {
  230. const that = this;
  231. this.$u.get("/customer/findById", {
  232. id: this.customerId
  233. }).then(res => {
  234. if(res.fraction==null){
  235. res.fraction='0';
  236. }
  237. this.customerInfo = res;
  238. })
  239. },
  240. tabtimetap(idx){
  241. this.activeTotal=idx
  242. if(idx==0){
  243. this.getVisitList()
  244. }else if(idx==1){
  245. this.getFollowList()
  246. }else{
  247. this.getRatelist()
  248. }
  249. },
  250. tapThevisiting(item) {
  251. if(item.yon!=0){
  252. uni.showToast({
  253. icon:'none',
  254. title: '暂无录音',
  255. duration: 2000
  256. });
  257. return
  258. }else{
  259. const parames = {
  260. pageNum: 1,
  261. pageSize: 100,
  262. query: {
  263. customerId: item.id,
  264. }
  265. }
  266. var item={
  267. bg:0,
  268. customerId:item.id,
  269. id:''
  270. }
  271. this.$u.post("/corpus/findByPage", parames).then(res => {
  272. if(res==null){
  273. uni.showToast({
  274. icon: "none",
  275. title: "暂无音频"
  276. })
  277. return
  278. }
  279. if(res[0].merge==0){
  280. let newobj = res[0];
  281. uni.navigateTo({
  282. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"2"}`
  283. })
  284. }else{
  285. let newobj = res[0];
  286. uni.navigateTo({
  287. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&itemobj=${JSON.stringify(item)}&stateisshow=${"1"}`
  288. })
  289. }
  290. })
  291. }
  292. },
  293. // 获取跟进记录
  294. getFollowList() {
  295. this.fllowList=[];
  296. this.$u.post("/customer/getCusStage", {
  297. customerId: this.customerId
  298. }).then(res => {
  299. res.forEach(item=>{
  300. item.agentName=this.customerInfo.agentName
  301. })
  302. this.fllowList = res;
  303. })
  304. },
  305. // 新增跟进
  306. followRecordAdd() {
  307. uni.navigateTo({
  308. url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}`
  309. })
  310. },
  311. // 去编辑
  312. goedit(){
  313. // console.log('去编辑')
  314. uni.navigateTo({
  315. url:`/pages/center/consumer/edit?id=${this.customerId}`
  316. })
  317. },
  318. // 去添加提醒
  319. goRemind(){
  320. uni.navigateTo({
  321. url:`/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}`
  322. })
  323. },
  324. //评分点击
  325. clickaudeopal(item){
  326. if(item.selected==0){
  327. uni.navigateTo({
  328. url: '/pages/mine/ScoringPlaylist?customerId='+this.customerId +"&id="+item.marketingId
  329. })
  330. }
  331. },
  332. changeshow(item, type) {
  333. if (type == 1) {
  334. item.show = true
  335. } else {
  336. item.show = false
  337. }
  338. },
  339. // 获取评分
  340. getRatelist() {
  341. this.$u.get("/customer/findzkMByCusId", {
  342. cusId: this.customerId
  343. }).then(res => {
  344. if (res.length) {
  345. let level1 = []
  346. let level2rate = 0
  347. res.forEach(item => {
  348. if (item.pid == 0) {
  349. level1.push({
  350. id: item.marketingId,
  351. rate: item.fraction,
  352. name: item.name,
  353. sort: item.sort,
  354. show: false,
  355. ratepercent: 0,
  356. children: []
  357. })
  358. } else {
  359. if (item.selected == 0) {
  360. level2rate += item.fraction
  361. }
  362. }
  363. })
  364. this.totalRate = level2rate
  365. res.forEach(subitem => {
  366. let subitempid = subitem.pid
  367. level1.forEach(item => {
  368. if (subitempid == item.id) {
  369. if (subitem.selected == 0) {
  370. item.ratepercent += subitem.fraction
  371. }
  372. item.children.push({
  373. id: subitem.id,
  374. rate: subitem.fraction,
  375. selected: subitem.selected,
  376. name: subitem.name,
  377. marketingId:subitem.marketingId
  378. })
  379. }
  380. })
  381. })
  382. level1[0].show = true;
  383. this.ratelist = level1
  384. }
  385. })
  386. },
  387. }
  388. }
  389. </script>
  390. <style lang="scss" scoped>
  391. .cccccc{
  392. text-align: center;
  393. height: 140rpx;
  394. line-height: 140rpx;
  395. font-size: 30rpx;
  396. }
  397. .ratecenter{
  398. background-color: #FFFFFF;
  399. padding-bottom: 30rpx;
  400. width: 100%;
  401. .ratetetle{
  402. padding: 30rpx;
  403. font-size: 30rpx;
  404. font-weight: 400;
  405. color: #333333;
  406. padding-bottom:6rpx;
  407. }
  408. .rateyuanbox{
  409. width: 100%;
  410. height:210rpx;
  411. padding-bottom: 30rpx;
  412. border-bottom:1rpx solid #E0E0E0;
  413. display: flex;
  414. padding-left: 80rpx;
  415. padding-right: 80rpx;
  416. .rateyuanboxzuo{
  417. width: 30%;
  418. height: 100%;
  419. }
  420. .rateyuanboxyou{
  421. width: 40%;
  422. height: 100%;
  423. }
  424. .boxzuoview{
  425. width: 100%;
  426. height: 140rpx;
  427. }
  428. }
  429. }
  430. .box {
  431. width: 100%;
  432. height: 100%;
  433. background: #F8F8F8;
  434. }
  435. // 评分
  436. .rate-box {
  437. padding: 10rpx 20rpx;
  438. background-color: #FFFFFF;
  439. .date {
  440. width: 300rpx;
  441. height: 33rpx;
  442. font-size: 24rpx;
  443. font-weight: 400;
  444. color: #333333;
  445. line-height: 33rpx;
  446. letter-spacing: 1rpx;
  447. margin-bottom: 8rpx;
  448. }
  449. .title {
  450. width: 100%;
  451. height: 42rpx;
  452. font-size: 30rpx;
  453. font-weight: 500;
  454. color: #333333;
  455. line-height: 42rpx;
  456. letter-spacing: 2rpx;
  457. margin-bottom: 20rpx;
  458. }
  459. .level1 {
  460. display: flex;
  461. align-items: center;
  462. .level-name {
  463. width: 104rpx;
  464. height: 33rpx;
  465. font-size: 24rpx;
  466. font-weight: 500;
  467. color: #333333;
  468. line-height: 33rpx;
  469. letter-spacing: 1rpx;
  470. margin-right: 10rpx;
  471. }
  472. .level-progress {
  473. flex: 1;
  474. border-radius: 11rpx;
  475. height: 21rpx;
  476. background-color: #BEE4FF;
  477. position: relative;
  478. .color {
  479. width: 0;
  480. position: absolute;
  481. top: 0;
  482. left: 0;
  483. height: 21rpx;
  484. border-radius: 11rpx 0 0 11rpx;
  485. background-color: #008EF2;
  486. }
  487. }
  488. .level-rate {
  489. width: 65rpx;
  490. height: 33rpx;
  491. font-size: 24rpx;
  492. font-weight: 500;
  493. color: #333333;
  494. line-height: 33rpx;
  495. letter-spacing: 1rpx;
  496. margin: 0 20rpx 0 15rpx;
  497. }
  498. .arrow {
  499. width: 37rpx;
  500. height: 21rpx;
  501. padding: 5rpx 20rpx;
  502. }
  503. .rotatearrow {
  504. transform: rotate(270deg);
  505. }
  506. }
  507. .level1-subbox {
  508. display: flex;
  509. margin-top: 20rpx;
  510. flex-wrap: wrap;
  511. .sub-name {
  512. width: 50%;
  513. display: flex;
  514. margin-bottom: 18rpx;
  515. .subitem-name {
  516. width: 104rpx;
  517. height: 33rpx;
  518. font-size: 24rpx;
  519. font-weight: 400;
  520. color: #999999;
  521. line-height: 33rpx;
  522. letter-spacing: 1rpx;
  523. margin-right: 12rpx;
  524. }
  525. .checkimg {
  526. width: 27rpx;
  527. height: 27rpx;
  528. }
  529. }
  530. }
  531. }
  532. .tab{
  533. height: 88rpx;
  534. border-bottom: 1px solid #E0E0E0;
  535. background: #FFFFFF;
  536. display: flex;
  537. align-items: center;
  538. .tabbox {
  539. flex: 1;
  540. height: 100%;
  541. text-align: center;
  542. line-height: 92rpx;
  543. color: #666666;
  544. font-size: 28rpx;
  545. display: flex;
  546. justify-content: center;
  547. .activecllasscet {
  548. border-bottom: 2px solid #2671E2;
  549. color: #2671E2;
  550. font-weight: 600;
  551. }
  552. }
  553. }
  554. .content{
  555. // height: 1000rpx;/
  556. overflow: hidden;
  557. border-top: 1px solid #E0E0E0;
  558. .content-tips{
  559. background: #fff;
  560. // box-sizing: border-box;
  561. margin-bottom: 20rpx;
  562. overflow: hidden;
  563. .content-first{
  564. padding: 19rpx 30rpx;
  565. display: flex;
  566. justify-content: space-between;
  567. box-sizing: border-box;
  568. // border-top: 1px solid #E0E0E0;
  569. font-weight: 400;
  570. color: #292929;
  571. height: 90rpx;
  572. font-size: 30rpx;
  573. line-height: 30rpx;
  574. .left{
  575. display: flex;
  576. .img{
  577. // margin-top: 19rpx;
  578. width: 52rpx;
  579. height: 52rpx;
  580. border: 1px solid #E0E0E0;
  581. border-radius: 50%;
  582. text-align: center;
  583. line-height: 50rpx;
  584. margin-right: 20rpx;
  585. }
  586. .test{
  587. margin-top: 11rpx;
  588. font-weight: 500;
  589. color: #333333;
  590. }
  591. .edit{
  592. height: 30rpx;
  593. width: 30rpx;
  594. margin-left: 30rpx;
  595. margin-top: 11rpx;
  596. image{
  597. width: 100%;
  598. height: 100%;
  599. }
  600. }
  601. }
  602. .right{
  603. display: flex;
  604. .point{
  605. width: 12rpx;
  606. height: 12rpx;
  607. background: #2B6EFF;
  608. border-radius: 50%;
  609. margin-right: 9rpx;
  610. margin-top: 20rpx;
  611. }
  612. .test{
  613. margin-top: 11rpx;
  614. }
  615. }
  616. }
  617. .content-sec{
  618. border-top: 1px solid #E0E0E0;
  619. padding: 0 30rpx;
  620. height: 270rpx;
  621. position: relative;
  622. .content-sec-lab{
  623. margin-top: 30rpx;
  624. display: flex;
  625. font-size: 30rpx;
  626. font-weight: 400;
  627. color: #666666;
  628. line-height: 30rpx;
  629. .content-sec-lab1{
  630. color: #333333;
  631. }
  632. .content-sec-tips{
  633. max-width:174rpx ;
  634. height: 46rpx;
  635. background: #F2F2F2;
  636. border-radius: 6rpx;
  637. text-align: center;
  638. line-height: 26rpx;
  639. overflow: hidden;
  640. text-overflow:ellipsis;
  641. white-space: nowrap;
  642. font-size: 26rpx;
  643. font-weight: 400;
  644. color: #333333;
  645. margin-right: 24rpx;
  646. box-sizing: border-box;
  647. padding: 10rpx 24rpx;
  648. }
  649. }
  650. .content-sec-num{
  651. position: absolute;
  652. width: 200rpx;
  653. height: 90rpx;
  654. background: #F4F8FD;
  655. border-radius: 12rpx;
  656. font-weight: 400;
  657. color: #2671E2;
  658. line-height: 45rpx;
  659. bottom: 30rpx;
  660. right: 30rpx;
  661. text-align: center;
  662. }
  663. }
  664. .content-last{
  665. padding: 30rpx;
  666. height: 168rpx;
  667. .content-last-con{
  668. width: 690rpx;
  669. height: 108rpx;
  670. background: #F8F8F8;
  671. border-radius: 8rpx;
  672. padding: 14rpx 20rpx;
  673. font-size: 28rpx;
  674. font-weight: 400;
  675. color: #333333;
  676. line-height: 40rpx;
  677. }
  678. }
  679. }
  680. }
  681. .tabchange{
  682. // background: #FFFFFF;
  683. overflow: hidden;
  684. .tabactive1{
  685. .content-tips{
  686. background: #fff;
  687. padding: 0 30rpx;
  688. box-sizing: border-box;
  689. overflow: hidden;
  690. margin-bottom: 20rpx;
  691. .content-first{
  692. margin-top: 19rpx;
  693. display: flex;
  694. justify-content: space-between;
  695. .left{
  696. display: flex;
  697. .img{
  698. width: 52rpx;
  699. height: 52rpx;
  700. background: #FFFFFF;
  701. border: 1px solid #C9C9C9;
  702. border-radius: 50%;
  703. text-align: center;
  704. line-height: 52rpx;
  705. margin-right: 20rpx;
  706. }
  707. .name{
  708. font-weight: 600;
  709. color: #333333;
  710. // margin-left: 20rpx;
  711. margin-top: 11rpx;
  712. }
  713. .status{
  714. width: 110rpx;
  715. height: 42rpx;
  716. background: #FFF9F5;
  717. border-radius: 4rpx;
  718. font-size: 26rpx;
  719. font-weight: 400;
  720. color: #EC8D49;
  721. line-height: 42rpx;
  722. text-align: center;
  723. margin-left: 19rpx;
  724. margin-top: 11rpx;
  725. }
  726. }
  727. .right{
  728. display: flex;
  729. margin-top: 11rpx;
  730. .point{
  731. width: 12rpx;
  732. height: 12rpx;
  733. background: #2B6EFF;
  734. border-radius: 50%;
  735. margin-right: 9rpx;
  736. margin-top: 16rpx;
  737. }
  738. }
  739. }
  740. .content-sec{
  741. display: flex;
  742. justify-content: space-between;
  743. margin-top: 19rpx;
  744. .left{
  745. display: flex;
  746. .cus{
  747. font-size: 30rpx;
  748. font-weight: 400;
  749. color: #666666;
  750. line-height: 30rpx;
  751. }
  752. .arriveNum{
  753. font-size: 30rpx;
  754. font-weight: 400;
  755. line-height: 30rpx;
  756. margin-left: 10rpx;
  757. }
  758. }
  759. .right{
  760. width: 192rpx;
  761. height: 46rpx;
  762. background: #F4F8FD;
  763. border-radius: 6rpx;
  764. text-align: center;
  765. line-height: 46rpx;
  766. font-weight: 400;
  767. color: #2671E2;
  768. }
  769. }
  770. .content-last{
  771. margin: 30rpx 0;
  772. font-size: 30rpx;
  773. font-weight: 400;
  774. color: #666666;
  775. line-height: 30rpx;
  776. }
  777. }
  778. }
  779. .tabactive2{
  780. .tab2-tips{
  781. background: #fff;
  782. // height: 270rpx;
  783. overflow: auto;
  784. margin-bottom: 20rpx;
  785. .tab2-first{
  786. // height: 150rpx;
  787. border-bottom: 1px solid #E0E0E0;
  788. padding: 0 30rpx;
  789. margin-top: 19rpx;
  790. box-sizing: border-box;
  791. .tab2-first-1{
  792. display: flex;
  793. justify-content: space-between;
  794. // height: 75rpx;
  795. .tab2-first-left{
  796. display: flex;
  797. .img{
  798. width: 52rpx;
  799. height: 52rpx;
  800. background: #FFFFFF;
  801. border: 1px solid #C9C9C9;
  802. border-radius: 50%;
  803. text-align: center;
  804. line-height: 52rpx;
  805. }
  806. .name{
  807. font-weight: 600;
  808. color: #333333;
  809. margin-left: 20rpx;
  810. margin-top: 11rpx;
  811. }
  812. }
  813. .tab2-first-right{
  814. font-size: 30rpx;
  815. font-weight: 400;
  816. color: #666666;
  817. margin-top: 11rpx;
  818. }
  819. }
  820. .tab2-first-foot{
  821. margin-top: 19rpx;
  822. margin-bottom: 30rpx;
  823. font-size: 30rpx;
  824. font-weight: 400;
  825. color: #666666;
  826. line-height: 30rpx;
  827. }
  828. }
  829. .tab2-sec{
  830. height: 120rpx;
  831. padding: 30rpx;
  832. float: right;
  833. .tab-sec-edit{
  834. width: 156rpx;
  835. height: 60rpx;
  836. background: #FFFFFF;
  837. border-radius: 4px;
  838. border: 1px solid #2671E2;
  839. text-align: center;
  840. line-height: 60rpx;
  841. font-weight: 400;
  842. color: #2671E2;
  843. }
  844. }
  845. }
  846. }
  847. }
  848. .pon-foot{
  849. position: fixed;
  850. width: 750rpx;
  851. height: 100rpx;
  852. background: #FFFFFF;
  853. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  854. bottom: 0;
  855. display: flex;
  856. justify-content: space-around;
  857. align-items: center;
  858. // padding-top: 24rpx;
  859. box-sizing: border-box;
  860. // padding: ;
  861. .foot-tab{
  862. text-align: center;
  863. width: 270rpx;
  864. height: 70rpx;
  865. line-height: 70rpx;
  866. background: #2671E2;
  867. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  868. border-radius: 6rpx;
  869. font-size: 30rpx;
  870. font-weight: 400;
  871. color: #FFFFFF;
  872. }
  873. }
  874. </style>