detail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695
  1. <template>
  2. <view class="detail-page white-wrap">
  3. <view>
  4. <!-- 基础信息 -->
  5. <view class="section white-wrap base-info-wrap" v-if="detail">
  6. <image :src="statusImg" mode="aspectFill" class="status-img"></image>
  7. <view class="title">
  8. <text>{{detail.CompanyName}}</text>
  9. <!-- van-tag
  10. color="#ECF5FF"
  11. text-color="#4A83F1"
  12. style="margin-bottom:0;margin-left: 10rpx;"
  13. >新签</van-tag> -->
  14. </view>
  15. <view class="base-info-list">
  16. <view>
  17. <text class="lable">合同编号:</text>
  18. <text >{{detail.ContractCode}}</text>
  19. <van-tag color="#ECF5FF" text-color="#4A83F1" style="margin-left:5px;margin-top:2px">{{detail.ContractType}}</van-tag>
  20. </view>
  21. <view style="margin-bottom:0">
  22. <text class="lable">合同期限:</text>
  23. <text>{{detail.StartDate|formatDate}}~{{detail.EndDate | formatDate}}</text>
  24. </view>
  25. <view style="padding-left:140rpx">({{detail.StartDate|formateYear(detail.EndDate)}})</view>
  26. <view>
  27. <text class="lable">合同金额:</text>
  28. <text style="color:#FE6B7C">{{detail.Price}}元</text>
  29. </view>
  30. <view>
  31. <text class="lable">合同归属:</text>
  32. <text>{{detail.ProductId===1?'FICC':'权益'}}</text>
  33. </view>
  34. <view>付款方式说明:{{detail.PayRemark}}</view>
  35. <view>付款渠道:{{detail.PayChannel}}</view>
  36. <view v-if="detail.SellerRemark">备注:{{detail.SellerRemark}}</view>
  37. <view v-if="detail && detail.Status === '已驳回'">
  38. <text class="lable" style="color:#FE6B7C">驳回理由:</text>
  39. <text style="color:#FE6B7C">{{ detail.ApprovalRemark }}</text>
  40. </view>
  41. </view>
  42. </view>
  43. <!-- 变更说明 -->
  44. <view class="section white-wrap change-info-wrap" v-if="changeDesc.length>0">
  45. <view class="title">变更说明</view>
  46. <view style="margin-bottom: 20rpx;" v-for="(item,index) in changeDesc" :key="index">{{index+1}}、{{item}}</view>
  47. </view>
  48. <!-- 服务内容 -->
  49. <view class="section white-wrap service-wrap">
  50. <view class="title">服务内容</view>
  51. <view style="margin-bottom: 30rpx;" >
  52. <view class="service-item flex" v-for="item in detail.Service" :key="item.Title">
  53. <text style="width:60%">{{item.Title}}</text>
  54. <text class="btn" @click="handlePreviewImg(item.Value)">查看服务单</text>
  55. </view>
  56. </view>
  57. <view v-if="detail.Remark" style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px;margin-bottom: 30rpx;">补充内容:{{detail.Remark}}</view>
  58. <view style="border-top: 1px dashed rgba(112, 112, 112, .21);padding-top:10px" v-if="varietyList.length>0">
  59. <view style="margin-bottom:10rpx">小套餐购买品种</view>
  60. <view class="variety-list">
  61. <view class="variety-item flex" v-for="item in varietyList" :key="item.ClassifyName">
  62. <view class="lable">{{ item.ClassifyName }}:</view>
  63. <view class="content">
  64. <van-tag color="#ECF5FF" text-color="#4A83F1" v-for="tag in item.Items"
  65. :key="tag.ChartPermissionId" custom-class="tag">{{ tag.PermissionName }}</van-tag>
  66. </view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <!-- 回签附件 -->
  72. <view class="section white-wrap contract-wrap" v-if="detail.Status==='已签回'">
  73. <view class="title">回签附件</view>
  74. <view class="contract-list">
  75. <view class="contract-item" v-for="item in checkBackFiles" :key="item.url"
  76. @click="preViewContract(item)">
  77. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  78. </view>
  79. </view>
  80. </view>
  81. <!-- 解约附件 -->
  82. <view class="section white-wrap contract-wrap" v-if="detail.Status==='已解约'">
  83. <view class="title">解约附件</view>
  84. <view class="contract-list">
  85. <view class="contract-item" v-for="item in rescindFile" :key="item.url"
  86. @click="preViewContract(item)">
  87. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  88. </view>
  89. </view>
  90. </view>
  91. <!-- 合同模块 -->
  92. <view class="section white-wrap contract-wrap" v-if="constractFiles.length !== 0&&detail.Status!='已签回'&&detail.Status!='已解约'">
  93. <view class="title">合同预览</view>
  94. <view class="contract-list">
  95. <view class="contract-item" v-for="item in constractFiles" :key="item.url"
  96. @click="preViewContract(item)">
  97. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  98. </view>
  99. </view>
  100. </view>
  101. <!-- 客户信息模块 -->
  102. <view class="section white-wrap customer-wrap">
  103. <view class="title">客户信息</view>
  104. <view class="customer-main-info">
  105. <view class="customer-info-item">
  106. <text>客户名称:</text>
  107. <text>{{detail.CompanyName}}</text>
  108. </view>
  109. <view class="customer-info-item">
  110. <text>社会信用码:</text>
  111. <text>{{detail.CreditCode}}</text>
  112. </view>
  113. <view class="customer-info-item">
  114. <text>地址:</text>
  115. <text>{{detail.Province}}{{detail.City}}{{detail.Address}}</text>
  116. </view>
  117. <view class="customer-info-item">
  118. <text>申请人:</text>
  119. <text>{{detail.SellerName}}</text>
  120. </view>
  121. </view>
  122. </view>
  123. <!-- 流程模块 -->
  124. <view class="section white-wrap process-wrap" v-if="flowNodeList">
  125. <view class="title">审批流程</view>
  126. <steps :data="flowNodeList"></steps>
  127. </view>
  128. </view>
  129. <!-- 审批按钮 -->
  130. <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Approval">
  131. <button class="pass-btn" @click="handlePass">通过</button>
  132. <button class="refuse-btn" @click="handleRefuse">驳回</button>
  133. </view>
  134. <!-- 上传回签附件 -->
  135. <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.UploadFile">
  136. <button class="pass-btn" style="width: 450rpx;" @click="handleUploadMethod('file')">{{detail.Status==='已审批'?'上传回签附件':'更新回签附件'}}</button>
  137. </view>
  138. <!-- 作废合同 -->
  139. <!-- <view class="fix-bottom-wrap btns-wrap flex" v-if="opt.Invalid">
  140. <button class="refuse-btn" style="width: 450rpx;" >作废合同</button>
  141. </view> -->
  142. <!-- 上传回签附件选择上传文件类型弹窗 -->
  143. <van-popup :show="show" @close="show=false" round>
  144. <view style="width: 50vw;text-align: center;font-size: 16px;padding: 32rpx;line-height: 80rpx;">
  145. <view @click="handleUploadMethod('img')">上传图片</view>
  146. <view @click="handleUploadMethod('file')">上传文件</view>
  147. </view>
  148. </van-popup>
  149. <!-- 上传回签附件弹窗 -->
  150. <van-popup :show="showUpload" @close="showUpload=false" position="bottom" round>
  151. <view class="uploadfile-wrap">
  152. <view style="text-align: center;font-size: 16px;font-weight: bold;">上传回签附件</view>
  153. <view class="contract-list" style="height: 30vh;">
  154. <view class="contract-item" v-for="item in files" :key="item.url"
  155. @click="preViewContract(item)">
  156. <image class="contract-img" mode="aspectFill" :src="item.img"></image>
  157. </view>
  158. </view>
  159. <button style="width: 450rpx;" @click='handleConfirmSignBack'>确定</button>
  160. </view>
  161. </van-popup>
  162. <van-dialog id="van-dialog" />
  163. </view>
  164. </template>
  165. <script>
  166. import {apiContractDetail,apiContractApproved,apiContractApprovalDetail,apiContractSignBackFiles} from '@/api/approve/contract.js'
  167. import steps from '../components/steps.vue'
  168. import {preViewFile} from '../utils/util.js'
  169. import {uploadImg,uploadFiles} from '@/utils/uploadFile.js'
  170. export default{
  171. components:{
  172. steps
  173. },
  174. filters:{
  175. formatDate(e){
  176. if(e==='0001-01-01T00:00:00Z'){
  177. return ''
  178. }else{
  179. return e.split('T')[0].replace(/-/g,'.')
  180. }
  181. },
  182. formatTime(e){
  183. if(e==='0001-01-01T00:00:00Z'){
  184. return ''
  185. }else{
  186. return e.replace(/T/g,' ').replace(/\+08:00/g,' ').replace(/-/g,'.')
  187. }
  188. },
  189. formateYear(s,e){
  190. let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
  191. let start = new Date(s);
  192. let end = new Date(e);
  193. let year = end.getFullYear() - start.getFullYear();
  194. let month = end.getMonth() - start.getMonth();
  195. let day = end.getDate() - start.getDate();
  196. if (month < 0) {
  197. year--;
  198. month = end.getMonth() + (12 - start.getMonth());
  199. }
  200. if (day < 0) {
  201. month--;
  202. let index = flag.findIndex((temp) => {
  203. return temp === start.getMonth() + 1
  204. });
  205. let monthLength;
  206. if (index <= 6) {
  207. monthLength = 31;
  208. } else if (index > 6 && index <= 10) {
  209. monthLength = 30;
  210. } else {
  211. monthLength = 28;
  212. }
  213. day = end.getDate() + (monthLength - start.getDate());
  214. }
  215. return `有效期为 ${year>0?year+'年':''}${month>0?month+'个月':''}${day>0?day+'天':''}`;
  216. }
  217. },
  218. computed:{
  219. // 处理变更说明
  220. changeDesc(){
  221. return this.detail&&this.detail.ModifyContent&&this.detail.ModifyContent.split('<br/>').filter(item=> item)
  222. },
  223. //回签附件
  224. checkBackFiles(){
  225. const reg = /\.(pdf)|\.doc|\.docx$/;
  226. return this.detail&&this.detail.CheckBackFileUrl&&this.detail.CheckBackFileUrl.split("#").map((item) => {
  227. if (reg.test(item)) {
  228. return {
  229. type: "pdf",
  230. url: item,
  231. img: require("@/pages-approve/static/pdf.png"),
  232. };
  233. } else {
  234. return {
  235. type: "img",
  236. url: item,
  237. img: item,
  238. };
  239. }
  240. });
  241. },
  242. //解约附件
  243. rescindFile(){
  244. const reg = /\.(pdf)|\.doc|\.docx$/;
  245. return this.detail&&this.detail.RescindFileUrl&&this.detail.RescindFileUrl.split("#").map((item) => {
  246. if (reg.test(item)) {
  247. return {
  248. type: "pdf",
  249. url: item,
  250. img: require("@/pages-approve/static/pdf.png"),
  251. };
  252. } else {
  253. return {
  254. type: "img",
  255. url: item,
  256. img: item,
  257. };
  258. }
  259. });
  260. },
  261. // 合同附件
  262. constractFiles(){
  263. const reg = /\.(pdf)|\.doc|\.docx$/;
  264. return this.detail&&this.detail.FileUrl&&this.detail.FileUrl.split("#").map((item) => {
  265. if (reg.test(item)) {
  266. return {
  267. type: "pdf",
  268. url: item,
  269. img: require("@/pages-approve/static/pdf.png"),
  270. };
  271. } else {
  272. return {
  273. type: "img",
  274. url: item,
  275. img: item,
  276. };
  277. }
  278. });
  279. },
  280. // 状态图标
  281. statusImg(){
  282. if(!this.detail) return
  283. if(this.detail.Status==='已审批'){
  284. return require('../static/pass-icon.png')
  285. }else if(this.detail.Status==='已签回'){
  286. return require('../static/draw-back-icon.png')
  287. }else if(this.detail.Status==='已驳回'){
  288. return require('../static/fail-icon.png')
  289. }else if(this.detail.Status==='已作废'){
  290. return require('../static/cancel-icon.png')
  291. }else if(this.detail.Status==='已撤回'){
  292. return require('../static/recall-icon.png')
  293. }else if(this.detail.Status==='处理中'){
  294. return require('../static/processing-icon.png')
  295. }else if(this.detail.Status==='已解约'){
  296. return require('../static/jieyue-icon.png')
  297. }
  298. }
  299. },
  300. data() {
  301. return {
  302. ContractApprovalId: null,//审批单id
  303. ContractApprovalRecordId:null,//审批流程单id
  304. ContractId:null,//合同id
  305. detail:null,
  306. flowNodeList:null,
  307. opt:{},
  308. show:false,
  309. showUpload:false,
  310. files:[],
  311. varietyList:[],
  312. }
  313. },
  314. onLoad(options) {
  315. this.ContractApprovalId=options.ContractApprovalId||0
  316. this.ContractApprovalRecordId=options.ContractApprovalRecordId||0
  317. this.ContractId=options.ContractId||0
  318. },
  319. onShow() {
  320. // 当合同id 不存在时(或0) 使用审批详情
  321. if(this.ContractId!=0){
  322. this.getContractDetail()
  323. }else{
  324. this.getApprovalDetail()
  325. }
  326. },
  327. onPullDownRefresh() {
  328. if(this.ContractId!=0){
  329. this.getContractDetail()
  330. }else{
  331. this.getApprovalDetail()
  332. }
  333. setTimeout(()=>{
  334. uni.stopPullDownRefresh()
  335. },1000)
  336. },
  337. methods: {
  338. //确认提交上传回签附件
  339. async handleConfirmSignBack(){
  340. let FileUrlarr=this.files.map(item=>item.url)
  341. const res=await apiContractSignBackFiles({
  342. ContractId:Number(this.detail.ContractId),
  343. FileUrl:FileUrlarr.join('#')
  344. })
  345. if(res.code===200){
  346. uni.showToast({
  347. title:'操作成功',
  348. icon:'none'
  349. })
  350. // 已审批上传签回附件更新列表
  351. if(this.detail.Status==='已审批'){
  352. uni.$emit('contractApproveListUpdate',{
  353. ContractApprovalId:this.ContractApprovalId,
  354. ContractApprovalRecordId:this.ContractApprovalRecordId,
  355. ContractId:this.ContractId
  356. })
  357. }
  358. setTimeout(()=>{
  359. this.showUpload=false
  360. this.files=[]
  361. if(this.ContractId!=0){
  362. this.getContractDetail()
  363. }else{
  364. this.getApprovalDetail()
  365. }
  366. },1000)
  367. }
  368. },
  369. // 上传回签附件文件
  370. async handleUploadMethod(type){
  371. let res=[]
  372. if(type==='img'){
  373. res=await uploadImg()
  374. }else if(type==='file'){
  375. res=await uploadFiles({type:'file'})
  376. }
  377. const reg = /\.(pdf)|\.doc|\.docx$/;
  378. if(!reg.test(res[0])){
  379. uni.showToast({
  380. title:'请上传pdf/word格式文件',
  381. icon:"none"
  382. })
  383. return
  384. }
  385. this.files=[{type:'pdf',url:res[0],img: require("@/pages-approve/static/pdf.png")}]
  386. // this.files=res.map((item) => {
  387. // if (reg.test(item)) {
  388. // return {
  389. // type: "pdf",
  390. // url: item,
  391. // img: require("@/pages-approve/static/pdf.png"),
  392. // };
  393. // } else {
  394. // return {
  395. // type: "img",
  396. // url: item,
  397. // img: item,
  398. // };
  399. // }
  400. // });
  401. this.show=false
  402. this.showUpload=true
  403. },
  404. // 审批单详情
  405. async getApprovalDetail() {
  406. const res=await apiContractApprovalDetail({
  407. ContractApprovalId:Number(this.ContractApprovalId),
  408. ContractApprovalRecordId:Number(this.ContractApprovalRecordId)
  409. })
  410. if(res.code===200){
  411. this.detail=res.data.ContractDetail
  412. this.opt=res.data.OpButton
  413. this.flowNodeList=res.data.FlowNodeList
  414. this.handleVariety(res.data.ContractDetail.Service)
  415. }
  416. },
  417. //合同详情
  418. async getContractDetail(){
  419. const res=await apiContractDetail({ContractId:Number(this.ContractId)})
  420. if(res.code===200){
  421. this.detail=res.data.ContractDetail
  422. this.opt=res.data.OpButton
  423. this.flowNodeList=res.data.FlowNodeList
  424. this.handleVariety(res.data.ContractDetail.PermissionLookList)
  425. }
  426. },
  427. // 处理小套餐选中的品种
  428. handleVariety(e){
  429. let arr=e.filter(item=>{
  430. return item.CheckList.length>0
  431. })
  432. arr.forEach(item=>{
  433. item.Items=item.Items.filter(_item=>{
  434. return item.CheckList.includes(_item.ChartPermissionId);
  435. })
  436. })
  437. this.varietyList=arr
  438. },
  439. handlePreviewImg(url){
  440. uni.previewImage({
  441. urls:[url]
  442. })
  443. },
  444. // 预览合同文件
  445. preViewContract(e) {
  446. if (e.type === "pdf") {
  447. preViewFile(e.url)
  448. } else {
  449. this.handlePreviewImg(e.url)
  450. }
  451. },
  452. //审批通过
  453. async handlePass(){
  454. const res=await apiContractApproved({ContractId:Number(this.detail.ContractId)})
  455. if(res.code===200){
  456. this.$dialog.alert({
  457. title: "处理成功",
  458. confirmButtonColor: "#5890FB",
  459. }).then(() => {
  460. // on close
  461. // 当合同id 不存在时(或0) 使用审批详情
  462. if(this.ContractId!=0){
  463. this.getContractDetail()
  464. }else{
  465. this.getApprovalDetail()
  466. }
  467. // 更新列表
  468. uni.$emit('contractApproveListUpdate',{
  469. ContractApprovalId:this.ContractApprovalId,
  470. ContractApprovalRecordId:this.ContractApprovalRecordId,
  471. ContractId:this.ContractId
  472. })
  473. });
  474. }
  475. },
  476. //审批驳回
  477. handleRefuse(){
  478. uni.$once('contractApproveReject',()=>{
  479. // 更新列表
  480. uni.$emit('contractApproveListUpdate',{
  481. ContractApprovalId:this.ContractApprovalId,
  482. ContractApprovalRecordId:this.ContractApprovalRecordId,
  483. ContractId:this.ContractId
  484. })
  485. })
  486. uni.navigateTo({
  487. url:"./reason?ContractId="+this.detail.ContractId
  488. })
  489. }
  490. },
  491. }
  492. </script>
  493. <style lang="scss">
  494. .detail-page {
  495. width: 100%;
  496. min-height: 100%;
  497. padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  498. padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  499. }
  500. .section {
  501. padding: 30rpx 34rpx;
  502. border-bottom: 14rpx solid #f5f5f5;
  503. &:last-child {
  504. margin-bottom: 0;
  505. border: none;
  506. }
  507. .title {
  508. font-size: 16px;
  509. font-weight: bold;
  510. margin: 0 0 40rpx 0;
  511. color: #333;
  512. }
  513. .lable {
  514. color: #666;
  515. flex-shrink: 0;
  516. font-size: 14px;
  517. }
  518. }
  519. .section::last-child{
  520. border: none;
  521. }
  522. .base-info-wrap {
  523. position: relative;
  524. .status-img{
  525. position: absolute;
  526. width: 222rpx;
  527. height: 222rpx;
  528. right: 0;
  529. top: 150rpx;
  530. z-index: 10;
  531. }
  532. .title {
  533. margin: 0 0 40rpx 0;
  534. &::before {
  535. content: "";
  536. display: inline-block;
  537. width: 15px;
  538. height: 17px;
  539. background-image: url("@/static/man.png");
  540. background-size: cover;
  541. background-repeat: no-repeat;
  542. margin-right: 10rpx;
  543. position: relative;
  544. top: 4rpx;
  545. }
  546. }
  547. .base-info-list {
  548. font-size: 14px;
  549. color: #000;
  550. view {
  551. margin-bottom: 10px;
  552. display: flex;
  553. }
  554. }
  555. }
  556. .contract-list {
  557. display: flex;
  558. flex-wrap: wrap;
  559. .contract-img {
  560. width: 102rpx;
  561. height: 120rpx;
  562. margin-right: 20rpx;
  563. margin-bottom: 20rpx;
  564. }
  565. }
  566. .service-wrap{
  567. color: #666;
  568. .service-item{
  569. margin-bottom: 30rpx;
  570. position: relative;
  571. justify-content: space-between;
  572. .btn{
  573. color: #3385FF;
  574. }
  575. // &::after{
  576. // content: '查看服务单';
  577. // display: inline-block;
  578. // color: #3385FF;
  579. // position: absolute;
  580. // left: 35%;
  581. // }
  582. }
  583. }
  584. .customer-main-info {
  585. padding-bottom: 40rpx;
  586. }
  587. .customer-info-item {
  588. font-size: 14px;
  589. color: #999;
  590. margin-bottom: 20rpx;
  591. }
  592. .customer-info-list {
  593. flex-wrap: wrap;
  594. padding-top: 20rpx;
  595. }
  596. .variety-list{
  597. .variety-item {
  598. padding-top: 24rpx;
  599. padding-bottom: 24rpx;
  600. border-bottom: 1px dashed rgba(112, 112, 112, 0.2);
  601. }
  602. .variety-item:first-child {
  603. padding-top: 0;
  604. }
  605. .variety-item:last-child {
  606. border-bottom: none;
  607. }
  608. .tag {
  609. margin-right: 10rpx;
  610. margin-bottom: 10rpx;
  611. }
  612. }
  613. .btns-wrap {
  614. justify-content: center;
  615. button {
  616. width: 260rpx;
  617. height: 70rpx;
  618. border-radius: 28px;
  619. border: none;
  620. margin: 0 15px;
  621. font-size: 15px;
  622. color: #fff;
  623. line-height: 70rpx;
  624. }
  625. .pass-btn {
  626. background-color: #5890fb;
  627. }
  628. .refuse-btn {
  629. background-color: #f55768;
  630. }
  631. }
  632. .uploadfile-wrap{
  633. width: 100%;
  634. height: 50vh;
  635. background-color: #FFFFFF;
  636. padding: 32rpx;
  637. button {
  638. margin-left: auto;
  639. margin-right: auto;
  640. width: 260rpx;
  641. height: 70rpx;
  642. display: block;
  643. border-radius: 28px;
  644. border: none;
  645. font-size: 15px;
  646. color: #fff;
  647. line-height: 70rpx;
  648. background-color: #5890fb;
  649. }
  650. }
  651. </style>