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

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