<template>
|
<view class="page-content">
|
<scroll-view class="swiper-scroll" :refresher-background='headerColor' @scroll='pagescroll' scroll-y="true"
|
:scroll-top='scrollindex' :scroll-anchoring='true' scroll-with-animation lower-threshold='500'
|
@scrolltolower="getNextPage" :refresher-threshold='75' :refresher-triggered='triggeredstate'
|
:refresher-enabled='canrefresh && canrefush' @refresherrefresh='refresh' @refresherrestore="onRestore"
|
refresher-default-style='none' :bounce='false' @refresherpulling="pulling">
|
<view class="indexbody-index-wrapper colCen borderBox">
|
<view class="topheaderCard-container colCen borderBox">
|
<view class="ellipse" :style="'background:'+ headerColor +';'"></view>
|
</view>
|
<view class="loading-img rowCenCen" :style="'margin-top:'+(Topheight-77)+'px;'">
|
<view class="imgbox defIcon">
|
<image src="../static/images/home/loading.gif" mode="aspectFill"></image>
|
</view>
|
</view>
|
<view class="pageBody-container colCen borderBox">
|
<view class="column-container">
|
<view class="bannerSwiper-container colCenCen borderBox" v-if="topBannerList.length>0">
|
<swiper class="swiper-box" :current="swpidx
|
" @change="changeColor" :autoplay="true" :interval="3000" :duration="500" :indicator-dots="true"
|
:indicator-active-color="'#fff'" circular>
|
<swiper-item v-for="(items,index) in topBannerList" :key='index'>
|
<view class="swiper-item defIcon" @click="goUrl(items)">
|
<image :src="items.pic"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<view class="centerSwiper-container colCenCen borderBox" v-if="singleLineList.length>0">
|
<swiper class="swiper-box" :autoplay="true" :interval="5000" :duration="300" circular>
|
<swiper-item v-for="(items,index) in singleLineList" :key='index'>
|
<view class="swiper-item defIcon" @click="goUrl(items)">
|
<image :src="items.pic" mode="aspectFit"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<view class="cardsList-container rowCenBet borderBox" v-if="doubleLineList.length>0">
|
<block v-for="(items,index) in doubleLineList" :key='index'>
|
<view class="card-items defIcon" @click="goUrl(items)">
|
<image :src="items.pic" mode="aspectFill" lazy-load="true"></image>
|
</view>
|
</block>
|
</view>
|
|
|
<!-- 金刚区 -->
|
<view class="navslider-box" v-if="navbarShowList.length > 0">
|
<swiper class="swiper-type swiper-nav"
|
:indicator-dots="navbarList.length > 10 ? true : false" indicator-color="#eaeaea"
|
indicator-active-color="#FE3A33" :duration="500" :style="sliderH">
|
<swiper-item v-for="(sliderItem, index) in navbarShowList" :key="index">
|
<view class="slider_itemslist rowSta">
|
<view class="item colCen" v-for="(item, idx) in sliderItem" :key="idx"
|
@click="goUrl(item)">
|
<image :src="item.mpic" :lazy-load="true" mode="aspectFit"></image>
|
<view class="desc">{{ item.mname }}</view>
|
</view>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
</view>
|
</view>
|
|
<view class="pagebottomBody-container colCen borderBox">
|
<view class="bottomSwiper-container colCenCen borderBox" v-if="bottomBannerList.length>0">
|
<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="300" circular>
|
<swiper-item v-for="(items,index) in bottomBannerList" :key='index'>
|
<view class="swiper-item defIcon" @click="goUrl(items)">
|
<image :src="items.pic" mode="widthFix"></image>
|
</view>
|
</swiper-item>
|
</swiper>
|
</view>
|
|
<view class="van-row">
|
<view class="van-col van-col--12" style="padding-right: 10rpx;"
|
>
|
<view class="home-row" @click="gorxb()">
|
<view class="title"><text class="name">全网热销榜</text>
|
<view class="tag">
|
<image
|
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAAXNSR0IArs4c6QAAASJJREFUOE+V08suBFEQxvHfGZcFVgQrli6ReBEh8RJsWHgSCzY8hsSLSMRlZ6xIWBkLl2mpntPSaY1MJ93pc6rqX199JydpPAWdRL9gCyc5vJs4q2L1ktQExLpgDBdYyfFrrCfem/mpIKWypvxU3SfwiMlc0MN8olfPj1ipoGA8L97yug0wl3jN8bIuGoeCTRxiBHuJ84IpPCBA8UThbADqPpRqCrpYyIm3WDVQ9NQGaCoOQH8whQ5i1pkMe24AwoOXgg0c4xMHFaDyI6RO/wIIcHh0haWccx+A6B5vGPMXoALHaHE6obz0YFhANVp59MOM0BytFVA3sZIajdr2vwF3WMym3GAt/19i+Z/9boywjSOMYicuTT7rH5eptn+KD+x/Adlpb2CRJ4eqAAAAAElFTkSuQmCC">
|
</image>
|
<text>实时好货</text>
|
</view>
|
</view>
|
<view class="g-row">
|
<view v-for="(items,index) in rqList.fqbGoods" :key='index'>
|
<view class="pic"><text class="num">{{index+1}}</text>
|
<view class="van-image">
|
<image class="van-image__img" :src="items.mainPic">
|
|
</image>
|
</view>
|
</view>
|
<view class="time">2小时抢{{items.twoHoursSales}}</view>
|
<view class="my">¥{{items.actualPrice}}</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="van-col van-col--12" style="padding-left: 10rpx;"
|
>
|
<view class="home-row two" @click="goddq()">
|
<view class="title"><text class="name">限时秒杀</text>
|
<view class="tagg" style="opacity: 1;">
|
<text class="ddq" style="white-space: nowrap;">{{rqList.ddqTime}} 点场 </text>
|
<view class="van-count-down">疯抢中</view>
|
</view>
|
</view>
|
<view class="g-row">
|
<view v-for="(items,index) in rqList.ddqGoods" :key='index'>
|
<view class="pic">
|
<view class="van-image">
|
<image :src="items.mainPic" alt="" class="van-image__img"></image>
|
</view>
|
</view>
|
<view class="time" style="opacity: 1;">{{items.specialText[0] ? items.specialText[0]:'已抢'+items.monthSales+'件' }} </view>
|
<view class="my">¥{{items.actualPrice}}</view>
|
</view>
|
<!-- <view>
|
<view class="pic">
|
<view class="van-image">
|
<image
|
src="https://img.alicdn.com/imgextra/i4/1055497792/O1CN013oMl9y27QmqfAkIvE_!!1055497792.png_310x310.jpg"
|
alt="" class="van-image__img"></image>
|
</view>
|
</view>
|
<view class="time" style="opacity: 1;">第2件5元</view>
|
<view class="my">¥19.8</view>
|
</view> -->
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 大家都在买 -->
|
<view class="everysBuying-container colCen" v-if="zdmList.length>0">
|
<view class="box-bar-content rowCen">
|
<view class="title-text">
|
爆品推荐
|
</view>
|
<view class="tips-txt rowCenCen">
|
<view>热销好货</view>
|
</view>
|
</view>
|
<view class="goodsScroll-container rowCen">
|
<scroll-view class="scrollgoods-box" scroll-x scroll-with-animation>
|
<view class="scrollList-content">
|
<view class="goods-items" v-for="(items,index) in zdmList" :key="index"
|
@tap="goDetails(items)">
|
<view class="items-container colCen">
|
<view class="image-content defIcon">
|
<image :src="items.itempic" mode="aspectFill" :lazy-load="true"></image>
|
</view>
|
|
<view class="goodsinfo-content colCen borderBox">
|
<view class="goodsName-box">
|
{{items.itemshorttitle}}
|
</view>
|
<view class="coupons-container rowCen">
|
<view class="couponbac-content rowCen">
|
<view class="textsTip">
|
爆款
|
</view>
|
<view class="coupons-value">
|
{{items.couponmoney}}元券
|
</view>
|
</view>
|
</view>
|
<view class="price-info-container rowEnd">
|
<view class="nowPrice-content rowEnd">
|
<view class="rmbicon">
|
￥
|
</view>
|
<view class="nowprice">
|
{{items.itemendprice}}
|
</view>
|
</view>
|
<view class="oldPrice-content rowEnd">
|
<view class="oldprice">
|
￥{{items.itemprice}}
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- <view class="progress">
|
后面处理
|
</view> -->
|
</view>
|
|
|
<!-- 实时疯抢榜 -->
|
|
|
|
<!-- 抖好物 -->
|
|
</view>
|
|
<view class="goods-bottom-List colCen borderBox">
|
<view class="bottomTypebar-container colCen borderBox">
|
<view class="typeList rowCenCen borderBox" :style="fixedClass?'top:'+Topheight+'px;':''"
|
:class="fixedClass?'imbibition':''">
|
<block v-for="(items,index) in typedataList" :key='index'>
|
<view class="type-items-container colCenEnd" @click="switchtype(items,index)"
|
:class="bottomCurrent==index?'type-container-active':''">
|
<view class="subtitle">
|
{{items.mainTitle}}
|
</view>
|
<!-- <view class="subtitle">
|
{{items.subTitle}}
|
</view> -->
|
</view>
|
</block>
|
</view>
|
</view>
|
|
<view class="bottomGoods-list-container rowCenBet borderBox" v-if="bottomGoodsList.length>0">
|
<block v-for="(items,index) in bottomGoodsList" :key="index">
|
<view class="goods-items-cards colCen borderBox" @tap="goDetails(items)">
|
<view class="goodspic-container defIcon">
|
<image :src="items.mainPic" mode="aspectFill"></image>
|
</view>
|
<view class="bottominfo-container colCen">
|
<view class="trade-name-container rowSta">
|
|
|
<view class="typeIcon-content defIcon">
|
<image :src="items.icon" mode="heightFix"></image>
|
</view>
|
|
|
<view class="tradename">
|
{{items.dtitle}}
|
</view>
|
</view>
|
|
<view class="discounts-container rowCen borderBox rowEndBet">
|
<view class="left-price-box rowEnd">
|
<text class='greytxt'>券后</text>
|
<text class='rmb'>￥</text>
|
<text class='pricebox'>{{items.actualPrice}}</text>
|
</view>
|
<view class="juan">
|
<text>{{items.searchSource==4?('折'):'券'}}</text>
|
{{items.searchSource==4?(items.discount):items.couponPrice+'元'}}
|
</view>
|
</view>
|
|
<view class="price-saleNums-container rowEndBet">
|
<view class="right-price-box" v-if=" items.searchSource!=4">
|
已售{{items.monthSales}}
|
</view>
|
<view class="shopname rowEnd">
|
<text class='shop'>{{items.shopName}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</block>
|
|
<aLoadMore status="loading" mode="loading3" :showTitle='true' color="#999999"></aLoadMore>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
<slideTop v-if="scrollTop>1000" @toTop='scrolltoTops'></slideTop>
|
</view>
|
</template>
|
|
<script>
|
import utils from '../utils/utils.js'
|
import slideTop from './slideTop.vue'
|
export default {
|
props: {
|
Topheight: {
|
type: Number,
|
default: 90
|
},
|
canrefush: {
|
type: Boolean
|
},
|
fixedClass: {
|
type: Boolean,
|
default: false
|
}
|
},
|
components: {
|
slideTop
|
},
|
data() {
|
return {
|
pageHeight: '',
|
headerColor: '',
|
topBannerList: [],
|
singleLineList: [],
|
doubleLineList: [],
|
bottomBannerList: [],
|
navbarShowList: [],
|
navbarList: [],
|
sliderH: '',
|
|
scrollTop: 0,
|
scrollindex: 0,
|
|
|
zdmList: [],
|
phbList: [],
|
dyList: [],
|
rqList: [],
|
|
typedataList: [{
|
mainTitle: '推荐',
|
subTitle: '为你推荐',
|
type: 1
|
},
|
{
|
mainTitle: '京东',
|
subTitle: '官方保障',
|
type: 2
|
},
|
{
|
mainTitle: '拼多多',
|
subTitle: '百亿补贴',
|
type: 3
|
},
|
{
|
mainTitle: '唯品会',
|
subTitle: '大牌精选',
|
type: 4
|
},
|
{
|
mainTitle: '抖音',
|
subTitle: '大牌精选',
|
type: 5
|
}
|
],
|
bottomType: 1,
|
bottomCurrent: 0,
|
bottomGoodsList: [],
|
loadingState: false,
|
currentPage: 1,
|
loadstatus: 'loading',
|
|
triggeredstate: true,
|
swpidx: 0,
|
canrefresh: true,
|
}
|
},
|
watch: {
|
navbarList(nval, oval) {
|
let index = 0;
|
while (index < nval.length) {
|
this.navbarShowList.push(nval.slice(index, (index += 10)));
|
}
|
if (this.navbarList.length > 5) {
|
this.sliderH = 'height:345rpx;';
|
} else {
|
this.sliderH = 'height:160rpx;';
|
}
|
},
|
headerColor: {
|
handler(nvl, ovl) {
|
this.$emit('passColor', nvl)
|
},
|
immediate: true
|
}
|
},
|
created() {
|
this._freshing = false;
|
uni.$emit('initpage')
|
this.getBannerInfo();
|
this.getHomeMenuList();
|
this.getrecommendGoods();
|
this.getbottomGoodsList(this.bottomType);
|
this.getRQList();
|
},
|
mounted() {
|
this.$emit('scrolltoTop')
|
this.fixedClass = false;
|
setTimeout(() => {
|
this.getfixedHeight()
|
}, 1500)
|
},
|
methods: {
|
pulling(e) {},
|
refresh(e) {
|
this.triggeredstate = true
|
if (this._freshing) return;
|
this._freshing = true;
|
this.getBannerInfo();
|
this.getrecommendGoods();
|
setTimeout(() => {
|
this.triggeredstate = false;
|
this._freshing = false;
|
}, 8000)
|
},
|
goUrl1(e) {
|
let url = e.currentTarget.dataset.url;
|
console.log(url);
|
uni.navigateTo({
|
url: url
|
});
|
},
|
onRestore() {
|
this.swpidx = 0
|
console.log('下拉被终止');
|
},
|
pagescroll(e) {
|
this.$emit('scrollNum', e.detail.scrollTop)
|
this.scrollTop = e.detail.scrollTop
|
if (!e.detail.scrollTop > 0) {
|
setTimeout(() => {
|
this.canrefresh = true
|
})
|
} else {
|
// this.canrefresh = false
|
}
|
},
|
|
scrolltoTops() {
|
this.scrollindex = this.scrollTop
|
this.$nextTick(() => {
|
this.scrollindex = 0
|
})
|
},
|
|
onAbort() {
|
console.log('refushstop');
|
},
|
|
getBannerInfo() {
|
// banner数据
|
this.$http.get('banner/list/1').then((res) => {
|
this.topBannerList = res.topBannerList;
|
this.headerColor = this.topBannerList[0].colour;
|
this.singleLineList = res.singleLineList;
|
this.doubleLineList = res.doubleLineList;
|
this.bottomBannerList = res.bottomBannerList;
|
setTimeout(() => {
|
this.triggeredstate = false;
|
this._freshing = false;
|
}, 300)
|
})
|
},
|
|
goTik() {
|
uni.navigateTo({
|
url: '../active/tiktoklist'
|
})
|
},
|
|
godydetails(itm) {
|
const info = {}
|
info.nowInfo = itm
|
info.pageCurrent = 2
|
info.type = 0
|
info.storgeList = this.dyList
|
utils.setCache('pathInfo', info)
|
uni.navigateTo({
|
url: '../active/dyvideoDetails'
|
})
|
},
|
|
getHomeMenuList() {
|
// 金刚区
|
this.$http.post('homeMenu/getHomeMenuList', {
|
type: 1
|
}, 'application/json').then((res) => {
|
this.navbarList = res;
|
})
|
},
|
|
getrecommendGoods() {
|
this.$http.post('tb/getMQD').then((res) => {
|
this.zdmList = res.zdm;
|
this.phbList = res.phb;
|
this.dyList = res.dygoods;
|
})
|
},
|
|
getbottomGoodsList(type) {
|
this.$http.post('tb/getGoodThing', {
|
deviceType: getApp().globalData.platform == 'android' ? (getApp().globalData.systemLevel < 10 ?
|
'IMEI' : 'OAID') : 'IDFA',
|
deviceValue: getApp().globalData.equipmentNumber,
|
pageId: 1,
|
pageSize: 10,
|
type: type
|
}, 'application/json').then((res) => {
|
if (res.length < 10) {
|
this.loadingState = false
|
this.loadstatus = 'normal'
|
} else {
|
this.currentPage++
|
this.loadstatus = 'loading'
|
this.loadingState = true
|
}
|
this.bottomGoodsList = res
|
})
|
},
|
|
getNextPage() {
|
if (this.loadingState) {
|
this.loadingState = false
|
this.$http.post('tb/getGoodThing', {
|
deviceType: getApp().globalData.platform == 'android' ? (getApp().globalData.systemLevel <
|
10 ? 'IMEI' : 'OAID') : 'IDFA',
|
deviceValue: getApp().globalData.equipmentNumber,
|
pageId: this.currentPage,
|
pageSize: 10,
|
type: this.bottomType,
|
}, 'application/json').then((res) => {
|
if (res.length < 10) {
|
this.loadingState = false
|
this.loadstatus = 'normal'
|
} else {
|
this.currentPage++
|
this.loadstatus = 'loading'
|
this.loadingState = true
|
}
|
this.bottomGoodsList = this.bottomGoodsList.concat(res)
|
})
|
}
|
},
|
|
switchtype(info, idx) {
|
if (this.bottomCurrent != idx) {
|
this.currentPage = 1;
|
this.bottomType = info.type;
|
this.getbottomGoodsList(this.bottomType);
|
this.$nextTick(() => {
|
this.$emit('scrolltoview')
|
this.bottomCurrent = idx;
|
})
|
}
|
},
|
|
getfixedHeight(e) {
|
uni.createSelectorQuery().in(this).select('.goods-bottom-List').boundingClientRect(data => {
|
this.$emit('pushfixed', data.top)
|
}).exec();
|
},
|
|
changeColor(e) {
|
this.swpidx = e.detail.current
|
this.topBannerList.forEach((itm, idx) => {
|
if (idx == e.detail.current) {
|
this.headerColor = itm.colour
|
}
|
})
|
},
|
|
goUrl(info) {
|
utils.goUrl(info, this)
|
},
|
|
gojgqUrl(info) {
|
if (info.urlType == '0') {
|
uni.navigateTo({
|
url: '../webView/webView?url=' + info.murl
|
})
|
} else if (info.urlType == 1) {
|
uni.navigateTo({
|
url: info.murl
|
})
|
} else if (info.urlType == '2') {
|
// #ifdef APP-PLUS
|
if (plus.os.name == 'Android') {
|
console.log(plus.os.name);
|
plus.runtime.openURL(info.murl, res => {
|
uni.navigateTo({
|
url: '../webView/webView?url=' + info.murl
|
})
|
}, 'com.taobao.taobao');
|
} else {
|
info.murl = info.murl.split('//')[1]
|
plus.runtime.openURL('taobao://' + info.murl, function(res) {
|
uni.navigateTo({
|
url: '../webView/webView?url=' + info.murl
|
})
|
}, 'taobao://');
|
}
|
// #endif
|
}
|
},
|
|
goDetails(info) {
|
//info.searchSource = 1
|
uni.navigateTo({
|
url: '../goods/goodsDetail?info=' + encodeURIComponent(JSON.stringify(info))
|
})
|
},
|
|
|
getRQList() {
|
// 金刚区
|
this.$http.post('tb/getM', 'application/json').then((res) => {
|
console.log("rexiao========================" + JSON.stringify(res))
|
this.rqList = res;
|
})
|
},
|
gorxb(){
|
console.log("======================="+JSON.stringify(this.rqList))
|
uni.navigateTo({
|
url: '../webView/webView?url='+this.rqList.fqbUrl
|
})
|
},
|
goddq(){
|
uni.navigateTo({
|
url: '../webView/webView?url='+this.rqList.ddqUrl
|
})
|
}
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.juan {
|
height: 28rpx;
|
background: linear-gradient(90deg,#ff8873 0,#ff4f4f 100%);
|
border-radius: 4rpx;
|
padding: 0 10rpx 0 2rpx;
|
font-size: 19rpx;
|
font-weight: 400;
|
color: #fff;
|
line-height: 28rpx;
|
}
|
.juan text {
|
background: #fff;
|
border-radius: 2rpx 0 0 2rpx;
|
font-size: 20rpx;
|
color: #FE3A33;
|
margin: auto 10rpx auto 0;
|
min-width: 24rpx;
|
max-width: 24rpx;
|
min-height: 24rpx;
|
max-height: 24rpx;
|
display: inline-block;
|
line-height: 24rpx;
|
text-align: center;
|
vertical-align: middle;
|
margin-top: -4rpx;
|
}
|
.loading-img {
|
width: 100%;
|
height: 150rpx;
|
margin-bottom: 20rpx;
|
|
.imgbox {
|
width: 208rpx;
|
height: 126rpx;
|
// max-height: 72rpx;
|
}
|
}
|
|
.swiper-scroll {
|
width: 100%;
|
height: 100vh;
|
}
|
|
.indexbody-index-wrapper {
|
width: 100%;
|
position: relative;
|
|
.topheaderCard-container {
|
width: 100%;
|
height: 380rpx;
|
position: absolute;
|
|
.ellipse {
|
width: 130%;
|
height: 100%;
|
border-radius: 0 0 50% 50%;
|
}
|
}
|
|
.pageBody-container {
|
width: 100%;
|
//background-color: #FFFFFF;
|
margin-bottom: 20rpx;
|
|
.column-container {
|
width: 100%;
|
z-index: 10;
|
|
.bannerSwiper-container {
|
width: 100%;
|
height: 280rpx;
|
padding: 0 16rpx;
|
margin-bottom: 20rpx;
|
|
/deep/.swiper-box {
|
width: 100%;
|
height: 100%;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
border-radius: 12rpx;
|
overflow: hidden;
|
}
|
|
.uni-swiper-dot {
|
width: 20rpx;
|
height: 6rpx;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
|
|
.centerSwiper-container {
|
width: 100%;
|
height: 190rpx;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
.swiper-box {
|
width: 100%;
|
height: 100%;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.cardsList-container {
|
width: 100%;
|
flex-wrap: wrap;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
.card-items {
|
width: 340rpx;
|
height: 135rpx;
|
overflow: hidden;
|
border-radius: 8rpx;
|
margin-bottom: 10rpx;
|
}
|
}
|
|
/deep/.navslider-box {
|
margin: auto;
|
width: 96%;
|
background-color: #FFFFFF;
|
border-radius: 12rpx;
|
|
.swiper-type {
|
width: 100%;
|
|
.slider_itemslist {
|
width: 100%;
|
flex-wrap: wrap;
|
padding: 20rpx 0;
|
|
.item {
|
width: 20%;
|
margin-bottom: 30rpx;
|
|
image {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.desc {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
|
.uni-swiper-dot {
|
width: 20rpx;
|
height: 6rpx;
|
border-radius: none;
|
}
|
}
|
}
|
}
|
|
.pagebottomBody-container {
|
width: 100%;
|
margin-bottom: 20rpx;
|
|
.bottomSwiper-container {
|
width: 100%;
|
height: 160rpx;
|
padding: 0 20rpx;
|
background-color: #FFFFFF;
|
|
.swiper-box {
|
width: 100%;
|
height: 100%;
|
|
.swiper-item {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
|
.van-row {
|
width: 96%;
|
|
.van-col {
|
float: left;
|
box-sizing: border-box;
|
min-height: 2rpx;
|
width: 50%;
|
|
.home-row {
|
background: #fff;
|
border-radius: 12rpx;
|
padding: 0 26rpx 0 26rpx;
|
margin-bottom: 26rpx;
|
|
.title {
|
display: flex;
|
align-items: center;
|
width: 100%;
|
justify-content: space-between;
|
height: 100rpx;
|
|
.name {
|
font-weight: 700;
|
font-size: 28rpx;
|
color: #333;
|
}
|
.tagg {
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAAAcCAYAAADx5STqAAAAAXNSR0IArs4c6QAABYhJREFUeF7tnEtsFVUYx39n5j7m3tsCbWkpLYVizaUUKAIWAgoWLUoCiY8EjejK+CJGjVa78A0mxsREE+PCjTujJsTEJQkPdaEbFy4N7jXGleFRpPfeOeabc+b2XqiJkpmkZc4kJE2BkzPf95v/95jvjGKBS7+Nx3G0Aq3focxlJgiZAu7AZ5CQAaBjof970/4uBLr74JlPoLwJKAD6pr3d1G5McQm830H/htY/4KkzBJWflBqY1VqQQymlxNptl/xF2yWQquOEEayzHAFeQrPNeia1/S/qhT1gFti9Eyb3Q+fD4K8A6mLXRb31JbC5OZT6GdRHlEZOCqRaa+9aWNusrI/gq5M09AwbgU8J2dciG0K5uEyu7HhH7lTuPK/goSkYHIfOx8BfBjQyZYoEoY9DUTtTSn2Pr4+pYvUXrbWvlBIDtwPXVNJpDqD4HOizLpJFBdDswNnqEbnrq8CeMZjYDPRC35PgdTpQkyFX+BJgxdLC2Z/4PK6C6ulWZY3ga0L6KgfRfAMUrRf8ZPayRFcR60h07y3B/feBryE/AH1Pg98J2ilqwp4Vg/ooruJ5D6jg1lMxrKoJ6QwbCPkO6LfuySW8iaW73MFdsHYNXJ2FYAhWPQu55aBdjpqCU8WoOVB/4DcmVTB6PoI1UlSNYoYzaO52StqSFEnI39wPeyegEYKeg8JaWP2cAzUFQluWtMrqnaM0MqWUitoB6GkeRfGFzRXigindrSzm1cUqYqqKB4f2QiUwnShdg+IQDLwAuRVOUdP1oSm0FEdVufqlhP6AK5wlZI9T0xY1rQH7qlAdhrkaeL5R1OI6GHyxXVFV1P5L123ZW92qqvqRUu4epWfYT8jpKIk1upFti8dV/nAFJm8HbQtSZUENhmHda5DralFUDeHf2UMp3TuOWWzghQeUfoUTwJtOTa3VxTx5YGocujuhHho1ledXiqd8D/RIB6Bsn+sQ/C7oGM/8M54Ct0ZV8d5VeppzKPa7/NRyJgXU9lUwvh7mGvJCz/yJ285K1PNKVIHi5aF+AXofhMFjJofNeEBKGFabp6pvJfSfJ6Sa+bAf90x7fJjcAn5rTSmwCoP2vYekAfJzWINCL6x/Cwp9Jod1oCbJqgn/yvtVQv8lqW+TXH3JriVm2bsO+rugXjcwRmJqoW0WTQo8DxpXYOh56D0E9UsW5CV794t344rLDlRxT1xAVcuwfb3JS+NwH8PZDP/y73PQmIUVu2HkDVtwLV4/L/mdRaBmPfTHPdOygjvXQlA04EVqakO+iftWXeVnyU8D2PA+VEaNskZpgbsStkBL6HfFlBmJ2NEFIz1Qi9VUQT0e8hFI4/DvQ/0iDD0FQ09A/bKDNGE6W5ZrKaZce8rYZZUPRemV2lwg78FwN5Tytrtsh3ukX9oxBmMfGlVtDv6k560Mr2zbU+qEa/jHFMgoRJyvinlKMtq3EjqDFhZFVRuw8QPo3ucKqHSfoGsa/u4V6jygseHFRDLoONENHUUItS2g/oKBo1B93eSlzTnydD2W0dXbX6GKEdxQyjUoNEFdDpW8UVRR0kI/bPsMgn7TQ3U90zSfofahlAhUsfg0Z+0bKpsXpLmHRb52DOqOClQKRMccpR01+h4MPQK1CyBNf3elZYHrx/zc4PQCto5B3RZARwC1i7DyXtj6sX2B52Z30iJ0fmh/ocHp+OSpO4pi7B+DujUPZemnFmDnV7BsC9RnXTsqPUr//ShKs36IYXWH++ZBva0AhTm45WXYMG2U1TX2k8b0vx/ua8Lqjkub+khaVV1lGKvD8mHY9TXkSu4wX3KI3vhx6euUNasfoIjf+6/phzFg03FYfdiM87kCKjlU51f6/x+gaIU1s5/0ib+KMroFDh+DnrvM3Km7krHADX7S5x9NQ+SquvQhJAAAAABJRU5ErkJggg==);
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
font-size: 22rpx;
|
height: 38rpx;
|
color: #FFFFFF;
|
width: 186rpx;
|
.ddq {
|
text-align: center;
|
display: inline-block;
|
width: 76rpx;
|
font-size: 22rpx;
|
margin-left: 4rpx;
|
}
|
|
view {
|
font-size: 24rpx;
|
color: #ff6101;
|
margin-left: 14rpx;
|
}
|
}
|
.tag {
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIYAAAAcCAYAAACkhMe0AAAAAXNSR0IArs4c6QAAAydJREFUaEPtW0trU0EU/r5b+0BdNkHbBLqp4mPjwo0FoWJR3LvwH4iCIO4EEfwBbgSpiyqIdOHKrWiLG4X+AaH4BJtIG4VWbElqc4+c+4g3aRJuSiideAa6aJiZe853Ps5rZogmQ0Q8AEJSpFjcj/7qaQjPA5gAOQpgBCIHm6213xxFgFyHLy/h8TYzo4tsVENJQdIPyFEqXgZxE5BTEAw4qrKJnQ4BH4A6hE8gLtURQ0T6SFblR/EYfJkG5Kx6jmjfeKH+u41Q6b5ts/Y4AlsA9sHH85qBa57iZ2EKVXkGIAtAyaDEUCYZGfa4VbsmHrkeGLtGipVvF0HvBUQGAVQB9HXtY7aROwgoMWqkKBWOQvAGkEMAQpdio1cRiNODRv3UGfwLJSJClApzACbNU/QqF4II0C4liHJIfgXlQhhKSoUrEJmNcgpdbKO3EEgWDuXIzvUaBuUqXoP+XWbzHyjyZQilgTlAzpi36C02RNpo2CAE84A8BAffYmvr1zZNKxUfY2MV7V0FZad8X5pEH15FiWa4iY1eQSD0FOI9QvbwdW1FtFMsSCkAah+Lsrx0D8Qd8xa9woWaHmFVSSzgj3eOIyMbIqIFRUtyxN4i9BgrS/NR0pmMQz2H0n+oUOT95Qaz+QdKCpJabaYalFJhESJHokaWhZFUsDkzqQpPJjicX4jbEmklV2L8hsiBtAtsnlMIGDGcMtfuCGuhZHdwdu4rbZPPZKLZTDNLPp2zd0cCty1Xk/duGne1crUjnJ2cXN/g8obeoVxeRS63GVyxCHsX2ryoOz+xBpeTtu5Y6GQrogJwA5D3gD+DTP6ptsi3E8Na4h2j7OiCxkO0mCxPkFm9Sp7cVO9Ra4mrknaI5qipdy62hg0lhv71g7jFTO5+stcRX9SxY/edg+zyyshreJ+xtn6c4+OVWBm7qOOyWbslO7EJkRPM5j/G4cSu9nULXJf3aUWMIM+Inw0sF6ZAuwzssp07kL11KEluYs8HOoDU/amagOppa+vks4Ec9uDIfaOn0SDyFjKDzNq1puVq4y72RDENri7PYRnUBpdMYzj3OL4Dmmxy/QW0ErCCkfeAigAAAABJRU5ErkJggg==) no-repeat 50%;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
color: red;
|
font-size: 22rpx;
|
height: 38rpx;
|
width: 162rpx;
|
|
image {
|
width: 22rpx;
|
height: 18rpx;
|
margin: 0 8rpx 0 12rpx;
|
}
|
}
|
}
|
.g-row{
|
display: flex;
|
margin: 0 -12rpx;
|
|
view {
|
margin: 0 4rpx;
|
overflow: hidden;
|
|
.pic {
|
position: relative;
|
border-radius: 12rpx;
|
margin: 0;
|
|
.num {
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAAAXNSR0IArs4c6QAAAuFJREFUSEu9V01rFEEQfW8GFSR+oIKKoPiFiAgh5KDgQY1486bB6F2PuYiCCklAD4mIKIIoIiKaaKIIihcT4h+I4lnxKOIhXpKLxJ2S/pjZnp6endlEbAi7SXfXq3r1uqpC2CUCYnCAHBpKZKpnPVZEx4H4BES6IdwMJB3p2aV8MgMcPxWzd6IhH3pOgtEVAJ0ABIA5I+qrv9RW80h+VwDS3NOfZpcqMhIiM+eWYf7bNTRwUVshEojQ7jLFrR2d64vjK2UAEYeQyPSRYQvWMK4gzhn3AywxmN3JuEtzZiPUbE0dPo1ExiCSmPgtjTnGPAuaKofRKofsdcrksTVo/J4G0AVARWciS1OTpahdwLA3lMlDZ7CAZzmwFDEHGuCo4JSbhDLAdwdHIegDkACIaosiVa6rRP9yplCrVK3SNwe+gLIbopXph9E04T+LVOqtXobrQPYsXnfPIWL1ow6Joh06HEDRCgkZrJJ+S8CyHL7qslA1dZ2B+IqposDsUyY6QzXLmk11FNKTv6d+d5evP7NPebG/BeAiklRaamylkbF9/wiwnnOUp3v/M+CTPU5R9L2skmk7xTSl9PEuMQXGT7rKcAToeh4oQLV4KYqO8mhn+dWlBKglWezPlIfbFwdY0u8qRArKg20tAN0RoRaHTRGE2CHmKPe3ismTJxhdSJwcqjMFTbXYz981ZYn8Srm3xbheCMD7gx4EnOW3ntCQ1WxdVj0ySrm7SY1RRe+1AYeX8sZV58WbSYI8S7mzUfXBcLfIReTZ9XMUcsj43IAoMPmE5R1HKbc3lL/DOr63PqMg1U8ExH3s//mccmtd2hoDqnFzFojQpbwwEeiBTK0YEUfYP3tJj6Ryc60tbUsMxwCmEak0RXrkjDCClTuu8vzHBT10y43Vtt1XqDA4EoScpLKnJvXPYHydF369lHHE7DURU4Y72nzRpUzMA/gBYgaI3uLPqve8/H1W0YhBiPp3Qt38C/sjQ6T/3LUKAAAAAElFTkSuQmCC);
|
background-size: 100% auto;
|
position: absolute;
|
top: 0;
|
left: 0;
|
z-index: 10;
|
width: 32rpx;
|
height: 32rpx;
|
line-height: 32rpx;
|
text-align: center;
|
display: block;
|
color: #fff;
|
}
|
.van-image {
|
// position: relative;
|
display: inline-block;
|
border-radius: 12rpx;
|
height: 140rpx;
|
width: 140rpx;
|
|
image {
|
border-radius: 12rpx;
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.time {
|
text-align: center;
|
height: 36rpx;
|
background-image: linear-gradient(270deg,#ff7300,#ffb717);
|
color: #fff;
|
font-size: 20rpx;
|
line-height: 36rpx;
|
padding-left: 12rpx;
|
border-radius: 12rpx;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
.my {
|
height: 72rpx;
|
display: flex;
|
font-weight: 700;
|
justify-content: center;
|
align-items: center;
|
font-size: 26rpx;
|
color: #ff2b22;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.everysBuying-container {
|
width: 96%;
|
background-color: #FFFFFF;
|
border-radius: 12rpx;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
.box-bar-content {
|
width: 100%;
|
padding: 0 20rpx;
|
|
.title-text {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #333333;
|
margin: 20rpx 0;
|
}
|
|
.tips-txt {
|
height: 30rpx;
|
background: linear-gradient(-90deg,#7619ec,#a429f3);
|
border-radius: 15rpx 15rpx 15rpx 0px;
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
margin-left: 20rpx;
|
padding: 0 20rpx;
|
}
|
}
|
|
.goodsScroll-container {
|
width: 100%;
|
height: 340rpx;
|
|
.scrollgoods-box {
|
width: 100%;
|
height: 100%;
|
|
.scrollList-content {
|
white-space: nowrap;
|
|
.goods-items {
|
display: inline-block;
|
width: 220rpx;
|
height: 340rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
|
.items-container {
|
width: 100%;
|
height: 100%;
|
|
.image-content {
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 8rpx;
|
overflow: hidden;
|
margin-top: 10rpx;
|
}
|
|
.goodsinfo-content {
|
width: 100%;
|
height: 120rpx;
|
padding: 0 10rpx;
|
|
.goodsName-box {
|
width: 100%;
|
line-height: 34rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #444444;
|
margin-top: 5rpx;
|
}
|
|
.coupons-container {
|
width: 100%;
|
margin-top: 10rpx;
|
|
.couponbac-content {
|
width: 160rpx;
|
height: 30rpx;
|
background: url(../static/images/goods/quanbg.png) no-repeat;
|
background-size: 100% 100%;
|
border-radius: 5rpx;
|
|
.textsTip {
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #FFFFFF;
|
margin-left: 10rpx;
|
white-space: nowrap;
|
}
|
|
.coupons-value {
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FF4242;
|
white-space: nowrap;
|
margin-left: 30rpx;
|
}
|
}
|
}
|
|
.price-info-container {
|
width: 100%;
|
|
.nowPrice-content {
|
.rmbicon {
|
line-height: 34rpx;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
|
.nowprice {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
}
|
|
.oldPrice-content {
|
margin-left: 10rpx;
|
|
.oldprice {
|
line-height: 34rpx;
|
text-decoration: line-through;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.looting-container {
|
width: 100%;
|
height: 600rpx;
|
background: linear-gradient(-90deg, #7619EC, #A429F3);
|
padding: 0 22rpx;
|
|
.titlebar-container {
|
width: 100%;
|
|
.iconbar-content {
|
width: 500rpx;
|
height: 53rpx;
|
margin-top: 20rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.title-text {
|
font-size: 32rpx;
|
font-weight: bold;
|
font-style: italic;
|
color: #FFFFFF;
|
margin-bottom: 25rpx;
|
}
|
}
|
|
|
.goodscontents {
|
width: 100%;
|
background: #F7F7F7;
|
|
.scrollgoods-box {
|
width: 100%;
|
height: 360rpx;
|
margin-top: 20rpx;
|
|
.scrollList-content {
|
height: 360rpx;
|
padding-left: 10rpx;
|
white-space: nowrap;
|
|
.goods-items {
|
width: 220rpx;
|
height: 360rpx;
|
margin-right: 10rpx;
|
border-radius: 8rpx;
|
display: inline-block;
|
overflow: hidden;
|
background-color: #FFFFFF;
|
|
.items-container {
|
width: 100%;
|
height: 100%;
|
|
.image-content {
|
width: 220rpx;
|
height: 220rpx;
|
margin-top: 10rpx;
|
}
|
|
.goodsinfo-content {
|
width: 100%;
|
height: 140rpx;
|
padding: 0 10rpx;
|
|
.goodsName-box {
|
width: 100%;
|
line-height: 34rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #444444;
|
margin-top: 5rpx;
|
}
|
|
.coupons-container {
|
width: 100%;
|
margin-top: 10rpx;
|
|
.couponbac-content {
|
width: 100rpx;
|
height: 30rpx;
|
background: url(../static/images/goods/couponbac.png)no-repeat;
|
background-size: 100% 100%;
|
border-radius: 5rpx;
|
|
.coupons-value {
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FF4242;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.price-info-container {
|
width: 100%;
|
|
.nowPrice-content {
|
.rmbicon {
|
line-height: 34rpx;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
|
.nowprice {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
}
|
|
.oldPrice-content {
|
margin-left: 10rpx;
|
|
.oldprice {
|
line-height: 34rpx;
|
text-decoration: line-through;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.moreGoods-bar {
|
width: 100%;
|
height: 60rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
|
.Tiktok-container {
|
width: 100%;
|
height: 475rpx;
|
padding: 0 20rpx;
|
background-color: #FFFFFF;
|
|
.titlebar-container {
|
width: 100%;
|
height: 90rpx;
|
|
.left-content {
|
.titletext {
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #333333;
|
}
|
|
.bubble-box {
|
width: 200rpx;
|
height: 25rpx;
|
margin-left: 5rpx;
|
background: linear-gradient(-90deg, #7619EC, #A429F3);
|
border-radius: 12rpx 12rpx 12rpx 0px;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
|
.right-arrowContent {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
|
.goodsTopList {
|
width: 100%;
|
height: 340rpx;
|
|
.scrollgoods-box {
|
width: 100%;
|
height: 340rpx;
|
|
.scrollList-content {
|
height: 360rpx;
|
white-space: nowrap;
|
|
.goods-items {
|
width: 220rpx;
|
height: 340rpx;
|
border-radius: 8rpx;
|
margin-right: 10rpx;
|
overflow: hidden;
|
background-color: #FFFFFF;
|
display: inline-block;
|
|
.items-container {
|
width: 100%;
|
height: 100%;
|
|
.image-content {
|
width: 220rpx;
|
height: 220rpx;
|
position: relative;
|
|
.playback-volume {
|
position: absolute;
|
z-index: 1;
|
top: 14rpx;
|
left: 14rpx;
|
background: rgba(0, 0, 0, 0.5);
|
padding: 5rpx 15rpx;
|
border-radius: 15rpx;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
|
text {
|
font-size: 28rpx;
|
}
|
}
|
|
.suspend {
|
position: absolute;
|
top: 90;
|
left: 90;
|
width: 40rpx;
|
height: 40rpx;
|
}
|
}
|
|
.goodsinfo-content {
|
width: 100%;
|
height: 120rpx;
|
|
.goodsName-box {
|
width: 100%;
|
line-height: 34rpx;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #444444;
|
margin-top: 5rpx;
|
}
|
|
.coupons-container {
|
width: 100%;
|
margin-top: 10rpx;
|
|
.couponbac-content {
|
width: 100rpx;
|
height: 30rpx;
|
background: url(../static/images/goods/couponbac.png)no-repeat;
|
background-size: 100% 100%;
|
|
.coupons-value {
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FF4242;
|
white-space: nowrap;
|
}
|
}
|
}
|
|
.price-info-container {
|
width: 100%;
|
|
.nowPrice-content {
|
.rmbicon {
|
line-height: 34rpx;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
|
.nowprice {
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #FF4242;
|
}
|
}
|
|
.oldPrice-content {
|
margin-left: 10rpx;
|
|
.oldprice {
|
line-height: 34rpx;
|
text-decoration: line-through;
|
font-size: 20rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.goods-bottom-List {
|
width: 100%;
|
|
.bottomTypebar-container {
|
width: 100%;
|
height: 115rpx;
|
|
.typeList {
|
width: 100%;
|
height: 100%;
|
|
.type-items-container {
|
width: 150rpx;
|
height: 100%;
|
|
.mainTitle {
|
font-size: 24rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-bottom: 5rpx;
|
}
|
|
.subtitle {
|
width: 90rpx;
|
white-space: nowrap;
|
line-height: 48rpx;
|
height: 48rpx;
|
background: transparent;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 400;
|
color: #3C3D3D;
|
margin-bottom: 20rpx;
|
}
|
}
|
|
.type-items-container {
|
width: 150rpx;
|
height: 100%;
|
|
.mainTitle {
|
font-size: 30rpx;
|
font-weight: 500;
|
color: #333333;
|
margin-bottom: 5rpx;
|
}
|
|
.subtitle {
|
width: 110rpx;
|
height: 48rpx;
|
line-height: 48rpx;
|
background: transparent;
|
border-radius: 36rpx;
|
font-size: 32rpx;
|
font-weight: 500;
|
color: #3C3A39;
|
}
|
}
|
.type-container-active {
|
.mainTitle {
|
color: #FE3738;
|
}
|
|
.subtitle {
|
background: #FFD706;
|
color: #3C3A39;
|
}
|
}
|
}
|
|
.imbibition {
|
width: 100%;
|
height: 115rpx;
|
z-index: 600;
|
position: fixed;
|
background-color: #FFFFFF;
|
}
|
}
|
|
|
.bottomGoods-list-container {
|
width: 96%;
|
margin: auto;
|
flex-wrap: wrap;
|
|
.goods-items-cards {
|
width: 49%;
|
//height: 520rpx;
|
background-color: #FFFFFF;
|
border-radius: 12rpx;
|
margin-bottom: 18rpx;
|
|
.goodspic-container {
|
width: 100%;
|
height: 360rpx;
|
background-image: url(@/static/images/app/rolling.gif);
|
background-position: 0% 0%;
|
background-size: 100% 100%;
|
-webkit-animation-name: fadeInOut;
|
-webkit-animation-timing-function: ease-in-out;
|
-webkit-animation-duration: 1.5s;
|
|
image{
|
border-radius: 12rpx 12rpx 0 0;
|
|
}
|
}
|
|
.bottominfo-container {
|
width: 100%;
|
padding: 10rpx;
|
|
.trade-name-container {
|
width: 100%;
|
margin-top: 10rpx;
|
|
.typeIcon-content {
|
width: 60rpx;
|
height: 26rpx;
|
margin-right: 4rpx;
|
position: absolute;
|
margin-top: 4rpx;
|
}
|
|
.tradename {
|
flex: 1;
|
font-size: 26rpx;
|
line-height: 34rpx;
|
font-weight: 500;
|
text-indent: 2.5em;
|
color: #333333;
|
text-overflow: -o-ellipsis-lastline;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
display: -webkit-box;
|
-webkit-line-clamp: 2;
|
line-clamp: 2;
|
-webkit-box-orient: vertical;
|
}
|
}
|
|
.discounts-container {
|
width: 100%;
|
margin: 20rpx 0;
|
.left-price-box {
|
.greytxt {
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #FF4242;
|
line-height: 32rpx;
|
}
|
|
.rmb {
|
font-size: 24rpx;
|
font-weight: 600;
|
color: #FF4242;
|
line-height: 32rpx;
|
}
|
|
.pricebox {
|
font-size: 32rpx;
|
line-height: 34rpx;
|
font-weight: 600;
|
color: #FF4242;
|
}
|
}
|
|
.coupon-box {
|
width: 102rpx;
|
height: 30rpx;
|
background: url(../static/images/goods/couponbac.png)no-repeat;
|
background-size: 100% 100%;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FF4242;
|
}
|
|
.back-box {
|
width: 100rpx;
|
height: 30rpx;
|
background: linear-gradient(-90deg, #7619EC, #A429F3);
|
border-radius: 5rpx;
|
margin-left: 8rpx;
|
font-size: 20rpx;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
}
|
|
.price-saleNums-container {
|
width: 100%;
|
|
.shopname {
|
.shop {
|
font-size: 22rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 32rpx;
|
}
|
}
|
|
.right-price-box {
|
font-size: 22rpx;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
@-webkit-keyframes fadeInOut {
|
0% {
|
opacity:0;
|
}
|
25% {
|
opacity:0.5;
|
}
|
50% {
|
opacity: 1;
|
}
|
75% {
|
opacity:1;
|
}
|
}
|
</style>
|
