|
@@ -0,0 +1,622 @@
|
|
|
+<template>
|
|
|
+ <view class="container home clearfix">
|
|
|
+ <!-- 头部轮播 -->
|
|
|
+ <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':'10px'} ">
|
|
|
+ <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>
|
|
|
+ </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 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,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nvabarData: { //顶部自定义导航
|
|
|
+ showCapsule: 0, // 是否显示左上角图标 1表示显示 0表示不显示,
|
|
|
+ showSearch: 0,
|
|
|
+ title: '采美采购商城', // 导航栏 中间的标题
|
|
|
+ },
|
|
|
+ isIphoneX:this.$store.state.isIphoneX,
|
|
|
+ CustomBar:this.CustomBar,// 顶部导航栏高度
|
|
|
+ userID:'',
|
|
|
+ inputActive:'float',
|
|
|
+ hotSearchText:'你想要的这里都有',
|
|
|
+ clickPath:'/pages/search/search',
|
|
|
+ current:0,
|
|
|
+ mode:'round',
|
|
|
+ isLogin:false,
|
|
|
+ modallayer:false,
|
|
|
+ bannerImageList:[],
|
|
|
+ skeletonShow: true,
|
|
|
+ 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:''},
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.modallayer = false;
|
|
|
+ this.getCheekeyCode()
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ }
|
|
|
+</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>
|