index.vue 64 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593
  1. <template>
  2. <view class="content">
  3. <!-- 背景图片 -->
  4. <!-- <image class="bg" src="../../static/images/bg_1.png" mode=""></image> -->
  5. <image class="bg"
  6. src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736955760372.png"
  7. mode=""></image>
  8. <view >
  9. <view class="top-inner">
  10. <view class="fixed-top-box" :style="{background:bgColor }">
  11. <!-- 这里是状态栏 -->
  12. <view class="status_bar" :style="{height: statusBarHeight}"></view>
  13. <view class="top-title align-center justify-start ml20">
  14. <image src="../../static/images/logo.png"
  15. class="w120 h120 "></image>
  16. <view class="name base-color" >倍力优</view>
  17. <!-- <view class="dot">•</view><view class="sub-name">七彩互联网医院</view> -->
  18. </view>
  19. <!-- 搜索框、购物车、客服 -->
  20. <view class="func-cont" >
  21. <view class="search-cont"
  22. :style="{width:userinfoa.isShow==0 && isuser==false?'633rpx':''}">
  23. <image class="icon-search" src="../../static/images/search.png" mode=""></image>
  24. <!-- <input type="text" disabled value="" placeholder="搜索商品、症状、功能主治" placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;" @click="toSearch" /> -->
  25. <input type="text" value="" :placeholder="pltoptext[0].text" v-if="theme=='beiliyou'"
  26. placeholder-style="font-size:28rpx;color:#999;font-family: PingFang SC;" @click="toSearch" />
  27. <input type="text" disabled value="" :placeholder="pltoptext[1].text" v-if="theme=='orange'"
  28. placeholder-style="font-size:28rpx;color:#999;font-family: PingFang SC;" @click="toSearch" />
  29. <input type="text" disabled value="" :placeholder="pltoptext[2].text" v-if="theme=='purple'"
  30. placeholder-style="font-size:28rpx;color:#999;font-family: PingFang SC;" @click="toSearch" />
  31. <input type="text" disabled value="" :placeholder="pltoptext[3].text" v-if="theme=='red'"
  32. placeholder-style="font-size:28rpx;color:#999;font-family: PingFang SC;" @click="toSearch" />
  33. </view>
  34. <!-- 购物车 -->
  35. <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error"
  36. v-show="userinfoa.isShow==1&&isuser==false">
  37. <view class="img-item" @click="goAuthUrl('../shopping/cart')">
  38. <image :src="`../../static/images/${theme}/shopping_car.png`" mode=""></image>
  39. </view>
  40. </uni-badge>
  41. <view class="img-item" style="position: relative;">
  42. <image :src="`../../static/images/${theme}/service_gray.png`" mode=""></image>
  43. <button class="contact-btn" open-type="contact"></button>
  44. </view>
  45. </view>
  46. <!-- <view class="tips">
  47. <view class="left"></view>
  48. <view class="right" @click="navTo('./cert')">资质证明</view>
  49. </view> -->
  50. </view>
  51. </view>
  52. <!-- 头部间距 -->
  53. <view style="padding-bottom:220rpx" >
  54. <view class="status_bar" :style="{height: statusBarHeight}"></view>
  55. </view>
  56. <!-- 轮播图 -->
  57. <view class="banner-box" >
  58. <view class="inner">
  59. <swiper
  60. class="swiper"
  61. :indicator-dots="true"
  62. :circular="true"
  63. :interval="3000"
  64. @change='indexswiper'
  65. indicator-color="rgba(138, 138, 138, 0.6)"
  66. indicator-active-color="#666666">
  67. <swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index" @click="handleAdvClick(item)">
  68. <video id="myVideo" :src='item.imageUrl'
  69. show-mute-btn='true' @fullscreenchange='changvideo'
  70. vslide-gesture-in-fullscreen='true' :muted='muted' loop='true'
  71. enable-danmu controls autoplay="true" object-fit="cover"
  72. class="videotop" v-show="item.type == 'video'"></video>
  73. <image :src="item.imageUrl" mode="scaleToFill" v-show="item.type == 'image'" ></image>
  74. </swiper-item>
  75. </swiper>
  76. </view>
  77. </view>
  78. <!-- 菜单 -->
  79. <view class="menu-content" >
  80. <view class="menu-box">
  81. <Menu :list="menus" @menuClick="menuClick" v-if="menus.length>0" style="width:100%;"></Menu>
  82. </view>
  83. </view>
  84. </view>
  85. <!-- 在线问诊、处方查询 -->
  86. <view class="online-inquiry mt20" >
  87. <view class="item " @click="navTo('/pages_index/index/doctorArticleList?cateId=4&title=5G牧场')">
  88. <image class="bg-img radius16"
  89. src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736956599556.png" mode=""></image>
  90. <view class="inner">
  91. <text class="title color" >5G牧场</text>
  92. <text class="sub-title">数字化管理牧场</text>
  93. <!-- <image src="../../static/images/doctor.png" mode=""></image> -->
  94. </view>
  95. </view>
  96. <view class="item " @click="navTo('/pages_index/index/doctorArticleList?cateId=7&title=智能生产线')">
  97. <image class="bg-img radius16" src="https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736956595007.png" mode=""></image>
  98. <view class="inner">
  99. <text class="title" style="color: #3390C5;">智能生产线</text>
  100. <text class="sub-title">高度自动化</text>
  101. <!-- <image src="../../static/images/cu_search.png" mode=""></image> -->
  102. </view>
  103. </view>
  104. </view>
  105. <view class="modules mt40" v-if="menvKey.length>0&&menvKey[0].isShow">
  106. <view class="module">
  107. <!--养生有道-->
  108. <view class="depts">
  109. <view class="title">养生有道</view>
  110. <view class="dept-box">
  111. <view @click="yangshengClick(item)" class="dept" :key="index" v-for="(item,index) in menusB" >
  112. <image class="icon" :src="item.icon"></image>
  113. <view class="title" >{{item.menuName}} </view>
  114. </view>
  115. </view>
  116. </view>
  117. <view class="doctor-articles" v-if="menvKey.length>0&&menvKey[1].isShow">
  118. <view class="title-box">
  119. <view class="title">养生讲堂</view>
  120. <view class="more" @click="navTo('/pages_index/index/doctorArticleList')" >
  121. <view class="text">更多</view>
  122. <image src="/static/images/common/arrow_right.png"></image>
  123. </view>
  124. </view>
  125. <scroll-view :scroll-x="true" style="white-space: nowrap;">
  126. <view class="article-box" >
  127. <view class="article" @click="navTo('/pages_index/index/doctorArticleDetails?articleId='+item.articleId)"
  128. v-for="(item,index) in doctocArticles" :key="index">
  129. <view class="image-box">
  130. <image mode="aspectFill" :src="item.imageUrl"></image>
  131. <view class="views">
  132. {{item.views}}人观看
  133. </view>
  134. <view class="doctor">
  135. <image mode="aspectFill" :src="item.avatar"></image>
  136. <!-- <view class="right">
  137. <view class="doc-name ellipsis">{{item.doctorName}}</view>
  138. <view class="doc-position ellipsis">{{item.position}}</view>
  139. </view> -->
  140. </view>
  141. </view>
  142. <view class="article-title-box">
  143. <view class="article-title ellipsis">{{item.title}}</view>
  144. </view>
  145. </view>
  146. </view>
  147. </scroll-view>
  148. </view>
  149. <!--养生干货-->
  150. <!-- <view class="articles">
  151. <view class="title-box">
  152. <view class="title">养生干货</view>
  153. <view class="more" @click="navTo('/pages_index/index/articleList')">
  154. <view class="text">更多</view>
  155. <image src="../../static/images/common/arrow_right.png"></image>
  156. </view>
  157. </view>
  158. <view class="article-box" v-if="articles.length>0">
  159. <view class="item" :key="index" @click="navTo('/pages_index/index/articleDetails?articleId='+item.articleId)" v-for="(item,index) in articles">
  160. <view class="left">
  161. <view class="title">
  162. {{item.title}}
  163. </view>
  164. <view class="views">
  165. 浏览量 {{item.views}}
  166. </view>
  167. </view>
  168. <view class="right">
  169. <image :src="item.imageUrl"></image>
  170. </view>
  171. </view>
  172. </view>
  173. </view> -->
  174. </view>
  175. </view>
  176. <view class="index-cont">
  177. <!-- 医生团队 -->
  178. <!-- <view class="pub-item">
  179. <view class="pub-title-box">
  180. <text class="left">医生团队</text>
  181. <view class="right" @click="navTo('/pages_doctor/doctorList')">
  182. <text class="text">全部医生</text>
  183. <image src="../../static/images/arrow_gray.png" mode=""></image>
  184. </view>
  185. </view>
  186. <view class="doc-cont">
  187. <view class="inner">
  188. <view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
  189. <view class="head-box">
  190. <image :src="item.headImg" mode="aspectFill"></image>
  191. </view>
  192. <text class="name ellipsis">{{ item.doctorName }}</text>
  193. <text class="position ellipsis">
  194. {{utils.getDictLabelName("doctorPosition",item.position)}}
  195. </text>
  196. </view>
  197. </view>
  198. </view>
  199. </view> -->
  200. <!-- <view class="pub-item">
  201. <view class="tabs">
  202. <view class="tab" @click="docTabChange(1)">
  203. <image v-if="docTab==1" class="img" src="../../static/images/tab1.png" mode=""></image>
  204. <view class="inner">
  205. <text :class="docTab == 1?'title active':'title'" >推荐医生</text>
  206. </view>
  207. </view>
  208. <view class="tab" @click="docTabChange(2)">
  209. <image v-if="docTab==2" class="img" src="../../static/images/tab2.png" mode=""></image>
  210. <view class="inner">
  211. <text :class="docTab == 2?'title active':'title'" >推荐药师</text>
  212. </view>
  213. </view>
  214. <view class="tab" @click="docTabChange(3)">
  215. <image v-if="docTab==3" class="img" src="../../static/images/tab3.png" mode=""></image>
  216. <view class="inner">
  217. <text :class="docTab == 3?'title active':'title'" >推荐营养师</text>
  218. </view>
  219. </view>
  220. </view>
  221. <view class="doc-tab-box">
  222. <view class="tab-inner" >
  223. <view
  224. v-for="(item,index) in depts"
  225. :key="index"
  226. :class="item.departmentId == deptId?'item active':'item'"
  227. @click="deptChange(item)"
  228. >
  229. <view class="text">
  230. {{ item.departmentName }}
  231. <image v-show="item.departmentId == deptId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
  232. </view>
  233. </view>
  234. </view>
  235. <image class="right-mask" src="../../static/images/mask.png" mode=""></image>
  236. </view>
  237. <view class="doc-list">
  238. <view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)"> -->
  239. <!-- 头像 -->
  240. <!-- <view class="head-box">
  241. <image :src="item.headImg" mode="aspectFill"></image>
  242. </view> -->
  243. <!-- 详细信息 -->
  244. <!-- <view class="info"> -->
  245. <!-- 姓名等 -->
  246. <!-- <view class="top">
  247. <text class="name">{{ item.doctorName }}</text>
  248. <view class="line"></view>
  249. <text class="other">{{utils.getDictLabelName("doctorPosition",item.position)}}</text>
  250. <view class="line"></view>
  251. <text class="other">{{ item.departmentName }}</text>
  252. </view> -->
  253. <!-- 单位 -->
  254. <!-- <view class="unit-box"> -->
  255. <!-- <view class="level">三甲</view> -->
  256. <!-- <view class="name">{{ item.hospitalName }}</view>
  257. </view> -->
  258. <!-- 擅长 -->
  259. <!-- <view class="expertise ellipsis2">
  260. 擅长:{{ item.doctorDesc }}
  261. </view> -->
  262. <!-- 评分 -->
  263. <!-- <view class="rate-box">
  264. <view class="star">
  265. <image src="../../static/images/star.png" mode=""></image>
  266. <text>{{ item.pings }}</text>
  267. </view>
  268. <view class="line"></view>
  269. <view class="num-box">
  270. <text class="label">接诊数</text>
  271. <text class="num">{{ item.orders }}</text>
  272. </view>
  273. <view class="line"></view>
  274. <view class="num-box">
  275. <text class="label">响应速度</text>
  276. <text class="num">{{ item.speed }}分钟</text>
  277. </view>
  278. </view> -->
  279. <!-- 价格 -->
  280. <!-- <view class="price-box">
  281. <view class="btn-item" v-for="(subitme) in item.price">
  282. <text class="label" >{{subitme.priceType==1?'图文':'语音'}}</text>
  283. <text class="num">¥{{subitme.price.toFixed(2)}}</text>
  284. </view>
  285. </view>
  286. </view>
  287. </view>
  288. <view class="bottom-title" @click="navTo('/pages_doctor/doctorList?doctorType='+docTab)">
  289. <text >{{allDoctorTitle}}</text>
  290. <image src="../../static/images/arrow3.png" mode=""></image>
  291. </view>
  292. </view>
  293. -->
  294. <!-- <view class="doc-cont">
  295. <view class="inner">
  296. <view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
  297. <view class="head-box">
  298. <image :src="item.headImg" mode="aspectFill"></image>
  299. </view>
  300. <text class="name ellipsis">{{ item.doctorName }}</text>
  301. <text class="position ellipsis">
  302. {{utils.getDictLabelName("doctorPosition",item.position)}}
  303. </text>
  304. </view>
  305. </view>
  306. </view> -->
  307. <!-- </view> -->
  308. <!-- 问诊案例 -->
  309. <!-- <view class="pub-item">
  310. <view class="pub-title-box">
  311. <text class="left">问诊案例</text>
  312. <view class="right" @click="viewAll('doctorCase')">
  313. <text class="text">全部案例</text>
  314. <image src="../../static/images/arrow_gray.png" mode=""></image>
  315. </view>
  316. </view>
  317. <view class="inner">
  318. <view class="pub-tab-box">
  319. <view class="tab-inner">
  320. <view
  321. v-for="(item,index) in orderTypes"
  322. :key="index"
  323. :class="item.id == orderType?'item cases active':'item cases'"
  324. @click="orderTypeChange(item)"
  325. >
  326. <view class="text">
  327. {{ item.name }}
  328. <image v-show="item.id == orderType" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
  329. </view>
  330. </view>
  331. </view>
  332. <image class="right-mask" src="../../static/images/mask.png" mode=""></image>
  333. </view>
  334. <view class="cases-list">
  335. <view class="item" v-for="(item,index) in doctorOrderList" :key="index">
  336. <view class="dec-text ellipsis2">{{item.title}}</view>
  337. <view class="images-box" v-if="item.imgs!=null" >
  338. <view class="img-item" v-for="(subitem,j) in utils.photosToArr(item.imgs)" @click="showImg(item.imgs)" :key="j">
  339. <image :src="subitem" mode="aspectFill" ></image>
  340. </view>
  341. </view>
  342. <view class="doc-info">
  343. <view class="head">
  344. <image :src="item.doctorHeadImg" mode="aspectFill"></image>
  345. </view>
  346. <view class="name">{{item.doctorName}}</view>
  347. <view class="line"></view>
  348. <view class="posit">
  349. {{utils.getDictLabelName("doctorPosition",item.doctorPosition)}}
  350. </view>
  351. <view class="line"></view>
  352. <view class="address">{{item.hospitalName}}</view>
  353. </view>
  354. <view class="answer-box">
  355. <text class="text-inner" v-if="item.orderType == '1' ">{{item.replyContent}}</text>
  356. <view class="voice-inner" v-if="item.orderType == '2'">
  357. <free-audio
  358. startPic='/static/images/play.png'
  359. endPic='/static/images/pause.png'
  360. activeColor="#018C39"
  361. :audioId="'audio'+index"
  362. :url='item.replyAudioUrl'
  363. ></free-audio>
  364. </view>
  365. </view>
  366. <view class="read-box">
  367. <image src="../../static/images/eye.png" mode=""></image>
  368. <text class="text">{{item.views}}人看过</text>
  369. </view>
  370. </view>
  371. </view>
  372. </view>
  373. </view> -->
  374. <!-- 热门榜单 -->
  375. <view v-show="menvKey.length>0&&menvKey[2].isShow">
  376. <NewProduct :detail="newProductList" />
  377. <HotProduct :detail="hotProductList" />
  378. </view>
  379. <!-- 健康百科 -->
  380. <view class="pub-item" style="margin-top: 20rpx;" v-if="menvKey.length>0&&menvKey[3].isShow">
  381. <view class="pub-title-box">
  382. <text class="left">健康百科</text>
  383. <view class="right" @click="navTo('../healthy/index')">
  384. <text class="text">更多</text>
  385. <image src="../../static/images/common/arrow_right.png" mode=""></image>
  386. </view>
  387. </view>
  388. <view class="inner">
  389. <view class="pub-tab-box">
  390. <view class="tab-inner">
  391. <view
  392. v-for="(item,index) in articleCateList"
  393. :key="index"
  394. :class="item.cateId == cateId?'item active':'item'"
  395. @click="articleCateChange(item)">
  396. <view class="text">
  397. {{ item.cateName }}
  398. <image v-show="item.cateId == cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
  399. </view>
  400. </view>
  401. </view>
  402. <image class="right-mask" src="../../static/images/mask.png" mode=""></image>
  403. </view>
  404. <view class="know-list">
  405. <view class="item" v-for="(item,index) in articleList" :key="index" @click="showArticle(item)">
  406. <view class="left">
  407. <view class="title ellipsis2">{{ item.title }}</view>
  408. <view class="info-box">
  409. <view class="readers">
  410. <!-- <view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
  411. <view class="head" v-for="(subitem,j) in item.viewsList" :key="j" v-if="subitem!=null" >
  412. <image :src="subitem.avatar==null?'/static/images/detault_head.jpg':subitem.avatar" mode=""></image>
  413. </view>
  414. </view> -->
  415. <view class="readings">
  416. <image class="eye" src="../../static/images/eye.png" mode=""></image>
  417. <text class="num">{{item.views}}人阅读</text>
  418. </view>
  419. </view>
  420. <view class="time">{{item.publishTime}}</view>
  421. </view>
  422. </view>
  423. <view class="right">
  424. <image :src="item.imageUrl" mode="aspectFill"></image>
  425. </view>
  426. </view>
  427. </view>
  428. </view>
  429. </view>
  430. <!-- 精选商品 -->
  431. <TuiProduct ref="tuiProduct" />
  432. <!-- <view class="feat-title">
  433. <image src="../../static/images/tui.png" mode=""></image>
  434. <text>精选商品</text>
  435. </view>
  436. <view class="drug-list">
  437. <view class="item" v-for="(item,index) in tuiProductList" :key="index" @click="showProduct(item)">
  438. <view class="img-box">
  439. <image :src="item.image" mode="aspectFit"></image>
  440. </view>
  441. <view class="info-box">
  442. <view class="title ellipsis2">{{ item.productName }}</view>
  443. <view class="price-box">
  444. <view class="now">
  445. <text class="unit">¥</text>
  446. <text class="num">{{item.price.toFixed(2)}}</text>
  447. </view>
  448. <view class="old">¥{{item.otPrice.toFixed(2)}}</view>
  449. </view>
  450. </view>
  451. </view>
  452. </view> -->
  453. </view>
  454. <!-- 限时消息 -->
  455. <!-- <view class="message-box" >
  456. <view class="left">
  457. <image src="../../static/images/close24.png" mode="" @click="closeMsg"></image>
  458. <view class="text ellipsis">关注公众号了解更新</view>
  459. </view>
  460. <view class="btn">查看</view>
  461. </view> -->
  462. <!-- #ifdef MP-WEIXIN -->
  463. <view class="official-account" >
  464. <official-account @load="bindload" @error="binderror"></official-account>
  465. </view>
  466. <!-- #endif -->
  467. <view class="popup-box" v-if="activityShow">
  468. <view class="info-mask" @tap="closeActivity()" ></view>
  469. <view class="info-form" >
  470. <image :src="activity.logoUrl" @tap="showActivity()" />
  471. </view>
  472. </view>
  473. <!-- <tabbar :actindex="0"></tabbar> -->
  474. <z-modal :show="tuiModalControl" placeholderText="请输入邀请码" :btnGroup="btnGroup" :contentType="2" titleText="填写邀请码" @cancle="cancleTui" @sure="submitTui" ></z-modal>
  475. </view>
  476. </template>
  477. <script>
  478. import zModal from '@/components/z-modal/z-modal.vue'
  479. import {getStoreActivity} from '@/api/activity.js'
  480. import {getDepartmentList} from '@/api/doctorOrder.js'
  481. import {getMenu,getCanvas,getIndexData,getTuiDoctor
  482. ,getTuiArticle,getTuiDoctorOrder,getCartCount,getMenuB,getpro} from '@/api/index'
  483. import {getDoctorArticleList} from '@/api/doctorArticle.js'
  484. import {getArticleList} from '@/api/article.js'
  485. import {getStoreConfig} from '@/api/common'
  486. import tabBg from "@/static/images/tab_bg.png"
  487. import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
  488. import Menu from '@/components/Menu.vue'
  489. import HotProduct from './components/HotProduct.vue'
  490. import NewProduct from './components/NewProduct.vue'
  491. import TuiProduct from '@/components/tuiProduct.vue'
  492. import {getUserInfo,bindPromoter} from '@/api/user'
  493. import tabbar from '../../components/tabbar/tabbar.vue'
  494. export default {
  495. components: {zModal,freeAudio,Menu,HotProduct,NewProduct,TuiProduct,tabbar},
  496. data() {
  497. return {
  498. theme:'beiliyou',
  499. pltoptext:[{
  500. text:'搜索健康食品、乳制品等'
  501. },{
  502. text:'搜索商品、症状、功能主治'
  503. },{
  504. text:'搜索商品、症状、功能主治2'
  505. },{
  506. text:'搜索商品、症状、功能主治3'
  507. }],
  508. btnGroup: [{
  509. text: '取消',
  510. color: '#FFFFFF',
  511. bgColor: '#999999',
  512. width: '150rpx',
  513. height: '80rpx',
  514. shape: 'fillet',
  515. eventName: 'cancle'
  516. },{
  517. text: '确定',
  518. color: '#FFFFFF',
  519. // bgColor: '#018C39',
  520. bgColor: this.$store.state.theme.currentMoban,
  521. width: '150rpx',
  522. height: '80rpx',
  523. shape: 'fillet',
  524. eventName: 'sure'
  525. }],
  526. tuiModalControl:false,
  527. activity:null,
  528. muted:true,
  529. activityShow:false,
  530. newProductList: [],
  531. hotProductList: [],
  532. tuiProductList:[],
  533. menus:[],
  534. canvas:[],
  535. allDoctorTitle:"全部医生",
  536. topLen:0,
  537. deptId:0,
  538. depts:[],
  539. docTab:1,
  540. top:0,
  541. cartCount:0,
  542. doctorOrderList:[],
  543. orderType:0,
  544. cateId:null,
  545. articleList:[],
  546. advList:[],
  547. doctorList:[],
  548. articleCateList:[],
  549. doctocArticles:[],//养生讲堂
  550. articles:[],//养生干货
  551. // 状态栏的高度
  552. statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
  553. tabBg: tabBg, // tab切换背景
  554. // 问诊案例类型
  555. orderTypes: [{name:'全部',id:0,},{name:'图文',id:1,},{name:'语音',id:2,}],
  556. // 限时消息是否显示
  557. messageShow: true,
  558. menusB:[],
  559. yangshengs:[
  560. {id:"1",title:"药膳食疗",page:"/pages_index/index/medicatedFoodList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/3cfbd47911cf4753aa9497eac500728d.png"},
  561. {id:"2",title:"经络穴位",page:"/pages_index/index/vesselList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e93536a9dc1a4f8ca09545097b12fdea.png"},
  562. {id:"3",title:"问答专区",page:"/pages_index/index/questionsList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e896972bd56f4e358188af36f2c5af42.png"},
  563. {id:"4",title:"疾病",page:"/pages_index/index/diseaseList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/d6f1851cccae414b8baf2ba07782f91b.png"},
  564. {id:"5",title:"中药图解",page:"/pages_index/index/chineseMedicineList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/ff43572d0d004285b5a3b0ef2663c471.png"},
  565. {id:"6",title:"名方今用",page:"/pages_index/index/famousPrescribeList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/45db770e58c34963b0d2ba24a958b617.png"},
  566. {id:"7",title:"康复医案",page:"/pages_index/index/doctorArticleList",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/e793942797b24035b51f94d894bdfa0b.png"},
  567. // {id:"8",title:"更多",page:"",icon:"https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/3ee6160289914ee4a8126573fe4dc0ae.png"}
  568. ],
  569. userinfoa:[],
  570. isuser:false,
  571. menvKey:{},
  572. }
  573. this.getStoreActivity();
  574. },
  575. onLoad(option) {
  576. uni.$on('loginRefresh', () => {
  577. this.UserInfo = true
  578. this.getUserInfo()
  579. })
  580. if(option.userCode!=null){
  581. uni.setStorageSync('userCode',option.userCode);
  582. if(this.utils.checkLoginState()){
  583. this.getUserInfos();
  584. }
  585. }
  586. if (option.hasOwnProperty('q') && option.q) {
  587. // 通过下面这步解码,可以拿到url的值
  588. const url = decodeURIComponent(option.q)
  589. this.url=url;
  590. // // 对url中携带的参数提取处理
  591. const obj = this.utils.urlToObj(url)
  592. uni.setStorageSync('userCode',obj.userCode);
  593. if(this.utils.checkLoginState()){
  594. this.getUserInfos();
  595. }
  596. }
  597. this.getStoreActivity()
  598. },
  599. // 暂停所有音频(一般用于页面切换时停止正在播放的音频)
  600. onUnload() { //普通页面在 onUnload 生命周期中执行
  601. uni.$emit('stop')
  602. },
  603. onHide() { //tabBar页面在onHide生命周期中执行
  604. uni.$emit('stop')
  605. },
  606. onPageScroll(e) {
  607. //console.log(e)
  608. this.top=e.scrollTop;
  609. },
  610. mounted() {
  611. //this.getDepartmentList();
  612. },
  613. onShareAppMessage(res) {
  614. return {
  615. title: '倍力优-您的专属健康解决方案',
  616. path: `/pages/common/launch`,
  617. imageUrl: 'https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736944490230.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  618. }
  619. },
  620. onReachBottom() {
  621. console.log("onReachBottom")
  622. this.$refs.tuiProduct.getTuiProducts();
  623. },
  624. //分享到朋友圈
  625. onShareTimeline(res) {
  626. return {
  627. title: '倍力优-您的专属健康解决方案',
  628. query:'',//页面参数
  629. imageUrl: 'https://beiliyo-2025.obs.cn-north-4.myhuaweicloud.com/fs/20250115/1736944490230.png' //分享图标,路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
  630. }
  631. },
  632. computed: {
  633. // 计算属性的 getter
  634. bgColor: function() {
  635. var top=this.top/30;
  636. let baseRgba='255,255,255'
  637. return `rgba(${baseRgba}, ` + top + ')';
  638. },
  639. },
  640. onShow() {
  641. this.getMenu();
  642. this.getMenuB()
  643. this.getIndexData()
  644. //this.getTuiDoctorOrder();
  645. // console.log(uni.getStorageSync('isLocation'))
  646. // if(uni.getStorageSync('isLocation')==""){
  647. // this.getLocation();
  648. // }
  649. if(uni.getStorageSync('AppToken')){
  650. this.getUserInfos()
  651. }else{
  652. this.isuser=true
  653. }
  654. if(this.utils.checkLoginState()){
  655. this.getCartCount();
  656. }
  657. this.getStoreConfig();
  658. //this.getTuiDoctor()
  659. this.getCanvas();
  660. this.getDoctorArticleList();
  661. this.getArticleList();
  662. this.getshowmanv()
  663. },
  664. methods: {
  665. getshowmanv(){
  666. const data={
  667. key:"store.appShow"
  668. }
  669. getpro(data).then(res=>{
  670. this.menvKey=JSON.parse(res.data)
  671. console.log('排序',this.menvKey)
  672. })
  673. },
  674. changvideo(e){
  675. if(e.target.fullScreen==true){
  676. this.muted=false
  677. }else{
  678. this.muted=true
  679. }
  680. e.target.fullScreen
  681. console.log(e.target.fullScreen)
  682. },
  683. indexswiper(e){
  684. console.log(e)
  685. },
  686. getUserInfos(){
  687. getUserInfo().then(res => {
  688. if(res.code==200){
  689. if(res.user!=null){
  690. // if(res.user.isPromoter==null||res.user.isPromoter==0){
  691. // this.tuiModalControl=true
  692. // }
  693. this.userinfoa=res.user
  694. console.log(this.userinfoa.isShow,78787)
  695. }
  696. }else{
  697. uni.showToast({
  698. icon:'none',
  699. title: "请求失败",
  700. });
  701. }
  702. },
  703. rej => {}
  704. );
  705. },
  706. cancleTui(e){
  707. this.tuiModalControl=false
  708. },
  709. submitTui(e){
  710. console.log(e)
  711. if(e.inputText==null||e.inputText==""){
  712. uni.showToast({
  713. icon:'none',
  714. title: "请输入邀请码",
  715. });
  716. return;
  717. }
  718. var data={userCode:e.inputText};
  719. bindPromoter(data).then(
  720. res => {
  721. if(res.code==200){
  722. uni.showToast({
  723. icon:'none',
  724. title: res.msg,
  725. });
  726. this.tuiModalControl=false
  727. }else{
  728. uni.showToast({
  729. icon:'none',
  730. title: res.msg,
  731. });
  732. }
  733. },
  734. rej => {}
  735. );
  736. },
  737. bindload:function(detail){
  738. },
  739. binderror:function(detail){
  740. },
  741. closeActivity(){
  742. this.activityShow=false;
  743. // uni.setStorageSync(this.activity.activityId,null);
  744. },
  745. getStoreActivity() {
  746. let data = { }
  747. getStoreActivity(data).then(res => {
  748. this.activity=res.activity;
  749. if(this.activity!=null){
  750. // if(uni.getStorageSync(this.activity.activityId)!=null)
  751. // {
  752. // uni.setStorageSync(this.activity.activityId,1);
  753. // this.activityShow=true;
  754. // }
  755. // else{
  756. // this.activityShow=false;
  757. // }
  758. this.activityShow=true;
  759. }
  760. else{
  761. this.activityShow=false;
  762. }
  763. })
  764. },
  765. showActivity(){
  766. this.activityShow=false;
  767. uni.navigateTo({
  768. url: '/pages_shopping/shopping/activityDetails?activityId='+this.activity.activityId
  769. })
  770. },
  771. menuClick(item){
  772. if(item.linkType==1){
  773. if(item.linkUrl=="/pages/shopping/index"){
  774. uni.switchTab({
  775. url: item.linkUrl
  776. })
  777. }
  778. else if(item.linkUrl=="/pages/healthy/index"){
  779. uni.switchTab({
  780. url: item.linkUrl
  781. })
  782. }
  783. else{
  784. uni.navigateTo({
  785. url: item.linkUrl
  786. })
  787. }
  788. }
  789. else if(item.linkType==0){
  790. uni.showToast({
  791. icon:'none',
  792. title: "开发中...",
  793. });
  794. }
  795. },
  796. goDev(){
  797. uni.showToast({
  798. icon:'none',
  799. title: "开发中...",
  800. });
  801. },
  802. handleAdvClick(item){
  803. console.log(item);
  804. if(item.showType==1){
  805. uni.setStorageSync('url',item.advUrl);
  806. uni.navigateTo({
  807. url:"h5"
  808. })
  809. }
  810. else if(item.showType==2){
  811. uni.navigateTo({
  812. url:item.advUrl
  813. })
  814. }
  815. else if(item.showType==3){
  816. uni.setStorageSync('content',item.content);
  817. uni.navigateTo({
  818. url:"content"
  819. })
  820. }
  821. },
  822. deptChange(item){
  823. this.deptId=item.departmentId;
  824. this.getTuiDoctor();
  825. },
  826. getMenu(){
  827. getMenu().then(res => {
  828. console.log(res)
  829. if(res.code==200){
  830. this.menus= res.data
  831. }else{
  832. }
  833. });
  834. },
  835. getMenuB(){
  836. getMenuB().then(res => {
  837. console.log('标题2',res)
  838. if(res.code==200){
  839. this.menusB= res.data
  840. }else{
  841. }
  842. });
  843. },
  844. getCanvas(){
  845. getCanvas().then(res => {
  846. if(res.code==200){
  847. console.log(res.data)
  848. this.canvas= JSON.parse(res.data.json)
  849. }
  850. });
  851. },
  852. getDepartmentList(){
  853. this.depts=[];
  854. getDepartmentList().then(res => {
  855. if(res.code==200){
  856. var allDept={departmentId:0,departmentName:"全部"}
  857. this.depts.push(allDept);
  858. this.depts=this.depts.concat(res.data);
  859. }else{
  860. uni.showToast({
  861. icon:'none',
  862. title: "请求失败",
  863. });
  864. }
  865. });
  866. },
  867. getTuiDoctor(){
  868. let data = {departmentId:this.deptId,doctorType:this.docTab};
  869. getTuiDoctor(data).then(
  870. res => {
  871. if(res.code==200){
  872. this.doctorList=res.data;
  873. }else{
  874. uni.showToast({
  875. icon:'none',
  876. title: "请求失败",
  877. });
  878. }
  879. },
  880. rej => {}
  881. );
  882. },
  883. docTabChange(val){
  884. if(val==1){
  885. this.allDoctorTitle="全部医师"
  886. }
  887. if(val==2){
  888. this.allDoctorTitle="全部药师"
  889. }
  890. if(val==3){
  891. this.allDoctorTitle="全部营养师"
  892. }
  893. this.docTab=val;
  894. this.getTuiDoctor();
  895. },
  896. showImg(urls) {
  897. var imgArr =urls.split(',');
  898. //预览图片
  899. uni.previewImage({
  900. urls: imgArr,
  901. current: imgArr[0]
  902. });
  903. },
  904. getStoreConfig(){
  905. getStoreConfig().then(
  906. res => {
  907. if(res.code==200){
  908. uni.setStorageSync('config',JSON.stringify(res.data));
  909. }
  910. },
  911. rej => {}
  912. );
  913. },
  914. goAuthUrl(url){
  915. this.utils.isLogin().then(res => {
  916. if(res){
  917. uni.navigateTo({
  918. url:url
  919. })
  920. }
  921. })
  922. },
  923. goenper(url){
  924. uni.switchTab({
  925. url:url
  926. })
  927. },
  928. // 跳转页面
  929. navTo(url){
  930. uni.navigateTo({
  931. url: url
  932. })
  933. },
  934. getLocation(){
  935. var that=this;
  936. uni.authorize({
  937. scope:'scope.userLocation',
  938. success() {
  939. uni.getLocation({
  940. type: 'gcj02',//腾讯地图使用gcj02获取位置坐标
  941. success: function (res) {
  942. uni.setStorageSync('isLocation',1);
  943. uni.setStorageSync('lng',res.longitude);
  944. uni.setStorageSync('lat',res.latitude);
  945. },
  946. })
  947. },
  948. fail(err){
  949. console.log(err)
  950. }
  951. })
  952. },
  953. getIndexData(){
  954. let data = {};
  955. getIndexData(data).then(
  956. res => {
  957. if(res.code==200){
  958. console.log(1111)
  959. this.advList=res.data.advList;
  960. this.advList = res.data.advList.map(item => {
  961. if(item.urlType==1){
  962. return {
  963. ...item,
  964. type: 'image',
  965. }
  966. }else{
  967. return {
  968. ...item,
  969. type: 'video',
  970. }
  971. }
  972. })
  973. // for(let i=0;i<=this.advList;i++){
  974. // if(this.advList[i].urlType==2){
  975. // this.advList[i].type='video'
  976. // }
  977. // }
  978. console.log(this.advList)
  979. // this.advList[1].type='video'
  980. console.log('现在',this.advList,)
  981. this.articleCateList=res.data.articleCateList;
  982. if(this.articleCateList!=null&&this.articleCateList.length>0){
  983. this.cateId=this.articleCateList[0].cateId;
  984. this.getTuiArticle()
  985. }
  986. this.tuiProductList=res.data.tuiProductList
  987. this.newProductList = res.data.newProductList
  988. this.hotProductList = res.data.hotProductList
  989. }else{
  990. uni.showToast({
  991. icon:'none',
  992. title: "请求失败",
  993. });
  994. }
  995. },
  996. rej => {}
  997. );
  998. },
  999. getCartCount(){
  1000. this.utils.isLogin().then(res => {
  1001. if(res){
  1002. getCartCount().then(
  1003. cartRes => {
  1004. if(cartRes.code==200){
  1005. this.cartCount=cartRes.data;
  1006. }
  1007. },
  1008. rej => {}
  1009. );
  1010. }
  1011. })
  1012. },
  1013. getTuiArticle(){
  1014. let data = {cateId:this.cateId};
  1015. getTuiArticle(data).then(
  1016. res => {
  1017. if(res.code==200){
  1018. this.articleList=res.data;
  1019. }else{
  1020. uni.showToast({
  1021. icon:'none',
  1022. title: "请求失败",
  1023. });
  1024. }
  1025. },
  1026. rej => {}
  1027. );
  1028. },
  1029. getTuiDoctorOrder(){
  1030. let data = {orderType:this.orderType};
  1031. getTuiDoctorOrder(data).then(
  1032. res => {
  1033. if(res.code==200){
  1034. this.doctorOrderList=res.data;
  1035. }else{
  1036. uni.showToast({
  1037. icon:'none',
  1038. title: "请求失败",
  1039. });
  1040. }
  1041. },
  1042. rej => {}
  1043. );
  1044. },
  1045. showArticle(item){
  1046. uni.navigateTo({
  1047. url: '../healthy/detail?articleId='+item.articleId
  1048. })
  1049. },
  1050. showProduct(item){
  1051. uni.navigateTo({
  1052. url: '../shopping/productDetails?productId='+item.productId
  1053. })
  1054. },
  1055. // 顶部搜索
  1056. toSearch() {
  1057. uni.navigateTo({
  1058. url: './productSearch'
  1059. })
  1060. },
  1061. // 健康知识选中
  1062. articleCateChange(item) {
  1063. this.cateId = item.cateId;
  1064. this.getTuiArticle();
  1065. },
  1066. // 问诊案例选中
  1067. orderTypeChange(item) {
  1068. this.orderType = item.id;
  1069. console.log(this.orderType)
  1070. this.getTuiDoctorOrder();
  1071. },
  1072. // 关闭限时消息
  1073. closeMsg() {
  1074. this.messageShow = false
  1075. },
  1076. // 查看全部
  1077. viewAll(url) {
  1078. uni.navigateTo({
  1079. url: '/pages/home/' + url,
  1080. });
  1081. },
  1082. shopDoctor(item){
  1083. console.log(item);
  1084. uni.navigateTo({
  1085. url: "/pages_doctor/doctorDetail?doctorId="+item.doctorId
  1086. })
  1087. },
  1088. switchTo(url){
  1089. uni.switchTab({
  1090. url: url
  1091. })
  1092. return
  1093. },
  1094. yangshengClick(item){
  1095. console.log('item',item)
  1096. if(item.page==""){
  1097. uni.showToast({
  1098. icon:"none",
  1099. title: '暂无更多'
  1100. })
  1101. return;
  1102. }else if(item.linkType==0){
  1103. uni.showToast({
  1104. icon:'none',
  1105. title: "开发中...",
  1106. });
  1107. }else{
  1108. uni.navigateTo({
  1109. url:item.linkUrl
  1110. })
  1111. }
  1112. },
  1113. // 在线问诊
  1114. openIm() {
  1115. uni.navigateTo({
  1116. url: '/pages_doctor/doctorOrderIM?orderId=10'
  1117. })
  1118. },
  1119. getDoctorArticleList() {
  1120. //联网加载数据
  1121. var that = this;
  1122. var data = {
  1123. pageNum:1,
  1124. pageSize:10
  1125. };
  1126. getDoctorArticleList(data).then(res => {
  1127. if(res.code==200){
  1128. this.doctocArticles=res.data.list;
  1129. }
  1130. });
  1131. },
  1132. getArticleList() {
  1133. //联网加载数据
  1134. var that = this;
  1135. var data = {
  1136. isTui:1,
  1137. pageNum:1,
  1138. pageSize:10,
  1139. };
  1140. getArticleList(data).then(res => {
  1141. if(res.code==200){
  1142. this.articles=res.data.list;
  1143. }else{
  1144. uni.showToast({
  1145. icon:'none',
  1146. title: "请求失败",
  1147. });
  1148. }
  1149. });
  1150. },
  1151. }
  1152. }
  1153. </script>
  1154. <style lang="scss">
  1155. .videotop{
  1156. width: 100%;
  1157. height: 360rpx;
  1158. }
  1159. .fixed-top-box{
  1160. width: 100%;
  1161. position: fixed;
  1162. top: 0;
  1163. left: 0;
  1164. z-index: 1000;
  1165. transition: all 0.5s;
  1166. background-color: #fff;
  1167. &.show-back{
  1168. // background: linear-gradient(135deg, #018C39 0%, #1fbd2c 100%);
  1169. }
  1170. .status_bar {
  1171. width: 100%;
  1172. }
  1173. }
  1174. .content{
  1175. width: 100%;
  1176. position: relative;
  1177. .bg{
  1178. width: 100%;
  1179. height: 380rpx;
  1180. position: absolute;
  1181. top: 0;
  1182. left: 0;
  1183. }
  1184. .top-inner{
  1185. width: 100%;
  1186. position: absolute;
  1187. top: 0;
  1188. left: 0;
  1189. z-index: 5;
  1190. .top-title{
  1191. height: 88upx;
  1192. line-height: 88upx;
  1193. display: flex;
  1194. align-items: center;
  1195. justify-content: flex-start;
  1196. .name{
  1197. font-size: 42upx;
  1198. // font-family: Source Han Sans CN;
  1199. font-family: PingFang SC, PingFang SC;
  1200. font-weight: bold;
  1201. padding-left: 20upx;
  1202. }
  1203. .dot{
  1204. margin: 0upx 10upx;
  1205. font-size: 28upx;
  1206. color: #FFFFFF;
  1207. opacity: 0.5;
  1208. }
  1209. .sub-name{
  1210. font-size: 30upx;
  1211. font-family: Source Han Sans CN;
  1212. color: #FFFFFF;
  1213. }
  1214. }
  1215. .func-cont{
  1216. box-sizing: border-box;
  1217. display: flex;
  1218. align-items: center;
  1219. padding: 30upx 20upx 30upx 20upx;
  1220. .search-cont{
  1221. box-sizing: border-box;
  1222. display: flex;
  1223. align-items: center;
  1224. width: 552upx;
  1225. height: 72upx;
  1226. background: #FFFFFF;
  1227. border-radius: 36upx;
  1228. padding: 0 30upx;
  1229. border: 2rpx solid #018C39;
  1230. .icon-search{
  1231. width: 28upx;
  1232. height: 28upx;
  1233. margin-right: 20upx;
  1234. }
  1235. input{
  1236. height: 60upx;
  1237. line-height: 60upx;
  1238. flex: 1;
  1239. }
  1240. }
  1241. /deep/.uni-badge{
  1242. border: none;
  1243. background-color: #FF3636;
  1244. font-family: Roboto;
  1245. }
  1246. .img-item{
  1247. width: 44upx;
  1248. height: 44upx;
  1249. margin-left: 30upx;
  1250. image{
  1251. width: 100%;
  1252. height: 100%;
  1253. }
  1254. }
  1255. }
  1256. .tips{
  1257. margin: 0upx 20rpx 30rpx ;
  1258. height: 40upx;
  1259. line-height: 40upx;
  1260. display: flex;
  1261. justify-content: space-between;
  1262. align-items: center;
  1263. .left{
  1264. font-size: 30upx;
  1265. color: #FFFFFF;
  1266. }
  1267. .right{
  1268. padding: 5upx 20rpx;
  1269. font-size: 24upx;
  1270. color: #FFFFFF;
  1271. background-color: #018C39;
  1272. border-radius: 50rpx;
  1273. }
  1274. }
  1275. }
  1276. .banner-box{
  1277. padding: 0 20upx;
  1278. .inner{
  1279. width: 100%;
  1280. height: 340upx;
  1281. border-radius: 10upx;
  1282. overflow: hidden;
  1283. .swiper,
  1284. .swiper-item,
  1285. .swiper-item image{
  1286. width: 100%;
  1287. height: 100%;
  1288. }
  1289. }
  1290. }
  1291. .menu-content{
  1292. // width: 100%;
  1293. background-color: #fff;
  1294. overflow: hidden;
  1295. padding: 20upx 20upx 0;
  1296. margin: 20rpx;
  1297. border-radius: 20rpx;
  1298. }
  1299. .menu-box{
  1300. display: flex;
  1301. align-items: center;
  1302. background-color: #FFFFFF;
  1303. }
  1304. .online-inquiry{
  1305. box-sizing: border-box;
  1306. width: 100%;
  1307. height: 170upx;
  1308. padding: 0 20upx;
  1309. background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 62%, rgba(255, 255, 255, 0) 100%);
  1310. display: flex;
  1311. justify-content: space-between;
  1312. .item{
  1313. // width: 46.13%;
  1314. width: 346upx;
  1315. height: 180upx;
  1316. position: relative;
  1317. .bg-img,
  1318. .inner{
  1319. width: 100%;
  1320. height: 100%;
  1321. position: absolute;
  1322. top: 0;
  1323. left: 0;
  1324. z-index: 1;
  1325. }
  1326. .inner{
  1327. box-sizing: border-box;
  1328. z-index: 2;
  1329. display: flex;
  1330. flex-direction: column;
  1331. justify-content: center;
  1332. padding-left: 32upx;
  1333. .title{
  1334. font-size: 36upx;
  1335. line-height: 1;
  1336. font-family: PingFang SC;
  1337. font-weight: 600;
  1338. color: #111111;
  1339. margin-bottom: 20upx;
  1340. }
  1341. .sub-title{
  1342. font-size: 24upx;
  1343. font-family: PingFang SC;
  1344. font-weight: 500;
  1345. color: #666666;
  1346. }
  1347. image{
  1348. width: 80upx;
  1349. height: 90upx;
  1350. position: absolute;
  1351. right: 7upx;
  1352. bottom: 7upx;
  1353. }
  1354. }
  1355. }
  1356. }
  1357. .index-cont{
  1358. box-sizing: border-box;
  1359. padding: 0 20upx 120rpx;
  1360. .pub-item{
  1361. background: #FFFFFF;
  1362. border-radius: 16upx;
  1363. margin-bottom: 20upx;
  1364. .tabs{
  1365. width: 100%;
  1366. display: flex;
  1367. align-items: center;
  1368. justify-content: flex-start;
  1369. height: 110rpx;
  1370. background-color: #F0F3F4;
  1371. .tab{
  1372. height: 110rpx;
  1373. display: flex;
  1374. align-items: center;
  1375. justify-content: center;
  1376. position: relative;
  1377. flex: 1;
  1378. .img{
  1379. z-index: 1;
  1380. position: absolute;
  1381. top:0rpx;
  1382. left:0rpx;
  1383. width: 100%;
  1384. height: 100%;
  1385. }
  1386. .inner{
  1387. z-index: 2;
  1388. .title{
  1389. font-size: 32upx;
  1390. font-family: PingFang SC;
  1391. font-weight: bold;
  1392. color: #666666;
  1393. }
  1394. .active{
  1395. color: #018C39;
  1396. }
  1397. }
  1398. }
  1399. }
  1400. .pub-title-box{
  1401. box-sizing: border-box;
  1402. padding: 36upx 30upx;
  1403. display: flex;
  1404. align-items: center;
  1405. justify-content: space-between;
  1406. .left{
  1407. font-size: 32upx;
  1408. line-height: 1;
  1409. font-family: PingFang SC;
  1410. font-weight: bold;
  1411. color: #111111;
  1412. }
  1413. .right{
  1414. display: flex;
  1415. align-items: center;
  1416. justify-content: center;
  1417. .text{
  1418. font-size: 24rpx;
  1419. line-height: 1;
  1420. font-family: PingFang SC;
  1421. font-weight: 500;
  1422. color: #999999;
  1423. margin-right: -2rpx;
  1424. }
  1425. image{
  1426. width: 40upx;
  1427. height: 40upx;
  1428. }
  1429. }
  1430. }
  1431. .doc-tab-box{
  1432. padding: 14rpx 30rpx 0rpx 30rpx;
  1433. position: relative;
  1434. .tab-inner{
  1435. padding: 14upx 0 30upx;
  1436. display: flex;
  1437. overflow-x: auto;
  1438. }
  1439. .item{
  1440. font-size: 28upx;
  1441. white-space: nowrap;
  1442. line-height: 1;
  1443. font-family: PingFang SC;
  1444. font-weight: 500;
  1445. color: #666666;
  1446. margin-right: 40upx;
  1447. position: relative;
  1448. &:last-child{
  1449. margin-right: 0;
  1450. }
  1451. &.active{
  1452. font-weight: bold;
  1453. color: #333333;
  1454. }
  1455. &.cases{
  1456. margin-right: 60upx;
  1457. }
  1458. .text{
  1459. position: relative;
  1460. z-index: 1;
  1461. }
  1462. .tab-bg{
  1463. width: 72upx;
  1464. height: 28upx;
  1465. position: absolute;
  1466. top: 17upx;
  1467. left: 50%;
  1468. transform: translateX(-36upx);
  1469. z-index: -1;
  1470. }
  1471. }
  1472. .right-mask{
  1473. width: 56upx;
  1474. height: 34upx;
  1475. position: absolute;
  1476. top: 25upx;
  1477. right: 0upx;
  1478. z-index: 1;
  1479. }
  1480. }
  1481. .doc-list{
  1482. padding: 20upx;
  1483. .item{
  1484. box-sizing: border-box;
  1485. background: #FFFFFF;
  1486. // border-radius: 16upx;
  1487. display: flex;
  1488. border-bottom: 1px solid #F0F0F0;
  1489. margin-bottom: 30rpx;
  1490. .head-box{
  1491. width: 120upx;
  1492. height: 120upx;
  1493. background: #EDF1F4;
  1494. border-radius: 50%;
  1495. overflow: hidden;
  1496. margin-right: 30upx;
  1497. image{
  1498. width: 100%;
  1499. height: 100%;
  1500. }
  1501. }
  1502. .info{
  1503. width: calc(100% - 150upx);
  1504. .top{
  1505. display: flex;
  1506. align-items: center;
  1507. font-family: PingFang SC;
  1508. line-height: 1;
  1509. .name{
  1510. font-size: 34upx;
  1511. font-weight: bold;
  1512. color: #111111;
  1513. }
  1514. .line{
  1515. width: 1px;
  1516. height: 26upx;
  1517. background: #DDDDDD;
  1518. margin: 0 20upx;
  1519. }
  1520. .other{
  1521. font-size: 28upx;
  1522. font-weight: 500;
  1523. color: #333333;
  1524. }
  1525. }
  1526. .unit-box{
  1527. display: flex;
  1528. margin-top: 24upx;
  1529. .level{
  1530. padding: 0 10upx;
  1531. height: 30upx;
  1532. line-height: 30upx;
  1533. font-size: 22upx;
  1534. font-family: PingFang SC;
  1535. font-weight: 500;
  1536. color: #FFFFFF;
  1537. background: #018C39;
  1538. border-radius: 10upx 4upx 10upx 4upx;
  1539. margin-right: 12upx;
  1540. }
  1541. .name{
  1542. font-size: 28upx;
  1543. font-family: PingFang SC;
  1544. font-weight: 500;
  1545. color: #333333;
  1546. line-height: 30upx;
  1547. }
  1548. }
  1549. .expertise{
  1550. font-size: 26upx;
  1551. font-family: PingFang SC;
  1552. font-weight: 500;
  1553. color: #666666;
  1554. line-height: 42upx;
  1555. margin: 22upx 0 26upx;
  1556. }
  1557. .rate-box{
  1558. display: flex;
  1559. align-items: center;
  1560. .star{
  1561. display: flex;
  1562. align-items: center;
  1563. image{
  1564. width: 22upx;
  1565. height: 22upx;
  1566. margin-right: 10upx;
  1567. }
  1568. text{
  1569. font-size: 26upx;
  1570. font-family: PingFang SC;
  1571. font-weight: bold;
  1572. color: #CEA764;
  1573. line-height: 1;
  1574. }
  1575. }
  1576. .line{
  1577. width: 1px;
  1578. height: 20upx;
  1579. background: #DDDDDD;
  1580. margin: 0 20upx;
  1581. }
  1582. .num-box{
  1583. display: flex;
  1584. align-items: center;
  1585. font-family: PingFang SC;
  1586. .label{
  1587. font-size: 24upx;
  1588. font-weight: 500;
  1589. color: #999999;
  1590. line-height: 1;
  1591. margin-right: 7px;
  1592. }
  1593. .num{
  1594. font-size: 26upx;
  1595. font-weight: bold;
  1596. color: #CEA764;
  1597. line-height: 1;
  1598. }
  1599. }
  1600. }
  1601. .price-box{
  1602. display: flex;
  1603. align-items: center;
  1604. margin-top: 38upx;
  1605. .btn-item{
  1606. display: flex;
  1607. align-items: center;
  1608. justify-content: center;
  1609. width: 164upx;
  1610. height: 56upx;
  1611. line-height: 56upx;
  1612. border: 1px solid rgba(43, 199, 185, 0.5);
  1613. border-radius: 28upx;
  1614. font-family: PingFang SC;
  1615. margin-right: 30upx;
  1616. &:last-child{
  1617. margin-right: 0;
  1618. }
  1619. .label{
  1620. font-size: 26upx;
  1621. font-weight: 500;
  1622. color: #018C39;
  1623. margin-right: 5upx;
  1624. }
  1625. .num{
  1626. font-size: 28upx;
  1627. font-weight: bold;
  1628. color: #018C39;
  1629. }
  1630. }
  1631. }
  1632. }
  1633. }
  1634. .item:last-child{
  1635. border-bottom: none;
  1636. margin-bottom: 0rpx;
  1637. }
  1638. .bottom-title{
  1639. height: 50rpx;
  1640. display: flex;
  1641. align-items: center;
  1642. justify-content: center;
  1643. font-size: 26rpx;
  1644. font-family: PingFang SC;
  1645. font-weight: bold;
  1646. color: #018C39;
  1647. image{
  1648. margin-left: 8rpx;
  1649. width: 14rpx;
  1650. height: 24rpx;
  1651. }
  1652. }
  1653. }
  1654. // 医师团队
  1655. .doc-cont{
  1656. box-sizing: border-box;
  1657. padding: 0 30upx;
  1658. .inner{
  1659. padding: 4upx 0 40upx;
  1660. display: flex;
  1661. overflow-x: auto;
  1662. }
  1663. .item{
  1664. display: flex;
  1665. align-items: center;
  1666. flex-direction: column;
  1667. margin-right: 40upx;
  1668. &:last-child{
  1669. margin-right: 0;
  1670. }
  1671. .head-box{
  1672. width: 120upx;
  1673. height: 120upx;
  1674. background: #F2F5F9;
  1675. border-radius: 50%;
  1676. margin-bottom: 20upx;
  1677. overflow: hidden;
  1678. image{
  1679. width: 100%;
  1680. height: 100%;
  1681. }
  1682. }
  1683. .name{
  1684. max-width: 120upx;
  1685. font-size: 28upx;
  1686. line-height: 1;
  1687. font-family: PingFang SC;
  1688. font-weight: 500;
  1689. color: #111111;
  1690. margin-bottom: 16upx;
  1691. text-align: center;
  1692. }
  1693. .position{
  1694. max-width: 120upx;
  1695. font-size: 24upx;
  1696. line-height: 1;
  1697. font-family: PingFang SC;
  1698. font-weight: 500;
  1699. color: #999999;
  1700. text-align: center;
  1701. }
  1702. }
  1703. }
  1704. .inner{
  1705. padding: 0 30upx;
  1706. }
  1707. // 健康知识
  1708. .pub-tab-box{
  1709. position: relative;
  1710. .tab-inner{
  1711. padding: 14upx 0 30upx;
  1712. display: flex;
  1713. overflow-x: auto;
  1714. }
  1715. .item{
  1716. font-size: 28upx;
  1717. white-space: nowrap;
  1718. line-height: 1;
  1719. font-family: PingFang SC;
  1720. font-weight: 500;
  1721. color: #666666;
  1722. margin-right: 40upx;
  1723. position: relative;
  1724. &:last-child{
  1725. margin-right: 0;
  1726. }
  1727. &.active{
  1728. font-weight: bold;
  1729. color: #333333;
  1730. }
  1731. &.cases{
  1732. margin-right: 60upx;
  1733. }
  1734. .text{
  1735. position: relative;
  1736. z-index: 1;
  1737. }
  1738. .tab-bg{
  1739. width: 72upx;
  1740. height: 28upx;
  1741. position: absolute;
  1742. top: 17upx;
  1743. left: 50%;
  1744. transform: translateX(-36upx);
  1745. z-index: -1;
  1746. }
  1747. }
  1748. .right-mask{
  1749. width: 56upx;
  1750. height: 34upx;
  1751. position: absolute;
  1752. top: 14upx;
  1753. right: -30upx;
  1754. z-index: 1;
  1755. }
  1756. }
  1757. .know-list{
  1758. padding-right: 10upx;
  1759. .item{
  1760. padding: 30upx 0;
  1761. display: flex;
  1762. align-items: center;
  1763. justify-content: space-between;
  1764. border-bottom: 1px solid #F0F0F0;
  1765. &:last-child{
  1766. border-bottom: none;
  1767. }
  1768. .left{
  1769. flex: 1;
  1770. padding-right: 40upx;
  1771. height: 190upx;
  1772. display: flex;
  1773. flex-direction: column;
  1774. justify-content: space-between;
  1775. .title{
  1776. font-size: 32upx;
  1777. font-family: PingFang SC;
  1778. font-weight: 500;
  1779. color: #111111;
  1780. line-height: 48upx;
  1781. }
  1782. .info-box{
  1783. width: 100%;
  1784. display: flex;
  1785. align-items: center;
  1786. justify-content: space-between;
  1787. .readers{
  1788. display: flex;
  1789. align-items: center;
  1790. .head-box{
  1791. margin-right: 27upx;
  1792. display: flex;
  1793. align-items: center;
  1794. .head{
  1795. width: 48upx;
  1796. height: 48upx;
  1797. border-radius: 50%;
  1798. overflow: hidden;
  1799. box-shadow: 0 0 0 1px #fff;
  1800. margin-right: -10upx;
  1801. image{
  1802. width: 100%;
  1803. height: 100%;
  1804. }
  1805. }
  1806. }
  1807. .readings{
  1808. display: flex;
  1809. align-items: center;
  1810. .eye{
  1811. width: 26upx;
  1812. height: 20upx;
  1813. margin-right: 9upx;
  1814. }
  1815. .num{
  1816. font-size: 24upx;
  1817. font-family: PingFang SC;
  1818. font-weight: 500;
  1819. color: #999999;
  1820. line-height: 1;
  1821. }
  1822. }
  1823. }
  1824. .time{
  1825. font-size: 24upx;
  1826. line-height: 1;
  1827. font-family: PingFang SC;
  1828. font-weight: 500;
  1829. color: #999999;
  1830. }
  1831. }
  1832. }
  1833. .right{
  1834. width: 250upx;
  1835. height: 190upx;
  1836. border-radius: 8upx;
  1837. overflow: hidden;
  1838. image{
  1839. width: 100%;
  1840. height: 100%;
  1841. }
  1842. }
  1843. }
  1844. }
  1845. // 问诊案例
  1846. .cases-list{
  1847. padding-bottom: 10upx;
  1848. .item{
  1849. padding: 30upx 0;
  1850. border-bottom: 1px solid #F0F0F0;
  1851. &:last-child{
  1852. border-bottom: none;
  1853. }
  1854. .dec-text{
  1855. font-size: 32upx;
  1856. font-family: PingFang SC;
  1857. font-weight: bold;
  1858. color: #111111;
  1859. line-height: 48upx;
  1860. }
  1861. .images-box{
  1862. margin-top: 10upx;
  1863. display: flex;
  1864. flex-wrap: wrap;
  1865. .img-item{
  1866. width: 155upx;
  1867. height: 155upx;
  1868. background: #F5F5F5;
  1869. border-radius: 8upx;
  1870. margin: 0 10upx 10upx 0;
  1871. overflow: hidden;
  1872. image{
  1873. width: 100%;
  1874. height: 100%;
  1875. }
  1876. &:nth-child(4n){
  1877. margin-right: 0;
  1878. }
  1879. }
  1880. }
  1881. .doc-info{
  1882. display: flex;
  1883. align-items: center;
  1884. margin: 30upx 0 20upx;
  1885. .head{
  1886. width: 60upx;
  1887. height: 60upx;
  1888. background: #F2F5F9;
  1889. border-radius: 50%;
  1890. margin-right: 20upx;
  1891. overflow: hidden;
  1892. image{
  1893. width: 100%;
  1894. height: 100%;
  1895. }
  1896. }
  1897. .name{
  1898. font-size: 28upx;
  1899. line-height: 1;
  1900. font-family: PingFang SC;
  1901. font-weight: 500;
  1902. color: #111111;
  1903. }
  1904. .line{
  1905. width: 1px;
  1906. height: 22upx;
  1907. background: #DDDDDD;
  1908. margin: 0 16upx;
  1909. }
  1910. .posit,
  1911. .address{
  1912. font-size: 26upx;
  1913. font-family: PingFang SC;
  1914. font-weight: 500;
  1915. color: #999999;
  1916. }
  1917. }
  1918. .answer-box{
  1919. width: 100%;
  1920. // height: 117upx;
  1921. background: #F5F7F7;
  1922. border-radius: 10upx;
  1923. display: flex;
  1924. flex-direction: column;
  1925. justify-content: center;
  1926. .text-inner{
  1927. // height: 84upx;
  1928. font-size: 28upx;
  1929. font-family: PingFang SC;
  1930. font-weight: 500;
  1931. color: #666666;
  1932. line-height: 42upx;
  1933. padding: 15upx;
  1934. }
  1935. }
  1936. .read-box{
  1937. margin-top: 30upx;
  1938. display: flex;
  1939. align-items: center;
  1940. justify-content: flex-end;
  1941. image{
  1942. width: 24upx;
  1943. height: 19upx;
  1944. margin-right: 10upx;
  1945. }
  1946. .text{
  1947. font-size: 24upx;
  1948. font-family: PingFang SC;
  1949. font-weight: 500;
  1950. color: #999999;
  1951. }
  1952. }
  1953. }
  1954. }
  1955. }
  1956. // 精选商品
  1957. .feat-title{
  1958. margin-top: 30upx;
  1959. padding: 10upx 0 33upx;
  1960. display: flex;
  1961. align-items: center;
  1962. justify-content: center;
  1963. image{
  1964. width: 37upx;
  1965. height: 37upx;
  1966. margin: 0upx 20upx;
  1967. }
  1968. text{
  1969. font-size: 36upx;
  1970. line-height: 1;
  1971. font-family: PingFang SC;
  1972. font-weight: bold;
  1973. color: #111111;
  1974. }
  1975. }
  1976. .drug-list{
  1977. display: flex;
  1978. flex-wrap: wrap;
  1979. // margin-bottom: 20upx;
  1980. .item{
  1981. margin-right: 20rpx;
  1982. margin-bottom: 20rpx;
  1983. width: 345rpx;
  1984. background: #FFFFFF;
  1985. box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
  1986. border-radius: 20rpx;
  1987. overflow: hidden;
  1988. &:nth-child(2n){
  1989. margin-right: 0;
  1990. }
  1991. .img-box{
  1992. width: 100%;
  1993. height: 334upx;
  1994. image{
  1995. width: 100%;
  1996. height: 100%;
  1997. }
  1998. }
  1999. .info-box{
  2000. box-sizing: border-box;
  2001. height: 182upx;
  2002. padding: 20upx;
  2003. .title{
  2004. height: 80upx;
  2005. font-size: 26upx;
  2006. font-family: PingFang SC;
  2007. font-weight: 500;
  2008. color: #111111;
  2009. line-height: 40upx;
  2010. }
  2011. .price-box{
  2012. display: flex;
  2013. align-items: center;
  2014. margin-top: 20upx;
  2015. .now{
  2016. color: #FF6633;
  2017. display: flex;
  2018. align-items: flex-end;
  2019. margin-right: 20upx;
  2020. font-family: PingFang SC;
  2021. .unit{
  2022. font-size: 24upx;
  2023. line-height: 1.4;
  2024. margin-right: 4upx;
  2025. }
  2026. .num{
  2027. font-size: 36upx;
  2028. font-weight: bold;
  2029. line-height: 1;
  2030. }
  2031. }
  2032. .old{
  2033. font-size: 26upx;
  2034. font-family: PingFang SC;
  2035. text-decoration: line-through;
  2036. color: #BBBBBB;
  2037. line-height: 1;
  2038. }
  2039. }
  2040. }
  2041. }
  2042. }
  2043. }
  2044. .modules{
  2045. .module{
  2046. .depts{
  2047. z-index: 101;
  2048. margin: 20rpx 15rpx 0rpx;
  2049. padding: 20rpx;
  2050. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  2051. background-color: #fff;
  2052. border-radius: 15rpx;
  2053. .title{
  2054. font-size: 32upx;
  2055. font-family: PingFang SC;
  2056. font-weight: bold;
  2057. color: #2A2B2E;
  2058. }
  2059. .dept-box{
  2060. margin-top: 15rpx;
  2061. display: flex;
  2062. align-items: center;
  2063. justify-content: flex-start;
  2064. flex-wrap:wrap;
  2065. .dept{
  2066. padding: 15rpx 5rpx;
  2067. width:25%;
  2068. display: flex;
  2069. flex-direction: column;
  2070. align-items: center;
  2071. justify-content: center;
  2072. padding:14rpx 0;
  2073. .icon{
  2074. width:58rpx;
  2075. height:58rpx;
  2076. }
  2077. .title{
  2078. margin-top: 10rpx;
  2079. font-size: 24upx;
  2080. font-family: PingFang SC;
  2081. font-weight: 500;
  2082. color: #111111;
  2083. }
  2084. }
  2085. }
  2086. }
  2087. .doctor-articles{
  2088. z-index: 101;
  2089. margin: 20rpx 15rpx 0rpx;
  2090. padding: 20rpx;
  2091. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  2092. background-color: #fff;
  2093. border-radius: 15rpx;
  2094. .title-box{
  2095. display: flex;
  2096. flex-direction: row;
  2097. align-items: center;
  2098. justify-content: space-between;
  2099. .title{
  2100. font-size: 32upx;
  2101. font-family: PingFang SC;
  2102. font-weight: bold;
  2103. color: #111111;
  2104. }
  2105. .more{
  2106. display: flex;
  2107. align-items: center;
  2108. justify-content: flex-end;
  2109. .text{
  2110. font-size: 24rpx;
  2111. font-family: PingFang SC;
  2112. color: #9B9B9B;
  2113. margin-right: -12rpx;
  2114. }
  2115. image{
  2116. margin-left: 10rpx;
  2117. width:40rpx;
  2118. height:40rpx;
  2119. }
  2120. }
  2121. }
  2122. .article-box{
  2123. padding: 20rpx 0rpx;
  2124. overflow-x: auto;
  2125. box-sizing: border-box;
  2126. display: flex;
  2127. align-items: center;
  2128. justify-content: flex-start;
  2129. .article{
  2130. width: 300rpx;
  2131. margin-right: 20rpx;
  2132. background: #f9f8fe;
  2133. display: flex;
  2134. flex-direction: column;
  2135. align-items: flex-start;
  2136. justify-content: flex-start;
  2137. &:last-child{
  2138. margin-right: 0rpx;
  2139. }
  2140. .image-box{
  2141. width: 300rpx;
  2142. height:400rpx;
  2143. position: relative;
  2144. border-radius: 20rpx;
  2145. image{
  2146. border-radius: 20rpx;
  2147. width: 300rpx;
  2148. height:400rpx;
  2149. }
  2150. .views{
  2151. position: absolute;
  2152. top:0rpx;
  2153. left:0rpx;
  2154. padding: 5rpx 10rpx;
  2155. background: rgba(0,0,0,0.25);
  2156. border-radius: 12rpx 0px 12rpx 0px;
  2157. opacity: 1;
  2158. font-size: 20rpx;
  2159. font-family: PingFang SC-Bold, PingFang SC;
  2160. font-weight: bold;
  2161. color: #FFFFFF;
  2162. }
  2163. .doctor{
  2164. margin: 10rpx;
  2165. display: flex;
  2166. align-items: center;
  2167. justify-content: flex-start;
  2168. position: absolute;
  2169. bottom:0rpx;
  2170. left:0rpx;
  2171. image{
  2172. border-radius: 50%;
  2173. width: 64rpx;
  2174. height:64rpx;
  2175. }
  2176. .right{
  2177. width: 200rpx;
  2178. margin-left: 10rpx;
  2179. display: flex;
  2180. flex-direction: column;
  2181. align-items: flex-start;
  2182. justify-content: space-between;
  2183. .doc-name{
  2184. width: 200rpx;
  2185. font-size: 30rpx;
  2186. font-weight: bold;
  2187. font-family: PingFang SC;
  2188. color: #fff;
  2189. }
  2190. .doc-position{
  2191. width: 100%;
  2192. font-size: 28rpx;
  2193. font-family: PingFang SC;
  2194. color: #fff;
  2195. font-weight: bold;
  2196. opacity: 0.8;
  2197. }
  2198. }
  2199. }
  2200. }
  2201. .article-title-box{
  2202. width: 100%;
  2203. margin-top: 10rpx;
  2204. display: flex;
  2205. align-items: center;
  2206. justify-content: flex-start;
  2207. .article-title{
  2208. font-size: 30rpx;
  2209. font-weight: bold;
  2210. font-family: PingFang SC;
  2211. color: #2A2B2E;
  2212. }
  2213. }
  2214. }
  2215. }
  2216. }
  2217. .doctors{
  2218. z-index: 101;
  2219. margin: 20rpx 15rpx;
  2220. padding: 20rpx;
  2221. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  2222. background-color: #fff;
  2223. border-radius: 15rpx;
  2224. .title-box{
  2225. display: flex;
  2226. flex-direction: row;
  2227. align-items: center;
  2228. justify-content: space-between;
  2229. .title{
  2230. font-size: 32upx;
  2231. font-family: PingFang SC;
  2232. font-weight: bold;
  2233. color: #111111;
  2234. }
  2235. .more{
  2236. display: flex;
  2237. align-items: center;
  2238. justify-content: flex-end;
  2239. .text{
  2240. font-size: 24rpx;
  2241. font-family: PingFang SC;
  2242. color: #9B9B9B;
  2243. }
  2244. image{
  2245. margin-left: 10rpx;
  2246. width:15rpx;
  2247. height:20rpx;
  2248. }
  2249. }
  2250. }
  2251. }
  2252. .articles{
  2253. z-index: 101;
  2254. margin: 20rpx 15rpx;
  2255. padding: 20rpx;
  2256. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  2257. background-color: #fff;
  2258. border-radius: 15rpx;
  2259. .title-box{
  2260. display: flex;
  2261. flex-direction: row;
  2262. align-items: center;
  2263. justify-content: space-between;
  2264. .title{
  2265. font-size: 32upx;
  2266. font-family: PingFang SC;
  2267. font-weight: bold;
  2268. color: #111111;
  2269. }
  2270. .more{
  2271. display: flex;
  2272. align-items: center;
  2273. justify-content: flex-end;
  2274. .text{
  2275. font-size: 24rpx;
  2276. font-family: PingFang SC;
  2277. color: #9B9B9B;
  2278. margin-right: -12rpx;
  2279. }
  2280. image{
  2281. margin-left: 10rpx;
  2282. width:40rpx;
  2283. height:40rpx;
  2284. }
  2285. }
  2286. }
  2287. .article-box{
  2288. margin-top: 15rpx;
  2289. padding: 20rpx 0rpx 0rpx;
  2290. display: flex;
  2291. flex-direction: column;
  2292. align-items: flex-start;
  2293. justify-content: flex-start;
  2294. .item{
  2295. width: 100%;
  2296. margin-bottom: 20rpx;
  2297. display: flex;
  2298. align-items: flex-start;
  2299. justify-content: flex-start;
  2300. &:last-child{
  2301. margin-bottom: 0rpx;
  2302. }
  2303. .left{
  2304. flex:1;
  2305. height:160rpx;
  2306. margin-right: 15rpx;
  2307. display: flex;
  2308. flex-direction: column;
  2309. align-items: flex-start;
  2310. justify-content: space-between;
  2311. .title{
  2312. font-size: 28upx;
  2313. font-family: PingFang SC;
  2314. font-weight: bold;
  2315. color: #111111;
  2316. }
  2317. .views{
  2318. font-size: 24upx;
  2319. font-family: PingFang SC;
  2320. color: #9a9a9c;
  2321. }
  2322. }
  2323. .right{
  2324. image{
  2325. border-radius: 10rpx;
  2326. width:220rpx;
  2327. height:160rpx;
  2328. border: 1px solid #eeeeee;
  2329. }
  2330. }
  2331. }
  2332. }
  2333. }
  2334. .packages{
  2335. z-index: 101;
  2336. margin: 20rpx 15rpx;
  2337. padding: 20rpx;
  2338. box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
  2339. background-color: #fff;
  2340. border-radius: 15rpx;
  2341. .title-box{
  2342. display: flex;
  2343. flex-direction: row;
  2344. align-items: center;
  2345. justify-content: space-between;
  2346. .title{
  2347. font-size: 32upx;
  2348. font-family: PingFang SC;
  2349. font-weight: bold;
  2350. color: #111111;
  2351. }
  2352. .more{
  2353. display: flex;
  2354. align-items: center;
  2355. justify-content: flex-end;
  2356. .text{
  2357. font-size: 24rpx;
  2358. font-family: PingFang SC;
  2359. color: #9B9B9B;
  2360. }
  2361. image{
  2362. margin-left: 10rpx;
  2363. width:15rpx;
  2364. height:20rpx;
  2365. }
  2366. }
  2367. }
  2368. .package-box{
  2369. padding: 20rpx 0rpx 0rpx;
  2370. display: flex;
  2371. align-items: flex-start;
  2372. justify-content: flex-start;
  2373. flex-wrap: wrap;
  2374. .item{
  2375. width: calc(50% - 20rpx);
  2376. border-radius: 15rpx;
  2377. margin: 10rpx;
  2378. display: flex;
  2379. flex-direction: column;
  2380. align-items: flex-start;
  2381. justify-content: flex-start;
  2382. &:last-child{
  2383. }
  2384. .top{
  2385. width:100%;
  2386. height:300rpx;
  2387. image{
  2388. border-radius: 15rpx 15rpx 0rpx 0rpx;
  2389. width:100%;
  2390. height:300rpx;
  2391. }
  2392. }
  2393. .bottom{
  2394. width: 100%;
  2395. margin-top: 15rpx;
  2396. .title{
  2397. font-weight: bold;
  2398. font-size: 28upx;
  2399. font-family: PingFang SC;
  2400. color: #111111;
  2401. }
  2402. .price-box{
  2403. margin-top: 10rpx;
  2404. display: flex;
  2405. align-items: center;
  2406. justify-content: space-between;
  2407. width: 100%;
  2408. .price{
  2409. padding: 5rpx 10rpx;
  2410. background-color: #018C39;
  2411. border-radius: 30rpx;
  2412. font-size: 20upx;
  2413. font-family: PingFang SC;
  2414. color: #ffffff;
  2415. }
  2416. .count{
  2417. font-size: 24upx;
  2418. font-family: PingFang SC;
  2419. color: #333333;
  2420. }
  2421. }
  2422. }
  2423. }
  2424. }
  2425. }
  2426. }
  2427. }
  2428. }
  2429. .official-account{
  2430. box-sizing: border-box;
  2431. width: 100%;
  2432. height: 100upx;
  2433. position: fixed;
  2434. bottom: 30upx;
  2435. z-index: 99;
  2436. padding: 0 20upx 180rpx 20upx;
  2437. }
  2438. // 消息
  2439. .message-box{
  2440. box-sizing: border-box;
  2441. width: 100%;
  2442. height: 84upx;
  2443. background: #F3FFFD;
  2444. border: 1px solid #C7E9E5;
  2445. box-shadow: 0px 4upx 12upx 0px rgba(90, 203, 138, 0.16);
  2446. border-radius: 16upx;
  2447. position: fixed;
  2448. left: 50%;
  2449. transform: translateX(-50%);
  2450. bottom: 30upx;
  2451. z-index: 99;
  2452. display: flex;
  2453. align-items: center;
  2454. justify-content: space-between;
  2455. padding: 0 20upx 0 30upx;
  2456. .left{
  2457. flex:1;
  2458. display: flex;
  2459. align-items: center;
  2460. image{
  2461. width: 24upx;
  2462. height: 24upx;
  2463. margin-right: 18upx;
  2464. }
  2465. .text{
  2466. width: 90%;
  2467. font-size: 28upx;
  2468. font-family: PingFang SC;
  2469. font-weight: 500;
  2470. color: #018C39;
  2471. }
  2472. }
  2473. .btn{
  2474. width: 100upx;
  2475. height: 48upx;
  2476. line-height: 48upx;
  2477. text-align: center;
  2478. font-size: 24upx;
  2479. font-family: PingFang SC;
  2480. font-weight: 500;
  2481. color: #FFFFFF;
  2482. border: 1px solid #D2E6FF;
  2483. background: linear-gradient(135deg, #018C39 0%, #1fbd2c 100%);
  2484. border-radius: 24upx;
  2485. margin-left: 30upx;
  2486. }
  2487. }
  2488. .contact-btn{
  2489. display: inline-block;
  2490. position: absolute;
  2491. top: 0;
  2492. left: 0;
  2493. width: 100%;
  2494. height: 100%;
  2495. opacity: 0;
  2496. }
  2497. .popup-box{
  2498. position: fixed;
  2499. top: 0;
  2500. right: 0;
  2501. left: 0;
  2502. bottom: 0;
  2503. z-index: 999;
  2504. display: flex;
  2505. justify-content: center;
  2506. align-items: center;
  2507. .info-mask {
  2508. position: fixed;
  2509. top: 0;
  2510. right: 0;
  2511. bottom: 0;
  2512. left: 0;
  2513. background-color: rgba($color: #000000, $alpha: 0.5);
  2514. z-index: 999;
  2515. }
  2516. .info-form {
  2517. z-index: 1000;
  2518. width: 450rpx;
  2519. display: flex;
  2520. flex-direction: column;
  2521. justify-content: center;
  2522. align-items: center;
  2523. position: relative;
  2524. image{
  2525. width::100%;
  2526. }
  2527. }
  2528. }
  2529. </style>