Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.
 
 
 

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