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.

Receivingrecords.vue 17 KiB

2 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  1. <template>
  2. <view class="cenbox">
  3. <view class="screeningtop">
  4. <view class="screeningview" @click="clickscreening(1)">
  5. <view>近一周</view>
  6. <view class="viewimg">
  7. <image v-if="screeningshow1==false" src="../../../../static/images/down1.png" mode=""></image>
  8. <image v-if="screeningshow1==true" src="../../../../static/images/down2.png" mode=""></image>
  9. </view>
  10. </view>
  11. <view class="screeningview" @click="clickscreening(2)">
  12. <view>客户</view>
  13. <view class="viewimg">
  14. <image v-if="screeningshow2==false" src="../../../../static/images/down1.png" mode=""></image>
  15. <image v-if="screeningshow2==true" src="../../../../static/images/down2.png" mode=""></image>
  16. </view>
  17. </view>
  18. <view class="screeningview" @click="clickscreening(3)">
  19. <view>置业顾问</view>
  20. <view class="viewimg">
  21. <image v-if="screeningshow3==false" src="../../../../static/images/down1.png" mode=""></image>
  22. <image v-if="screeningshow3==true" src="../../../../static/images/down2.png" mode=""></image>
  23. </view>
  24. </view>
  25. <view style="border: none;" class="screeningview" @click="clickscreening(4)">
  26. <view>语义词</view>
  27. <view class="viewimg">
  28. <image v-if="screeningshow4==false" src="../../../../static/images/down1.png" mode=""></image>
  29. <image v-if="screeningshow4==true" src="../../../../static/images/down2.png" mode=""></image>
  30. </view>
  31. </view>
  32. </view>
  33. <view class="zhuti">
  34. <view v-if="tadelist.length!=0" class="cenforview" v-for="(item,index) in tadelist" :key='index' @click="toinfo(item)">
  35. <view class="cenfortop">
  36. <view class="fortopzuo">
  37. <view class="topzuoimg">
  38. <image src="../../../../static/images/userorder.png" mode=""></image>
  39. </view>
  40. </view>
  41. <view class="fortopyou">
  42. <view class="topyouview1">
  43. <view class="youview1-1">{{item.agentName}}</view>
  44. <view class="youview1-2">接待开始时间:{{item.staTime}}</view>
  45. </view>
  46. <view class="topyouview2">客户姓名:{{item.name}}</view>
  47. </view>
  48. </view>
  49. <view class="cenforbottom">
  50. <view class="forbottomview">
  51. <view class="bottomview1">录音时长 (分钟)</view>
  52. <view class="bottomview2">{{item.mm}}分钟</view>
  53. </view>
  54. <view class="forbottomview">
  55. <view class="bottomview1">需求触达次数</view>
  56. <view class="bottomview2">{{item.total}}次</view>
  57. </view>
  58. <view class="forbottomview" style="border: none;">
  59. <view class="bottomview1">接访得分</view>
  60. <view class="bottomview2" v-if="item.fraction==null">0分</view>
  61. <view class="bottomview2" v-else>{{item.fraction}}分</view>
  62. </view>
  63. </view>
  64. </view>
  65. <view v-if="tadelist.length==0" style="width: 100%;height: 100%;display: flex;align-items: center;">
  66. <view style="width: 100%;background: #FFFFFF;padding-top: 200rpx;">
  67. <view style="width: 100%;text-align: center;">
  68. <image style="width: 200rpx;height: 200rpx;" src="https://static.quhouse.com/zhikong_xcx_img/nodatalist.png" mode=""></image>
  69. </view>
  70. <view style="text-align: center;width: 100%;margin-top: 20rpx;color: #999999;">暂无数据</view>
  71. </view>
  72. </view>
  73. </view>
  74. <!-- 1 -->
  75. <view v-if="screeningshow1==true" class="call_zhezhao" @click="allcancel()"></view>
  76. <view v-if="screeningshow1==true" class="timepick">
  77. <view class="tiempickbox">
  78. <view :class="{ timeactive: activetime == 0 }" @click="activetimetab(0)">今日</view>
  79. <view :class="{ timeactive: activetime == 1 }" @click="activetimetab(1)">昨日</view>
  80. <view :class="{ timeactive: activetime == 2 }" @click="activetimetab(2)">近一周</view>
  81. <view :class="{ timeactive: activetime == 3 }" @click="activetimetab(3)">本月</view>
  82. </view>
  83. <view class="tiempickzidingyi" @click="activetimetab(5)">
  84. <text v-if="Datesicing.length==0">自定义时间:请选择</text>
  85. <text v-else>{{Datesicing}}</text>
  86. </view>
  87. </view>
  88. <!-- 2 -->
  89. <view v-if="screeningshow2==true" class="call_zhezhao" @click="allcancel()"></view>
  90. <view v-if="screeningshow2==true" class="userinput">
  91. <view class="inputdlex">
  92. <view class="flexzuo">
  93. <input class="flexinput" @confirm="searchinfo()" v-model="name" type="text" placeholder="请输入客户名" />
  94. </view>
  95. <view class="flexyou" @click="searchinfo()">搜索</view>
  96. </view>
  97. </view>
  98. <!-- 3 -->
  99. <view v-if="screeningshow3==true" class="call_zhezhao" @click="allcancel()"></view>
  100. <view v-if="screeningshow3==true" class="userinput">
  101. <view class="inputdlex">
  102. <view class="flexzuo">
  103. <input class="flexinput" @confirm="searchinfo()" v-model="agentName" type="text" placeholder="请输入顾问名" />
  104. </view>
  105. <view class="flexyou" @click="searchinfo()">搜索</view>
  106. </view>
  107. </view>
  108. <!-- 4 -->
  109. <view v-if="screeningshow4==true" class="call_zhezhao" @click="allcancel()"></view>
  110. <view v-if="screeningshow4==true" class="yuyipick">
  111. <view class="inputdlex">
  112. <!-- <view :class="{ timeactive111: keywordsId == item.keywordsId }" @click="semantictap(index)"
  113. v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view> -->
  114. <view :class="{ timeactive111: item.checked }" @click="itemChcek(index)"
  115. v-for="(item,index) in semanticlist" :key="index">{{item.name}}</view>
  116. </view>
  117. <view class="screen-foot">
  118. <view class="screen-foot-reset" @click="reset">
  119. 重置
  120. </view>
  121. <view class="screen-foot-sure" @click="screensure">
  122. 确定
  123. </view>
  124. </view>
  125. </view>
  126. <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
  127. </view>
  128. </template>
  129. <script>
  130. var app = getApp();
  131. var util = require("../../../../utils/util.js");
  132. var config = require("../../../../config");
  133. export default {
  134. data() {
  135. return {
  136. screeningshow1:false,
  137. screeningshow2:false,
  138. screeningshow3:false,
  139. screeningshow4:false,
  140. activetime:2,
  141. totalTimeShow:false,
  142. Datesicing:'',
  143. Inthemiddletime:'',
  144. starttime:'',//开始时间
  145. endoftime:'',//结束时间
  146. keywordsId:'',//选中语义词id
  147. houseId:'',//项目id
  148. semanticlist:[],//语义词集合
  149. name:'',
  150. agentName:'',
  151. pageNum:1,
  152. pageSize:10,
  153. tadelist:[],
  154. totalpage:0,
  155. keywordIds:'',
  156. type:0,
  157. customerId: '', // 点击那一项的customerId
  158. };
  159. },
  160. onLoad(options) {
  161. console.log(options)
  162. if(options.datatype==3){
  163. this.activetime=5;
  164. this.starttime=options.starttime;
  165. this.endoftime=options.endoftime;
  166. this.Datesicing=this.starttime+'至'+this.endoftime;
  167. }else{
  168. this.activetime=options.datatype;
  169. this.starttime='';
  170. this.endoftime='';
  171. this.Datesicing='';
  172. }
  173. // this.keywordsId=options.keywordsId
  174. this.keywordIds=options.keywordsId
  175. this.houseId=uni.getStorageSync('buildingID').id;
  176. this.Accesstolevel()
  177. },
  178. onReachBottom() {
  179. if (this.totalpage < this.pageNum * this.pageSize) {
  180. return uni.showToast({
  181. title: "到底了",
  182. })
  183. }
  184. this.pageNum++;
  185. this.getinit();
  186. },
  187. methods: {
  188. toinfo(item){
  189. let parames = {
  190. marketingId: this.keywordIds,
  191. customerId: item.id,
  192. type: '1'
  193. }
  194. this.$u.post("/corpus/pinWordMatching", parames).then(res => {
  195. let items = JSON.parse(res[0].transferContent)
  196. uni.setStorageSync("entrance", 1); //写入缓存
  197. uni.navigateTo({
  198. url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}&info=${JSON.stringify(items)}`
  199. })
  200. }).catch(e => {
  201. uni.setStorageSync("entrance", 1); //写入缓存
  202. uni.navigateTo({
  203. url: `/pages/center/Piabodata/Customerportrait/Receivedetailabout?customerId=${item.id}`
  204. })
  205. })
  206. },
  207. //搜索
  208. searchinfo(){
  209. this.totalpage=0;
  210. this.tadelist=[];
  211. this.pageNum=1;
  212. this.getinit()
  213. },
  214. itemChcek(index){
  215. this.semanticlist[index].checked=!this.semanticlist[index].checked
  216. this.$forceUpdate()
  217. },
  218. reset(){
  219. this.semanticlist.map(item=>{
  220. item.checked=false
  221. })
  222. this.keywordIds=''
  223. this.$forceUpdate()
  224. this.allcancel()
  225. this.totalpage=0;
  226. this.tadelist=[];
  227. this.pageNum=1;
  228. this.getinit()
  229. },
  230. screensure(){
  231. let arr=[]
  232. this.semanticlist.map(item=>{
  233. if(item.checked){
  234. arr.push(item.keywordsId)
  235. }
  236. })
  237. this.keywordIds=arr.join(',')
  238. // console.log(this.keywordIds)
  239. this.allcancel()
  240. this.totalpage=0;
  241. this.tadelist=[];
  242. this.pageNum=1;
  243. this.getinit()
  244. },
  245. //点击三级
  246. semantictap(index){
  247. this.keywordsId=this.semanticlist[index].keywordsId;
  248. this.allcancel()
  249. this.totalpage=0;
  250. this.tadelist=[];
  251. this.pageNum=1;
  252. this.getinit()
  253. },
  254. //获取列表数据
  255. getinit(){
  256. uni.showToast({
  257. title: '加载中',
  258. icon:'loading',
  259. duration: 1500
  260. });
  261. let datatype='';
  262. if(this.activetime==5){
  263. var parames={
  264. pageNum:this.pageNum,
  265. pageSize:this.pageSize,
  266. query:{
  267. staTime:this.starttime,
  268. endTime:this.endoftime,
  269. time:1,
  270. name:this.name,
  271. agentName:this.agentName,
  272. type:this.type,
  273. keywordIds:this.keywordIds,
  274. // keywordsId:this.keywordsId,
  275. projectId:this.houseId,
  276. }
  277. }
  278. }else{
  279. datatype=this.activetime;
  280. var parames={
  281. pageNum:this.pageNum,
  282. pageSize:this.pageSize,
  283. query:{
  284. dateType:Number(datatype),
  285. staTime:this.starttime,
  286. endTime:this.endoftime,
  287. time:1,
  288. name:this.name,
  289. agentName:this.agentName,
  290. type:0,
  291. keywordIds:this.keywordIds,
  292. // keywordsId:this.keywordsId,
  293. projectId:this.houseId,
  294. }
  295. }
  296. }
  297. this.$u.post("/matchKeywords/receptionRecord", parames).then(data => {
  298. this.type=1;
  299. if(data.results==null){
  300. console.log("没有")
  301. return
  302. }else{
  303. this.tadelist=[...this.tadelist, ...data.results];
  304. this.totalpage=data.totalRecord;
  305. }
  306. })
  307. },
  308. //获取三级
  309. Accesstolevel(){
  310. let datatype='';
  311. if(this.activetime==5){
  312. var parames={
  313. type:0,
  314. statDateStart:this.starttime,
  315. statDateEnd:this.endoftime,
  316. houseId:this.houseId
  317. }
  318. }else{
  319. datatype=this.activetime;
  320. var parames={
  321. type:0,
  322. dateType:Number(datatype),
  323. statDateStart:this.starttime,
  324. statDateEnd:this.endoftime,
  325. houseId:this.houseId
  326. }
  327. }
  328. this.$u.post("/matchKeywords/findKeywords", parames).then(data => {
  329. data.forEach(item=>{
  330. if(item.isInterval==0){
  331. item.name=item.name+item.unit+'-'+item.endName+item.unit
  332. }
  333. if(item.keywordsId==this.keywordIds){
  334. item.checked=true
  335. }else{
  336. item.checked=false
  337. }
  338. })
  339. this.semanticlist=data;
  340. this.getinit();
  341. })
  342. },
  343. //遮罩取消
  344. allcancel(){
  345. this.screeningshow1=false;
  346. this.screeningshow2=false;
  347. this.screeningshow3=false;
  348. this.screeningshow4=false;
  349. },
  350. //自定义时间确认
  351. totalTimeChange(e){
  352. this.Datesicing=e.startDate+'至'+e.endDate;
  353. this.starttime=e.startDate;
  354. this.endoftime=e.endDate;
  355. this.activetime=this.Inthemiddletime;
  356. this.totalTimeShow=false;
  357. this.tadelist=[]
  358. this.allcancel()
  359. this.Accesstolevel()
  360. },
  361. //时间选择
  362. activetimetab(index){
  363. if(index==5){
  364. this.Inthemiddletime=index;
  365. this.totalTimeShow=!this.totalTimeShow;
  366. }else{
  367. this.Datesicing='';
  368. this.activetime=index;
  369. this.tadelist=[]
  370. this.allcancel()
  371. this.Accesstolevel()
  372. }
  373. },
  374. //筛选弹框
  375. clickscreening(i){
  376. if(i==1){
  377. this.screeningshow1=!this.screeningshow1;
  378. this.screeningshow2=false;
  379. this.screeningshow3=false;
  380. this.screeningshow4=false;
  381. }else if(i==2){
  382. this.screeningshow2=!this.screeningshow2;
  383. this.screeningshow1=false;
  384. this.screeningshow3=false;
  385. this.screeningshow4=false;
  386. }else if(i==3){
  387. this.screeningshow3=!this.screeningshow3;
  388. this.screeningshow2=false;
  389. this.screeningshow1=false;
  390. this.screeningshow4=false;
  391. }else{
  392. this.screeningshow4=!this.screeningshow4;
  393. this.screeningshow2=false;
  394. this.screeningshow3=false;
  395. this.screeningshow1=false;
  396. }
  397. }
  398. }
  399. };
  400. </script>
  401. <style lang="scss" scoped>
  402. .timeactive111{
  403. color: #2671E2;
  404. }
  405. *{
  406. margin:0;
  407. padding:0;
  408. box-sizing:border-box;
  409. }
  410. .cenbox{
  411. width: 100%;
  412. height: 100%;
  413. background-color: #F8F8F8;
  414. display:flex;
  415. flex-direction:column;
  416. .screeningtop{
  417. width: 100%;
  418. height: 75rpx;
  419. background-color: #FFFFFF;
  420. border-bottom: 1px solid #E0E0E0;
  421. align-items: center;
  422. display: flex;
  423. align-items: center;
  424. position: relative;
  425. }
  426. .screeningview{
  427. flex: 1;
  428. height: 100%;
  429. display: flex;
  430. align-items: center;
  431. justify-content: center;
  432. border-right: 1px solid #E0E0E0;
  433. }
  434. .zhuti{
  435. flex:1;
  436. // soverflow:auto;
  437. }
  438. }
  439. .viewimg{
  440. width: 20rpx;
  441. height: 100%;
  442. line-height: 72rpx;
  443. margin-left: 10rpx;
  444. image{
  445. width: 20rpx;
  446. height: 12rpx;
  447. }
  448. }
  449. .cenforview{
  450. width: 100%;
  451. height: 275rpx;
  452. background: #FFFFFF;
  453. margin-top: 20rpx;
  454. .cenfortop{
  455. width: 100%;
  456. height: 146rpx;
  457. display: flex;
  458. // border-bottom: 1px solid #E0E0E0;
  459. .fortopzuo{
  460. width: 16%;
  461. padding-top: 30rpx;
  462. .topzuoimg{
  463. width: 60rpx;
  464. height: 60rpx;
  465. margin-left: 30rpx;
  466. border-radius: 50%;
  467. image{
  468. width: 100%;
  469. height: 100%;
  470. }
  471. }
  472. }
  473. .fortopyou{
  474. width: 84%;
  475. height: 146rpx;
  476. .topyouview1{
  477. width: 100%;
  478. margin-top: 28rpx;
  479. display: flex;
  480. .youview1-1{
  481. width: 25%;
  482. font-size: 28rpx;
  483. font-weight: 400;
  484. color: #333333;
  485. overflow: hidden;
  486. white-space:nowrap;
  487. text-overflow:ellipsis;
  488. }
  489. .youview1-2{
  490. width: 75%;
  491. font-size: 26rpx;
  492. font-weight: 400;
  493. color: #666666;
  494. }
  495. }
  496. .topyouview2{
  497. width: 100%;
  498. font-size: 28rpx;
  499. font-weight: 400;
  500. color: #333333;
  501. margin-top: 20rpx;
  502. }
  503. }
  504. }
  505. .cenforbottom{
  506. width: 100%;
  507. height: 128rpx;
  508. display: flex;
  509. align-items: center;
  510. .forbottomview{
  511. flex: 1;
  512. height: 128rpx;
  513. // border-right: 1px solid #E0E0E0;
  514. .bottomview1{
  515. width: 100%;
  516. height: 26rpx;
  517. font-size: 26rpx;
  518. font-weight: 400;
  519. color: #666666;
  520. line-height: 26rpx;
  521. text-align: center;
  522. margin-top: 24rpx;
  523. }
  524. .bottomview2{
  525. width: 100%;
  526. height: 30rpx;
  527. font-size: 30rpx;
  528. font-weight: 600;
  529. color: #333333;
  530. line-height: 30rpx;
  531. text-align: center;
  532. margin-top: 24rpx;
  533. }
  534. }
  535. }
  536. }
  537. .timepick{
  538. width: 100%;
  539. height: 210rpx;
  540. background: #FFFFFF;
  541. position: absolute;
  542. top: 74rpx;
  543. left: 0;
  544. z-index: 20;
  545. .tiempickbox{
  546. width: 94%;
  547. margin: 0 auto;
  548. height: 56rpx;
  549. display: flex;
  550. align-items: center;
  551. margin-top: 25rpx;
  552. }
  553. .tiempickbox>view:nth-of-type(1){
  554. width: 156rpx;
  555. height: 56rpx;
  556. border-radius: 4rpx;
  557. text-align: center;
  558. line-height: 56rpx;
  559. font-size: 28rpx;
  560. border: 1px solid #C9C9C9;
  561. }
  562. .tiempickbox>view:nth-of-type(2){
  563. width: 156rpx;
  564. height: 56rpx;
  565. border-radius: 4rpx;
  566. text-align: center;
  567. line-height: 56rpx;
  568. font-size: 28rpx;
  569. border: 1px solid #C9C9C9;
  570. margin-left: 28rpx;
  571. }
  572. .tiempickbox>view:nth-of-type(3){
  573. width: 156rpx;
  574. height: 56rpx;
  575. border-radius: 4rpx;
  576. text-align: center;
  577. line-height: 56rpx;
  578. font-size: 28rpx;
  579. border: 1px solid #C9C9C9;
  580. margin-left: 28rpx;
  581. }
  582. .tiempickbox>view:nth-of-type(4){
  583. width: 156rpx;
  584. height: 56rpx;
  585. border-radius: 4rpx;
  586. text-align: center;
  587. line-height: 56rpx;
  588. font-size: 28rpx;
  589. border: 1px solid #C9C9C9;
  590. margin-left: 28rpx;
  591. }
  592. .tiempickzidingyi{
  593. width: 94%;
  594. margin: 0 auto;
  595. margin-top: 28rpx;
  596. height: 60rpx;
  597. background: #FFFFFF;
  598. border-radius: 4rpx;
  599. border: 1px solid #C9C9C9;
  600. text-align: center;
  601. line-height: 60rpx;
  602. color: #666666;
  603. }
  604. }
  605. .call_zhezhao {
  606. position: fixed;
  607. width: 100%;
  608. height: 100%;
  609. top: 75rpx;
  610. left: 0rpx;
  611. opacity: 0.5;
  612. background-color: #666666;
  613. z-index: 10;
  614. }
  615. .timeactive{
  616. color: #FFFFFF;
  617. background-color: #2671E2;
  618. }
  619. .userinput{
  620. width: 100%;
  621. height: 126rpx;
  622. background: #FFFFFF;
  623. position: absolute;
  624. top: 74rpx;
  625. left: 0;
  626. z-index: 20;
  627. .inputdlex{
  628. width: 90%;
  629. margin: 0 auto;
  630. height: 56rpx;
  631. display: flex;
  632. align-items: center;
  633. margin-top: 30rpx;
  634. .flexzuo{
  635. width: 80%;
  636. .flexinput{
  637. width: 96%;
  638. height: 100%;
  639. border-radius: 20rpx;
  640. border: 1px solid #C9C9C9;
  641. padding-left: 20rpx;
  642. font-size: 24rpx;
  643. }
  644. }
  645. .flexyou{
  646. width: 20%;
  647. font-size: 28rpx;
  648. color: #2671E2;
  649. text-indent: 28rpx;
  650. }
  651. }
  652. }
  653. .yuyipick{
  654. width: 100%;
  655. min-height: 300rpx;
  656. max-height: 500rpx;
  657. background: #FFFFFF;
  658. overflow-y: auto;
  659. // padding-bottom: 20rpx;
  660. position: absolute;
  661. top: 74rpx;
  662. left: 0;
  663. z-index: 20;
  664. .inputdlex{
  665. width: 90%;
  666. margin: 0 auto;
  667. display: flex;
  668. flex-wrap: wrap;
  669. margin-top: 30rpx;
  670. }
  671. .inputdlex view{
  672. width: 50%;
  673. font-size: 26rpx;
  674. font-weight: 400;
  675. text-align: center;
  676. margin-top: 26rpx;
  677. }
  678. }
  679. .screen-foot{
  680. width: 100%;
  681. height: 88rpx;
  682. display: flex;
  683. margin-top: 20rpx;
  684. border-top: 1px solid #E0E0E0;
  685. .screen-foot-reset{
  686. width: 50%;
  687. text-align: center;
  688. height: 88rpx;
  689. line-height: 88rpx;
  690. font-size: 30rpx;
  691. font-weight: 400;
  692. color: #666666;
  693. }
  694. .screen-foot-sure{
  695. width: 50%;
  696. text-align: center;
  697. line-height: 88rpx;
  698. height: 88rpx;
  699. font-size: 30rpx;
  700. font-weight: 400;
  701. color: #FFFFFF;
  702. background: #2671E2;
  703. }
  704. }
  705. </style>