home.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738
  1. <template>
  2. <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
  3. <cm-custom :navbar-data='nvabarData'></cm-custom>
  4. <!-- 头部轮播 -->
  5. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
  6. <view class="container-home tui-skeleton">
  7. <view class="swiper-banner-box" >
  8. <swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true" :interval="5000" :duration="500" @change="swiperChange" :circular="true">
  9. <swiper-item v-for="(item,index) in bannerImageList" :key="index" @click.stop="handleBannerActivity(item,index)">
  10. <image :src="item" class="tui-slide-image" mode="scaleToFill"/>
  11. </swiper-item>
  12. </swiper>
  13. <view class="swiper__dots-box" v-if="bannerImageList.length > 1">
  14. <view v-for="(item,idx) in bannerImageList"
  15. :key="idx"
  16. :class="[idx===current?'swiper__dots-long':'none']"
  17. :data-index="current" class="swiper__dots-item">
  18. </view>
  19. </view>
  20. </view>
  21. <view class="cate-section clearfix">
  22. <!-- 自定义分类导航栏 -->
  23. <view class="tabbar clearfix">
  24. <view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navigateToGoods(nav)">
  25. <image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
  26. <text class="tui-skeleton-fillet">{{nav.classifyName}}</text>
  27. </view>
  28. </view>
  29. <!-- 优选分类 -->
  30. <view class="tabbar bot clearfix">
  31. <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
  32. <image class="tui-skeleton-circular" :src="firstModulesImage"></image>
  33. <text class="tui-skeleton-fillet">{{firstModulesName}}</text>
  34. </view>
  35. <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:secondModulesName})">
  36. <image class="tui-skeleton-circular" :src="secondModulesImage"></image>
  37. <text class="tui-skeleton-fillet">{{secondModulesName}}</text>
  38. </view>
  39. <view class="cate-item-info" @click="showTost">
  40. <image class="tui-skeleton-circular" :src="navInforList[0].icon"></image>
  41. <text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
  42. </view>
  43. <view class="cate-item-info">
  44. <!-- #ifdef MP-WEIXIN -->
  45. <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
  46. <image class="tui-skeleton-circular" :src="navInforList[1].icon"></image>
  47. </button>
  48. <!-- #endif -->
  49. <text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
  50. </view>
  51. </view>
  52. </view>
  53. <!-- 热销商品 -->
  54. <view class="hotgoods-section">
  55. <view class="s-header" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
  56. <text class="tip tui-skeleton-fillet">{{thirdModulesName}}</text>
  57. <text class="tit tui-skeleton-fillet">更多</text>
  58. <text class="iconfont icon-xiayibu"></text>
  59. </view>
  60. <view class="hotgoods-swiper">
  61. <view class="scoll-wrapper clearfix">
  62. <view class="floor-item" v-for="(item, index) in organizeProducts" :key="index" @click.stop="navToDetailPage(item.productID)">
  63. <image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
  64. <view class="floor-item-content">
  65. <view class="title tui-skeleton-rect">
  66. <text class="mclap">{{item.name}}</text>
  67. </view>
  68. <view class="" v-if="hasLogin">
  69. <view v-if="userIdentity == 4">
  70. <view class="title-none" v-show="item.price1TextFlag == '1'">
  71. <text class="p big">未公开价格</text>
  72. </view>
  73. <view class="title-none" v-show="item.price1TextFlag == '2'">
  74. <text class="p big">价格仅会员可见</text>
  75. <text class="p btn" @click.stop="this.$api.navigateTo(`/pages/login/apply?clubStatus=${clubStatus}`)">去升级</text>
  76. </view>
  77. <view class="price tui-skeleton-rect" v-show="item.price1TextFlag == '0'">
  78. <text class="p sm">¥</text>
  79. <text class="p big">{{item.retailPrice!=null ? item.retailPrice.toFixed(2):''}}</text>
  80. </view>
  81. </view>
  82. <view v-else>
  83. <view class="title-none" v-if="item.price1TextFlag == '1'">
  84. <text class="p big">未公开价格</text>
  85. </view>
  86. <view class="price tui-skeleton-rect" v-else>
  87. <text class="p sm">¥</text>
  88. <text class="p big">{{item.retailPrice!=null ? item.retailPrice.toFixed(2):''}}</text>
  89. </view>
  90. </view>
  91. </view>
  92. <view v-else class="no-price">
  93. <text class="p-no">价格:</text>
  94. <view class="p-stars">
  95. <uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. </view>
  103. <!-- 底部 -->
  104. <view class="footer-section ">
  105. <view class="s-header member tui-skeleton-fillet">
  106. <text class="tip">医美机构正品联盟</text>
  107. </view>
  108. <view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
  109. <image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode="scaleToFill"></image>
  110. </view>
  111. <view class="f-tab-section">
  112. <!-- 优选分类 -->
  113. <view class="tabbar clearfix">
  114. <view class="cate-item" @click="showTost">
  115. <image class="tui-skeleton-circular" :src="navServerList[0].icon"></image>
  116. <text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
  117. </view>
  118. <view class="cate-item" @click="navto(navServerList[1].path)">
  119. <image class="tui-skeleton-circular" :src="navServerList[1].icon"></image>
  120. <text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
  121. </view>
  122. <view class="cate-item" @click="navto(navServerList[2].path)">
  123. <image class="tui-skeleton-circular" :src="navServerList[2].icon"></image>
  124. <text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
  125. </view>
  126. <view class="cate-item" @click="telPhoneTo">
  127. <image class="tui-skeleton-circular" :src="navServerList[3].icon"></image>
  128. <text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
  129. </view>
  130. </view>
  131. </view>
  132. <view class="f-text tui-skeleton-fillet">
  133. <view class="">
  134. <image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
  135. <text class="">采美365网</text>
  136. </view>
  137. </view>
  138. </view>
  139. </view>
  140. <!-- 活动弹窗 -->
  141. <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert>
  142. <!-- 透明模态层 -->
  143. <modal-layer v-if='modallayer'></modal-layer>
  144. </view>
  145. </template>
  146. <script>
  147. import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
  148. import authorize from '@/common/config/authorize.js'
  149. import modalLayer from "@/components/modal-layer"
  150. import cmCustom from '@/components/cm-module/home/cm-custom.vue'
  151. import activityAlert from '@/components/cm-module/activity/activity_on_1.vue'
  152. import uniStars from '@/components/uni-stars/uni-stars.vue'
  153. import { userInfoLogin, queryHomeInfo } from "@/api/use.js"
  154. import { queryPreferred } from "@/api/product.js"
  155. import { mapState,mapMutations} from 'vuex';
  156. export default {
  157. components:{
  158. tuiSkeleton,
  159. modalLayer,
  160. cmCustom,
  161. uniStars,
  162. activityAlert
  163. },
  164. data() {
  165. return {
  166. webviewStyles: {
  167. progress: {
  168. color: '#FF3333'
  169. }
  170. },
  171. nvabarData: {//顶部自定义导航
  172. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  173. showSearch: 0,
  174. title: '采美采购商城', // 导航栏 中间的标题
  175. haveBack:false,
  176. textLeft:this.$store.state.isIphone,
  177. textColor:'#FFFFFF'
  178. },
  179. CustomBar:this.CustomBar,// 顶部导航栏高度
  180. userID:'',
  181. clubStatus:'',
  182. current:0,
  183. mode:'round',
  184. modallayer:false,
  185. isLogin:false,
  186. bannerImageList:[],
  187. skeletonShow: true,
  188. userIdentity:'',
  189. organizeProducts:[],//常用商品
  190. productsClassifyList:[
  191. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  192. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  193. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  194. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
  195. {classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'}
  196. ],//分类导航
  197. firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
  198. secondModulesName:'', //优惠模块2
  199. firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
  200. secondModulesImage:'',//优惠模块icon2
  201. thirdModulesName:'', //优惠模块3
  202. navInforList:[
  203. {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCABdf_AAAfdMmM_xY655.png'},
  204. {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9BSAXPobAAApo6I0Tlo684.png'}
  205. ],
  206. navServerList:[
  207. {text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
  208. {text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
  209. {text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
  210. {text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
  211. ]
  212. }
  213. },
  214. onLoad() {
  215. },
  216. computed: {
  217. ...mapState(['hasLogin','userInfo','isActivity'])
  218. },
  219. methods: {
  220. ...mapMutations(['login','logout']),
  221. getWxAuthorize(){
  222. authorize.getCode('weixin').then(wechatcode =>{// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
  223. authorize.getUserInfo('weixin').then(wxResponse =>{
  224. userInfoLogin({code:wechatcode,encryptedData:wxResponse.encryptedData,iv:wxResponse.iv}).then(response =>{
  225. this.isLogin = true;
  226. this.userID = response.data.userID;
  227. this.userIdentity = response.data.userIdentity;
  228. this.clubStatus = response.data.clubStatus;
  229. this.$store.commit('updateStatus',response.data)
  230. this.login(response.data);
  231. uni.setStorageSync('token',response.data.token)
  232. uni.removeStorageSync('sessionid')
  233. uni.setStorageSync('sessionid','JSESSIONID='+response.data.sessionId)
  234. if(response.data.userIdentity ==1){
  235. this.$api.navigateTo('/seller/pages/index/index')
  236. }
  237. }).catch(error =>{
  238. this.isLogin = false;
  239. this.logout()
  240. uni.removeStorageSync('sessionid')
  241. uni.setStorageSync('sessionid','JSESSIONID='+error.data)
  242. this.$store.commit('updateStatus',error.data)
  243. })
  244. this.getHomeInformation()
  245. this.getOrganizeProducts()
  246. })
  247. })
  248. },
  249. getHomeInformation(){
  250. queryHomeInfo({}).then(res =>{
  251. let data = res.data;
  252. this.bannerImageList = data.bannerImageList
  253. this.mallPageModules = data.mallPageModules
  254. this.firstModulesName= data.firstModulesName
  255. this.secondModulesName= data.secondModulesName
  256. this.firstModulesImage= data.firstModulesImage
  257. this.secondModulesImage= data.secondModulesImage
  258. this.thirdModulesName= data.thirdModulesName
  259. this.productsClassifyList = data.productsClassifyList
  260. this.skeletonShow = false;
  261. this.$store.commit('updateAllNum',data.shoppingCartCount)
  262. }).catch(error =>{
  263. this.$util.msg(error.msg,2000)
  264. })
  265. },
  266. getOrganizeProducts(){//获取模块三商品
  267. queryPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:6}).then(res =>{
  268. this.organizeProducts = res.data.results
  269. }).catch(error =>{
  270. this.$util.msg(error.msg,2000)
  271. })
  272. },
  273. //轮播图切换修改背景色
  274. swiperChange(e) {
  275. const index = e.detail.current;
  276. this.current = index;
  277. },
  278. formatMoney(num){
  279. return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
  280. return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
  281. return $1 + ",";
  282. });
  283. });
  284. },
  285. handleBannerActivity(item,index){
  286. switch(index){
  287. case 0:
  288. this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
  289. break;
  290. }
  291. },
  292. handleClick(data){
  293. this.$api.navigateTo(`/h5/pages/activity/activity_mid`)
  294. this.$store.commit('setActivity',data)
  295. },
  296. handleCancelClick(data){
  297. this.$store.commit('setActivity',data)
  298. },
  299. navToListPage(nav){//三个分类模块跳转
  300. let self = this;
  301. uni.setStorage({
  302. key: 'commodity_id',
  303. data: nav.id,
  304. success: function () {
  305. self.$api.navToListPage({type:'0',value:nav.classifyName,id:nav.id});
  306. }
  307. })
  308. },
  309. navigateToGoods(nav){//分类导航跳转
  310. let self = this;
  311. uni.setStorage({
  312. key: 'commodity_id',
  313. data: nav.id,
  314. success: function () {
  315. self.$api.navigateToGoods({type:'0',value:nav.classifyName,id:nav.id});
  316. }
  317. })
  318. },
  319. navToDetailPage(id) {//跳转商品详情页
  320. this.modallayer = true;
  321. this.$api.navigateTo(`/pages/goods/product?id=${id}`)
  322. },
  323. handleContact(e){
  324. console.log(e.detail.path)
  325. console.log(e.detail.query)
  326. },
  327. showTost(){
  328. this.$util.msg("功能开发中,敬请期待~",2000)
  329. // this.$api.navigateTo(`/seller/pages/login/login`)
  330. // uni.navigateToMiniProgram({
  331. // appId: 'wx5a5cda32926f55ac',
  332. // path: '/pages/tabBar/home/home',
  333. // extraData: {
  334. // 'data1': 'test'
  335. // },
  336. // envVersion: 'develop',
  337. // success(res) {
  338. // console.log(res)
  339. // // 打开成功
  340. // }
  341. // })
  342. },
  343. navto(url){
  344. this.$api.navigateTo(url)
  345. },
  346. swiperNavtopage(link){
  347. this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
  348. },
  349. telPhoneTo(){
  350. let self = this;
  351. this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
  352. response => {
  353. console.log(response.data.contactNumber)
  354. uni.makePhoneCall({
  355. phoneNumber:response.data.contactNumber //仅为示例
  356. });
  357. }
  358. )
  359. }
  360. },
  361. onPageScroll(e){//实时获取到滚动的值
  362. if(e.scrollTop>50){
  363. this.inputActive = 'fixed'
  364. }else{
  365. this.inputActive = 'float'
  366. }
  367. },
  368. onPullDownRefresh() {//下拉刷新
  369. this.getHomeInformation()
  370. this.getOrganizeProducts()
  371. uni.stopPullDownRefresh()
  372. },
  373. onShareAppMessage(res){//分享转发
  374. if (res.from === 'button') {
  375. // 来自页面内转发按钮
  376. }
  377. return {
  378. title: '采美采购商城-生美/医美采购服务平台',
  379. path: 'pages/tabBar/home/home',
  380. imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
  381. }
  382. },
  383. onShow(){
  384. this.modallayer = false;
  385. authorize.getSetting().then(res =>{// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
  386. if(res == 1){
  387. this.getWxAuthorize()
  388. }else{
  389. this.getHomeInformation()
  390. this.getOrganizeProducts()
  391. }
  392. })
  393. }
  394. }
  395. </script>
  396. <style lang="scss">
  397. page,.home{
  398. width: 100%;
  399. height: auto;
  400. }
  401. .container-home{
  402. background: #FFFFFF;
  403. }
  404. .swiper-banner-box{
  405. width: 100%;
  406. height: 360rpx;
  407. padding-top:100rpx;
  408. background:#FFFFFF url(https://img.caimei365.com/group1/M00/03/B0/Cmis217Z9LCALu9wAAAv45Bdpsk814.png)no-repeat;
  409. position: relative;
  410. background-size: cover;
  411. }
  412. .tui-banner-swiper {
  413. width: 700rpx;
  414. margin: 0 auto;
  415. height: 340rpx;
  416. border-radius: 24rpx;
  417. overflow: hidden;
  418. transform: translateY(0);
  419. box-shadow:0px 3px 6px rgba(225,86,22,0.08);
  420. margin-top: 16rpx;
  421. .banner-item{
  422. border-radius: 24rpx;
  423. }
  424. .tui-slide-image {
  425. width: 100%;
  426. height: 340rpx;
  427. display: block;
  428. }
  429. }
  430. .swiper__dots-box{
  431. position: absolute;
  432. bottom: 30rpx;
  433. left: 0;
  434. right: 0;
  435. /* #ifndef APP-NVUE */
  436. display: flex;
  437. /* #endif */
  438. flex: 1;
  439. flex-direction: row;
  440. justify-content: center;
  441. align-items: center;
  442. .swiper__dots-item{
  443. width: 8rpx;
  444. height: 8rpx;
  445. border-radius: 100%;
  446. margin-left: 6px;
  447. background-color:rgba(255,255,255,.7);
  448. }
  449. .swiper__dots-long{
  450. width: 35rpx;
  451. height: 8rpx;
  452. border-radius: 4rpx;
  453. background-color: #ffff;
  454. transition: all 0.4s;
  455. }
  456. }
  457. /* 分类 */
  458. .cate-section {
  459. width: 702rpx;
  460. height: auto;
  461. padding:34rpx 24rpx 14rpx 24rpx;
  462. background: #fff;
  463. .tabbar{
  464. margin-bottom: 26rpx;
  465. &.bot{
  466. padding: 16rpx 24rpx;
  467. border-radius: 20rpx;
  468. box-shadow:0px 3px 6px rgba(225,86,22,0.07);
  469. border: 1px solid #F9F9F9;
  470. }
  471. }
  472. .cate-item {
  473. width: 118rpx;
  474. margin-right:28rpx;
  475. display: flex;
  476. float: left;
  477. flex-direction: column;
  478. align-items: center;
  479. font-size: $font-size-26;
  480. color: $text-color;
  481. line-height: 36rpx;
  482. &:last-child{
  483. margin-right: 0;
  484. }
  485. &:nth-child(5n){
  486. margin-right: 0;
  487. }
  488. image {
  489. width: 90rpx;
  490. height: 90rpx;
  491. margin-bottom: 8rpx;
  492. border-radius: 32rpx;
  493. }
  494. }
  495. .cate-item-info {
  496. width: 118rpx;
  497. margin-right:59.5rpx;
  498. display: flex;
  499. float: left;
  500. flex-direction: column;
  501. align-items: center;
  502. font-size: $font-size-26;
  503. color: $text-color;
  504. line-height: 36rpx;
  505. &:last-child{
  506. margin-right: 0;
  507. }
  508. image {
  509. width: 90rpx;
  510. height: 90rpx;
  511. margin-bottom: 16rpx;
  512. border-radius: 32rpx;
  513. }
  514. button.contact-btn{
  515. width: 118rpx;
  516. height: 90rpx;
  517. margin: 0;
  518. padding: 0;
  519. display: flex;
  520. flex-direction: column;
  521. align-items: center;
  522. box-sizing: border-box;
  523. text-align: center;
  524. text-decoration: none;
  525. border-radius: 0;
  526. -webkit-tap-highlight-color: transparent;
  527. overflow: hidden;
  528. background-color:#FFFFFF;
  529. margin-bottom: 16rpx;
  530. image{
  531. width: 90rpx;
  532. height: 90rpx;
  533. margin-bottom: 0;
  534. border-radius: 32rpx;
  535. }
  536. }
  537. }
  538. }
  539. .hotgoods-section{
  540. background: #FFFFFF;
  541. .s-header{
  542. display:flex;
  543. align-items:center;
  544. height: 50rpx;
  545. line-height: 50rpx;
  546. border-radius: 20rpx 20rpx 0 0;
  547. .tip{
  548. flex: 4;
  549. font-size: 30rpx;
  550. color: $text-color;
  551. font-weight: bolder;
  552. padding-left: 24rpx;
  553. }
  554. .tit{
  555. flex: 4.4;
  556. font-size: $font-size-28;
  557. color: $text-color;
  558. text-align: right;
  559. }
  560. .icon-xiayibu{
  561. flex: 0.6;
  562. color: $text-color;
  563. text-align: left;
  564. font-size: $font-size-24;
  565. }
  566. }
  567. }
  568. .hotgoods-swiper{
  569. width: 100%;
  570. height: auto;
  571. overflow: hidden;
  572. padding-top: 24rpx;
  573. background: #FFFFFF;
  574. border-radius: 20rpx;
  575. margin-bottom: 20rpx;
  576. // box-shadow:0px 3px 6px rgba(225,86,22,0.07);
  577. .scoll-wrapper{
  578. width: 702rpx;
  579. height: auto;
  580. padding:24rpx 24rpx 0 24rpx;
  581. background: #F7F7F7;
  582. border-radius: 20rpx;
  583. .floor-item{
  584. width: 341rpx;
  585. margin-right: 20rpx;
  586. font-size: $font-size-24;
  587. color: $text-color;
  588. background: #FFFFFF;
  589. line-height: 36rpx;
  590. border-radius: 20rpx;
  591. margin-bottom: 20rpx;
  592. float: left;
  593. &:nth-child(2n){
  594. margin-right: 0;
  595. }
  596. image{
  597. width: 341rpx;
  598. height: 341rpx;
  599. border-radius: 20rpx 20rpx 0 0;
  600. display: block;
  601. margin-bottom: 20rpx;
  602. }
  603. .floor-item-content{
  604. width: 311rpx;
  605. padding: 0 15rpx;
  606. }
  607. .title-none{
  608. font-size: $font-size-26;
  609. color: #FF2A2A;
  610. line-height: 80rpx;
  611. .btn{
  612. display: inline-block;
  613. float: right;
  614. width: 112rpx;
  615. height: 44rpx;
  616. background: $btn-confirm;
  617. line-height: 44rpx;
  618. font-size: $font-size-24;
  619. color: #FFFFFF;
  620. text-align: center;
  621. border-radius: 22rpx;
  622. margin-top: 17rpx;
  623. }
  624. }
  625. .title{
  626. width: 100%;
  627. height: 72rpx;
  628. display: flex;
  629. flex-direction: column;
  630. .mclap{
  631. width: 100%;
  632. line-height: 36rpx;
  633. text-overflow:ellipsis;
  634. display: -webkit-box;
  635. word-break: break-all;
  636. -webkit-box-orient: vertical;
  637. -webkit-line-clamp: 2;
  638. overflow: hidden;
  639. font-size: 26rpx;
  640. }
  641. }
  642. .no-price{
  643. height: 76rpx;
  644. line-height: 76rpx;
  645. display: flex;
  646. .p-no{
  647. font-size: $font-size-24;
  648. color: $color-system;
  649. margin-right: 5rpx;
  650. }
  651. .p-stars{
  652. margin-top: 3rpx;
  653. }
  654. }
  655. .price{
  656. color:#FF2A2A;
  657. line-height: 80rpx;
  658. .sm{
  659. font-size: $font-size-24;
  660. }
  661. .big{
  662. font-size: $font-size-28;
  663. }
  664. }
  665. }
  666. }
  667. }
  668. .footer-section{
  669. width: 702rpx;
  670. padding: 0 24rpx 0 24rpx;
  671. background: #FFFFFF;
  672. border-radius: 20rpx;
  673. .s-header{
  674. display:flex;
  675. align-items:center;
  676. height: 80rpx;
  677. line-height: 80rpx;
  678. .tip{
  679. flex: 1;
  680. font-size: 30rpx;
  681. color: $text-color;
  682. font-weight: bolder;
  683. }
  684. }
  685. .f-content{
  686. width: 100%;
  687. image{
  688. width: 100%;
  689. height: 350rpx;
  690. }
  691. }
  692. /*底部服务导航*/
  693. .f-tab-section {
  694. width: 100%;
  695. height: auto;
  696. padding: 38rpx 0;
  697. background: #fff;
  698. /*底部服务导航*/
  699. .cate-item {
  700. width: 99rpx;
  701. margin-right: 102rpx;
  702. float: left;
  703. display: flex;
  704. flex-direction: column;
  705. align-items: center;
  706. font-size: $font-size-24;
  707. color: $text-color;
  708. &:last-child{
  709. margin-right: 0;
  710. }
  711. image {
  712. width: 75rpx;
  713. height: 75rpx;
  714. margin-bottom: 8rpx;
  715. border-radius: 50%;
  716. }
  717. }
  718. }
  719. .f-text{
  720. .logo{
  721. width: 80rpx;
  722. height: 80rpx;
  723. float: left;
  724. margin: 0 6rpx;
  725. }
  726. display: flex;
  727. flex-direction: column;
  728. align-items: center;
  729. font-size: $font-size-24;
  730. color: $text-color;
  731. line-height: 80rpx;
  732. padding-top: 20rpx;
  733. }
  734. }
  735. </style>