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.
 
 
 

803 lines
21 KiB

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