Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

1159 righe
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. let newmenulist= uni.getStorageSync('weapp_session_Menu_data');
  363. if(newmenulist.khgl_bj==true){
  364. uni.navigateTo({
  365. url:`/pages/center/consumer/edit?id=${this.customerId}`
  366. })
  367. }
  368. },
  369. // 去添加提醒
  370. goRemind(){
  371. uni.navigateTo({
  372. url:`/pages/center/consumer/remind?str=${this.customerInfo.name+'/'+this.customerInfo.phone}&customerId=${this.customerId}`
  373. })
  374. },
  375. //评分点击
  376. clickaudeopal(item){
  377. if(item.selected==0){
  378. uni.navigateTo({
  379. url: '/pages/mine/ScoringPlaylist?customerId='+this.customerId +"&id="+item.marketingId+"&type=0"
  380. })
  381. }
  382. },
  383. tipupon(){
  384. if(!this.customerInfo.demand.cusSemanticWordsList)return
  385. this.tipshow=true
  386. },
  387. changeshow(item, type) {
  388. item.show = !item.show
  389. },
  390. changeshow2(item, type){
  391. item.show = !item.show
  392. },
  393. // 获取评分
  394. getRatelist() {
  395. this.$u.get("/customer/findzkMByCusId", {
  396. cusId: this.customerId
  397. }).then(res => {
  398. if (res.length) {
  399. let level1 = []
  400. res.forEach(item => {
  401. if (item.pid == 0) {
  402. level1.push({
  403. id: item.marketingId,
  404. rate: item.fraction,
  405. name: item.name,
  406. sort: item.sort,
  407. show: false,
  408. ratepercent: 0,
  409. children: []
  410. })
  411. }
  412. })
  413. // this.totalRate = level2rate;
  414. res.forEach(subitem => {
  415. let subitempid = subitem.pid
  416. level1.forEach(item => {
  417. if (subitempid == item.id) {
  418. if (subitem.selected == 0) {
  419. item.ratepercent += subitem.fraction
  420. }
  421. item.children.push({
  422. id: subitem.id,
  423. rate: subitem.fraction,
  424. selected: subitem.selected,
  425. name: subitem.name,
  426. show: false,
  427. marketingId:subitem.marketingId,
  428. children: []
  429. })
  430. }
  431. })
  432. })
  433. res.forEach(subitem => {
  434. let subitempid = subitem.pid
  435. level1.forEach(chen=>{
  436. chen.children.forEach(zxc=>{
  437. if(subitempid == zxc.marketingId){
  438. zxc.children.push({
  439. id: subitem.id,
  440. rate: subitem.fraction,
  441. selected: subitem.selected,
  442. name: subitem.name,
  443. marketingId:subitem.marketingId,
  444. })
  445. }
  446. })
  447. })
  448. })
  449. level1[0].show = true;
  450. level1[0].children[0].show = true;
  451. this.ratelist = level1
  452. }
  453. })
  454. },
  455. }
  456. }
  457. </script>
  458. <style lang="scss" scoped>
  459. .rotatearrow {
  460. transform: rotate(270deg);
  461. }
  462. // 评分
  463. .rate-box {
  464. padding: 10rpx 20rpx;
  465. background-color: #FFFFFF;
  466. .date {
  467. width: 300rpx;
  468. height: 33rpx;
  469. font-size: 24rpx;
  470. font-weight: 400;
  471. color: #333333;
  472. line-height: 33rpx;
  473. letter-spacing: 1rpx;
  474. margin-bottom: 8rpx;
  475. }
  476. .title {
  477. width: 100%;
  478. height: 42rpx;
  479. font-size: 30rpx;
  480. font-weight: 500;
  481. color: #333333;
  482. line-height: 42rpx;
  483. letter-spacing: 2rpx;
  484. margin-bottom: 20rpx;
  485. }
  486. .level1 {
  487. display: flex;
  488. align-items: center;
  489. .level-name {
  490. width: 104rpx;
  491. height: 33rpx;
  492. font-size: 24rpx;
  493. font-weight: 500;
  494. color: #333333;
  495. line-height: 33rpx;
  496. letter-spacing: 1rpx;
  497. margin-right: 10rpx;
  498. }
  499. .level-progress {
  500. flex: 1;
  501. border-radius: 11rpx;
  502. height: 21rpx;
  503. background-color: #BEE4FF;
  504. position: relative;
  505. .color {
  506. width: 0;
  507. position: absolute;
  508. top: 0;
  509. left: 0;
  510. height: 21rpx;
  511. border-radius: 11rpx 0 0 11rpx;
  512. background-color: #008EF2;
  513. }
  514. }
  515. .level-rate {
  516. width: 65rpx;
  517. height: 33rpx;
  518. font-size: 24rpx;
  519. font-weight: 500;
  520. color: #333333;
  521. line-height: 33rpx;
  522. letter-spacing: 1rpx;
  523. margin: 0 20rpx 0 15rpx;
  524. }
  525. .arrow {
  526. width: 37rpx;
  527. height: 21rpx;
  528. padding: 5rpx 20rpx;
  529. }
  530. .rotatearrow {
  531. transform: rotate(270deg);
  532. }
  533. }
  534. .level1-subbox {
  535. display: flex;
  536. margin-top: 20rpx;
  537. flex-wrap: wrap;
  538. .sub-name {
  539. width: 50%;
  540. display: flex;
  541. margin-bottom: 18rpx;
  542. .subitem-name {
  543. width: 104rpx;
  544. height: 33rpx;
  545. font-size: 24rpx;
  546. font-weight: 400;
  547. color: #999999;
  548. line-height: 33rpx;
  549. letter-spacing: 1rpx;
  550. margin-right: 12rpx;
  551. }
  552. .checkimg {
  553. width: 27rpx;
  554. height: 27rpx;
  555. }
  556. }
  557. }
  558. }
  559. .Level-box{
  560. padding-bottom: 2rpx;
  561. .hhhbox{
  562. width:100%;
  563. padding-left: 30rpx;
  564. padding-right: 30rpx;
  565. border-bottom: 1rpx solid #E0E0E0;
  566. background: #FFFFFF;
  567. // padding-bottom: 32rpx;
  568. .hsnrtest{
  569. height: 24rpx;
  570. font-size: 24rpx;
  571. font-weight: 400;
  572. color: #666666;
  573. line-height: 24rpx;
  574. }
  575. .Level3che{
  576. width:100%;
  577. height:28rpx;
  578. display: flex;
  579. line-height: 28rpx;
  580. align-items: center;
  581. margin-top: 30rpx;
  582. .title1{
  583. flex: 1;
  584. font-size: 28rpx;
  585. color:#2671E2;
  586. font-weight: 400;
  587. }
  588. .jiantobox{
  589. width: 30rpx;
  590. height: 30rpx;
  591. display: flex;
  592. align-items: center;
  593. .arrow{
  594. width: 28rpx;
  595. height:28rpx;
  596. }
  597. }
  598. }
  599. }
  600. .Level2che{
  601. width:100%;
  602. height: 88rpx;
  603. display: flex;
  604. line-height: 88rpx;
  605. align-items: center;
  606. .title1{
  607. flex: 2;
  608. font-size: 28rpx;
  609. color: #333333;
  610. font-weight: 400;
  611. }
  612. .leve1-jindu{
  613. flex: 3;
  614. display: flex;
  615. justify-content: center;
  616. align-items: center;
  617. .zhixing{
  618. width: 108rpx;
  619. height: 44rpx;
  620. background: #2671E2;
  621. border-radius: 4rpx;
  622. font-size: 28rpx;
  623. text-align: center;
  624. line-height: 44rpx;
  625. color: #FFFFFF;
  626. }
  627. .zhixing2{
  628. width: 108rpx;
  629. height: 44rpx;
  630. background: #F8F8F8;
  631. border-radius: 4rpx;
  632. font-size: 28rpx;
  633. text-align: center;
  634. line-height: 44rpx;
  635. color: #999999;
  636. }
  637. }
  638. .jiantobox{
  639. width: 30rpx;
  640. height: 30rpx;
  641. display: flex;
  642. align-items: center;
  643. .arrow{
  644. width: 30rpx;
  645. height:18rpx;
  646. }
  647. }
  648. }
  649. .Level1che{
  650. width:100%;
  651. height: 94rpx;
  652. background: #F5F5F5;
  653. display: flex;
  654. line-height: 94rpx;
  655. align-items: center;
  656. padding-left: 30rpx;
  657. padding-right: 30rpx;
  658. .title1{
  659. flex: 2;
  660. font-size: 30rpx;
  661. color: #333333;
  662. font-weight: 400;
  663. }
  664. .leve1-jindu{
  665. flex: 3;
  666. .jindutiao{
  667. width: 96%;
  668. height: 28rpx;
  669. background: #D5EEE2;
  670. line-height: 28rpx;
  671. border-radius: 14rpx;
  672. position: relative;
  673. .huanxing{
  674. height: 100%;
  675. background: #4FC78F;
  676. border-radius: 14rpx;
  677. }
  678. .text{
  679. position: absolute;
  680. top: 0rpx;
  681. right: 0rpx;
  682. font-size: 28rpx;
  683. font-weight: 400;
  684. color: #333333;
  685. }
  686. }
  687. }
  688. .jiantobox{
  689. width: 30rpx;
  690. height: 30rpx;
  691. display: flex;
  692. align-items: center;
  693. .arrow{
  694. width: 30rpx;
  695. height:18rpx;
  696. }
  697. }
  698. }
  699. }
  700. .cccccc{
  701. text-align: center;
  702. height: 140rpx;
  703. line-height: 140rpx;
  704. font-size: 30rpx;
  705. }
  706. .ratecenter{
  707. background-color: #FFFFFF;
  708. padding-bottom: 30rpx;
  709. width: 100%;
  710. .ratetetle{
  711. padding: 30rpx;
  712. font-size: 30rpx;
  713. font-weight: 400;
  714. color: #333333;
  715. padding-bottom:6rpx;
  716. }
  717. .rateyuanbox{
  718. width: 100%;
  719. height:210rpx;
  720. padding-bottom: 30rpx;
  721. border-bottom:1rpx solid #E0E0E0;
  722. display: flex;
  723. padding-left: 80rpx;
  724. padding-right: 80rpx;
  725. .rateyuanboxzuo{
  726. width: 30%;
  727. height: 100%;
  728. }
  729. .rateyuanboxyou{
  730. width: 40%;
  731. height: 100%;
  732. }
  733. .boxzuoview{
  734. width: 100%;
  735. height: 140rpx;
  736. }
  737. }
  738. }
  739. .box {
  740. width: 100%;
  741. height: 100%;
  742. background: #F8F8F8;
  743. }
  744. .tab{
  745. height: 88rpx;
  746. border-bottom: 1px solid #E0E0E0;
  747. background: #FFFFFF;
  748. display: flex;
  749. align-items: center;
  750. .tabbox {
  751. flex: 1;
  752. height: 100%;
  753. text-align: center;
  754. line-height: 92rpx;
  755. color: #666666;
  756. font-size: 28rpx;
  757. display: flex;
  758. justify-content: center;
  759. .activecllasscet {
  760. border-bottom: 2px solid #2671E2;
  761. color: #2671E2;
  762. font-weight: 600;
  763. }
  764. }
  765. }
  766. .content{
  767. // height: 1000rpx;/
  768. overflow: hidden;
  769. border-top: 1px solid #E0E0E0;
  770. .content-tips{
  771. background: #fff;
  772. // box-sizing: border-box;
  773. margin-bottom: 20rpx;
  774. overflow: hidden;
  775. .content-first{
  776. padding: 19rpx 30rpx;
  777. display: flex;
  778. justify-content: space-between;
  779. box-sizing: border-box;
  780. // border-top: 1px solid #E0E0E0;
  781. font-weight: 400;
  782. color: #292929;
  783. height: 90rpx;
  784. font-size: 30rpx;
  785. line-height: 30rpx;
  786. .left{
  787. display: flex;
  788. .img{
  789. // margin-top: 19rpx;
  790. width: 52rpx;
  791. height: 52rpx;
  792. border: 1px solid #E0E0E0;
  793. border-radius: 50%;
  794. text-align: center;
  795. line-height: 50rpx;
  796. margin-right: 20rpx;
  797. }
  798. .test{
  799. margin-top: 11rpx;
  800. font-weight: 500;
  801. color: #333333;
  802. }
  803. .edit{
  804. height: 30rpx;
  805. width: 30rpx;
  806. margin-left: 30rpx;
  807. margin-top: 11rpx;
  808. image{
  809. width: 100%;
  810. height: 100%;
  811. }
  812. }
  813. }
  814. .right{
  815. display: flex;
  816. .point{
  817. width: 12rpx;
  818. height: 12rpx;
  819. background: #2B6EFF;
  820. border-radius: 50%;
  821. margin-right: 9rpx;
  822. margin-top: 20rpx;
  823. }
  824. .test{
  825. margin-top: 11rpx;
  826. }
  827. }
  828. }
  829. .content-sec{
  830. border-top: 1px solid #E0E0E0;
  831. padding: 0 30rpx;
  832. height: 270rpx;
  833. position: relative;
  834. .content-sec-lab{
  835. margin-top: 30rpx;
  836. display: flex;
  837. font-size: 30rpx;
  838. font-weight: 400;
  839. color: #666666;
  840. line-height: 46rpx;
  841. .content-sec-lab1{
  842. color: #333333;
  843. }
  844. .content-sec-tips{
  845. max-width:120rpx ;
  846. height: 46rpx;
  847. background: #F2F2F2;
  848. border-radius: 6rpx;
  849. text-align: center;
  850. line-height: 26rpx;
  851. overflow: hidden;
  852. text-overflow:ellipsis;
  853. white-space: nowrap;
  854. font-size: 26rpx;
  855. font-weight: 400;
  856. color: #333333;
  857. margin-right: 20rpx;
  858. box-sizing: border-box;
  859. padding: 10rpx 24rpx;
  860. }
  861. }
  862. .content-sec-num{
  863. position: absolute;
  864. width: 200rpx;
  865. height: 90rpx;
  866. background: #F4F8FD;
  867. border-radius: 12rpx;
  868. font-weight: 400;
  869. color: #2671E2;
  870. line-height: 45rpx;
  871. bottom: 15rpx;
  872. right: 30rpx;
  873. text-align: center;
  874. }
  875. }
  876. .content-last{
  877. padding: 30rpx;
  878. height: 168rpx;
  879. .content-last-con{
  880. width: 690rpx;
  881. height: 108rpx;
  882. background: #F8F8F8;
  883. border-radius: 8rpx;
  884. padding: 14rpx 20rpx;
  885. font-size: 28rpx;
  886. font-weight: 400;
  887. color: #333333;
  888. line-height: 40rpx;
  889. }
  890. }
  891. }
  892. }
  893. .tabchange{
  894. // background: #FFFFFF;
  895. overflow: hidden;
  896. .tabactive1{
  897. padding-bottom: 100rpx;
  898. .content-tips{
  899. background: #fff;
  900. padding: 0 30rpx;
  901. box-sizing: border-box;
  902. overflow: hidden;
  903. margin-bottom: 20rpx;
  904. .content-first{
  905. margin-top: 19rpx;
  906. display: flex;
  907. justify-content: space-between;
  908. .left{
  909. display: flex;
  910. .img{
  911. width: 52rpx;
  912. height: 52rpx;
  913. background: #FFFFFF;
  914. border: 1px solid #C9C9C9;
  915. border-radius: 50%;
  916. text-align: center;
  917. line-height: 52rpx;
  918. margin-right: 20rpx;
  919. }
  920. .name{
  921. font-weight: 600;
  922. color: #333333;
  923. // margin-left: 20rpx;
  924. margin-top: 11rpx;
  925. }
  926. .status{
  927. width: 110rpx;
  928. height: 42rpx;
  929. background: #FFF9F5;
  930. border-radius: 4rpx;
  931. font-size: 26rpx;
  932. font-weight: 400;
  933. color: #EC8D49;
  934. line-height: 42rpx;
  935. text-align: center;
  936. margin-left: 19rpx;
  937. margin-top: 11rpx;
  938. }
  939. }
  940. .right{
  941. display: flex;
  942. margin-top: 11rpx;
  943. .point{
  944. width: 12rpx;
  945. height: 12rpx;
  946. background: #2B6EFF;
  947. border-radius: 50%;
  948. margin-right: 9rpx;
  949. margin-top: 16rpx;
  950. }
  951. }
  952. }
  953. .content-sec{
  954. display: flex;
  955. justify-content: space-between;
  956. margin-top: 19rpx;
  957. .left{
  958. display: flex;
  959. .cus{
  960. font-size: 30rpx;
  961. font-weight: 400;
  962. color: #666666;
  963. line-height: 30rpx;
  964. }
  965. .arriveNum{
  966. font-size: 30rpx;
  967. font-weight: 400;
  968. line-height: 30rpx;
  969. margin-left: 10rpx;
  970. }
  971. }
  972. .right{
  973. width: 192rpx;
  974. height: 46rpx;
  975. background: #F4F8FD;
  976. border-radius: 6rpx;
  977. text-align: center;
  978. line-height: 46rpx;
  979. font-weight: 400;
  980. color: #2671E2;
  981. }
  982. }
  983. .content-last{
  984. margin: 30rpx 0;
  985. font-size: 30rpx;
  986. font-weight: 400;
  987. color: #666666;
  988. line-height: 30rpx;
  989. }
  990. }
  991. }
  992. .tabactive2{
  993. .tab2-tips{
  994. background: #fff;
  995. // height: 270rpx;
  996. overflow: auto;
  997. margin-bottom: 20rpx;
  998. .tab2-first{
  999. // height: 150rpx;
  1000. border-bottom: 1px solid #E0E0E0;
  1001. padding: 0 30rpx;
  1002. margin-top: 19rpx;
  1003. box-sizing: border-box;
  1004. .tab2-first-1{
  1005. display: flex;
  1006. justify-content: space-between;
  1007. // height: 75rpx;
  1008. .tab2-first-left{
  1009. display: flex;
  1010. .img{
  1011. width: 52rpx;
  1012. height: 52rpx;
  1013. background: #FFFFFF;
  1014. border: 1px solid #C9C9C9;
  1015. border-radius: 50%;
  1016. text-align: center;
  1017. line-height: 52rpx;
  1018. }
  1019. .name{
  1020. font-weight: 600;
  1021. color: #333333;
  1022. margin-left: 20rpx;
  1023. margin-top: 11rpx;
  1024. }
  1025. }
  1026. .tab2-first-right{
  1027. font-size: 30rpx;
  1028. font-weight: 400;
  1029. color: #666666;
  1030. margin-top: 11rpx;
  1031. }
  1032. }
  1033. .tab2-first-foot{
  1034. margin-top: 19rpx;
  1035. margin-bottom: 30rpx;
  1036. font-size: 30rpx;
  1037. font-weight: 400;
  1038. color: #666666;
  1039. line-height: 30rpx;
  1040. }
  1041. }
  1042. .tab2-sec{
  1043. height: 120rpx;
  1044. padding: 30rpx;
  1045. float: right;
  1046. .tab-sec-edit{
  1047. width: 156rpx;
  1048. height: 60rpx;
  1049. background: #FFFFFF;
  1050. border-radius: 4px;
  1051. border: 1px solid #2671E2;
  1052. text-align: center;
  1053. line-height: 60rpx;
  1054. font-weight: 400;
  1055. color: #2671E2;
  1056. }
  1057. }
  1058. }
  1059. }
  1060. }
  1061. .pon-foot{
  1062. position: fixed;
  1063. width: 750rpx;
  1064. height: 100rpx;
  1065. background: #FFFFFF;
  1066. box-shadow: 0px -2rpx 8rpx 0rpx rgba(224, 224, 224, 0.5);
  1067. bottom: 0;
  1068. display: flex;
  1069. justify-content: space-around;
  1070. align-items: center;
  1071. // padding-top: 24rpx;
  1072. box-sizing: border-box;
  1073. // padding: ;
  1074. .foot-tab{
  1075. text-align: center;
  1076. width: 270rpx;
  1077. height: 70rpx;
  1078. line-height: 70rpx;
  1079. background: #2671E2;
  1080. box-shadow: 0px -2rpx 8rpx 0px rgba(224, 224, 224, 0.5);
  1081. border-radius: 6rpx;
  1082. font-size: 30rpx;
  1083. font-weight: 400;
  1084. color: #FFFFFF;
  1085. }
  1086. }
  1087. .upon-sec-tips{
  1088. // max-width:120rpx ;
  1089. height: 46rpx;
  1090. background: #F2F2F2;
  1091. border-radius: 6rpx;
  1092. text-align: center;
  1093. line-height: 26rpx;
  1094. overflow: hidden;
  1095. text-overflow:ellipsis;
  1096. white-space: nowrap;
  1097. font-size: 26rpx;
  1098. font-weight: 400;
  1099. color: #333333;
  1100. margin-right: 20rpx;
  1101. margin-top: 20rpx;
  1102. box-sizing: border-box;
  1103. padding: 10rpx 24rpx;
  1104. }
  1105. .conmsg-msg-lab-img{
  1106. width: 14rpx;
  1107. height: 30rpx;
  1108. margin-top: 6rpx;
  1109. margin-left: auto;
  1110. image{
  1111. width: 100%;
  1112. height: 100%;
  1113. }
  1114. }
  1115. </style>