|
|
@@ -0,0 +1,643 @@
|
|
|
+<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">
|
|
|
+ <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" v-for="(nav,idx) in productsClassify" :key="idx" @click.stop="navToListPage(nav)">
|
|
|
+ <image class="tui-skeleton-fillet" :src="nav.classifyImage"></image>
|
|
|
+ <text class="tui-skeleton-rect">{{nav.classifyName}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 优选分类 -->
|
|
|
+ <view class="tabbar clearfix">
|
|
|
+ <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'1',value:mallPageModules.firstModulesName})">
|
|
|
+ <image class="tui-skeleton-fillet" :src="mallPageModules.firstModulesImage"></image>
|
|
|
+ <text class="tui-skeleton-fillet">{{mallPageModules.firstModulesName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="cate-item-info" @click.stop="this.$api.navToListPage({type:'2',value:mallPageModules.secondModulesName})">
|
|
|
+ <image class="tui-skeleton-fillet" :src="mallPageModules.secondModulesImage"></image>
|
|
|
+ <text class="tui-skeleton-fillet">{{mallPageModules.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" @click="this.$api.navToListPage({type:'3',value:mallPageModules.thirdModulesName})">
|
|
|
+ <text class="tip tui-skeleton-fillet">{{mallPageModules.thirdModulesName}}</text>
|
|
|
+ <text class="tit tui-skeleton-fillet">更多</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.id)"
|
|
|
+ >
|
|
|
+ <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 v-if="isLogin" class="price tui-skeleton-rect">
|
|
|
+ <text class="p sm">￥</text>
|
|
|
+ <text class="p big">{{item.retailPrice.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view v-else class="no-price">
|
|
|
+ <text vi-else class="p-no tui-skeleton-rect" @click.stop="navto('/pages/login/login?type=3')">登录查看价格<text class="iconfont icon-xiayibu" style="font-size: 22rpx;margin: 0 6rpx;"></text></text>
|
|
|
+ </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-logo s tui-skeleton-fillet">
|
|
|
+ <image class="" src="../../../static/logo-s@3x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="f-logo c tui-skeleton-fillet">
|
|
|
+ <image class="" src="../../../static/logo-c@2x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="f-text tui-skeleton-fillet">
|
|
|
+ <text class="">技术支持：采美365网</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 透明模态层 -->
|
|
|
+ <modal-layer v-if='modallayer'></modal-layer>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
+ import authorize from '@/config/authorize.js'
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
+ import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
+ import { mapMutations} from 'vuex';
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ tuiSkeleton,
|
|
|
+ modalLayer,
|
|
|
+ btSearch
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ userID:'',
|
|
|
+ inputActive:'float',
|
|
|
+ hotSearchText:'你想要的这里都有',
|
|
|
+ clickPath:'/pages/search/search',
|
|
|
+ current:0,
|
|
|
+ mode:'round',
|
|
|
+ modallayer:false,
|
|
|
+ isLogin:false,
|
|
|
+ bannerImageList:[],
|
|
|
+ hotGoodsList:[],
|
|
|
+ skeletonShow: true,
|
|
|
+ organizeProducts:[],//常用商品
|
|
|
+ productsClassify:[], //导航分类
|
|
|
+ mallPageModules:'', //优惠模块分类
|
|
|
+ navInforList:[
|
|
|
+ {text:'会员中心',icon:'https://img.caimei365.com/group1/M00/03/83/Cmis214FbbCAN1DUAACN4QezCQg932.png'},
|
|
|
+ {text:'在线客服',icon:'https://img.caimei365.com/group1/M00/03/83/Cmis214FbbCAAtjBAACWFNlS2jU759.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() {
|
|
|
+ this.initData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async initData(){
|
|
|
+ this.skeletonShow = true;
|
|
|
+ let hotGoodsList = await this.$util.json('hotGoodsList');
|
|
|
+ this.hotGoodsList = hotGoodsList;
|
|
|
+ },
|
|
|
+ getCheekeyCode(){
|
|
|
+ authorize.getCode('weixin').then(wechatcode =>{
|
|
|
+ // console.log(wechatcode);
|
|
|
+ // 根据微信的code获取用户登录状态:1已登录过 -1未登录过
|
|
|
+ this.$api.get('/login/doLogin',{userOrganizeID:this.userOrganizeID,code:wechatcode},
|
|
|
+ response =>{
|
|
|
+ // console.log(response);
|
|
|
+ if(response.code == '1'){
|
|
|
+ this.isLogin = true;
|
|
|
+ this.userID = response.data.userID;
|
|
|
+ let user_key = {code:response.code,openid:response.data.openid,userID:response.data.userID}
|
|
|
+ this.$store.commit('updateStatus',user_key)
|
|
|
+ uni.setStorageSync('cookieKey','JSESSIONID='+response.data.sessionId)
|
|
|
+ this.getHomeInformation()
|
|
|
+ }else{
|
|
|
+ this.isLogin = false;
|
|
|
+ this.userID ='';
|
|
|
+ let user_key = {code:response.code,tel:response.data,userID:this.userID,openid:''}
|
|
|
+ this.$store.commit('updateStatus',user_key)
|
|
|
+ this.getHomeInformation()
|
|
|
+ // this.$store.commit('updateAllNum',0)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getHomeInformation(){
|
|
|
+ this.$api.get('/home/information',{userID:this.userID,organizeID:this.userOrganizeID},
|
|
|
+ response => {
|
|
|
+ if(response.code =='1'){
|
|
|
+ let data = response.data;
|
|
|
+ this.organizeProducts = data.organizeProducts
|
|
|
+ this.productsClassify = data.productsClassify
|
|
|
+ this.bannerImageList = data.bannerImageList
|
|
|
+ this.mallPageModules = data.mallPageModules
|
|
|
+ this.$store.commit('updateAllNum',response.data.count)
|
|
|
+ }
|
|
|
+ this.skeletonShow = false
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ //轮播图切换修改背景色
|
|
|
+ swiperChange(e) {
|
|
|
+ const index = e.detail.current;
|
|
|
+ this.current = index;
|
|
|
+ // console.log('current',this.current)
|
|
|
+ // this.titleNViewBackground = this.carouselList[index].background;
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ navto(url){
|
|
|
+ this.$api.navigateTo(url)
|
|
|
+ },
|
|
|
+ telPhoneTo(){
|
|
|
+ let self = this;
|
|
|
+ this.$api.get('/home/afterSale',{organizeID:this.userOrganizeID},
|
|
|
+ response => {
|
|
|
+ console.log(response.data.contactNumber)
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber:response.data.contactNumber //仅为示例
|
|
|
+ });
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onPageScroll(e){
|
|
|
+ // console.log(e.scrollTop);//实时获取到滚动的值
|
|
|
+ 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: '星范Starstyle-全球医美领导品牌',
|
|
|
+ path: 'pages/tabBar/home/home',
|
|
|
+ imageUrl:'https://img.caimei365.com/group1/M00/03/88/Cmis214gJkOAAJBGABjUCizCahk919.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: 48rpx 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-sb;
|
|
|
+ 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-sb;
|
|
|
+ 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-base;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .icon-xiayibu{
|
|
|
+ flex: 0.6;
|
|
|
+ color: $text-color;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-sm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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-sm;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 36rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ image{
|
|
|
+ width: 210rpx;
|
|
|
+ height: 217rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .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-sm;
|
|
|
+ color: #F8C499;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ image{
|
|
|
+ width:30rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color:#FF2A2A;
|
|
|
+ line-height: 20rpx;
|
|
|
+ margin-top: 18rpx;
|
|
|
+ .sm{
|
|
|
+ font-size: $font-size-sm;
|
|
|
+ }
|
|
|
+ .big{
|
|
|
+ font-size: $font-size-base;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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-sm;
|
|
|
+ color: $text-color;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 75rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .f-logo.s{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ image{
|
|
|
+ width: 250rpx;
|
|
|
+ height: 86rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .f-logo.c{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 82rpx;
|
|
|
+ height: 84rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .f-text{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: $font-size-sm;
|
|
|
+ color: $text-color;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
