details.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. <template>
  2. <view class="details">
  3. <view class="zxtop">
  4. <view class="failtit">该业务申请未通过风险部审核,可完善信息后进行申诉</view>
  5. <view class="detop">
  6. <!-- 归档 归档后没有业务进度-->
  7. <image :src="gdicoimg" class="gdimg" v-if="gdflag"></image>
  8. <block v-else>
  9. <view class="speed" v-if="checkPermi(['system:schedule:list'])" @click="getSpeedFn" :style="type=='ywjd'?'z-index: 6;':''">
  10. <image :src="speedimg"></image>
  11. <view>业务进度</view>
  12. </view>
  13. </block>
  14. <view class="head">
  15. <view class="top">
  16. <view class="toptit">{{datainfo.enterpriseName}}</view>
  17. <view class="statbox" v-if="datainfo.isNew=='Y'">专精特新<image :src="start"></image></view>
  18. </view>
  19. <view class="adr">企业地址 | {{datainfo.enterpriseName}}</view>
  20. <view class="adr">申报时间 | {{datainfo.applicationTime}}</view>
  21. <view class="adr">归档时间 | {{datainfo.fileTime}}</view>
  22. </view>
  23. <view class="deta">
  24. <view class="lists">
  25. <view class="tit">申请额度</view>
  26. <view class="txt">{{datainfo.applicationAmount}}<text>/万元</text></view>
  27. </view>
  28. <view class="lists">
  29. <view class="tit">使用期限</view>
  30. <view class="txt">{{datainfo.usagePeriod}}<text>/个月</text></view>
  31. </view>
  32. <view class="lists">
  33. <view class="tit">申贷银行</view>
  34. <view class="txt">{{kaType(datainfo.applicationBank,sdyhlist)}}</view>
  35. </view>
  36. <view class="lists">
  37. <view class="tit">资金用途</view>
  38. <view class="txt">{{datainfo.purposeFunds}}</view>
  39. </view>
  40. <view class="lists">
  41. <view class="tit">还款来源</view>
  42. <view class="txt">{{datainfo.repaymentSource}}</view>
  43. </view>
  44. <view class="lists">
  45. <view class="tit">担保类型</view>
  46. <view class="txt">{{kaType(datainfo.guaranteeType,dblxlist)}}</view>
  47. </view>
  48. </view>
  49. </view>
  50. </view>
  51. <view class="main">
  52. <!-- tab -->
  53. <view class="tabs" :class="fixedflag?'tabfix':''">
  54. <view class="tab" :class="tabval==ite.val?'act':''" v-for="(ite,idx) in tabList" :key="idx" @click="getTab(ite.val)">{{ite.tit}}</view>
  55. </view>
  56. <view style="height:116rpx;" v-if="fixedflag"></view>
  57. <!-- 企业信息 -->
  58. <view class="mainb" :style="'min-height: ' + minheight + 'px;'">
  59. <block v-if="tabval==0">
  60. <aqyxx @getDown="getDown" :qyinfo="qyinfo" :datainfo="datainfo"></aqyxx>
  61. </block>
  62. <block v-if="tabval==1">
  63. <bfrxx @getDown="getDown" :datainfo="datainfo"></bfrxx>
  64. </block>
  65. <block v-if="tabval==2">
  66. <cfdbrxx @getDown="getDown" :datainfo="datainfo"></cfdbrxx>
  67. </block>
  68. <block v-if="tabval==3">
  69. <dfjxx @getDown="getDown" :datainfo="datainfo"></dfjxx>
  70. </block>
  71. <block v-if="tabval==4">
  72. <ewjcj @getDown="getDown" :datainfo="datainfo" @getEdit="getEdit"></ewjcj>
  73. </block>
  74. </view>
  75. <!-- 法人信息 -->
  76. </view>
  77. <block v-if="!gdflag">
  78. <view class="h50"></view>
  79. <view class="footbtns">
  80. <!-- 申请审核 start-->
  81. <view class="fbtns bga" @click="getShFn('sh')">审核</view>
  82. <!-- 业务审核后出具担保意向函-->
  83. <!-- <view class="fbtns bgb">上传文件</view>
  84. <view class="fbtns bga" @click="getSubmit">查看担保意向函</view> -->
  85. <!-- end -->
  86. <!-- a,b角按钮 start-->
  87. <view class="fbtns bgb" @click="getShFn('jztcsh')">尽职调查反馈</view>
  88. <view class="fbtns bga" @click="getShFn('ajssh')">a审核</view>
  89. <view class="fbtns bga" @click="getShFn('bjssh')">b审核</view>
  90. <!-- 审核后 -->
  91. <view class="fbtns bga" @click="getMoreFn('more')">更多操作</view>
  92. <!-- 未通过申诉 -->
  93. <view class="fbtns bga">申诉</view>
  94. <!-- end -->
  95. <!-- 风险部门 start-->
  96. <view class="fbtns bgb" @click="getMoreFn('wb')">外部工具平台</view>
  97. <view class="fbtns bga" @click="getMoreFn('fxmore')">更多操作</view>
  98. <!-- end -->
  99. <!-- 上会管理员 start -->
  100. <view class="fbtns bgb" @click="getMoreFn('shmore')">更多操作</view>
  101. <view class="fbtns bga" @click="getShFn('shsh')">审核</view>
  102. <!-- 上会管理员 end -->
  103. <!-- 合同签约start -->
  104. <view class="fbtns bgb" @click="getShFn('shhj')">上传附件</view>
  105. <view class="fbtns bga" @click="getMoreFn('htqy')">出具合同</view>
  106. <view class="fbtns bga" @click="getqmFn">签名</view>
  107. <!-- 合同签约end -->
  108. <!-- 风险部放款 start-->
  109. <view class="fbtns bgb" @click="getShFn('shhj')">上传附件</view>
  110. <view class="fbtns bga" @click="">出具放款合规表</view>
  111. <!-- end -->
  112. <view class="fbtns bga" @click="">放款通知书</view>
  113. <view class="fbtns bga" @click="">一键归档</view>
  114. </view>
  115. </block>
  116. <!-- 更多操作 -->
  117. <view class="bgbox" @click="getClose" v-if="moreflag"></view>
  118. <view v-if="moreflag" class="morebox">
  119. <view class="molists">
  120. <!-- 审核详情后 -->
  121. <block v-if="mtype=='more'">
  122. <view class="mcoa" @click="getShFn('shhj')">上传附件</view>
  123. <view>撤回</view>
  124. </block>
  125. <!--风险部门 start 外部工具平台 -->
  126. <block v-if="mtype=='wb'">
  127. <view >中国个人信用查询网</view>
  128. <view class="mcoa">中国执行信息公开网</view>
  129. <view>最高人民法院诉讼服务网</view>
  130. <view>国家企业信用信息公示系统</view>
  131. </block>
  132. <!-- 更多操作 -->
  133. <block v-if="mtype=='fxmore'">
  134. <view @click="getShFn('fxbmsh')">审核</view>
  135. <view class="mcoa">出具材料合规表</view>
  136. <view @click="getShFn('shhj')">上传附件</view>
  137. <view>撤回</view>
  138. </block>
  139. <!-- 风险部门 end -->
  140. <!-- 上会管理员 start -->
  141. <block v-if="mtype=='shmore'">
  142. <view>出具评审意见签批表</view>
  143. <view class="mcoa">上会纪要</view>
  144. <view @click="getShFn('shhj')">上传附件</view>
  145. </block>
  146. <!-- 上会管理员 end -->
  147. <!-- 合同签约 start -->
  148. <block v-if="mtype=='htqy'">
  149. <view>委托保证合同</view>
  150. <view class="mcoa">保证反担保合同(法人)</view>
  151. <view>保证反担保合同(自然人)</view>
  152. <view>抵押反担保合同(法人)</view>
  153. <view>抵押反担保合同(自然人)</view>
  154. </block>
  155. <!-- 合同签约 end -->
  156. </view>
  157. <view class="surbtns">确认</view>
  158. </view>
  159. <pop-up :type="type" :stepList="stepList" :stepval="stepval" @getClose="getClose" @getupSubmit="getupSubmit"></pop-up>
  160. </view>
  161. </template>
  162. <script>
  163. import config from '@/config'
  164. const baseUrl = config.baseUrl
  165. import popUp from "@/work/components/popup/popup.vue"
  166. import aqyxx from "@/work/components/business/aqyxx.vue"
  167. import bfrxx from "@/work/components/business/bfrxx.vue"
  168. import cfdbrxx from "@/work/components/business/cfdbrxx.vue"
  169. import dfjxx from "@/work/components/business/dfjxx.vue"
  170. import ewjcj from "@/work/components/business/ewjcj.vue"
  171. import {uploadmore,selectValue} from '@/utils/common.js'
  172. import {getDictionaryFn} from "@/api/mine/register.js"
  173. import {getApplicationDet,getScheduleList} from "@/api/mine/work.js"
  174. import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
  175. export default{
  176. components:{aqyxx,bfrxx,cfdbrxx,dfjxx,ewjcj,popUp},
  177. data(){
  178. return{
  179. start:require('@/work/static/images/start.png'),
  180. titimg:require('@/work/static/images/infotit.png'),
  181. speedimg:require('@/work/static/images/speed.png'),
  182. gdicoimg:require('@/work/static/images/gdico.png'),
  183. tabval:0,
  184. type:'',
  185. tabList:[{tit:"企业信息",val:0},{tit:"法人信息",val:1},{tit:"反担保人信息",val:2},{tit:"附件信息",val:3},{tit:"文件出具",val:4},{tit:"审核信息",val:5},],
  186. stepList:[
  187. {tit:"业务审核、分配",time:'2024-03-10 16:12',val:0},
  188. {tit:"担保初审",time:'2024-03-10 16:12',val:1},
  189. {tit:"尽职调查",time:'2024-03-10 16:12',val:2},
  190. {tit:"初审风险合规",time:'2024-03-10 16:12',val:3},
  191. {tit:"评审会",time:'2024-03-10 16:12',val:4},
  192. {tit:"合同签约",time:'2024-03-10 16:12',val:4},
  193. {tit:"放款合规风险审核",time:'2024-03-10 16:12',val:4},
  194. {tit:"放款通知",time:'2024-03-10 16:12',val:4},
  195. {tit:"归档",time:'2024-03-10 16:12',val:4},
  196. ],
  197. stepval:2,
  198. gdflag:false,
  199. moreflag:false,
  200. mtype:'',
  201. minheight:0,
  202. listTop:0,//距离顶部的距离
  203. fixedflag:false,
  204. dblxlist:[],
  205. sdyhlist:[],
  206. qyinfo:{},//企业信息
  207. datainfo:{
  208. "createBy": "",//
  209. "createTime": null,//
  210. "updateBy": "",//
  211. "updateTime": null,//
  212. "remark": null,//
  213. "loanApplicationId": 1,//贷款申请id
  214. "loanApplicationNumber": "RZDB202404251759453241637",//贷款申请编号
  215. "applicationAmount": 98.3,//申请额度(万元)
  216. "applicationBank": "123",//申请银行
  217. "usagePeriod": "123",//使用期限(月)
  218. "purposeFunds": "123",//资金用途
  219. "repaymentSource": "123",//还款来源
  220. "enterpriseName": "123",//企业名称
  221. 'sysUserEnterprise':{},//企业对象具体字段查看营业执照
  222. "categoryType": "123",//行业类型
  223. "isMake": "N",//是否是制造业
  224. "isNew": "N",//是否是精特新
  225. "isSmall": "N",//是否是小微企业
  226. "isDuty": "N",//是否是免税企业
  227. "companyIntroduction": "123",//公司简介
  228. "customerType": "123",//用户类型
  229. "corporationFront": "123",//法人身份证正面
  230. "corporationBack": "123",//法人身份证反面
  231. "corporationName": "123",// 法人姓名
  232. "corporationIdCard": "123",//法人身份证号
  233. "corporationPhone": "123",// 法人手机号
  234. "familyPopulation": "123",//家庭人口数
  235. "corporationJob": "123",//法人职业
  236. "isLoan": "N",//有无贷款
  237. "receivablePay": "123",//应收应付款
  238. "businessSituation": "123",//经营情况
  239. "businessEfficiency": "123",//经营效益
  240. "corporationMaritalStatus": "1",//法人婚姻状态
  241. "spouseFront": "123",//配偶身份证正面
  242. "spouseBack": "123",//配偶身份证反面
  243. "spouseName": "123",//配偶姓名
  244. "spouseIdCard": "123",//配偶身份证号
  245. "spousePhone": "123",//配偶手机号
  246. "guaranteeType": "123",//担保类型
  247. "guaranteeFront": "123",//反担保人身份证正面
  248. "guaranteeBack": "123",//反担保人身份证反面
  249. "guaranteeName": "123",//反担保人姓名
  250. "guaranteeIdCard": "123",//反担保人身份证号
  251. "guaranteePhone": "1",//反担保人手机号
  252. "guaranteeMaritalStatus": "1",//反担保人婚姻状态
  253. "guaranteeSpouseFront": "123",//反担保人配偶身份证正面
  254. "guaranteeSpouseBack": "123",//反担保人配偶身份证反面
  255. "guaranteeSpouseName": "123",//反担保人配偶姓名
  256. "guaranteeSpouseIdCard": "123",//反担保人配偶身份证号
  257. "guaranteeSpousePhone": "123",//反担保人配偶手机号
  258. "userId": 123,//申请人用户ID
  259. "idCard": "123",//申请人身份证号码
  260. "applicationTime": "2024-04-25",//申请时间
  261. "fileTime": "2024-04-25",//归档时间
  262. "loanSchedule": "123",//贷款申请进度(业务进度表查询进度列表):1:申报提交2:业务审核/分配 3:担保初审 4:尽职调查 5:初审风险合规 6:评审会 7:合同签约 8:放款合规风险审核 9:放款通知 10:归档
  263. "loanScheduleName": null,//贷款申请进度名称(中文字)
  264. "auditSchedule": "123",//审核进度1:担保初审 2:A角色审核 3:B角色审核 4:风险审核 5:尽职调查 6:上会评审
  265. "auditType": "123",//审核状态 1:待审核 2:已通过 3:未通过
  266. "loanApplicationType": "123",//贷款申请状态 1:暂存 2:正常 3:回收站 4:归档
  267. "aUserId": 123,//A角色用户ID
  268. "aUserName": 123,//A角色用户名称
  269. "bUserId": 123,//B角色用户ID
  270. "bUserName": 123,//B角色用户名称
  271. "shareholderFjList": null,//全体股东信息附件
  272. "loanApplicationFjList": null,//相关附件
  273. "basicFj": null,//基础附件
  274. "declareFj": null,//申报附件
  275. "fileFj": null,//文件出具
  276. "otherFj": null,//其他附件 key值是type类型 value值具体字段查看相关附件新增
  277. }
  278. }
  279. },
  280. onLoad(e) {
  281. this.id=e.id;
  282. this.init()
  283. this.getDetail()
  284. },
  285. mounted() {
  286. uni.getSystemInfo({
  287. success: (e) => {
  288. this.minheight = e.screenHeight- 50;
  289. }
  290. })
  291. this.getHeightFn()
  292. },
  293. onPageScroll(e) {
  294. var scrollTop = Number(e.scrollTop);
  295. var listTop=Number(this.listTop)
  296. if(scrollTop>listTop){
  297. this.fixedflag=true
  298. }else{
  299. this.fixedflag=false
  300. }
  301. },
  302. methods:{
  303. checkPermi, checkRole,
  304. kaType(ite,list){
  305. return selectValue(list, ite);
  306. },
  307. init(){
  308. // 申贷银行
  309. getDictionaryFn('shendai_bank').then(res=>{
  310. if(res.code==200){
  311. this.sdyhlist = res.data.map(v => {
  312. return {
  313. label: v.dictLabel,
  314. value: v.dictValue
  315. }
  316. })
  317. }
  318. })
  319. //担保类型
  320. getDictionaryFn('guarantee_type').then(res=>{
  321. if(res.code==200){
  322. this.dblxlist = res.data.map(v => {
  323. return {
  324. label: v.dictLabel,
  325. value: v.dictValue
  326. }
  327. })
  328. }
  329. })
  330. },
  331. getTab(val){
  332. this.tabval=val;
  333. uni.pageScrollTo({
  334. scrollTop: Number(this.listTop),
  335. duration: 0
  336. })
  337. },
  338. getClose(){
  339. this.type='';
  340. this.moreflag=false;
  341. },
  342. getupSubmit(){
  343. if(this.type=='ajssh'||this.type=='bjssh'||this.type=='fxbmsh'){
  344. this.type='confirm'
  345. }
  346. },
  347. getShFn(type){
  348. this.type=type;
  349. this.moreflag=false;
  350. },
  351. getMoreFn(type){
  352. this.mtype=type;
  353. this.moreflag=true
  354. },
  355. getSpeedFn(){
  356. if(this.type){
  357. this.type=''
  358. }else{
  359. this.type='ywjd'
  360. }
  361. },
  362. getqmFn(){
  363. this.$tab.navigateTo("/work/pages/business/sign")
  364. },
  365. getDetail(){
  366. getApplicationDet(this.id).then(res=>{
  367. if(res.code==200){
  368. this.datainfo=res.data;
  369. if(res.data.sysUserEnterprise){
  370. this.qyinfo=res.data.sysUserEnterprise
  371. }
  372. // 附件信息
  373. // this.otherFj=res.data.otherFj||[]
  374. }
  375. })
  376. },
  377. getHeightFn(){
  378. let query = uni.createSelectorQuery().in(this);
  379. //需要给黄色区域设置一个id标识,在这里是demo
  380. query.select('.zxtop').boundingClientRect(data => {
  381. this.listTop = data.height//赋值,待会要用
  382. }).exec();
  383. },
  384. getPreview(url) {
  385. var newArr=[];
  386. newArr.push(url)
  387. uni.previewImage({
  388. urls: newArr,
  389. current:0,
  390. success: function(data) {
  391. },
  392. fail: function(err) {
  393. }
  394. });
  395. },
  396. onuploadEnd(item) {
  397. var newobj={}
  398. var responseText=JSON.parse(item.responseText)
  399. newobj.name=responseText.originalFilename;
  400. newobj.url=responseText.fileName;
  401. this.filelist.push(newobj)
  402. // this.datainfo.zsyzFjList=JSON.parse(JSON.stringify(this.filelist))
  403. },
  404. getEdit(){
  405. this.type='shhj'
  406. },
  407. getDown(e){
  408. uni.showLoading({
  409. title: '加载中'
  410. });
  411. var url=baseUrl+e;
  412. uni.downloadFile({
  413. url: url,//文件的下载路径
  414. success(result) {
  415. uni.hideLoading()
  416. var filePath = result.tempFilePath;
  417. uni.openDocument({
  418. filePath: filePath,
  419. showMenu: true,
  420. success: function (res) {
  421. // console.log('打开文档成功');
  422. }
  423. });
  424. },
  425. fail(res) {uni.hideLoading()}
  426. })
  427. },
  428. }
  429. }
  430. </script>
  431. <style lang="scss" scoped>
  432. .failtit{background: #FFECEC;font-weight: 500;font-size: 26rpx;color: #FF6969;text-align: center;line-height: 36rpx;padding: 22rpx;}
  433. .zxtop{padding-bottom: 2rpx;}
  434. .detop{background: #FFFFFF;padding:0rpx 24rpx;margin-bottom: 28rpx;flex: 0 0 auto;
  435. position: relative;
  436. .head{
  437. padding: 40rpx 2rpx;border-bottom: 2rpx solid #E6E6E6;
  438. .top{display: flex;align-items: center;overflow: hidden;
  439. .toptit{font-weight: bold;font-size: 40rpx;color: #222327;}
  440. .statbox{min-width: 140rpx;height: 36rpx;background-color: rgba(255,177,50,0.3);padding: 0 14rpx;box-sizing: border-box;font-weight: bold;font-size: 22rpx;color: #FF6924;display: flex;align-items: center;flex: 0 0 auto;border-radius: 10rpx;margin-left: 34rpx;
  441. image{width: 22rpx;height: 22rpx;margin-left: 6rpx;}
  442. }
  443. }
  444. .adr{font-weight: 500;font-size: 26rpx;color: #666666;margin-top: 12rpx;}
  445. }
  446. .deta{display: flex;flex-wrap: wrap;padding: 16rpx 0 28rpx;
  447. .lists{padding:20rpx 0;width: 33.3%;display: flex;flex-direction: column;align-items: center;position: relative;
  448. &::after{width: 2rpx;height: 60rpx;background: #E6E6E6;content: '';position: absolute;right: 0;top: 50%;margin-top: -30rpx;}
  449. &:nth-of-type(3n){
  450. &::after{display: none;}
  451. }
  452. .tit{font-weight: 500;font-size: 26rpx;color: #AAAAAA;margin-bottom: 38rpx;}
  453. .txt{font-weight: bold;font-size: 30rpx;color: #222327;
  454. text{font-size: 26rpx;color: #666666;font-weight: normal;}
  455. }
  456. }
  457. }
  458. }
  459. .details{
  460. // display: flex;flex-direction: column;height: 100vh;overflow: hidden;
  461. }
  462. .main{background-color: #FFFFFF;flex: 1;display: flex;flex-direction: column;overflow: hidden;
  463. .tabs{padding: 0 6rpx 0 36rpx;display: flex;flex-wrap: nowrap;overflow: auto;flex: 0 0 auto;
  464. &.tabfix{position: fixed;left: 0;right: 0;z-index: 2;top: 0;background-color: #ffffff;border-bottom: 2rpx solid #E6E6E6;}
  465. .tab{font-weight: 500;font-size: 26rpx;color: #666666;height: 116rpx;display: flex;align-items: center;margin-right: 26rpx;flex: 0 0 auto;position: relative;
  466. &.act{color: #00A9F0;font-weight: bold;
  467. &::after{width: 100%;background: #00A9F0;position: absolute;left: 0;bottom: 0;
  468. border-radius: 2rpx;height: 4rpx;content: '';}
  469. }
  470. }
  471. }
  472. .mainb{flex: 1;overflow: auto;}
  473. }
  474. .speed{width: 96rpx;height: 140rpx;background: #FFFFFF;box-shadow: 0px 0px 14rpx 0px rgba(184,184,184,0.76);border-radius: 20rpx;
  475. display: flex;align-items: center;flex-direction: column;justify-content: center;
  476. position: absolute;right: 28rpx;top: 86rpx;z-index: 2;padding: 0 26rpx;
  477. image{width: 26rpx;height: 28rpx;margin-bottom: 8rpx;}
  478. view{font-weight: 500;font-size: 22rpx;color: #666666;}
  479. }
  480. .gdimg{width: 110rpx;height: 86rpx;position: absolute;right: 40rpx;top: 130rpx;}
  481. .footbtns{width: 100%;height: 100rpx;position: fixed;left: 0;right: 0;bottom: 0;display: flex;border-top: 2rpx solid #E6E6E6;
  482. .fbtns{flex: 1;height: 100rpx;font-weight: bold;font-size: 30rpx;display: flex;align-items: center;justify-content: center;
  483. &.bga{background: $com-cd3;color: #FFFFFF;}
  484. &.bgb{background: #FFFFFF;;color: $com-cd3;}
  485. }
  486. }
  487. .morebox{
  488. position: fixed;left: 0;right: 0;bottom: 0;z-index: 10;
  489. .molists{
  490. view{width: 100%;background: #ffffff;font-weight: 500;font-size: 30rpx;color: #222327;border-bottom: 2rpx solid #E6E6E6;min-height: 100rpx;display: flex;align-items: center;justify-content: center;padding: 10rpx;
  491. box-sizing: border-box;
  492. &.mcoa{color: #00A9F0;}
  493. }
  494. }
  495. .surbtns{
  496. width: 100%;height: 100rpx;background: #00A9F0;display: flex;align-items: center;justify-content: center;
  497. font-size: 30rpx;color: #ffffff;margin-top: 24rpx;
  498. }
  499. }
  500. </style>