index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008
  1. <template>
  2. <view class="content">
  3. <view class="indexTop">
  4. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  5. <view class="indexnav">首页</view>
  6. </view>
  7. <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
  8. <view style="height: 43px;"></view>
  9. <view class="topBox"></view>
  10. <view class="yuanhu"></view>
  11. <view class="shoptopbox2" v-if="!carInfo">
  12. <view class="carinfoBox2">
  13. <view class="carinfoBoxNocar" @click="addCar">
  14. <img src="../../static/timg/addcar.png" alt="" class="carinfonocarIcon">
  15. <view class="carinfoBoxNocarRight">
  16. <view class="carinfoBoxNocarRightTitle">添加我的爱车</view>
  17. <view class="carinfoBoxNocarRightMS">按照车型推荐合适的商品</view>
  18. </view>
  19. </view>
  20. </view>
  21. </view>
  22. <view class="shoptopbox" v-if="carInfo">
  23. <view class="carinfoBox" >
  24. <view class="carinfoBoxTop">
  25. <img :src="carInfo.brandLogo" alt="" class="carLogo" v-if="carInfo.brandLogo">
  26. <img src="../../static/timg/nocar.png" alt="" class="carLogo" v-else>
  27. <view class="carinfoBoxTopCont">
  28. <view class="carinfoBoxTopContTop">
  29. <view class="carInfoplateNumber">{{carInfo.plateNumber}}</view>
  30. <view class="carTnfomilage" v-if="carInfo.milage">{{carInfo.milage}}km</view>
  31. </view>
  32. <view class="carInfocarModel" v-if="carInfo.carModel">{{carInfo.carModel}}</view>
  33. <view class="carInfocarModel" v-else>暂无</view>
  34. </view>
  35. <view class="carinfoBoxTopRight" @click="changeCar">
  36. <img src="../../static/timg/icon_change@2x.png" alt="" class="carinfoBoxTopRightIcon">
  37. <view class="huancheBtn">换车</view>
  38. </view>
  39. </view>
  40. <view class="carInfoBottom">
  41. <view class="carInfoBottomLine">
  42. <view class="carInfoBottomLineTitle">下次保养里程</view>
  43. <view class="carInfoBottomLineTxt" v-if="carInfo.nextCareMilage">{{carInfo.nextCareMilage}}</view>
  44. <view class="carInfoBottomLineTxt" v-else>暂无</view>
  45. </view>
  46. <view class="carInfoBottomLine">
  47. <view class="carInfoBottomLineTitle">下次保养日期</view>
  48. <view class="carInfoBottomLineTxt" v-if="carInfo.nextCareDate">{{carInfo.nextCareDate.slice(0,10)}}</view>
  49. <view class="carInfoBottomLineTxt" v-else>暂无</view>
  50. </view>
  51. <view class="carInfoBottomLine">
  52. <view class="carInfoBottomLineTitle">保养手册</view>
  53. <view class="carInfoBottomLineTxt" @click="information">点击查看</view>
  54. </view>
  55. </view>
  56. </view>
  57. </view>
  58. <!-- 服务顾问 -->
  59. <view class="adviser" v-if="managerInfo" @click="goMUsers">
  60. <view class="adviserLeft">
  61. <img v-if="managerInfo.avatar" :src="managerInfo.avatar" alt="" class="advisertx">
  62. <img v-else src="../../static/timg/pic_def_ava@2x.png" alt="" class="advisertx">
  63. <view class="adviserNema">{{managerInfo.name}}</view>
  64. <view class="adviserms">服务顾问</view>
  65. </view>
  66. <img src="../../static/timg/icon_arrow_right.png" alt="" class="adviserJt">
  67. </view>
  68. <!-- 中间功能应用模块 -->
  69. <view class="modular" v-if="homeCardList.application.length>0">
  70. <view class="swiper-item">
  71. <view class="itemLine" @click="goRoter(item)" v-for="(item,index) in homeCardList.application">
  72. <view><img :src="item.icon" alt="" class="itemImg"></view>
  73. <view class="Menusline">{{item.name}}</view>
  74. </view>
  75. </view>
  76. </view>
  77. <view class="advertisement" v-if="homeCardList.ad1.length>0">
  78. <swiper class="swiper2" circular :autoplay="false" :interval="interval"
  79. :duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
  80. <swiper-item v-for="(item,index) in homeCardList.ad1">
  81. <view class="swiper-item2" @click="goRoter(item)">
  82. <image class="swiper-item2Img" :src="item.icon" mode=""></image>
  83. </view>
  84. </swiper-item>
  85. </swiper>
  86. </view>
  87. <view class="advertisement" v-if="homeCardList.ad2.length>0">
  88. <swiper class="swiper2" circular :autoplay="false" :interval="interval"
  89. :duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
  90. <swiper-item v-for="(item,index) in homeCardList.ad2">
  91. <view class="swiper-item2" @click="goRoter(item)">
  92. <image class="swiper-item2Img" :src="item.icon" mode=""></image>
  93. </view>
  94. </swiper-item>
  95. </swiper>
  96. </view>
  97. <view class="advertisement" v-if="homeCardList.ad3.length>0">
  98. <swiper class="swiper2" circular :autoplay="false" :interval="interval"
  99. :duration="duration" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
  100. <swiper-item v-for="(item,index) in homeCardList.ad3">
  101. <view class="swiper-item2" @click="goRoter(item)">
  102. <image class="swiper-item2Img" :src="item.icon" mode=""></image>
  103. </view>
  104. </swiper-item>
  105. </swiper>
  106. </view>
  107. <!-- 热门活动 -->
  108. <view class="Hot">
  109. <view class="hotTop">
  110. <view class="hotLeft">
  111. <view class="hotSx"></view>
  112. <view class="hottitle">热门活动</view>
  113. </view>
  114. <view class="hotRight">
  115. <view class="hotMore">更多</view>
  116. <img src="../../static/timg/icon_arrow_right.png" alt="" class="hotMoreJt">
  117. </view>
  118. </view>
  119. <view class="hotLine" @click="goRoter('paint')">
  120. <view class="hotLineTop">
  121. <image class="hotLineTopImg" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
  122. <view class="hotlineTimebox">
  123. <view class="hotlinestate1">进行中</view>
  124. <view class="hotTime">2022.01.21-2022.02.14</view>
  125. </view>
  126. </view>
  127. <view class="hotName">博世 7月促【CX-200715003】</view>
  128. </view>
  129. <view class="hotLine">
  130. <view class="hotLineTop">
  131. <image class="hotLineTopImg" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" mode=""></image>
  132. <view class="hotlineTimebox">
  133. <view class="hotlinestate2">未开始</view>
  134. <view class="hotTime">2022.01.21-2022.02.14</view>
  135. </view>
  136. </view>
  137. <view class="hotName">博世 7月促【CX-200715003】</view>
  138. </view>
  139. </view>
  140. <!-- 热门商品 -->
  141. <view class="" v-if="homeCardList">
  142. <view class="Hot" v-if="homeCardList.openMGoods.showType==1">
  143. <view class="hotTop">
  144. <view class="hotLeft">
  145. <view class="hotSx"></view>
  146. <view class="hottitle">热门商品</view>
  147. </view>
  148. <view class="hotRight" @click="goShop">
  149. <view class="hotMore">更多</view>
  150. <img src="../../static/timg/icon_arrow_right.png" alt="" class="hotMoreJt">
  151. </view>
  152. </view>
  153. <view class="hotGoodsLine" v-for="(item,index) in homeCardList.openMGoods.goodsList" @click="goGoods(item)">
  154. <view>
  155. <image :src="item.url" mode="" class="hotGoodsLineImg"></image>
  156. </view>
  157. <view class="hotGoodsLineRIght">
  158. <view class="goodsName">{{item.name}}</view>
  159. <view class="Sold">
  160. <view v-if="item.showLabel&&item.showLabel.indexOf('3')!=-1">
  161. 已售 {{item.saleQty}}
  162. </view>
  163. </view>
  164. <view class="goodsPrice">
  165. <view class="goodsPrice1">{{item.saleLabel}}</view>
  166. <view class="goodsPrice2">¥</view>
  167. <view class="goodsPrice3">{{item.salePrice}}</view>
  168. <view class="goodsPrice4" v-if="item.showLabel&&item.scribingPrice&&item.showLabel.indexOf('1')!=-1">¥{{item.scribingPrice}}</view>
  169. </view>
  170. </view>
  171. </view>
  172. </view>
  173. </view>
  174. <view style="height: 60rpx;"></view>
  175. <!-- 手机号授权 -->
  176. <view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
  177. <view class="authorizCont" @click.stop="">
  178. <view class="authorizName">{{wxOpenData.miniAppName}}</view>
  179. <view class="authorizMs">您好,欢迎访问本店,授权手机号登录能获取我们最新的促销活动哦~</view>
  180. <button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
  181. </view>
  182. <view style="text-align: center;padding-top: 56rpx;">
  183. <image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
  184. </view>
  185. </view>
  186. <!-- <view @getphonenumber="decryptPhoneNumber" >shopId:{{shopId}}</view>
  187. -->
  188. </view>
  189. </template>
  190. <script>
  191. export default {
  192. data() {
  193. return {
  194. shopId: '',
  195. url:'',
  196. wxOpenData:'',
  197. code:'',
  198. carInfo:'',
  199. homeCardList:'',
  200. authorizShow:false,
  201. miniAppName:'',
  202. iStatusBarHeight:'',
  203. managerInfo:'',
  204. unionId:'',
  205. ext:'',
  206. }
  207. },
  208. onLoad() {
  209. this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  210. var that=this;
  211. //this.$common.getExtStoreId()
  212. var ext=this.$common.getExtStoreId();
  213. this.ext=ext
  214. console.log(ext)
  215. //console.log( String(Date.now()))
  216. this.shopId=ext.shopId;
  217. this.url=ext.url;
  218. this.unionId=ext.unionId
  219. // uni.setStorage({
  220. // key: 'extdata',
  221. // data: {
  222. // shopId:'E37BB296-5A08-4534-859D-B351BA611AF9',
  223. // },
  224. // success: function () {
  225. // that.uniLogin()
  226. // }
  227. // });
  228. //this.userInfo = uni.getStorageSync("userInfo");
  229. this.userInfo=this.$store.state.userInfo
  230. if(this.userInfo){
  231. //this.wxOpenData = uni.getStorageSync("wxOpenData");
  232. this.getCarList();
  233. this.queryHomeCardList()
  234. this.queryManagerInfo()
  235. }else{
  236. this.uniLogin()
  237. }
  238. },
  239. onShow() {
  240. var indexaddcar = uni.getStorageSync("indexaddcar")
  241. if(indexaddcar==1){
  242. uni.removeStorageSync('indexaddcar');
  243. this.getCarList();
  244. }else{
  245. this.carInfo=this.$store.state.carInfo
  246. }
  247. },
  248. methods: {
  249. addCar(){
  250. if(!this.userInfo){
  251. this.authorizShow=true;
  252. }else{
  253. uni.navigateTo({
  254. url:'../user/addCar/addCar?type=1'
  255. })
  256. }
  257. },
  258. goShop(){
  259. uni.switchTab({
  260. url:'../shop/shop'
  261. })
  262. },
  263. information(){
  264. },
  265. changeCar(){
  266. uni.navigateTo({
  267. url:'../user/addCar/cailist'
  268. })
  269. },
  270. goMUsers(){
  271. if(!this.userInfo){
  272. this.authorizShow=true;
  273. }else{
  274. }
  275. },
  276. goGoods(item){
  277. if(!this.userInfo){
  278. this.authorizShow=true;
  279. }else{
  280. uni.navigateTo({
  281. url:'../shop/goodsDetail?id='+item.id
  282. })
  283. }
  284. },
  285. goRoter(item){
  286. console.log(item)
  287. if(!this.userInfo){
  288. this.authorizShow=true;
  289. }else{
  290. if(item.bizType==0){
  291. }else if(item.bizType==1){ //紧急救援
  292. uni.navigateTo({
  293. url:'rescue'
  294. })
  295. }else if(item.bizType==2){ //钣金喷漆
  296. uni.navigateTo({
  297. url:'paint'
  298. })
  299. }else if(item.bizType==3){ //保养
  300. uni.navigateTo({
  301. url:'maintain'
  302. })
  303. }else if(item.bizType==4){ //在线预约
  304. uni.navigateTo({
  305. url:'onlineBooking?naShopId='+item.naShopId
  306. })
  307. }else if(item.bizType==5){ //导航
  308. this.getShopinfo(5,item.reShopId)
  309. }else if(item.bizType==6){ //联系本店
  310. this.getShopinfo(6,item.orShopId)
  311. }else if(item.bizType==7){ //7门店列表
  312. uni.navigateTo({
  313. url:'shopList'
  314. })
  315. }else if(item.bizType==8){ //我的会员卡
  316. uni.navigateTo({
  317. url:'vipCard'
  318. })
  319. }else if(item.bizType==9){ //我的优惠券
  320. uni.navigateTo({
  321. url:'discountCard'
  322. })
  323. }else if(item.bizType==10){ //我的订单
  324. uni.navigateTo({
  325. url:'../user/myOrder/myOrder'
  326. })
  327. }else if(item.bizType==11){ //我的预约
  328. uni.navigateTo({
  329. url:'../user/myBespeak'
  330. })
  331. }else if(item.bizType==12){ //历史消费
  332. uni.navigateTo({
  333. url:'../user/historySpend'
  334. })
  335. }else if(item.bizType==12){ //历史消费
  336. uni.navigateTo({
  337. url:'../user/historySpend'
  338. })
  339. }else if(item.bizType==13){ //车检报告
  340. uni.navigateTo({
  341. url:'../user/checkReport'
  342. })
  343. }else if(item.bizType==14){ //指定商品分类
  344. uni.setStorage({
  345. key: 'shopcategoryID',
  346. data: item.bizId,
  347. success: function () {
  348. getApp().globalData.shopcategoryID=item.bizId;
  349. uni.switchTab({
  350. url:'../shop/shop?shopcategoryID='+ item.bizId
  351. })
  352. }
  353. });
  354. }else if(item.bizType==15){ //商品详情
  355. uni.navigateTo({
  356. url:'../shop/goodsDetail?id=CD2D70DC-706C-4441-9864-33BD19457CAE'
  357. })
  358. }
  359. // uni.navigateTo({
  360. // url:url
  361. // })
  362. }
  363. },
  364. decryptPhoneNumber: function(e) {
  365. console.log(e);
  366. this.code=e.detail.code
  367. this.wxPhoneLogin()
  368. this.authorizShow=false;
  369. },
  370. wxgologin(){
  371. var that=this;
  372. uni.getUserProfile({
  373. lang:'zh_CN',
  374. desc:'登录',
  375. success:(res)=>{
  376. console.log(res);
  377. that.wxdata=res;
  378. uni.setStorage({
  379. key: 'wxdata',
  380. data: res,
  381. success: function () {
  382. that.uniLogin()
  383. }
  384. });
  385. },
  386. fail:(res)=>{
  387. console.log(res)
  388. }
  389. });
  390. },
  391. uniLogin(){
  392. var that=this;
  393. uni.login({
  394. provider: 'weixin',
  395. success: function (loginRes) {
  396. console.log(loginRes);
  397. that.getWxOpenID(loginRes)
  398. }
  399. });
  400. },
  401. getWxOpenID(e){
  402. var that=this;
  403. uni.showLoading({
  404. title: '加载中'
  405. })
  406. this.$http('miniApp2/sys/getWxOpenID', {
  407. code:e.code,
  408. unionId:this.unionId
  409. },'GET').then(res => {
  410. this.wxOpenData=res.data;
  411. that.queryHomeCardList()
  412. //that.wxPhoneLogin()
  413. this.$store.commit('mutationswxOpenData', that.wxOpenData)
  414. uni.setStorage({
  415. key: 'wxOpenData',
  416. data: that.wxOpenData,
  417. success: function () {
  418. // that.uniLogin()
  419. }
  420. });
  421. if(this.wxOpenData.loginInfo){
  422. this.$store.commit('mutationsuserInfo', that.wxOpenData.loginInfo.openUser)
  423. this.userInfo=that.wxOpenData.loginInfo.openUser
  424. that.queryManagerInfo()
  425. uni.setStorage({
  426. key: 'userInfo',
  427. data: that.wxOpenData.loginInfo.openUser,
  428. success: function () {
  429. that.getCarList()
  430. }
  431. });
  432. }else{
  433. this.authorizShow=true;
  434. }
  435. })
  436. },
  437. wxPhoneLogin(){
  438. var that=this;
  439. this.$http('miniApp2/sys/wxPhoneLogin', {
  440. appId:this.ext.appId,
  441. unionId:this.unionId,
  442. code:this.code,
  443. openId:this.wxOpenData.openid
  444. },'POST').then(res => {
  445. var data = res.data;
  446. if(data.loginInfo){
  447. this.userInfo=data.loginInfo.openUser;
  448. this.$store.commit('mutationsuserInfo', this.userInfo);
  449. this.$store.commit('mutationswxOpenData', data.loginInfo)
  450. uni.setStorage({
  451. key: 'userInfo',
  452. data: data.loginInfo.openUser,
  453. success: function () {
  454. that.getCarList()
  455. that.queryHomeCardList()
  456. that.queryManagerInfo()
  457. }
  458. });
  459. }
  460. })
  461. },
  462. getCarList(){
  463. this.$http('opencarOwnerHome/queryCarInfoList', {
  464. },'GET').then(res => {
  465. if(res.code==401){
  466. this.uniLogin()
  467. }else{
  468. this.carInfo=res.data[0]
  469. this.$store.commit('mutationscarInfo', this.carInfo)
  470. }
  471. })
  472. },
  473. queryManagerInfo(){
  474. console.log("11")
  475. this.$http('openHome/queryManagerInfo', {
  476. },'GET').then(res => {
  477. this.managerInfo=res.data
  478. })
  479. },
  480. queryHomeCardList(){
  481. //console.log(this.wxOpenData)
  482. this.$http('openHome/queryHomeCardList', {
  483. unionId:this.unionId
  484. },'GET').then(res => {
  485. uni.hideLoading();
  486. this.homeCardList=res.data
  487. })
  488. },
  489. getShopinfo(num,shopId){
  490. var that=this;
  491. uni.showLoading({
  492. title: '加载中'
  493. })
  494. if(!shopId){
  495. shopId=''
  496. }
  497. this.$http('openmy/getShopinfo', {
  498. shopId:shopId
  499. },'GET').then(res => {
  500. uni.hideLoading();
  501. var res=res.data
  502. if(num==5){
  503. uni.openLocation({
  504. latitude:Number(res.lat),
  505. longitude:Number(res.lng),
  506. name: res.shopName,
  507. address: res.address,
  508. success: function() {
  509. console.log('success');
  510. },
  511. fail(err) {
  512. console.log(err)
  513. }
  514. });
  515. }else{
  516. uni.makePhoneCall({
  517. phoneNumber: res.contactorPhone
  518. });
  519. }
  520. })
  521. }
  522. }
  523. }
  524. </script>
  525. <style scoped>
  526. .indexTop{
  527. background: #D53533;
  528. width: 750rpx;
  529. position: fixed;
  530. top: 0;
  531. left: 0;
  532. z-index: 11;
  533. }
  534. .indexnav{
  535. height: 44px;
  536. line-height: 44px;
  537. text-align: center;
  538. font-size: 36rpx;
  539. color: #FFFFFF;
  540. }
  541. .authorizBox{
  542. width: 100vw;
  543. height: 100vh;
  544. background: rgba(0, 0, 0, 0.5);
  545. position: fixed;
  546. top: 0;
  547. left: 0;
  548. }
  549. .authorizCont{
  550. margin-top: 30vh;
  551. width: 564rpx;
  552. height: 408rpx;
  553. background: #FFFFFF;
  554. border-radius: 24rpx;
  555. margin-left: 93rpx;
  556. position: relative;
  557. }
  558. .authorizCloseImg{
  559. width: 62rpx;
  560. height: 62rpx;
  561. }
  562. .sqLogoBox{
  563. width: 180rpx;
  564. height: 180rpx;
  565. background: #FFFFFF;
  566. border-radius: 90rpx;
  567. text-align: center;
  568. position: absolute;
  569. top: -50rpx;
  570. left: 192rpx;
  571. }
  572. .authorizName{
  573. color: #333333;
  574. line-height: 42rpx;
  575. font-size: 30rpx;
  576. text-align: center;
  577. padding-top: 58rpx;
  578. }
  579. .authorizMs{
  580. color: #999999;
  581. line-height: 36rpx;
  582. font-size: 26rpx;
  583. width: 452rpx;
  584. padding-top: 24rpx;
  585. text-align: center;
  586. margin-left: 56rpx;
  587. }
  588. .authorizContbutton{
  589. width: 422rpx;
  590. height: 88rpx;
  591. background: #D53533;
  592. border-radius: 44rpx;
  593. line-height: 88rpx;
  594. text-align: center;
  595. font-size:30rpx;
  596. color: #FFFFFF;
  597. margin-top: 62rpx;
  598. margin-left:71rpx;
  599. }
  600. .content{
  601. min-height: 100vh;
  602. background: #F4F5F7;
  603. }
  604. .topBox{
  605. width: 750rpx;
  606. height: 150rpx;
  607. background: #D53533;
  608. }
  609. .yuanhu{
  610. width: 750rpx;
  611. height: 50rpx;
  612. background: #D53533;
  613. border-radius: 0 0 100% 100%;
  614. }
  615. .carinfoBox{
  616. width: 702rpx;
  617. height: 250rpx;
  618. background: #FFFFFF;
  619. border-radius: 10rpx;
  620. margin-left: 24rpx;
  621. overflow: hidden;
  622. }
  623. .carinfoBox2{
  624. width: 702rpx;
  625. height: 180rpx;
  626. background: #FFFFFF;
  627. border-radius: 10rpx;
  628. margin-left: 24rpx;
  629. overflow: hidden;
  630. }
  631. .carinfoBox2{
  632. }
  633. .carinfoBox .carLogo{
  634. width: 72rpx;height: 72rpx;
  635. }
  636. .carinfoBoxTop{
  637. display: flex;
  638. justify-content: space-between;
  639. padding-top: 29rpx;
  640. padding-left: 24rpx;
  641. padding-right: 20rpx;
  642. padding-bottom: 24rpx;
  643. border: 1px solid #EEEEEE;
  644. }
  645. .carinfoBoxTopCont{
  646. width: 454rpx;
  647. }
  648. .carinfoBoxTopContTop{
  649. display: flex;
  650. }
  651. .carInfoplateNumber{
  652. font-weight: 500;
  653. color: #3C3C3C;
  654. font-size: 30rpx;
  655. line-height: 42rpx;
  656. padding-right: 16rpx;
  657. }
  658. .carTnfomilage{
  659. color: #F19D01;
  660. font-size: 22rpx;
  661. padding: 0rpx 10rpx;
  662. border-radius: 4rpx;
  663. border: 1px solid #F19D01;
  664. height: 32rpx;
  665. line-height: 34rpx;
  666. margin-top: 2rpx;
  667. margin-left: 2rpx;
  668. }
  669. .carInfocarModel{
  670. width: 454rpx;
  671. color: #666666;
  672. font-size: 26rpx;
  673. white-space: nowrap;
  674. overflow: hidden;
  675. text-overflow: ellipsis;
  676. }
  677. .carinfoBoxTopRight{
  678. display: flex;padding-top: 25rpx;
  679. }
  680. .carinfoBoxTopRightIcon{
  681. width: 29rpx;
  682. height: 31rpx;
  683. }
  684. .huancheBtn{
  685. color: #666666; font-size: 26rpx;line-height: 31rpx;
  686. padding-left: 10rpx;
  687. }
  688. .carInfoBottom{
  689. display: flex;
  690. justify-content: space-around;
  691. }
  692. .carInfoBottomLineTitle{
  693. color: #999999;font-size: 24rpx;
  694. text-align: center;
  695. padding-top: 24rpx;
  696. }
  697. .carInfoBottomLineTxt{
  698. color: #3C3C3C;
  699. font-size: 26rpx;
  700. padding-top: 5rpx;
  701. text-align: center;
  702. }
  703. .carinfonocarIcon{
  704. width: 72rpx;
  705. height: 72rpx;
  706. }
  707. .carinfoBoxNocar{
  708. display: flex;
  709. padding-top: 50rpx;
  710. padding-left: 20rpx;
  711. }
  712. .carinfoBoxNocarRightTitle{
  713. font-weight: 500;
  714. color: #3C3C3C;
  715. font-size: 30rpx;
  716. }
  717. .carinfoBoxNocarRightMS{
  718. color: #666666;
  719. font-size: 26rpx;
  720. }
  721. .carinfoBoxNocarRight{
  722. padding-left: 24rpx;
  723. }
  724. .shoptopbox{
  725. margin-top: -170rpx;
  726. }
  727. .shoptopbox2{
  728. margin-top: -170rpx;
  729. }
  730. .adviser{
  731. width: 662rpx;
  732. margin-left: 24rpx;
  733. background: #FFFFFF;
  734. border-radius: 10px;
  735. display: flex;
  736. justify-content: space-between;
  737. padding: 18rpx 20rpx;
  738. margin-top: 20rpx;
  739. }
  740. .adviserLeft{
  741. display: flex;
  742. }
  743. .advisertx{
  744. width: 62rpx;height: 62rpx;
  745. }
  746. .adviserNema{
  747. color: #333333;font-size: 30rpx;
  748. line-height: 62rpx;padding-left: 24rpx;
  749. }
  750. .adviserms{
  751. width: 118rpx;
  752. height: 36rpx;
  753. border-radius: 4rpx;
  754. border: 1px solid #D53533;
  755. line-height: 36rpx;
  756. text-align: center;
  757. margin-top: 12rpx;
  758. margin-left: 20rpx;
  759. color: #D53533;
  760. font-size: 24rpx;
  761. }
  762. .adviserJt{
  763. width: 12rpx;
  764. height: 20rpx;
  765. margin-top: 16rpx;
  766. }
  767. .modular{
  768. width: 702rpx;
  769. /* height: 313rpx; */
  770. background: #FFFFFF;
  771. border-radius: 10px;
  772. margin-top: 20rpx;
  773. margin-left: 24rpx;
  774. padding-bottom: 40rpx;
  775. }
  776. .swiper-item{
  777. display: flex;
  778. flex-wrap: wrap;
  779. }
  780. .itemImg{
  781. width: 46rpx;
  782. height: 46rpx;
  783. }
  784. .Menusline{
  785. font-size: 24rpx;
  786. color: #333333;
  787. }
  788. .itemLine{
  789. width: 20%;
  790. text-align: center;
  791. padding-top: 40rpx;
  792. }
  793. .advertisement{
  794. width: 702rpx;
  795. height: 280rpx;
  796. margin-top: 20rpx;
  797. margin-left: 24rpx;
  798. border-radius: 20rpx;
  799. }
  800. .swiper-item2{
  801. width: 702rpx;
  802. height: 280px;
  803. }
  804. .swiper-item2Img{
  805. width: 702rpx;
  806. height: 280rpx;
  807. }
  808. .hotMoreJt{
  809. width: 12rpx;
  810. height: 20rpx;
  811. margin-top: 6rpx;
  812. }
  813. .Hot{
  814. width: 702rpx;
  815. margin-top: 20rpx;
  816. margin-left: 24rpx;
  817. }
  818. .hotTop{
  819. display: flex;
  820. justify-content: space-between;
  821. padding: 6rpx 0;
  822. }
  823. .hotSx{
  824. width: 8rpx;
  825. height: 30rpx;
  826. background: #FF0000;
  827. border-radius: 5rpx;
  828. }
  829. .hotLeft{
  830. display: flex;
  831. }
  832. .hottitle{
  833. font-weight: 500;
  834. color: #333333;
  835. font-size: 30rpx;
  836. line-height: 30rpx;
  837. margin-left: 16rpx;
  838. }
  839. .hotRight{
  840. display: flex;
  841. }
  842. .hotMore{
  843. line-height: 30rpx;color: #666666;font-size: 24rpx;
  844. margin-right: 16rpx;
  845. }
  846. .hotLineTopImg{
  847. width: 702rpx;
  848. height: 280rpx;
  849. }
  850. .hotLineTop{
  851. position: relative;
  852. height: 280rpx;
  853. }
  854. .hotLine{
  855. margin-top: 20rpx;
  856. border-radius: 10rpx;
  857. background: #FFFFFF;
  858. overflow: hidden;
  859. }
  860. .hotlinestate1{
  861. width: 102rpx;
  862. height: 44rpx;
  863. background:#FBBF00 ;
  864. line-height: 44rpx;
  865. font-weight: 500;
  866. color: #333333;
  867. font-size: 24rpx;
  868. text-align: center;
  869. }
  870. .hotlinestate2{
  871. width: 102rpx;
  872. height: 44rpx;
  873. background:#FF0000 ;
  874. line-height: 44rpx;
  875. font-weight: 500;
  876. color: #FFFFFF;
  877. font-size: 24rpx;
  878. text-align: center;
  879. }
  880. .hotlineTimebox{
  881. position: absolute;
  882. left: 0;
  883. bottom: 0;
  884. background: rgba(0, 0, 0, 0.5);
  885. display: flex;
  886. }
  887. .hotTime{
  888. font-weight: 400;
  889. color: #FFFFFF;
  890. font-size: 24rpx;
  891. line-height: 44rpx;
  892. padding: 0 20rpx;
  893. }
  894. .hotName{
  895. padding: 24rpx 20rpx;
  896. color: #333333;
  897. line-height: 40rpx;
  898. font-size: 28rpx;
  899. }
  900. .hotGoodsLine{
  901. margin-top: 30rpx;
  902. padding: 20rpx;
  903. background: #FFFFFF;
  904. border-radius: 16rpx;
  905. display: flex;
  906. }
  907. .hotGoodsLineImg{
  908. width: 208rpx;
  909. height: 194rpx;
  910. border-radius: 16rpx;
  911. border: 1px solid #EEEEEE;
  912. display: block;
  913. }
  914. .goodsName{
  915. font-size: 28rpx;
  916. font-family: PingFangSC-Regular, PingFang SC;
  917. font-weight: 400;
  918. color: #333333;
  919. line-height: 40rpx;
  920. text-overflow: -o-ellipsis-lastline;
  921. overflow: hidden;
  922. text-overflow: ellipsis;
  923. display: -webkit-box;
  924. -webkit-line-clamp: 2;
  925. line-clamp: 2;
  926. -webkit-box-orient: vertical;
  927. }
  928. .hotGoodsLineRIght{
  929. padding-left: 24rpx;
  930. }
  931. .goodsPrice{
  932. display: flex;
  933. padding-top: 10rpx;
  934. }
  935. .goodsPrice1{
  936. font-size: 24rpx;
  937. font-weight: 400;
  938. color: #FF0000;
  939. padding-top: 8rpx;
  940. }
  941. .goodsPrice2{
  942. font-size: 22rpx;
  943. font-weight: 400;
  944. color: #FF0000;
  945. padding-top: 10rpx;
  946. }
  947. .goodsPrice3{
  948. font-size: 32rpx;
  949. font-weight: 500;
  950. color: #FF0000;
  951. }
  952. .goodsPrice4{
  953. font-size: 24rpx;
  954. font-weight: 400;
  955. color: #999999;
  956. padding-top: 8rpx;
  957. padding-left: 10rpx;
  958. text-decoration:line-through;
  959. }
  960. .Sold{
  961. font-weight: 400;
  962. color: #999999;
  963. font-size: 24rpx;
  964. padding-top: 8rpx;
  965. }
  966. </style>