|
|
|
|
@ -36,7 +36,7 @@
|
|
|
|
|
<view class="title">{{item.name}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="selections-box"> |
|
|
|
|
<!-- <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"> |
|
|
|
|
@ -56,9 +56,127 @@
|
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="selection-box acea-row row-between"> |
|
|
|
|
<view class="left"> |
|
|
|
|
<navigator url="/pages/user/coupon/GetCoupon/index"> |
|
|
|
|
<view class="title">福利领券</view> |
|
|
|
|
<view class="subtitle">大额优惠券领不停</view> |
|
|
|
|
<image class="img" src="@/static/images/welfare.png" mode=""></image> |
|
|
|
|
</navigator> |
|
|
|
|
</view> |
|
|
|
|
<view class="right acea-row row-between row-column"> |
|
|
|
|
<view class="swiper-box"> |
|
|
|
|
<swiper style="width: 100%; height: 168rpx;"> |
|
|
|
|
<swiper-item style="border-radius: 16rpx;" v-for="(bar,bargainListIndex) in bargainList" :key="bargainListIndex"> |
|
|
|
|
<view class="top acea-row"> |
|
|
|
|
<image class="img" :src="bar.image" mode="aspectFill"></image> |
|
|
|
|
<view class="text-box acea-row row-column row-between"> |
|
|
|
|
<view class="text1 line2">{{bar.title}}</view> |
|
|
|
|
<view class="text2"> |
|
|
|
|
可砍至<text style="color: #3A3A3C;"> ￥{{bar.minPrice}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="text3 acea-row row-between row-middle"> |
|
|
|
|
<text>原价￥{{bar.price}}</text> |
|
|
|
|
<text class="btn" @click="goBarDetail(bar)">发起砍价</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
<view class="swiper-box"> |
|
|
|
|
<swiper style="width: 100%; height: 168rpx;"> |
|
|
|
|
<swiper-item style="border-radius: 16rpx;" v-for="(item,combinationListIndex) in combinationList" :key="combinationListIndex"> |
|
|
|
|
<view class="top acea-row"> |
|
|
|
|
<image class="img" :src="item.image" mode="aspectFill"></image> |
|
|
|
|
<view class="text-box acea-row row-column row-between"> |
|
|
|
|
<view class="text1 line2">{{item.title}}</view> |
|
|
|
|
<view class="text2"> |
|
|
|
|
拼团价<text style="color: #3A3A3C;"> ￥{{item.price}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="text3 acea-row row-between row-middle"> |
|
|
|
|
<text>原价￥{{item.productPrice}}</text> |
|
|
|
|
<text class="btn" @click="goComDetail(item)">发起拼团</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="tab-box"> |
|
|
|
|
<view class="countdown-box acea-row row-between-wrapper" v-if="timeList[seckillActive].stop"> |
|
|
|
|
<view class="acea-row row-middle"> |
|
|
|
|
<view class="text">秒杀专区</view> |
|
|
|
|
<CountDown :isDay="true" :dayText="' 天 '" :hourText="' 时 '" :minuteText="' 分 '" :secondText="' 秒'" :datatime="timeList[seckillActive].stop"></CountDown> |
|
|
|
|
</view> |
|
|
|
|
<view class=""> |
|
|
|
|
<navigator url="/pages/activity/activity/index"> |
|
|
|
|
<text>更多</text> |
|
|
|
|
</navigator> |
|
|
|
|
<view class="jiantou-right"></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="seconds-list acea-row"> |
|
|
|
|
<view class="seconds-item acea-row row-column row-middle row-left" v-for="(sec,secIndex) in seckillList" :key="secIndex" @click="goSeckillDetail(sec)"> |
|
|
|
|
<image :src="sec.image" mode="aspectFill"></image> |
|
|
|
|
<view class="pic-top">￥{{sec.price}}</view> |
|
|
|
|
<view class="pic-down">￥{{sec.otPrice}}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="hot-list"> |
|
|
|
|
<view class="top"> |
|
|
|
|
<view class="tip" style="font-family: Futura;font-size: 10px;">HOT LIST</view> |
|
|
|
|
<view class="acea-row row-between-wrapper"> |
|
|
|
|
<view class="title">热门榜单</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<swiper previous-margin="32rpx" class="scroll-hot" :style="'height:'+heightSwiper+'rpx;'" @change="changeNum($event)"> |
|
|
|
|
<swiper-item class="scroll-box" v-for="(item,index) in hotList" :key="index"> |
|
|
|
|
<view class="hot-item acea-row row-column"> |
|
|
|
|
<view class="title-box acea-row row-middle"> |
|
|
|
|
<image src="@/static/images/icon-list.png" mode="aspectFill"></image> |
|
|
|
|
<text>{{item.listName}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="goods-list acea-row row-column"> |
|
|
|
|
<view class="goods-item acea-row" v-for="(item,index) in topList" :key="index" @tap="goGoodsCon(item)"> |
|
|
|
|
<view class="hot-left"> |
|
|
|
|
<view class="order-zh">{{index+1}}</view> |
|
|
|
|
<view class="order-en">{{index==0?'ST':(index==1)?'ND':'RD'}}</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="hot-right acea-row"> |
|
|
|
|
<image class="img" :src="item.image" mode="aspectFill"></image> |
|
|
|
|
<view class="text-box acea-row row-column row-between"> |
|
|
|
|
<view class="text1 line1">{{item.storeName}}</view> |
|
|
|
|
<view class="text2" v-if="item.isIntegral === 1">{{ item.integral }}积分</view> |
|
|
|
|
<view class="text2" v-else> |
|
|
|
|
￥{{item.price}}<text>￥{{item.otPrice}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="text3"> |
|
|
|
|
<text>{{item.sales}}+人购买</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="recommended-list"> |
|
|
|
|
<view class="top"> |
|
|
|
|
<view class="tip" style="font-family: Futura;font-size: 10px;">HOT LIST</view> |
|
|
|
|
<view class="acea-row row-between-wrapper"> |
|
|
|
|
<view class="title">热门推荐</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<PromotionGood :benefit="bastList" /> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<!-- <view class="tab-box"> |
|
|
|
|
<view class="scroll-box"> |
|
|
|
|
<swiper :previous-margin="'32rpx'" :current="tabType" @change="changeCurrent"> |
|
|
|
|
<swiper-item :class="'title-box ' + (tabType?'':'on')" |
|
|
|
|
@ -89,9 +207,9 @@
|
|
|
|
|
<view class="list-box"> |
|
|
|
|
<swiper :current="tabType" @change="changeListCurrent" :style="'height:'+swiperHeight+'px;'"> |
|
|
|
|
<swiper-item> |
|
|
|
|
<!-- 精品推荐 bastList --> |
|
|
|
|
<!-- 为您推荐 推荐好物 benefit v-show="!tabType" --> |
|
|
|
|
<!-- <PromotionGood :benefit="bastList" /> --> |
|
|
|
|
精品推荐 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)"> |
|
|
|
|
@ -107,8 +225,8 @@
|
|
|
|
|
</view> |
|
|
|
|
</swiper-item> |
|
|
|
|
<swiper-item> |
|
|
|
|
<!-- 热门榜单 v-show="tabType" --> |
|
|
|
|
<!-- <HotCommodity :detail="hotList" /> --> |
|
|
|
|
热门榜单 v-show="tabType" |
|
|
|
|
<HotCommodity :detail="hotList" /> |
|
|
|
|
<view class="hot-list"> |
|
|
|
|
<view class="classify-tab-box acea-row"> |
|
|
|
|
<view :class="'classify-item ' + (classifyType == index?'on':'')" |
|
|
|
|
@ -148,7 +266,7 @@
|
|
|
|
|
|
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<!-- <view v-for="(item, index) in homeData" :key="index"> --> |
|
|
|
|
@ -218,8 +336,10 @@
|
|
|
|
|
mapMutations, |
|
|
|
|
mapActions |
|
|
|
|
} from 'vuex' |
|
|
|
|
import CountDown from '@/components/CountDown'; |
|
|
|
|
import { getBargainList,getSeckillConfig,getSeckillList } from '@/api/activity'; |
|
|
|
|
// import GoodList from '@/components/GoodList' |
|
|
|
|
// import PromotionGood from '@/components/PromotionGood' |
|
|
|
|
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' |
|
|
|
|
@ -258,7 +378,7 @@
|
|
|
|
|
// swiperSlide, |
|
|
|
|
// UniNoticeBar, |
|
|
|
|
// GoodList, |
|
|
|
|
// PromotionGood, |
|
|
|
|
PromotionGood, |
|
|
|
|
// CouponWindow, |
|
|
|
|
// Menu, |
|
|
|
|
// Adv, |
|
|
|
|
@ -269,6 +389,7 @@
|
|
|
|
|
// FirstNewProduct, |
|
|
|
|
// ProductsRecommended, |
|
|
|
|
// Live, |
|
|
|
|
CountDown |
|
|
|
|
}, |
|
|
|
|
props: {}, |
|
|
|
|
data: function() { |
|
|
|
|
@ -307,8 +428,8 @@
|
|
|
|
|
lovely: [], |
|
|
|
|
benefit: [], |
|
|
|
|
hotList: [], |
|
|
|
|
topList: [], // hotList 前五 |
|
|
|
|
goodsList: [], // hotList 除前五之外 |
|
|
|
|
topList: [], // hotList 前三 |
|
|
|
|
goodsList: [], // hotList 除前三之外 |
|
|
|
|
couponList: [], |
|
|
|
|
swiperOption: { |
|
|
|
|
pagination: { |
|
|
|
|
@ -367,6 +488,24 @@
|
|
|
|
|
classifyType: 0, // 热门榜单分类 |
|
|
|
|
swiperHeight: 0, |
|
|
|
|
// indexTitle: false, |
|
|
|
|
|
|
|
|
|
bargainLoaded:false, |
|
|
|
|
bargainList: [], |
|
|
|
|
bargainForm: { |
|
|
|
|
page: 1, //页码 |
|
|
|
|
limit: 10, //数量 |
|
|
|
|
}, |
|
|
|
|
timeList: [],//倒计时 |
|
|
|
|
seckillTimeIndex: 0, |
|
|
|
|
seckillActive: 0, |
|
|
|
|
datatime: 0, |
|
|
|
|
seckillLoaded:false, |
|
|
|
|
seckillList:[], |
|
|
|
|
seckillForm: { |
|
|
|
|
page: 1, //页码 |
|
|
|
|
limit: 4, //数量 |
|
|
|
|
}, |
|
|
|
|
heightSwiper:0, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -434,6 +573,12 @@
|
|
|
|
|
this.hotList = res.data; |
|
|
|
|
this.goodsList = this.sortData(this.hotList[this.classifyType].productInfo, 4); |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 发起砍价 |
|
|
|
|
this.getBargainList(); |
|
|
|
|
// 倒计时 |
|
|
|
|
this.seckillInfo(); |
|
|
|
|
}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
if (e.scrollTop > 80) { |
|
|
|
|
@ -443,8 +588,72 @@
|
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
|
|
|
|
|
...mapActions(['getLocation']), |
|
|
|
|
// 发起砍价 |
|
|
|
|
getBargainList() { |
|
|
|
|
if (this.bargainLoaded) return; |
|
|
|
|
getBargainList(this.bargainForm).then(res => { |
|
|
|
|
this.bargainLoaded = res.data.length < this.bargainForm.limit; |
|
|
|
|
this.bargainList.push.apply(this.bargainList, res.data); |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 倒计时 |
|
|
|
|
seckillInfo() { |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: "", |
|
|
|
|
}); |
|
|
|
|
getSeckillConfig().then(res => { |
|
|
|
|
this.timeList = res.data.seckillTime; |
|
|
|
|
this.seckillTimeIndex = res.data.seckillTimeIndex; |
|
|
|
|
this.seckillActive = res.data.seckillTimeIndex; |
|
|
|
|
this.datatime = this.timeList[this.seckillActive].stop; |
|
|
|
|
this.getSeckillList(); |
|
|
|
|
uni.hideLoading(); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 秒杀列表 |
|
|
|
|
getSeckillList() { |
|
|
|
|
// if (this.seckillLoaded) return; |
|
|
|
|
let time = this.timeList[this.seckillActive].id; |
|
|
|
|
getSeckillList(time, this.seckillForm).then(res => { |
|
|
|
|
// this.seckillLoaded = res.data.length < this.seckillForm.limit; |
|
|
|
|
this.seckillList.push.apply(this.seckillList, res.data); |
|
|
|
|
// this.seckillForm.page++; |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
goBarDetail(bar){ |
|
|
|
|
let id=bar.id |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: "/pages/activity/DargainGoodsDetails/index", |
|
|
|
|
query: { id, partake: 0 } |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
goComDetail(item){ |
|
|
|
|
let id=item.id |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/activity/GroupDetails/index', |
|
|
|
|
query: { id } |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
goSeckillDetail(sec){ |
|
|
|
|
let id=sec.id |
|
|
|
|
let time = this.timeList[this.seckillActive].stop |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/activity/SeckillDetails/index', |
|
|
|
|
query: { |
|
|
|
|
id, |
|
|
|
|
time, |
|
|
|
|
status: this.timeList[this.seckillActive].status, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
changeNum(e){ |
|
|
|
|
let num=e.detail.current |
|
|
|
|
this.changeClassify(num) |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onShareTimeline: function() { |
|
|
|
|
return { |
|
|
|
|
title: this.miniHomeRemark, |
|
|
|
|
@ -552,18 +761,18 @@
|
|
|
|
|
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); |
|
|
|
|
if (oArr.length > 3) { |
|
|
|
|
this.topList = oArr.slice(0, 3); |
|
|
|
|
arr = oArr.slice(3, oArr.length); |
|
|
|
|
} else { |
|
|
|
|
this.topList = oArr; |
|
|
|
|
} |
|
|
|
|
this.heightSwiper=this.topList.length*184+96 |
|
|
|
|
return arr; |
|
|
|
|
}, |
|
|
|
|
setOpenShare: function() { |
|
|
|
|
@ -771,69 +980,347 @@
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
// .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; |
|
|
|
|
|
|
|
|
|
// swiper { |
|
|
|
|
// width: 100%; |
|
|
|
|
// height: 274rpx; |
|
|
|
|
// swiper-item { |
|
|
|
|
// width: 704rpx !important; |
|
|
|
|
// .item { |
|
|
|
|
// margin-left: ; |
|
|
|
|
// width: 684rpx; |
|
|
|
|
// height: 240rpx; |
|
|
|
|
// box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
|
|
|
// border-radius: 16rpx; |
|
|
|
|
// overflow: hidden; |
|
|
|
|
|
|
|
|
|
// image { |
|
|
|
|
// width: 100%; |
|
|
|
|
// height: 100%; |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
.selection-box{ |
|
|
|
|
padding: 24rpx 32rpx 20rpx; |
|
|
|
|
.left{ |
|
|
|
|
width: 230rpx; |
|
|
|
|
height: 350rpx; |
|
|
|
|
background-color: #F5F6F8; |
|
|
|
|
padding-top: 24rpx; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.06); |
|
|
|
|
.title{ |
|
|
|
|
margin-left: 26rpx; |
|
|
|
|
font-size: 36rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
line-height: 68rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.more { |
|
|
|
|
.subtitle{ |
|
|
|
|
margin-left: 26rpx; |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-weight: 300; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
.img{ |
|
|
|
|
width: 213rpx; |
|
|
|
|
height: 242rpx; |
|
|
|
|
margin-left: 18rpx; |
|
|
|
|
margin-top: 15rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
.swiper-box{ |
|
|
|
|
height: 168rpx; |
|
|
|
|
width: 435rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.top{ |
|
|
|
|
|
|
|
|
|
background: #F5F6F8; |
|
|
|
|
box-shadow: 0px 10px 16px 0px rgba(0,0,0,0.06); |
|
|
|
|
border-radius:16rpx; |
|
|
|
|
padding: 10rpx; |
|
|
|
|
.img{ |
|
|
|
|
margin-right: 18rpx; |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 148rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
} |
|
|
|
|
.text-box{ |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
margin: 6rpx 0; |
|
|
|
|
width: 240rpx; |
|
|
|
|
.text1{ |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
.text2{ |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2EB5AE; |
|
|
|
|
} |
|
|
|
|
.text3{ |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #999999; |
|
|
|
|
width: 250rpx; |
|
|
|
|
.btn{ |
|
|
|
|
height: 40rpx; |
|
|
|
|
padding: 0 12rpx; |
|
|
|
|
background: #2DB5AE; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
font-size: 22rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
line-height: 40rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 倒计时 |
|
|
|
|
.countdown-box { |
|
|
|
|
width: 686rpx; |
|
|
|
|
height: 66rpx; |
|
|
|
|
margin-left: 32rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
border: 4rpx solid #2DB5AE; |
|
|
|
|
background-color: #EFF0F3; |
|
|
|
|
.text { |
|
|
|
|
width: 172rpx; |
|
|
|
|
border-right: 2rpx solid #2DB5AE; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
text-align: center; |
|
|
|
|
margin-right: 18rpx; |
|
|
|
|
} |
|
|
|
|
text::after { |
|
|
|
|
content: ''; |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
border-top: 6rpx solid transparent; |
|
|
|
|
border-left: 10rpx solid #2DB5AE; |
|
|
|
|
border-bottom: 6rpx solid transparent; |
|
|
|
|
border-right: 0rpx solid transparent; |
|
|
|
|
margin: 0 20rpx 4rpx 8rpx; |
|
|
|
|
} |
|
|
|
|
text{ |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.seconds-list{ |
|
|
|
|
margin: 0 50rpx; |
|
|
|
|
padding: 16rpx; |
|
|
|
|
background-color: #EFF0F3; |
|
|
|
|
border-radius: 0 0 16rpx 16rpx; |
|
|
|
|
.seconds-item{ |
|
|
|
|
margin-right: 17rpx; |
|
|
|
|
image{ |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 140rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
margin-bottom: 8rpx; |
|
|
|
|
} |
|
|
|
|
.pic-top{ |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
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; |
|
|
|
|
.pic-down{ |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
color: #999999; |
|
|
|
|
text-decoration: line-through; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.selections { |
|
|
|
|
padding-top: 6rpx; |
|
|
|
|
|
|
|
|
|
swiper { |
|
|
|
|
.seconds-item:nth-child(4n+4){ |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 热门榜单 |
|
|
|
|
.hot-list{ |
|
|
|
|
margin-top: 46rpx; |
|
|
|
|
.top { |
|
|
|
|
padding: 0rpx 32rpx; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
.tip { |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
color: #999999; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 50rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
line-height: 68rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.scroll-hot{ |
|
|
|
|
// margin: 0 30rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 274rpx; |
|
|
|
|
swiper-item { |
|
|
|
|
.scroll-box{ |
|
|
|
|
width: 704rpx !important; |
|
|
|
|
.item { |
|
|
|
|
margin-left: ; |
|
|
|
|
width: 684rpx; |
|
|
|
|
height: 240rpx; |
|
|
|
|
box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.06); |
|
|
|
|
// margin-right: 20rpx; |
|
|
|
|
.hot-item{ |
|
|
|
|
padding: 0 24rpx; |
|
|
|
|
width: 690rpx; |
|
|
|
|
background-color: #EFF0F3; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
.title-box{ |
|
|
|
|
height: 96rpx; |
|
|
|
|
image{ |
|
|
|
|
width: 44rpx; |
|
|
|
|
height: 44rpx; |
|
|
|
|
margin-right: 8rpx; |
|
|
|
|
} |
|
|
|
|
text{ |
|
|
|
|
height: 44rpx; |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
border-bottom: 4rpx solid #2DB5AE; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.goods-item{ |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
background-color: #F5F6F8; |
|
|
|
|
height: 164rpx; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
.hot-left{ |
|
|
|
|
margin: 16rpx 0 0 16rpx; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
text-align: center; |
|
|
|
|
position: relative; |
|
|
|
|
.order-zh{ |
|
|
|
|
width: 90rpx; |
|
|
|
|
height: 110rpx; |
|
|
|
|
font-size: 84rpx; |
|
|
|
|
} |
|
|
|
|
.order-en{ |
|
|
|
|
width: 42rpx; |
|
|
|
|
font-size: 34rpx; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 90rpx; |
|
|
|
|
left: 21rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.hot-right{ |
|
|
|
|
width: 500rpx; |
|
|
|
|
height: 164rpx; |
|
|
|
|
.img{ |
|
|
|
|
width: 148rpx; |
|
|
|
|
height: 144rpx; |
|
|
|
|
margin: 10rpx 20rpx 10rpx 0; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
} |
|
|
|
|
.text-box{ |
|
|
|
|
z-index: 10; |
|
|
|
|
margin: 14rpx 0; |
|
|
|
|
font-family: PingFangSC-Light, PingFang SC; |
|
|
|
|
.text1{ |
|
|
|
|
width: 332rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
} |
|
|
|
|
.text2{ |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
|
|
|
|
|
text{ |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #999999; |
|
|
|
|
text-decoration: line-through; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.text3{ |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-weight: 500; |
|
|
|
|
color: #999999; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.scroll-box:last-child{margin-right: 60rpx;} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.recommended-list{ |
|
|
|
|
margin-top: 46rpx; |
|
|
|
|
.top { |
|
|
|
|
padding: 0rpx 32rpx; |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
.tip { |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-family: Futura; |
|
|
|
|
color: #999999; |
|
|
|
|
line-height: 22rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 50rpx; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #3A3A3C; |
|
|
|
|
line-height: 68rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab-box { |
|
|
|
|
padding-bottom: 16rpx; |
|
|
|
|
@ -881,6 +1368,7 @@
|
|
|
|
|
font-size: 50rpx; |
|
|
|
|
line-height: 68rpx; |
|
|
|
|
padding-top: 0rpx; |
|
|
|
|
|
|
|
|
|
// transition: all .8s; |
|
|
|
|
// -webkit-transition: all .8s; |
|
|
|
|
// -moz-transition: all .8s; |
|
|
|
|
|
