|
@@ -1,19 +1,18 @@
|
|
<template>
|
|
<template>
|
|
- <view class="container home clearfix" :style="{paddingTop:100+'rpx'}">
|
|
|
|
|
|
+ <view class="container home clearfix" :style="{paddingTop:CustomBar+'px'}">
|
|
|
|
+ <cm-custom :navbar-data='nvabarData'></cm-custom>
|
|
<!-- 头部轮播 -->
|
|
<!-- 头部轮播 -->
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="5"></tui-skeleton>
|
|
- <view :class="'container-home-'+ inputActive" class="tui-skeleton">
|
|
|
|
- <view class="search-input-fixed" :style="{top:CustomBar+'px'} ">
|
|
|
|
- <bt-search :clickPath="clickPath" :toestText='hotSearchText'></bt-search>
|
|
|
|
- </view>
|
|
|
|
- <view class="banner-section">
|
|
|
|
- <swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :autoplay="true" :interval="5000" :duration="500" :circular="true">
|
|
|
|
- <swiper-item v-for="(item, index) in bannerImageList" :key="index" class="banner-item">
|
|
|
|
- <image :src="item" />
|
|
|
|
|
|
+ <view class="container-home tui-skeleton">
|
|
|
|
+ <view class="swiper-banner-box" >
|
|
|
|
+ <swiper class="tui-banner-swiper tui-banner tui-skeleton-fillet" :autoplay="true" :interval="5000" :duration="500" @change="swiperChange" :circular="true">
|
|
|
|
+ <swiper-item v-for="(item,index) in bannerImageList" :key="index">
|
|
|
|
+ <image :src="item" class="tui-slide-image" mode="scaleToFill"/>
|
|
</swiper-item>
|
|
</swiper-item>
|
|
</swiper>
|
|
</swiper>
|
|
<view class="swiper__dots-box" v-if="bannerImageList.length > 1">
|
|
<view class="swiper__dots-box" v-if="bannerImageList.length > 1">
|
|
- <view v-for="(item,idx) in bannerImageList" :key="idx"
|
|
|
|
|
|
+ <view v-for="(item,idx) in bannerImageList"
|
|
|
|
+ :key="idx"
|
|
:class="[idx===current?'swiper__dots-long':'none']"
|
|
:class="[idx===current?'swiper__dots-long':'none']"
|
|
:data-index="current" class="swiper__dots-item">
|
|
:data-index="current" class="swiper__dots-item">
|
|
</view>
|
|
</view>
|
|
@@ -24,11 +23,11 @@
|
|
<view class="tabbar clearfix">
|
|
<view class="tabbar clearfix">
|
|
<view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navToListPage(nav)">
|
|
<view class="cate-item" v-for="(nav,idx) in productsClassifyList" :key="idx" @click.stop="navToListPage(nav)">
|
|
<image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
|
|
<image class="tui-skeleton-circular" :src="nav.classifyImage"></image>
|
|
- <text class="tui-skeleton-rect">{{nav.classifyName}}</text>
|
|
|
|
|
|
+ <text class="tui-skeleton-fillet">{{nav.classifyName}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 优选分类 -->
|
|
<!-- 优选分类 -->
|
|
- <view class="tabbar clearfix">
|
|
|
|
|
|
+ <view class="tabbar bot clearfix">
|
|
<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
|
|
<view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
|
|
<image class="tui-skeleton-circular" :src="firstModulesImage"></image>
|
|
<image class="tui-skeleton-circular" :src="firstModulesImage"></image>
|
|
<text class="tui-skeleton-fillet">{{firstModulesName}}</text>
|
|
<text class="tui-skeleton-fillet">{{firstModulesName}}</text>
|
|
@@ -53,70 +52,68 @@
|
|
</view>
|
|
</view>
|
|
<!-- 热销商品 -->
|
|
<!-- 热销商品 -->
|
|
<view class="hotgoods-section">
|
|
<view class="hotgoods-section">
|
|
- <view class="s-header tui-skeleton-fillet" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
|
|
|
|
- <text class="tip">{{thirdModulesName}}</text>
|
|
|
|
- <text class="tit">更多</text>
|
|
|
|
|
|
+ <view class="s-header" @click="this.$api.navToListPage({type:'3',value:thirdModulesName})">
|
|
|
|
+ <text class="tip tui-skeleton-fillet">{{thirdModulesName}}</text>
|
|
|
|
+ <text class="tit tui-skeleton-fillet">更多</text>
|
|
<text class="iconfont icon-xiayibu"></text>
|
|
<text class="iconfont icon-xiayibu"></text>
|
|
</view>
|
|
</view>
|
|
<view class="hotgoods-swiper">
|
|
<view class="hotgoods-swiper">
|
|
- <scroll-view class="floor-list" scroll-x v-if="organizeProducts.length>0">
|
|
|
|
- <view class="scoll-wrapper">
|
|
|
|
- <view
|
|
|
|
- v-for="(item, index) in organizeProducts" :key="index"
|
|
|
|
- class="floor-item"
|
|
|
|
- @click.stop="navToDetailPage(item.productID)"
|
|
|
|
- >
|
|
|
|
- <image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
|
|
|
|
|
|
+ <view class="scoll-wrapper clearfix">
|
|
|
|
+ <view class="floor-item" v-for="(item, index) in organizeProducts" :key="index" @click.stop="navToDetailPage(item.productID)">
|
|
|
|
+ <image class="tui-skeleton-fillet" :src="item.mainImage" mode="aspectFill"></image>
|
|
|
|
+ <view class="floor-item-content">
|
|
<view class="title tui-skeleton-rect">
|
|
<view class="title tui-skeleton-rect">
|
|
<text class="mclap">{{item.name}}</text>
|
|
<text class="mclap">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="" v-if="hasLogin">
|
|
<view class="" v-if="hasLogin">
|
|
<view class="price tui-skeleton-rect">
|
|
<view class="price tui-skeleton-rect">
|
|
<text class="p sm">¥</text>
|
|
<text class="p sm">¥</text>
|
|
- <text class="p big">{{item.retailPrice.toFixed(2)}}</text>
|
|
|
|
|
|
+ <text class="p big">{{item.retailPrice!=null ? item.retailPrice.toFixed(2):''}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="no-price">
|
|
<view v-else class="no-price">
|
|
<text class="p-no">价格:</text>
|
|
<text class="p-no">价格:</text>
|
|
- <uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
|
|
|
|
|
|
+ <view class="p-stars">
|
|
|
|
+ <uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- </scroll-view>
|
|
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 底部 -->
|
|
<!-- 底部 -->
|
|
<view class="footer-section ">
|
|
<view class="footer-section ">
|
|
- <view class="s-header tui-skeleton-fillet">
|
|
|
|
|
|
+ <view class="s-header member tui-skeleton-fillet">
|
|
<text class="tip">医美机构正品联盟</text>
|
|
<text class="tip">医美机构正品联盟</text>
|
|
</view>
|
|
</view>
|
|
<view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
|
|
<view class="f-content tui-skeleton-fillet" @click="navto('/pages/service/member')">
|
|
- <image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode=""></image>
|
|
|
|
|
|
+ <image class="tui-banner" src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AEwQlAAjGFdpI2LM357.png" mode="scaleToFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="f-tab-section">
|
|
<view class="f-tab-section">
|
|
<!-- 优选分类 -->
|
|
<!-- 优选分类 -->
|
|
<view class="tabbar clearfix">
|
|
<view class="tabbar clearfix">
|
|
<view class="cate-item" @click="showTost">
|
|
<view class="cate-item" @click="showTost">
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[0].icon"></image>
|
|
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[0].icon"></image>
|
|
<text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
|
|
<text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cate-item" @click="navto(navServerList[1].path)">
|
|
<view class="cate-item" @click="navto(navServerList[1].path)">
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[1].icon"></image>
|
|
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[1].icon"></image>
|
|
<text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
|
|
<text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cate-item" @click="navto(navServerList[2].path)">
|
|
<view class="cate-item" @click="navto(navServerList[2].path)">
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[2].icon"></image>
|
|
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[2].icon"></image>
|
|
<text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
|
|
<text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="cate-item" @click="telPhoneTo">
|
|
<view class="cate-item" @click="telPhoneTo">
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[3].icon"></image>
|
|
|
|
|
|
+ <image class="tui-skeleton-circular" :src="navServerList[3].icon"></image>
|
|
<text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
|
|
<text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="f-text tui-skeleton-fillet">
|
|
<view class="f-text tui-skeleton-fillet">
|
|
<view class="">
|
|
<view class="">
|
|
- <image class="logo" src="../../static/logo-c@2x.png" mode=""></image>
|
|
|
|
|
|
+ <image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
|
|
<text class="">采美365网</text>
|
|
<text class="">采美365网</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -131,37 +128,43 @@
|
|
import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
import authorize from '@/common/config/authorize.js'
|
|
import authorize from '@/common/config/authorize.js'
|
|
import modalLayer from "@/components/modal-layer"
|
|
import modalLayer from "@/components/modal-layer"
|
|
- import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
|
|
|
+ import cmCustom from '@/components/cm-module/home/cm-custom.vue'
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
- import { queryHomeInfo } from "@/api/use.js"
|
|
|
|
|
|
+ import { userInfoLogin, queryHomeInfo } from "@/api/use.js"
|
|
import { queryPreferred } from "@/api/product.js"
|
|
import { queryPreferred } from "@/api/product.js"
|
|
- import { mapState,mapMutations } from 'vuex'
|
|
|
|
|
|
+ import { mapState,mapMutations} from 'vuex';
|
|
export default {
|
|
export default {
|
|
components:{
|
|
components:{
|
|
tuiSkeleton,
|
|
tuiSkeleton,
|
|
modalLayer,
|
|
modalLayer,
|
|
- btSearch,
|
|
|
|
|
|
+ cmCustom,
|
|
uniStars,
|
|
uniStars,
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- nvabarData: { //顶部自定义导航
|
|
|
|
- showCapsule: 0, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
|
|
|
+ webviewStyles: {
|
|
|
|
+ progress: {
|
|
|
|
+ color: '#FF3333'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ nvabarData: {//顶部自定义导航
|
|
|
|
+ showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
showSearch: 0,
|
|
showSearch: 0,
|
|
- title: '采美采购商城', // 导航栏 中间的标题
|
|
|
|
|
|
+ title: '采美采购商城', // 导航栏 中间的标题
|
|
|
|
+ haveBack:false,
|
|
|
|
+ textLeft:this.$store.state.isIphone,
|
|
|
|
+ textColor:'#FFFFFF'
|
|
},
|
|
},
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
|
CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
userID:'',
|
|
userID:'',
|
|
- modalLayer:false,
|
|
|
|
- inputActive:'float',
|
|
|
|
- hotSearchText:'你想要的这里都有',
|
|
|
|
- clickPath:'/pages/search/search',
|
|
|
|
|
|
+ clubStatus:'',
|
|
current:0,
|
|
current:0,
|
|
mode:'round',
|
|
mode:'round',
|
|
|
|
+ modallayer:false,
|
|
isLogin:false,
|
|
isLogin:false,
|
|
bannerImageList:[],
|
|
bannerImageList:[],
|
|
skeletonShow: true,
|
|
skeletonShow: true,
|
|
|
|
+ userIdentity:'',
|
|
organizeProducts:[],//常用商品
|
|
organizeProducts:[],//常用商品
|
|
productsClassifyList:[
|
|
productsClassifyList:[
|
|
{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
{classifyImage:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E7%BB%84%201238.png',classifyName:'采美'},
|
|
@@ -176,25 +179,25 @@
|
|
secondModulesImage:'',//优惠模块icon2
|
|
secondModulesImage:'',//优惠模块icon2
|
|
thirdModulesName:'', //优惠模块3
|
|
thirdModulesName:'', //优惠模块3
|
|
navInforList:[
|
|
navInforList:[
|
|
- {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/9E/Cmis216iRzOAEGPnAAA4hM3shV4061.png'},
|
|
|
|
- {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/9E/Cmis216iRzOAFXZBAABKeY23aWA452.png'}
|
|
|
|
|
|
+ {text:'会员中心',icon:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E4%BC%9A%E5%91%98%E4%B8%AD%E5%BF%83%403x.png'},
|
|
|
|
+ {text:'在线客服',icon:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E5%9C%A8%E7%BA%BF%E5%AE%A2%E6%9C%8D%403x.png'}
|
|
],
|
|
],
|
|
navServerList:[
|
|
navServerList:[
|
|
- {text:'会员优惠',icon:'../../static/temp/server1@2x.png',path:'/pages/service/member'},
|
|
|
|
- {text:'售后无忧',icon:'../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
|
|
|
|
- {text:'购物须知',icon:'../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
|
|
|
|
- {text:'联系我们',icon:'../../static/temp/server4@2x.png',path:''},
|
|
|
|
|
|
+ {text:'会员优惠',icon:'../../../static/temp/server1@2x.png',path:'/pages/service/member'},
|
|
|
|
+ {text:'售后无忧',icon:'../../../static/temp/server2@2x.png',path:'/pages/service/aftersale'},
|
|
|
|
+ {text:'购物须知',icon:'../../../static/temp/server3@2x.png',path:'/pages/service/shoppingnotice'},
|
|
|
|
+ {text:'联系我们',icon:'../../../static/temp/server4@2x.png',path:''},
|
|
]
|
|
]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.getCheekeyCode()
|
|
|
|
|
|
+ this.getSellerHomeInfo()
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- ...mapState(['hasLogin']),
|
|
|
|
|
|
+ ...mapState(['hasLogin'])
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- getCheekeyCode(){
|
|
|
|
|
|
+ getSellerHomeInfo(){
|
|
this.getHomeInformation()
|
|
this.getHomeInformation()
|
|
this.getOrganizeProducts()
|
|
this.getOrganizeProducts()
|
|
},
|
|
},
|
|
@@ -202,26 +205,24 @@
|
|
queryHomeInfo({}).then(res =>{
|
|
queryHomeInfo({}).then(res =>{
|
|
let data = res.data;
|
|
let data = res.data;
|
|
this.bannerImageList = data.bannerImageList
|
|
this.bannerImageList = data.bannerImageList
|
|
- this.productsClassifyList = data.productsClassifyList
|
|
|
|
this.mallPageModules = data.mallPageModules
|
|
this.mallPageModules = data.mallPageModules
|
|
this.firstModulesName= data.firstModulesName
|
|
this.firstModulesName= data.firstModulesName
|
|
this.secondModulesName= data.secondModulesName
|
|
this.secondModulesName= data.secondModulesName
|
|
this.firstModulesImage= data.firstModulesImage
|
|
this.firstModulesImage= data.firstModulesImage
|
|
this.secondModulesImage= data.secondModulesImage
|
|
this.secondModulesImage= data.secondModulesImage
|
|
this.thirdModulesName= data.thirdModulesName
|
|
this.thirdModulesName= data.thirdModulesName
|
|
|
|
+ this.productsClassifyList = data.productsClassifyList
|
|
this.skeletonShow = false;
|
|
this.skeletonShow = false;
|
|
|
|
+ this.$store.commit('updateAllNum',data.shoppingCartCount)
|
|
}).catch(error =>{
|
|
}).catch(error =>{
|
|
this.$util.msg(error.msg,2000)
|
|
this.$util.msg(error.msg,2000)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
getOrganizeProducts(){//获取模块三商品
|
|
getOrganizeProducts(){//获取模块三商品
|
|
- this.$api.getStorage().then((resolve) =>{
|
|
|
|
- this.userID = resolve.userID
|
|
|
|
- queryPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:5}).then(res =>{
|
|
|
|
- this.organizeProducts = res.data.results
|
|
|
|
- }).catch(error =>{
|
|
|
|
- this.$util.msg(error.msg,2000)
|
|
|
|
- })
|
|
|
|
|
|
+ queryPreferred({userId:this.userID,preferredFlag:100,pageNum:1,pageSize:6}).then(res =>{
|
|
|
|
+ this.organizeProducts = res.data.results
|
|
|
|
+ }).catch(error =>{
|
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
//轮播图切换修改背景色
|
|
//轮播图切换修改背景色
|
|
@@ -248,6 +249,7 @@
|
|
})
|
|
})
|
|
},
|
|
},
|
|
navToDetailPage(id) {//跳转商品详情页
|
|
navToDetailPage(id) {//跳转商品详情页
|
|
|
|
+ this.modallayer = true;
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
},
|
|
},
|
|
handleContact(e){
|
|
handleContact(e){
|
|
@@ -255,7 +257,7 @@
|
|
console.log(e.detail.query)
|
|
console.log(e.detail.query)
|
|
},
|
|
},
|
|
showTost(){
|
|
showTost(){
|
|
- this.$util.msg("正在开发中,敬请期待~",2000);
|
|
|
|
|
|
+ this.$util.msg("正在开发中,敬请期待~",2000)
|
|
// uni.navigateToMiniProgram({
|
|
// uni.navigateToMiniProgram({
|
|
// appId: 'wx5a5cda32926f55ac',
|
|
// appId: 'wx5a5cda32926f55ac',
|
|
// path: '/pages/tabBar/home/home',
|
|
// path: '/pages/tabBar/home/home',
|
|
@@ -272,9 +274,12 @@
|
|
navto(url){
|
|
navto(url){
|
|
this.$api.navigateTo(url)
|
|
this.$api.navigateTo(url)
|
|
},
|
|
},
|
|
|
|
+ swiperNavtopage(link){
|
|
|
|
+ this.$api.navigateTo(`/h5/pages/activity/activity?productID=4204&path=${link}`)
|
|
|
|
+ },
|
|
telPhoneTo(){
|
|
telPhoneTo(){
|
|
let self = this;
|
|
let self = this;
|
|
- this.$api.get('/home/afterSale',{},
|
|
|
|
|
|
+ this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
|
|
response => {
|
|
response => {
|
|
console.log(response.data.contactNumber)
|
|
console.log(response.data.contactNumber)
|
|
uni.makePhoneCall({
|
|
uni.makePhoneCall({
|
|
@@ -293,7 +298,18 @@
|
|
},
|
|
},
|
|
onPullDownRefresh() {//下拉刷新
|
|
onPullDownRefresh() {//下拉刷新
|
|
this.getHomeInformation()
|
|
this.getHomeInformation()
|
|
|
|
+ this.getOrganizeProducts()
|
|
uni.stopPullDownRefresh()
|
|
uni.stopPullDownRefresh()
|
|
|
|
+ },
|
|
|
|
+ onShareAppMessage(res){//分享转发
|
|
|
|
+ if (res.from === 'button') {
|
|
|
|
+ // 来自页面内转发按钮
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ title: '采美采购商城-生美/医美采购服务平台',
|
|
|
|
+ path: 'pages/tabBar/home/home',
|
|
|
|
+ imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
@@ -302,42 +318,38 @@
|
|
page,.home{
|
|
page,.home{
|
|
width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
height: auto;
|
|
- }
|
|
|
|
- .container-home-float{
|
|
|
|
- padding-top: 0;
|
|
|
|
- }
|
|
|
|
- .container-home-fixed{
|
|
|
|
- padding-top: 100rpx;
|
|
|
|
- }
|
|
|
|
- .search-input-float{
|
|
|
|
- width: 100%;
|
|
|
|
- height:auto;
|
|
|
|
- }
|
|
|
|
- .search-input-fixed{
|
|
|
|
- width: 100%;
|
|
|
|
- height:auto;
|
|
|
|
- position: fixed;
|
|
|
|
- top: 0;
|
|
|
|
- left: 0;
|
|
|
|
- z-index: 1000;
|
|
|
|
|
|
+ }
|
|
|
|
+ .container-home{
|
|
background: #FFFFFF;
|
|
background: #FFFFFF;
|
|
}
|
|
}
|
|
- .banner-section{
|
|
|
|
|
|
+ .swiper-banner-box{
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 366rpx;
|
|
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ padding-top:110rpx;
|
|
|
|
+ background:#FFFFFF url(https://admin-b.caimei365.com/userfiles/1/images/photo/2020/05/%E8%83%8C%E6%99%AF2%402x.png)no-repeat;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ background-size: cover;
|
|
}
|
|
}
|
|
- .banner{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 366rpx;
|
|
|
|
- image {
|
|
|
|
|
|
+ .tui-banner-swiper {
|
|
|
|
+ width: 700rpx;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ transform: translateY(0);
|
|
|
|
+ box-shadow:0px 3px 6px rgba(225,86,22,0.08);
|
|
|
|
+ .banner-item{
|
|
|
|
+ border-radius: 24rpx;
|
|
|
|
+ }
|
|
|
|
+ .tui-slide-image {
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
|
|
+ height: 340rpx;
|
|
|
|
+ display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.swiper__dots-box{
|
|
.swiper__dots-box{
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 10px;
|
|
|
|
|
|
+ bottom: 24rpx;
|
|
left: 0;
|
|
left: 0;
|
|
right: 0;
|
|
right: 0;
|
|
/* #ifndef APP-NVUE */
|
|
/* #ifndef APP-NVUE */
|
|
@@ -370,6 +382,12 @@
|
|
background: #fff;
|
|
background: #fff;
|
|
.tabbar{
|
|
.tabbar{
|
|
margin-bottom: 26rpx;
|
|
margin-bottom: 26rpx;
|
|
|
|
+ &.bot{
|
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ box-shadow:0px 3px 6px rgba(225,86,22,0.07);
|
|
|
|
+ border: 1px solid #F9F9F9;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
.cate-item {
|
|
.cate-item {
|
|
width: 118rpx;
|
|
width: 118rpx;
|
|
@@ -391,12 +409,12 @@
|
|
width: 90rpx;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
margin-bottom: 8rpx;
|
|
margin-bottom: 8rpx;
|
|
- border-radius: 50%;
|
|
|
|
|
|
+ border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.cate-item-info {
|
|
.cate-item-info {
|
|
width: 118rpx;
|
|
width: 118rpx;
|
|
- margin-right:76.5rpx;
|
|
|
|
|
|
+ margin-right:59.5rpx;
|
|
display: flex;
|
|
display: flex;
|
|
float: left;
|
|
float: left;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
@@ -411,7 +429,7 @@
|
|
width: 90rpx;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
margin-bottom: 16rpx;
|
|
margin-bottom: 16rpx;
|
|
- border-radius:50%;
|
|
|
|
|
|
+ border-radius: 32rpx;
|
|
}
|
|
}
|
|
button.contact-btn{
|
|
button.contact-btn{
|
|
width: 118rpx;
|
|
width: 118rpx;
|
|
@@ -433,24 +451,25 @@
|
|
width: 90rpx;
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
height: 90rpx;
|
|
margin-bottom: 0;
|
|
margin-bottom: 0;
|
|
- border-radius:50%;
|
|
|
|
|
|
+ border-radius: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.hotgoods-section{
|
|
.hotgoods-section{
|
|
- padding: 4rpx 0 24rpx 24rpx;
|
|
|
|
- background: #fff;
|
|
|
|
|
|
+ background: #FFFFFF;
|
|
.s-header{
|
|
.s-header{
|
|
display:flex;
|
|
display:flex;
|
|
align-items:center;
|
|
align-items:center;
|
|
height: 50rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
line-height: 50rpx;
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
.tip{
|
|
.tip{
|
|
flex: 4;
|
|
flex: 4;
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|
|
color: $text-color;
|
|
color: $text-color;
|
|
font-weight: bolder;
|
|
font-weight: bolder;
|
|
|
|
+ padding-left: 24rpx;
|
|
}
|
|
}
|
|
.tit{
|
|
.tit{
|
|
flex: 4.4;
|
|
flex: 4.4;
|
|
@@ -470,85 +489,112 @@
|
|
width: 100%;
|
|
width: 100%;
|
|
height: auto;
|
|
height: auto;
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
- scroll-view{
|
|
|
|
- padding: 26rpx 0;
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
|
|
+ padding-top: 24rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ // box-shadow:0px 3px 6px rgba(225,86,22,0.07);
|
|
.scoll-wrapper{
|
|
.scoll-wrapper{
|
|
- display:flex;
|
|
|
|
- align-items: flex-start;
|
|
|
|
- }
|
|
|
|
- .floor-item{
|
|
|
|
- width: 210rpx;
|
|
|
|
- padding-right: 24rpx;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- image{
|
|
|
|
- width: 210rpx;
|
|
|
|
- height: 217rpx;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- }
|
|
|
|
- .title-none{
|
|
|
|
- font-size: $font-size-26;
|
|
|
|
- color: #FF2A2A;
|
|
|
|
- line-height: 60rpx;
|
|
|
|
- }
|
|
|
|
- .title{
|
|
|
|
- width: 210rpx;
|
|
|
|
- height: 72rpx;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- .mclap{
|
|
|
|
- width: 100%;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- text-overflow:ellipsis;
|
|
|
|
- display: -webkit-box;
|
|
|
|
- word-break: break-all;
|
|
|
|
- -webkit-box-orient: vertical;
|
|
|
|
- -webkit-line-clamp: 2;
|
|
|
|
- overflow: hidden;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .no-price{
|
|
|
|
- height: 36rpx;
|
|
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ height: auto;
|
|
|
|
+ padding:24rpx 24rpx 0 24rpx;
|
|
|
|
+ background: #F7F7F7;
|
|
|
|
+ border-radius: 20rpx;
|
|
|
|
+ .floor-item{
|
|
|
|
+ width: 341rpx;
|
|
|
|
+ margin-right: 20rpx;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ background: #FFFFFF;
|
|
line-height: 36rpx;
|
|
line-height: 36rpx;
|
|
- display: flex;
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
- .p-no{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $color-system;
|
|
|
|
- margin-right: 5rpx;
|
|
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ &:nth-child(2n){
|
|
|
|
+ margin-right: 0;
|
|
}
|
|
}
|
|
image{
|
|
image{
|
|
- width:30rpx;
|
|
|
|
- height: 36rpx;
|
|
|
|
|
|
+ width: 341rpx;
|
|
|
|
+ height: 341rpx;
|
|
|
|
+ border-radius: 20rpx 20rpx 0 0;
|
|
|
|
+ display: block;
|
|
|
|
+ margin-bottom: 20rpx;
|
|
}
|
|
}
|
|
- }
|
|
|
|
- .price{
|
|
|
|
- color:#FF2A2A;
|
|
|
|
- line-height: 20rpx;
|
|
|
|
- margin-top: 18rpx;
|
|
|
|
- .sm{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
|
|
+ .floor-item-content{
|
|
|
|
+ width: 311rpx;
|
|
|
|
+ padding: 0 15rpx;
|
|
|
|
+ }
|
|
|
|
+ .title-none{
|
|
|
|
+ font-size: $font-size-26;
|
|
|
|
+ color: #FF2A2A;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ .btn{
|
|
|
|
+ display: inline-block;
|
|
|
|
+ float: right;
|
|
|
|
+ width: 112rpx;
|
|
|
|
+ height: 44rpx;
|
|
|
|
+ background: $btn-confirm;
|
|
|
|
+ line-height: 44rpx;
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: #FFFFFF;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 22rpx;
|
|
|
|
+ margin-top: 17rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .title{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 72rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ .mclap{
|
|
|
|
+ width: 100%;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ font-size: 26rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .no-price{
|
|
|
|
+ height: 76rpx;
|
|
|
|
+ line-height: 76rpx;
|
|
|
|
+ display: flex;
|
|
|
|
+ .p-no{
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ color: $color-system;
|
|
|
|
+ margin-right: 5rpx;
|
|
|
|
+ }
|
|
|
|
+ .p-stars{
|
|
|
|
+ margin-top: 3rpx;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
- .big{
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
|
|
+ .price{
|
|
|
|
+ color:#FF2A2A;
|
|
|
|
+ line-height: 80rpx;
|
|
|
|
+ .sm{
|
|
|
|
+ font-size: $font-size-24;
|
|
|
|
+ }
|
|
|
|
+ .big{
|
|
|
|
+ font-size: $font-size-28;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.footer-section{
|
|
.footer-section{
|
|
width: 702rpx;
|
|
width: 702rpx;
|
|
- padding: 0 24rpx 30rpx 24rpx;
|
|
|
|
|
|
+ padding: 0 24rpx 0 24rpx;
|
|
|
|
+ background: #FFFFFF;
|
|
|
|
+ border-radius: 20rpx;
|
|
.s-header{
|
|
.s-header{
|
|
display:flex;
|
|
display:flex;
|
|
align-items:center;
|
|
align-items:center;
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- margin-bottom: 38rpx;
|
|
|
|
|
|
+ height: 80rpx;
|
|
|
|
+ line-height: 80rpx;
|
|
.tip{
|
|
.tip{
|
|
flex: 1;
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
font-size: 30rpx;
|