|
@@ -1,644 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="container home clearfix">
|
|
|
- <!-- 头部轮播 -->
|
|
|
- <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-' + 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 '@/common/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)
|
|
|
- // uni.setStorageSync('X-Token','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-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{
|
|
|
- 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: #F8C499;
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- 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-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-24;
|
|
|
- color: $text-color;
|
|
|
- line-height: 40rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|