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.
 
 
 

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