index.vue 60 KB

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