|
|
|
@ -1,53 +1,274 @@
|
|
|
|
|
<template> |
|
|
|
|
<view class="quality-recommend"> |
|
|
|
|
<view class="title acea-row row-center-wrapper"> |
|
|
|
|
<view class="header"> |
|
|
|
|
<cu-custom :isBack="true" :isCenter="true" bgColor="''"> |
|
|
|
|
<block slot="backText"> |
|
|
|
|
<view class="backImg"> |
|
|
|
|
<image src="@/static/images/back-btn.png" mode=""></image> |
|
|
|
|
</view> |
|
|
|
|
</block> |
|
|
|
|
<block slot="content"> |
|
|
|
|
<view class="tab-title">热门榜单</view> |
|
|
|
|
</block> |
|
|
|
|
</cu-custom> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="banner-box"> |
|
|
|
|
<swiper class="swiper" circular @change="swiperChange" :autoplay="true"> |
|
|
|
|
<swiper-item v-for="(item, index) in banner" :key="index" class="swiper-item" @click="goBannerDetail"> |
|
|
|
|
<image class="swiper-image " :src="item.pic" mode="aspectFill" lazy-load> |
|
|
|
|
</image> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
<!-- <view class="dots acea-row"> |
|
|
|
|
<view :class="'dot ' + (swiperCurrent === index ? 'dot-active' : '')" v-for="(dot, index) in banner.length" :key="index"></view> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="content-box"> |
|
|
|
|
<scroll-view class="classify-scroll" scroll-x="true"> |
|
|
|
|
<view class="classify-box"> |
|
|
|
|
<view v-for="(item,index) in classifyList" :key="index" @click="changeClassify(index)"> |
|
|
|
|
<view :class="'classify-item acea-row row-middle ' + (classifyType == index?'on':'')"> |
|
|
|
|
<image :src="item.listImage" mode="aspectFill"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
<scroll-view class="nav-scroll" scroll-x="true"> |
|
|
|
|
<view class="nav-box"> |
|
|
|
|
<view class="item on">全部</view> |
|
|
|
|
<picker class="item" @change="bindPickerChange" :value="mouthIndex" :range="mouthList" v-if="mouthList.length"> |
|
|
|
|
<view class="nav-name">{{form.mouth}}</view> |
|
|
|
|
<view class="jiantou-down"></view> |
|
|
|
|
</picker> |
|
|
|
|
<view class="item" @click="setSort"> |
|
|
|
|
<view class="nav-name">价格</view> |
|
|
|
|
<view class="jiantou-up" v-if="form.priceOrder == 'asc'"></view> |
|
|
|
|
<view class="jiantou-down" v-else-if="form.priceOrder == 'desc'"></view> |
|
|
|
|
</view> |
|
|
|
|
<picker class="item" @change="bindPickerSubclassChange" :value="subclassIndex" :range="subclassList" range-key="cateName" v-if="subclassList.length"> |
|
|
|
|
<view class="nav-name">{{subclass.cateName}}</view> |
|
|
|
|
<view class="jiantou-down"></view> |
|
|
|
|
</picker> |
|
|
|
|
<view><view class="nav-name" style="margin-right: 12rpx;"></view></view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
<view class="notice-box acea-row row-middle"> |
|
|
|
|
<image src="@/static/images/laba.png" mode="aspectFill"></image> |
|
|
|
|
<view class="uni-notice-bar-box"> |
|
|
|
|
榜单每月30号统计,下月1号左右更新 |
|
|
|
|
<!-- <uni-notice-bar color="#999999" backgroundColor="#F5F6F8" scrollable="true" single="true" :speed="50" fontSize="20rpx" text="榜单每月30号统计,下月1号左右更新"></uni-notice-bar> --> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="list-box"> |
|
|
|
|
<view class="top-box"> |
|
|
|
|
<view class="top-item acea-row" v-for="(item,index) in goodsList" :key="index" @tap="goGoodsCon(item)"> |
|
|
|
|
<!-- <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" v-if="item.isIntegral === 1">{{ item.integral }}积分</view> |
|
|
|
|
<view class="price-box" v-else>¥{{ 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" v-if="item.isIntegral === 1">{{ item.integral }}积分</view> |
|
|
|
|
<view class="current" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> --> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <view class="title acea-row row-center-wrapper"> |
|
|
|
|
<view class="line"></view> |
|
|
|
|
<view class="name"> |
|
|
|
|
<text class="iconfont" :class="icon"></text>{{ name }} |
|
|
|
|
</view> |
|
|
|
|
<view class="line"></view> |
|
|
|
|
</view> |
|
|
|
|
<GoodList :good-list="goodsList" :is-sort="false"></GoodList> |
|
|
|
|
<GoodList :good-list="goodsList" :is-sort="false"></GoodList> --> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
|
<script> |
|
|
|
|
|
|
|
|
|
// import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar' |
|
|
|
|
import GoodList from "@/components/GoodList"; |
|
|
|
|
import { getGroomList } from "@/api/store"; |
|
|
|
|
import { getBanner, getHotListData, getHotList, getGroomList } from "@/api/store"; |
|
|
|
|
export default { |
|
|
|
|
name: "HotNewGoods", |
|
|
|
|
components: { |
|
|
|
|
// UniNoticeBar, |
|
|
|
|
GoodList |
|
|
|
|
}, |
|
|
|
|
props: {}, |
|
|
|
|
data: function() { |
|
|
|
|
return { |
|
|
|
|
imgUrls: [], |
|
|
|
|
banner: [], |
|
|
|
|
classifyType: 0, |
|
|
|
|
classifyList: [], |
|
|
|
|
mouthList: [], |
|
|
|
|
mouthIndex: 0, |
|
|
|
|
// mouth: '', |
|
|
|
|
subclassList: [], |
|
|
|
|
subclassIndex: 0, |
|
|
|
|
subclass: {}, |
|
|
|
|
form: { |
|
|
|
|
mouth: '', // 所属月份 |
|
|
|
|
hotListId: null, // 榜单ID |
|
|
|
|
cateId: null, // 商品分类ID |
|
|
|
|
page: 1, |
|
|
|
|
limit: 30, |
|
|
|
|
priceOrder: '', // desc降序/asc升序 |
|
|
|
|
salesOrder: '', |
|
|
|
|
}, |
|
|
|
|
// topList: [], |
|
|
|
|
goodsList: [], |
|
|
|
|
name: "", |
|
|
|
|
icon: "", |
|
|
|
|
RecommendSwiper: { |
|
|
|
|
pagination: { |
|
|
|
|
el: ".swiper-pagination", |
|
|
|
|
clickable: true |
|
|
|
|
}, |
|
|
|
|
autoplay: { |
|
|
|
|
disableOnInteraction: false, |
|
|
|
|
delay: 2000 |
|
|
|
|
}, |
|
|
|
|
loop: true, |
|
|
|
|
speed: 1000, |
|
|
|
|
observer: true, |
|
|
|
|
observeParents: true |
|
|
|
|
} |
|
|
|
|
// name: "", |
|
|
|
|
// icon: "", |
|
|
|
|
// RecommendSwiper: { |
|
|
|
|
// pagination: { |
|
|
|
|
// el: ".swiper-pagination", |
|
|
|
|
// clickable: true |
|
|
|
|
// }, |
|
|
|
|
// autoplay: { |
|
|
|
|
// disableOnInteraction: false, |
|
|
|
|
// delay: 2000 |
|
|
|
|
// }, |
|
|
|
|
// loop: true, |
|
|
|
|
// speed: 1000, |
|
|
|
|
// observer: true, |
|
|
|
|
// observeParents: true |
|
|
|
|
// } |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
mounted: function() { |
|
|
|
|
this.titleInfo(); |
|
|
|
|
this.getIndexGroomList(); |
|
|
|
|
// this.titleInfo(); |
|
|
|
|
// this.getIndexGroomList(); |
|
|
|
|
getBanner(4).then(res => { |
|
|
|
|
this.$set(this,'banner',res.data.banner) |
|
|
|
|
}) |
|
|
|
|
this.getHotListData(); |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
titleInfo: function() { |
|
|
|
|
goBannerDetail(item){ |
|
|
|
|
if (item.uniapp_url) { |
|
|
|
|
this.$yrouter.push(item.uniapp_url) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
swiperChange(e) { |
|
|
|
|
this.swiperCurrent = e.detail.current; |
|
|
|
|
}, |
|
|
|
|
getHotListData() { |
|
|
|
|
getHotListData().then(res => { |
|
|
|
|
this.hotListData = res.data; |
|
|
|
|
this.mouthList = res.data.mouthList; |
|
|
|
|
this.form.mouth = this.mouthList[0]; |
|
|
|
|
this.classifyList = this.hotListData[this.form.mouth].hotListDTOS; |
|
|
|
|
this.form.hotListId = this.classifyList[this.classifyType].id; |
|
|
|
|
this.subclassList = this.classifyList[this.classifyType].cateDtos; |
|
|
|
|
this.subclass = this.subclassList[0]; |
|
|
|
|
this.form.cateId = this.subclass.cateId; |
|
|
|
|
this.getHotList(); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 月份 |
|
|
|
|
bindPickerChange(e) { |
|
|
|
|
if(this.mouthIndex == e.detail.value) return; |
|
|
|
|
this.mouthIndex = e.detail.value; |
|
|
|
|
this.form.mouth = this.mouthList[this.mouthIndex]; |
|
|
|
|
this.goodsList = []; |
|
|
|
|
this.classifyList = this.hotListData[this.form.mouth].hotListDTOS; |
|
|
|
|
if(this.classifyList[this.classifyType]) { |
|
|
|
|
this.form.hotListId = this.classifyList[this.classifyType].id; |
|
|
|
|
this.subclassList = this.classifyList[this.classifyType].cateDtos; |
|
|
|
|
this.subclass = this.subclassList[0]; |
|
|
|
|
this.form.cateId = this.subclass.cateId; |
|
|
|
|
this.getHotList(); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
// 榜单 |
|
|
|
|
changeClassify(i) { |
|
|
|
|
if(this.classifyType == i) return |
|
|
|
|
this.classifyType = i; |
|
|
|
|
this.form.hotListId = this.classifyList[this.classifyType].id; |
|
|
|
|
this.goodsList = []; |
|
|
|
|
this.getHotList(); |
|
|
|
|
}, |
|
|
|
|
// 子分类 |
|
|
|
|
bindPickerSubclassChange(e) { |
|
|
|
|
if(this.subclassIndex == e.detail.value) return; |
|
|
|
|
this.subclassIndex = e.detail.value; |
|
|
|
|
this.subclass = this.subclassList[this.subclassIndex]; |
|
|
|
|
this.form.cateId = this.subclass.cateId; |
|
|
|
|
this.goodsList = []; |
|
|
|
|
this.getHotList(); |
|
|
|
|
}, |
|
|
|
|
getHotList() { |
|
|
|
|
uni.showLoading({ |
|
|
|
|
title: '' |
|
|
|
|
}) |
|
|
|
|
getHotList(this.form).then(res => { |
|
|
|
|
this.goodsList = res.data; |
|
|
|
|
uni.hideLoading(); |
|
|
|
|
// this.goodsList = this.sortData(res.data, 5); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 数据分层 |
|
|
|
|
sortData(oArr, length) { |
|
|
|
|
let arr = []; |
|
|
|
|
let minArr = []; |
|
|
|
|
if (oArr.length > length) { |
|
|
|
|
this.topList = oArr.slice(0, length); |
|
|
|
|
arr = oArr.slice(length, oArr.length); |
|
|
|
|
} else { |
|
|
|
|
this.topList = oArr; |
|
|
|
|
} |
|
|
|
|
return arr; |
|
|
|
|
}, |
|
|
|
|
setSort() { |
|
|
|
|
if (this.form.priceOrder == '') this.form.priceOrder = 'asc' |
|
|
|
|
else if (this.form.priceOrder == 'asc') this.form.priceOrder = 'desc' |
|
|
|
|
else if (this.form.priceOrder == 'desc') this.form.priceOrder = '' |
|
|
|
|
this.goodsList = []; |
|
|
|
|
this.getHotList(); |
|
|
|
|
}, |
|
|
|
|
goGoodsCon(item) { |
|
|
|
|
if(item.isIntegral === 1) { |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/shop/IntegralGoodsCon/index', |
|
|
|
|
query: { |
|
|
|
|
id: item.id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
this.$yrouter.push({ |
|
|
|
|
path: '/pages/shop/GoodsCon/index', |
|
|
|
|
query: { |
|
|
|
|
id: item.id, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
/* titleInfo: function() { |
|
|
|
|
let type = this.$yroute.query.type; |
|
|
|
|
if (type === "1") { |
|
|
|
|
this.name = "精品推荐"; |
|
|
|
@ -68,7 +289,7 @@ export default {
|
|
|
|
|
let type = this.$yroute.query.type; |
|
|
|
|
getGroomList(type) |
|
|
|
|
.then(res => { |
|
|
|
|
that.imgUrls = res.data.banner; |
|
|
|
|
// that.banner = res.data.banner; |
|
|
|
|
that.goodsList = res.data.list; |
|
|
|
|
}) |
|
|
|
|
.catch((err)=> { |
|
|
|
@ -78,7 +299,332 @@ export default {
|
|
|
|
|
duration: 2000 |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} */ |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
.header { |
|
|
|
|
position: fixed; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
z-index: 20; |
|
|
|
|
width: 750rpx; |
|
|
|
|
.tab-title { |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
line-height: 42rpx; |
|
|
|
|
} |
|
|
|
|
.backImg { |
|
|
|
|
width: 88rpx; |
|
|
|
|
height: 62rpx; |
|
|
|
|
padding-left: 26rpx; |
|
|
|
|
image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.banner-box { |
|
|
|
|
width: 750rpx; |
|
|
|
|
height: 472rpx; |
|
|
|
|
.swiper { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
.swiper-item { |
|
|
|
|
.swiper-image { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/* .dots { |
|
|
|
|
position: absolute; |
|
|
|
|
bottom: 82rpx; |
|
|
|
|
left: 50%; |
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
z-index: 1; |
|
|
|
|
.dot { |
|
|
|
|
width: 8rpx; |
|
|
|
|
height: 8rpx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
border-radius: 6rpx; |
|
|
|
|
margin: 0rpx 8rpx; |
|
|
|
|
transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
|
|
|
} |
|
|
|
|
.dot-active { |
|
|
|
|
width: 34rpx; |
|
|
|
|
background: #3A3A3C; |
|
|
|
|
transition: width .5s cubic-bezier(.18,.89,.17,.88); |
|
|
|
|
} |
|
|
|
|
} */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content-box { |
|
|
|
|
position: absolute; |
|
|
|
|
left: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
width: 100vw; |
|
|
|
|
height: calc(100vh - 412rpx); |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
box-shadow: 0rpx -4rpx 38rpx 0rpx rgba(0,0,0,0.1); |
|
|
|
|
border-radius: 28rpx 28rpx 0rpx 0rpx; |
|
|
|
|
.classify-scroll { |
|
|
|
|
position: relative; |
|
|
|
|
top: -60rpx; |
|
|
|
|
margin-bottom: -60rpx; |
|
|
|
|
height: 120rpx; |
|
|
|
|
overflow:hidden; |
|
|
|
|
white-space:nowrap; |
|
|
|
|
.classify-box { |
|
|
|
|
padding-left: 32rpx; |
|
|
|
|
padding-right: 12rpx; |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
align-items: center; |
|
|
|
|
.classify-item { |
|
|
|
|
width: 176rpx; |
|
|
|
|
height: 96rpx; |
|
|
|
|
text-align: center; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
image { |
|
|
|
|
width: 176rpx; |
|
|
|
|
height: 96rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
transition: all .3s linear; |
|
|
|
|
// background: linear-gradient(135deg, #39D396 0%, #2DB7AD 43%, #1B8DCC 100%); |
|
|
|
|
} |
|
|
|
|
transition: width .3s linear; |
|
|
|
|
} |
|
|
|
|
.classify-item.on { |
|
|
|
|
width: 220rpx; |
|
|
|
|
height: 120rpx; |
|
|
|
|
transition: width .3s linear; |
|
|
|
|
image { |
|
|
|
|
width: 220rpx; |
|
|
|
|
height: 120rpx; |
|
|
|
|
transition: all .3s linear; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content-box .nav-scroll { |
|
|
|
|
overflow:hidden; |
|
|
|
|
white-space:nowrap; |
|
|
|
|
} |
|
|
|
|
.content-box .nav-box { |
|
|
|
|
display: flex; |
|
|
|
|
flex-wrap: nowrap; |
|
|
|
|
padding: 20rpx 32rpx; |
|
|
|
|
margin-right: 32rpx; |
|
|
|
|
.item { |
|
|
|
|
height: 40rpx; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
border: 2rpx solid #2EB5AE; |
|
|
|
|
padding: 0rpx 18rpx; |
|
|
|
|
font-size: 24rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #2DB5AE; |
|
|
|
|
line-height: 36rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
.nav-name,.jiantou-down,.jiantou-up { |
|
|
|
|
display: inline-block; |
|
|
|
|
} |
|
|
|
|
.jiantou-down,.jiantou-up { |
|
|
|
|
margin-bottom: 4rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.item.on { |
|
|
|
|
width: 124rpx; |
|
|
|
|
background: #2DB5AE; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
text-align: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.jiantou-down { |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
border-top: 10rpx solid #2EB5AE; |
|
|
|
|
border-bottom: 0rpx; |
|
|
|
|
border-left: 6rpx solid transparent; |
|
|
|
|
border-right: 6rpx solid transparent; |
|
|
|
|
margin-left: 2rpx; |
|
|
|
|
} |
|
|
|
|
.jiantou-up { |
|
|
|
|
width: 0; |
|
|
|
|
height: 0; |
|
|
|
|
border-bottom: 10rpx solid #2EB5AE; |
|
|
|
|
border-top: 0rpx; |
|
|
|
|
border-left: 6rpx solid transparent; |
|
|
|
|
border-right: 6rpx solid transparent; |
|
|
|
|
margin-left: 2rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.notice-box { |
|
|
|
|
margin: 0rpx 32rpx 18rpx; |
|
|
|
|
padding: 0rpx 16rpx; |
|
|
|
|
height: 38rpx; |
|
|
|
|
background: #F5F6F8; |
|
|
|
|
border-radius: 16rpx; |
|
|
|
|
image { |
|
|
|
|
width: 26rpx; |
|
|
|
|
height: 26rpx; |
|
|
|
|
} |
|
|
|
|
.uni-notice-bar-box { |
|
|
|
|
width: 628rpx; |
|
|
|
|
padding-left: 8rpx; |
|
|
|
|
font-size: 20rpx; |
|
|
|
|
font-family: PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #999999; |
|
|
|
|
line-height: 26rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.list-box { |
|
|
|
|
height: calc(100% - 200rpx); |
|
|
|
|
overflow-y: scroll; |
|
|
|
|
.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.06); |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.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.06); |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
</style> |