You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1184 lines
30 KiB
1184 lines
30 KiB
<template> |
|
<view class="index"> |
|
<view class="head_box" :class="navStyle?'active':''"> |
|
<cu-custom :isBack="true" bgColor="''"> |
|
<block slot="backText"> |
|
<view class="acea-row row-middle"> |
|
<!-- <text class="icon"></text> --> |
|
<image v-if="navStyle" class="icon" src="../../static/images/earth-white.png"></image> |
|
<image v-else class="icon" src="../../static/images/earth.png"></image> |
|
<image v-if="navStyle" class="title-image" src="../../static/images/yanjie-logo-white.png"> |
|
</image> |
|
<text class="nav-title shopro-selector-rect" v-else>{{ '中国·武汉' }}</text> |
|
</view> |
|
</block> |
|
<block slot="right"> |
|
<view class="icon-box acea-row row-middle"> |
|
<image v-if="navStyle" src="../../static/images/search-white.png" @click="goGoodSearch()"> |
|
</image> |
|
<image v-else src="../../static/images/search.png" @click="goGoodSearch()"></image> |
|
<!-- <image v-if="navStyle" src="../../static/images/scan-white.png" mode=""></image> |
|
<image v-else src="../../static/images/scan.png" mode=""></image> --> |
|
</view> |
|
</block> |
|
</cu-custom> |
|
</view> |
|
<Banner :detail="info.banner"></Banner> |
|
<!-- <Banner :detail="homeData[2].componentContent.bannerData"></Banner> --> |
|
<!-- <Banner :detail="homeData[2].componentContent.bannerData" @getbgcolor="getbgcolor"></Banner> v-if="index < 5"--> |
|
|
|
<view class="content-box"> |
|
<view class="menus-box acea-row row-between"> |
|
<view class="item" v-for="(item, index) in info.menus" :key="index" @tap="goRoll(item)"> |
|
<view class="img-box"> |
|
<image :src="item.pic" mode=""></image> |
|
</view> |
|
<view class="title">{{item.name}}</view> |
|
</view> |
|
</view> |
|
<view class="selections-box"> |
|
<view class="top"> |
|
<view class="tip" style="font-family: Futura;font-size: 10px;">YANJIE SELECTIONS</view> |
|
<view class="acea-row row-between-wrapper"> |
|
<view class="title">眼界甄选</view> |
|
<view class="acea-row row-middle" @click="goEvaluations"> |
|
<view class="more">全部评测</view> |
|
<view class="jiantou"></view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="selections"> |
|
<scroll-view scroll-x="true" class="scroll"> |
|
<view class="item-box"> |
|
<view class="" v-for="(item,index) in info.evaluationList" :key="index" |
|
@click="goEvaluationDetail(item)"> |
|
<view class="item"> |
|
<!-- <view :class="'item ' + (index%2 == 0?'':'black')"> --> |
|
<image :src="item.homeImage" mode="aspectFill"></image> |
|
</view> |
|
</view> |
|
</view> |
|
</scroll-view> |
|
</view> |
|
</view> |
|
|
|
<view class="tab-box"> |
|
<view class="scroll-box"> |
|
<swiper :previous-margin="'32rpx'" :current="tabType" @change="changeCurrent"> |
|
<swiper-item :class="'title-box ' + (tabType?'':'on')" |
|
:style="tabType?'transform: translate(75%, 0px) translateZ(0px) !important;':'transform: translate(0%, 0px) translateZ(0px) !important;'" |
|
@click="changeTab(0)"> |
|
<view class="tip">{{tabType?'':'PICK FOR YOU'}}</view> |
|
<view class="title">推荐好物</view> |
|
</swiper-item> |
|
<swiper-item :class="'title-box ' + (tabType?'on':'')" |
|
:style="!tabType?'transform: translate(151%, 0px) translateZ(0px) !important;':'transform: translate(79%, 0px) translateZ(0px) !important;'" |
|
@click="changeTab(1)"> |
|
<view class="tip">{{tabType?'HOT LIST':''}}</view> |
|
<view class="title">热门榜单</view> |
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
<view class="tab-line-box acea-row"> |
|
<view class="tab-line" @click="changeTab(0)"> |
|
<view :class="'active ' + (tabType?'':'on')"></view> |
|
</view> |
|
<view class="tab-line" @click="changeTab(1)"> |
|
<view :class="'active ' + (tabType?'on2':'')"></view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="list-box"> |
|
<swiper :current="tabType" @change="changeListCurrent" :style="'height:'+swiperHeight+'px;'"> |
|
<swiper-item> |
|
<!-- 精品推荐 bastList --> |
|
<!-- 为您推荐 推荐好物 benefit v-show="!tabType" --> |
|
<!-- <PromotionGood :benefit="bastList" /> --> |
|
<view class="goods-list acea-row row-between"> |
|
<view class="goods-item" v-for="(item, promotionGoodIndex) in bastList" |
|
:key="promotionGoodIndex" @tap="goGoodsCon(item)"> |
|
<view class="img-box"> |
|
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> |
|
</view> |
|
<view class="name more-t">{{ item.storeName }}</view> |
|
<view class="price-box"> |
|
<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view> |
|
</view> |
|
</view> |
|
</view> |
|
</swiper-item> |
|
<swiper-item> |
|
<!-- 热门榜单 v-show="tabType" --> |
|
<!-- <HotCommodity :detail="hotList" /> --> |
|
<view class="hot-list"> |
|
<view class="classify-tab-box acea-row"> |
|
<view :class="'classify-item ' + (classifyType == index?'on':'')" |
|
v-for="(item,index) in hotList" :key="index" @click="changeClassify(index)"> |
|
{{item.listName}}</view> |
|
</view> |
|
<view class="top-box"> |
|
<view class="top-item acea-row" v-for="(item,index) in topList" :key="index" |
|
@tap="goGoodsCon(item)"> |
|
<view class="top-num-box"> |
|
<view class="">{{index+1}}</view> |
|
<view class="tip">{{index===0?'ST':index===1?'ND':index===2?'RD':'TH'}}</view> |
|
</view> |
|
<image class="img" :src="item.image" mode="aspectFill"></image> |
|
<view class="info-box"> |
|
<view class="title more-t">{{item.storeName}}</view> |
|
<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view> |
|
<view class="original">{{ item.sales }}+人购买</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="goods-list acea-row row-between" v-if="goodsList.length"> |
|
<view class="goods-item" v-for="(item, promotionGoodIndex) in goodsList" |
|
:key="promotionGoodIndex" @tap="goGoodsCon(item)"> |
|
<view class="img-box"> |
|
<image class="img" :src="item.image" lazy-load mode="aspectFill"></image> |
|
</view> |
|
<view class="name more-t">{{ item.storeName }}</view> |
|
<view class="price-box"> |
|
<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
</swiper-item> |
|
</swiper> |
|
</view> |
|
|
|
</view> |
|
<!-- <view v-for="(item, index) in homeData" :key="index"> --> |
|
<!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }"> |
|
<cu-custom :isBack="true" :bgColor="bgcolor"> |
|
<block slot="backText"> |
|
<text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text> |
|
</block> |
|
</cu-custom> |
|
</view> --> |
|
<!-- <view class="header header-search acea-row row-center-wrapper" v-if="item.type == 'search'" :style="{ background: bgcolor }"> |
|
<view @click="goGoodSearch()" class="search acea-row row-middle"> |
|
<text class="iconfont icon-xiazai5"></text> |
|
搜索商品 |
|
</view> --> |
|
<!-- #ifndef H5 --> |
|
<!-- <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'"> |
|
<image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" /> |
|
</view> --> |
|
<!-- #endif --> |
|
<!-- </view> --> |
|
<!-- <Banner v-if="item.type == 'banner'" |
|
:detail="item.componentContent.bannerData" |
|
@getbgcolor="getbgcolor"></Banner> --> |
|
<!-- <uni-notice-bar |
|
v-if="item.type == 'noticeBar'" |
|
scrollable="true" |
|
@click="goRoll(item.componentContent.roll[0])" |
|
single="true" :speed="10" |
|
showIcon="true" |
|
:text="item.componentContent.roll[0].info"></uni-notice-bar> --> |
|
<!-- 菜单 --> |
|
<!-- <view class="content_box home_content_box" |
|
v-if="item.type == 'menu' && item.componentContent.menus"> |
|
<Menu :list="item.componentContent.menus"></Menu> |
|
</view> --> |
|
<!-- 滚动新闻 --> |
|
<!-- 广告 --> |
|
<!-- <Adv v-if="item.type == 'adv' && item.componentContent.detail" :detail="item.componentContent.detail" /> --> |
|
<!-- 热门榜单 --> |
|
<!-- <HotCommodity v-if="item.type == 'hotCommodity'" :detail="likeInfo" /> --> |
|
<!-- 超值拼团 --> |
|
<!-- <Groupon v-if="item.type == 'groupon'" :detail="combinationList" /> --> |
|
<!-- 首发新品->秒杀 --> |
|
<!-- <FirstNewProduct v-if="item.type == 'firstNewProduct'" :detail="firstList" /> --> |
|
<!-- 精品推荐 --> |
|
<!-- <ProductsRecommended v-if="item.type == 'productsRecommended'" :detail="bastList" /> --> |
|
<!-- 促销单品 --> |
|
<!-- <PromoteProduct v-if="item.type == 'promoteProduct'" :detail="benefit" /> --> |
|
<!-- 直播 --> |
|
<!-- #ifdef MP-WEIXIN --> |
|
<!-- <Live v-if="item.type == 'live'" :detail="live" /> --> |
|
<!-- #endif --> |
|
<!-- 为您推荐 --> |
|
<!-- <PromotionGood v-if="item.type == 'promotionGood'" :benefit="benefit" /> --> |
|
<!-- <Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose" /> --> |
|
<!-- </view> --> |
|
<Tabbar :pagePath="pagePath"></Tabbar> |
|
<!-- #ifdef H5 --> |
|
<view class="bottomSpace" style='line-height:100rpx'>正在使用H5方式浏览</view> |
|
<!-- #endif --> |
|
</view> |
|
</template> |
|
<script> |
|
import { |
|
mapState, |
|
mapMutations, |
|
mapActions |
|
} from 'vuex' |
|
// import GoodList from '@/components/GoodList' |
|
// import PromotionGood from '@/components/PromotionGood' |
|
// import CouponWindow from '@/components/CouponWindow' |
|
// import Menu from '@/components/Menu' |
|
// import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
// import Adv from '@/components/sh-adv' |
|
// import Groupon from '@/components/sh-groupon.vue' |
|
|
|
import Banner from './components/Banner' |
|
// import HotCommodity from './components/HotCommodity' |
|
// import FirstNewProduct from './components/FirstNewProduct' |
|
// import ProductsRecommended from './components/ProductsRecommended' |
|
// import Live from './components/Live' |
|
import Tabbar from '@/components/Tabbar'; |
|
|
|
import { |
|
getHomeData, |
|
getShare, |
|
getCanvas, |
|
getHotList |
|
} from '@/api/public' |
|
import cookie from '@/utils/store/cookie' |
|
import { |
|
isWeixin, |
|
handleUrlParam |
|
} from '@/utils/index' |
|
|
|
import { |
|
openShareAll |
|
} from '@/libs/wechat' |
|
|
|
const HAS_COUPON_WINDOW = 'has_coupon_window' |
|
|
|
export default { |
|
name: 'Index', |
|
components: { |
|
// swiper, |
|
// swiperSlide, |
|
// UniNoticeBar, |
|
// GoodList, |
|
// PromotionGood, |
|
// CouponWindow, |
|
// Menu, |
|
// Adv, |
|
// Groupon, |
|
Banner, |
|
// HotCommodity, |
|
Tabbar, |
|
// FirstNewProduct, |
|
// ProductsRecommended, |
|
// Live, |
|
}, |
|
props: {}, |
|
data: function() { |
|
return { |
|
pagePath: '', |
|
navStyle: false, |
|
tabType: 0, |
|
homeData: [], |
|
CustomBar: this.CustomBar, |
|
StatusBar: this.StatusBar, |
|
formatMenus: [], |
|
categoryCurrent: 0, |
|
menuNum: 4, |
|
bgcolor: '', |
|
bgColor: '', |
|
swiperCurrent: 0, //轮播下标 |
|
webviewId: 0, |
|
showCoupon: false, |
|
logoUrl: '', |
|
banner: [], |
|
menus: [], |
|
combinationList: [], |
|
roll: [], |
|
activity: [], |
|
activityOne: {}, |
|
bastList: [], |
|
firstList: [], |
|
info: { |
|
fastList: [], |
|
bastBanner: [], |
|
|
|
bastList: [], |
|
}, |
|
likeInfo: [], |
|
live: [], |
|
lovely: [], |
|
benefit: [], |
|
hotList: [], |
|
topList: [], // hotList 前五 |
|
goodsList: [], // hotList 除前五之外 |
|
couponList: [], |
|
swiperOption: { |
|
pagination: { |
|
el: '.swiper-pagination', |
|
clickable: true, |
|
}, |
|
autoplay: { |
|
disableOnInteraction: false, |
|
delay: 2000, |
|
}, |
|
loop: true, |
|
speed: 1000, |
|
observer: true, |
|
observeParents: true, |
|
}, |
|
swiperRoll: { |
|
direction: 'vertical', |
|
autoplay: { |
|
disableOnInteraction: false, |
|
delay: 2000, |
|
}, |
|
loop: true, |
|
speed: 1000, |
|
observer: true, |
|
observeParents: true, |
|
}, |
|
swiperScroll: { |
|
freeMode: true, |
|
freeModeMomentum: false, |
|
slidesPerView: 'auto', |
|
observer: true, |
|
observeParents: true, |
|
}, |
|
swiperBoutique: { |
|
pagination: { |
|
el: '.swiper-pagination', |
|
clickable: true, |
|
}, |
|
autoplay: { |
|
disableOnInteraction: false, |
|
delay: 2000, |
|
}, |
|
loop: true, |
|
speed: 1000, |
|
observer: true, |
|
observeParents: true, |
|
}, |
|
swiperProducts: { |
|
freeMode: true, |
|
freeModeMomentum: false, |
|
slidesPerView: 'auto', |
|
observer: true, |
|
observeParents: true, |
|
}, |
|
bgImage: '', |
|
classifyType: 0, // 热门榜单分类 |
|
swiperHeight: 0, |
|
// indexTitle: false, |
|
} |
|
}, |
|
computed: { |
|
singNew() { |
|
return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦！' |
|
}, |
|
customStyle() { |
|
var bgImage = this.bgImage |
|
// var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`; |
|
var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}` |
|
if (this.bgImage) { |
|
style = `${style}background-image:url(${bgImage});` |
|
} |
|
return style |
|
}, |
|
}, |
|
onLoad() { |
|
uni.hideTabBar(); |
|
let pages = getCurrentPages(); |
|
this.pagePath = '/' + pages[pages.length - 1].route; |
|
this.getLocation() |
|
uni.showLoading({ |
|
title: "加载中", |
|
}); |
|
// getCanvas() |
|
// .then(res => { |
|
// console.log('223',res) |
|
// }) |
|
// .catch(error => { |
|
// if (!error) { |
|
// return |
|
// } |
|
// this.homeData = JSON.parse(error.data.json) |
|
// console.log('225',this.homeData) |
|
// }) |
|
|
|
getHomeData().then(res => { |
|
this.logoUrl = res.data.logoUrl |
|
// res.data.banner.forEach(item => (item.bgcolor = item.color || '')) |
|
// this.info = res.data.info |
|
// console.log('239', res.data) |
|
// console.log('239',this.info) |
|
this.$set(this, 'info', res.data) |
|
// this.$set(this, 'info', res.data.info) |
|
this.$set(this, 'firstList', res.data.firstList) |
|
this.$set(this, 'bastList', res.data.bastList) |
|
this.$set(this, 'likeInfo', res.data.likeInfo) |
|
this.$set(this, 'live', res.data.liveList) |
|
this.$set(this, 'lovely', res.data.lovely) |
|
this.$set(this, 'benefit', res.data.benefit) |
|
this.$set(this, 'couponList', res.data.couponList) |
|
this.$set(this, 'combinationList', res.data.combinationList) |
|
uni.hideLoading() |
|
this.setOpenShare(); |
|
// this.doColorThief() |
|
}).then(() => { |
|
let query = uni.createSelectorQuery(); |
|
query.select('.goods-list').boundingClientRect(rect => { |
|
// console.log('rectrectrect239',rect) |
|
this.swiperHeight = rect.height; |
|
}).exec(); |
|
}) |
|
|
|
getHotList().then(res => { |
|
this.hotList = res.data; |
|
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4); |
|
}) |
|
}, |
|
onPageScroll(e) { |
|
if (e.scrollTop > 80) { |
|
this.navStyle = true; |
|
} else { |
|
this.navStyle = false; |
|
}; |
|
}, |
|
methods: { |
|
|
|
...mapActions(['getLocation']), |
|
onShareTimeline: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
onShareAppMessage: function() { |
|
return { |
|
title: this.miniHomeRemark, |
|
imageUrl: this.miniHomeImg, |
|
path: 'pages/home/index?spread=' + uni.getStorageSync('uid'), |
|
} |
|
}, |
|
goRoll(item) { |
|
if (item.uniapp_url) { |
|
this.$yrouter.push(item.uniapp_url) |
|
} |
|
}, |
|
changeCurrent(e) { |
|
this.tabType = e.detail.current; |
|
}, |
|
changeListCurrent(e) { |
|
this.tabType = e.detail.current; |
|
if (this.tabType == 1) { |
|
let query = uni.createSelectorQuery(); |
|
query.select('.hot-list').boundingClientRect(rect => { |
|
// console.log('rectrectrect239',rect) |
|
if (this.swiperHeight >= rect.height) return; |
|
if (this.swiperHeight != 0 && rect.height > this.swiperHeight) { |
|
this.swiperHeight = rect.height; |
|
} |
|
}).exec(); |
|
} |
|
}, |
|
changeTab(i) { |
|
if (this.tabType == i) return; |
|
this.tabType = i; |
|
if (i == 1) { |
|
let query = uni.createSelectorQuery(); |
|
query.select('.hot-list').boundingClientRect(rect => { |
|
if (this.swiperHeight >= rect.height) return; |
|
if (this.swiperHeight != 0 && rect.height > this.swiperHeight) { |
|
this.swiperHeight = rect.height; |
|
} |
|
}).exec(); |
|
} |
|
}, |
|
goGoodSearch() { |
|
// this.$yrouter.push('/pages/shop/GoodsEvaluate/index'); |
|
this.$yrouter.push('/pages/shop/GoodSearch/index') |
|
}, |
|
goEvaluations() { |
|
this.$yrouter.push('/pages/shop/Evaluations/index'); |
|
}, |
|
goEvaluationDetail(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/Evaluations/EvaluationDetail/index', |
|
query: { |
|
id: item.id |
|
}, |
|
}) |
|
}, |
|
// goWxappUrl(item) { |
|
// this.$yrouter.push(item.uniapp_url) |
|
// }, |
|
// goHotNewGoods(type) { |
|
// this.$yrouter.push({ |
|
// path: '/pages/shop/HotNewGoods/index', |
|
// query: { |
|
// type, |
|
// }, |
|
// }) |
|
// }, |
|
goGoodsCon(item) { |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
id: item.id, |
|
}, |
|
}) |
|
}, |
|
// goGoodsPromotion() { |
|
// this.$yrouter.push('/pages/shop/GoodsPromotion/index') |
|
// }, |
|
changeClassify(i) { |
|
if (this.classifyType == i) return; |
|
this.classifyType = i; |
|
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4); |
|
setTimeout(() => { |
|
let query = uni.createSelectorQuery(); |
|
query.select('.hot-list').boundingClientRect(rect => { |
|
// console.log('rectrectrect',rect) |
|
if (this.swiperHeight >= rect.height) return; |
|
this.swiperHeight = rect.height; |
|
}).exec(); |
|
}, 160) |
|
|
|
}, |
|
// 数据分层 |
|
sortData(oArr, length) { |
|
let arr = []; |
|
let minArr = []; |
|
if (oArr.length > 5) { |
|
this.topList = oArr.slice(0, 5); |
|
arr = oArr.slice(5, oArr.length); |
|
} else { |
|
this.topList = oArr; |
|
} |
|
return arr; |
|
}, |
|
setOpenShare: function() { |
|
if (this.$deviceType == 'weixin') { |
|
getShare().then(res => { |
|
var data = res.data.data |
|
var configAppMessage = { |
|
desc: data.synopsis, |
|
title: data.title, |
|
link: location.href, |
|
imgUrl: data.img, |
|
} |
|
openShareAll(configAppMessage) |
|
}) |
|
} |
|
}, |
|
startQr: function() { |
|
uni.scanCode({ |
|
success: res => { |
|
let option = handleUrlParam(res.result) |
|
console.log(option) |
|
switch (option.pageType) { |
|
case 'good': |
|
// 跳转商品详情 |
|
this.$yrouter.push({ |
|
path: '/pages/shop/GoodsCon/index', |
|
query: { |
|
q: res.result, |
|
}, |
|
}) |
|
break |
|
case 'group': |
|
// 跳转团购 |
|
this.$yrouter.push({ |
|
path: '/pages/activity/GroupRule/index', |
|
query: { |
|
q: res.result, |
|
}, |
|
}) |
|
break |
|
case 'dargain': |
|
// 跳转砍价 |
|
this.$yrouter.push({ |
|
path: '/pages/activity/DargainDetails/index', |
|
query: { |
|
q: res.result, |
|
}, |
|
}) |
|
break |
|
default: |
|
// 跳转分销 |
|
this.$yrouter.push({ |
|
path: '/pages/Loading/index', |
|
query: {}, |
|
}) |
|
break |
|
} |
|
}, |
|
}) |
|
}, |
|
// getbgcolor(e) { |
|
// this.bgcolor = e |
|
// }, |
|
}, |
|
created: async function() { |
|
// await this.doColorThief(); |
|
}, |
|
} |
|
</script> |
|
<style> |
|
page { |
|
background: #FFFFFF; |
|
font-family: PingFang SC; |
|
} |
|
</style> |
|
<style scoped lang="less"> |
|
// .content_box { |
|
// background: #f6f6f6; |
|
// } |
|
|
|
// .index { |
|
// background-color: #f6f6f6; |
|
// } |
|
|
|
// .swiper-item { |
|
// height: 100%; |
|
// } |
|
|
|
// .fixed-header { |
|
// position: fixed; |
|
// z-index: 99; |
|
// // #ifdef H5 |
|
// top: 88rpx; |
|
// // #endif |
|
|
|
// // #ifndef H5 |
|
// top: 0; |
|
// // #endif |
|
// left: 0; |
|
// right: 0; |
|
// background: #fff; |
|
// box-shadow: 0 0 20rpx -10rpx #aaa; |
|
|
|
// & + .fixed-header-box { |
|
// height: 98rpx; |
|
// } |
|
// } |
|
|
|
.head_box.active { |
|
background-image: linear-gradient(33deg, #2EB5AE 0%, #1B8DCC 100%); |
|
} |
|
|
|
.head_box { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
z-index: 99; |
|
width: 750rpx; |
|
|
|
/deep/.cuIcon-back { |
|
display: none; |
|
} |
|
|
|
.icon { |
|
display: inline-block; |
|
width: 62rpx; |
|
height: 62rpx; |
|
// background-color: aquamarine; |
|
margin-left: 22rpx; |
|
} |
|
|
|
.title-image { |
|
width: 184rpx; |
|
height: 46rpx; |
|
// background-color: bisque; |
|
} |
|
|
|
.nav-title { |
|
// font-size: 38rpx; |
|
// font-family: PingFang SC; |
|
// font-weight: 500; |
|
// color: #fff; |
|
|
|
font-size: 26rpx; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
|
|
// .right-icon { |
|
// width: 62rpx; |
|
// height: 62rpx; |
|
// } |
|
.icon-box { |
|
// display: inline-block; |
|
// width: 562rpx; |
|
// width: 124rpx; |
|
// height: 62rpx; |
|
// background-color: aquamarine; |
|
margin-right: 14rpx; |
|
|
|
image { |
|
width: 62rpx; |
|
height: 62rpx; |
|
} |
|
} |
|
} |
|
|
|
.content-box { |
|
position: relative; |
|
background: #FFFFFF; |
|
} |
|
|
|
.menus-box { |
|
position: relative; |
|
top: -48rpx; |
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
background: #FFFFFF; |
|
padding: 32rpx 32rpx 20rpx; |
|
margin-bottom: -48rpx; |
|
box-shadow: 0rpx -12rpx 12rpx 0rpx rgba(0, 0, 0, 0.1); |
|
|
|
.item { |
|
.img-box { |
|
width: 108rpx; |
|
height: 108rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15); |
|
border-radius: 16rpx; |
|
padding: 24rpx; |
|
|
|
image { |
|
width: 64rpx; |
|
height: 64rpx; |
|
} |
|
} |
|
|
|
.title { |
|
padding-top: 16rpx; |
|
font-size: 22rpx; |
|
color: #2DB5AE; |
|
line-height: 30rpx; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
.selections-box { |
|
padding-top: 24rpx; |
|
|
|
.top { |
|
padding: 0rpx 32rpx; |
|
|
|
.tip { |
|
font-size: 20rpx; |
|
font-family: Futura; |
|
color: #999999; |
|
line-height: 22rpx; |
|
} |
|
|
|
.title { |
|
font-size: 50rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 68rpx; |
|
} |
|
|
|
.more { |
|
font-size: 20rpx; |
|
font-weight: 300; |
|
color: #2DB5AE; |
|
line-height: 26rpx; |
|
} |
|
|
|
.jiantou { |
|
width: 0rpx; |
|
height: 0rpx; |
|
border-top: 8rpx solid transparent; |
|
border-left: 10rpx solid #2DB5AE; |
|
border-bottom: 8rpx solid transparent; |
|
border-right: 10rpx solid transparent; |
|
margin-left: 8rpx; |
|
} |
|
} |
|
|
|
.selections { |
|
padding-top: 6rpx; |
|
|
|
.scroll { |
|
width: 100%; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
} |
|
|
|
.item-box { |
|
display: flex; |
|
flex-wrap: nowrap; |
|
// width: 2144rpx; |
|
padding: 10rpx 0rpx 24rpx 32rpx; |
|
|
|
.item { |
|
width: 684rpx; |
|
height: 240rpx; |
|
// background: #F5F6F8; |
|
box-shadow: 0px 10rpx 16rpx 0px rgba(0, 0, 0, 0.15); |
|
border-radius: 16rpx; |
|
margin-right: 20rpx; |
|
overflow: hidden; |
|
|
|
image { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
// .black { |
|
// background: #4F4E53; |
|
// } |
|
} |
|
} |
|
} |
|
|
|
.tab-box { |
|
padding-bottom: 16rpx; |
|
|
|
.scroll-box { |
|
width: 382rpx; |
|
height: 90rpx; |
|
|
|
swiper { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
} |
|
|
|
.title-box { |
|
width: 108rpx !important; |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
|
|
.tip { |
|
opacity: 0; |
|
height: 22rpx; |
|
font-size: 20rpx; |
|
font-family: Futura; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 22rpx; |
|
} |
|
|
|
.title { |
|
height: 68rpx; |
|
font-size: 26rpx; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
padding-top: 22rpx; |
|
} |
|
} |
|
|
|
.title-box.on { |
|
width: 200rpx !important; |
|
|
|
.title { |
|
font-size: 50rpx; |
|
line-height: 68rpx; |
|
padding-top: 0rpx; |
|
// transition: all .8s; |
|
// -webkit-transition: all .8s; |
|
// -moz-transition: all .8s; |
|
// -o-transition: all .8s; |
|
// transform:translateZ(0); |
|
// backface-visibility: hidden; |
|
// // 兼容写法 |
|
// -webkit-backface-visibility: hidden; |
|
} |
|
|
|
.tip { |
|
opacity: 1; |
|
transition: opacity 1s cubic-bezier(.18, .89, .17, .88); |
|
-webkit-transition: opacity 1s cubic-bezier(.18, .89, .17, .88); |
|
-moz-transition: opacity 1s cubic-bezier(.18, .89, .17, .88); |
|
-o-transition: opacity 1s cubic-bezier(.18, .89, .17, .88); |
|
} |
|
} |
|
|
|
.title-box:first-child { |
|
// padding-left: 32rpx; |
|
} |
|
|
|
.title-box:last-child { |
|
transform: translate(151%, 0px) translateZ(0px) !important; |
|
padding-left: 24rpx; |
|
} |
|
|
|
.tab-line-box { |
|
padding-left: 32rpx; |
|
|
|
.tab-line { |
|
width: 92rpx; |
|
height: 4rpx; |
|
// opacity: 0.24; |
|
background: #CCEDEB; |
|
// border: 4rpx solid #CCEDEB; |
|
margin-right: 12rpx; |
|
position: relative; |
|
|
|
.active { |
|
width: 0rpx; |
|
height: 4rpx; |
|
// opacity: 1; |
|
background: #2DB5AE; |
|
// border: 4rpx solid #2DB5AE; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-o-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
} |
|
|
|
.active.on2 { |
|
width: 92rpx; |
|
transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-o-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
} |
|
} |
|
|
|
.tab-line:first-child { |
|
.active { |
|
// width: 92rpx; |
|
left: 92rpx; |
|
} |
|
|
|
.active.on { |
|
width: 92rpx; |
|
left: 0; |
|
transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-webkit-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-moz-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
-o-transition: all .6s cubic-bezier(.18, .89, .17, .88); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.list-box { |
|
width: 100%; |
|
|
|
swiper { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.list-box .goods-list { |
|
padding: 0rpx 32rpx 8rpx; |
|
|
|
.goods-item { |
|
width: 332rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15); |
|
border-radius: 16rpx; |
|
margin-bottom: 20rpx; |
|
|
|
.img-box { |
|
width: 332rpx; |
|
height: 316rpx; |
|
border-radius: 16rpx 16rpx 0rpx 0rpx; |
|
overflow: hidden; |
|
|
|
.img { |
|
width: 100%; |
|
height: 100%; |
|
background-color: #fff; |
|
} |
|
} |
|
|
|
.name { |
|
font-size: 26rpx; |
|
font-family: PingFang SC; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
height: 76rpx; |
|
margin: 10rpx 16rpx; |
|
} |
|
|
|
.price-box { |
|
padding: 0rpx 16rpx 26rpx; |
|
width: 100%; |
|
box-sizing: border-box; |
|
text-align: center; |
|
|
|
.current { |
|
font-size: 30rpx; |
|
font-family: Futura; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 40rpx; |
|
|
|
text { |
|
padding-left: 10rpx; |
|
font-size: 20rpx; |
|
color: #999999; |
|
line-height: 26rpx; |
|
font-weight: 500; |
|
text-decoration: line-through; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.list-box .classify-tab-box { |
|
padding: 4rpx 32rpx 22rpx; |
|
|
|
.classify-item { |
|
width: 124rpx; |
|
height: 40rpx; |
|
border-radius: 16rpx; |
|
border: 2rpx solid #2EB5AE; |
|
font-size: 24rpx; |
|
font-weight: 500; |
|
color: #2DB5AE; |
|
line-height: 36rpx; |
|
text-align: center; |
|
margin-right: 20rpx; |
|
} |
|
|
|
.on { |
|
color: #FFFFFF; |
|
background: #2DB5AE; |
|
} |
|
} |
|
|
|
.list-box .top-box { |
|
padding: 0rpx 32rpx 12rpx; |
|
|
|
.top-item { |
|
width: 686rpx; |
|
height: 174rpx; |
|
background: #F5F6F8; |
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15); |
|
border-radius: 16rpx; |
|
margin-bottom: 20rpx; |
|
|
|
.top-num-box { |
|
width: 146rpx; |
|
height: 174rpx; |
|
padding: 24rpx 0rpx 24rpx 12rpx; |
|
font-size: 80rpx; |
|
font-family: Futura; |
|
font-weight: 700; |
|
color: #2DB5AE; |
|
line-height: 106rpx; |
|
text-align: center; |
|
|
|
.tip { |
|
font-size: 32rpx; |
|
line-height: 42rpx; |
|
position: relative; |
|
top: -22rpx; |
|
} |
|
} |
|
|
|
.img { |
|
width: 168rpx; |
|
height: 162rpx; |
|
border-radius: 8rpx; |
|
margin: 6rpx 0rpx; |
|
} |
|
|
|
.info-box { |
|
width: 370rpx; |
|
height: 174rpx; |
|
padding: 16rpx 18rpx 16rpx 10rpx; |
|
|
|
.title { |
|
height: 76rpx; |
|
font-size: 26rpx; |
|
font-weight: 500; |
|
color: #3A3A3C; |
|
line-height: 38rpx; |
|
} |
|
|
|
.price-box { |
|
font-size: 30rpx; |
|
font-family: Futura; |
|
font-weight: 600; |
|
color: #3A3A3C; |
|
line-height: 40rpx; |
|
|
|
text { |
|
font-size: 20rpx; |
|
font-weight: 500; |
|
color: #999999; |
|
line-height: 26rpx; |
|
text-decoration: line-through; |
|
padding-left: 10rpx; |
|
} |
|
} |
|
|
|
.original { |
|
font-size: 20rpx; |
|
color: #999999; |
|
line-height: 26rpx; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// .menus-box { |
|
// position: relative; |
|
// top: ; |
|
// } |
|
|
|
// .cu-bar.fixed { |
|
// position: fixed; |
|
// width: 100%; |
|
// top: 0; |
|
// z-index: 1024; |
|
// // box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1); |
|
// } |
|
|
|
// .cu-bar { |
|
// box-sizing: border-box; |
|
|
|
// .index .header { |
|
// height: 64rpx; |
|
// // width: 100%; |
|
// // padding: 0 30rpx; |
|
// // box-sizing: border-box; |
|
// } |
|
// } |
|
|
|
.header-search { |
|
transition: all linear 0.3s; |
|
} |
|
|
|
.cu-bar .action { |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: flex; |
|
align-items: center; |
|
height: 100%; |
|
max-height: 100%; |
|
|
|
&:first-child { |
|
margin-left: 15px; |
|
font-size: 15px; |
|
} |
|
} |
|
|
|
// .home_content_box { |
|
// // margin-top: -20rpx; |
|
// } |
|
|
|
.index { |
|
.uni-noticebar { |
|
margin-bottom: 0; |
|
} |
|
} |
|
</style>
|
|
|