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.
1233 lines
33 KiB
1233 lines
33 KiB
{php include wl_template('common/header');}
|
|
|
|
<div class="page-group">
|
|
<div class="page page-current" style='min-height:100%;'>
|
|
{php include wl_template('grouponhtml/footerbar');}
|
|
<div id="app">
|
|
<div class="list" style="display:none;" v-show="loadBf">
|
|
<div class="list-main">
|
|
<div class="buttons-tab" v-if="cateid !== 0">
|
|
<a href="#tab1" class="tab-link button" @click="getnav(0, 1)" :class="{active: (cateid == 0)}">全部</a>
|
|
<a href="#tab1" class="tab-link button" v-for="(item, key) in datas.oricate" :key="key" @click="getnav(item.id, 1)" :class="{active: (cateid == item.id)}">{{ item.name }}</a>
|
|
</div>
|
|
<div class="act-swiper" v-if="datas.adv != null && datas.adv != '' && cateid == 0">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(item, key) in datas.adv" :key="key"><a :href="item.link"><img :src="item.thumb"></a></div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
<div class="list-nav" v-if="datas.cate.lists != null && datas.cate.lists != '' && cateid == 0">
|
|
<div class="list-nav-swiper">
|
|
<div class="list-nav-swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(item, key) in datas.cate.lists" :key="key">
|
|
<!--
|
|
<div class="list-nav-i" v-for="(items, index) in item" :key="index" :style="'width:'+datas.cate.width+';'" @click="getnav(items.id, 1)" :class="{active: (cateid == items.id)}" v-if="!(datas.basic.catelevel == 1)">
|
|
<div class="list-nav-i-t">
|
|
<div class="list-nav-i-t-icon" :style="'background-image:url('+items.thumb+');'"></div>
|
|
</div>
|
|
<div class="list-nav-i-c">{{ items.name }}</div>
|
|
</div>
|
|
-->
|
|
<div class="list-nav-i" v-for="(items, index) in item" :key="index" :style="'width:'+datas.cate.width+';'" :class="{active: (cateid == items.id)}">
|
|
<a :href="getCateUrl(items.id)">
|
|
<div class="list-nav-i-t">
|
|
<div class="list-nav-i-t-icon" :style="'background-image:url('+items.thumb+');'"></div>
|
|
</div>
|
|
<div class="list-nav-i-c">{{ items.name }}</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-flash" v-if="datas.rushgood != null && datas.rushgood != ''">
|
|
<div>
|
|
<div class="list-flash-t" v-if="datas.rushgood.length == 1 && cateid == 0">
|
|
<div class="list-flash-t-t1"><i class="icon iconfont icon-lightfill"></i>{{ datas.basic.rushtitle }}</div>
|
|
<div class="list-flash-t-t2">
|
|
距结束仅剩<i>{{ datas.ctTime.d }}</i>天<i>{{ datas.ctTime.h }}</i>时<i>{{ datas.ctTime.m }}</i>分<i>{{ datas.ctTime.s }}</i>秒
|
|
</div>
|
|
<div class="list-flash-t-t3" v-for="(item, key) in datas.rushgood" :key="key">
|
|
<a :href="getQiangGouUrl(item.id)">
|
|
<div class="list-flash-t-t3-l" :style="'background-image:url('+item.thumb+');'"></div>
|
|
<div class="list-flash-t-t3-r">
|
|
<div class="list-flash-t-t3-r-t1">
|
|
{{ item.name }}
|
|
</div>
|
|
<div class="list-flash-t-t3-r-t2">
|
|
<div>已售</div>
|
|
<div class="list-flash-t-t3-r-t2-line">
|
|
<div class="list-flash-t-t3-r-t2-line-l1"></div>
|
|
<div class="list-flash-t-t3-r-t2-line-l2" :style="'width: '+Math.round((item.buynum / item.num
|
|
) * 100)+'%;'"></div>
|
|
</div>
|
|
<div>{{ Math.round((item.buynum / item.num
|
|
) * 100) }}%</div>
|
|
</div>
|
|
<div class="list-flash-t-t3-r-t3">
|
|
<div class="list-flash-t-t3-r-t3-l">
|
|
<span>￥{{ item.price }}</span><em v-if="!(item.vipstatus == 1)">￥{{ item.oldprice }}</em><i v-if="item.vipstatus == 1">一卡通</i><b v-if="item.vipstatus == 1">￥{{ item.vipprice }}</b>
|
|
</div>
|
|
<div class="list-flash-t-t3-r-t3-r">
|
|
<span>抢购</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="list-flash-c" v-if="datas.rushgood.length > 1 && cateid == 0">
|
|
<div class="list-flash-c-t1"><i class="icon iconfont icon-lightfill"></i>{{ datas.basic.rushtitle }}<span><em>{{ datas.ctTime.d }}</em>天<em>{{ datas.ctTime.h }}</em>:<em>{{ datas.ctTime.m }}</em>:<em>{{ datas.ctTime.s }}</em></span></div>
|
|
<div class="list-flash-c-t2">
|
|
<div class="list-flash-swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="(item, key) in datas.rushgood" :key="key">
|
|
<div class="list-flash-c-t2-i">
|
|
<a :href="getQiangGouUrl(item.id)">
|
|
<div class="list-flash-c-t2-i-t" :style="'background-image:url('+item.thumb+');'"></div>
|
|
<div class="list-flash-c-t2-i-c">
|
|
<div><span>秒杀价</span></div><div><i>￥</i>{{ item.price }}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-img" v-if="datas.cube != null && datas.cube != '' && cateid == 0">
|
|
<div :class="'list-img-list list-img-list'+listImgLength+''">
|
|
<div class="list-img-i" v-for="(item, key) in datas.cube" :key="key"><a :href="item.link"><img :src="item.thumb"></a></div>
|
|
</div>
|
|
</div>
|
|
<div v-if="datas.basic.community != null && datas.basic.community != '' && cateid == 0">
|
|
<div class="community">
|
|
<div class="community-l" :style="'background-image:url('+datas.basic.community.img+')'"></div>
|
|
<div class="community-c">
|
|
<h1>{{ datas.basic.community.name }}</h1>
|
|
<p>{{ datas.basic.community.desc }}</p>
|
|
</div>
|
|
<div class="community-r"><a href="javascript:;" @click="communityShow()">添加</a></div>
|
|
</div>
|
|
<div class="community-mask" v-show="community"></div>
|
|
<div class="community-pop-ani" v-show="community" :class="{communityani: community}">
|
|
<div class="community-close" @click="communityHide()"></div>
|
|
<div class="community-pop">
|
|
<div class="community-pop-t1">
|
|
<div class="community-pop-t1-l" :style="'background-image:url('+datas.basic.community.img+')'"></div>
|
|
<div class="community-pop-t1-r">{{ datas.basic.community.name }}</div>
|
|
</div>
|
|
<div class="community-pop-t2">
|
|
<img :src="datas.basic.community.qrcode">
|
|
</div>
|
|
<div class="community-pop-t3">
|
|
长按识别二维码
|
|
</div>
|
|
<div class="community-pop-t4" @click="communityHide()">
|
|
我知道了
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-item-d" :class="{listItemDStl: cateid !== 0}">
|
|
<div class="list-item-t" v-if="cateid == 0">
|
|
<h1><i :style="'background-image:url('+datas.basic.titleimg+')'"></i>{{ datas.basic.titlename }}</h1>
|
|
<p>{{ datas.basic.titledis }}</p>
|
|
</div>
|
|
c
|
|
<div class="list-i" v-for="(item, key) in datas.groupon" :key="key">
|
|
<a :href="getDtlUrl(item.id)">
|
|
<div class="list-i-t2">
|
|
<div class="list-i-t2-info">
|
|
<div class="list-i-t2-info-l" :style="'background-image:url('+item.thumb+')'"></div>
|
|
<div class="list-i-t2-info-r">
|
|
<h1>{{ item.name }}</h1>
|
|
<h4>{{ item.storename }}</h4>
|
|
<h2><span>{{ (item.price / item.oldprice * 10).toFixed(1) }}折</span><i v-for="(itemtag, index) in item.listtag" :key="index" :style="'color:'+itemtag.textcolor+';border:.03rem solid '+itemtag.textcolor+';background-color:'+itemtag.bgcolor+';'">{{ itemtag.tagcontent }}</i></h2>
|
|
<div class="list-i-t2-info-r-b">
|
|
<div class="list-i-t2-info-r-b-d">
|
|
<div class="list-i-t2-info-r-b-l">
|
|
<h5><span>￥<em>{{ item.price }}</em></span></h5>
|
|
<h6>
|
|
<div v-if="!(item.vipstatus == 1)"><b>￥{{ item.oldprice }}</b></div>
|
|
<div v-if="item.vipstatus == 1"><i>会员</i><span>￥<em>{{ item.vipprice }}</em></span></div>
|
|
</h6>
|
|
</div>
|
|
<div class="list-i-t2-info-r-b-r">
|
|
已售{{ item.salenum }}份
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sc-loading" v-if="loading"><i><img src="{URL_MODULE}plugin/activity/app/resource/images/loading.gif"></i><span> 加载中</span></div>
|
|
<li style='list-style-type:none;' v-if="loadOver"><div style='padding-top:1px;'><div class="weui-loadmore weui-loadmore_line"><span class="weui-loadmore__tips" style="background-color: #efeff4;">暂无更多数据</span></div></div>
|
|
</li>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
loadBf: false,
|
|
loading: false,
|
|
loadingtag: false,
|
|
loadOver: false,
|
|
cateid: 0,
|
|
pindex: 1,
|
|
community: false,
|
|
datas: {
|
|
ctTime: {
|
|
timestamp: '',
|
|
d: '',
|
|
h: '',
|
|
m: '',
|
|
s: ''
|
|
},
|
|
cate: {
|
|
width: '',
|
|
lists: []
|
|
},
|
|
basic: [],
|
|
oricate: [],
|
|
adv: [],
|
|
cube: [],
|
|
rushgood: [],
|
|
groupon: []
|
|
}
|
|
},
|
|
created: function () {
|
|
this.$http.get(common.createUrl('groupon/grouponapp/grouponInitApi')).then(
|
|
function (response) {
|
|
var the = this;
|
|
the.datas.basic = response.data.data;
|
|
//console.log(the.datas.basic)
|
|
the.datas.oricate = response.data.data.cate;
|
|
the.datas.adv = response.data.data.adv;
|
|
the.datas.cube = response.data.data.cube;
|
|
the.datas.rushgood = response.data.data.rushgood;
|
|
the.datas.ctTime.timestamp = parseInt(response.data.data.sytime) > 0 ? parseInt(response.data.data.sytime) : 0
|
|
var runTime = parseInt(the.datas.ctTime.timestamp)
|
|
var year = Math.floor(runTime / 86400 / 365)
|
|
runTime = runTime % (86400 * 365)
|
|
var month = Math.floor(runTime / 86400 / 30)
|
|
runTime = runTime % (86400 * 30)
|
|
var day = parseInt(Math.floor(the.datas.ctTime.timestamp * 1000 / 86400000))
|
|
day < 10 ? the.datas.ctTime.d = '0'+day : the.datas.ctTime.d = day
|
|
runTime = runTime % 86400
|
|
var hour = Math.floor(runTime / 3600)
|
|
hour < 10 ? the.datas.ctTime.h = '0'+hour : the.datas.ctTime.h = hour
|
|
runTime = runTime % 3600
|
|
var minute = Math.floor(runTime / 60)
|
|
minute < 10 ? the.datas.ctTime.m = '0'+minute : the.datas.ctTime.m = minute
|
|
runTime = runTime % 60
|
|
var second = runTime
|
|
second < 10 ? the.datas.ctTime.s = '0'+second : the.datas.ctTime.s = second
|
|
setInterval(function () {
|
|
if(the.datas.ctTime.timestamp > 0){
|
|
the.datas.ctTime.timestamp += -1
|
|
}
|
|
var runTime = parseInt(the.datas.ctTime.timestamp)
|
|
var year = Math.floor(runTime / 86400 / 365)
|
|
runTime = runTime % (86400 * 365)
|
|
var month = Math.floor(runTime / 86400 / 30)
|
|
runTime = runTime % (86400 * 30)
|
|
var day = parseInt(Math.floor(the.datas.ctTime.timestamp * 1000 / 86400000))
|
|
day < 10 ? the.datas.ctTime.d = '0'+day : the.datas.ctTime.d = day
|
|
runTime = runTime % 86400
|
|
var hour = Math.floor(runTime / 3600)
|
|
hour < 10 ? the.datas.ctTime.h = '0'+hour : the.datas.ctTime.h = hour
|
|
runTime = runTime % 3600
|
|
var minute = Math.floor(runTime / 60)
|
|
minute < 10 ? the.datas.ctTime.m = '0'+minute : the.datas.ctTime.m = minute
|
|
runTime = runTime % 60
|
|
var second = runTime
|
|
second < 10 ? the.datas.ctTime.s = '0'+second : the.datas.ctTime.s = second
|
|
},1000);
|
|
if(response.data.data.cate !== null && response.data.data.cate !== 'undefined'){
|
|
if(response.data.data.catenum == 5 || response.data.data.catenum == 10){
|
|
the.datas.cate.width = '20%'
|
|
}else{
|
|
the.datas.cate.width = '25%'
|
|
}
|
|
var listsLength = Math.ceil(response.data.data.cate.length / response.data.data.catenum);
|
|
for(var i=0; i<listsLength; i++){
|
|
var arr = []
|
|
var arrIndex = i*response.data.data.catenum;
|
|
for(var n=arrIndex; n<response.data.data.catenum * (i+1) && n<response.data.data.cate.length; n++){
|
|
arr.push(response.data.data.cate[n])
|
|
}
|
|
this.datas.cate.lists.push(arr);
|
|
}
|
|
}
|
|
this.$nextTick(function () {
|
|
var swiper = new Swiper('.swiper-container', {
|
|
speed:500,
|
|
autoplay: 3000,
|
|
autoplayDisableOnInteraction : false,
|
|
setWrapperSize:true,
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: true
|
|
});
|
|
var listNavSwiper = new Swiper('.list-nav-swiper-container', {
|
|
autoplayDisableOnInteraction : false,
|
|
setWrapperSize:true,
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: true
|
|
});
|
|
var listFlashSwiper = new Swiper('.list-flash-swiper-container', {
|
|
slidesPerView : 4,
|
|
slidesPerGroup : 4,
|
|
autoplayDisableOnInteraction : false,
|
|
setWrapperSize:true,
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: true
|
|
})
|
|
});
|
|
|
|
this.loadBf = true;
|
|
|
|
//List数据
|
|
this.$http.get(common.createUrl('groupon/grouponapp/grouponListApi')).then(
|
|
function(response){
|
|
this.datas.groupon = response.data.data.activity
|
|
// /console.log(this.datas.groupon)
|
|
}
|
|
);
|
|
window.addEventListener('scroll', this.loadingMore);
|
|
}
|
|
);
|
|
},
|
|
methods: {
|
|
getCateUrl: function (cid) {
|
|
return common.createUrl('groupon/grouponapp/grouponcate',{'cid':cid})
|
|
},
|
|
getQiangGouUrl: function (cid) {
|
|
return common.createUrl('rush/home/detail',{'id':cid})
|
|
},
|
|
getDtlUrl: function (cid) {
|
|
return common.createUrl('groupon/grouponapp/groupondetail',{'cid':cid})
|
|
},
|
|
communityShow: function (cid) {
|
|
this.community = true
|
|
},
|
|
communityHide: function (cid) {
|
|
this.community = false
|
|
},
|
|
getnav: function (cateid, pindex) {
|
|
this.cateid = cateid
|
|
this.loadingtag = true
|
|
this.loadOver = false
|
|
this.pindex = pindex;
|
|
this.$http.get(common.createUrl('groupon/grouponapp/grouponListApi',{'cateid':this.cateid,'pindex':this.pindex})).then(
|
|
function (response) {
|
|
this.datas.groupon = response.data.data.activity
|
|
this.loadingtag = false;
|
|
if(this.datas.groupon == null || this.datas.groupon == 'undefined'){
|
|
this.loadOver = true
|
|
}else{
|
|
if(this.datas.groupon.length == 0){
|
|
this.loadOver = true
|
|
}
|
|
}
|
|
}
|
|
)
|
|
},
|
|
loadingMore: function () {
|
|
var sclTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
|
|
var clientHeight = document.body.clientHeight
|
|
if(!this.loading && (sclTop + clientHeight >= document.documentElement.scrollHeight)) {
|
|
if (!this.loadOver) {
|
|
this.loading = true
|
|
}
|
|
this.pindex++;
|
|
this.$http.get(common.createUrl('groupon/grouponapp/grouponListApi', {
|
|
'cateid': this.cateid,
|
|
'pindex': this.pindex
|
|
})).then(
|
|
function (response) {
|
|
var grouponMore = response.data.data.activity;
|
|
if(grouponMore.length ==0 ){
|
|
this.loadOver = true
|
|
}
|
|
for (var i=0; i<grouponMore.length; i++) {
|
|
this.datas.groupon.push(grouponMore[i])
|
|
}
|
|
this.loading = false
|
|
}
|
|
)
|
|
}
|
|
},
|
|
ctTime: function () {
|
|
this.datas.ctTime.timestamp += -1000
|
|
}
|
|
},
|
|
computed: {
|
|
listImgLength: function () {
|
|
if(this.datas.cube == null || this.datas.cube == 'undefined'){
|
|
return 0
|
|
}else{
|
|
return this.datas.cube.length
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
body {
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
overflow: auto;
|
|
background-color: #efeff4;
|
|
}
|
|
a {
|
|
color: #333;
|
|
}
|
|
a:active {
|
|
color: #333;
|
|
}
|
|
.bar-tab {
|
|
position: fixed;
|
|
}
|
|
#app {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding-bottom: 2.5rem;
|
|
}
|
|
.page, .page-group {
|
|
position: relative;
|
|
overflow: auto;
|
|
height: auto;
|
|
}
|
|
.buttons-tab {
|
|
width: 100%;
|
|
border-bottom: .03rem solid #eee;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
overflow-x: auto;
|
|
}
|
|
.buttons-tab:after {
|
|
background-color: transparent;
|
|
}
|
|
.buttons-tab .button {
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
font-size: .7rem;
|
|
-webkit-flex: 0 0 22%;
|
|
-ms-flex: 0 0 22%;
|
|
flex: 0 0 22%;
|
|
}
|
|
.buttons-tab .button.active {
|
|
color: #ff2726;
|
|
border-color: #ff2726;
|
|
}
|
|
.list-nav {
|
|
background-color: #fff;
|
|
}
|
|
.list-nav-swiper {
|
|
width: 100%;
|
|
}
|
|
.list-nav-swiper .swiper-slide {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.list-nav-swiper .swiper-pagination-bullets {
|
|
bottom: 4px;
|
|
}
|
|
.list-nav .active .list-nav-i-c {
|
|
color: #ff2726;
|
|
}
|
|
.list-nav-i {
|
|
padding: .75rem 0 0;
|
|
}
|
|
.list-nav-i-t {
|
|
padding: 0 .7rem;
|
|
}
|
|
.list-nav-i-t-icon {
|
|
width: 42px;
|
|
height: 42px;
|
|
margin: 0 auto 4px;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
.list-nav-i-c {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .65rem;
|
|
color: #333;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.list-nav-swiper-container {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
padding-bottom: .55rem;
|
|
}
|
|
.list-flash {
|
|
padding: 0 .7rem;
|
|
background-color: #fff;
|
|
}
|
|
.list-flash-t {
|
|
margin-top: .5rem;
|
|
padding: .7rem 0;
|
|
}
|
|
.list-flash-t-t1 {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .75rem;
|
|
color: #FE433F;
|
|
text-align: center;
|
|
}
|
|
.list-flash-t-t1 i {
|
|
width: .75rem;
|
|
height: .75rem;
|
|
line-height: .75rem;
|
|
font-size: .6rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #FE433F;
|
|
display: inline-block;
|
|
margin-right: .15rem;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
vertical-align: .05rem;
|
|
}
|
|
.list-flash-t-t2 {
|
|
height: .9rem;
|
|
line-height: .9rem;
|
|
color: #999;
|
|
font-size: .6rem;
|
|
text-align: center;
|
|
margin-top: .7rem;
|
|
}
|
|
.list-flash-t-t2 i{
|
|
color: #000;
|
|
font-size: .7rem;
|
|
font-style: normal;
|
|
background-color: #333;
|
|
color: #fff;
|
|
margin: 0 .15rem;
|
|
padding: .05rem .15rem;
|
|
border-radius: 3px;
|
|
}
|
|
.list-flash-t-t3 {
|
|
margin-top: .5rem;
|
|
position: relative;
|
|
}
|
|
.list-flash-t-t3-l {
|
|
width: 6.8rem;
|
|
height: 5rem;
|
|
background-position: center;
|
|
background-size: cover;
|
|
border-radius: 3px;
|
|
position: absolute;
|
|
}
|
|
.list-flash-t-t3-r {
|
|
height: 5rem;
|
|
padding-left: 7.3rem;
|
|
}
|
|
.list-flash-t-t3-r-t1 {
|
|
height: 2.1rem;
|
|
line-height: 1.05rem;
|
|
color: #666;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
.list-flash-t-t3-r-t2 {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
color: #999;
|
|
font-size: .6rem;
|
|
margin: .34rem 0;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
.list-flash-t-t3-r-t2 div {
|
|
-webkit-flex-grow: 0;
|
|
flex-grow: 0;
|
|
}
|
|
.list-flash-t-t3-r-t2 div:first-child {
|
|
padding-right: .5rem;
|
|
}
|
|
.list-flash-t-t3-r-t2 div:last-child {
|
|
padding-left: .15rem;
|
|
}
|
|
.list-flash-t-t3-r-t2 .list-flash-t-t3-r-t2-line {
|
|
-webkit-flex-grow: 1;
|
|
flex-grow: 1;
|
|
position: relative;
|
|
}
|
|
.list-flash-t-t3-r-t2-line-l1 {
|
|
width: 100%;
|
|
height: .15rem;
|
|
background-color: #eee;
|
|
position: absolute;
|
|
top: calc(50% - 0.0525rem);
|
|
-webkit-border-radius: .15rem;
|
|
border-radius: .15rem;
|
|
}
|
|
.list-flash-t-t3-r-t2-line-l2 {
|
|
width: 100%;
|
|
height: .15rem;
|
|
background-color: #FE433F;
|
|
position: absolute;
|
|
top: calc(50% - 0.0525rem);
|
|
z-index: 1;
|
|
-webkit-border-radius: .15rem;
|
|
border-radius: .15rem;
|
|
}
|
|
.list-flash-t-t3-r-t3 {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.list-flash-t-t3-r-t3-l {
|
|
font-size: .6rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-webkit-flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.list-flash-t-t3-r-t3-l span {
|
|
color: #FE433F;
|
|
font-size: .7rem;
|
|
}
|
|
.list-flash-t-t3-r-t3-l em {
|
|
color: #999;
|
|
font-style: normal;
|
|
margin-left: .1rem;
|
|
}
|
|
.list-flash-t-t3-r-t3-l i {
|
|
color: #FFED7E;
|
|
font-size: .6rem;
|
|
font-style: normal;
|
|
margin-left: .2rem;
|
|
padding: 0 .25rem;
|
|
background-color: #414141;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.list-flash-t-t3-r-t3-l i:after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-width: .3rem;
|
|
border-style: solid;
|
|
border-color: transparent transparent #414141 transparent;
|
|
position: absolute;
|
|
right: -.3rem;
|
|
bottom: 0;
|
|
}
|
|
.list-flash-t-t3-r-t3-l b {
|
|
color: #333;
|
|
font-weight: normal;
|
|
margin-left: .1rem;
|
|
}
|
|
.list-flash-t-t3-r-t3-r {
|
|
padding-left: .3rem;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.list-flash-t-t3-r-t3-r span {
|
|
color: #fff;
|
|
font-size: .7rem;
|
|
padding: .2rem .4rem;
|
|
background-color: #FE433F;
|
|
border-radius: 3px;
|
|
}
|
|
.list-flash-c {
|
|
padding-top: .7rem;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.list-flash-c-t1 {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .75rem;
|
|
color: #FE433F;
|
|
text-align: center;
|
|
}
|
|
.list-flash-c-t1 i {
|
|
width: .75rem;
|
|
height: .75rem;
|
|
line-height: .75rem;
|
|
font-size: .6rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #FE433F;
|
|
display: inline-block;
|
|
margin-right: .15rem;
|
|
-webkit-border-radius: 50%;
|
|
border-radius: 50%;
|
|
vertical-align: .05rem;
|
|
}
|
|
.list-flash-c-t1 span {
|
|
color: #999;
|
|
font-size: .6rem;
|
|
margin-left: .3rem;
|
|
}
|
|
.list-flash-c-t1 span em {
|
|
color: #000;
|
|
font-size: .6rem;
|
|
font-style: normal;
|
|
background-color: #333;
|
|
color: #fff;
|
|
margin: 0 .15rem;
|
|
padding: .05rem .15rem;
|
|
border-radius: 3px;
|
|
}
|
|
.list-flash-c-t2 {
|
|
margin-top: .7rem;
|
|
overflow: hidden;
|
|
}
|
|
.list-flash-c-t2-i {
|
|
width: calc((100vw - 1.4rem - 25px) / 4);
|
|
}
|
|
.list-flash-c-t2-i-t {
|
|
height: calc((100vw - 1.4rem - 25px) / 4);
|
|
background-position: center;
|
|
background-size: cover;
|
|
border-radius: 3px;
|
|
}
|
|
.list-flash-c-t2-i-c {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
color: #FE433F;
|
|
font-size: .5rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
.list-flash-c-t2-i-c div:first-child {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-webkit-flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
.list-flash-c-t2-i-c div:last-child {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.list-flash-c-t2-i-c span {
|
|
font-size: .4rem;
|
|
border: .02rem solid #df231c;
|
|
border-radius: 1px;
|
|
}
|
|
.list-flash-c-t2-i-c i {
|
|
font-size: .3rem;
|
|
font-style: normal;
|
|
}
|
|
.list-flash-swiper-container {
|
|
padding-bottom: .7rem;
|
|
position: relative;
|
|
}
|
|
.list-flash-swiper-container .swiper-pagination {
|
|
bottom: 4px;
|
|
}
|
|
.list-flash-c-t2 .swiper-slide {
|
|
width: calc((100vw - 1.4rem - 15px) / 4)!important;
|
|
margin-left: 5px;
|
|
}
|
|
.list-flash-c-t2 .swiper-slide:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.list-img {
|
|
margin-top: .5rem;
|
|
background-color: #fff;
|
|
}
|
|
.list-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.list-img-list .list-img-i {
|
|
float: left;
|
|
}
|
|
.list-img-list:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.list-img-list1 .list-img-i {
|
|
width: 100%;
|
|
height: 50vw;
|
|
}
|
|
.list-img-list2 .list-img-i {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
}
|
|
.list-img-list3 .list-img-i:first-child {
|
|
width: calc(50vw);
|
|
height: calc(50vw);
|
|
}
|
|
.list-img-list3 .list-img-i:nth-child(2), .list-img-list3 .list-img-i:nth-child(3) {
|
|
width: 50vw;
|
|
height: 25vw;
|
|
}
|
|
.list-img-list4 .list-img-i:first-child {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
}
|
|
.list-img-list4 .list-img-i:nth-child(2) {
|
|
width: 50vw;
|
|
height: 25vw;
|
|
}
|
|
.list-img-list4 .list-img-i:nth-child(3), .list-img-list4 .list-img-i:nth-child(4) {
|
|
width: 25vw;
|
|
height: 25vw;
|
|
}
|
|
.list-img-list5 .list-img-i:first-child {
|
|
width: 50vw;
|
|
height: 50vw;
|
|
}
|
|
.list-img-list5 .list-img-i:nth-child(2), .list-img-list5 .list-img-i:nth-child(3), .list-img-list5 .list-img-i:nth-child(4), .list-img-list5 .list-img-i:nth-child(5) {
|
|
width: 25vw;
|
|
height: 25vw;
|
|
}
|
|
.list-img-list6 .list-img-i {
|
|
width: 50vw;
|
|
height: 25vw;
|
|
}
|
|
.list-item-d {
|
|
margin-top: .5rem;
|
|
}
|
|
.listItemDStl {
|
|
margin-top: 2.03rem;
|
|
}
|
|
.list-item-t {
|
|
padding: .5rem 0;
|
|
background-color: #fff;
|
|
}
|
|
.list-item-t h1 {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .75rem;
|
|
color: #FE433F;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
.list-item-t h1 i {
|
|
width: .75rem;
|
|
height: .75rem;
|
|
margin-right: .15rem;
|
|
vertical-align: -0.1rem;
|
|
background-position: center;
|
|
background-size: cover;
|
|
display: inline-block;
|
|
}
|
|
.list-item-t p {
|
|
line-height: 1.05rem;
|
|
color: #999;
|
|
font-size: .65rem;
|
|
text-align: center;
|
|
margin-top: .1rem;
|
|
padding: 0 .7rem;
|
|
}
|
|
.list-i {
|
|
padding: 0 .7rem;
|
|
background-color: #fff;
|
|
margin-top: 0;
|
|
}
|
|
.list-i-t1 {
|
|
padding: .35rem 0;
|
|
font-size: .6rem;
|
|
border-bottom: 1px solid #f9f9f9;
|
|
}
|
|
.list-i-t1 i {
|
|
font-size: .805rem;
|
|
color: #666;
|
|
margin-top: -0.14rem;
|
|
margin-right: .14rem;
|
|
float: left;
|
|
}
|
|
.list-i:first-child .list-i-t2 {
|
|
border-top: none;
|
|
}
|
|
.list-i-t2 {
|
|
border-top: 1px solid #f9f9f9;
|
|
}
|
|
.list-i-t2-info {
|
|
padding: .7rem 0;
|
|
border-top: 1px solid #f9f9f9;
|
|
}
|
|
.list-i-t2-info:first-child {
|
|
border-top: none;
|
|
}
|
|
.list-i-t2-info-l {
|
|
width: 4.5rem;
|
|
height: 4.5rem;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 4px;
|
|
}
|
|
.list-i-t2-info-r {
|
|
min-height: 4.5rem;
|
|
margin-left: 5rem;
|
|
position: relative;
|
|
}
|
|
.list-i-t2-info-r h1 {
|
|
color: #333;
|
|
font-weight: 600;
|
|
font-size: .75rem;
|
|
max-height: 2rem;
|
|
line-height: 1.05rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
margin: 0;
|
|
}
|
|
.list-i-t2-info-r h4 {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .6rem;
|
|
color: #6B6B6B;
|
|
font-weight: normal;
|
|
margin-top: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.list-i-t2-info-r h2 {
|
|
font-weight: normal;
|
|
font-size: .6rem;
|
|
color: #666;
|
|
margin-top: -0.1rem;
|
|
}
|
|
.list-i-t2-info-r h2:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.list-i-t2-info-r h2 span {
|
|
color: #df231c;
|
|
font-size: .6rem;
|
|
margin: .25rem .25rem 0 0;
|
|
padding: 0 .2rem;
|
|
background-color: #FFF5F4;
|
|
border: .03rem solid #ECD7D6;
|
|
border-radius: 2px;
|
|
float: left;
|
|
}
|
|
.list-i-t2-info-r h2 i {
|
|
font-size: .6rem;
|
|
font-style: normal;
|
|
margin: .25rem .25rem 0 0;
|
|
padding: 0 .2rem;
|
|
background-color: #f3f3f3;
|
|
border: .03rem solid #999;
|
|
border-radius: 2px;
|
|
float: left;
|
|
}
|
|
.list-i-t2-info-r-b-d .list-i-t2-info-r-b-s2 {
|
|
color: #999;
|
|
font-size: .6rem;
|
|
text-decoration: line-through;
|
|
}
|
|
.list-i-t2-info-r-b-d {
|
|
width: 100%;
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .7rem;
|
|
color: #ff2726;
|
|
margin-top: .15rem;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.list-i-t2-info-r-b-l {
|
|
-webkit-flex-shrink: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.list-i-t2-info-r-b-l:after {
|
|
content: "";
|
|
display: block;
|
|
clear: both;
|
|
}
|
|
.list-i-t2-info-r-b-l h5 {
|
|
font-size: .6rem;
|
|
font-weight: normal;
|
|
float: left;
|
|
}
|
|
.list-i-t2-info-r-b-l h5 span {
|
|
color: #ff2726;
|
|
}
|
|
.list-i-t2-info-r-b-l h5 span em {
|
|
font-style: normal;
|
|
font-size: .75rem;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 {
|
|
font-size: .6rem;
|
|
font-weight: normal;
|
|
float: left;
|
|
margin-left: .5rem;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 b {
|
|
color: #888;
|
|
font-size: .6rem;
|
|
text-decoration: line-through;
|
|
font-weight: normal;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 i {
|
|
color: #FFED7E;
|
|
font-size: .6rem;
|
|
font-style: normal;
|
|
vertical-align: 2px;
|
|
padding: 0 .25rem;
|
|
position: relative;
|
|
background-color: #414141;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 i:after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-width: .3rem;
|
|
border-style: solid;
|
|
border-color: transparent transparent #414141 transparent;
|
|
position: absolute;
|
|
right: -.3rem;
|
|
bottom: 0;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 span {
|
|
color: #ff2726;
|
|
margin-left: .25rem;
|
|
}
|
|
.list-i-t2-info-r-b-l h6 span em {
|
|
font-style: normal;
|
|
font-size: .75rem;
|
|
}
|
|
.list-i-t2-info-r-b-r {
|
|
color: #999;
|
|
font-size: .6rem;
|
|
-webkit-flex-shrink: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.sc-loading {
|
|
font-size: .6rem;
|
|
color: #969696;
|
|
line-height: .5rem;
|
|
text-align: center;
|
|
padding: .35rem 0;
|
|
}
|
|
.sc-loading i {
|
|
width: .8rem;
|
|
display: inline-block;
|
|
}
|
|
.sc-loading i img {
|
|
width: 100%;
|
|
vertical-align: -0.25rem;
|
|
}
|
|
.sc-loading span {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
.community {
|
|
padding: .75rem;
|
|
background-color: #fff;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: .5rem;
|
|
margin-bottom: .5rem;
|
|
}
|
|
.community-l {
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
background-position: center;
|
|
background-size: cover;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
}
|
|
.community-c {
|
|
padding: 0 .5rem;
|
|
-webkit-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.community-c h1 {
|
|
color: #333;
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
font-size: .75rem;
|
|
font-weight: normal;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.community-c p {
|
|
height: 1.05rem;
|
|
line-height: 1.05rem;
|
|
color: #999;
|
|
font-size: .65rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.community-r {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.community-r a {
|
|
color: #fff;
|
|
font-size: .7rem;
|
|
padding: .15rem .8rem;
|
|
background-color: #FE433F;
|
|
display: inline-block;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
}
|
|
.community-mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 9999;
|
|
background-color: rgba(0,0,0,.5);
|
|
}
|
|
.community-close {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10000;
|
|
}
|
|
.community-pop-ani {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10000;
|
|
}
|
|
@keyframes communityani{
|
|
from {
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
}
|
|
to {
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
.communityani {
|
|
animation: communityani .3s;
|
|
}
|
|
.communityanirev {
|
|
animation: communityani .3s reverse;
|
|
}
|
|
.community-pop {
|
|
width: 13rem;
|
|
-webkit-transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 10001;
|
|
background-color: #fff;
|
|
-webkit-border-radius: 6px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.community-pop-t1 {
|
|
padding: .75rem 1rem;
|
|
}
|
|
.community-pop-t1-l {
|
|
width: 2.1rem;
|
|
height: 2.1rem;
|
|
background-position: center;
|
|
background-size: cover;
|
|
-webkit-border-radius: 5px;
|
|
border-radius: 5px;
|
|
position: absolute;
|
|
}
|
|
.community-pop-t1-r {
|
|
height: 2.1rem;
|
|
line-height: 2.1rem;
|
|
color: #333;
|
|
font-size: .7rem;
|
|
font-weight: 600;
|
|
padding-left: 2.6rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.community-pop-t2 {
|
|
margin: 0 .75rem;
|
|
border: 1px solid #d9d9d9;
|
|
}
|
|
.community-pop-t2 img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.community-pop-t3 {
|
|
color: #666;
|
|
font-size: .7rem;
|
|
text-align: center;
|
|
margin: .25rem .75rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.community-pop-t4 {
|
|
color: #666;
|
|
font-size: .7rem;
|
|
text-align: center;
|
|
margin-top: .75rem;
|
|
padding: .5rem .75rem;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
.community-pop-t4:active {
|
|
background-color: #f3f3f3;
|
|
}
|
|
</style>
|
|
{php include wl_template('common/footer');}
|
|
|