|
@@ -1,641 +0,0 @@
|
|
-<template>
|
|
|
|
- <view class="container home clearfix" :style="{paddingBottom:isIphoneX?'140rpx':'98rpx',paddingTop:CustomBar+'px'}">
|
|
|
|
- <cu-custom :navbar-data='nvabarData'></cu-custom>
|
|
|
|
- <!-- 头部轮播 -->
|
|
|
|
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="9"></tui-skeleton>
|
|
|
|
- <view :class="'container-home-'+ inputActive" class="tui-skeleton">
|
|
|
|
- <view :class="'search-input-' + inputActive" :style="{paddingTop:inputActive == 'fixed'?(CustomBar+2)+'px':''} ">
|
|
|
|
- <bt-search :clickPath="clickPath" :toestText='hotSearchText'></bt-search>
|
|
|
|
- </view>
|
|
|
|
- <view class="banner-section">
|
|
|
|
- <!-- <uni-swiper-dot :info="bannerList" :current="current" field="content" :mode="mode" > -->
|
|
|
|
- <swiper class="banner tui-banner tui-skeleton-rect" circular @change="swiperChange" :autoplay="true" :interval="5000" :duration="500" :circular="false">
|
|
|
|
- <swiper-item v-for="(item, index) in bannerImageList" :key="index" class="banner-item">
|
|
|
|
- <image :src="item" />
|
|
|
|
- </swiper-item>
|
|
|
|
- </swiper>
|
|
|
|
- <view class="swiper__dots-box" v-if="bannerImageList.length > 1">
|
|
|
|
- <view v-for="(item,idx) in bannerImageList"
|
|
|
|
- :key="idx"
|
|
|
|
- :class="[idx===current?'swiper__dots-long':'none']"
|
|
|
|
- :data-index="current" class="swiper__dots-item" />
|
|
|
|
- </view>
|
|
|
|
- <!-- </uni-swiper-dot> -->
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-section clearfix">
|
|
|
|
- <!-- 优选分类 -->
|
|
|
|
- <view class="tabbar clearfix">
|
|
|
|
- <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:firstModulesName})">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="firstModulesImage"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{firstModulesName}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:secondModulesName})">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="secondModulesImage"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{secondModulesName}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item-info" @click="showTost">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navInforList[0].icon"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{navInforList[0].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item-info">
|
|
|
|
- <!-- #ifdef MP-WEIXIN -->
|
|
|
|
- <button class="contact-btn" open-type="contact" @bindcontact="handleContact">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navInforList[1].icon"></image>
|
|
|
|
- </button>
|
|
|
|
- <!-- #endif -->
|
|
|
|
- <text class="tui-skeleton-fillet">{{navInforList[1].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 热销商品 -->
|
|
|
|
- <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>
|
|
|
|
- <text class="iconfont icon-xiayibu"></text>
|
|
|
|
- </view>
|
|
|
|
- <view class="hotgoods-swiper">
|
|
|
|
- <scroll-view class="floor-list" scroll-x>
|
|
|
|
- <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="title tui-skeleton-rect">
|
|
|
|
- <text class="mclap">{{item.name}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="" v-if="hasLogin">
|
|
|
|
- <view class="title-none" v-if="item.price1TextFlag == '1'">
|
|
|
|
- <text class="p big">尚未公开价格</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="price tui-skeleton-rect" v-else>
|
|
|
|
- <text class="p sm">¥</text>
|
|
|
|
- <text class="p big">{{item.retailPrice.toFixed(2)}}</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view v-else class="no-price">
|
|
|
|
- <text class="p-no">价格:</text>
|
|
|
|
- <uni-stars :stars="parseInt(item.price1Grade)"></uni-stars>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </scroll-view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 底部 -->
|
|
|
|
- <view class="footer-section ">
|
|
|
|
- <view class="s-header tui-skeleton-fillet">
|
|
|
|
- <text class="tip">医美机构正品联盟</text>
|
|
|
|
- </view>
|
|
|
|
- <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>
|
|
|
|
- </view>
|
|
|
|
- <view class="f-tab-section">
|
|
|
|
- <!-- 优选分类 -->
|
|
|
|
- <view class="tabbar clearfix">
|
|
|
|
- <view class="cate-item" @click="showTost">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[0].icon"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{navServerList[0].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item" @click="navto(navServerList[1].path)">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[1].icon"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{navServerList[1].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item" @click="navto(navServerList[2].path)">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[2].icon"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{navServerList[2].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- <view class="cate-item" @click="telPhoneTo">
|
|
|
|
- <image class="tui-skeleton-fillet" :src="navServerList[3].icon"></image>
|
|
|
|
- <text class="tui-skeleton-fillet">{{navServerList[3].text}}</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="f-text tui-skeleton-fillet">
|
|
|
|
- <view class="">
|
|
|
|
- <image class="logo" src="../../../static/logo-c@2x.png" mode=""></image>
|
|
|
|
- <text class="">采美365网</text>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 透明模态层 -->
|
|
|
|
- <modal-layer v-if='modallayer'></modal-layer>
|
|
|
|
- <!-- 底部tabbar -->
|
|
|
|
- <cu-tabbar :active-index ="0"></cu-tabbar>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
|
- import authorize from '@/common/config/authorize.js'
|
|
|
|
- import modalLayer from "@/components/modal-layer"
|
|
|
|
- import cuTabbar from '@/components/cu-tabbar.vue'
|
|
|
|
- import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
|
- import uniStars from '@/components/uni-stars/uni-stars.vue'
|
|
|
|
- import { queryHomeInfo } from "@/api/use.js"
|
|
|
|
- import { queryPreferred } from "@/api/product.js"
|
|
|
|
- import { mapState,mapMutations } from 'vuex'
|
|
|
|
- export default {
|
|
|
|
- components:{
|
|
|
|
- tuiSkeleton,
|
|
|
|
- modalLayer,
|
|
|
|
- btSearch,
|
|
|
|
- uniStars,
|
|
|
|
- cuTabbar
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- nvabarData: { //顶部自定义导航
|
|
|
|
- showCapsule: 0, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
|
- showSearch: 0,
|
|
|
|
- title: '采美采购商城', // 导航栏 中间的标题
|
|
|
|
- },
|
|
|
|
- userID:'',
|
|
|
|
- inputActive:'float',
|
|
|
|
- hotSearchText:'你想要的这里都有',
|
|
|
|
- clickPath:'/pages/search/search',
|
|
|
|
- current:0,
|
|
|
|
- mode:'round',
|
|
|
|
- isLogin:false,
|
|
|
|
- modallayer:false,
|
|
|
|
- bannerImageList:[],
|
|
|
|
- skeletonShow: true,
|
|
|
|
- isIphoneX:this.$store.state.isIphoneX,
|
|
|
|
- CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
|
- organizeProducts:[],//常用商品
|
|
|
|
- firstModulesName:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png', //优惠模块1
|
|
|
|
- secondModulesName:'', //优惠模块2
|
|
|
|
- firstModulesImage:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png',//优惠模块icon1
|
|
|
|
- secondModulesImage:'',//优惠模块icon2
|
|
|
|
- thirdModulesName:'', //优惠模块3
|
|
|
|
- navInforList:[
|
|
|
|
- {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAAZU0AACaPrfbB8I435.png'},
|
|
|
|
- {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWABv0rAACt9b8scec656.png'}
|
|
|
|
- ],
|
|
|
|
- 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:''},
|
|
|
|
- ]
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad() {
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- computed: {
|
|
|
|
- ...mapState(['hasLogin']),
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- getCheekeyCode(){
|
|
|
|
- this.getHomeInformation()
|
|
|
|
- this.getOrganizeProducts()
|
|
|
|
- },
|
|
|
|
- getHomeInformation(){
|
|
|
|
- queryHomeInfo({}).then(res =>{
|
|
|
|
- let data = res.data;
|
|
|
|
- this.bannerImageList = data.bannerImageList
|
|
|
|
- this.mallPageModules = data.mallPageModules
|
|
|
|
- this.$store.commit('updateAllNum',data.shoppingCartCount)
|
|
|
|
- this.firstModulesName= data.firstModulesName
|
|
|
|
- this.secondModulesName= data.secondModulesName
|
|
|
|
- this.firstModulesImage= data.firstModulesImage
|
|
|
|
- this.secondModulesImage= data.secondModulesImage
|
|
|
|
- this.thirdModulesName= data.thirdModulesName
|
|
|
|
- this.skeletonShow = false;
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- 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
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- //轮播图切换修改背景色
|
|
|
|
- swiperChange(e) {
|
|
|
|
- const index = e.detail.current;
|
|
|
|
- this.current = index;
|
|
|
|
- },
|
|
|
|
- formatMoney(num){
|
|
|
|
- return num.toString().replace(/\d+/, function (n) { // 先提取整数部分
|
|
|
|
- return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) { // 对整数部分添加分隔符
|
|
|
|
- return $1 + ",";
|
|
|
|
- });
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- //分类导航跳转
|
|
|
|
- navToListPage(nav){
|
|
|
|
- let self = this;
|
|
|
|
- uni.setStorage({
|
|
|
|
- key: 'commodity_id',
|
|
|
|
- data: nav.id,
|
|
|
|
- success: function () {
|
|
|
|
- self.$api.navToListPage({type:'商品分类',value:nav.classifyName,id:nav.id});
|
|
|
|
- }
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- navToDetailPage(id) {//跳转商品详情页
|
|
|
|
- this.modallayer = true;
|
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${id}`)
|
|
|
|
- },
|
|
|
|
- handleContact(e){
|
|
|
|
- console.log(e.detail.path)
|
|
|
|
- console.log(e.detail.query)
|
|
|
|
- },
|
|
|
|
- showTost(){
|
|
|
|
- this.$util.msg("正在开发中,敬请期待~",2000);
|
|
|
|
- // uni.navigateToMiniProgram({
|
|
|
|
- // appId: 'wx5a5cda32926f55ac',
|
|
|
|
- // path: '/pages/tabBar/home/home',
|
|
|
|
- // extraData: {
|
|
|
|
- // 'data1': 'test'
|
|
|
|
- // },
|
|
|
|
- // envVersion: 'develop',
|
|
|
|
- // success(res) {
|
|
|
|
- // console.log(res)
|
|
|
|
- // // 打开成功
|
|
|
|
-
|
|
|
|
- // }
|
|
|
|
- // })
|
|
|
|
- },
|
|
|
|
- navto(url){
|
|
|
|
- this.$api.navigateTo(url)
|
|
|
|
- },
|
|
|
|
- telPhoneTo(){
|
|
|
|
- let self = this;
|
|
|
|
- this.$api.get('/home/afterSale',{},
|
|
|
|
- response => {
|
|
|
|
- console.log(response.data.contactNumber)
|
|
|
|
- uni.makePhoneCall({
|
|
|
|
- phoneNumber:response.data.contactNumber //仅为示例
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- )
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onPageScroll(e){//实时获取到滚动的值
|
|
|
|
- if(e.scrollTop>50){
|
|
|
|
- this.inputActive = 'fixed'
|
|
|
|
- }else{
|
|
|
|
- this.inputActive = 'float'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onPullDownRefresh() {//下拉刷新
|
|
|
|
- this.getHomeInformation()
|
|
|
|
- uni.stopPullDownRefresh()
|
|
|
|
- },
|
|
|
|
- onShareAppMessage(res){//分享转发
|
|
|
|
- if (res.from === 'button') {
|
|
|
|
- // 来自页面内转发按钮
|
|
|
|
- console.log(res.target)
|
|
|
|
- }
|
|
|
|
- return {
|
|
|
|
- title: '采美采购商城-生美/医美采购服务平台',
|
|
|
|
- path: 'pages/tabBar/home/home',
|
|
|
|
- imageUrl:'https://img.caimei365.com/group1/M00/03/8C/Cmis215XHXSAWWkhAAXDP4-6m_c397.png'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onShow(){
|
|
|
|
- this.modallayer = false;
|
|
|
|
- this.getCheekeyCode()
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss">
|
|
|
|
- page,.home{
|
|
|
|
- width: 100%;
|
|
|
|
- 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;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- .banner-section{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 366rpx;
|
|
|
|
- position: relative;
|
|
|
|
- }
|
|
|
|
- .banner{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 366rpx;
|
|
|
|
- image {
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .swiper__dots-box{
|
|
|
|
- position: absolute;
|
|
|
|
- bottom: 10px;
|
|
|
|
- left: 0;
|
|
|
|
- right: 0;
|
|
|
|
- /* #ifndef APP-NVUE */
|
|
|
|
- display: flex;
|
|
|
|
- /* #endif */
|
|
|
|
- flex: 1;
|
|
|
|
- flex-direction: row;
|
|
|
|
- justify-content: center;
|
|
|
|
- align-items: center;
|
|
|
|
- .swiper__dots-item{
|
|
|
|
- width: 8rpx;
|
|
|
|
- height: 8rpx;
|
|
|
|
- border-radius: 100%;
|
|
|
|
- margin-left: 6px;
|
|
|
|
- background-color:rgba(255,255,255,.7);
|
|
|
|
- }
|
|
|
|
- .swiper__dots-long{
|
|
|
|
- width: 32rpx;
|
|
|
|
- height: 8rpx;
|
|
|
|
- border-radius: 4rpx;
|
|
|
|
- background-color: #ffff;
|
|
|
|
- transition: all 0.4s;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- /* 分类 */
|
|
|
|
- .cate-section {
|
|
|
|
- width: 702rpx;
|
|
|
|
- height: auto;
|
|
|
|
- padding:34rpx 24rpx 14rpx 24rpx;
|
|
|
|
- background: #fff;
|
|
|
|
- .tabbar{
|
|
|
|
- margin-bottom: 26rpx;
|
|
|
|
- }
|
|
|
|
- .cate-item {
|
|
|
|
- width: 118rpx;
|
|
|
|
- margin-right:28rpx;
|
|
|
|
- margin-bottom:28rpx;
|
|
|
|
- display: flex;
|
|
|
|
- float: left;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- font-size: $font-size-26;
|
|
|
|
- color: $text-color;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- &:last-child{
|
|
|
|
- margin-right: 0;
|
|
|
|
- }
|
|
|
|
- &:nth-child(5n){
|
|
|
|
- margin-right: 0;
|
|
|
|
- }
|
|
|
|
- image {
|
|
|
|
- width: 90rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .cate-item-info {
|
|
|
|
- width: 160rpx;
|
|
|
|
- margin-right:20.666rpx;
|
|
|
|
- display: flex;
|
|
|
|
- float: left;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- font-size: $font-size-26;
|
|
|
|
- color: $text-color;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- &:last-child{
|
|
|
|
- margin-right: 0;
|
|
|
|
- }
|
|
|
|
- image {
|
|
|
|
- width: 160rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
- margin-bottom: 16rpx;
|
|
|
|
- }
|
|
|
|
- button.contact-btn{
|
|
|
|
- width: 160rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- box-sizing: border-box;
|
|
|
|
- text-align: center;
|
|
|
|
- text-decoration: none;
|
|
|
|
- border-radius: 0;
|
|
|
|
- -webkit-tap-highlight-color: transparent;
|
|
|
|
- overflow: hidden;
|
|
|
|
- background-color:#FFFFFF;
|
|
|
|
- margin-bottom: 16rpx;
|
|
|
|
- image{
|
|
|
|
- width: 160rpx;
|
|
|
|
- height: 90rpx;
|
|
|
|
- margin-bottom: 0;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- /* 活动 */
|
|
|
|
- .hot-section{
|
|
|
|
- padding:0 24rpx 48rpx 24rpx;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- .ht-l{
|
|
|
|
- width: 339rpx;
|
|
|
|
- height: 188rpx;
|
|
|
|
- float: left;
|
|
|
|
- image{
|
|
|
|
- width: 339rpx;
|
|
|
|
- height: 188rpx;
|
|
|
|
- border-radius:10rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .ht-r{
|
|
|
|
- width: 339rpx;
|
|
|
|
- height: 188rpx;
|
|
|
|
- float: right;
|
|
|
|
- image{
|
|
|
|
- width: 339rpx;
|
|
|
|
- height: 188rpx;
|
|
|
|
- border-radius:10rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .hotgoods-section{
|
|
|
|
- padding: 4rpx 0 24rpx 24rpx;
|
|
|
|
- background: #fff;
|
|
|
|
- .s-header{
|
|
|
|
- display:flex;
|
|
|
|
- align-items:center;
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- .tip{
|
|
|
|
- flex: 4;
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: $text-color;
|
|
|
|
- font-weight: bolder;
|
|
|
|
- }
|
|
|
|
- .tit{
|
|
|
|
- flex: 4.4;
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- color: $text-color;
|
|
|
|
- text-align: right;
|
|
|
|
- }
|
|
|
|
- .icon-xiayibu{
|
|
|
|
- flex: 0.6;
|
|
|
|
- color: $text-color;
|
|
|
|
- text-align: left;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .hotgoods-swiper{
|
|
|
|
- width: 100%;
|
|
|
|
- height: auto;
|
|
|
|
- overflow: hidden;
|
|
|
|
- scroll-view{
|
|
|
|
- padding: 26rpx 0;
|
|
|
|
- width: 100%;
|
|
|
|
- }
|
|
|
|
- .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;
|
|
|
|
- line-height: 36rpx;
|
|
|
|
- display: flex;
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
- .p-no{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $color-system;
|
|
|
|
- margin-right: 5rpx;
|
|
|
|
- }
|
|
|
|
- image{
|
|
|
|
- width:30rpx;
|
|
|
|
- height: 36rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .price{
|
|
|
|
- color:#FF2A2A;
|
|
|
|
- line-height: 20rpx;
|
|
|
|
- margin-top: 18rpx;
|
|
|
|
- .sm{
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- }
|
|
|
|
- .big{
|
|
|
|
- font-size: $font-size-28;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .footer-section{
|
|
|
|
- width: 702rpx;
|
|
|
|
- padding: 0 24rpx 30rpx 24rpx;
|
|
|
|
- .s-header{
|
|
|
|
- display:flex;
|
|
|
|
- align-items:center;
|
|
|
|
- height: 40rpx;
|
|
|
|
- line-height: 40rpx;
|
|
|
|
- margin-bottom: 38rpx;
|
|
|
|
- .tip{
|
|
|
|
- flex: 1;
|
|
|
|
- font-size: 30rpx;
|
|
|
|
- color: $text-color;
|
|
|
|
- font-weight: bolder;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .f-content{
|
|
|
|
- width: 100%;
|
|
|
|
- image{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 350rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- /*底部服务导航*/
|
|
|
|
- .f-tab-section {
|
|
|
|
- width: 100%;
|
|
|
|
- height: auto;
|
|
|
|
- padding: 38rpx 0;
|
|
|
|
- background: #fff;
|
|
|
|
- /*底部服务导航*/
|
|
|
|
- .cate-item {
|
|
|
|
- width: 99rpx;
|
|
|
|
- margin-right: 102rpx;
|
|
|
|
- float: left;
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
- &:last-child{
|
|
|
|
- margin-right: 0;
|
|
|
|
- }
|
|
|
|
- image {
|
|
|
|
- width: 75rpx;
|
|
|
|
- height: 75rpx;
|
|
|
|
- margin-bottom: 8rpx;
|
|
|
|
- border-radius: 50%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .f-text{
|
|
|
|
- .logo{
|
|
|
|
- width: 80rpx;
|
|
|
|
- height: 80rpx;
|
|
|
|
- float: left;
|
|
|
|
- margin: 0 6rpx;
|
|
|
|
- }
|
|
|
|
- display: flex;
|
|
|
|
- flex-direction: column;
|
|
|
|
- align-items: center;
|
|
|
|
- font-size: $font-size-24;
|
|
|
|
- color: $text-color;
|
|
|
|
- line-height: 80rpx;
|
|
|
|
- padding-top: 20rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|