index.vue 59 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652
  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. this.checkAndClearUserId();
  670. },
  671. onShow: function() {
  672. //this.naviToMiniProgram();
  673. this.getLocation();
  674. },
  675. onHide: function() {
  676. // 页面隐藏
  677. },
  678. onUnload: function() {
  679. // 页面关闭
  680. },
  681. methods: {
  682. getCurrentEnvironment: function () {
  683. // #ifdef MP-TOUTIAO
  684. let s= tt.getEnvInfoSync();
  685. console.log("当前环境:"+s.microapp.envType);
  686. // #endif
  687. return s.microapp.envType;
  688. },
  689. checkAndClearUserId:function() {
  690. const currentEnv = this.getCurrentEnvironment();
  691. const lastEnv = uni.getStorageSync('lastEnv');
  692. if ((lastEnv && lastEnv !== currentEnv) || (!lastEnv&&!app.globalData.hasLogin)) {
  693. app.globalData.userInfo= null;
  694. app.globalData.hasLogin = false;
  695. uni.removeStorageSync('token');
  696. uni.removeStorageSync('userInfo');
  697. uni.removeStorageSync('addressInfo');
  698. uni.removeStorageSync('openId');
  699. }
  700. uni.setStorageSync('lastEnv', currentEnv);
  701. },
  702. getIndexData: function() {
  703. //新人登陆优惠券发放判断 !app.globalData.hasLogin ||,需要获取地址后再拿券
  704. if (uni.getStorageSync('userInfo').id == null) {
  705. console.log('未登陆进入' + app.globalData.hasLogin + '----' + uni.getStorageSync('userInfo').id);
  706. // this.youhuiquan();
  707. }
  708. uni.showLoading({
  709. title: '加载中'
  710. });
  711. let that = this;
  712. console.info(that.addressInfo.shopId);
  713. util.request(api.IndexUrl, {
  714. city: that.addressInfo.city,
  715. shopId: that.addressInfo.shopId
  716. }).then(function(res) {
  717. if (res.errno === 0) {
  718. that.setData({
  719. // newGoods: res.data.newGoodsList,
  720. hotGoods: res.data.hotGoodsList,
  721. // topics: res.data.topicList,
  722. //brands: res.data.brandList,
  723. //floorGoods: res.data.floorGoodsList,
  724. banner: res.data.banner,
  725. //groupons: res.data.grouponList,
  726. channel: res.data.channel,
  727. baojie: res.data.baojie,
  728. chachuang: res.data.chachuang
  729. //coupon: res.data.couponList
  730. });
  731. //console.info(res.data.banner);
  732. }
  733. uni.hideLoading();
  734. });
  735. // util.request(api.GoodsCount).then(function (res) {
  736. // that.setData({
  737. // goodsCount: res.data
  738. // });
  739. // });
  740. },
  741. youhuiquan() {
  742. //进入小程序优惠券展示
  743. let that = this;
  744. util.request(api.CouponRegister, {
  745. city: that.addressInfo.city
  746. }).then(function(res) {
  747. //console.info(res.data);
  748. if (res.errno === 0 && res.data.length > 0 && uni.getStorageSync('userInfo').nickName ==
  749. null) {
  750. that.setData({
  751. showModalStatus: true,
  752. couponsData: res.data
  753. });
  754. }
  755. });
  756. },
  757. getLocation() {
  758. let that = this;
  759. //获取地理位置 缓存中是否有地址
  760. /**
  761. * 分2重判断
  762. * 1:缓存中是否有地址
  763. * 2:未登录 取当前地理位置判断
  764. */
  765. var addressInfo = uni.getStorageSync('addressInfo');
  766. if (addressInfo) {
  767. console.info(addressInfo);
  768. that.setData({
  769. addressInfo: addressInfo
  770. });
  771. this.getIndexData();
  772. } else {
  773. if (!app.globalData.hasLogin) {
  774. //未登陆
  775. map.getCity()
  776. .then((res) => {
  777. that.setData({
  778. addressInfo: res
  779. });
  780. console.info(res);
  781. this.getIndexData();
  782. })
  783. .catch((res) => {
  784. //reject内容 1:未授权 2:不在服务范围 3:异常解析
  785. console.log('map fail');
  786. // uni.showModal({
  787. // title: '提醒',
  788. // showCancel: false,
  789. // content: '您未授权或非业务城市,已切换其他业务城市'
  790. // });
  791. this.getdefaultCityShop();
  792. });
  793. }
  794. }
  795. },
  796. getdefaultCityShop() {
  797. let that = this;
  798. util.request(api.getDefaultCityShop, {}, 'get').then((res) => {
  799. if (res.errno === 0) {
  800. that.setData({
  801. addressInfo: res.data
  802. });
  803. uni.setStorageSync('addressInfo', res.data);
  804. that.getIndexData();
  805. } else {
  806. util.showErrorToast(res.errmsg);
  807. }
  808. });
  809. },
  810. goCheckAddress() {
  811. user.checkLogin()
  812. .then((res) => {
  813. uni.navigateTo({
  814. url: '/pages/ucenter/address/address'
  815. });
  816. })
  817. .catch((res) => {
  818. uni.navigateTo({
  819. url: '/pages/auth/login/login'
  820. });
  821. });
  822. },
  823. naviToMiniProgram() {
  824. let that = this;
  825. uni.showModal({
  826. title: '温馨提示',
  827. content: '尊敬的客户,鲸致生活小程序已迁移到【鲸致生活lifeplus】,您的相关权益也全部迁移保留,请点击确认 使用新小程序。',
  828. showCancel: false,
  829. //是否显示取消按钮
  830. cancelText: '取消',
  831. //默认是“取消”
  832. cancelColor: '#000000',
  833. //取消文字的颜色
  834. confirmText: '确认跳转',
  835. //默认是“确定”
  836. confirmColor: '#3cc51f',
  837. //确定文字的颜色
  838. success: function(res) {
  839. if (res.cancel) {
  840. //点击取消,wx.navigateBack
  841. } else {
  842. // 使用wx.navigateToMiniProgram跳转到小程序
  843. uni.navigateToMiniProgram({
  844. appId: 'wxf0a77f9993d8b60d',
  845. path: 'pages/index/index',
  846. envVersion: 'release',
  847. // 打开正式版
  848. success(res) {
  849. // 打开成功
  850. },
  851. fail: function(err) {
  852. console.log(err);
  853. that.naviToMiniProgram();
  854. }
  855. });
  856. }
  857. },
  858. fail: function(res) {
  859. //接口调用失败的回调函数,wx.navigateBack
  860. },
  861. complete: function(res) {
  862. console.info(res);
  863. //接口调用结束的回调函数(调用成功、失败都会执行)
  864. }
  865. });
  866. },
  867. goLogin: function(e) {
  868. if (e.detail.userInfo == null) {
  869. app.globalData.hasLogin = false;
  870. util.showErrorToast('微信授权失败');
  871. return;
  872. }
  873. app.globalData.hasLogin = false;
  874. uni.setStorageSync('userInfo', null);
  875. user.loginByWeixin(e.detail.userInfo)
  876. .then((res) => {
  877. //跳转注册页
  878. if (user.checkRegisted() == false) {
  879. uni.navigateTo({
  880. url: '/pages/auth/register/register'
  881. });
  882. } else {
  883. this.setData({
  884. hasLogin: true
  885. });
  886. }
  887. })
  888. .catch((err) => {
  889. app.globalData.hasLogin = false;
  890. });
  891. },
  892. getCoupon(e) {
  893. if (!app.globalData.hasLogin) {
  894. uni.navigateTo({
  895. url: '/pages/auth/login/login'
  896. });
  897. }
  898. let couponId = e.currentTarget.dataset.index;
  899. util.request(
  900. api.CouponReceive, {
  901. couponId: couponId
  902. },
  903. 'POST'
  904. ).then((res) => {
  905. if (res.errno === 0) {
  906. uni.showToast({
  907. title: '领取成功'
  908. });
  909. } else {
  910. util.showErrorToast(res.errmsg);
  911. }
  912. });
  913. },
  914. goinviteFriends(e) {
  915. console.log(app.globalData.hasLogin);
  916. //跳转到邀请页面
  917. if (app.globalData.hasLogin) {
  918. uni.navigateTo({
  919. url: '/pages/activity/invitefriends/inviteFriends'
  920. });
  921. } else {
  922. uni.navigateTo({
  923. url: '/pages/auth/login/login'
  924. });
  925. }
  926. },
  927. guanbicoupon() {
  928. this.setData({
  929. showModalStatus: false
  930. });
  931. },
  932. gocoupon(e) {
  933. this.setData({
  934. showModalStatus: false
  935. });
  936. if (!app.globalData.hasLogin) {
  937. uni.navigateTo({
  938. url: '/pages/auth/login/login'
  939. });
  940. }
  941. },
  942. myshowtost: function(v) {
  943. uni.showToast({
  944. title: v,
  945. icon: 'none',
  946. duration: 3000
  947. });
  948. },
  949. goCatalog() {
  950. uni.navigateTo({
  951. url: '/pages/tabBar/catalog/catalog'
  952. });
  953. },
  954. goHotGoods() {
  955. uni.navigateTo({
  956. url: '/pages/goods/hotGoods/hotGoods'
  957. });
  958. },
  959. callPhone: function() {
  960. uni.makePhoneCall({
  961. phoneNumber: '4009218987'
  962. });
  963. },
  964. preventTouchMove() {
  965. console.log('占位:函数 preventTouchMove 未声明');
  966. }
  967. }
  968. };
  969. </script>
  970. <style>
  971. page {
  972. height: 100vh;
  973. }
  974. .container {
  975. /* background: #fefefe; */
  976. background: #f8f8f8;
  977. padding: 20rpx 30rpx 30rpx;
  978. }
  979. /*弹窗*/
  980. .mask {
  981. width: 100%;
  982. height: 100%;
  983. position: fixed;
  984. top: 0;
  985. left: 0;
  986. background: #000;
  987. z-index: 9000;
  988. opacity: 0.7;
  989. }
  990. .guanbi {
  991. border: 5rpx solid #7f7f7f;
  992. position: absolute;
  993. bottom: -70rpx;
  994. color: #7f7f7f;
  995. font-size: 60rpx;
  996. border-radius: 40rpx;
  997. width: 60rpx;
  998. height: 60rpx;
  999. text-align: center;
  1000. line-height: 57rpx;
  1001. }
  1002. .modalDlg {
  1003. width: 580rpx;
  1004. /* height: 750rpx; */
  1005. position: fixed;
  1006. top: 45%;
  1007. left: 0;
  1008. z-index: 9999;
  1009. margin: -370rpx 85rpx;
  1010. background-color: #fff;
  1011. border-radius: 36rpx;
  1012. display: flex;
  1013. flex-direction: column;
  1014. align-items: center;
  1015. background: #ee4749;
  1016. }
  1017. .modalDlg button {
  1018. margin-top: 30rpx;
  1019. margin-bottom: 30rpx;
  1020. font-size: 24rpx;
  1021. color: #47c5fa;
  1022. background: #e7f7ff;
  1023. border-radius: 30rpx;
  1024. }
  1025. .modalDlg .table {
  1026. /* border:1px solid red; */
  1027. overflow: scroll;
  1028. max-height: 600rpx;
  1029. min-height: 200rpx;
  1030. }
  1031. .modalDlg .huode {
  1032. color: white;
  1033. margin-top: 30rpx;
  1034. font-size: 30rpx;
  1035. }
  1036. .modalDlg .youhuiquan {
  1037. margin-top: 10rpx;
  1038. font-size: 24rpx;
  1039. color: white;
  1040. }
  1041. .modalDlg .line {
  1042. width: 520rpx;
  1043. /* border: 2px solid blue; */
  1044. background: white;
  1045. height: 140rpx;
  1046. border-radius: 30rpx;
  1047. overflow: hidden;
  1048. text-align: center;
  1049. margin-top: 20rpx;
  1050. }
  1051. .modalDlg .line .left {
  1052. width: 150rpx;
  1053. height: 140rpx;
  1054. background: #e7f7ff;
  1055. float: left;
  1056. }
  1057. .modalDlg .line .left .ljsy {
  1058. width: 100rpx;
  1059. font-size: 20rpx;
  1060. background: #47c5fa;
  1061. color: white;
  1062. margin: 0px auto;
  1063. border-radius: 20rpx;
  1064. margin-top: 5rpx;
  1065. }
  1066. .modalDlg .line .right .mz {
  1067. margin-top: 30rpx;
  1068. overflow: hidden;
  1069. color: black;
  1070. font-weight: 600;
  1071. font-size: 26rpx;
  1072. }
  1073. .modalDlg .line .right .sj {
  1074. color: #c8c5c5;
  1075. font-size: 20rpx;
  1076. margin-top: 20rpx;
  1077. }
  1078. .adv {
  1079. position: fixed;
  1080. left: 0rpx;
  1081. bottom: 0;
  1082. z-index: 100;
  1083. width: 750rpx;
  1084. height: 165rpx;
  1085. display: flex;
  1086. /* border: 1px solid red; */
  1087. }
  1088. .m-menu {
  1089. /* background: #fff; */
  1090. margin: 20rpx 0;
  1091. display: flex;
  1092. align-items: center;
  1093. flex-wrap: wrap;
  1094. height: 270rpx;
  1095. justify-content: space-between;
  1096. }
  1097. .category-item {
  1098. width: 164rpx;
  1099. height: 270rpx;
  1100. position: relative;
  1101. }
  1102. .item-name {
  1103. position: absolute;
  1104. left: 0;
  1105. right: 0;
  1106. top: 30rpx;
  1107. text-align: center;
  1108. font-size: 24rpx;
  1109. color: #fff;
  1110. margin: 0 0 12rpx 0;
  1111. }
  1112. .item-desc {
  1113. position: absolute;
  1114. left: 0;
  1115. right: 0;
  1116. top: 64rpx;
  1117. text-align: center;
  1118. font-size: 20rpx;
  1119. color: #fff;
  1120. }
  1121. .m-menu .item {
  1122. width: 245rpx;
  1123. height: 126rpx;
  1124. margin-top: 10rpx;
  1125. margin-bottom: 10rpx;
  1126. }
  1127. .hot-item {
  1128. /* padding: 0 20rpx; */
  1129. /* height: 148rpx; */
  1130. font-size: 0;
  1131. }
  1132. .hot-item image {
  1133. width: 690rpx;
  1134. height: 148rpx;
  1135. /* margin-bottom: 18rpx; */
  1136. }
  1137. .hot-item-nav{
  1138. border-radius: 32rpx; margin-bottom:18rpx
  1139. }
  1140. .m-menu image {
  1141. width: 168rpx;
  1142. height: 272rpx;
  1143. border-radius: 10rpx;
  1144. }
  1145. .m-menu text {
  1146. display: block;
  1147. font-size: 24rpx;
  1148. text-align: center;
  1149. margin: 0 auto;
  1150. line-height: 1;
  1151. color: #333;
  1152. }
  1153. .shoadow {
  1154. box-shadow: 1px 2px 2px 2px #f7f7f1;
  1155. }
  1156. .image-margin {
  1157. margin-bottom: 20rpx;
  1158. }
  1159. .a-section {
  1160. /* width: 750rpx; */
  1161. height: auto;
  1162. overflow: hidden;
  1163. /* margin-top: 20rpx; */
  1164. }
  1165. .a-section .h {
  1166. display: flex;
  1167. flex-flow: row nowrap;
  1168. align-items: center;
  1169. justify-content: center;
  1170. height: 92rpx;
  1171. padding:40rpx 0 20rpx;
  1172. }
  1173. .popular-title {
  1174. display: flex;
  1175. align-items: center;
  1176. justify-content: space-between;
  1177. height: 34rpx;
  1178. width: 100%;
  1179. }
  1180. .a-section .h .txt1 {
  1181. width: 4rpx;
  1182. height: 34rpx;
  1183. background: #09afff;
  1184. margin: 0 12rpx 0 0;
  1185. }
  1186. .devide-bar {
  1187. width: 4rpx;
  1188. height: 34rpx;
  1189. background: #09afff;
  1190. margin: 0 12rpx 0 0;
  1191. }
  1192. .title-text {
  1193. font-size: 33rpx;
  1194. font-weight: bold;
  1195. }
  1196. .title-left {
  1197. display: flex;
  1198. align-items: center;
  1199. height: 34rpx;
  1200. }
  1201. .title-right {
  1202. display: flex;
  1203. align-items: center;
  1204. height: 34rpx;
  1205. font-size: 24rpx;
  1206. }
  1207. .a-section .h .txt {
  1208. padding-right: 30rpx;
  1209. font-size: 33rpx;
  1210. font-weight: bold;
  1211. }
  1212. .a-brand .b {
  1213. width: 750rpx;
  1214. height: auto;
  1215. overflow: hidden;
  1216. position: relative;
  1217. }
  1218. .a-brand .wrap {
  1219. position: relative;
  1220. }
  1221. .a-brand .img {
  1222. position: absolute;
  1223. left: 0;
  1224. top: 0;
  1225. }
  1226. .a-brand .mt {
  1227. position: absolute;
  1228. z-index: 2;
  1229. padding: 27rpx 31rpx;
  1230. left: 0;
  1231. top: 0;
  1232. }
  1233. .a-brand .mt .brand {
  1234. display: block;
  1235. font-size: 33rpx;
  1236. height: 43rpx;
  1237. color: #fff;
  1238. }
  1239. .a-brand .mt .price,
  1240. .a-brand .mt .unit {
  1241. font-size: 25rpx;
  1242. color: #fff;
  1243. }
  1244. .a-brand .item-1 {
  1245. float: left;
  1246. width: 375rpx;
  1247. height: 252rpx;
  1248. overflow: hidden;
  1249. border-top: 1rpx solid #fff;
  1250. margin-left: 1rpx;
  1251. }
  1252. .a-brand .item-1:nth-child(2n + 1) {
  1253. margin-left: 0;
  1254. width: 374rpx;
  1255. }
  1256. .a-brand .item-1 .img {
  1257. width: 375rpx;
  1258. height: 253rpx;
  1259. }
  1260. .a-coupon {
  1261. width: 750rpx;
  1262. height: auto;
  1263. overflow: hidden;
  1264. }
  1265. .a-coupon .b .item {
  1266. position: relative;
  1267. height: 200rpx;
  1268. width: 700rpx;
  1269. background: linear-gradient(to right, #cfa568, #e3bf79);
  1270. margin-bottom: 10rpx;
  1271. margin-left: 30rpx;
  1272. margin-right: 30rpx;
  1273. padding-top: 30rpx;
  1274. }
  1275. .a-coupon .b .tag {
  1276. height: 32rpx;
  1277. background: #a48143;
  1278. padding-left: 16rpx;
  1279. padding-right: 16rpx;
  1280. position: absolute;
  1281. left: 20rpx;
  1282. color: #fff;
  1283. top: 20rpx;
  1284. font-size: 20rpx;
  1285. text-align: center;
  1286. line-height: 32rpx;
  1287. }
  1288. .a-coupon .b .content {
  1289. margin-top: 24rpx;
  1290. margin-left: 40rpx;
  1291. display: flex;
  1292. margin-right: 40rpx;
  1293. flex-direction: row;
  1294. }
  1295. .a-coupon .b .content .left {
  1296. flex: 1;
  1297. }
  1298. .a-coupon .b .discount {
  1299. font-size: 50rpx;
  1300. color: #b4282d;
  1301. }
  1302. .a-coupon .b .min {
  1303. color: #fff;
  1304. }
  1305. .a-coupon .b .content .right {
  1306. width: 400rpx;
  1307. }
  1308. .a-coupon .b .name {
  1309. font-size: 44rpx;
  1310. color: #fff;
  1311. margin-bottom: 14rpx;
  1312. }
  1313. .a-coupon .b .desc {
  1314. font-size: 24rpx;
  1315. color: #fff;
  1316. }
  1317. .a-coupon .b .time {
  1318. font-size: 24rpx;
  1319. color: #fff;
  1320. line-height: 30rpx;
  1321. }
  1322. .a-groupon {
  1323. width: 750rpx;
  1324. height: auto;
  1325. overflow: hidden;
  1326. }
  1327. .a-groupon .b .item {
  1328. border-top: 1px solid #d9d9d9;
  1329. margin: 0 20rpx;
  1330. height: 244rpx;
  1331. width: 710rpx;
  1332. }
  1333. .a-groupon .b .img {
  1334. margin-top: 12rpx;
  1335. margin-right: 12rpx;
  1336. float: left;
  1337. width: 220rpx;
  1338. height: 220rpx;
  1339. }
  1340. .a-groupon .b .right {
  1341. float: left;
  1342. height: 244rpx;
  1343. width: 476rpx;
  1344. display: flex;
  1345. flex-flow: row nowrap;
  1346. }
  1347. .a-groupon .b .text {
  1348. display: flex;
  1349. flex-wrap: nowrap;
  1350. flex-direction: column;
  1351. justify-content: center;
  1352. overflow: hidden;
  1353. height: 244rpx;
  1354. width: 476rpx;
  1355. }
  1356. .a-groupon .b .name {
  1357. float: left;
  1358. display: block;
  1359. color: #333;
  1360. line-height: 50rpx;
  1361. font-size: 30rpx;
  1362. }
  1363. .a-groupon .b .desc {
  1364. width: 476rpx;
  1365. display: block;
  1366. color: #999;
  1367. line-height: 50rpx;
  1368. font-size: 25rpx;
  1369. }
  1370. .a-groupon .b .price {
  1371. width: 476rpx;
  1372. display: flex;
  1373. color: #ab956d;
  1374. line-height: 50rpx;
  1375. font-size: 33rpx;
  1376. }
  1377. .a-groupon .b .counterPrice {
  1378. text-decoration: line-through;
  1379. font-size: 28rpx;
  1380. color: #999;
  1381. }
  1382. .a-groupon .b .retailPrice {
  1383. margin-left: 30rpx;
  1384. font-size: 28rpx;
  1385. color: #a98f76;
  1386. }
  1387. .a-new .b {
  1388. width: 750rpx;
  1389. height: auto;
  1390. overflow: hidden;
  1391. padding: 0 31rpx 45rpx 31rpx;
  1392. }
  1393. .a-new .b .item {
  1394. float: left;
  1395. width: 302rpx;
  1396. margin-top: 10rpx;
  1397. margin-left: 21rpx;
  1398. margin-right: 21rpx;
  1399. }
  1400. .a-new .b .item-b {
  1401. margin-left: 42rpx;
  1402. }
  1403. .a-new .b .img {
  1404. width: 298rpx;
  1405. height: 300rpx;
  1406. }
  1407. .a-new .b .name {
  1408. /*text-align: center;*/
  1409. display: block;
  1410. width: 302rpx;
  1411. height: 60rpx;
  1412. margin-bottom: 14rpx;
  1413. overflow: hidden;
  1414. font-size: 30rpx;
  1415. color: #333;
  1416. /*white-space: nowrap;*/
  1417. overflow: hidden;
  1418. text-overflow: ellipsis;
  1419. margin-top: 5rpx;
  1420. margin-left: 0rpx;
  1421. line-height: 1em;
  1422. /*行间距*/
  1423. }
  1424. .a-new .b .price {
  1425. display: block;
  1426. /*text-align: center;*/
  1427. line-height: 30rpx;
  1428. font-size: 30rpx;
  1429. color: darkred;
  1430. margin-left: 10rpx;
  1431. }
  1432. .a-new .b .brand {
  1433. font-size: 20rpx;
  1434. color: #a98f76;
  1435. display: block;
  1436. line-height: 30rpx;
  1437. margin-bottom: 5rpx;
  1438. margin-left: 12rpx;
  1439. }
  1440. .a-popular {
  1441. width: 690rpx;
  1442. height: auto;
  1443. overflow: hidden;
  1444. /* padding: 0 20rpx; */
  1445. margin: -18rpx 0 0;
  1446. }
  1447. .popular-item {
  1448. /* box-shadow: 0 0 10rpx 0 rgba(100, 100, 100, 0.2); */
  1449. border-radius: 20rpx;
  1450. margin: 0 0 20rpx 0;
  1451. min-height: 380rpx;
  1452. width: 690rpx;
  1453. background: #fff;
  1454. padding: 20rpx 20rpx 24rpx;
  1455. display: flex;
  1456. flex-direction: column;
  1457. }
  1458. .item-img-wrapper {
  1459. position: relative;
  1460. /* padding:20rpx;
  1461. background: #C4ECFF; */
  1462. border-radius: 20rpx;
  1463. font-size: 0;
  1464. }
  1465. .self-tag {
  1466. height: 28rpx;
  1467. background: #09afff;
  1468. color: #fff;
  1469. padding: 0 8rpx;
  1470. /* line-height: 28rpx; */
  1471. font-size: 20rpx;
  1472. margin: 0 12rpx 0 0;
  1473. border-radius: 4rpx;
  1474. }
  1475. .popular-item .product-item-name {
  1476. width: 380rpx;
  1477. overflow: hidden;
  1478. white-space: nowrap;
  1479. text-overflow: ellipsis;
  1480. font-size: 28rpx;
  1481. }
  1482. .popular-item .item-brief {
  1483. width: 400rpx;
  1484. overflow: hidden;
  1485. /* white-space: nowrap; */
  1486. text-overflow: ellipsis;
  1487. font-size: 20rpx;
  1488. display: -webkit-box;
  1489. color: #85868a;
  1490. -webkit-box-orient: vertical;
  1491. -webkit-line-clamp: 2;
  1492. margin-top: 5rpx;
  1493. /*超过两行省略号*/
  1494. }
  1495. .counter-price {
  1496. font-size: 20rpx;
  1497. text-decoration: line-through;
  1498. color: #2a2a2a;
  1499. line-height: 28rpx;
  1500. text-align: center;
  1501. }
  1502. .retail-price {
  1503. font-size: 32rpx;
  1504. font-weight: bold;
  1505. color: #dd483e;
  1506. text-align: center;
  1507. }
  1508. .retail-price .title {
  1509. font-size: 26rpx;
  1510. color: #dd483e;
  1511. line-height: 48rpx;
  1512. }
  1513. .retail-price .unit {
  1514. font-size: 21rpx;
  1515. font-weight: 400;
  1516. color: #dd483e;
  1517. }
  1518. .retail-price .price {
  1519. font-size: 32rpx;
  1520. font-weight: bold;
  1521. color: #dd483e;
  1522. margin-left: 10rpx;
  1523. }
  1524. /* 活动商品显示样式 */
  1525. .activity {
  1526. height: 75rpx;
  1527. background: linear-gradient(67deg, #4f43dd, #689cf2, #ba64e2);
  1528. border-radius: 10rpx;
  1529. display: flex;
  1530. justify-content: space-between;
  1531. flex-direction: row;
  1532. align-items: center;
  1533. }
  1534. .activity .clock {
  1535. width: 42rpx;
  1536. height: 42rpx;
  1537. margin-right: 10rpx;
  1538. }
  1539. .activity .time {
  1540. font-size: 20rpx;
  1541. font-weight: 400;
  1542. color: #f4f4f4;
  1543. line-height: 30rpx;
  1544. }
  1545. .activity .arrow {
  1546. width: 10rpx;
  1547. height: 16rpx;
  1548. margin-left: 10rpx;
  1549. margin-right: 10rpx;
  1550. }
  1551. .activity .limit {
  1552. width: 131rpx;
  1553. height: 32rpx;
  1554. background-image: url('https://7a68-zhaijieshi-3guecm78383ca692-1307626841.tcb.qcloud.la/activity/activity2.png');
  1555. background-size: 100% 100%;
  1556. color: #fff;
  1557. font-size: 23rpx;
  1558. text-align: center;
  1559. margin-left: 20rpx;
  1560. }
  1561. .a-popular .b .img {
  1562. width: 650rpx;
  1563. height: 400rpx;
  1564. border-radius: 20rpx;
  1565. }
  1566. .item-tag {
  1567. position: absolute;
  1568. left: 0;
  1569. top: 20rpx;
  1570. height: 32rpx;
  1571. width: 116rpx;
  1572. text-align: center;
  1573. color: #fff;
  1574. font-size: 22rpx;
  1575. background: #09afff;
  1576. border-radius: 0 32rpx 32rpx 0;
  1577. }
  1578. .item-main {
  1579. /* display: flex;
  1580. align-items: center;
  1581. justify-content: space-between;
  1582. height: 100rpx;
  1583. width: 690rpx;
  1584. margin: 20rpx 0 0;
  1585. background: url('https://mall.zhaijieshi.cc/file/wx-dy/price-bj.png') no-repeat center;
  1586. background-size: 100%;
  1587. padding: 0 42rpx 0 48rpx; */
  1588. display: flex;
  1589. /* align-items: center; */
  1590. justify-content: space-between;
  1591. height: 68rpx;
  1592. margin: 20rpx 0 10rpx;
  1593. padding-left:20rpx;
  1594. }
  1595. .item-sub {
  1596. display: flex;
  1597. align-items: center;
  1598. justify-content: space-between;
  1599. /* height: 20rpx; */
  1600. }
  1601. .item-left {
  1602. display: flex;
  1603. /* align-items: center; */
  1604. flex-direction: column;
  1605. }
  1606. .a-popular .b .right {
  1607. float: left;
  1608. height: 264rpx;
  1609. width: 456rpx;
  1610. display: flex;
  1611. flex-flow: row nowrap;
  1612. }
  1613. .a-popular .b .text {
  1614. display: flex;
  1615. flex-wrap: nowrap;
  1616. flex-direction: column;
  1617. justify-content: center;
  1618. overflow: hidden;
  1619. height: 264rpx;
  1620. width: 456rpx;
  1621. }
  1622. .a-popular .b .name {
  1623. width: 456rpx;
  1624. display: block;
  1625. color: #333;
  1626. line-height: 40rpx;
  1627. font-size: 30rpx;
  1628. }
  1629. .a-popular .b .desc {
  1630. width: 456rpx;
  1631. display: block;
  1632. color: #a98f76;
  1633. line-height: 50rpx;
  1634. font-size: 25rpx;
  1635. }
  1636. /*
  1637. .a-popular .b .price {
  1638. width: 456rpx;
  1639. display: block;
  1640. color: darkred;
  1641. line-height: 50rpx;
  1642. font-size: 33rpx;
  1643. } */
  1644. .a-popular .b .brand {
  1645. font-size: 20rpx;
  1646. color: #a98f76;
  1647. display: block;
  1648. line-height: 30rpx;
  1649. padding: 2rpx;
  1650. }
  1651. .a-topic .b {
  1652. /*height: 533rpx;*/
  1653. height: auto;
  1654. width: 750rpx;
  1655. padding: 0 0 48rpx 0;
  1656. }
  1657. .good-nva {
  1658. border: 1px #eee solid;
  1659. }
  1660. /*
  1661. .a-topic .b .list {
  1662. height: auto;
  1663. width: 750rpx;
  1664. white-space: nowrap;
  1665. }
  1666. .a-topic .b .item {
  1667. display: block;
  1668. height: 533rpx;
  1669. width: 680.5rpx;
  1670. margin-left: 30rpx;
  1671. overflow: hidden;
  1672. }
  1673. .a-topic .b .t {
  1674. height: 100rpx;
  1675. background: #fff;
  1676. display: flex;
  1677. align-items: center;
  1678. justify-content: center;
  1679. }
  1680. .a-topic .b .item:last-child {
  1681. margin-right: 30rpx;
  1682. }
  1683. .a-topic .b .img {
  1684. height: 387.5rpx;
  1685. width: 680.5rpx;
  1686. margin-bottom: 30rpx;
  1687. }
  1688. .a-topic .b .np {
  1689. height: 35rpx;
  1690. margin-bottom: 13.5rpx;
  1691. color: #333;
  1692. font-size: 30rpx;
  1693. }
  1694. .a-topic .b .np .price {
  1695. margin-left: 20.8rpx;
  1696. color: #ab956d;
  1697. }
  1698. .a-topic .b .np .discount {
  1699. width: 476rpx;
  1700. display: block;
  1701. color: #999;
  1702. line-height: 50rpx;
  1703. font-size: 25rpx;
  1704. }
  1705. .a-topic .b .desc {
  1706. display: block;
  1707. height: 30rpx;
  1708. color: #999;
  1709. font-size: 24rpx;
  1710. white-space: nowrap;
  1711. overflow: hidden;
  1712. text-overflow: ellipsis;
  1713. } */
  1714. .good-grid {
  1715. width: 750rpx;
  1716. height: auto;
  1717. overflow: hidden;
  1718. }
  1719. .good-grid .h {
  1720. display: flex;
  1721. flex-flow: row nowrap;
  1722. align-items: center;
  1723. justify-content: center;
  1724. height: 130rpx;
  1725. font-size: 33rpx;
  1726. color: #333;
  1727. }
  1728. .good-grid .b {
  1729. width: 750rpx;
  1730. padding: 0 6.25rpx;
  1731. height: auto;
  1732. overflow: hidden;
  1733. }
  1734. .good-grid .b .item {
  1735. float: left;
  1736. background: #fff;
  1737. width: 365rpx;
  1738. margin-bottom: 6.25rpx;
  1739. height: 452rpx;
  1740. overflow: hidden;
  1741. text-align: center;
  1742. }
  1743. .good-grid .b .item .a {
  1744. height: 452rpx;
  1745. width: 100%;
  1746. }
  1747. .good-grid .b .item-b {
  1748. margin-left: 6.25rpx;
  1749. }
  1750. .good-grid .item .img {
  1751. margin-top: 20rpx;
  1752. width: 302rpx;
  1753. height: 302rpx;
  1754. }
  1755. .good-grid .item .name {
  1756. display: block;
  1757. width: 365.625rpx;
  1758. padding: 0 20rpx;
  1759. overflow: hidden;
  1760. height: 35rpx;
  1761. margin: 11.5rpx 0 22rpx 0;
  1762. text-align: center;
  1763. font-size: 30rpx;
  1764. color: #333;
  1765. }
  1766. .good-grid .item .price {
  1767. display: block;
  1768. width: 365.625rpx;
  1769. height: 30rpx;
  1770. text-align: center;
  1771. font-size: 30rpx;
  1772. color: #a98f76;
  1773. }
  1774. .good-grid .t {
  1775. height: 100rpx;
  1776. background: #fff;
  1777. display: flex;
  1778. align-items: center;
  1779. justify-content: center;
  1780. }
  1781. .address {
  1782. padding: 0 34rpx 0 20rpx;
  1783. height: 66rpx;
  1784. display: flex;
  1785. align-items: center;
  1786. background: #fff;
  1787. border-radius: 66rpx;
  1788. justify-content: space-between;
  1789. margin:0 0 20rpx 0;
  1790. }
  1791. .address .name {
  1792. display: flex;
  1793. align-items: center;
  1794. /* height: 40rpx; */
  1795. width: 470rpx;
  1796. overflow: hidden;
  1797. float: left;
  1798. }
  1799. .address .shar {
  1800. background: #fff;
  1801. }
  1802. .address button::after {
  1803. border: none;
  1804. }
  1805. .address .shar image {
  1806. float: right;
  1807. width: 40rpx;
  1808. height: 40rpx;
  1809. margin-top: 6rpx;
  1810. /* border:1px solid red; */
  1811. }
  1812. .address .name .address-name {
  1813. height: 68rpx;
  1814. line-height: 70rpx;
  1815. text-overflow: ellipsis;
  1816. /* word-wrap: break-word; */
  1817. margin: 0 8rpx 0 12rpx;
  1818. white-space: nowrap;
  1819. overflow: hidden;
  1820. max-width: 216rpx;
  1821. font-size: 22rpx;
  1822. }
  1823. .address .warning {
  1824. font-size: 24rpx;
  1825. color: red;
  1826. margin-left: 40rpx;
  1827. line-height: 32rpx;
  1828. }
  1829. .search {
  1830. height: 68rpx;
  1831. width: 100%;
  1832. padding: 0 50rpx;
  1833. display: flex;
  1834. align-items: center;
  1835. margin: 0 0 20rpx 0;
  1836. }
  1837. .search .van-icon-search {
  1838. line-height: 59rpx;
  1839. color: #ffffff;
  1840. }
  1841. .search .input {
  1842. width: 648rpx;
  1843. height: 68rpx;
  1844. background: #fff;
  1845. border-radius: 68rpx;
  1846. /* border:1rpx solid gray; */
  1847. display: flex;
  1848. align-items: center;
  1849. justify-content: center;
  1850. }
  1851. .search .txt {
  1852. height: 42rpx;
  1853. line-height: 42rpx;
  1854. /* color: #ffffff; */
  1855. color: gray;
  1856. padding-left: 10rpx;
  1857. font-size: 30rpx;
  1858. }
  1859. .no-login {
  1860. width: 100%;
  1861. height: auto;
  1862. margin: 0 auto;
  1863. background-color: #fff;
  1864. }
  1865. .no-login .c {
  1866. width: 100%;
  1867. height: auto;
  1868. margin-top: 400rpx;
  1869. }
  1870. .no-login .c text {
  1871. margin: 0 auto;
  1872. display: block;
  1873. width: 258rpx;
  1874. height: 59rpx;
  1875. line-height: 29rpx;
  1876. text-align: center;
  1877. font-size: 35rpx;
  1878. }
  1879. .no-login button {
  1880. width: 90%;
  1881. margin: 0 auto;
  1882. color: #fff;
  1883. font-size: 30rpx;
  1884. height: 96rpx;
  1885. line-height: 96rpx;
  1886. right: 0;
  1887. display: flex;
  1888. justify-content: center;
  1889. align-items: center;
  1890. position: flex;
  1891. bottom: 0;
  1892. left: 0;
  1893. border-radius: 0;
  1894. padding: 0;
  1895. margin-left: 5%;
  1896. text-align: center;
  1897. border-radius: 6rpx;
  1898. letter-spacing: 3rpx;
  1899. background-color: #242a48;
  1900. /*background-image: linear-gradient(to right, #9a9ba1 0%, #9a9ba1 100%);*/
  1901. }
  1902. .wechat {
  1903. width: 80rpx;
  1904. height: 80rpx;
  1905. margin-right: 15rpx;
  1906. }
  1907. /* 关于鲸致 */
  1908. .about-jz {
  1909. padding: 10rpx 0rpx 0;
  1910. }
  1911. .jzhz-img {
  1912. width: 710rpx;
  1913. }
  1914. .service-tel {
  1915. font-size: 20rpx;
  1916. text-align: center;
  1917. display: flex;
  1918. align-items: center;
  1919. justify-content: center;
  1920. }
  1921. .partner-title {
  1922. font-size: 30rpx;
  1923. margin: 40rpx 0 24rpx;
  1924. text-align: center;
  1925. font-weight: bold;
  1926. }
  1927. .jz-feature {
  1928. margin: 40rpx 0 0;
  1929. height: 60rpx;
  1930. display: flex;
  1931. align-items: center;
  1932. justify-content: space-between;
  1933. }
  1934. .devide-line {
  1935. height: 50rpx;
  1936. width: 2rpx;
  1937. background: #85868a;
  1938. }
  1939. .feature-item {
  1940. display: flex;
  1941. flex-direction: column;
  1942. justify-content: space-between;
  1943. font-size: 20rpx;
  1944. align-items: center;
  1945. height: 50rpx;
  1946. }
  1947. .jz-logo-wrapper {
  1948. text-align: center;
  1949. margin: 20rpx 0 10rpx;
  1950. height: 30rpx;
  1951. }
  1952. .jz-logo {
  1953. width: 306rpx;
  1954. height: 42rpx;
  1955. }
  1956. .jz-company {
  1957. color: #a4a4a4;
  1958. font-size: 20rpx;
  1959. margin: 24rpx 0 0;
  1960. text-align: center;
  1961. }
  1962. .member-price {
  1963. height: 34rpx;
  1964. display: flex;
  1965. align-items: center;
  1966. justify-content: flex-end;
  1967. }
  1968. .memberPrice {
  1969. font-size: 26rpx;
  1970. color: #dd483e;
  1971. margin: 0 0 0 30rpx;
  1972. }
  1973. .member-price-tag {
  1974. width: 120rpx;
  1975. height: 32rpx;
  1976. line-height: 32rpx;
  1977. background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
  1978. background-size: 100% 100%;
  1979. color: #5e3a11;
  1980. font-size: 22rpx;
  1981. padding: 0 8rpx 0 0;
  1982. text-align: right;
  1983. }
  1984. /* 新客角标 */
  1985. .isNew {
  1986. position: absolute;
  1987. width: 80rpx;
  1988. height: 120rpx;
  1989. right: 30rpx;
  1990. }
  1991. .phone-btn {
  1992. position: fixed;
  1993. z-index: 999;
  1994. right: 20rpx;
  1995. top: 500rpx;
  1996. font-size: 60rpx;
  1997. animation-iteration-count: infinite;
  1998. width: 100rpx;
  1999. height: 100rpx;
  2000. border-radius: 100rpx;
  2001. background: rgba(255, 255, 255, 0.8);
  2002. display: flex;
  2003. align-items: center;
  2004. justify-content: center;
  2005. color: #09afff;
  2006. }
  2007. .phone-wrapper {
  2008. display: flex;
  2009. align-items: center;
  2010. }
  2011. .right-icon {
  2012. color: #09afff;
  2013. font-size: 30rpx;
  2014. margin-left: 6rpx;
  2015. }
  2016. .shop-name {
  2017. font-size: 24rpx;
  2018. border: 2rpx solid #09afff;
  2019. line-height: 30rpx;
  2020. padding: 0 8rpx;
  2021. border-radius: 8rpx;
  2022. margin: 0 8rpx 0 0;
  2023. word-break: keep-all;
  2024. max-width: 240rpx;
  2025. overflow: hidden;
  2026. text-overflow: ellipsis;
  2027. }
  2028. .new-top {
  2029. /* padding: 20rpx 30rpx 0;
  2030. background: linear-gradient(180deg, #09afff 10%, #f8f8f8 90%);
  2031. margin-bottom: 20rpx; */
  2032. }
  2033. .banner {
  2034. width: 690rpx;
  2035. height: 462rpx;
  2036. z-index: 20;
  2037. }
  2038. .banner image {
  2039. width: 690rpx;
  2040. height: 462rpx;
  2041. }
  2042. .address-city {
  2043. font-size: 30rpx;
  2044. margin-left: 8rpx;
  2045. white-space: nowrap;
  2046. }
  2047. .service-adv {
  2048. width: 690rpx;
  2049. height: 46rpx;
  2050. background: #def6ff;
  2051. border-radius: 10rpx;
  2052. margin: 0 30rpx 20rpx;
  2053. display: flex;
  2054. align-items: center;
  2055. justify-content: space-between;
  2056. padding: 0 30rpx;
  2057. }
  2058. .adv-item {
  2059. height: 46rpx;
  2060. display: flex;
  2061. align-items: center;
  2062. }
  2063. .adv-item image {
  2064. width: 20rpx;
  2065. height: 24rpx;
  2066. margin-right: 6rpx;
  2067. }
  2068. .adv-item view {
  2069. color: #00c0ff;
  2070. font-size: 20rpx;
  2071. }
  2072. .new-hot-good {
  2073. height: 200rpx;
  2074. width: 690rpx;
  2075. margin: 0 30rpx;
  2076. display: flex;
  2077. align-items: center;
  2078. justify-content: space-between;
  2079. }
  2080. .new-hot-good image {
  2081. width: 334rpx;
  2082. height: 200rpx;
  2083. }
  2084. .jz-hot {
  2085. height: 30rpx;
  2086. margin: 30rpx 30rpx 20rpx 30rpx;
  2087. display: flex;
  2088. align-items: center;
  2089. }
  2090. .jz-hot view {
  2091. font-size: 30rpx;
  2092. /* font-weight: bold; */
  2093. }
  2094. .jz-hot image {
  2095. width: 26rpx;
  2096. height: 26rpx;
  2097. margin-left: 10rpx;
  2098. }
  2099. .new-real-price {
  2100. color: #ff483c;
  2101. font-size: 42rpx;
  2102. }
  2103. .new-retail-price {
  2104. text-decoration: line-through;
  2105. color: #666666;
  2106. font-size: 28rpx;
  2107. margin-left: 28rpx;
  2108. padding-bottom: 6rpx;
  2109. }
  2110. .new-item-right {
  2111. width: 162rpx;
  2112. height: 50rpx;
  2113. line-height: 50rpx;
  2114. background: #00c0ff;
  2115. border-radius: 50rpx;
  2116. font-size: 24rpx;
  2117. text-align: center;
  2118. color: #fff;
  2119. }
  2120. .new-item-left {
  2121. display: flex;
  2122. align-items: flex-end;
  2123. }
  2124. .new-jz {
  2125. width: 750rpx;
  2126. padding: 0 30rpx 44rpx;
  2127. background: #fff;
  2128. }
  2129. .jz-super {
  2130. height: 166rpx;
  2131. display: flex;
  2132. align-items: center;
  2133. justify-content: space-between;
  2134. border-bottom: 2rpx solid #f4f4f4;
  2135. }
  2136. .super-item {
  2137. display: flex;
  2138. align-items: center;
  2139. flex: 1;
  2140. flex-direction: column;
  2141. }
  2142. .super-item image {
  2143. width: 56rpx;
  2144. height: 56rpx;
  2145. margin-bottom: 20rpx;
  2146. }
  2147. .super-item view {
  2148. color: #00c0ff;
  2149. font-size: 20rpx;
  2150. height: 20rpx;
  2151. line-height: 20rpx;
  2152. }
  2153. .jz-service {
  2154. height: 92rpx;
  2155. display: flex;
  2156. align-items: center;
  2157. justify-content: space-between;
  2158. padding: 0 44rpx;
  2159. }
  2160. .service-item {
  2161. display: flex;
  2162. align-items: center;
  2163. }
  2164. .service-item image {
  2165. width: 28rpx;
  2166. height: 28rpx;
  2167. margin-right: 8rpx;
  2168. }
  2169. .service-item view {
  2170. color: #00c0ff;
  2171. font-size: 24rpx;
  2172. /* font-weight: bold; */
  2173. }
  2174. .img-slogan {
  2175. width: 446rpx;
  2176. height: 60rpx;
  2177. margin: 0 122rpx;
  2178. }
  2179. .company-kf {
  2180. color: #00c0ff;
  2181. text-align: center;
  2182. font-size: 20rpx;
  2183. margin: 28rpx 0 12rpx 0;
  2184. height: 20rpx;
  2185. line-height: 20rpx;
  2186. }
  2187. .service-tel {
  2188. color: #00c0ff;
  2189. text-align: center;
  2190. font-size: 20rpx;
  2191. font-weight: bold;
  2192. width: 230rpx;
  2193. margin: 0 230rpx;
  2194. }
  2195. .new-category {
  2196. width: 690rpx;
  2197. height: 140rpx;
  2198. margin: 0 30rpx 30rpx;
  2199. display: flex;
  2200. align-items: center;
  2201. justify-content: space-between;
  2202. background: #ffffff;
  2203. border-radius: 20rpx;
  2204. /* padding:0 24rpx; */
  2205. }
  2206. .cat-item {
  2207. display: flex;
  2208. flex-direction: column;
  2209. flex: 1;
  2210. align-items: center;
  2211. }
  2212. .cat-item image {
  2213. height: 62rpx;
  2214. width: 70rpx;
  2215. margin-bottom: 14rpx;
  2216. }
  2217. .cat-item view {
  2218. color: #161616;
  2219. font-size: 26rpx;
  2220. height: 26rpx;
  2221. line-height: 26rpx;
  2222. }
  2223. .cat-item .ndbb-wrapper {
  2224. height: 62rpx;
  2225. width: 70rpx;
  2226. position: relative;
  2227. margin-top: 10rpx;
  2228. margin-bottom: 14rpx;
  2229. }
  2230. .cat-item .ndbb {
  2231. position: absolute;
  2232. background: url('https://mall.zhaijieshi.cc/file/wx-dy/icon-ndbb.png') no-repeat center;
  2233. background-size: 68rpx 24rpx;
  2234. top: -12rpx;
  2235. left: 48rpx;
  2236. width: 70rpx;
  2237. height: 24rpx;
  2238. }
  2239. .jz-video {
  2240. width: 690rpx;
  2241. height: 380rpx;
  2242. border-radius: 12rpx;
  2243. margin: 20rpx 0;
  2244. }
  2245. .jz-about {
  2246. /* width: 690rpx; */
  2247. height: 220rpx;
  2248. padding: 0 4rpx;
  2249. display: flex;
  2250. align-items: center;
  2251. justify-content: space-between;
  2252. }
  2253. .about-item {
  2254. display: flex;
  2255. flex-direction: column;
  2256. align-items: center;
  2257. flex: 1;
  2258. }
  2259. .about-item image {
  2260. width: 80rpx;
  2261. height: 80rpx;
  2262. margin-bottom: 20rpx;
  2263. }
  2264. .about-item .middle-text {
  2265. height: 26rpx;
  2266. font-size: 26rpx;
  2267. color: #000000;
  2268. line-height: 26rpx;
  2269. margin-bottom: 18rpx;
  2270. }
  2271. .about-item .small-text {
  2272. font-size: 20rpx;
  2273. color: #999999;
  2274. line-height: 20rpx;
  2275. height: 20rpx;
  2276. }
  2277. .category-navi {
  2278. border-radius: 32rpx;
  2279. }
  2280. .company-yj{
  2281. display: flex;
  2282. justify-content: space-between;
  2283. margin:20rpx 0;
  2284. }
  2285. .yj-left{
  2286. width:200rpx;
  2287. height:260rpx;
  2288. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-yj.png') no-repeat center;
  2289. background-size: 100% 100%;
  2290. padding:32rpx 0 0 40rpx;
  2291. }
  2292. .yj-left view{
  2293. color: #2BB9FE;
  2294. font-size: 20rpx;
  2295. line-height: 26rpx;
  2296. }
  2297. .yj-left view.yj-head{
  2298. font-size: 26rpx;
  2299. margin-bottom:20rpx;
  2300. height:26rpx;
  2301. line-height: 26rpx;
  2302. }
  2303. .yj-right{
  2304. height:260rpx;
  2305. width:480rpx;
  2306. display: flex;
  2307. flex-direction: column;
  2308. justify-content: space-between;
  2309. }
  2310. .com-sm{
  2311. width:480rpx;
  2312. height:124rpx;
  2313. background: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-sm.png') no-repeat center;
  2314. background-size: 100% 100%;
  2315. padding:30rpx 0 0 40rpx;
  2316. }
  2317. .com-sm.com-jzg{
  2318. background-image: url('https://jzmall.lifejingzhi.com/file/mall-uni/bg-jzg.png')
  2319. }
  2320. .com-sm view{
  2321. color: #FF682D;;
  2322. font-size: 20rpx;
  2323. line-height: 20rpx;
  2324. height:20rpx;
  2325. }
  2326. .com-sm.com-jzg view{
  2327. color: #F04445;
  2328. }
  2329. .com-sm view.sm-head{
  2330. height:26rpx;
  2331. line-height: 26rpx;
  2332. font-size: 26rpx;
  2333. margin-bottom:20rpx;
  2334. }
  2335. .bx-line{
  2336. height:62rpx;
  2337. padding:0rpx 0 26rpx;
  2338. display: flex;
  2339. align-items: center;
  2340. justify-content: center;
  2341. border-bottom: 1rpx solid #Eee;
  2342. }
  2343. .bx-line image{
  2344. width:28rpx;
  2345. height:36rpx;
  2346. }
  2347. .bx-line view{
  2348. font-size: 24rpx;
  2349. color: #000000;
  2350. }
  2351. .bx-line view.bx-head{
  2352. font-size: 32rpx;
  2353. font-weight: bold;
  2354. margin:0 18rpx 0 10rpx;
  2355. }
  2356. .com-bottom-wrapper{
  2357. background: #FFFFFF;
  2358. border-radius: 14rpx;
  2359. padding:32rpx 20rpx 0;
  2360. }
  2361. </style>