{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>&nbsp;加载中</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');}