doctorDetails.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964
  1. <template>
  2. <view class="content">
  3. <view class="bg">
  4. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/dd7da40764af4db0ac326db271c7f1d3.png" />
  5. </view>
  6. <view class="cont">
  7. <view class="status_bar" :style="{height: statusBarHeight}"></view>
  8. <view class="docs" style="margin-top:88rpx" >
  9. <view class="tip" @click="navTo('/pages/doctor/doctorImgs?doctorId='+doctor.doctorId)">
  10. <view class="left">
  11. <view class="title">
  12. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/a58ee2a3fb674c2e8339243cb4ca1378.png"></image>
  13. <view >实名认证</view>
  14. </view>
  15. <view class="cert">
  16. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/62aeeb0579974b67863a6ab56e9562f9.png"></image>
  17. <view >资格证编号:{{doctor.certificateCode!=null?doctor.certificateCode.substr(0,4)+"****"+doctor.certificateCode.substr(doctor.certificateCode.length-4,doctor.certificateCode.length):""}}</view>
  18. </view>
  19. </view>
  20. <view class="right">
  21. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/1d519ad0467e4daea843aac745ae6b40.png"></image>
  22. </view>
  23. </view>
  24. <view class="doc-cont">
  25. <view class="doc-box">
  26. <view class="left">
  27. <image :src="doctor.avatar" mode="aspectFill"></image>
  28. </view>
  29. <view class="right">
  30. <view class="doc-name-box">
  31. <view class="doc-name">
  32. {{doctor.doctorName}}
  33. </view>
  34. <view class="doc-btns" >
  35. <view class="btn" @click="followChange()">
  36. <image v-if="isFollow" src="../../static/images/icon_strar.png"></image>
  37. <image v-if="!isFollow" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/d509e50536804703a4b7dc066b16beee.png"></image>
  38. 关注
  39. </view>
  40. <view class="btn">
  41. <image src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/f79c3b9cbefa40be8c2beb74f616eefc.png"></image>
  42. 分享
  43. <button class="contact-btn" @tap="doShare()" data-name="shareBtn" open-type="share">分享</button>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="doc-dept-box">
  48. {{doctor.position}}
  49. <view class="line"></view>
  50. {{department.deptName}}
  51. </view>
  52. <view class="doc-his-box">
  53. {{hospital.hospitalName}}
  54. </view>
  55. </view>
  56. </view>
  57. <view class="doc-desc-box">
  58. <view class="doc-desc-cont" @click="navTo('/pages/doctor/doctorInfo?doctorId='+doctor.doctorId)">
  59. <view class="desc-cont ellipsis2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{doctor.speciality}}</view>
  60. <view class="title">擅长:</view>
  61. <view class="btn">详情</view>
  62. </view>
  63. <view class="doc-desc-cont" @click="navTo('/pages/doctor/doctorInfo?doctorId='+doctor.doctorId)">
  64. <view class="desc-cont ellipsis2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{doctor.introduction}}</view>
  65. <view class="title">介绍:</view>
  66. <view class="btn">详情</view>
  67. </view>
  68. </view>
  69. </view>
  70. </view>
  71. <view class="price-box">
  72. <view class="count-box">
  73. <view class="count-item">
  74. <view class="count yellow">{{doctor.pingStar}}分</view>
  75. <view class="name">好评</view>
  76. </view>
  77. <view class="count-item">
  78. <view class="count">{{doctor.orderNumber}}</view>
  79. <view class="name">接诊量</view>
  80. </view>
  81. <view class="count-item">
  82. <view class="count">{{doctor.speed}}分钟</view>
  83. <view class="name">平均响应</view>
  84. </view>
  85. <view class="count-item">
  86. <view class="count">0</view>
  87. <view class="name">粉丝数</view>
  88. </view>
  89. </view>
  90. <view class="price-list" v-if="doctor!=null&&doctor.prices!=null&&doctor.prices.length>0">
  91. <view class="price-item" @click="doInquiry(price)" v-for="(price,index) in doctor.prices">
  92. <view class="p-left">
  93. <image v-if="price.type==1" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/645f3f298a264882b48e529342fc4074.png"></image>
  94. <image v-if="price.type==2" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/45e904a9e74f4d1da771936a4b83f015.png"></image>
  95. <view class="price-name">
  96. <view class="price">
  97. <text class="title" v-if="price.type==1">图文问诊</text>
  98. <text class="title" v-if="price.type==2">视频问诊</text>
  99. <text class="money">{{price.price.toFixed(2)}}/次</text>
  100. </view>
  101. <view class="price-desc" v-if="price.type==1">
  102. 与医生图文交流
  103. </view>
  104. <view class="price-desc" v-if="price.type==2">
  105. 与医生视频交流
  106. </view>
  107. </view>
  108. </view>
  109. <view class="p-right">
  110. <view :class="doctor.workStatus==1?'btn':'btn gray'" >
  111. 去咨询
  112. </view>
  113. </view>
  114. </view>
  115. <view class="price-item" @click="goAIConsultation()">
  116. <view class="p-left">
  117. <image src="@/static/images/AI_Doctor_image_font_icon48.png"></image>
  118. <view class="price-name">
  119. <view class="price">
  120. <text class="title">智能体咨询</text>
  121. <text class="money">24h免费问</text>
  122. </view>
  123. <view class="price-desc">
  124. 随时提问,精准秒回
  125. </view>
  126. </view>
  127. </view>
  128. <view class="p-right">
  129. <view :class="doctor.gptRoleId?'btn':'btn gray'" >
  130. 去咨询
  131. </view>
  132. </view>
  133. </view>
  134. </view>
  135. </view>
  136. <!-- <view class="his-box">
  137. <view class="title-box">
  138. <view class="title">执业医院</view>
  139. </view>
  140. <view class="his" @click="navTo('/pages/index/hospitalDetails?hospitalId='+hospital.hospitalId)">
  141. <view class="left">
  142. <view class="his-name">
  143. {{hospital.hospitalName}}
  144. </view>
  145. <view class="his-desc" v-if="hospital.hospitalType!=null">
  146. {{hospital.hospitalType}}
  147. </view>
  148. </view>
  149. <view class="right">
  150. <image src="/static/images/icon_arrow_r.png"></image>
  151. </view>
  152. </view>
  153. </view> -->
  154. <!-- <view class="desc-box">
  155. <view class="title-box">
  156. <view class="title">医生介绍</view>
  157. </view>
  158. <view class="desc" >
  159. {{doctor.introduction}}
  160. </view>
  161. </view> -->
  162. <view class="ping-box">
  163. <view class="title-box">
  164. <view class="left">
  165. <view class="title">患者评价({{pingsTotal}})</view>
  166. </view>
  167. <view class="more" @click="navTo('./doctorPingList?doctorId='+doctorId)">
  168. <view >更多</view>
  169. <image src="../../static/images/icon_arrow_r.png"></image>
  170. </view>
  171. </view>
  172. <view class="ping-list" v-if="pings.length>0">
  173. <view class="ping-item" v-for="(item) in pings">
  174. <view class="left">
  175. <image :src="item.avatar==null?'/static/images/detault_head.jpg':item.avatar"></image>
  176. </view>
  177. <view class="right">
  178. <view class="user-name-box">
  179. <view class="user-name">
  180. {{item.nickName}}
  181. </view>
  182. <view class="ping-star">
  183. <u-rate activeColor="#ffc603" count="5" readonly v-model="item.pingStar"></u-rate>
  184. </view>
  185. </view>
  186. <view class="ping-cont">
  187. {{item.pingContent}}
  188. </view>
  189. <view class="ping-time">
  190. {{item.pingTime}}
  191. </view>
  192. </view>
  193. </view>
  194. </view>
  195. </view>
  196. </view>
  197. <!-- 分享弹窗 -->
  198. <u-popup :show="showShare" @close="showShare = false" >
  199. <share-box :shareItem="shareItem" @closeShare='showShare = false' ></share-box>
  200. </u-popup>
  201. <h5-down-app-tip :pageUrl="pageUrl"/>
  202. </view>
  203. </template>
  204. <script>
  205. import {checkFollow,doFollow,getDoctorDetails,getDoctorPingList} from '@/api/doctor.js'
  206. export default {
  207. data() {
  208. return {
  209. pingsTotal:0,
  210. statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
  211. isFollow:false,
  212. doctorId:null,
  213. doctor:null,
  214. department:null,
  215. hospital:null,
  216. pings:[],
  217. showShare:false,
  218. shareItem:{ imageUrl:"",title:"",path:"",isMini:true },
  219. pageUrl: ''
  220. }
  221. },
  222. onLoad(options) {
  223. if(options.doctorId!=null){
  224. this.doctorId=options.doctorId;
  225. }
  226. else if (options.hasOwnProperty('q') && options.q) {
  227. // 通过下面这步解码,可以拿到url的值
  228. const url = decodeURIComponent(options.q)
  229. // // 对url中携带的参数提取处理
  230. const obj = this.$urlToObj(url)
  231. uni.setStorageSync('doctorId',obj.doctorId);
  232. this.doctorId=obj.doctorId;
  233. }
  234. },
  235. onShow() {
  236. this.pageUrl = '/pages/doctor/doctorDetails?doctorId='+this.doctorId;
  237. this.getDoctorDetails();
  238. this.getDoctorPingList();
  239. var that=this;
  240. if(this.$isLogin()){
  241. that.checkFollow();
  242. } else {
  243. uni.navigateTo({
  244. url: '/pages/auth/loginIndex'
  245. })
  246. }
  247. },
  248. //发送给朋友
  249. onShareAppMessage(res) {
  250. return {
  251. title: this.doctor.doctorName,
  252. path: '/pages_doctor/doctorDetails?doctorId='+this.doctorId,
  253. imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  254. }
  255. },
  256. //分享到朋友圈
  257. onShareTimeline(res) {
  258. return {
  259. title: this.doctor.doctorName,
  260. path:'/pages_doctor/doctorDetails?doctorId='+this.doctorId,
  261. imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  262. }
  263. },
  264. methods: {
  265. goback(){
  266. uni.navigateBack()
  267. },
  268. gohome(){
  269. uni.switchTab({
  270. url: '/pages/index/index'
  271. })
  272. },
  273. goAIConsultation(){
  274. if(this.$isLogin()){
  275. if(this.doctor.gptRoleId) {
  276. uni.navigateTo({
  277. url: '/pages/ai/consultation?doctorId='+this.doctorId+'&doctorName='+this.doctor.doctorName
  278. })
  279. }
  280. } else {
  281. this.$showLoginPage()
  282. }
  283. },
  284. doInquiry(price){
  285. if(this.doctor.workStatus==0){
  286. uni.showToast({
  287. icon:'none',
  288. title: "医生休息中",
  289. });
  290. return;
  291. }
  292. var that=this;
  293. if(this.$isLogin()){
  294. uni.navigateTo({
  295. url: "/pages/store/inquiryForm1?inquiryType=1&orderType="+price.type+"&doctorId="+that.doctorId
  296. })
  297. }
  298. },
  299. followChange() {
  300. if(!this.$isLogin()){
  301. this.$showLoginPage();
  302. return;
  303. }
  304. this.doFollow();
  305. },
  306. checkFollow(){
  307. var that=this;
  308. var data={doctorId:this.doctorId}
  309. checkFollow(data).then(
  310. res => {
  311. if(res.code==200){
  312. if(res.isFollow==1) {
  313. this.isFollow=true;
  314. } else {
  315. this.isFollow=false;
  316. }
  317. }
  318. else{
  319. this.isFollow=false;
  320. }
  321. },
  322. rej => {}
  323. );
  324. },
  325. doFollow(){
  326. var that=this;
  327. var data={doctorId:this.doctorId}
  328. doFollow(data).then(
  329. res => {
  330. this.isFollow=!this.isFollow;
  331. if(res.code=200){
  332. uni.showToast({
  333. title: res.msg
  334. })
  335. }
  336. },
  337. rej => {}
  338. );
  339. },
  340. getDoctorDetails() {
  341. //联网加载数据
  342. var that = this;
  343. var data = {
  344. doctorId: this.doctorId
  345. };
  346. getDoctorDetails(data).then(res => {
  347. if(res.code==200){
  348. this.doctor=res.data.doctor;
  349. this.doctor.prices=JSON.parse(this.doctor.priceJson)
  350. this.department=res.data.department;
  351. this.hospital=res.data.hospital;
  352. }else{
  353. uni.showToast({
  354. icon:'none',
  355. title: "请求失败",
  356. });
  357. }
  358. });
  359. },
  360. getDoctorPingList() {
  361. //联网加载数据
  362. var that = this;
  363. var data = {
  364. doctorId: this.doctorId,
  365. pageNum: 1,
  366. pageSize: 10
  367. };
  368. getDoctorPingList(data).then(res => {
  369. if(res.code==200){
  370. this.pings=res.data.list;
  371. this.pingsTotal=res.data.total
  372. }else{
  373. uni.showToast({
  374. icon:'none',
  375. title: "请求失败"
  376. });
  377. }
  378. });
  379. },
  380. navTo(url){
  381. uni.navigateTo({
  382. url: url
  383. })
  384. },
  385. doShare() {
  386. //#ifdef APP-PLUS
  387. this.shareItem.title= this.doctor.doctorName;
  388. this.shareItem.imageUrl=this.doctor.avatar;
  389. this.shareItem.compressImage = 1
  390. this.shareItem.isMini=true;
  391. this.shareItem.path='/pages_doctor/doctorDetails?doctorId='+this.doctorId;
  392. let cdn=uni.getStorageSync('h5Path');
  393. this.shareItem.url=cdn+'/pages/doctor/doctorDetails?doctorId='+this.doctorId;
  394. this.showShare=true;
  395. //#endif
  396. },
  397. }
  398. }
  399. </script>
  400. <style scoped lang="scss">
  401. .content{
  402. height: 100%;
  403. position: relative;
  404. .bg{
  405. width: 100%;
  406. height:500rpx;
  407. // background-color: #C39A58;
  408. // background: linear-gradient(#C39A58, #E2C99E);
  409. border-radius: 0rpx 0rpx 50rpx 50rpx;
  410. position: fixed;
  411. image{
  412. width: 100%;
  413. height:500rpx;
  414. }
  415. // z-index: 1;
  416. }
  417. .top-box{
  418. position: fixed;
  419. top: 0;
  420. left: 0;
  421. z-index: 222;
  422. .btn-box{
  423. height:88rpx;
  424. margin-left: 15rpx;
  425. display: flex;
  426. align-items: center;
  427. justify-content: flex-start;
  428. .btns{
  429. display: flex;
  430. align-items: center;
  431. justify-content: flex-start;
  432. background: rgba(255,255,255,0.4);
  433. border-radius: 44rpx;
  434. opacity: 1;
  435. .btn{
  436. display: flex;
  437. align-items: center;
  438. justify-content: center;
  439. padding: 15rpx 20rpx;
  440. image{
  441. width:32rpx;
  442. height:32rpx;
  443. }
  444. }
  445. .line{
  446. width:2rpx;
  447. height:40rpx;
  448. background: rgba(233,233,233,0.5);
  449. border-radius: 2px;
  450. opacity: 1;
  451. }
  452. }
  453. }
  454. }
  455. .cont{
  456. top:50rpx;
  457. position: relative;
  458. padding: 0rpx 20rpx;
  459. z-index: 222;
  460. width: 100%;
  461. display: flex;
  462. flex-direction: column;
  463. .docs{
  464. margin-bottom: 20rpx;
  465. padding-top: 30rpx;
  466. position: relative;
  467. .tip{
  468. z-index: 110;
  469. width: 100%;
  470. position: absolute;
  471. top:-25rpx;
  472. padding: 0rpx 26rpx;
  473. display: flex;
  474. align-items: center;
  475. justify-content: space-between;
  476. height:60rpx;
  477. background-color: #2c261f;
  478. border-radius: 15rpx 15rpx 0rpx 0rpx;
  479. .left{
  480. display: flex;
  481. align-items: center;
  482. justify-content: flex-start;
  483. .title{
  484. display: flex;
  485. align-items: center;
  486. justify-content: flex-start;
  487. color: #F0CBB1;
  488. font-size: 24rpx;
  489. font-weight: bold;
  490. image{
  491. margin-right: 5rpx;
  492. width:20rpx;
  493. height:20rpx;
  494. }
  495. }
  496. .cert{
  497. margin-left: 10rpx;
  498. display: flex;
  499. align-items: center;
  500. justify-content: flex-start;
  501. color: #F0CBB1;
  502. font-size: 24rpx;
  503. font-weight: bold;
  504. image{
  505. margin-right: 10rpx;
  506. width:20rpx;
  507. height:20rpx;
  508. }
  509. }
  510. }
  511. .right{
  512. image{
  513. width:20rpx;
  514. height:20rpx;
  515. }
  516. }
  517. }
  518. .doc-cont{
  519. z-index:111;
  520. padding: 30rpx;
  521. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  522. background-color: #fff;
  523. border-radius: 15rpx;
  524. .doc-box{
  525. display: flex;
  526. align-items: center;
  527. justify-content: flex-start;
  528. .left{
  529. width: 190upx;
  530. height: 190upx;
  531. image{
  532. box-sizing: border-box;
  533. border-radius: 50%;
  534. border:3rpx solid #FF5C03;
  535. width: 190upx;
  536. height: 190upx;
  537. }
  538. }
  539. .right{
  540. display: flex;
  541. flex-direction: column;
  542. justify-content: flex-start;
  543. margin-left: 20rpx;
  544. height:190upx;
  545. width: calc(100% - 210upx);
  546. .doc-name-box{
  547. display: flex;
  548. align-items: center;
  549. justify-content: space-between;
  550. position: relative;
  551. .doc-name{
  552. font-size: 38rpx;
  553. font-weight: bold;
  554. color: #2A2B2E;
  555. }
  556. .doc-btns{
  557. display: flex;
  558. align-items: center;
  559. justify-content: flex-end;
  560. .btn{
  561. flex-shrink: 0;
  562. border-radius: 30rpx;
  563. padding: 10rpx 20rpx;
  564. border: 1rpx solid #FF5C03;
  565. margin-left: 10rpx;
  566. display: flex;
  567. align-items: center;
  568. justify-content: center;
  569. margin-left: 10rpx;
  570. color: #FF5C03;
  571. font-size: 24rpx;
  572. font-weight: bold;
  573. position: relative;
  574. image{
  575. margin-right: 5rpx;
  576. width:24rpx;
  577. height:24rpx;
  578. }
  579. .contact-btn{
  580. display: inline-block;
  581. position: absolute;
  582. top: 0;
  583. left: 0;
  584. width: 100%;
  585. height: 100%;
  586. opacity: 0;
  587. z-index: 996;
  588. }
  589. }
  590. }
  591. }
  592. .doc-dept-box{
  593. display: flex;
  594. align-items: center;
  595. justify-content: flex-start;
  596. margin-top: 15rpx;
  597. font-size: 28upx;
  598. font-weight: bold;
  599. font-family: PingFang SC;
  600. color: #2d2b36;
  601. .line{
  602. height:25rpx;
  603. width:3rpx;
  604. background-color: #ECECEC;
  605. margin: 0rpx 10rpx;
  606. }
  607. }
  608. .doc-his-box{
  609. display: flex;
  610. align-items: center;
  611. justify-content: flex-start;
  612. margin-top: 15rpx;
  613. font-size: 28upx;
  614. font-family: PingFang SC;
  615. color: #2d2b36;
  616. }
  617. }
  618. }
  619. .doc-desc-box{
  620. .doc-desc-cont{
  621. width: 100%;
  622. display: flex;
  623. align-items: center;
  624. justify-content: flex-start;
  625. position: relative;
  626. margin-top: 15rpx;
  627. .title{
  628. font-weight: bold;
  629. position: absolute;
  630. top:0rpx;
  631. left:0rpx;
  632. font-size: 28upx;
  633. font-family: PingFang SC;
  634. color: #2A2B2E;
  635. }
  636. .desc-cont{
  637. width: 100%;
  638. font-size: 28upx;
  639. font-family: PingFang SC;
  640. color: #9a9a9c;
  641. }
  642. .btn{
  643. padding: 0 0rpx 0 15rpx;
  644. background-color: white;
  645. position: absolute;
  646. bottom: 0rpx;
  647. right:0rpx;
  648. font-size: 28upx;
  649. font-family: PingFang SC;
  650. color: #3D74F7;
  651. }
  652. }
  653. }
  654. }
  655. }
  656. .price-box{
  657. margin-bottom: 20rpx;
  658. padding: 15rpx;
  659. background: linear-gradient(180deg, #F8EADC 0%, #FAF2E7 100%);
  660. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  661. border-radius: 15rpx;
  662. .count-box{
  663. display: flex;
  664. align-items: center;
  665. justify-content: space-between;
  666. .count-item{
  667. width:25%;
  668. display: flex;
  669. flex-direction: column;
  670. align-items: center;
  671. justify-content: space-between;
  672. .count{
  673. font-size: 32upx;
  674. font-family: PingFang SC;
  675. font-weight: bold;
  676. color: #2A2B2E;
  677. }
  678. .yellow{
  679. font-size: 40rpx;
  680. color: #FF5C03;
  681. }
  682. .name{
  683. margin-top: 10rpx;
  684. font-size: 24upx;
  685. font-family: PingFang SC;
  686. font-weight: bold;
  687. color: #626468;
  688. }
  689. }
  690. }
  691. .price-list{
  692. display: flex;
  693. flex-direction: column;
  694. align-items: flex-start;
  695. justify-content: flex-start;
  696. margin-top: 15rpx;
  697. padding: 15rpx;
  698. .price-item{
  699. margin-bottom: 15rpx;
  700. padding: 20rpx;
  701. width: 100%;
  702. display: flex;
  703. align-items: center;
  704. justify-content: space-between;
  705. border-radius: 15rpx;
  706. background-color: #ffffff;
  707. .p-left{
  708. display: flex;
  709. align-items: center;
  710. justify-content: flex-start;
  711. image{
  712. width: 96rpx;
  713. height:96rpx;
  714. }
  715. .price-name{
  716. padding: 10rpx 0rpx;
  717. margin-left: 15rpx;
  718. display: flex;
  719. flex-direction: column;
  720. align-items: flex-start;
  721. justify-content: space-between;
  722. .price{
  723. display: flex;
  724. align-items: center;
  725. justify-content: flex-start;
  726. .title{
  727. font-size: 32upx;
  728. font-family: PingFang SC;
  729. font-weight: bold;
  730. color: #111111;
  731. }
  732. .money{
  733. font-size: 32upx;
  734. font-family: PingFang SC;
  735. font-weight: bold;
  736. color: #FD8005;
  737. margin-left: 10rpx;
  738. }
  739. }
  740. .price-desc{
  741. margin-top: 20rpx;
  742. font-size: 28upx;
  743. font-family: PingFang SC;
  744. color: #9a9a9c;
  745. }
  746. }
  747. }
  748. .p-right{
  749. .btn{
  750. padding: 15rpx 30rpx;
  751. background-color: #FF5C03;
  752. color: #fff;
  753. font-size: 28rpx;
  754. border-radius: 30rpx;
  755. }
  756. .gray{
  757. background-color: #9a9a9c;
  758. }
  759. }
  760. }
  761. }
  762. }
  763. .his-box{
  764. margin-bottom: 20rpx;
  765. padding: 15rpx;
  766. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  767. background-color: #fff;
  768. border-radius: 15rpx;
  769. .title-box{
  770. display: flex;
  771. flex-direction: row;
  772. align-items: center;
  773. justify-content: flex-start;
  774. .title{
  775. font-size: 32upx;
  776. font-family: PingFang SC;
  777. font-weight: bold;
  778. color: #111111;
  779. }
  780. }
  781. .his{
  782. display: flex;
  783. align-items: center;
  784. justify-content: space-between;
  785. margin-top: 15rpx;
  786. .left{
  787. display: flex;
  788. flex-direction: column;
  789. align-items: flex-start;
  790. justify-content: center;
  791. .his-name{
  792. font-size: 32upx;
  793. font-family: PingFang SC;
  794. color: #111111;
  795. }
  796. .his-desc{
  797. margin-top: 15rpx;
  798. font-size: 28upx;
  799. font-family: PingFang SC;
  800. color: #9a9a9c;
  801. }
  802. }
  803. .right{
  804. image{
  805. width:30rpx;
  806. height:30rpx;
  807. }
  808. }
  809. }
  810. }
  811. .desc-box{
  812. margin-bottom: 20rpx;
  813. padding: 15rpx;
  814. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  815. background-color: #fff;
  816. border-radius: 15rpx;
  817. .title-box{
  818. display: flex;
  819. flex-direction: row;
  820. align-items: center;
  821. justify-content: flex-start;
  822. .title{
  823. font-size: 32upx;
  824. font-family: PingFang SC;
  825. font-weight: bold;
  826. color: #111111;
  827. }
  828. }
  829. .desc{
  830. margin-top: 15rpx;
  831. font-size: 28upx;
  832. font-family: PingFang SC;
  833. color: #9a9a9c;
  834. }
  835. }
  836. .ping-box{
  837. margin-bottom: 20rpx;
  838. padding: 15rpx;
  839. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  840. background-color: #fff;
  841. border-radius: 15rpx;
  842. .title-box{
  843. display: flex;
  844. flex-direction: row;
  845. align-items: center;
  846. justify-content: space-between;
  847. .left{
  848. display: flex;
  849. align-items: center;
  850. justify-content: center;
  851. .title{
  852. font-size: 32upx;
  853. font-family: PingFang SC;
  854. font-weight: bold;
  855. color: #111111;
  856. }
  857. }
  858. .more{
  859. display: flex;
  860. align-items: center;
  861. justify-content: center;
  862. font-size: 28upx;
  863. font-family: PingFang SC;
  864. color: #9a9a9c;
  865. image{
  866. margin-left: 10rpx;
  867. width: 30rpx;
  868. height:30rpx;
  869. }
  870. }
  871. }
  872. .ping-list{
  873. display: flex;
  874. flex-direction: column;
  875. align-items: flex-start;
  876. justify-content: flex-start;
  877. margin-top: 15rpx;
  878. padding: 15rpx;
  879. .ping-item{
  880. padding: 20rpx 0rpx;
  881. border-bottom: 1rpx solid #efefef;
  882. width: 100%;
  883. display: flex;
  884. align-items: flex-start;
  885. justify-content: flex-start;
  886. &:last-child{
  887. padding-bottom: 0rpx;
  888. border-bottom: none;
  889. }
  890. .left{
  891. image{
  892. width:80rpx;
  893. height:80rpx;
  894. border-radius: 50%;
  895. }
  896. }
  897. .right{
  898. width: 100%;
  899. margin-left: 15rpx;
  900. .user-name-box{
  901. display: flex;
  902. align-items: center;
  903. justify-content: space-between;
  904. font-size: 28upx;
  905. font-family: PingFang SC;
  906. font-weight: bold;
  907. color: #111111;
  908. }
  909. .ping-cont{
  910. margin-top: 10rpx;
  911. font-size: 28upx;
  912. font-family: PingFang SC;
  913. color: #9a9a9c;
  914. }
  915. .ping-time{
  916. margin-top: 10rpx;
  917. font-size: 28upx;
  918. font-family: PingFang SC;
  919. color: #9a9a9c;
  920. }
  921. }
  922. }
  923. }
  924. }
  925. }
  926. }
  927. </style>