index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020
  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="goJk('../activity/jkDetail')">
  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. console.log('车辆信息--',this.carInfo);
  265. uni.navigateTo({
  266. url:'handbook?mileage='+this.carInfo.milage+'&liyangId='+this.carInfo.nLevelID
  267. })
  268. },
  269. changeCar(){
  270. uni.navigateTo({
  271. url:'../user/addCar/cailist'
  272. })
  273. },
  274. goMUsers(){
  275. if(!this.userInfo){
  276. this.authorizShow=true;
  277. }else{
  278. uni.navigateTo({
  279. url:'../index/personalCard?adInfo='+JSON.stringify(this.managerInfo)
  280. })
  281. }
  282. },
  283. goGoods(item){
  284. if(!this.userInfo){
  285. this.authorizShow=true;
  286. }else{
  287. uni.navigateTo({
  288. url:'../shop/goodsDetail?id='+item.id
  289. })
  290. }
  291. },
  292. goJk(){
  293. uni.navigateTo({
  294. url:'../activity/jkDetail'
  295. })
  296. },
  297. goRoter(item){
  298. console.log(item)
  299. if(!this.userInfo){
  300. this.authorizShow=true;
  301. }else{
  302. if(item.bizType==0){
  303. }else if(item.bizType==1){ //紧急救援
  304. uni.navigateTo({
  305. url:'rescue'
  306. })
  307. }else if(item.bizType==2){ //钣金喷漆
  308. uni.navigateTo({
  309. url:'paint'
  310. })
  311. }else if(item.bizType==3){ //保养
  312. uni.navigateTo({
  313. url:'maintain'
  314. })
  315. }else if(item.bizType==4){ //在线预约
  316. uni.navigateTo({
  317. url:'onlineBooking?naShopId='+item.naShopId
  318. })
  319. }else if(item.bizType==5){ //导航
  320. this.getShopinfo(5,item.reShopId)
  321. }else if(item.bizType==6){ //联系本店
  322. this.getShopinfo(6,item.orShopId)
  323. }else if(item.bizType==7){ //7门店列表
  324. uni.navigateTo({
  325. url:'shopList'
  326. })
  327. }else if(item.bizType==8){ //我的会员卡
  328. uni.navigateTo({
  329. url:'vipCard'
  330. })
  331. }else if(item.bizType==9){ //我的优惠券
  332. uni.navigateTo({
  333. url:'discountCard'
  334. })
  335. }else if(item.bizType==10){ //我的订单
  336. uni.navigateTo({
  337. url:'../user/myOrder/myOrder'
  338. })
  339. }else if(item.bizType==11){ //我的预约
  340. uni.navigateTo({
  341. url:'../user/myBespeak'
  342. })
  343. }else if(item.bizType==12){ //历史消费
  344. uni.navigateTo({
  345. url:'../user/historySpend'
  346. })
  347. }else if(item.bizType==12){ //历史消费
  348. uni.navigateTo({
  349. url:'../user/historySpend'
  350. })
  351. }else if(item.bizType==13){ //车检报告
  352. uni.navigateTo({
  353. url:'../user/checkReport'
  354. })
  355. }else if(item.bizType==14){ //指定商品分类
  356. uni.setStorage({
  357. key: 'shopcategoryID',
  358. data: item.bizId,
  359. success: function () {
  360. getApp().globalData.shopcategoryID=item.bizId;
  361. uni.switchTab({
  362. url:'../shop/shop?shopcategoryID='+ item.bizId
  363. })
  364. }
  365. });
  366. }else if(item.bizType==15){ //商品详情
  367. uni.navigateTo({
  368. url:'../shop/goodsDetail?id=CD2D70DC-706C-4441-9864-33BD19457CAE'
  369. })
  370. }
  371. // uni.navigateTo({
  372. // url:url
  373. // })
  374. }
  375. },
  376. decryptPhoneNumber: function(e) {
  377. console.log(e);
  378. this.code=e.detail.code
  379. this.wxPhoneLogin()
  380. this.authorizShow=false;
  381. },
  382. wxgologin(){
  383. var that=this;
  384. uni.getUserProfile({
  385. lang:'zh_CN',
  386. desc:'登录',
  387. success:(res)=>{
  388. console.log(res);
  389. that.wxdata=res;
  390. uni.setStorage({
  391. key: 'wxdata',
  392. data: res,
  393. success: function () {
  394. that.uniLogin()
  395. }
  396. });
  397. },
  398. fail:(res)=>{
  399. console.log(res)
  400. }
  401. });
  402. },
  403. uniLogin(){
  404. var that=this;
  405. uni.login({
  406. provider: 'weixin',
  407. success: function (loginRes) {
  408. console.log(loginRes);
  409. that.getWxOpenID(loginRes)
  410. }
  411. });
  412. },
  413. getWxOpenID(e){
  414. var that=this;
  415. uni.showLoading({
  416. title: '加载中'
  417. })
  418. this.$http('miniApp2/sys/getWxOpenID', {
  419. code:e.code,
  420. unionId:this.unionId
  421. },'GET').then(res => {
  422. this.wxOpenData=res.data;
  423. that.queryHomeCardList()
  424. //that.wxPhoneLogin()
  425. this.$store.commit('mutationswxOpenData', that.wxOpenData)
  426. uni.setStorage({
  427. key: 'wxOpenData',
  428. data: that.wxOpenData,
  429. success: function () {
  430. // that.uniLogin()
  431. }
  432. });
  433. if(this.wxOpenData.loginInfo){
  434. this.$store.commit('mutationsuserInfo', that.wxOpenData.loginInfo.openUser)
  435. this.userInfo=that.wxOpenData.loginInfo.openUser
  436. that.queryManagerInfo()
  437. uni.setStorage({
  438. key: 'userInfo',
  439. data: that.wxOpenData.loginInfo.openUser,
  440. success: function () {
  441. that.getCarList()
  442. }
  443. });
  444. }else{
  445. this.authorizShow=true;
  446. }
  447. })
  448. },
  449. wxPhoneLogin(){
  450. var that=this;
  451. this.$http('miniApp2/sys/wxPhoneLogin', {
  452. appId:this.ext.appId,
  453. unionId:this.unionId,
  454. code:this.code,
  455. openId:this.wxOpenData.openid
  456. },'POST').then(res => {
  457. var data = res.data;
  458. if(data.loginInfo){
  459. this.userInfo=data.loginInfo.openUser;
  460. this.$store.commit('mutationsuserInfo', this.userInfo);
  461. this.$store.commit('mutationswxOpenData', data.loginInfo)
  462. uni.setStorage({
  463. key: 'userInfo',
  464. data: data.loginInfo.openUser,
  465. success: function () {
  466. that.getCarList()
  467. that.queryHomeCardList()
  468. that.queryManagerInfo()
  469. }
  470. });
  471. }
  472. })
  473. },
  474. getCarList(){
  475. this.$http('opencarOwnerHome/queryCarInfoList', {
  476. },'GET').then(res => {
  477. if(res.code==401){
  478. this.uniLogin()
  479. }else{
  480. this.carInfo=res.data[0]
  481. this.$store.commit('mutationscarInfo', this.carInfo)
  482. }
  483. })
  484. },
  485. queryManagerInfo(){
  486. console.log("11")
  487. this.$http('openHome/queryManagerInfo', {
  488. },'GET').then(res => {
  489. this.managerInfo=res.data
  490. })
  491. },
  492. queryHomeCardList(){
  493. //console.log(this.wxOpenData)
  494. this.$http('openHome/queryHomeCardList', {
  495. unionId:this.unionId
  496. },'GET').then(res => {
  497. uni.hideLoading();
  498. this.homeCardList=res.data
  499. })
  500. },
  501. getShopinfo(num,shopId){
  502. var that=this;
  503. uni.showLoading({
  504. title: '加载中'
  505. })
  506. if(!shopId){
  507. shopId=''
  508. }
  509. this.$http('openmy/getShopinfo', {
  510. shopId:shopId
  511. },'GET').then(res => {
  512. uni.hideLoading();
  513. var res=res.data
  514. if(num==5){
  515. uni.openLocation({
  516. latitude:Number(res.lat),
  517. longitude:Number(res.lng),
  518. name: res.shopName,
  519. address: res.address,
  520. success: function() {
  521. console.log('success');
  522. },
  523. fail(err) {
  524. console.log(err)
  525. }
  526. });
  527. }else{
  528. uni.makePhoneCall({
  529. phoneNumber: res.contactorPhone
  530. });
  531. }
  532. })
  533. }
  534. }
  535. }
  536. </script>
  537. <style scoped>
  538. .indexTop{
  539. background: #D53533;
  540. width: 750rpx;
  541. position: fixed;
  542. top: 0;
  543. left: 0;
  544. z-index: 11;
  545. }
  546. .indexnav{
  547. height: 44px;
  548. line-height: 44px;
  549. text-align: center;
  550. font-size: 36rpx;
  551. color: #FFFFFF;
  552. }
  553. .authorizBox{
  554. width: 100vw;
  555. height: 100vh;
  556. background: rgba(0, 0, 0, 0.5);
  557. position: fixed;
  558. top: 0;
  559. left: 0;
  560. }
  561. .authorizCont{
  562. margin-top: 30vh;
  563. width: 564rpx;
  564. height: 408rpx;
  565. background: #FFFFFF;
  566. border-radius: 24rpx;
  567. margin-left: 93rpx;
  568. position: relative;
  569. }
  570. .authorizCloseImg{
  571. width: 62rpx;
  572. height: 62rpx;
  573. }
  574. .sqLogoBox{
  575. width: 180rpx;
  576. height: 180rpx;
  577. background: #FFFFFF;
  578. border-radius: 90rpx;
  579. text-align: center;
  580. position: absolute;
  581. top: -50rpx;
  582. left: 192rpx;
  583. }
  584. .authorizName{
  585. color: #333333;
  586. line-height: 42rpx;
  587. font-size: 30rpx;
  588. text-align: center;
  589. padding-top: 58rpx;
  590. }
  591. .authorizMs{
  592. color: #999999;
  593. line-height: 36rpx;
  594. font-size: 26rpx;
  595. width: 452rpx;
  596. padding-top: 24rpx;
  597. text-align: center;
  598. margin-left: 56rpx;
  599. }
  600. .authorizContbutton{
  601. width: 422rpx;
  602. height: 88rpx;
  603. background: #D53533;
  604. border-radius: 44rpx;
  605. line-height: 88rpx;
  606. text-align: center;
  607. font-size:30rpx;
  608. color: #FFFFFF;
  609. margin-top: 62rpx;
  610. margin-left:71rpx;
  611. }
  612. .content{
  613. min-height: 100vh;
  614. background: #F4F5F7;
  615. }
  616. .topBox{
  617. width: 750rpx;
  618. height: 150rpx;
  619. background: #D53533;
  620. }
  621. .yuanhu{
  622. width: 750rpx;
  623. height: 50rpx;
  624. background: #D53533;
  625. border-radius: 0 0 100% 100%;
  626. }
  627. .carinfoBox{
  628. width: 702rpx;
  629. height: 250rpx;
  630. background: #FFFFFF;
  631. border-radius: 10rpx;
  632. margin-left: 24rpx;
  633. overflow: hidden;
  634. }
  635. .carinfoBox2{
  636. width: 702rpx;
  637. height: 180rpx;
  638. background: #FFFFFF;
  639. border-radius: 10rpx;
  640. margin-left: 24rpx;
  641. overflow: hidden;
  642. }
  643. .carinfoBox2{
  644. }
  645. .carinfoBox .carLogo{
  646. width: 72rpx;height: 72rpx;
  647. }
  648. .carinfoBoxTop{
  649. display: flex;
  650. justify-content: space-between;
  651. padding-top: 29rpx;
  652. padding-left: 24rpx;
  653. padding-right: 20rpx;
  654. padding-bottom: 24rpx;
  655. border: 1px solid #EEEEEE;
  656. }
  657. .carinfoBoxTopCont{
  658. width: 454rpx;
  659. }
  660. .carinfoBoxTopContTop{
  661. display: flex;
  662. }
  663. .carInfoplateNumber{
  664. font-weight: 500;
  665. color: #3C3C3C;
  666. font-size: 30rpx;
  667. line-height: 42rpx;
  668. padding-right: 16rpx;
  669. }
  670. .carTnfomilage{
  671. color: #F19D01;
  672. font-size: 22rpx;
  673. padding: 0rpx 10rpx;
  674. border-radius: 4rpx;
  675. border: 1px solid #F19D01;
  676. height: 32rpx;
  677. line-height: 34rpx;
  678. margin-top: 2rpx;
  679. margin-left: 2rpx;
  680. }
  681. .carInfocarModel{
  682. width: 454rpx;
  683. color: #666666;
  684. font-size: 26rpx;
  685. white-space: nowrap;
  686. overflow: hidden;
  687. text-overflow: ellipsis;
  688. }
  689. .carinfoBoxTopRight{
  690. display: flex;padding-top: 25rpx;
  691. }
  692. .carinfoBoxTopRightIcon{
  693. width: 29rpx;
  694. height: 31rpx;
  695. }
  696. .huancheBtn{
  697. color: #666666; font-size: 26rpx;line-height: 31rpx;
  698. padding-left: 10rpx;
  699. }
  700. .carInfoBottom{
  701. display: flex;
  702. justify-content: space-around;
  703. }
  704. .carInfoBottomLineTitle{
  705. color: #999999;font-size: 24rpx;
  706. text-align: center;
  707. padding-top: 24rpx;
  708. }
  709. .carInfoBottomLineTxt{
  710. color: #3C3C3C;
  711. font-size: 26rpx;
  712. padding-top: 5rpx;
  713. text-align: center;
  714. }
  715. .carinfonocarIcon{
  716. width: 72rpx;
  717. height: 72rpx;
  718. }
  719. .carinfoBoxNocar{
  720. display: flex;
  721. padding-top: 50rpx;
  722. padding-left: 20rpx;
  723. }
  724. .carinfoBoxNocarRightTitle{
  725. font-weight: 500;
  726. color: #3C3C3C;
  727. font-size: 30rpx;
  728. }
  729. .carinfoBoxNocarRightMS{
  730. color: #666666;
  731. font-size: 26rpx;
  732. }
  733. .carinfoBoxNocarRight{
  734. padding-left: 24rpx;
  735. }
  736. .shoptopbox{
  737. margin-top: -170rpx;
  738. }
  739. .shoptopbox2{
  740. margin-top: -170rpx;
  741. }
  742. .adviser{
  743. width: 662rpx;
  744. margin-left: 24rpx;
  745. background: #FFFFFF;
  746. border-radius: 10px;
  747. display: flex;
  748. justify-content: space-between;
  749. padding: 18rpx 20rpx;
  750. margin-top: 20rpx;
  751. }
  752. .adviserLeft{
  753. display: flex;
  754. }
  755. .advisertx{
  756. width: 62rpx;height: 62rpx;
  757. }
  758. .adviserNema{
  759. color: #333333;font-size: 30rpx;
  760. line-height: 62rpx;padding-left: 24rpx;
  761. }
  762. .adviserms{
  763. width: 118rpx;
  764. height: 36rpx;
  765. border-radius: 4rpx;
  766. border: 1px solid #D53533;
  767. line-height: 36rpx;
  768. text-align: center;
  769. margin-top: 12rpx;
  770. margin-left: 20rpx;
  771. color: #D53533;
  772. font-size: 24rpx;
  773. }
  774. .adviserJt{
  775. width: 12rpx;
  776. height: 20rpx;
  777. margin-top: 16rpx;
  778. }
  779. .modular{
  780. width: 702rpx;
  781. /* height: 313rpx; */
  782. background: #FFFFFF;
  783. border-radius: 10px;
  784. margin-top: 20rpx;
  785. margin-left: 24rpx;
  786. padding-bottom: 40rpx;
  787. }
  788. .swiper-item{
  789. display: flex;
  790. flex-wrap: wrap;
  791. }
  792. .itemImg{
  793. width: 46rpx;
  794. height: 46rpx;
  795. }
  796. .Menusline{
  797. font-size: 24rpx;
  798. color: #333333;
  799. }
  800. .itemLine{
  801. width: 20%;
  802. text-align: center;
  803. padding-top: 40rpx;
  804. }
  805. .advertisement{
  806. width: 702rpx;
  807. height: 280rpx;
  808. margin-top: 20rpx;
  809. margin-left: 24rpx;
  810. border-radius: 20rpx;
  811. }
  812. .swiper-item2{
  813. width: 702rpx;
  814. height: 280px;
  815. }
  816. .swiper-item2Img{
  817. width: 702rpx;
  818. height: 280rpx;
  819. }
  820. .hotMoreJt{
  821. width: 12rpx;
  822. height: 20rpx;
  823. margin-top: 6rpx;
  824. }
  825. .Hot{
  826. width: 702rpx;
  827. margin-top: 20rpx;
  828. margin-left: 24rpx;
  829. }
  830. .hotTop{
  831. display: flex;
  832. justify-content: space-between;
  833. padding: 6rpx 0;
  834. }
  835. .hotSx{
  836. width: 8rpx;
  837. height: 30rpx;
  838. background: #FF0000;
  839. border-radius: 5rpx;
  840. }
  841. .hotLeft{
  842. display: flex;
  843. }
  844. .hottitle{
  845. font-weight: 500;
  846. color: #333333;
  847. font-size: 30rpx;
  848. line-height: 30rpx;
  849. margin-left: 16rpx;
  850. }
  851. .hotRight{
  852. display: flex;
  853. }
  854. .hotMore{
  855. line-height: 30rpx;color: #666666;font-size: 24rpx;
  856. margin-right: 16rpx;
  857. }
  858. .hotLineTopImg{
  859. width: 702rpx;
  860. height: 280rpx;
  861. }
  862. .hotLineTop{
  863. position: relative;
  864. height: 280rpx;
  865. }
  866. .hotLine{
  867. margin-top: 20rpx;
  868. border-radius: 10rpx;
  869. background: #FFFFFF;
  870. overflow: hidden;
  871. }
  872. .hotlinestate1{
  873. width: 102rpx;
  874. height: 44rpx;
  875. background:#FBBF00 ;
  876. line-height: 44rpx;
  877. font-weight: 500;
  878. color: #333333;
  879. font-size: 24rpx;
  880. text-align: center;
  881. }
  882. .hotlinestate2{
  883. width: 102rpx;
  884. height: 44rpx;
  885. background:#FF0000 ;
  886. line-height: 44rpx;
  887. font-weight: 500;
  888. color: #FFFFFF;
  889. font-size: 24rpx;
  890. text-align: center;
  891. }
  892. .hotlineTimebox{
  893. position: absolute;
  894. left: 0;
  895. bottom: 0;
  896. background: rgba(0, 0, 0, 0.5);
  897. display: flex;
  898. }
  899. .hotTime{
  900. font-weight: 400;
  901. color: #FFFFFF;
  902. font-size: 24rpx;
  903. line-height: 44rpx;
  904. padding: 0 20rpx;
  905. }
  906. .hotName{
  907. padding: 24rpx 20rpx;
  908. color: #333333;
  909. line-height: 40rpx;
  910. font-size: 28rpx;
  911. }
  912. .hotGoodsLine{
  913. margin-top: 30rpx;
  914. padding: 20rpx;
  915. background: #FFFFFF;
  916. border-radius: 16rpx;
  917. display: flex;
  918. }
  919. .hotGoodsLineImg{
  920. width: 208rpx;
  921. height: 194rpx;
  922. border-radius: 16rpx;
  923. border: 1px solid #EEEEEE;
  924. display: block;
  925. }
  926. .goodsName{
  927. font-size: 28rpx;
  928. font-family: PingFangSC-Regular, PingFang SC;
  929. font-weight: 400;
  930. color: #333333;
  931. line-height: 40rpx;
  932. text-overflow: -o-ellipsis-lastline;
  933. overflow: hidden;
  934. text-overflow: ellipsis;
  935. display: -webkit-box;
  936. -webkit-line-clamp: 2;
  937. line-clamp: 2;
  938. -webkit-box-orient: vertical;
  939. }
  940. .hotGoodsLineRIght{
  941. padding-left: 24rpx;
  942. }
  943. .goodsPrice{
  944. display: flex;
  945. padding-top: 10rpx;
  946. }
  947. .goodsPrice1{
  948. font-size: 24rpx;
  949. font-weight: 400;
  950. color: #FF0000;
  951. padding-top: 8rpx;
  952. }
  953. .goodsPrice2{
  954. font-size: 22rpx;
  955. font-weight: 400;
  956. color: #FF0000;
  957. padding-top: 10rpx;
  958. }
  959. .goodsPrice3{
  960. font-size: 32rpx;
  961. font-weight: 500;
  962. color: #FF0000;
  963. }
  964. .goodsPrice4{
  965. font-size: 24rpx;
  966. font-weight: 400;
  967. color: #999999;
  968. padding-top: 8rpx;
  969. padding-left: 10rpx;
  970. text-decoration:line-through;
  971. }
  972. .Sold{
  973. font-weight: 400;
  974. color: #999999;
  975. font-size: 24rpx;
  976. padding-top: 8rpx;
  977. }
  978. </style>