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.
 
 
 

893 lines
24 KiB

  1. <template>
  2. <view class="box">
  3. <view>
  4. <view class="search-box">
  5. <view class="search" @click="goSearch">
  6. <view class="search-img">
  7. <image class="search-img1" src="../../../static/images/search.png" mode=""></image>
  8. </view>
  9. <view class="search-text">输入客户姓名/手机号</view>
  10. </view>
  11. </view>
  12. </view>
  13. <!-- 选择器 -->
  14. <view class="boxtittab">
  15. <view class="tabbox" @click="taptimeisshow">
  16. 接待时间<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  17. </view>
  18. <view class="tabbox" @click="taptimetuisshow">
  19. 接待时长<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  20. </view>
  21. <view class="tabbox" @click="tapsoltishow">
  22. 排序<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  23. </view>
  24. <view class="tabbox" @click="screenshow">
  25. 更多筛选<u-icon name="arrow-down" size="24" style="padding-left: 12rpx;"></u-icon>
  26. </view>
  27. </view>
  28. <view class="count" v-if="recordList.length > 0">
  29. 筛选结果:<text>{{totalRecords}} </text>条
  30. </view>
  31. <view class="content">
  32. <view v-if="recordList.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  33. <view style="width: 100%;padding-top: 200rpx;background: #FFFFFF;">
  34. <view style="width: 100%;text-align: center;">
  35. <image style="width: 220rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  36. </view>
  37. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  38. </view>
  39. </view>
  40. <view v-if="recordList.length!=0" class="content-tips" v-for="(item,index) in recordList" :key='index' @click="gotoDetail(item.id)">
  41. <view class="content-first">
  42. <view class="left">
  43. <view v-if="item.level.length==0"></view>
  44. <view class="img" v-else-if="item.level==1">A</view>
  45. <view class="img" v-else-if="item.level==2">B</view>
  46. <view class="img" v-else-if="item.level==3">C</view>
  47. <view class="img" v-else-if="item.level==4">D</view>
  48. <view class="test">{{item.name}}</view>
  49. </view>
  50. <!-- <view class="right">
  51. <view class="point"></view>
  52. <view class="test">定金</view>
  53. </view> -->
  54. </view>
  55. <view class="content-sec">
  56. <view class="content-sec-lab">
  57. 手机号码:<view class="content-sec-lab1">{{item.phone || '--'}}</view>
  58. </view>
  59. <view class="content-sec-lab" style="line-height: 46rpx;">
  60. 客户标签:
  61. <text v-if="item.demand.cusSemanticWordsList==null">暂无</text>
  62. <view v-else class="content-sec-tips" v-for="(che,ind) in item.demand.cusSemanticWordsList" :key='ind'>{{che.name}}</view>
  63. </view>
  64. <view class="content-sec-lab">
  65. 顾问姓名:<view class="content-sec-lab1">{{item.agentName}}</view>
  66. </view>
  67. <view class="content-sec-lab">
  68. 添加时间:<view class="content-sec-lab1">{{item.createTime}}</view>
  69. </view>
  70. <view class="content-sec-num">
  71. <view class="">{{item.visitRecord || '--'}}次到访</view>
  72. <view class="">{{item.fraction || '0'}}% | {{item.mm || '0'}}<text style="font-size: 24rpx;">min</text></view>
  73. </view>
  74. </view>
  75. <view class="content-last" v-if="item.isshow==true">
  76. <!-- <view class="content-last-tab">添加提醒</view>
  77. <view class="content-last-tab">拨打电话</view> -->
  78. <view class="content-last-tab" @click.stop="gotoFollowUp(item.id)">写跟进</view>
  79. </view>
  80. </view>
  81. </view>
  82. <u-popup v-model="screenShow" mode="top" >
  83. <view class="screen">
  84. <!-- 顾问选择 -->
  85. <view class="screen-counselor">
  86. <view class="screen-text">
  87. 所属顾问
  88. </view>
  89. <view class="screen-sel" @click="selectshow = true">
  90. <u-input v-model="screen.agentIdtext" type="text" placeholder='请选择' class="screen-inp" disabled />
  91. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  92. </view>
  93. </view>
  94. <view class="screen-counselor">
  95. <view class="screen-text">
  96. 客户标签
  97. </view>
  98. <view class="screen-sel" @click="selectTipshow = true">
  99. <u-input v-model="screen.cunsumerTips" type="text" placeholder='请选择' class="screen-inp" disabled />
  100. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  101. </view>
  102. </view>
  103. <view class="screen-counselor">
  104. <view class="screen-text">
  105. 客户阶段
  106. </view>
  107. <view class="screen-sel" @click="selectPhaseShow = true">
  108. <u-input v-model="screen.clientStageName" type="text" placeholder='请选择' class="screen-inp" disabled />
  109. <image class="screen-sel-img" src="../../../static/images/right.png" mode=""></image>
  110. </view>
  111. </view>
  112. <!-- 录音标示 -->
  113. <view class="screen-record">
  114. <view class="screen-record-text">
  115. 客户等级
  116. </view>
  117. <view class="screen-record-tab">
  118. <view :class="[screen.record==0?'screen-record-chose':'screen-record-nochose']" @click="recordclick(0)">
  119. A
  120. </view>
  121. <view :class="[screen.record==1?'screen-record-chose':'screen-record-nochose']" @click="recordclick(1)">
  122. B
  123. </view>
  124. <view :class="[screen.record==2?'screen-record-chose':'screen-record-nochose']" @click="recordclick(2)">
  125. C
  126. </view>
  127. <view :class="[screen.record==3?'screen-record-chose':'screen-record-nochose']" @click="recordclick(3)">
  128. D
  129. </view>
  130. </view>
  131. </view>
  132. <!-- <view class="screen-record">
  133. <view class="screen-record-text">
  134. 客户阶段
  135. </view>
  136. <view class="screen-record-tab">
  137. <view v-for="(item,index) in stageList" :key="index">
  138. <view :class="[screen.stage==index?'screen-record-chose':'screen-record-nochose']" @click="screen.stage=index" style="width: 120rpx;">
  139. {{item}}
  140. </view>
  141. </view>
  142. </view>
  143. </view> -->
  144. <view class="screen-record">
  145. <view class="screen-record-text">
  146. 到访次数
  147. </view>
  148. <view class="screen-record-tab">
  149. <block v-for="(item,index) in visitList" :key="index">
  150. <view :class="[item.isShow?'screen-record-chose':'screen-record-nochose']"
  151. @click="choice(index,item.value)">
  152. {{item.label}}
  153. </view>
  154. </block>
  155. <!-- <view :class="[screen.visitRecord==1?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(1)">
  156. 首次到访
  157. </view>
  158. <view :class="[screen.visitRecord==2?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(2)">
  159. 2次到访
  160. </view>
  161. <view :class="[screen.visitRecord==3?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(3)">
  162. 3次到访
  163. </view>
  164. <view :class="[screen.visitRecord==4?'screen-record-chose':'screen-record-nochose']" @click="screenvisitRecord(4)">
  165. 3次以上
  166. </view> -->
  167. </view>
  168. </view>
  169. <view class="screen-foot">
  170. <view class="screen-foot-reset" @click="reset">
  171. 重置
  172. </view>
  173. <view class="screen-foot-sure" @click="screensure">
  174. 确定
  175. </view>
  176. </view>
  177. </view>
  178. </u-popup>
  179. <!-- 选择顾问的选择框 -->
  180. <u-select v-model="selectshow" :list="freeList" @confirm="actionSelectCallback"></u-select>
  181. <!-- 客户标签 -->
  182. <u-select v-model="selectTipshow" :list="findKeywordsList" @confirm="selectCallback"></u-select>
  183. <!-- 客户阶段 -->
  184. <u-select v-model="selectPhaseShow" :list="phaseList" @confirm="selectPhase"></u-select>
  185. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  186. <u-popup v-model="timeshow" mode="bottom">
  187. <view class="timeview" :style="{ color: activeTotal == 5 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(5)">全部</view>
  188. <view class="timeview" :style="{ color: activeTotal == 0 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(0)">今天</view>
  189. <view class="timeview" :style="{ color: activeTotal == 1 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(1)">昨天</view>
  190. <view class="timeview" :style="{ color: activeTotal == 2 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(2)">近7天</view>
  191. <view class="timeview" :style="{ color: activeTotal == 3 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(3)">近30天</view>
  192. <view class="timeview" :style="{ color: activeTotal == 4 ? '#2B6EFF' : '#333333' }" @click="tabtimetap(4)">自定义</view>
  193. </u-popup>
  194. <u-popup v-model="timetushow" mode="bottom">
  195. <view class="timeview" :style="{ color: activeTotal2 == 0 ? '#2B6EFF' : '#333333' }" @click="timetap(0)">全部</view>
  196. <view class="timeview" :style="{ color: activeTotal2 == 1 ? '#2B6EFF' : '#333333' }" @click="timetap(1)">0~15min</view>
  197. <view class="timeview" :style="{ color: activeTotal2 == 2 ? '#2B6EFF' : '#333333' }" @click="timetap(2)">15~30min</view>
  198. <view class="timeview" :style="{ color: activeTotal2 == 3 ? '#2B6EFF' : '#333333' }" @click="timetap(3)">30~60min</view>
  199. <view class="timeview" :style="{ color: activeTotal2 == 4 ? '#2B6EFF' : '#333333' }" @click="timetap(4)">60~90min</view>
  200. <view class="timeview" :style="{ color: activeTotal2 == 5 ? '#2B6EFF' : '#333333' }" @click="timetap(5)">90min以上</view>
  201. </u-popup>
  202. <u-select v-model="soltishow" :list="orderBylist" @confirm="selectCallback2"></u-select>
  203. </view>
  204. </template>
  205. <script>
  206. export default{
  207. data(){
  208. return{
  209. orderBylist:[
  210. {label:'全部',value:'0'},
  211. {label:'创建时间倒序',value:'1'},
  212. {label:'创建时间正序',value:'2'},
  213. {label:'接待时间倒序',value:'3'},
  214. {label:'接待时间正序',value:'4'},
  215. {label:'执行率正序',value:'5'},
  216. {label:'执行率倒序',value:'6'},
  217. {label:'接访次数正序',value:'7'},
  218. {label:'接访次数倒序',value:'8'},
  219. ],
  220. value:'',
  221. screenShow:false,
  222. selectshow:false,
  223. selectTipshow:false,
  224. selectPhaseShow:false,
  225. buildingID:'',
  226. screen:{
  227. agentId:'',
  228. agentIdtext:'',
  229. visitRecord:[],
  230. record:null,
  231. cunsumerTips:'',
  232. cunsumerTipsid:'',
  233. clientStage:'',
  234. clientStageName:''
  235. },
  236. stageList:['未知','到访','意向','定金','成交'],
  237. recordList:[],
  238. nextPage:1,
  239. totalRecord:'',
  240. freeList:[],
  241. userInfo:{},
  242. findKeywordsList:[],
  243. phaseList:[],
  244. isnorefresh:'',
  245. activeTotal:5,
  246. activeTotal2:0,
  247. totalTimeShow: false,
  248. timeshow:false,
  249. timetushow:false,
  250. soltishow:false,
  251. staTime:'',
  252. endtime:'',
  253. orderBy:'',
  254. totalRecords:'',
  255. visitList: [{
  256. label: '首次到访',
  257. value: 1,
  258. isShow: false,
  259. }, {
  260. label: '2次到访',
  261. value: 2,
  262. isShow: false,
  263. }, {
  264. label: '3次到访',
  265. value: 3,
  266. isShow: false,
  267. }, {
  268. label: '3次以上',
  269. value: 4,
  270. isShow: false,
  271. }, ],
  272. isRefresh:false
  273. }
  274. },
  275. onLoad(options) {
  276. this.isnorefresh=options.refresh;
  277. },
  278. onShow() {
  279. if(this.isnorefresh=='refresh'){
  280. this.buildingID = uni.getStorageSync('buildingID').id;
  281. this.nextPage=1;
  282. this.recordList=[]
  283. this.isRefresh = false;
  284. this.getMyCustom()
  285. this.getFreeList()
  286. this.getfindKeywordsList()
  287. this.getCustomPhase()
  288. this.isnorefresh='';
  289. }
  290. },
  291. onPullDownRefresh(){
  292. this.isRefresh = true;
  293. this.nextPage = 1;
  294. this.getMyCustom()
  295. setTimeout(() => {
  296. uni.stopPullDownRefresh()
  297. }, 1000)
  298. },
  299. onReachBottom() {
  300. if(this.totalRecord==this.nextPage){
  301. uni.showToast({
  302. icon:'none',
  303. title: '到底了',
  304. duration: 2000
  305. });
  306. return
  307. }else{
  308. this.nextPage+=1;
  309. this.isRefresh = false;
  310. this.getMyCustom();
  311. }
  312. },
  313. methods:{
  314. choice(index,e) {
  315. if (this.visitList[index].isShow == true) {
  316. this.visitList[index].isShow = false;
  317. for (var i = 0; i < this.screen.visitRecord.length; i++) {
  318. if (this.screen.visitRecord[i] === e) {
  319. this.screen.visitRecord.splice(i, 1);
  320. }
  321. }
  322. } else {
  323. this.visitList[index].isShow = true;
  324. this.screen.visitRecord.push(e)
  325. }
  326. },
  327. tapsoltishow(){
  328. this.soltishow=true;
  329. },
  330. taptimetuisshow(){
  331. this.timetushow=true;
  332. },
  333. taptimeisshow(){
  334. this.timeshow=true;
  335. },
  336. //选择标签
  337. selectCallback2(e){
  338. this.orderBy=e[0].value;
  339. this.nextPage=1;
  340. this.recordList=[];
  341. this.isRefresh = false;
  342. this.getMyCustom();
  343. },
  344. //选择录音时长
  345. timetap(index){
  346. this.timetushow=false;
  347. this.activeTotal2=index;
  348. this.nextPage=1;
  349. this.recordList=[];
  350. this.isRefresh = false;
  351. this.getMyCustom();
  352. },
  353. //时间选择
  354. tabtimetap(index){
  355. this.timeshow=false;
  356. if (index == 4) {
  357. this.totalTimeShow = true;
  358. } else {
  359. this.activeTotal = index;
  360. this.staTime='';
  361. this.endtime='';
  362. this.nextPage=1;
  363. this.recordList=[];
  364. this.isRefresh = false;
  365. this.getMyCustom();
  366. }
  367. },
  368. //自定义时间
  369. totalTimeChange(e) {
  370. this.staTime=e.startDate;
  371. this.endtime=e.endDate;
  372. this.activeTotal=4;
  373. this.nextPage=1;
  374. this.recordList=[];
  375. this.isRefresh = false;
  376. this.getMyCustom();
  377. },
  378. recordclick(i){
  379. if(this.screen.record==i){
  380. this.screen.record=null
  381. }else{
  382. this.screen.record=i
  383. }
  384. },
  385. screenvisitRecord(i){
  386. if(this.screen.visitRecord==i){
  387. this.screen.visitRecord=''
  388. }else{
  389. this.screen.visitRecord=i
  390. }
  391. },
  392. // 客户详情
  393. gotoDetail(id) {
  394. uni.navigateTo({
  395. url: `/pages/center/consumer/consumerDetail?id=${id}`
  396. })
  397. },
  398. getMyCustom(){
  399. let dateType=0;
  400. let recDurationInterval=0;
  401. let orderBy=0;
  402. if(this.activeTotal==5){
  403. dateType=null;
  404. }else if(this.activeTotal==4){
  405. dateType=null;
  406. }else{
  407. dateType=this.activeTotal;
  408. }
  409. if(this.activeTotal2==0){
  410. recDurationInterval=null
  411. }else{
  412. recDurationInterval=this.activeTotal2
  413. }
  414. if(this.orderBy==0){
  415. orderBy=null;
  416. }else{
  417. orderBy=this.orderBy;
  418. }
  419. var parames = {
  420. pageNum: this.nextPage,
  421. pageSize: 10,
  422. query: {
  423. projectId:this.buildingID,
  424. keywordsId:this.screen.cunsumerTipsid,
  425. clientStage:this.screen.clientStage,
  426. agentId:this.screen.agentId,
  427. dateType:dateType,
  428. staTime:this.staTime,
  429. endtime:this.endtime,
  430. recDurationInterval:recDurationInterval,
  431. orderBy:orderBy
  432. }
  433. };
  434. if (this.screen.visitRecord.length > 0) {
  435. parames.query.visitRecords = this.screen.visitRecord.join(',');
  436. }
  437. if(this.screen.record==0){
  438. parames.query.levels= ["1"]
  439. }else if(this.screen.record==1){
  440. parames.query.levels= ["2"]
  441. }else if(this.screen.record==2){
  442. parames.query.levels= ["3"]
  443. }else if(this.screen.record==3){
  444. parames.query.levels= ["4"]
  445. }else{
  446. parames.query.levels=''
  447. }
  448. this.userInfo = uni.getStorageSync('weapp_session_userInfo_data');
  449. this.$u.post("/customer/customerManagement", parames).then(data => {
  450. var list = data.results || [];
  451. list.forEach(item=>{
  452. if(this.userInfo.dataCode == 6){
  453. item.isshow=true;
  454. }else{
  455. item.isshow=false;
  456. }
  457. })
  458. list.forEach(item=>{
  459. if(item.demand.cusSemanticWordsList!=null){
  460. item.demand.cusSemanticWordsList.forEach(che=>{
  461. if(che.isInterval==0){
  462. che.name=che.name+che.unit+'-'+che.endName+che.unit;
  463. }
  464. })
  465. }
  466. })
  467. if(this.isRefresh){
  468. this.recordList = list;
  469. }else{
  470. this.recordList = [...this.recordList, ...list];
  471. }
  472. this.totalRecord=data.totalPage;
  473. this.totalRecords = data.totalRecord;
  474. })
  475. },
  476. //获取顾问列表
  477. getFreeList() {
  478. this.freeList=[]
  479. this.$u.post("/cusLvStatistics/selectAllAccountIdByHouseId", {houseId: this.buildingID}).then(res => {
  480. this.freeList = res;
  481. this.freeList.forEach(item=>{
  482. item.label=item.name;
  483. item.value=item.accountId
  484. })
  485. })
  486. },
  487. //获取客户标签
  488. getfindKeywordsList() {
  489. this.findKeywordsList=[]
  490. this.$u.post("/customer/findKeywords",{houseId:this.buildingID}).then(res => {
  491. res.forEach(item=>{
  492. if(item.isInterval==0){
  493. item.label=item.name+item.unit+'-'+item.endName+item.unit;
  494. }else{
  495. item.label=item.name
  496. }
  497. item.value=item.id;
  498. })
  499. this.findKeywordsList = res;
  500. })
  501. },
  502. getCustomPhase(){
  503. this.phaseList=[]
  504. this.$u.post("/customer/lifeTrackDefineList",{houseId:this.buildingID}).then(res => {
  505. let tempArr = []
  506. res.forEach(item=>{
  507. let tempObj = {}
  508. tempObj.label = item.stageName;
  509. tempObj.value = item.id;
  510. tempArr.push(tempObj)
  511. })
  512. this.phaseList = tempArr;
  513. })
  514. },
  515. // 筛选
  516. screenshow(){
  517. this.screenShow=true
  518. },
  519. //选择顾问
  520. actionSelectCallback(e){
  521. this.screen.agentId=e[0].value;
  522. this.screen.agentIdtext=e[0].label;
  523. },
  524. //选择标签
  525. selectCallback(e){
  526. this.screen.cunsumerTips=e[0].label;
  527. this.screen.cunsumerTipsid=e[0].value;
  528. },
  529. selectPhase(e){
  530. this.screen.clientStageName=e[0].label;
  531. this.screen.clientStage=e[0].value;
  532. },
  533. //重置
  534. reset(){
  535. this.screen={
  536. agentId:'',
  537. agentIdtext:'',
  538. visitRecord:'',
  539. record:null,
  540. cunsumerTips:'',
  541. cunsumerTipsid:'',
  542. clientStage:'',
  543. clientStageName:''
  544. }
  545. this.visitList.map(i=>{
  546. i.isShow = false
  547. })
  548. this.nextPage=1;
  549. this.recordList=[];
  550. this.screenShow=false;
  551. this.isRefresh = false;
  552. this.getMyCustom();
  553. },
  554. //筛选确认
  555. screensure(){
  556. this.nextPage=1;
  557. this.recordList=[];
  558. this.screenShow=false;
  559. this.isRefresh = false;
  560. this.getMyCustom();
  561. },
  562. goSearch(){
  563. uni.navigateTo({
  564. url: '/pages/center/consumer/consumerSearch'
  565. });
  566. },
  567. gotoFollowUp(id) {
  568. uni.navigateTo({
  569. url: `/pages/center/consumer/newFollowup/newFollowup?id=${id}`
  570. })
  571. },
  572. }
  573. }
  574. </script>
  575. <style lang="scss" scoped>
  576. .box {
  577. width: 100%;
  578. height: 100%;
  579. background: #F8F8F8;
  580. }
  581. .count {
  582. width: 100%;
  583. height: 90rpx;
  584. display: flex;
  585. align-items: center;
  586. justify-content: center;
  587. background-color: #FBE4E4;
  588. text {
  589. color: #F71616;
  590. }
  591. }
  592. .timeview{
  593. height: 80rpx;
  594. line-height: 80rpx;
  595. width: 100%;
  596. text-align: center;
  597. border-bottom: 1px solid #F8F8F8;
  598. }
  599. //时间切换的样式
  600. .boxtittab {
  601. width: 100;
  602. height: 92rpx;
  603. background: #FFFFFF;
  604. border: 1px solid #E0E0E0;
  605. display: flex;
  606. align-items: center;
  607. .tabbox {
  608. flex: 1;
  609. height: 100%;
  610. text-align: center;
  611. line-height: 92rpx;
  612. color: #666666;
  613. font-size: 28rpx;
  614. }
  615. }
  616. .search-box{
  617. width: 100%;
  618. height: 102rpx;
  619. background: #FFFFFF;
  620. display: flex;
  621. align-items: center;
  622. justify-content: center;
  623. .search{
  624. width: 94%;
  625. height: 70rpx;
  626. display: flex;
  627. align-items: center;
  628. background: #F8F8F8;
  629. border-radius: 33rpx;
  630. .search-img{
  631. width: 26rpx;
  632. height: 30rpx;
  633. margin-left: 20rpx;
  634. .search-img1{
  635. width: 100%;
  636. height: 100%;
  637. margin-top: 2rpx;
  638. }
  639. }
  640. .search-text{
  641. font-size: 28rpx;
  642. font-weight: 400;
  643. color: #999999;
  644. margin-left:10rpx;
  645. }
  646. }
  647. .search-screen{
  648. width: 40rpx;
  649. height: 40rpx;
  650. margin-left: 30rpx;
  651. .search-screen1{
  652. width: 100%;
  653. height: 100%;
  654. }
  655. }
  656. }
  657. .content{
  658. // height: 1000rpx;/
  659. overflow: hidden;
  660. border-top: 1px solid #E0E0E0;
  661. .content-tips{
  662. background: #fff;
  663. // box-sizing: border-box;
  664. margin-top: 20rpx;
  665. overflow: hidden;
  666. .content-first{
  667. padding: 19rpx 30rpx;
  668. display: flex;
  669. justify-content: space-between;
  670. box-sizing: border-box;
  671. // border-top: 1px solid #E0E0E0;
  672. font-weight: 400;
  673. color: #292929;
  674. height: 90rpx;
  675. font-size: 30rpx;
  676. line-height: 30rpx;
  677. .left{
  678. display: flex;
  679. .img{
  680. // margin-top: 19rpx;
  681. width: 52rpx;
  682. height: 52rpx;
  683. border: 1px solid #E0E0E0;
  684. border-radius: 50%;
  685. text-align: center;
  686. line-height: 50rpx;
  687. margin-right: 20rpx;
  688. }
  689. .test{
  690. margin-top: 11rpx;
  691. // margin-left: 20rpx;
  692. font-weight: 500;
  693. color: #333333;
  694. }
  695. }
  696. .right{
  697. display: flex;
  698. .point{
  699. width: 12rpx;
  700. height: 12rpx;
  701. background: #2B6EFF;
  702. border-radius: 50%;
  703. margin-right: 9rpx;
  704. margin-top: 20rpx;
  705. }
  706. .test{
  707. margin-top: 11rpx;
  708. }
  709. }
  710. }
  711. .content-sec{
  712. border-top: 1px solid #E0E0E0;
  713. padding: 0 30rpx;
  714. padding-bottom: 30rpx;
  715. // height: 270rpx;
  716. position: relative;
  717. .content-sec-lab{
  718. margin-top: 30rpx;
  719. display: flex;
  720. font-size: 30rpx;
  721. font-weight: 400;
  722. color: #666666;
  723. line-height: 46rpx;
  724. .content-sec-lab1{
  725. color: #333333;
  726. }
  727. .content-sec-tips{
  728. max-width:160rpx ;
  729. height: 46rpx;
  730. background: #F2F2F2;
  731. border-radius: 6rpx;
  732. text-align: center;
  733. line-height: 26rpx;
  734. overflow: hidden;
  735. text-overflow:ellipsis;
  736. white-space: nowrap;
  737. font-size: 26rpx;
  738. font-weight: 400;
  739. color: #333333;
  740. margin-right: 20rpx;
  741. box-sizing: border-box;
  742. padding: 10rpx 24rpx;
  743. }
  744. }
  745. .content-sec-num{
  746. position: absolute;
  747. width: 200rpx;
  748. height: 90rpx;
  749. background: #F4F8FD;
  750. border-radius: 12rpx;
  751. font-weight: 400;
  752. color: #2671E2;
  753. line-height: 45rpx;
  754. bottom: 30rpx;
  755. right: 30rpx;
  756. text-align: center;
  757. }
  758. }
  759. .content-last{
  760. display: flex;
  761. border-top: 1px solid #E0E0E0;
  762. // padding: 0 30rpx;
  763. height: 78rpx;
  764. .content-last-tab{
  765. width: 33.4%;
  766. text-align: center;
  767. font-size: 30rpx;
  768. font-weight: 400;
  769. color: #333333;
  770. line-height: 78rpx;
  771. border-right: 1px solid #E0E0E0;
  772. }
  773. }
  774. }
  775. }
  776. // 这是弹出层
  777. .screen{
  778. // box-sizing: border-box;
  779. // padding: 0 30rpx;
  780. .screen-counselor{
  781. display: flex;
  782. height: 106rpx;
  783. // padding: 40rpx 30rpx 36rpx 30rpx;
  784. padding: 0 30rpx;
  785. box-sizing: border-box;
  786. border-bottom: 1px solid #E0E0E0;
  787. .screen-text{
  788. margin: 40rpx 0 36rpx 0;
  789. font-size: 30rpx;
  790. font-weight: 400;
  791. color: #333333;
  792. line-height: 30rpx;
  793. }
  794. .screen-sel{
  795. display: flex;
  796. justify-content: space-between;
  797. width: 500rpx;
  798. margin-left: 60rpx;
  799. .screen-sel-img{
  800. margin: 40rpx 0 36rpx 0;
  801. width: 14rpx;
  802. height: 30rpx;
  803. }
  804. .screen-inp{
  805. margin-top: 20rpx;
  806. }
  807. }
  808. }
  809. .screen-record{
  810. height: 192rpx;
  811. // width: 100%;
  812. overflow: hidden;
  813. padding: 0 30rpx;
  814. box-sizing: border-box;
  815. border-bottom: 1px solid #E0E0E0;
  816. .screen-record-text{
  817. margin-top: 36rpx;
  818. font-size: 30rpx;
  819. font-weight: 400;
  820. color: #333333;
  821. line-height: 30rpx;
  822. }
  823. .screen-record-tab{
  824. margin-top: 30rpx;
  825. display: flex;
  826. // justify-content: space-around;
  827. .screen-record-chose{
  828. width: 156rpx;
  829. height: 60rpx;
  830. background: #2671E2;
  831. border-radius: 4rpx;
  832. border: 1px solid #2671E2;
  833. text-align: center;
  834. line-height: 60rpx;
  835. margin-right: 22rpx;
  836. color: #FFFFFF;
  837. }
  838. .screen-record-nochose{
  839. width: 156rpx;
  840. height: 60rpx;
  841. background: #FFFFFF;
  842. border-radius: 4rpx;
  843. border: 1px solid #C9C9C9;
  844. text-align: center;
  845. line-height: 60rpx;
  846. margin-right: 22rpx;
  847. }
  848. }
  849. }
  850. .screen-foot{
  851. width: 100%;
  852. height: 88rpx;
  853. display: flex;
  854. .screen-foot-reset{
  855. width: 50%;
  856. text-align: center;
  857. height: 88rpx;
  858. line-height: 88rpx;
  859. font-size: 30rpx;
  860. font-weight: 400;
  861. color: #666666;
  862. }
  863. .screen-foot-sure{
  864. width: 50%;
  865. text-align: center;
  866. line-height: 88rpx;
  867. height: 88rpx;
  868. font-size: 30rpx;
  869. font-weight: 400;
  870. color: #FFFFFF;
  871. background: #2671E2;
  872. }
  873. }
  874. }
  875. </style>