Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 

1157 Zeilen
29 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">
  25. {{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: '--'}}</view>
  26. </view>
  27. <view class="content-sec-lab" @click.stop="tipupon">
  28. 客户标签:
  29. <text v-if="!customerInfo.demand.cusSemanticWordsList">暂无</text>
  30. <view v-else class="content-sec-tips" v-for="(che,ind) in customerInfo.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
  31. <view class="conmsg-msg-lab-img" v-if="customerInfo.demand.cusSemanticWordsList.length>0">
  32. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  33. </view>
  34. </view>
  35. <view class="content-sec-lab">
  36. 顾问姓名:<view class="content-sec-lab1">{{customerInfo.agentName}}</view>
  37. </view>
  38. <view class="content-sec-lab">
  39. 添加时间:<view class="content-sec-lab1">{{customerInfo.createTime}}</view>
  40. </view>
  41. <view class="content-sec-num">
  42. <view class="">{{customerInfo.visitRecord || '--'}}次到访</view>
  43. <view class="">{{customerInfo.fraction || '0'}}% | {{customerInfo.mm || '0'}}<text style="font-size: 24rpx;">min</text></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="tabchange">
  54. <view class="tab">
  55. <view class="tabbox">
  56. <view :class="{ activecllasscet: activeTotal == 0 }" @click="tabtimetap(0)">接待记录</view>
  57. </view>
  58. <view class="tabbox">
  59. <view :class="{ activecllasscet: activeTotal == 1 }" @click="tabtimetap(1)">跟进记录</view>
  60. </view>
  61. <view class="tabbox">
  62. <view :class="{ activecllasscet: activeTotal == 2 }" @click="tabtimetap(2)">执行率</view>
  63. </view>
  64. </view>
  65. <!-- 接待记录 -->
  66. <view class="tabactive1" v-if="activeTotal==0" style="min-height: 800rpx;">
  67. <view v-if="Thevisitingrecords.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  68. <view style="width: 100%;padding-top: 60rpx;">
  69. <view style="width: 100%;text-align: center;">
  70. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  71. </view>
  72. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  73. </view>
  74. </view>
  75. <view v-if="Thevisitingrecords.length!=0" class="content-tips" v-for="(item,index) in Thevisitingrecords" :key="index" @click="tapThevisiting(item)">
  76. <view class="content-first">
  77. <view class="left">
  78. <view v-if="item.level.length==0"></view>
  79. <view class="img" v-else-if="item.level==1">A</view>
  80. <view class="img" v-else-if="item.level==2">B</view>
  81. <view class="img" v-else-if="item.level==3">C</view>
  82. <view class="img" v-else-if="item.level==4">D</view>
  83. <view class="name">{{item.agentName || '--'}}</view>
  84. <view class="status" v-if="item.replaceReception==1">代接待</view>
  85. </view>
  86. <!-- <view class="right">
  87. <view class="point"></view>
  88. <view class="">优秀案例</view>
  89. </view> -->
  90. </view>
  91. <view class="content-sec">
  92. <view class="left">
  93. <view class="cus" style="line-height: 46rpx;">客户:{{item.name || ''}} |</view>
  94. <view style="line-height: 46rpx;" class="arriveNum">{{item.visitRecord || '--'}}次到访</view>
  95. </view>
  96. <view class="right">{{item.fraction || '0'}}%</view>
  97. </view>
  98. <view class="content-last">{{item.createTime}} | {{item.mm || '--'}}min</view>
  99. </view>
  100. </view>
  101. <!-- 跟进记录 -->
  102. <view class="tabactive2" v-if="activeTotal==1" style="min-height: 600rpx;">
  103. <view v-if="fllowList.length==0" 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;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  107. </view>
  108. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  109. </view>
  110. </view>
  111. <view v-if="fllowList.length!=0" class="tab2-tips" v-for="(item,index) in fllowList" :key="index">
  112. <view class="tab2-first">
  113. <view class="tab2-first-1">
  114. <view class="tab2-first-left">
  115. <view class="img">{{item.agentName.slice(0,1) || '--'}}</view>
  116. <view class="name">{{item.agentName || '||'}}</view>
  117. </view>
  118. <view class="tab2-first-right">{{item.createTime}}</view>
  119. </view>
  120. <view class="tab2-first-foot">跟进内容:{{item.remarks || '暂无'}}</view>
  121. </view>
  122. <!-- <view class="tab2-sec">
  123. <view class="tab-sec-edit">编辑记录</view>
  124. </view> -->
  125. </view>
  126. </view>
  127. <!-- 评分 -->
  128. <view class="ratecenter" v-if="activeTotal==2">
  129. <view class="ratetetle">执行总览</view>
  130. <view class="rateyuanbox">
  131. <view class="rateyuanboxzuo">
  132. <view class="boxzuoview cccccc">{{customerInfo.visitRecord || '--'}}次</view>
  133. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待次数</view>
  134. </view>
  135. <view class="rateyuanboxyou">
  136. <view class="boxzuoview" style="width: 100%;display: flex;justify-content: center;">
  137. <u-circle-progress active-color="#4FC78F" width='139' :percent="customerInfo.fraction">
  138. <view style="text-align: center;color: #4FC78F;">{{customerInfo.fraction}}%</view>
  139. </u-circle-progress>
  140. </view>
  141. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">销讲执行率</view>
  142. </view>
  143. <view class="rateyuanboxzuo">
  144. <view class="boxzuoview cccccc">{{customerInfo.mm}}min</view>
  145. <view style="color: #333333;font-size: 28rpx;font-weight: 400;text-align: center;">接待时长</view>
  146. </view>
  147. </view>
  148. <view style="width: 100%;height: 80rpx;border-bottom: 1rpx solid #E0E0E0;display: flex;align-items: center;">
  149. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 20rpx;">指标</view>
  150. <view style="flex: 1;font-size: 28rpx;color: #333333;font-weight: 600;text-indent: 170rpx;">执行率</view>
  151. </view>
  152. <view v-if="ratelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  153. <view style="width: 100%;padding-top: 60rpx;">
  154. <view style="width: 100%;text-align: center;">
  155. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  156. </view>
  157. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  158. </view>
  159. </view>
  160. <view class="Level-box" v-if="ratelist.length!=0" v-for="(item,index) in ratelist" :key="index">
  161. <view class="Level1che" @click="changeshow(item,1)">
  162. <view class="title1">{{item.name}}</view>
  163. <view class="leve1-jindu">
  164. <view class="jindutiao">
  165. <view class="huanxing" :style="{width: item.ratepercent/item.rate*100+'%'}"></view>
  166. <view class="text">{{((item.ratepercent/item.rate).toFixed(2)*100).toFixed()}}%</view>
  167. </view>
  168. </view>
  169. <view class="jiantobox">
  170. <image v-if="!item.show" class="arrow rotatearrow" src="/static/images/down.png" mode="" />
  171. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  172. </view>
  173. </view>
  174. <view class="hhhbox" v-if="item.show" v-for="(subitem,i) in item.children" :key="i">
  175. <view class="Level2che" @click="changeshow2(subitem,1)">
  176. <view class="title1" >{{subitem.name}}</view>
  177. <view class="leve1-jindu" >
  178. <view class="zhixing" v-if="!subitem.selected">已执行</view>
  179. <view class="zhixing2" v-else>未执行</view>
  180. </view>
  181. <view class="jiantobox">
  182. <image v-if="!subitem.show" class="arrow rotatearrow" src="/static/images/down.png" mode="" />
  183. <image v-else class="arrow" src="/static/images/up.png" mode="" />
  184. </view>
  185. </view>
  186. <view class="hsnrtest" v-if="subitem.show">话术内容</view>
  187. <view class="Level3che" @tap="clickaudeopal(che)" v-if="subitem.show" v-for="(che,inc) in subitem.children" :key='inc'>
  188. <view class="title1" >{{inc+1}}.{{che.name}}</view>
  189. <view class="jiantobox">
  190. <image v-if="che.selected==0" class="arrow" src="/static/images/rate-checked.png" mode="" />
  191. </view>
  192. </view>
  193. <view v-if="subitem.show" style="width: 100%;height: 30rpx;"></view>
  194. </view>
  195. </view>
  196. </view>
  197. </view>
  198. <view class="pon-foot" v-if="buttonisshow">
  199. <view class="foot-tab" @click="goRemind">添加提醒</view>
  200. <!-- <view class="foot-tab">拨打电话</view> -->
  201. <view class="foot-tab" @click="followRecordAdd()">写跟进</view>
  202. </view>
  203. <!-- closeable -->
  204. <u-popup v-model="tipshow" mode="center" width="500rpx" height="500rpx" closeable>
  205. <scroll-view scroll-y="true" style="height: 440rpx;">
  206. <view style="margin-top: 60rpx; display: flex; flex-wrap: wrap; padding-left: 20rpx;">
  207. <view class="upon-sec-tips" v-for="(item,index) in customerInfo.demand.cusSemanticWords" :key="index">
  208. {{item.name}}
  209. </view>
  210. </view>
  211. </scroll-view>
  212. </u-popup>
  213. </view>
  214. </template>
  215. <script>
  216. export default{
  217. data(){
  218. return{
  219. activeTotal: 0,
  220. customerId:'',
  221. tipshow:false,
  222. customerInfo:{
  223. name:'',
  224. createTime:'',
  225. agentName:''
  226. },
  227. Thevisitingrecords:[],
  228. totalRate:[],
  229. ratelist:[],
  230. fllowList:[],
  231. userInfo:{},
  232. buttonisshow:false
  233. }
  234. },
  235. onLoad(options) {
  236. this.customerId = options.id;
  237. },
  238. onShow() {
  239. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  240. if(this.userInfo.dataCode == 6){
  241. this.buttonisshow=true;
  242. }else{
  243. this.buttonisshow=false
  244. }
  245. this.getCustomerInfo()
  246. this.tabtimetap(0)
  247. },
  248. methods:{
  249. // 获取到访记录
  250. getVisitList() {
  251. this.$u.get("/customer/findByPhoneAndProject?id=" + this.customerId, ).then(res => {
  252. this.Thevisitingrecords = res
  253. })
  254. },
  255. // 获取客户信息
  256. getCustomerInfo() {
  257. const that = this;
  258. this.$u.get("/customer/findById", {
  259. id: this.customerId
  260. }).then(res => {
  261. if(res.fraction==null){
  262. res.fraction='0';
  263. }
  264. if(res.demand.cusSemanticWordsList!=null){
  265. res.demand.cusSemanticWords=res.demand.cusSemanticWordsList
  266. res.demand.cusSemanticWordsList.forEach(che=>{
  267. if(che.isInterval==0){
  268. che.name=che.name+che.unit+'-'+che.endName+che.unit;
  269. }
  270. })
  271. res.demand.cusSemanticWordsList=res.demand.cusSemanticWordsList.slice(0,3)
  272. }
  273. // console.log(res.demand.cusSemanticWords,'关键字')
  274. this.customerInfo = res;
  275. })
  276. },
  277. tabtimetap(idx){
  278. this.activeTotal=idx
  279. if(idx==0){
  280. this.getVisitList()
  281. }else if(idx==1){
  282. this.getFollowList()
  283. }else{
  284. this.getRatelist()
  285. }
  286. },
  287. tapThevisiting(item) {
  288. console.log("11111111111111")
  289. uni.showLoading({
  290. title: '加载中',
  291. mask:true
  292. });
  293. if(item.yon!=0){
  294. setTimeout(function () {
  295. uni.hideLoading();
  296. }, 2000);
  297. uni.showToast({
  298. icon:'none',
  299. title: '暂无录音',
  300. duration: 2000
  301. });
  302. return
  303. }else{
  304. const parames = {
  305. pageNum: 1,
  306. pageSize: 100,
  307. query: {
  308. customerId: item.id,
  309. }
  310. }
  311. var item={
  312. bg:0,
  313. customerId:item.id,
  314. id:''
  315. }
  316. uni.setStorageSync("entrance", 1); //写入缓存
  317. uni.setStorageSync("searchobj", item); //写入缓存
  318. this.$u.post("/corpus/findByPage", parames).then(res => {
  319. setTimeout(function () {
  320. uni.hideLoading();
  321. }, 2000);
  322. if(res==null){
  323. uni.showToast({
  324. icon: "none",
  325. title: "暂无音频"
  326. })
  327. return
  328. }if(res[0].merge==0){
  329. let newobj = res[0];
  330. uni.navigateTo({
  331. url: `/pages/mine/details2?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"2"}`
  332. })
  333. }else{
  334. let newobj = res[0];
  335. uni.navigateTo({
  336. url: `/pages/mine/details?customerId=${newobj.customerId}&status=${newobj.status}&stateisshow=${"1"}`
  337. })
  338. }
  339. })
  340. }
  341. },
  342. // 获取跟进记录
  343. getFollowList() {
  344. this.fllowList=[];
  345. this.$u.post("/customer/getCusStage", {
  346. customerId: this.customerId
  347. }).then(res => {
  348. res.forEach(item=>{
  349. item.agentName=this.customerInfo.agentName
  350. })
  351. this.fllowList = res;
  352. })
  353. },
  354. // 新增跟进
  355. followRecordAdd() {
  356. uni.navigateTo({
  357. url: `/pages/center/consumer/newFollowup/newFollowup?id=${this.customerId}`
  358. })
  359. },
  360. // 去编辑
  361. goedit(){
  362. // console.log('去编辑')
  363. uni.navigateTo({
  364. url:`/pages/center/consumer/edit?id=${this.customerId}`
  365. })
  366. },
  367. // 去添加提醒
  368. goRemind(){
  369. uni.navigateTo({
  370. url:`/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}`
  371. })
  372. },
  373. //评分点击
  374. clickaudeopal(item){
  375. if(item.selected==0){
  376. uni.navigateTo({
  377. url: '/pages/mine/ScoringPlaylist?customerId='+this.customerId +"&id="+item.marketingId
  378. })
  379. }
  380. },
  381. tipupon(){
  382. if(!this.customerInfo.demand.cusSemanticWordsList)return
  383. this.tipshow=true
  384. },
  385. changeshow(item, type) {
  386. item.show = !item.show
  387. },
  388. changeshow2(item, type){
  389. item.show = !item.show
  390. },
  391. // 获取评分
  392. getRatelist() {
  393. this.$u.get("/customer/findzkMByCusId", {
  394. cusId: this.customerId
  395. }).then(res => {
  396. if (res.length) {
  397. let level1 = []
  398. res.forEach(item => {
  399. if (item.pid == 0) {
  400. level1.push({
  401. id: item.marketingId,
  402. rate: item.fraction,
  403. name: item.name,
  404. sort: item.sort,
  405. show: false,
  406. ratepercent: 0,
  407. children: []
  408. })
  409. }
  410. })
  411. // this.totalRate = level2rate;
  412. res.forEach(subitem => {
  413. let subitempid = subitem.pid
  414. level1.forEach(item => {
  415. if (subitempid == item.id) {
  416. if (subitem.selected == 0) {
  417. item.ratepercent += subitem.fraction
  418. }
  419. item.children.push({
  420. id: subitem.id,
  421. rate: subitem.fraction,
  422. selected: subitem.selected,
  423. name: subitem.name,
  424. show: false,
  425. marketingId:subitem.marketingId,
  426. children: []
  427. })
  428. }
  429. })
  430. })
  431. res.forEach(subitem => {
  432. let subitempid = subitem.pid
  433. level1.forEach(chen=>{
  434. chen.children.forEach(zxc=>{
  435. if(subitempid == zxc.marketingId){
  436. zxc.children.push({
  437. id: subitem.id,
  438. rate: subitem.fraction,
  439. selected: subitem.selected,
  440. name: subitem.name,
  441. marketingId:subitem.marketingId,
  442. })
  443. }
  444. })
  445. })
  446. })
  447. level1[0].show = true;
  448. level1[0].children[0].show = true;
  449. this.ratelist = level1
  450. }
  451. })
  452. },
  453. }
  454. }
  455. </script>
  456. <style lang="scss" scoped>
  457. .rotatearrow {
  458. transform: rotate(270deg);
  459. }
  460. // 评分
  461. .rate-box {
  462. padding: 10rpx 20rpx;
  463. background-color: #FFFFFF;
  464. .date {
  465. width: 300rpx;
  466. height: 33rpx;
  467. font-size: 24rpx;
  468. font-weight: 400;
  469. color: #333333;
  470. line-height: 33rpx;
  471. letter-spacing: 1rpx;
  472. margin-bottom: 8rpx;
  473. }
  474. .title {
  475. width: 100%;
  476. height: 42rpx;
  477. font-size: 30rpx;
  478. font-weight: 500;
  479. color: #333333;
  480. line-height: 42rpx;
  481. letter-spacing: 2rpx;
  482. margin-bottom: 20rpx;
  483. }
  484. .level1 {
  485. display: flex;
  486. align-items: center;
  487. .level-name {
  488. width: 104rpx;
  489. height: 33rpx;
  490. font-size: 24rpx;
  491. font-weight: 500;
  492. color: #333333;
  493. line-height: 33rpx;
  494. letter-spacing: 1rpx;
  495. margin-right: 10rpx;
  496. }
  497. .level-progress {
  498. flex: 1;
  499. border-radius: 11rpx;
  500. height: 21rpx;
  501. background-color: #BEE4FF;
  502. position: relative;
  503. .color {
  504. width: 0;
  505. position: absolute;
  506. top: 0;
  507. left: 0;
  508. height: 21rpx;
  509. border-radius: 11rpx 0 0 11rpx;
  510. background-color: #008EF2;
  511. }
  512. }
  513. .level-rate {
  514. width: 65rpx;
  515. height: 33rpx;
  516. font-size: 24rpx;
  517. font-weight: 500;
  518. color: #333333;
  519. line-height: 33rpx;
  520. letter-spacing: 1rpx;
  521. margin: 0 20rpx 0 15rpx;
  522. }
  523. .arrow {
  524. width: 37rpx;
  525. height: 21rpx;
  526. padding: 5rpx 20rpx;
  527. }
  528. .rotatearrow {
  529. transform: rotate(270deg);
  530. }
  531. }
  532. .level1-subbox {
  533. display: flex;
  534. margin-top: 20rpx;
  535. flex-wrap: wrap;
  536. .sub-name {
  537. width: 50%;
  538. display: flex;
  539. margin-bottom: 18rpx;
  540. .subitem-name {
  541. width: 104rpx;
  542. height: 33rpx;
  543. font-size: 24rpx;
  544. font-weight: 400;
  545. color: #999999;
  546. line-height: 33rpx;
  547. letter-spacing: 1rpx;
  548. margin-right: 12rpx;
  549. }
  550. .checkimg {
  551. width: 27rpx;
  552. height: 27rpx;
  553. }
  554. }
  555. }
  556. }
  557. .Level-box{
  558. padding-bottom: 2rpx;
  559. .hhhbox{
  560. width:100%;
  561. padding-left: 30rpx;
  562. padding-right: 30rpx;
  563. border-bottom: 1rpx solid #E0E0E0;
  564. background: #FFFFFF;
  565. // padding-bottom: 32rpx;
  566. .hsnrtest{
  567. height: 24rpx;
  568. font-size: 24rpx;
  569. font-weight: 400;
  570. color: #666666;
  571. line-height: 24rpx;
  572. }
  573. .Level3che{
  574. width:100%;
  575. height:28rpx;
  576. display: flex;
  577. line-height: 28rpx;
  578. align-items: center;
  579. margin-top: 30rpx;
  580. .title1{
  581. flex: 1;
  582. font-size: 28rpx;
  583. color:#2671E2;
  584. font-weight: 400;
  585. }
  586. .jiantobox{
  587. width: 30rpx;
  588. height: 30rpx;
  589. display: flex;
  590. align-items: center;
  591. .arrow{
  592. width: 28rpx;
  593. height:28rpx;
  594. }
  595. }
  596. }
  597. }
  598. .Level2che{
  599. width:100%;
  600. height: 88rpx;
  601. display: flex;
  602. line-height: 88rpx;
  603. align-items: center;
  604. .title1{
  605. flex: 2;
  606. font-size: 28rpx;
  607. color: #333333;
  608. font-weight: 400;
  609. }
  610. .leve1-jindu{
  611. flex: 3;
  612. display: flex;
  613. justify-content: center;
  614. align-items: center;
  615. .zhixing{
  616. width: 108rpx;
  617. height: 44rpx;
  618. background: #2671E2;
  619. border-radius: 4rpx;
  620. font-size: 28rpx;
  621. text-align: center;
  622. line-height: 44rpx;
  623. color: #FFFFFF;
  624. }
  625. .zhixing2{
  626. width: 108rpx;
  627. height: 44rpx;
  628. background: #F8F8F8;
  629. border-radius: 4rpx;
  630. font-size: 28rpx;
  631. text-align: center;
  632. line-height: 44rpx;
  633. color: #999999;
  634. }
  635. }
  636. .jiantobox{
  637. width: 30rpx;
  638. height: 30rpx;
  639. display: flex;
  640. align-items: center;
  641. .arrow{
  642. width: 30rpx;
  643. height:18rpx;
  644. }
  645. }
  646. }
  647. .Level1che{
  648. width:100%;
  649. height: 94rpx;
  650. background: #F5F5F5;
  651. display: flex;
  652. line-height: 94rpx;
  653. align-items: center;
  654. padding-left: 30rpx;
  655. padding-right: 30rpx;
  656. .title1{
  657. flex: 2;
  658. font-size: 30rpx;
  659. color: #333333;
  660. font-weight: 400;
  661. }
  662. .leve1-jindu{
  663. flex: 3;
  664. .jindutiao{
  665. width: 96%;
  666. height: 28rpx;
  667. background: #D5EEE2;
  668. line-height: 28rpx;
  669. border-radius: 14rpx;
  670. position: relative;
  671. .huanxing{
  672. height: 100%;
  673. background: #4FC78F;
  674. border-radius: 14rpx;
  675. }
  676. .text{
  677. position: absolute;
  678. top: 0rpx;
  679. right: 0rpx;
  680. font-size: 28rpx;
  681. font-weight: 400;
  682. color: #333333;
  683. }
  684. }
  685. }
  686. .jiantobox{
  687. width: 30rpx;
  688. height: 30rpx;
  689. display: flex;
  690. align-items: center;
  691. .arrow{
  692. width: 30rpx;
  693. height:18rpx;
  694. }
  695. }
  696. }
  697. }
  698. .cccccc{
  699. text-align: center;
  700. height: 140rpx;
  701. line-height: 140rpx;
  702. font-size: 30rpx;
  703. }
  704. .ratecenter{
  705. background-color: #FFFFFF;
  706. padding-bottom: 30rpx;
  707. width: 100%;
  708. .ratetetle{
  709. padding: 30rpx;
  710. font-size: 30rpx;
  711. font-weight: 400;
  712. color: #333333;
  713. padding-bottom:6rpx;
  714. }
  715. .rateyuanbox{
  716. width: 100%;
  717. height:210rpx;
  718. padding-bottom: 30rpx;
  719. border-bottom:1rpx solid #E0E0E0;
  720. display: flex;
  721. padding-left: 80rpx;
  722. padding-right: 80rpx;
  723. .rateyuanboxzuo{
  724. width: 30%;
  725. height: 100%;
  726. }
  727. .rateyuanboxyou{
  728. width: 40%;
  729. height: 100%;
  730. }
  731. .boxzuoview{
  732. width: 100%;
  733. height: 140rpx;
  734. }
  735. }
  736. }
  737. .box {
  738. width: 100%;
  739. height: 100%;
  740. background: #F8F8F8;
  741. }
  742. .tab{
  743. height: 88rpx;
  744. border-bottom: 1px solid #E0E0E0;
  745. background: #FFFFFF;
  746. display: flex;
  747. align-items: center;
  748. .tabbox {
  749. flex: 1;
  750. height: 100%;
  751. text-align: center;
  752. line-height: 92rpx;
  753. color: #666666;
  754. font-size: 28rpx;
  755. display: flex;
  756. justify-content: center;
  757. .activecllasscet {
  758. border-bottom: 2px solid #2671E2;
  759. color: #2671E2;
  760. font-weight: 600;
  761. }
  762. }
  763. }
  764. .content{
  765. // height: 1000rpx;/
  766. overflow: hidden;
  767. border-top: 1px solid #E0E0E0;
  768. .content-tips{
  769. background: #fff;
  770. // box-sizing: border-box;
  771. margin-bottom: 20rpx;
  772. overflow: hidden;
  773. .content-first{
  774. padding: 19rpx 30rpx;
  775. display: flex;
  776. justify-content: space-between;
  777. box-sizing: border-box;
  778. // border-top: 1px solid #E0E0E0;
  779. font-weight: 400;
  780. color: #292929;
  781. height: 90rpx;
  782. font-size: 30rpx;
  783. line-height: 30rpx;
  784. .left{
  785. display: flex;
  786. .img{
  787. // margin-top: 19rpx;
  788. width: 52rpx;
  789. height: 52rpx;
  790. border: 1px solid #E0E0E0;
  791. border-radius: 50%;
  792. text-align: center;
  793. line-height: 50rpx;
  794. margin-right: 20rpx;
  795. }
  796. .test{
  797. margin-top: 11rpx;
  798. font-weight: 500;
  799. color: #333333;
  800. }
  801. .edit{
  802. height: 30rpx;
  803. width: 30rpx;
  804. margin-left: 30rpx;
  805. margin-top: 11rpx;
  806. image{
  807. width: 100%;
  808. height: 100%;
  809. }
  810. }
  811. }
  812. .right{
  813. display: flex;
  814. .point{
  815. width: 12rpx;
  816. height: 12rpx;
  817. background: #2B6EFF;
  818. border-radius: 50%;
  819. margin-right: 9rpx;
  820. margin-top: 20rpx;
  821. }
  822. .test{
  823. margin-top: 11rpx;
  824. }
  825. }
  826. }
  827. .content-sec{
  828. border-top: 1px solid #E0E0E0;
  829. padding: 0 30rpx;
  830. height: 270rpx;
  831. position: relative;
  832. .content-sec-lab{
  833. margin-top: 30rpx;
  834. display: flex;
  835. font-size: 30rpx;
  836. font-weight: 400;
  837. color: #666666;
  838. line-height: 46rpx;
  839. .content-sec-lab1{
  840. color: #333333;
  841. }
  842. .content-sec-tips{
  843. max-width:120rpx ;
  844. height: 46rpx;
  845. background: #F2F2F2;
  846. border-radius: 6rpx;
  847. text-align: center;
  848. line-height: 26rpx;
  849. overflow: hidden;
  850. text-overflow:ellipsis;
  851. white-space: nowrap;
  852. font-size: 26rpx;
  853. font-weight: 400;
  854. color: #333333;
  855. margin-right: 20rpx;
  856. box-sizing: border-box;
  857. padding: 10rpx 24rpx;
  858. }
  859. }
  860. .content-sec-num{
  861. position: absolute;
  862. width: 200rpx;
  863. height: 90rpx;
  864. background: #F4F8FD;
  865. border-radius: 12rpx;
  866. font-weight: 400;
  867. color: #2671E2;
  868. line-height: 45rpx;
  869. bottom: 15rpx;
  870. right: 30rpx;
  871. text-align: center;
  872. }
  873. }
  874. .content-last{
  875. padding: 30rpx;
  876. height: 168rpx;
  877. .content-last-con{
  878. width: 690rpx;
  879. height: 108rpx;
  880. background: #F8F8F8;
  881. border-radius: 8rpx;
  882. padding: 14rpx 20rpx;
  883. font-size: 28rpx;
  884. font-weight: 400;
  885. color: #333333;
  886. line-height: 40rpx;
  887. }
  888. }
  889. }
  890. }
  891. .tabchange{
  892. // background: #FFFFFF;
  893. overflow: hidden;
  894. .tabactive1{
  895. padding-bottom: 100rpx;
  896. .content-tips{
  897. background: #fff;
  898. padding: 0 30rpx;
  899. box-sizing: border-box;
  900. overflow: hidden;
  901. margin-bottom: 20rpx;
  902. .content-first{
  903. margin-top: 19rpx;
  904. display: flex;
  905. justify-content: space-between;
  906. .left{
  907. display: flex;
  908. .img{
  909. width: 52rpx;
  910. height: 52rpx;
  911. background: #FFFFFF;
  912. border: 1px solid #C9C9C9;
  913. border-radius: 50%;
  914. text-align: center;
  915. line-height: 52rpx;
  916. margin-right: 20rpx;
  917. }
  918. .name{
  919. font-weight: 600;
  920. color: #333333;
  921. // margin-left: 20rpx;
  922. margin-top: 11rpx;
  923. }
  924. .status{
  925. width: 110rpx;
  926. height: 42rpx;
  927. background: #FFF9F5;
  928. border-radius: 4rpx;
  929. font-size: 26rpx;
  930. font-weight: 400;
  931. color: #EC8D49;
  932. line-height: 42rpx;
  933. text-align: center;
  934. margin-left: 19rpx;
  935. margin-top: 11rpx;
  936. }
  937. }
  938. .right{
  939. display: flex;
  940. margin-top: 11rpx;
  941. .point{
  942. width: 12rpx;
  943. height: 12rpx;
  944. background: #2B6EFF;
  945. border-radius: 50%;
  946. margin-right: 9rpx;
  947. margin-top: 16rpx;
  948. }
  949. }
  950. }
  951. .content-sec{
  952. display: flex;
  953. justify-content: space-between;
  954. margin-top: 19rpx;
  955. .left{
  956. display: flex;
  957. .cus{
  958. font-size: 30rpx;
  959. font-weight: 400;
  960. color: #666666;
  961. line-height: 30rpx;
  962. }
  963. .arriveNum{
  964. font-size: 30rpx;
  965. font-weight: 400;
  966. line-height: 30rpx;
  967. margin-left: 10rpx;
  968. }
  969. }
  970. .right{
  971. width: 192rpx;
  972. height: 46rpx;
  973. background: #F4F8FD;
  974. border-radius: 6rpx;
  975. text-align: center;
  976. line-height: 46rpx;
  977. font-weight: 400;
  978. color: #2671E2;
  979. }
  980. }
  981. .content-last{
  982. margin: 30rpx 0;
  983. font-size: 30rpx;
  984. font-weight: 400;
  985. color: #666666;
  986. line-height: 30rpx;
  987. }
  988. }
  989. }
  990. .tabactive2{
  991. .tab2-tips{
  992. background: #fff;
  993. // height: 270rpx;
  994. overflow: auto;
  995. margin-bottom: 20rpx;
  996. .tab2-first{
  997. // height: 150rpx;
  998. border-bottom: 1px solid #E0E0E0;
  999. padding: 0 30rpx;
  1000. margin-top: 19rpx;
  1001. box-sizing: border-box;
  1002. .tab2-first-1{
  1003. display: flex;
  1004. justify-content: space-between;
  1005. // height: 75rpx;
  1006. .tab2-first-left{
  1007. display: flex;
  1008. .img{
  1009. width: 52rpx;
  1010. height: 52rpx;
  1011. background: #FFFFFF;
  1012. border: 1px solid #C9C9C9;
  1013. border-radius: 50%;
  1014. text-align: center;
  1015. line-height: 52rpx;
  1016. }
  1017. .name{
  1018. font-weight: 600;
  1019. color: #333333;
  1020. margin-left: 20rpx;
  1021. margin-top: 11rpx;
  1022. }
  1023. }
  1024. .tab2-first-right{
  1025. font-size: 30rpx;
  1026. font-weight: 400;
  1027. color: #666666;
  1028. margin-top: 11rpx;
  1029. }
  1030. }
  1031. .tab2-first-foot{
  1032. margin-top: 19rpx;
  1033. margin-bottom: 30rpx;
  1034. font-size: 30rpx;
  1035. font-weight: 400;
  1036. color: #666666;
  1037. line-height: 30rpx;
  1038. }
  1039. }
  1040. .tab2-sec{
  1041. height: 120rpx;
  1042. padding: 30rpx;
  1043. float: right;
  1044. .tab-sec-edit{
  1045. width: 156rpx;
  1046. height: 60rpx;
  1047. background: #FFFFFF;
  1048. border-radius: 4px;
  1049. border: 1px solid #2671E2;
  1050. text-align: center;
  1051. line-height: 60rpx;
  1052. font-weight: 400;
  1053. color: #2671E2;
  1054. }
  1055. }
  1056. }
  1057. }
  1058. }
  1059. .pon-foot{
  1060. position: fixed;
  1061. width: 750rpx;
  1062. height: 100rpx;
  1063. background: #FFFFFF;
  1064. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  1065. bottom: 0;
  1066. display: flex;
  1067. justify-content: space-around;
  1068. align-items: center;
  1069. // padding-top: 24rpx;
  1070. box-sizing: border-box;
  1071. // padding: ;
  1072. .foot-tab{
  1073. text-align: center;
  1074. width: 270rpx;
  1075. height: 70rpx;
  1076. line-height: 70rpx;
  1077. background: #2671E2;
  1078. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  1079. border-radius: 6rpx;
  1080. font-size: 30rpx;
  1081. font-weight: 400;
  1082. color: #FFFFFF;
  1083. }
  1084. }
  1085. .upon-sec-tips{
  1086. // max-width:120rpx ;
  1087. height: 46rpx;
  1088. background: #F2F2F2;
  1089. border-radius: 6rpx;
  1090. text-align: center;
  1091. line-height: 26rpx;
  1092. overflow: hidden;
  1093. text-overflow:ellipsis;
  1094. white-space: nowrap;
  1095. font-size: 26rpx;
  1096. font-weight: 400;
  1097. color: #333333;
  1098. margin-right: 20rpx;
  1099. margin-top: 20rpx;
  1100. box-sizing: border-box;
  1101. padding: 10rpx 24rpx;
  1102. }
  1103. .conmsg-msg-lab-img{
  1104. width: 14rpx;
  1105. height: 30rpx;
  1106. margin-top: 6rpx;
  1107. margin-left: auto;
  1108. image{
  1109. width: 100%;
  1110. height: 100%;
  1111. }
  1112. }
  1113. </style>