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.
 
 
 

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