index.vue 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629
  1. <template>
  2. <!-- index.ttml -->
  3. <view :class="['container',themeType]">
  4. <view class="new-top">
  5. <view class="address">
  6. <view class="name" @tap="goCheckAddress">
  7. <image style="width: 28rpx; height: 36rpx" src="https://mall.zhaijieshi.cc/file/wx-dy/icon-map.png"
  8. mode="widthFix"></image>
  9. <text class="address-city">{{ addressInfo.city }}</text>
  10. <text class="jz-color address-name">{{ addressInfo.address }}</text>
  11. <!-- <text class="shop-name" wx:if="{{addressInfo.shopId!=0&&addressInfo.shopName}}">{{addressInfo.shopName}}</text> -->
  12. <image style="width: 10rpx; height: 24rpx" src="/static/images/new/arrow-right.png" mode="widthFix">
  13. </image>
  14. </view>
  15. <navigator url="/pages/category/search/search" class="input" style="flex: 1; text-align: right">
  16. <image style="width: 28rpx; height: 36rpx"
  17. src="https://mall.zhaijieshi.cc/file/wx-dy/icon-search.png" mode="widthFix"></image>
  18. </navigator>
  19. <!-- <view class="warning" v-if="addressInfo.shopId == 0">您的地址不在服务范围内,换一个试试</view> -->
  20. </view>
  21. <swiper class="banner" :indicator-dots="banner.length > 1 ? true : false" :autoplay="true" interval="3000"
  22. duration="1000" indicator-color="rgba(0, 192, 255, .2)" indicator-active-color="rgba(0, 192, 255)">
  23. <swiper-item v-for="(item, index) in banner" :key="index">
  24. <block v-if="item.link">
  25. <navigator :url="item.link">
  26. <image mode="aspectFill" :src="item.url"></image>
  27. </navigator>
  28. </block>
  29. <block v-else>
  30. <image mode="aspectFill" :src="item.url"></image>
  31. </block>
  32. </swiper-item>
  33. </swiper>
  34. </view>
  35. <!-- <view class="service-adv">
  36. <view class="adv-item">
  37. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-pz.png" mode="widthFix"></image>
  38. <view>专业培训 品质保证</view>
  39. </view>
  40. <view class="adv-item">
  41. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-fw.png" mode="widthFix"></image>
  42. <view>服务流程有标准</view>
  43. </view>
  44. <view class="adv-item">
  45. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-pz.png" mode="widthFix"></image>
  46. <view>全程保险 售后无忧</view>
  47. </view>
  48. </view> -->
  49. <!-- 分类 -->
  50. <view class="m-menu">
  51. <!--index拿前5个,最后一个固定所有-->
  52. <navigator :url="'/pages/category/category?id='+item.id" v-if="index<4" v-for="(item,index) in channel" :key="index" class="category-navi">
  53. <view class="category-item">
  54. <image :src="item.iconUrl" ></image>
  55. <!-- <view class="item-name">{{item.name}}</view>
  56. <view class="item-desc">{{item.desc}}</view> -->
  57. </view>
  58. </navigator>
  59. <!-- <navigator class="item" open-type="switchTab" url="/pages/tabBar/catalog/catalog">
  60. <image src="/static/images/quanbufenlei.png" background-size="cover"></image>
  61. <text>全部分类</text>
  62. </navigator> -->
  63. </view>
  64. <!-- <view class="new-category">
  65. <view class="cat-item">
  66. <navigator url="/pages/category/category?id=1036741">
  67. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-category1.png" mode="aspectFit"></image>
  68. </navigator>
  69. <view>3小时保洁</view>
  70. </view>
  71. <view class="cat-item">
  72. <navigator url="/pages/category/category?id=1036756">
  73. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-category2.png" mode="aspectFit"></image>
  74. </navigator>
  75. <view>精细擦窗</view>
  76. </view>
  77. <view class="cat-item">
  78. <view class="ndbb-wrapper">
  79. <navigator url="/pages/category/category?id=1036773">
  80. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-category3.png" mode="aspectFit"></image>
  81. </navigator>
  82. <view class="ndbb"></view>
  83. </view>
  84. <view>焕新大扫除</view>
  85. </view>
  86. <view class="cat-item">
  87. <navigator url="/pages/category/category?id=1036053">
  88. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-category4.png" mode="aspectFit"></image>
  89. </navigator>
  90. <view>厨房蒸洗</view>
  91. </view>
  92. <view class="cat-item">
  93. <navigator url="/pages/category/category?id=1036053">
  94. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-category5.png" mode="aspectFit"></image>
  95. </navigator>
  96. <view>浴室蒸洗</view>
  97. </view>
  98. </view> -->
  99. <!-- 推荐商品 -->
  100. <view class="ad-wrapper">
  101. <navigator url="/pages/category/category?id=1036756" class="hot-item-nav">
  102. <view class="hot-item">
  103. <image :src="'https://jzmall.lifejingzhi.com/file/jzmall/weixin/ad-02.png?'+randomNum"
  104. mode="widthFix"></image>
  105. </view>
  106. </navigator>
  107. <navigator url="/pages/category/category?id=1036038" class="hot-item-nav">
  108. <view class="hot-item">
  109. <image :src="'https://jzmall.lifejingzhi.com/file/jzmall/weixin/ad-01.png?' +randomNum"
  110. mode="widthFix"></image>
  111. </view>
  112. </navigator>
  113. <!-- <image src="{{'https://jzmall.lifejingzhi.com/file/jzmall/weixin/ad-kt.png?' +randomNum}}"
  114. mode="widthFix" class="kt-img" catchtap="goJoin"></image> -->
  115. </view>
  116. <!-- <view class="new-hot-good">
  117. <navigator :url="'/pages/goods/goods?id=' + baojie">
  118. <image :src="'https://mall.zhaijieshi.cc/file/wx-dy/goods-bj.png' + '?' + randomNum" mode="aspectFill">
  119. </image>
  120. </navigator>
  121. <navigator :url="'/pages/goods/goods?id=' + chachuang">
  122. <image :src="'https://mall.zhaijieshi.cc/file/wx-dy/goods-pl.png' + '?' + randomNum" mode="aspectFill">
  123. </image>
  124. </navigator>
  125. </view> -->
  126. <!-- 鲸致推荐 -->
  127. <!-- <view class="jz-hot">
  128. <view>鲸致推荐</view>
  129. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-hand.png" mode="aspectFill"></image>
  130. </view> -->
  131. <!-- <view class="search">
  132. <navigator url="/pages/category/search/search" class="input">
  133. <image style="width: 26rpx;height: 26rpx;margin-right:20rpx;" src="/static/images/new/search.png" mode="widthFix">
  134. </image>
  135. <text class="txt">搜索商品名称</text>
  136. </navigator>
  137. </view> -->
  138. <!--<view class="no-login" wx:if="{{!hasLogin}}">
  139. <view class="c">
  140. <text>您还没有登录</text>
  141. <button open-type="getUserInfo" bindgetuserinfo="goLogin">
  142. <image class="wechat" src="/static/images/wechat.png"></image>
  143. 点击授权微信登录
  144. </button>
  145. </view>
  146. </view>-->
  147. <view class="login">
  148. <view class="a-section a-popular" v-if="hotGoods.length > 0">
  149. <view class="h">
  150. <!-- @tap="goHotGoods" -->
  151. <view class="popular-title">
  152. <!-- <navigator url="../goods/hotGoods/hotGoods" class="popular-title"> -->
  153. <view class="title-left">
  154. <view class="txt1"></view>
  155. <view class="txt">鲸致推荐</view>
  156. </view>
  157. <view class="title-right">
  158. <!-- <text class="sub-color more"> 更多</text>
  159. <van-icon name="arrow" color="#85868A" /> -->
  160. </view>
  161. <!-- </navigator> -->
  162. </view>
  163. </view>
  164. <view class="b">
  165. <view v-for="(item, index) in hotGoods" :key="index">
  166. <navigator :url="'/pages/goods/goods?id=' + item.id" class="popular-item">
  167. <view class="item-img-wrapper">
  168. <!-- <image v-if="item.isNew" src="/static/images/new/isnew.png" class="isNew" mode="aspectFill"></image> -->
  169. <image class="img" :src="item.gallery.split(',')[0]" mode="aspectFill"></image>
  170. <!-- <view class="item-tag">{{item.categoryName}}</view> -->
  171. </view>
  172. <view class="item-main">
  173. <!-- <view class="new-item-left">
  174. <view class="new-real-price">¥{{ item.retailPrice }}</view>
  175. <view class="new-retail-price">¥{{ item.counterPrice }}</view>
  176. </view>
  177. <view class="new-item-right" :style="'background:'+themeCol">立即购买</view>
  178. -->
  179. <view class="item-left">
  180. <view style="display:flex;align-items:center;">
  181. <view class="self-tag">推荐</view>
  182. <text class="product-item-name">{{item.name}}</text>
  183. </view>
  184. <text class="sub-color item-brief">{{item.brief}}</text>
  185. </view>
  186. <view style="width: 180rpx;margin-top: 6rpx;">
  187. <view v-if="item.activited||item.counterPrice!=item.retailPrice"
  188. class="item-right counter-price">
  189. 市场价:¥{{item.counterPrice}}
  190. </view>
  191. <view class="item-right retail-price">
  192. <text v-if="item.activited" class="title">大促价:</text>
  193. <text class="unit">¥</text>
  194. <text v-if="!item.activited" class="price">{{item.retailPrice}}</text>
  195. <text v-else class="price">{{item.activityPrice}}</text>
  196. </view>
  197. </view>
  198. </view>
  199. <!-- 活动商品 显示样式 -->
  200. <!-- <view v-if="item.activited" class="activity">
  201. <view class="limit">
  202. </view>
  203. <view style="display: flex; align-items: center">
  204. <image class="clock" src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/clock.png"></image>
  205. <view class="time">距离活动仅剩{{ item.activityDay }}天</view>
  206. <image class="arrow" src="https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/arrow.png" />
  207. </view>
  208. </view> -->
  209. </navigator>
  210. </view>
  211. </view>
  212. </view>
  213. <!-- 专题精选 -->
  214. <view class="a-section a-topic" v-if="topics.length > 0">
  215. <view class="h">
  216. <view>
  217. <navigator url="/pages/topic/topic">
  218. <text class="txt">专题精选</text>
  219. </navigator>
  220. </view>
  221. </view>
  222. <view class="b">
  223. <view class="list">
  224. <view class="item" v-for="(item, index) in topics" :key="index">
  225. <navigator :url="'/pages/topic/topicDetail/topicDetail?id=' + item.id">
  226. <image class="img" :src="item.gallery[0]" background-size="cover"></image>
  227. <view class="np">
  228. <text class="name">{{ item.title }}</text>
  229. <text class="price">¥{{ item.price }}元起</text>
  230. </view>
  231. <text class="desc">{{ item.subtitle }}</text>
  232. </navigator>
  233. </view>
  234. </view>
  235. <navigator v-if="'topics.length > 0'" url="/pages/topic/topic" class="t">
  236. <view class="txt">更多其他专题 ></view>
  237. </navigator>
  238. </view>
  239. <!--旧格式专题
  240. <view class="b">
  241. <scroll-view scroll-x class="list">
  242. <view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
  243. <navigator url="../topicDetail/topicDetail?id={{item.id}}">
  244. <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
  245. <view class="np">
  246. <text class="name">{{item.title}}</text>
  247. <text class="price">¥{{item.price}}元起</text>
  248. </view>
  249. <text class="desc">{{item.subtitle}}</text>
  250. </navigator>
  251. </view>
  252. </scroll-view>
  253. <navigator url="/pages/category/category?id={{item.id}}" class="t">
  254. <view class="txt">{{'更多其他专题 >'}}</view>
  255. </navigator>
  256. </view>-->
  257. </view>
  258. <!-- 关于鲸致 -->
  259. <!-- <view class="about-jz">
  260. <view class="popular-title">
  261. <view class="title-left">
  262. <view class="devide-bar"></view>
  263. <view class="title-text">关于鲸致生活</view>
  264. </view>
  265. </view>
  266. <view class="jz-feature">
  267. <view class="feature-item">
  268. <text>家庭服务</text>
  269. <text>知名品牌</text>
  270. </view>
  271. <view class="devide-line"></view>
  272. <view class="feature-item">
  273. <text>自营人员</text>
  274. <text>标准服务</text>
  275. </view>
  276. <view class="devide-line"></view>
  277. <view class="feature-item">
  278. <text>100万+</text>
  279. <text>家庭客户</text>
  280. </view>
  281. <view class="devide-line"></view>
  282. <view class="feature-item">
  283. <text>100%</text>
  284. <text>技能培训</text>
  285. </view>
  286. <view class="devide-line"></view>
  287. <view class="feature-item">
  288. <text>中国平安</text>
  289. <text>保险保障</text>
  290. </view>
  291. </view>
  292. <view class="partner-title">鲸致合作</view>
  293. <image mode="widthFix" class="jzhz-img" src="https://mall.zhaijieshi.cc/file/jzmall/weixin/new/jzhz-0727.png">
  294. </image>
  295. <view class="jz-logo-wrapper">
  296. <image mode="widthFix" src="/static/images/new/jz-logo.png" class="jz-logo"></image>
  297. </view>
  298. <view class="service-tel sub-color">
  299. <view>客服热线:</view>
  300. <view bindtap="callPhone" class="phone-wrapper">
  301. <text>400-921-8987</text>
  302. <van-icon class="right-icon" name="phone-o" />
  303. </view>
  304. </view>
  305. <view class="jz-company">上海宅洁仕网络科技有限公司</view>
  306. </view> -->
  307. <!-- 关于鲸致 -->
  308. <view class="about-jz">
  309. <view class="popular-title">
  310. <view class="title-left">
  311. <view class="devide-bar"></view>
  312. <view class="title-text">关于鲸致生活</view>
  313. </view>
  314. </view>
  315. <view class="company-yj">
  316. <view class="yj-left">
  317. <view class="yj-head">愿景</view>
  318. <view>共建家政行业</view>
  319. <view>健康生态</view>
  320. </view>
  321. <view class="yj-right">
  322. <view class="com-sm">
  323. <view class="sm-head">使命</view>
  324. <view>让家政服务品质更高!让从业人员生活更美好!</view>
  325. </view>
  326. <view class="com-sm com-jzg">
  327. <view class="sm-head">价值观</view>
  328. <view>诚信 共赢 尊重 团结 敬业 客户第一 </view>
  329. </view>
  330. </view>
  331. </view>
  332. <view class="com-bottom-wrapper">
  333. <view class="bx-line">
  334. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/mall-uni/icon-bx.png"
  335. ></image>
  336. <view class="bx-head">中国平安承保</view>
  337. <view>全程保障 · 放心购买 · 服务无忧</view>
  338. </view>
  339. <!-- poster="https://jzmall.lifejingzhi.com/file/jzmall-dy/video-poster.png" -->
  340. <!-- <video class="jz-video" play-btn-position="bottom"
  341. src="https://media.lifejingzhi.com/sv/19c50f70-18f14278f8c/19c50f70-18f14278f8c.mp4"
  342. :autoplay="false" :show-play-btn="true" :loop="false" controls object-fit="cover"></video> -->
  343. <view class="jz-about">
  344. <view class="about-item">
  345. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-about1.png"
  346. class="about-img"></image>
  347. <view class="middle-text">家庭服务</view>
  348. <view class="small-text">一站式家政服务</view>
  349. </view>
  350. <view class="about-item">
  351. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-about4.png"
  352. class="about-img"></image>
  353. <view class="middle-text">专业培训</view>
  354. <view class="small-text">服务品质有保障</view>
  355. </view>
  356. <view class="about-item">
  357. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-about2.png"
  358. class="about-img"></image>
  359. <view class="middle-text">标准服务</view>
  360. <view class="small-text">可视化验收标准</view>
  361. </view>
  362. <view class="about-item">
  363. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-about3.png"
  364. class="about-img"></image>
  365. <view class="middle-text">值得信赖</view>
  366. <view class="small-text">200万+家庭客户</view>
  367. </view>
  368. <!-- <view class="about-item">
  369. <image mode="aspectFill" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-about5.png"
  370. class="about-img"></image>
  371. <view class="middle-text">保险保障</view>
  372. <view class="small-text">中国平安更保险</view>
  373. </view> -->
  374. </view>
  375. </view>
  376. <view class="jz-logo-wrapper">
  377. <image mode="widthFix" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/jzsh-slogan.png"
  378. class="jz-logo"></image>
  379. </view>
  380. </view>
  381. <!-- <view class="new-jz">
  382. <view class="jz-super">
  383. <view class="super-item">
  384. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-tag1.png" mode="aspectFill"></image>
  385. <view>100%专业培训</view>
  386. </view>
  387. <view class="super-item">
  388. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-tag2.png" mode="aspectFill"></image>
  389. <view>上户有保险</view>
  390. </view>
  391. <view class="super-item">
  392. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-tag3.png" mode="aspectFill"></image>
  393. <view>售后有保障</view>
  394. </view>
  395. <view class="super-item">
  396. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-tag4.png" mode="aspectFill"></image>
  397. <view>服务标准 品质保证</view>
  398. </view>
  399. </view>
  400. <view class="jz-service">
  401. <view class="service-item">
  402. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-city.png" mode="aspectFill"></image>
  403. <view>服务覆盖近百座城市</view>
  404. </view>
  405. <view class="service-item">
  406. <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-home.png" mode="aspectFill"></image>
  407. <view>100万客户中高端家庭选择</view>
  408. </view>
  409. </view>
  410. <image src="https://mall.zhaijieshi.cc/file/wx-dy/slogn.png" mode="aspectFill" class="img-slogan"></image>
  411. <view class="company-kf">鲸致生活全国统一客服专线</view>
  412. <view class="service-tel" @tap="callPhone">400-921-8987</view>
  413. </view> -->
  414. <!--
  415. <view class="a-section a-topic" wx:if="topics.length > 0" hidden="{{topics.length <= 0}}">
  416. <view class="h">
  417. <view>
  418. <navigator url="/pages/topic/topic">
  419. <text class="txt">专题精选</text>
  420. </navigator>
  421. </view>
  422. </view>
  423. <view class="b">
  424. <scroll-view scroll-x class="list">
  425. <view class="item" wx:for="{{topics}}" wx:for-index="index" wx:for-item="item" wx:key="id">
  426. <navigator url="../topicDetail/topicDetail?id={{item.id}}">
  427. <image class="img" src="{{item.picUrl}}" background-size="cover"></image>
  428. <view class="np">
  429. <text class="name">{{item.title}}</text>
  430. <text class="price">¥{{item.price}}元起</text>
  431. </view>
  432. <text class="desc">{{item.subtitle}}</text>
  433. </navigator>
  434. </view>
  435. </scroll-view>
  436. </view>
  437. </view>
  438. <view class="good-grid" wx:for="{{floorGoods}}" wx:key="id">
  439. <view class="h">
  440. <text>{{item.name}}</text>
  441. </view>
  442. <view class="b">
  443. <block wx:for="{{item.goodsList}}" wx:for-index="iindex" wx:for-item="iitem" wx:key="id">
  444. <view class="item {{iindex % 2 == 0 ? '' : 'item-b'}}">
  445. <navigator url="../goods/goods?id={{iitem.id}}" class="a">
  446. <image class="img" src="{{iitem.picUrl}}" background-size="cover"></image>
  447. <text class="name">{{iitem.name}}</text>
  448. <text class="price">¥{{iitem.retailPrice}}</text>
  449. </navigator>
  450. </view>
  451. </block>
  452. </view>
  453. <navigator url="/pages/category/category?id={{item.id}}" class="t">
  454. <view class="txt">{{'更多'+item.name+'好物 >'}}</view>
  455. </navigator>
  456. </view>-->
  457. </view>
  458. <!-- 广告 -->
  459. <!-- <view class="adv" bindtap='goinviteFriends'>
  460. <view style="width:100%;height:100%">
  461. <image src="/static/images/active/xyhxd.jpg" style="width:100%;height:100%" />
  462. </view>
  463. </view> -->
  464. <!-- 弹窗 蒙城 -->
  465. <view class="mask" @touchmove.stop.prevent="preventTouchMove" v-if="showModalStatus"></view>
  466. <!-- 弹窗 -->
  467. <view class="modalDlg" v-if="showModalStatus">
  468. <view class="huode">未使用优惠券</view>
  469. <view class="youhuiquan">{{ couponsData.length }}张优惠券</view>
  470. <view class="table">
  471. <view class="line" @tap="gocoupon" v-for="(item, index) in couponsData" :key="index">
  472. <view class="left">
  473. <view style="font-size: 36rpx; margin-top: 20rpx">
  474. <span v-if="item.voucherType == 1">¥{{ item.discount }}</span>
  475. <span v-if="item.voucherType == 2">{{ item.discount / 10 }}折</span>
  476. </view>
  477. <view style="display: block; font-size: 19rpx">
  478. <!-- {{item.name}} -->
  479. <span v-if="item.voucherType == 1">立减券</span>
  480. <span v-if="item.voucherType == 2">折扣券</span>
  481. </view>
  482. <view class="ljsy">立即使用</view>
  483. </view>
  484. <view class="right">
  485. <view class="mz">{{ item.desc }}</view>
  486. <view class="sj">有效期致 {{ item.endTime }}</view>
  487. </view>
  488. </view>
  489. </view>
  490. <button @tap="gocoupon">立即使用</button>
  491. <view @tap="guanbicoupon" class="guanbi">×</view>
  492. </view>
  493. <!-- 客服电话 -->
  494. <!-- <view class="phone-btn" bindtap="callPhone">
  495. <van-icon class="right-icon" name="phone-o" />
  496. </view> -->
  497. <contact-mov :pageX="10" :pageY="500"></contact-mov>
  498. </view>
  499. </template>
  500. <script>
  501. const util = require('../../utils/util.js');
  502. const api = require('../../config/api.js');
  503. const user = require('../../utils/user.js');
  504. const map = require('../../utils/map.js');
  505. const area = require('../../utils/area.js');
  506. //获取应用实例
  507. const app = getApp();
  508. import contactMov from '@/components/contact-mov';
  509. export default {
  510. components:{contactMov},
  511. data() {
  512. return {
  513. baojie: '',
  514. chachuang: '',
  515. newGoods: [],
  516. hotGoods: [],
  517. topics: [],
  518. brands: [],
  519. groupons: [],
  520. floorGoods: [],
  521. banner: [],
  522. channel: [],
  523. coupon: [],
  524. goodsCount: 0,
  525. hasLogin: true,
  526. city: '',
  527. //当前业务城市
  528. citys: [],
  529. cityIndex: 0,
  530. addressInfo: {
  531. city: '上海市',
  532. shopId: 0,
  533. lng: 121.4737,
  534. lat: 31.23037,
  535. address: '上海市浦东新区祖冲之路1505弄100号3栋',
  536. shopName: ''
  537. },
  538. showModalStatus: false,
  539. couponsData: [],
  540. randomNum: (Math.random() * 100000000).toFixed(0)
  541. };
  542. },
  543. // computed: {
  544. // themeType() {
  545. // return this.$store.state.themeType
  546. // }
  547. // }
  548. onShareAppMessage: function() {
  549. return {
  550. title: '保洁擦窗 家电清洗 专区收纳',
  551. desc: '鲸致生活,为美好生活',
  552. path: '/pages/index/index'
  553. };
  554. },
  555. onPullDownRefresh() {
  556. uni.showNavigationBarLoading(); //在标题栏中显示加载
  557. this.getIndexData();
  558. uni.hideNavigationBarLoading(); //完成停止加载
  559. uni.stopPullDownRefresh(); //停止下拉刷新
  560. },
  561. onReady: function() {
  562. console.log(this.$store.state.curThemeType);
  563. // if(this.$store.state.curThemeType=='yj'){
  564. // uni.setNavigationBarColor({
  565. // frontColor: '#ffffff',
  566. // backgroundColor:'#ff8219'
  567. // });
  568. // }
  569. },
  570. onLoad: function(options) {
  571. let that = this;
  572. // 页面初始化 options为页面跳转所带来的参数
  573. //邀好友60现金券走这里,然后要注册登陆
  574. console.log('options.rId' + options.rId);
  575. if (options.rId) {
  576. uni.setStorageSync('r_userid', options.rId);
  577. }
  578. var shareId;
  579. if (options.scene) {
  580. //这个scene的值存在则证明首页的开启来源于朋友圈分享的图,同时可以通过获取到的goodId的值跳转导航到对应的详情页
  581. var scene = decodeURIComponent(options.scene);
  582. console.log(scene);
  583. //console.info(scene); sId:分享id
  584. //goods,1181009;rId,10;sId:0
  585. //g,1181009;rId,10;sId:0 因为超长 缩写了goods
  586. //三种格式(1) rId,2 (2)g,3;rId,2 (3)g,3;rId,3;sId:10(阿姨开单分享)
  587. if (scene.indexOf('rId') >= 0 || scene.indexOf('r_userid') >= 0) {
  588. //兼容之前的r_userid
  589. let value = null;
  590. if (scene.indexOf(';') > 0) {
  591. //包含分号 表示是good和user两种
  592. value = scene.split(';')[1];
  593. //console.info(value);
  594. uni.setStorageSync('r_userid', value.split(',')[1]); //获取r_userid
  595. if (scene.indexOf('sId') >= 0 || scene.indexOf('shareId') >= 0) {
  596. //阿姨开单分享id ||兼容之前的shareId
  597. shareId = scene.split(';')[2].split(',')[1];
  598. }
  599. scene = scene.split(';')[0];
  600. //console.info(scene);
  601. } else {
  602. value = scene;
  603. uni.setStorageSync('r_userid', value.split(',')[1]);
  604. // 引荐人分享
  605. console.log('只有rid,进入引荐人');
  606. let rId = value.split(',')[1];
  607. uni.navigateTo({
  608. url: '../ucenter/parter/recommend/recommend?rId=' + rId
  609. });
  610. // return; //结束逻辑 不在往下进行;
  611. }
  612. }
  613. let info_arr = [];
  614. info_arr = scene.split(',');
  615. let _type = info_arr[0];
  616. let id = info_arr[1];
  617. console.info(_type);
  618. if (_type == 'goods' || _type == 'g') {
  619. if (shareId) {
  620. uni.navigateTo({
  621. url: '../goods/goods?id=' + id + '&shareId=' + shareId
  622. });
  623. } else {
  624. let rId = uni.getStorageSync('r_userid');
  625. if (!rId) {
  626. rId = 0;
  627. }
  628. uni.navigateTo({
  629. url: '../goods/goods?id=' + id + '&rId=' + rId
  630. });
  631. }
  632. } else if (_type == 'groupon') {
  633. uni.navigateTo({
  634. url: '../goods/goods?grouponId=' + id
  635. });
  636. } else {
  637. uni.navigateTo({
  638. url: '../index/index'
  639. });
  640. }
  641. }
  642. // 页面初始化 options为页面跳转所带来的参数
  643. if (options.grouponId) {
  644. //这个pageId的值存在则证明首页的开启来源于用户点击来首页,同时可以通过获取到的pageId的值跳转导航到对应的详情页
  645. uni.navigateTo({
  646. url: '../goods/goods?grouponId=' + options.grouponId
  647. });
  648. }
  649. // 页面初始化 options为页面跳转所带来的参数
  650. if (options.goodId) {
  651. //这个goodId的值存在则证明首页的开启来源于分享,同时可以通过获取到的goodId的值跳转导航到对应的详情页
  652. if (options.share_id) {
  653. uni.navigateTo({
  654. url: '../goods/goods?id=' + options.goodId + '&share_id=' + options.share_id
  655. });
  656. } else {
  657. uni.navigateTo({
  658. url: '../goods/goods?id=' + options.goodId
  659. });
  660. }
  661. }
  662. // 页面初始化 options为页面跳转所带来的参数
  663. if (options.orderId) {
  664. //这个orderId的值存在则证明首页的开启来源于订单模版通知,同时可以通过获取到的pageId的值跳转导航到对应的详情页
  665. uni.navigateTo({
  666. url: '../ucenter/orderDetail/orderDetail?id=' + options.orderId
  667. });
  668. }
  669. },
  670. onShow: function() {
  671. //this.naviToMiniProgram();
  672. this.getLocation();
  673. },
  674. onHide: function() {
  675. // 页面隐藏
  676. },
  677. onUnload: function() {
  678. // 页面关闭
  679. },
  680. methods: {
  681. getIndexData: function() {
  682. //新人登陆优惠券发放判断 !app.globalData.hasLogin ||,需要获取地址后再拿券
  683. if (uni.getStorageSync('userInfo').id == null) {
  684. console.log('未登陆进入' + app.globalData.hasLogin + '----' + uni.getStorageSync('userInfo').id);
  685. // this.youhuiquan();
  686. }
  687. uni.showLoading({
  688. title: '加载中'
  689. });
  690. let that = this;
  691. console.info(that.addressInfo.shopId);
  692. util.request(api.IndexUrl, {
  693. city: that.addressInfo.city,
  694. shopId: that.addressInfo.shopId
  695. }).then(function(res) {
  696. if (res.errno === 0) {
  697. that.setData({
  698. // newGoods: res.data.newGoodsList,
  699. hotGoods: res.data.hotGoodsList,
  700. // topics: res.data.topicList,
  701. //brands: res.data.brandList,
  702. //floorGoods: res.data.floorGoodsList,
  703. banner: res.data.banner,
  704. //groupons: res.data.grouponList,
  705. channel: res.data.channel,
  706. baojie: res.data.baojie,
  707. chachuang: res.data.chachuang
  708. //coupon: res.data.couponList
  709. });
  710. //console.info(res.data.banner);
  711. }
  712. uni.hideLoading();
  713. });
  714. // util.request(api.GoodsCount).then(function (res) {
  715. // that.setData({
  716. // goodsCount: res.data
  717. // });
  718. // });
  719. },
  720. youhuiquan() {
  721. //进入小程序优惠券展示
  722. let that = this;
  723. util.request(api.CouponRegister, {
  724. city: that.addressInfo.city
  725. }).then(function(res) {
  726. //console.info(res.data);
  727. if (res.errno === 0 && res.data.length > 0 && uni.getStorageSync('userInfo').nickName ==
  728. null) {
  729. that.setData({
  730. showModalStatus: true,
  731. couponsData: res.data
  732. });
  733. }
  734. });
  735. },
  736. getLocation() {
  737. let that = this;
  738. //获取地理位置 缓存中是否有地址
  739. /**
  740. * 分2重判断
  741. * 1:缓存中是否有地址
  742. * 2:未登录 取当前地理位置判断
  743. */
  744. var addressInfo = uni.getStorageSync('addressInfo');
  745. if (addressInfo) {
  746. console.info(addressInfo);
  747. that.setData({
  748. addressInfo: addressInfo
  749. });
  750. this.getIndexData();
  751. } else {
  752. if (!app.globalData.hasLogin) {
  753. //未登陆
  754. map.getCity()
  755. .then((res) => {
  756. that.setData({
  757. addressInfo: res
  758. });
  759. console.info(res);
  760. this.getIndexData();
  761. })
  762. .catch((res) => {
  763. //reject内容 1:未授权 2:不在服务范围 3:异常解析
  764. console.log('map fail');
  765. uni.showModal({
  766. title: '提醒',
  767. showCancel: false,
  768. content: '您未授权或非业务城市,已切换其他业务城市'
  769. });
  770. this.getdefaultCityShop();
  771. });
  772. }
  773. }
  774. },
  775. getdefaultCityShop() {
  776. let that = this;
  777. util.request(api.getDefaultCityShop, {}, 'get').then((res) => {
  778. if (res.errno === 0) {
  779. that.setData({
  780. addressInfo: res.data
  781. });
  782. uni.setStorageSync('addressInfo', res.data);
  783. that.getIndexData();
  784. } else {
  785. util.showErrorToast(res.errmsg);
  786. }
  787. });
  788. },
  789. goCheckAddress() {
  790. user.checkLogin()
  791. .then((res) => {
  792. uni.navigateTo({
  793. url: '/pages/ucenter/address/address'
  794. });
  795. })
  796. .catch((res) => {
  797. uni.navigateTo({
  798. url: '/pages/auth/login/login'
  799. });
  800. });
  801. },
  802. naviToMiniProgram() {
  803. let that = this;
  804. uni.showModal({
  805. title: '温馨提示',
  806. content: '尊敬的客户,鲸致生活小程序已迁移到【鲸致生活lifeplus】,您的相关权益也全部迁移保留,请点击确认 使用新小程序。',
  807. showCancel: false,
  808. //是否显示取消按钮
  809. cancelText: '取消',
  810. //默认是“取消”
  811. cancelColor: '#000000',
  812. //取消文字的颜色
  813. confirmText: '确认跳转',
  814. //默认是“确定”
  815. confirmColor: '#3cc51f',
  816. //确定文字的颜色
  817. success: function(res) {
  818. if (res.cancel) {
  819. //点击取消,wx.navigateBack
  820. } else {
  821. // 使用wx.navigateToMiniProgram跳转到小程序
  822. uni.navigateToMiniProgram({
  823. appId: 'wxf0a77f9993d8b60d',
  824. path: 'pages/index/index',
  825. envVersion: 'release',
  826. // 打开正式版
  827. success(res) {
  828. // 打开成功
  829. },
  830. fail: function(err) {
  831. console.log(err);
  832. that.naviToMiniProgram();
  833. }
  834. });
  835. }
  836. },
  837. fail: function(res) {
  838. //接口调用失败的回调函数,wx.navigateBack
  839. },
  840. complete: function(res) {
  841. console.info(res);
  842. //接口调用结束的回调函数(调用成功、失败都会执行)
  843. }
  844. });
  845. },
  846. goLogin: function(e) {
  847. if (e.detail.userInfo == null) {
  848. app.globalData.hasLogin = false;
  849. util.showErrorToast('微信授权失败');
  850. return;
  851. }
  852. app.globalData.hasLogin = false;
  853. uni.setStorageSync('userInfo', null);
  854. user.loginByWeixin(e.detail.userInfo)
  855. .then((res) => {
  856. //跳转注册页
  857. if (user.checkRegisted() == false) {
  858. uni.navigateTo({
  859. url: '/pages/auth/register/register'
  860. });
  861. } else {
  862. this.setData({
  863. hasLogin: true
  864. });
  865. }
  866. })
  867. .catch((err) => {
  868. app.globalData.hasLogin = false;
  869. });
  870. },
  871. getCoupon(e) {
  872. if (!app.globalData.hasLogin) {
  873. uni.navigateTo({
  874. url: '/pages/auth/login/login'
  875. });
  876. }
  877. let couponId = e.currentTarget.dataset.index;
  878. util.request(
  879. api.CouponReceive, {
  880. couponId: couponId
  881. },
  882. 'POST'
  883. ).then((res) => {
  884. if (res.errno === 0) {
  885. uni.showToast({
  886. title: '领取成功'
  887. });
  888. } else {
  889. util.showErrorToast(res.errmsg);
  890. }
  891. });
  892. },
  893. goinviteFriends(e) {
  894. console.log(app.globalData.hasLogin);
  895. //跳转到邀请页面
  896. if (app.globalData.hasLogin) {
  897. uni.navigateTo({
  898. url: '/pages/activity/invitefriends/inviteFriends'
  899. });
  900. } else {
  901. uni.navigateTo({
  902. url: '/pages/auth/login/login'
  903. });
  904. }
  905. },
  906. guanbicoupon() {
  907. this.setData({
  908. showModalStatus: false
  909. });
  910. },
  911. gocoupon(e) {
  912. this.setData({
  913. showModalStatus: false
  914. });
  915. if (!app.globalData.hasLogin) {
  916. uni.navigateTo({
  917. url: '/pages/auth/login/login'
  918. });
  919. }
  920. },
  921. myshowtost: function(v) {
  922. uni.showToast({
  923. title: v,
  924. icon: 'none',
  925. duration: 3000
  926. });
  927. },
  928. goCatalog() {
  929. uni.navigateTo({
  930. url: '/pages/tabBar/catalog/catalog'
  931. });
  932. },
  933. goHotGoods() {
  934. uni.navigateTo({
  935. url: '/pages/goods/hotGoods/hotGoods'
  936. });
  937. },
  938. callPhone: function() {
  939. uni.makePhoneCall({
  940. phoneNumber: '4009218987'
  941. });
  942. },
  943. preventTouchMove() {
  944. console.log('占位:函数 preventTouchMove 未声明');
  945. }
  946. }
  947. };
  948. </script>
  949. <style>
  950. page {
  951. height: 100vh;
  952. }
  953. .container {
  954. /* background: #fefefe; */
  955. background: #f8f8f8;
  956. padding: 20rpx 30rpx 30rpx;
  957. }
  958. /*弹窗*/
  959. .mask {
  960. width: 100%;
  961. height: 100%;
  962. position: fixed;
  963. top: 0;
  964. left: 0;
  965. background: #000;
  966. z-index: 9000;
  967. opacity: 0.7;
  968. }
  969. .guanbi {
  970. border: 5rpx solid #7f7f7f;
  971. position: absolute;
  972. bottom: -70rpx;
  973. color: #7f7f7f;
  974. font-size: 60rpx;
  975. border-radius: 40rpx;
  976. width: 60rpx;
  977. height: 60rpx;
  978. text-align: center;
  979. line-height: 57rpx;
  980. }
  981. .modalDlg {
  982. width: 580rpx;
  983. /* height: 750rpx; */
  984. position: fixed;
  985. top: 45%;
  986. left: 0;
  987. z-index: 9999;
  988. margin: -370rpx 85rpx;
  989. background-color: #fff;
  990. border-radius: 36rpx;
  991. display: flex;
  992. flex-direction: column;
  993. align-items: center;
  994. background: #ee4749;
  995. }
  996. .modalDlg button {
  997. margin-top: 30rpx;
  998. margin-bottom: 30rpx;
  999. font-size: 24rpx;
  1000. color: #47c5fa;
  1001. background: #e7f7ff;
  1002. border-radius: 30rpx;
  1003. }
  1004. .modalDlg .table {
  1005. /* border:1px solid red; */
  1006. overflow: scroll;
  1007. max-height: 600rpx;
  1008. min-height: 200rpx;
  1009. }
  1010. .modalDlg .huode {
  1011. color: white;
  1012. margin-top: 30rpx;
  1013. font-size: 30rpx;
  1014. }
  1015. .modalDlg .youhuiquan {
  1016. margin-top: 10rpx;
  1017. font-size: 24rpx;
  1018. color: white;
  1019. }
  1020. .modalDlg .line {
  1021. width: 520rpx;
  1022. /* border: 2px solid blue; */
  1023. background: white;
  1024. height: 140rpx;
  1025. border-radius: 30rpx;
  1026. overflow: hidden;
  1027. text-align: center;
  1028. margin-top: 20rpx;
  1029. }
  1030. .modalDlg .line .left {
  1031. width: 150rpx;
  1032. height: 140rpx;
  1033. background: #e7f7ff;
  1034. float: left;
  1035. }
  1036. .modalDlg .line .left .ljsy {
  1037. width: 100rpx;
  1038. font-size: 20rpx;
  1039. background: #47c5fa;
  1040. color: white;
  1041. margin: 0px auto;
  1042. border-radius: 20rpx;
  1043. margin-top: 5rpx;
  1044. }
  1045. .modalDlg .line .right .mz {
  1046. margin-top: 30rpx;
  1047. overflow: hidden;
  1048. color: black;
  1049. font-weight: 600;
  1050. font-size: 26rpx;
  1051. }
  1052. .modalDlg .line .right .sj {
  1053. color: #c8c5c5;
  1054. font-size: 20rpx;
  1055. margin-top: 20rpx;
  1056. }
  1057. .adv {
  1058. position: fixed;
  1059. left: 0rpx;
  1060. bottom: 0;
  1061. z-index: 100;
  1062. width: 750rpx;
  1063. height: 165rpx;
  1064. display: flex;
  1065. /* border: 1px solid red; */
  1066. }
  1067. .m-menu {
  1068. /* background: #fff; */
  1069. margin: 20rpx 0;
  1070. display: flex;
  1071. align-items: center;
  1072. flex-wrap: wrap;
  1073. height: 270rpx;
  1074. justify-content: space-between;
  1075. }
  1076. .category-item {
  1077. width: 164rpx;
  1078. height: 270rpx;
  1079. position: relative;
  1080. }
  1081. .item-name {
  1082. position: absolute;
  1083. left: 0;
  1084. right: 0;
  1085. top: 30rpx;
  1086. text-align: center;
  1087. font-size: 24rpx;
  1088. color: #fff;
  1089. margin: 0 0 12rpx 0;
  1090. }
  1091. .item-desc {
  1092. position: absolute;
  1093. left: 0;
  1094. right: 0;
  1095. top: 64rpx;
  1096. text-align: center;
  1097. font-size: 20rpx;
  1098. color: #fff;
  1099. }
  1100. .m-menu .item {
  1101. width: 245rpx;
  1102. height: 126rpx;
  1103. margin-top: 10rpx;
  1104. margin-bottom: 10rpx;
  1105. }
  1106. .hot-item {
  1107. /* padding: 0 20rpx; */
  1108. /* height: 148rpx; */
  1109. font-size: 0;
  1110. }
  1111. .hot-item image {
  1112. width: 690rpx;
  1113. height: 148rpx;
  1114. /* margin-bottom: 18rpx; */
  1115. }
  1116. .hot-item-nav{
  1117. border-radius: 32rpx; margin-bottom:18rpx
  1118. }
  1119. .m-menu image {
  1120. width: 168rpx;
  1121. height: 272rpx;
  1122. border-radius: 10rpx;
  1123. }
  1124. .m-menu text {
  1125. display: block;
  1126. font-size: 24rpx;
  1127. text-align: center;
  1128. margin: 0 auto;
  1129. line-height: 1;
  1130. color: #333;
  1131. }
  1132. .shoadow {
  1133. box-shadow: 1px 2px 2px 2px #f7f7f1;
  1134. }
  1135. .image-margin {
  1136. margin-bottom: 20rpx;
  1137. }
  1138. .a-section {
  1139. /* width: 750rpx; */
  1140. height: auto;
  1141. overflow: hidden;
  1142. /* margin-top: 20rpx; */
  1143. }
  1144. .a-section .h {
  1145. display: flex;
  1146. flex-flow: row nowrap;
  1147. align-items: center;
  1148. justify-content: center;
  1149. height: 92rpx;
  1150. padding:40rpx 0 20rpx;
  1151. }
  1152. .popular-title {
  1153. display: flex;
  1154. align-items: center;
  1155. justify-content: space-between;
  1156. height: 34rpx;
  1157. width: 100%;
  1158. }
  1159. .a-section .h .txt1 {
  1160. width: 4rpx;
  1161. height: 34rpx;
  1162. background: #09afff;
  1163. margin: 0 12rpx 0 0;
  1164. }
  1165. .devide-bar {
  1166. width: 4rpx;
  1167. height: 34rpx;
  1168. background: #09afff;
  1169. margin: 0 12rpx 0 0;
  1170. }
  1171. .title-text {
  1172. font-size: 33rpx;
  1173. font-weight: bold;
  1174. }
  1175. .title-left {
  1176. display: flex;
  1177. align-items: center;
  1178. height: 34rpx;
  1179. }
  1180. .title-right {
  1181. display: flex;
  1182. align-items: center;
  1183. height: 34rpx;
  1184. font-size: 24rpx;
  1185. }
  1186. .a-section .h .txt {
  1187. padding-right: 30rpx;
  1188. font-size: 33rpx;
  1189. font-weight: bold;
  1190. }
  1191. .a-brand .b {
  1192. width: 750rpx;
  1193. height: auto;
  1194. overflow: hidden;
  1195. position: relative;
  1196. }
  1197. .a-brand .wrap {
  1198. position: relative;
  1199. }
  1200. .a-brand .img {
  1201. position: absolute;
  1202. left: 0;
  1203. top: 0;
  1204. }
  1205. .a-brand .mt {
  1206. position: absolute;
  1207. z-index: 2;
  1208. padding: 27rpx 31rpx;
  1209. left: 0;
  1210. top: 0;
  1211. }
  1212. .a-brand .mt .brand {
  1213. display: block;
  1214. font-size: 33rpx;
  1215. height: 43rpx;
  1216. color: #fff;
  1217. }
  1218. .a-brand .mt .price,
  1219. .a-brand .mt .unit {
  1220. font-size: 25rpx;
  1221. color: #fff;
  1222. }
  1223. .a-brand .item-1 {
  1224. float: left;
  1225. width: 375rpx;
  1226. height: 252rpx;
  1227. overflow: hidden;
  1228. border-top: 1rpx solid #fff;
  1229. margin-left: 1rpx;
  1230. }
  1231. .a-brand .item-1:nth-child(2n + 1) {
  1232. margin-left: 0;
  1233. width: 374rpx;
  1234. }
  1235. .a-brand .item-1 .img {
  1236. width: 375rpx;
  1237. height: 253rpx;
  1238. }
  1239. .a-coupon {
  1240. width: 750rpx;
  1241. height: auto;
  1242. overflow: hidden;
  1243. }
  1244. .a-coupon .b .item {
  1245. position: relative;
  1246. height: 200rpx;
  1247. width: 700rpx;
  1248. background: linear-gradient(to right, #cfa568, #e3bf79);
  1249. margin-bottom: 10rpx;
  1250. margin-left: 30rpx;
  1251. margin-right: 30rpx;
  1252. padding-top: 30rpx;
  1253. }
  1254. .a-coupon .b .tag {
  1255. height: 32rpx;
  1256. background: #a48143;
  1257. padding-left: 16rpx;
  1258. padding-right: 16rpx;
  1259. position: absolute;
  1260. left: 20rpx;
  1261. color: #fff;
  1262. top: 20rpx;
  1263. font-size: 20rpx;
  1264. text-align: center;
  1265. line-height: 32rpx;
  1266. }
  1267. .a-coupon .b .content {
  1268. margin-top: 24rpx;
  1269. margin-left: 40rpx;
  1270. display: flex;
  1271. margin-right: 40rpx;
  1272. flex-direction: row;
  1273. }
  1274. .a-coupon .b .content .left {
  1275. flex: 1;
  1276. }
  1277. .a-coupon .b .discount {
  1278. font-size: 50rpx;
  1279. color: #b4282d;
  1280. }
  1281. .a-coupon .b .min {
  1282. color: #fff;
  1283. }
  1284. .a-coupon .b .content .right {
  1285. width: 400rpx;
  1286. }
  1287. .a-coupon .b .name {
  1288. font-size: 44rpx;
  1289. color: #fff;
  1290. margin-bottom: 14rpx;
  1291. }
  1292. .a-coupon .b .desc {
  1293. font-size: 24rpx;
  1294. color: #fff;
  1295. }
  1296. .a-coupon .b .time {
  1297. font-size: 24rpx;
  1298. color: #fff;
  1299. line-height: 30rpx;
  1300. }
  1301. .a-groupon {
  1302. width: 750rpx;
  1303. height: auto;
  1304. overflow: hidden;
  1305. }
  1306. .a-groupon .b .item {
  1307. border-top: 1px solid #d9d9d9;
  1308. margin: 0 20rpx;
  1309. height: 244rpx;
  1310. width: 710rpx;
  1311. }
  1312. .a-groupon .b .img {
  1313. margin-top: 12rpx;
  1314. margin-right: 12rpx;
  1315. float: left;
  1316. width: 220rpx;
  1317. height: 220rpx;
  1318. }
  1319. .a-groupon .b .right {
  1320. float: left;
  1321. height: 244rpx;
  1322. width: 476rpx;
  1323. display: flex;
  1324. flex-flow: row nowrap;
  1325. }
  1326. .a-groupon .b .text {
  1327. display: flex;
  1328. flex-wrap: nowrap;
  1329. flex-direction: column;
  1330. justify-content: center;
  1331. overflow: hidden;
  1332. height: 244rpx;
  1333. width: 476rpx;
  1334. }
  1335. .a-groupon .b .name {
  1336. float: left;
  1337. display: block;
  1338. color: #333;
  1339. line-height: 50rpx;
  1340. font-size: 30rpx;
  1341. }
  1342. .a-groupon .b .desc {
  1343. width: 476rpx;
  1344. display: block;
  1345. color: #999;
  1346. line-height: 50rpx;
  1347. font-size: 25rpx;
  1348. }
  1349. .a-groupon .b .price {
  1350. width: 476rpx;
  1351. display: flex;
  1352. color: #ab956d;
  1353. line-height: 50rpx;
  1354. font-size: 33rpx;
  1355. }
  1356. .a-groupon .b .counterPrice {
  1357. text-decoration: line-through;
  1358. font-size: 28rpx;
  1359. color: #999;
  1360. }
  1361. .a-groupon .b .retailPrice {
  1362. margin-left: 30rpx;
  1363. font-size: 28rpx;
  1364. color: #a98f76;
  1365. }
  1366. .a-new .b {
  1367. width: 750rpx;
  1368. height: auto;
  1369. overflow: hidden;
  1370. padding: 0 31rpx 45rpx 31rpx;
  1371. }
  1372. .a-new .b .item {
  1373. float: left;
  1374. width: 302rpx;
  1375. margin-top: 10rpx;
  1376. margin-left: 21rpx;
  1377. margin-right: 21rpx;
  1378. }
  1379. .a-new .b .item-b {
  1380. margin-left: 42rpx;
  1381. }
  1382. .a-new .b .img {
  1383. width: 298rpx;
  1384. height: 300rpx;
  1385. }
  1386. .a-new .b .name {
  1387. /*text-align: center;*/
  1388. display: block;
  1389. width: 302rpx;
  1390. height: 60rpx;
  1391. margin-bottom: 14rpx;
  1392. overflow: hidden;
  1393. font-size: 30rpx;
  1394. color: #333;
  1395. /*white-space: nowrap;*/
  1396. overflow: hidden;
  1397. text-overflow: ellipsis;
  1398. margin-top: 5rpx;
  1399. margin-left: 0rpx;
  1400. line-height: 1em;
  1401. /*行间距*/
  1402. }
  1403. .a-new .b .price {
  1404. display: block;
  1405. /*text-align: center;*/
  1406. line-height: 30rpx;
  1407. font-size: 30rpx;
  1408. color: darkred;
  1409. margin-left: 10rpx;
  1410. }
  1411. .a-new .b .brand {
  1412. font-size: 20rpx;
  1413. color: #a98f76;
  1414. display: block;
  1415. line-height: 30rpx;
  1416. margin-bottom: 5rpx;
  1417. margin-left: 12rpx;
  1418. }
  1419. .a-popular {
  1420. width: 690rpx;
  1421. height: auto;
  1422. overflow: hidden;
  1423. /* padding: 0 20rpx; */
  1424. margin: -18rpx 0 0;
  1425. }
  1426. .popular-item {
  1427. /* box-shadow: 0 0 10rpx 0 rgba(100, 100, 100, 0.2); */
  1428. border-radius: 20rpx;
  1429. margin: 0 0 20rpx 0;
  1430. min-height: 380rpx;
  1431. width: 690rpx;
  1432. background: #fff;
  1433. padding: 20rpx 20rpx 24rpx;
  1434. display: flex;
  1435. flex-direction: column;
  1436. }
  1437. .item-img-wrapper {
  1438. position: relative;
  1439. /* padding:20rpx;
  1440. background: #C4ECFF; */
  1441. border-radius: 20rpx;
  1442. font-size: 0;
  1443. }
  1444. .self-tag {
  1445. height: 28rpx;
  1446. background: #09afff;
  1447. color: #fff;
  1448. padding: 0 8rpx;
  1449. /* line-height: 28rpx; */
  1450. font-size: 20rpx;
  1451. margin: 0 12rpx 0 0;
  1452. border-radius: 4rpx;
  1453. }
  1454. .popular-item .product-item-name {
  1455. width: 380rpx;
  1456. overflow: hidden;
  1457. white-space: nowrap;
  1458. text-overflow: ellipsis;
  1459. font-size: 28rpx;
  1460. }
  1461. .popular-item .item-brief {
  1462. width: 400rpx;
  1463. overflow: hidden;
  1464. /* white-space: nowrap; */
  1465. text-overflow: ellipsis;
  1466. font-size: 20rpx;
  1467. display: -webkit-box;
  1468. color: #85868a;
  1469. -webkit-box-orient: vertical;
  1470. -webkit-line-clamp: 2;
  1471. margin-top: 5rpx;
  1472. /*超过两行省略号*/
  1473. }
  1474. .counter-price {
  1475. font-size: 20rpx;
  1476. text-decoration: line-through;
  1477. color: #2a2a2a;
  1478. line-height: 28rpx;
  1479. text-align: center;
  1480. }
  1481. .retail-price {
  1482. font-size: 32rpx;
  1483. font-weight: bold;
  1484. color: #dd483e;
  1485. text-align: center;
  1486. }
  1487. .retail-price .title {
  1488. font-size: 26rpx;
  1489. color: #dd483e;
  1490. line-height: 48rpx;
  1491. }
  1492. .retail-price .unit {
  1493. font-size: 21rpx;
  1494. font-weight: 400;
  1495. color: #dd483e;
  1496. }
  1497. .retail-price .price {
  1498. font-size: 32rpx;
  1499. font-weight: bold;
  1500. color: #dd483e;
  1501. margin-left: 10rpx;
  1502. }
  1503. /* 活动商品显示样式 */
  1504. .activity {
  1505. height: 75rpx;
  1506. background: linear-gradient(67deg, #4f43dd, #689cf2, #ba64e2);
  1507. border-radius: 10rpx;
  1508. display: flex;
  1509. justify-content: space-between;
  1510. flex-direction: row;
  1511. align-items: center;
  1512. }
  1513. .activity .clock {
  1514. width: 42rpx;
  1515. height: 42rpx;
  1516. margin-right: 10rpx;
  1517. }
  1518. .activity .time {
  1519. font-size: 20rpx;
  1520. font-weight: 400;
  1521. color: #f4f4f4;
  1522. line-height: 30rpx;
  1523. }
  1524. .activity .arrow {
  1525. width: 10rpx;
  1526. height: 16rpx;
  1527. margin-left: 10rpx;
  1528. margin-right: 10rpx;
  1529. }
  1530. .activity .limit {
  1531. width: 131rpx;
  1532. height: 32rpx;
  1533. background-image: url('https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/activity2.png');
  1534. background-size: 100% 100%;
  1535. color: #fff;
  1536. font-size: 23rpx;
  1537. text-align: center;
  1538. margin-left: 20rpx;
  1539. }
  1540. .a-popular .b .img {
  1541. width: 650rpx;
  1542. height: 400rpx;
  1543. border-radius: 20rpx;
  1544. }
  1545. .item-tag {
  1546. position: absolute;
  1547. left: 0;
  1548. top: 20rpx;
  1549. height: 32rpx;
  1550. width: 116rpx;
  1551. text-align: center;
  1552. color: #fff;
  1553. font-size: 22rpx;
  1554. background: #09afff;
  1555. border-radius: 0 32rpx 32rpx 0;
  1556. }
  1557. .item-main {
  1558. /* display: flex;
  1559. align-items: center;
  1560. justify-content: space-between;
  1561. height: 100rpx;
  1562. width: 690rpx;
  1563. margin: 20rpx 0 0;
  1564. background: url('https://mall.zhaijieshi.cc/file/wx-dy/price-bj.png') no-repeat center;
  1565. background-size: 100%;
  1566. padding: 0 42rpx 0 48rpx; */
  1567. display: flex;
  1568. /* align-items: center; */
  1569. justify-content: space-between;
  1570. height: 68rpx;
  1571. margin: 20rpx 0 10rpx;
  1572. padding-left:20rpx;
  1573. }
  1574. .item-sub {
  1575. display: flex;
  1576. align-items: center;
  1577. justify-content: space-between;
  1578. /* height: 20rpx; */
  1579. }
  1580. .item-left {
  1581. display: flex;
  1582. /* align-items: center; */
  1583. flex-direction: column;
  1584. }
  1585. .a-popular .b .right {
  1586. float: left;
  1587. height: 264rpx;
  1588. width: 456rpx;
  1589. display: flex;
  1590. flex-flow: row nowrap;
  1591. }
  1592. .a-popular .b .text {
  1593. display: flex;
  1594. flex-wrap: nowrap;
  1595. flex-direction: column;
  1596. justify-content: center;
  1597. overflow: hidden;
  1598. height: 264rpx;
  1599. width: 456rpx;
  1600. }
  1601. .a-popular .b .name {
  1602. width: 456rpx;
  1603. display: block;
  1604. color: #333;
  1605. line-height: 40rpx;
  1606. font-size: 30rpx;
  1607. }
  1608. .a-popular .b .desc {
  1609. width: 456rpx;
  1610. display: block;
  1611. color: #a98f76;
  1612. line-height: 50rpx;
  1613. font-size: 25rpx;
  1614. }
  1615. /*
  1616. .a-popular .b .price {
  1617. width: 456rpx;
  1618. display: block;
  1619. color: darkred;
  1620. line-height: 50rpx;
  1621. font-size: 33rpx;
  1622. } */
  1623. .a-popular .b .brand {
  1624. font-size: 20rpx;
  1625. color: #a98f76;
  1626. display: block;
  1627. line-height: 30rpx;
  1628. padding: 2rpx;
  1629. }
  1630. .a-topic .b {
  1631. /*height: 533rpx;*/
  1632. height: auto;
  1633. width: 750rpx;
  1634. padding: 0 0 48rpx 0;
  1635. }
  1636. .good-nva {
  1637. border: 1px #eee solid;
  1638. }
  1639. /*
  1640. .a-topic .b .list {
  1641. height: auto;
  1642. width: 750rpx;
  1643. white-space: nowrap;
  1644. }
  1645. .a-topic .b .item {
  1646. display: block;
  1647. height: 533rpx;
  1648. width: 680.5rpx;
  1649. margin-left: 30rpx;
  1650. overflow: hidden;
  1651. }
  1652. .a-topic .b .t {
  1653. height: 100rpx;
  1654. background: #fff;
  1655. display: flex;
  1656. align-items: center;
  1657. justify-content: center;
  1658. }
  1659. .a-topic .b .item:last-child {
  1660. margin-right: 30rpx;
  1661. }
  1662. .a-topic .b .img {
  1663. height: 387.5rpx;
  1664. width: 680.5rpx;
  1665. margin-bottom: 30rpx;
  1666. }
  1667. .a-topic .b .np {
  1668. height: 35rpx;
  1669. margin-bottom: 13.5rpx;
  1670. color: #333;
  1671. font-size: 30rpx;
  1672. }
  1673. .a-topic .b .np .price {
  1674. margin-left: 20.8rpx;
  1675. color: #ab956d;
  1676. }
  1677. .a-topic .b .np .discount {
  1678. width: 476rpx;
  1679. display: block;
  1680. color: #999;
  1681. line-height: 50rpx;
  1682. font-size: 25rpx;
  1683. }
  1684. .a-topic .b .desc {
  1685. display: block;
  1686. height: 30rpx;
  1687. color: #999;
  1688. font-size: 24rpx;
  1689. white-space: nowrap;
  1690. overflow: hidden;
  1691. text-overflow: ellipsis;
  1692. } */
  1693. .good-grid {
  1694. width: 750rpx;
  1695. height: auto;
  1696. overflow: hidden;
  1697. }
  1698. .good-grid .h {
  1699. display: flex;
  1700. flex-flow: row nowrap;
  1701. align-items: center;
  1702. justify-content: center;
  1703. height: 130rpx;
  1704. font-size: 33rpx;
  1705. color: #333;
  1706. }
  1707. .good-grid .b {
  1708. width: 750rpx;
  1709. padding: 0 6.25rpx;
  1710. height: auto;
  1711. overflow: hidden;
  1712. }
  1713. .good-grid .b .item {
  1714. float: left;
  1715. background: #fff;
  1716. width: 365rpx;
  1717. margin-bottom: 6.25rpx;
  1718. height: 452rpx;
  1719. overflow: hidden;
  1720. text-align: center;
  1721. }
  1722. .good-grid .b .item .a {
  1723. height: 452rpx;
  1724. width: 100%;
  1725. }
  1726. .good-grid .b .item-b {
  1727. margin-left: 6.25rpx;
  1728. }
  1729. .good-grid .item .img {
  1730. margin-top: 20rpx;
  1731. width: 302rpx;
  1732. height: 302rpx;
  1733. }
  1734. .good-grid .item .name {
  1735. display: block;
  1736. width: 365.625rpx;
  1737. padding: 0 20rpx;
  1738. overflow: hidden;
  1739. height: 35rpx;
  1740. margin: 11.5rpx 0 22rpx 0;
  1741. text-align: center;
  1742. font-size: 30rpx;
  1743. color: #333;
  1744. }
  1745. .good-grid .item .price {
  1746. display: block;
  1747. width: 365.625rpx;
  1748. height: 30rpx;
  1749. text-align: center;
  1750. font-size: 30rpx;
  1751. color: #a98f76;
  1752. }
  1753. .good-grid .t {
  1754. height: 100rpx;
  1755. background: #fff;
  1756. display: flex;
  1757. align-items: center;
  1758. justify-content: center;
  1759. }
  1760. .address {
  1761. padding: 0 34rpx 0 20rpx;
  1762. height: 66rpx;
  1763. display: flex;
  1764. align-items: center;
  1765. background: #fff;
  1766. border-radius: 66rpx;
  1767. justify-content: space-between;
  1768. margin:0 0 20rpx 0;
  1769. }
  1770. .address .name {
  1771. display: flex;
  1772. align-items: center;
  1773. /* height: 40rpx; */
  1774. width: 470rpx;
  1775. overflow: hidden;
  1776. float: left;
  1777. }
  1778. .address .shar {
  1779. background: #fff;
  1780. }
  1781. .address button::after {
  1782. border: none;
  1783. }
  1784. .address .shar image {
  1785. float: right;
  1786. width: 40rpx;
  1787. height: 40rpx;
  1788. margin-top: 6rpx;
  1789. /* border:1px solid red; */
  1790. }
  1791. .address .name .address-name {
  1792. height: 68rpx;
  1793. line-height: 70rpx;
  1794. text-overflow: ellipsis;
  1795. /* word-wrap: break-word; */
  1796. margin: 0 8rpx 0 12rpx;
  1797. white-space: nowrap;
  1798. overflow: hidden;
  1799. max-width: 216rpx;
  1800. font-size: 22rpx;
  1801. }
  1802. .address .warning {
  1803. font-size: 24rpx;
  1804. color: red;
  1805. margin-left: 40rpx;
  1806. line-height: 32rpx;
  1807. }
  1808. .search {
  1809. height: 68rpx;
  1810. width: 100%;
  1811. padding: 0 50rpx;
  1812. display: flex;
  1813. align-items: center;
  1814. margin: 0 0 20rpx 0;
  1815. }
  1816. .search .van-icon-search {
  1817. line-height: 59rpx;
  1818. color: #ffffff;
  1819. }
  1820. .search .input {
  1821. width: 648rpx;
  1822. height: 68rpx;
  1823. background: #fff;
  1824. border-radius: 68rpx;
  1825. /* border:1rpx solid gray; */
  1826. display: flex;
  1827. align-items: center;
  1828. justify-content: center;
  1829. }
  1830. .search .txt {
  1831. height: 42rpx;
  1832. line-height: 42rpx;
  1833. /* color: #ffffff; */
  1834. color: gray;
  1835. padding-left: 10rpx;
  1836. font-size: 30rpx;
  1837. }
  1838. .no-login {
  1839. width: 100%;
  1840. height: auto;
  1841. margin: 0 auto;
  1842. background-color: #fff;
  1843. }
  1844. .no-login .c {
  1845. width: 100%;
  1846. height: auto;
  1847. margin-top: 400rpx;
  1848. }
  1849. .no-login .c text {
  1850. margin: 0 auto;
  1851. display: block;
  1852. width: 258rpx;
  1853. height: 59rpx;
  1854. line-height: 29rpx;
  1855. text-align: center;
  1856. font-size: 35rpx;
  1857. }
  1858. .no-login button {
  1859. width: 90%;
  1860. margin: 0 auto;
  1861. color: #fff;
  1862. font-size: 30rpx;
  1863. height: 96rpx;
  1864. line-height: 96rpx;
  1865. right: 0;
  1866. display: flex;
  1867. justify-content: center;
  1868. align-items: center;
  1869. position: flex;
  1870. bottom: 0;
  1871. left: 0;
  1872. border-radius: 0;
  1873. padding: 0;
  1874. margin-left: 5%;
  1875. text-align: center;
  1876. border-radius: 6rpx;
  1877. letter-spacing: 3rpx;
  1878. background-color: #242a48;
  1879. /*background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);*/
  1880. }
  1881. .wechat {
  1882. width: 80rpx;
  1883. height: 80rpx;
  1884. margin-right: 15rpx;
  1885. }
  1886. /* 关于鲸致 */
  1887. .about-jz {
  1888. padding: 10rpx 0rpx 0;
  1889. }
  1890. .jzhz-img {
  1891. width: 710rpx;
  1892. }
  1893. .service-tel {
  1894. font-size: 20rpx;
  1895. text-align: center;
  1896. display: flex;
  1897. align-items: center;
  1898. justify-content: center;
  1899. }
  1900. .partner-title {
  1901. font-size: 30rpx;
  1902. margin: 40rpx 0 24rpx;
  1903. text-align: center;
  1904. font-weight: bold;
  1905. }
  1906. .jz-feature {
  1907. margin: 40rpx 0 0;
  1908. height: 60rpx;
  1909. display: flex;
  1910. align-items: center;
  1911. justify-content: space-between;
  1912. }
  1913. .devide-line {
  1914. height: 50rpx;
  1915. width: 2rpx;
  1916. background: #85868a;
  1917. }
  1918. .feature-item {
  1919. display: flex;
  1920. flex-direction: column;
  1921. justify-content: space-between;
  1922. font-size: 20rpx;
  1923. align-items: center;
  1924. height: 50rpx;
  1925. }
  1926. .jz-logo-wrapper {
  1927. text-align: center;
  1928. margin: 20rpx 0 10rpx;
  1929. height: 30rpx;
  1930. }
  1931. .jz-logo {
  1932. width: 306rpx;
  1933. height: 42rpx;
  1934. }
  1935. .jz-company {
  1936. color: #a4a4a4;
  1937. font-size: 20rpx;
  1938. margin: 24rpx 0 0;
  1939. text-align: center;
  1940. }
  1941. .member-price {
  1942. height: 34rpx;
  1943. display: flex;
  1944. align-items: center;
  1945. justify-content: flex-end;
  1946. }
  1947. .memberPrice {
  1948. font-size: 26rpx;
  1949. color: #dd483e;
  1950. margin: 0 0 0 30rpx;
  1951. }
  1952. .member-price-tag {
  1953. width: 120rpx;
  1954. height: 32rpx;
  1955. line-height: 32rpx;
  1956. background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
  1957. background-size: 100% 100%;
  1958. color: #5e3a11;
  1959. font-size: 22rpx;
  1960. padding: 0 8rpx 0 0;
  1961. text-align: right;
  1962. }
  1963. /* 新客角标 */
  1964. .isNew {
  1965. position: absolute;
  1966. width: 80rpx;
  1967. height: 120rpx;
  1968. right: 30rpx;
  1969. }
  1970. .phone-btn {
  1971. position: fixed;
  1972. z-index: 999;
  1973. right: 20rpx;
  1974. top: 500rpx;
  1975. font-size: 60rpx;
  1976. animation-iteration-count: infinite;
  1977. width: 100rpx;
  1978. height: 100rpx;
  1979. border-radius: 100rpx;
  1980. background: rgba(255, 255, 255, 0.8);
  1981. display: flex;
  1982. align-items: center;
  1983. justify-content: center;
  1984. color: #09afff;
  1985. }
  1986. .phone-wrapper {
  1987. display: flex;
  1988. align-items: center;
  1989. }
  1990. .right-icon {
  1991. color: #09afff;
  1992. font-size: 30rpx;
  1993. margin-left: 6rpx;
  1994. }
  1995. .shop-name {
  1996. font-size: 24rpx;
  1997. border: 2rpx solid #09afff;
  1998. line-height: 30rpx;
  1999. padding: 0 8rpx;
  2000. border-radius: 8rpx;
  2001. margin: 0 8rpx 0 0;
  2002. word-break: keep-all;
  2003. max-width: 240rpx;
  2004. overflow: hidden;
  2005. text-overflow: ellipsis;
  2006. }
  2007. .new-top {
  2008. /* padding: 20rpx 30rpx 0;
  2009. background: linear-gradient(180deg, #09afff 10%, #f8f8f8 90%);
  2010. margin-bottom: 20rpx; */
  2011. }
  2012. .banner {
  2013. width: 690rpx;
  2014. height: 462rpx;
  2015. z-index: 20;
  2016. }
  2017. .banner image {
  2018. width: 690rpx;
  2019. height: 462rpx;
  2020. }
  2021. .address-city {
  2022. font-size: 30rpx;
  2023. margin-left: 8rpx;
  2024. white-space: nowrap;
  2025. }
  2026. .service-adv {
  2027. width: 690rpx;
  2028. height: 46rpx;
  2029. background: #def6ff;
  2030. border-radius: 10rpx;
  2031. margin: 0 30rpx 20rpx;
  2032. display: flex;
  2033. align-items: center;
  2034. justify-content: space-between;
  2035. padding: 0 30rpx;
  2036. }
  2037. .adv-item {
  2038. height: 46rpx;
  2039. display: flex;
  2040. align-items: center;
  2041. }
  2042. .adv-item image {
  2043. width: 20rpx;
  2044. height: 24rpx;
  2045. margin-right: 6rpx;
  2046. }
  2047. .adv-item view {
  2048. color: #00c0ff;
  2049. font-size: 20rpx;
  2050. }
  2051. .new-hot-good {
  2052. height: 200rpx;
  2053. width: 690rpx;
  2054. margin: 0 30rpx;
  2055. display: flex;
  2056. align-items: center;
  2057. justify-content: space-between;
  2058. }
  2059. .new-hot-good image {
  2060. width: 334rpx;
  2061. height: 200rpx;
  2062. }
  2063. .jz-hot {
  2064. height: 30rpx;
  2065. margin: 30rpx 30rpx 20rpx 30rpx;
  2066. display: flex;
  2067. align-items: center;
  2068. }
  2069. .jz-hot view {
  2070. font-size: 30rpx;
  2071. /* font-weight: bold; */
  2072. }
  2073. .jz-hot image {
  2074. width: 26rpx;
  2075. height: 26rpx;
  2076. margin-left: 10rpx;
  2077. }
  2078. .new-real-price {
  2079. color: #ff483c;
  2080. font-size: 42rpx;
  2081. }
  2082. .new-retail-price {
  2083. text-decoration: line-through;
  2084. color: #666666;
  2085. font-size: 28rpx;
  2086. margin-left: 28rpx;
  2087. padding-bottom: 6rpx;
  2088. }
  2089. .new-item-right {
  2090. width: 162rpx;
  2091. height: 50rpx;
  2092. line-height: 50rpx;
  2093. background: #00c0ff;
  2094. border-radius: 50rpx;
  2095. font-size: 24rpx;
  2096. text-align: center;
  2097. color: #fff;
  2098. }
  2099. .new-item-left {
  2100. display: flex;
  2101. align-items: flex-end;
  2102. }
  2103. .new-jz {
  2104. width: 750rpx;
  2105. padding: 0 30rpx 44rpx;
  2106. background: #fff;
  2107. }
  2108. .jz-super {
  2109. height: 166rpx;
  2110. display: flex;
  2111. align-items: center;
  2112. justify-content: space-between;
  2113. border-bottom: 2rpx solid #f4f4f4;
  2114. }
  2115. .super-item {
  2116. display: flex;
  2117. align-items: center;
  2118. flex: 1;
  2119. flex-direction: column;
  2120. }
  2121. .super-item image {
  2122. width: 56rpx;
  2123. height: 56rpx;
  2124. margin-bottom: 20rpx;
  2125. }
  2126. .super-item view {
  2127. color: #00c0ff;
  2128. font-size: 20rpx;
  2129. height: 20rpx;
  2130. line-height: 20rpx;
  2131. }
  2132. .jz-service {
  2133. height: 92rpx;
  2134. display: flex;
  2135. align-items: center;
  2136. justify-content: space-between;
  2137. padding: 0 44rpx;
  2138. }
  2139. .service-item {
  2140. display: flex;
  2141. align-items: center;
  2142. }
  2143. .service-item image {
  2144. width: 28rpx;
  2145. height: 28rpx;
  2146. margin-right: 8rpx;
  2147. }
  2148. .service-item view {
  2149. color: #00c0ff;
  2150. font-size: 24rpx;
  2151. /* font-weight: bold; */
  2152. }
  2153. .img-slogan {
  2154. width: 446rpx;
  2155. height: 60rpx;
  2156. margin: 0 122rpx;
  2157. }
  2158. .company-kf {
  2159. color: #00c0ff;
  2160. text-align: center;
  2161. font-size: 20rpx;
  2162. margin: 28rpx 0 12rpx 0;
  2163. height: 20rpx;
  2164. line-height: 20rpx;
  2165. }
  2166. .service-tel {
  2167. color: #00c0ff;
  2168. text-align: center;
  2169. font-size: 20rpx;
  2170. font-weight: bold;
  2171. width: 230rpx;
  2172. margin: 0 230rpx;
  2173. }
  2174. .new-category {
  2175. width: 690rpx;
  2176. height: 140rpx;
  2177. margin: 0 30rpx 30rpx;
  2178. display: flex;
  2179. align-items: center;
  2180. justify-content: space-between;
  2181. background: #ffffff;
  2182. border-radius: 20rpx;
  2183. /* padding:0 24rpx; */
  2184. }
  2185. .cat-item {
  2186. display: flex;
  2187. flex-direction: column;
  2188. flex: 1;
  2189. align-items: center;
  2190. }
  2191. .cat-item image {
  2192. height: 62rpx;
  2193. width: 70rpx;
  2194. margin-bottom: 14rpx;
  2195. }
  2196. .cat-item view {
  2197. color: #161616;
  2198. font-size: 26rpx;
  2199. height: 26rpx;
  2200. line-height: 26rpx;
  2201. }
  2202. .cat-item .ndbb-wrapper {
  2203. height: 62rpx;
  2204. width: 70rpx;
  2205. position: relative;
  2206. margin-top: 10rpx;
  2207. margin-bottom: 14rpx;
  2208. }
  2209. .cat-item .ndbb {
  2210. position: absolute;
  2211. background: url('https://mall.zhaijieshi.cc/file/wx-dy/icon-ndbb.png') no-repeat center;
  2212. background-size: 68rpx 24rpx;
  2213. top: -12rpx;
  2214. left: 48rpx;
  2215. width: 70rpx;
  2216. height: 24rpx;
  2217. }
  2218. .jz-video {
  2219. width: 690rpx;
  2220. height: 380rpx;
  2221. border-radius: 12rpx;
  2222. margin: 20rpx 0;
  2223. }
  2224. .jz-about {
  2225. /* width: 690rpx; */
  2226. height: 220rpx;
  2227. padding: 0 4rpx;
  2228. display: flex;
  2229. align-items: center;
  2230. justify-content: space-between;
  2231. }
  2232. .about-item {
  2233. display: flex;
  2234. flex-direction: column;
  2235. align-items: center;
  2236. flex: 1;
  2237. }
  2238. .about-item image {
  2239. width: 80rpx;
  2240. height: 80rpx;
  2241. margin-bottom: 20rpx;
  2242. }
  2243. .about-item .middle-text {
  2244. height: 26rpx;
  2245. font-size: 26rpx;
  2246. color: #000000;
  2247. line-height: 26rpx;
  2248. margin-bottom: 18rpx;
  2249. }
  2250. .about-item .small-text {
  2251. font-size: 20rpx;
  2252. color: #999999;
  2253. line-height: 20rpx;
  2254. height: 20rpx;
  2255. }
  2256. .category-navi {
  2257. border-radius: 32rpx;
  2258. }
  2259. .company-yj{
  2260. display: flex;
  2261. justify-content: space-between;
  2262. margin:20rpx 0;
  2263. }
  2264. .yj-left{
  2265. width:200rpx;
  2266. height:260rpx;
  2267. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-yj.png') no-repeat center;
  2268. background-size: 100% 100%;
  2269. padding:32rpx 0 0 40rpx;
  2270. }
  2271. .yj-left view{
  2272. color: #2BB9FE;
  2273. font-size: 20rpx;
  2274. line-height: 26rpx;
  2275. }
  2276. .yj-left view.yj-head{
  2277. font-size: 26rpx;
  2278. margin-bottom:20rpx;
  2279. height:26rpx;
  2280. line-height: 26rpx;
  2281. }
  2282. .yj-right{
  2283. height:260rpx;
  2284. width:480rpx;
  2285. display: flex;
  2286. flex-direction: column;
  2287. justify-content: space-between;
  2288. }
  2289. .com-sm{
  2290. width:480rpx;
  2291. height:124rpx;
  2292. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-sm.png') no-repeat center;
  2293. background-size: 100% 100%;
  2294. padding:30rpx 0 0 40rpx;
  2295. }
  2296. .com-sm.com-jzg{
  2297. background-image: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-jzg.png')
  2298. }
  2299. .com-sm view{
  2300. color: #FF682D;;
  2301. font-size: 20rpx;
  2302. line-height: 20rpx;
  2303. height:20rpx;
  2304. }
  2305. .com-sm.com-jzg view{
  2306. color: #F04445;
  2307. }
  2308. .com-sm view.sm-head{
  2309. height:26rpx;
  2310. line-height: 26rpx;
  2311. font-size: 26rpx;
  2312. margin-bottom:20rpx;
  2313. }
  2314. .bx-line{
  2315. height:62rpx;
  2316. padding:0rpx 0 26rpx;
  2317. display: flex;
  2318. align-items: center;
  2319. justify-content: center;
  2320. border-bottom: 1rpx solid #Eee;
  2321. }
  2322. .bx-line image{
  2323. width:28rpx;
  2324. height:36rpx;
  2325. }
  2326. .bx-line view{
  2327. font-size: 24rpx;
  2328. color: #000000;
  2329. }
  2330. .bx-line view.bx-head{
  2331. font-size: 32rpx;
  2332. font-weight: bold;
  2333. margin:0 18rpx 0 10rpx;
  2334. }
  2335. .com-bottom-wrapper{
  2336. background: #FFFFFF;
  2337. border-radius: 14rpx;
  2338. padding:32rpx 20rpx 0;
  2339. }
  2340. </style>