|
|
|
@ -1,115 +1,168 @@ |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="home" style="height: auto;"> |
|
|
|
<div style="height: 0.9rem;"></div> |
|
|
|
<div ref="header" class="page-top" id="top-nav"> |
|
|
|
<i class="position" @click="show = true"><img src="../assets/images/icon/position.png" />{{defaultCity}}</i> |
|
|
|
<i class="logo"><img src="../assets/images/icon/logo.png" /></i> |
|
|
|
<i class="text"><a href="tel:400-6080100">联系客服</a></i> |
|
|
|
<div class="home" style="height: auto;"> |
|
|
|
<div style="height: 0.9rem;"></div> |
|
|
|
<div ref="header" class="page-top" id="top-nav"> |
|
|
|
<i class="position" @click="show = true"> |
|
|
|
<img src="../assets/images/icon/position.png" /> |
|
|
|
{{defaultCity}} |
|
|
|
</i> |
|
|
|
<i class="logo"> |
|
|
|
<img src="../assets/images/icon/logo.png" /> |
|
|
|
</i> |
|
|
|
<i class="text"> |
|
|
|
<a href="tel:400-6080100">联系客服</a> |
|
|
|
</i> |
|
|
|
</div> |
|
|
|
<div class="page-content"> |
|
|
|
<!--banner图--> |
|
|
|
<div class="banner" v-if="bannerImgList.length > 0"> |
|
|
|
<swiper :options="swiperOption" ref="mySwiper"> |
|
|
|
<swiper-slide v-for="(item,index) in bannerImgList" :key="index"> |
|
|
|
<a |
|
|
|
:href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " |
|
|
|
class="swiper-img" |
|
|
|
:style="{backgroundImage:'url('+item.imgUrl+')'}" |
|
|
|
></a> |
|
|
|
</swiper-slide> |
|
|
|
</swiper> |
|
|
|
<div class="swiper-pagination"></div> |
|
|
|
</div> |
|
|
|
<!-- TODO: 对应换hot 和 new 图标 --> |
|
|
|
<div class="service f-flex" v-if="iconList.length != 0"> |
|
|
|
<div |
|
|
|
class="item" |
|
|
|
v-for="(item,index) in iconList" |
|
|
|
:key="index" |
|
|
|
v-on:click="goods(item.combinationNo)" |
|
|
|
> |
|
|
|
<a href="javascript:void(0)" class="f-relative f-inb"> |
|
|
|
<img :src="imghost + item.icon" class="icon" /> |
|
|
|
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" /> |
|
|
|
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" /> |
|
|
|
</a> |
|
|
|
<p>{{item.combinationName}}</p> |
|
|
|
</div> |
|
|
|
<div class="page-content"> |
|
|
|
<!--banner图--> |
|
|
|
<div class="banner" v-if="bannerImgList.length > 0"> |
|
|
|
<swiper :options="swiperOption" ref="mySwiper"> |
|
|
|
<swiper-slide v-for="(item,index) in bannerImgList" :key="index"> |
|
|
|
<a :href="item.linkUrl ? item.linkUrl: 'javascript:void(0)' " class="swiper-img" :style="{backgroundImage:'url('+item.imgUrl+')'}"></a> |
|
|
|
</swiper-slide> |
|
|
|
</swiper> |
|
|
|
<div class="swiper-pagination"></div> |
|
|
|
</div> |
|
|
|
<!-- TODO: 对应换hot 和 new 图标 --> |
|
|
|
<div class="service f-flex" v-if="iconList.length != 0"> |
|
|
|
<div class="item" v-for="(item,index) in iconList" :key="index" v-on:click="goods(item.combinationNo)"> |
|
|
|
<a href="javascript:void(0)" class="f-relative f-inb"> |
|
|
|
<img :src="imghost + item.icon" class="icon" /> |
|
|
|
<img src="../assets/images/icon/hot.png" class="hot" v-if="item.label == '2'" /> |
|
|
|
<img src="../assets/images/icon/new.png" class="new" v-if="item.label == '1'" /> |
|
|
|
</a> |
|
|
|
<p>{{item.combinationName}}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="coupon" v-if="promotionImgList.imgUrl"> |
|
|
|
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"><img :src="promotionImgList.imgUrl" /></a> |
|
|
|
<a v-else href="javascript:void(0)"><img :src="promotionImgList.imgUrl" /></a> |
|
|
|
</div> |
|
|
|
<!-- TODO: 三种样式 --> |
|
|
|
<!-- one --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 3"> |
|
|
|
<div class="left"> |
|
|
|
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="gap"></a> |
|
|
|
<a :href="activityImgList[2].linkUrl"><img :src="activityImgList[2].imgUrl"></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- two --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 2"> |
|
|
|
</div> |
|
|
|
<div class="coupon" v-if="promotionImgList.imgUrl"> |
|
|
|
<a v-if="promotionImgList.linkUrl != '' " :href="promotionImgList.linkUrl"> |
|
|
|
<img :src="promotionImgList.imgUrl" /> |
|
|
|
</a> |
|
|
|
<a v-else href="javascript:void(0)"> |
|
|
|
<img :src="promotionImgList.imgUrl" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<!-- TODO: 三种样式 --> |
|
|
|
<!-- one --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 3"> |
|
|
|
<div class="left"> |
|
|
|
<a :href="activityImgList[0].linkUrl"> |
|
|
|
<img :src="activityImgList[0].imgUrl" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<a :href="activityImgList[1].linkUrl"> |
|
|
|
<img :src="activityImgList[1].imgUrl" class="gap" /> |
|
|
|
</a> |
|
|
|
<a :href="activityImgList[2].linkUrl"> |
|
|
|
<img :src="activityImgList[2].imgUrl" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- two --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 2"> |
|
|
|
<div class="left"> |
|
|
|
<a :href="activityImgList[0].linkUrl"> |
|
|
|
<img :src="activityImgList[0].imgUrl" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<a :href="activityImgList[1].linkUrl"> |
|
|
|
<img :src="activityImgList[1].imgUrl" class="two" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- three --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 1"> |
|
|
|
<a :href="activityImgList[0].linkUrl"> |
|
|
|
<img :src="activityImgList[0].imgUrl" class="three" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--商品列表--> |
|
|
|
<div class="new-card-box" style="padding-top: 0.3rem;"> |
|
|
|
<div |
|
|
|
class="new-card" |
|
|
|
v-if="item.goodsList.length > 0" |
|
|
|
v-for="(item,index) in goodsList" |
|
|
|
:key="index" |
|
|
|
> |
|
|
|
<div class="new-card-top"> |
|
|
|
<img :src=" imghost + item.image" /> |
|
|
|
</div> |
|
|
|
<ul class="card-list"> |
|
|
|
<li v-for="item1 in item.goodsList"> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo "> |
|
|
|
<div class="left"> |
|
|
|
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl"></a> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo"> |
|
|
|
<img v-if="item1.goodsTitleImg!=''" :src=" imghost + item1.goodsTitleImg" /> |
|
|
|
<img v-else-if="item1.showImg!=''" :src=" imghost + item1.showImg" /> |
|
|
|
<img v-else :src=" imghost + item1.bannerImgs" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<a :href="activityImgList[1].linkUrl"><img :src="activityImgList[1].imgUrl" class="two"></a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- three --> |
|
|
|
<div class="recommend f-flex" v-if="activityImgList.length == 1"> |
|
|
|
<a :href="activityImgList[0].linkUrl"><img :src="activityImgList[0].imgUrl" class="three"></a> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!--商品列表--> |
|
|
|
<div class="new-card-box" style="padding-top: 0.3rem;"> |
|
|
|
<div class="new-card" v-if="item.goodsList.length > 0" v-for="(item,index) in goodsList" :key="index"> |
|
|
|
<div class="new-card-top"> |
|
|
|
<img :src=" imghost + item.image"> |
|
|
|
<h3 v-if="item1.goodsTitle">{{item1.goodsTitle}}</h3> |
|
|
|
<h3>{{item1.name}}</h3> |
|
|
|
<div class="text">{{item1.shortDesc}}</div> |
|
|
|
<div class="card-name"> |
|
|
|
<i |
|
|
|
:style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" |
|
|
|
v-if="label.labelText" |
|
|
|
v-for="(label,i) in item1.labelList" |
|
|
|
>{{label.labelText}}</i> |
|
|
|
</div> |
|
|
|
<div class="btn-box"> |
|
|
|
<!--originalPrice原价price优惠价 --> |
|
|
|
<div class="btn-box-left"> |
|
|
|
<span class="price"> |
|
|
|
￥ |
|
|
|
<em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em> |
|
|
|
</span> |
|
|
|
<span |
|
|
|
class="original-price" |
|
|
|
v-if="item1.price&&item1.price!=item1.originalPrice" |
|
|
|
> |
|
|
|
<em>￥{{ item1.originalPrice/100}}</em> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
<ul class="card-list"> |
|
|
|
<li v-for="item1 in item.goodsList"> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo "> |
|
|
|
<div class="left"> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo"> |
|
|
|
<img v-if="item1.goodsTitleImg!=''" :src=" imghost + item1.goodsTitleImg" /> |
|
|
|
<img v-else-if="item1.showImg!=''" :src=" imghost + item1.showImg" /> |
|
|
|
<img v-else :src=" imghost + item1.bannerImgs" /> |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
<div class="right"> |
|
|
|
<h3 v-if="item1.goodsTitle" >{{item1.goodsTitle}}</h3> |
|
|
|
<h3>{{item1.name}}</h3> |
|
|
|
<div class="text">{{item1.shortDesc}}</div> |
|
|
|
<div class="card-name"> |
|
|
|
<i :style="{marginRight:(i+1)==item1.labelList.length?'0':'0.1rem'}" v-if="label.labelText" v-for="(label,i) in item1.labelList">{{label.labelText}}</i> |
|
|
|
</div> |
|
|
|
<div class="btn-box"> |
|
|
|
<!--originalPrice原价price优惠价 --> |
|
|
|
<div class="btn-box-left"> |
|
|
|
<span class="price">￥ <em>{{item1.price ? item1.price/100:item1.originalPrice/100}}</em></span> |
|
|
|
<span class="original-price" v-if="item1.price&&item1.price!=item1.originalPrice"><em>￥{{ item1.originalPrice/100}}</em></span> |
|
|
|
</div> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">立即购买</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<a :href="'/mall/web/vgoods/detail/' + item1.goodsNo ">立即购买</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="height:1rem"></div> |
|
|
|
</div> |
|
|
|
<div class="page-bottom"> |
|
|
|
<routerFooter></routerFooter> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<popup-picker :show="show" @cancel="cancel" @confirm="confirm" :data-list="addressData" :value="addressValue"></popup-picker> |
|
|
|
<div class="Loading-box"> |
|
|
|
<loading v-model="showLoading" text="loading"></loading> |
|
|
|
</div> |
|
|
|
<alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址"> |
|
|
|
{{address}} |
|
|
|
<div style="color: #2c3e50"> |
|
|
|
暂不提供服务 |
|
|
|
</div> |
|
|
|
</alert> |
|
|
|
</div> |
|
|
|
<div style="height:1rem"></div> |
|
|
|
</div> |
|
|
|
<div class="page-bottom"> |
|
|
|
<routerFooter></routerFooter> |
|
|
|
</div> |
|
|
|
<popup-picker |
|
|
|
:show="show" |
|
|
|
@cancel="cancel" |
|
|
|
@confirm="confirm" |
|
|
|
:data-list="addressData" |
|
|
|
:value="addressValue" |
|
|
|
></popup-picker> |
|
|
|
<div class="Loading-box"> |
|
|
|
<loading v-model="showLoading" text="loading"></loading> |
|
|
|
</div> |
|
|
|
<alert v-model="alertShow" title="自动定位地址：" @on-hide="alertHide" button-text="手动切换地址"> |
|
|
|
{{address}} |
|
|
|
<div style="color: #2c3e50">暂不提供服务</div> |
|
|
|
</alert> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -119,6 +172,8 @@ import { Alert, Toast, Loading } from "vux"; |
|
|
|
import routerFooter from "../components/nav-bottom"; |
|
|
|
import popupPicker from "../components/popup-picker.vue"; |
|
|
|
import Qs from 'qs'; |
|
|
|
//引入BMap |
|
|
|
import BMap from 'BMap' |
|
|
|
|
|
|
|
|
|
|
|
var locationUrl = configs.locationUrl; |
|
|
|
@ -133,6 +188,7 @@ export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
show: false, |
|
|
|
location:{}, |
|
|
|
uniqueId:'', |
|
|
|
defaultCity: "天河区", //区名 默认值 不需要去掉 |
|
|
|
merchantNo: 2, //商户编号 默认值 不需要去掉 |
|
|
|
@ -207,8 +263,8 @@ export default { |
|
|
|
list[i].goodsList[y].labelList = list[i] |
|
|
|
.goodsList[y].smallLabel |
|
|
|
? JSON.parse( |
|
|
|
list[i].goodsList[y].smallLabel |
|
|
|
) |
|
|
|
list[i].goodsList[y].smallLabel |
|
|
|
) |
|
|
|
: ""; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -404,12 +460,43 @@ export default { |
|
|
|
this.state = 1; |
|
|
|
this.show = true; |
|
|
|
}, |
|
|
|
getCity(){ |
|
|
|
let _this = this |
|
|
|
var geolocation = new BMap.Geolocation(); |
|
|
|
geolocation.getCurrentPosition(function(r) { |
|
|
|
if (this.getStatus() == BMAP_STATUS_SUCCESS) { |
|
|
|
if(r.accuracy==null){ |
|
|
|
alert('您已拒绝地理位置授权'); |
|
|
|
//用户决绝地理位置授权 |
|
|
|
return; |
|
|
|
}else{ |
|
|
|
const myGeo = new BMap.Geocoder() |
|
|
|
myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), data => { |
|
|
|
if (data.addressComponents) { |
|
|
|
const result = data.addressComponents |
|
|
|
const location = { |
|
|
|
creditLongitude: r.point.lat, // 经度 |
|
|
|
creditLatitude: r.point.lng, // 纬度 |
|
|
|
creditProvince: result.province || '', // 省 |
|
|
|
creditCity: result.city || '', // 市 |
|
|
|
creditArea: result.district || '', // 区 |
|
|
|
creditStreet: (result.street || '') + (result.streetNumber || '') // 街道 |
|
|
|
} |
|
|
|
_this.location = location; |
|
|
|
alert("省-"+location.creditProvince+";市-"+location.creditCity+";区-"+location.creditArea+";街道-"+location.creditStreet+";lat-"+location.creditLatitude+";lng-"+location.creditLongitude); |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
//异步加载 |
|
|
|
// this.getdefaultAddress(); |
|
|
|
// this.getAddress(); |
|
|
|
// this.getLocation(); |
|
|
|
this.getCity(); |
|
|
|
this.getData(); |
|
|
|
var uuniqueId = Qs.parse(location.search.substring(1)).uniqueId |
|
|
|
if(uuniqueId !== undefined && uuniqueId !== null && uuniqueId !== ""){ |
|
|
|
@ -436,347 +523,347 @@ export default { |
|
|
|
}); |
|
|
|
|
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
|
.swiper-pagination { |
|
|
|
width: 100%; |
|
|
|
height: 0.3rem; |
|
|
|
bottom: 0.15rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 100%; |
|
|
|
height: 0.3rem; |
|
|
|
bottom: 0.15rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.swiper-pagination span { |
|
|
|
width: 0.2rem; |
|
|
|
height: 0.2rem; |
|
|
|
margin: 0 0.1rem; |
|
|
|
background-color: rgba(255, 255, 255, 0.9); |
|
|
|
width: 0.2rem; |
|
|
|
height: 0.2rem; |
|
|
|
margin: 0 0.1rem; |
|
|
|
background-color: rgba(255, 255, 255, 0.9); |
|
|
|
} |
|
|
|
.swiper-pagination-bullet-active { |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
background-color: rgba(255, 255, 255, 1); |
|
|
|
} |
|
|
|
.weui-dialog__hd { |
|
|
|
padding: 0; |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.btn-box { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
.btn-box-left { |
|
|
|
display: flex; |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
.btn-box-left { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
// justify-content: space-around; |
|
|
|
} |
|
|
|
align-items: flex-end; |
|
|
|
// justify-content: space-around; |
|
|
|
} |
|
|
|
} |
|
|
|
.home { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
position: relative; |
|
|
|
.page-top { |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
position: relative; |
|
|
|
.page-top { |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
z-index: 100; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
i { |
|
|
|
font-style: normal; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.position { |
|
|
|
font-size: 0.26rem; |
|
|
|
font-weight: 500; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
img { |
|
|
|
width: 0.2rem; |
|
|
|
height: 0.25rem; |
|
|
|
margin-right: 0.07rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.logo img { |
|
|
|
width: 1.77rem; |
|
|
|
height: 0.3rem; |
|
|
|
} |
|
|
|
.text { |
|
|
|
height: 0.28rem; |
|
|
|
font-size: 0.28rem; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(36, 158, 108, 1); |
|
|
|
a { |
|
|
|
position: relative; |
|
|
|
color: rgba(36, 158, 108, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
z-index: 100; |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
i { |
|
|
|
font-style: normal; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
.position { |
|
|
|
font-size: 0.26rem; |
|
|
|
font-weight: 500; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
img { |
|
|
|
width: 0.2rem; |
|
|
|
height: 0.25rem; |
|
|
|
margin-right: 0.07rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.logo img { |
|
|
|
width: 1.77rem; |
|
|
|
height: 0.3rem; |
|
|
|
} |
|
|
|
.text { |
|
|
|
height: 0.28rem; |
|
|
|
font-size: 0.28rem; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(36, 158, 108, 1); |
|
|
|
a { |
|
|
|
position: relative; |
|
|
|
color: rgba(36, 158, 108, 1); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.home .page-content { |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
overflow-y: scroll; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
overflow-y: scroll; |
|
|
|
position: relative; |
|
|
|
top: 0; |
|
|
|
z-index: 10; |
|
|
|
.banner { |
|
|
|
max-height: 3rem; |
|
|
|
position: relative; |
|
|
|
top: 0; |
|
|
|
z-index: 10; |
|
|
|
.banner { |
|
|
|
max-height: 3rem; |
|
|
|
position: relative; |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
a { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
div img { |
|
|
|
width: 100%; |
|
|
|
height: 3rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
a { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.coupon { |
|
|
|
margin-top: 0.3rem; |
|
|
|
img { |
|
|
|
width: 6.8rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
div img { |
|
|
|
width: 100%; |
|
|
|
height: 3rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
.new-card-first { |
|
|
|
padding-top: 0.3rem; |
|
|
|
} |
|
|
|
.coupon { |
|
|
|
margin-top: 0.3rem; |
|
|
|
img { |
|
|
|
width: 6.8rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
.new-card .new-card-top { |
|
|
|
padding: 0rem 0 0.3rem; |
|
|
|
img { |
|
|
|
width: 7.1rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
.new-card-first { |
|
|
|
padding-top: 0.3rem; |
|
|
|
} |
|
|
|
.new-card .new-card-top { |
|
|
|
padding: 0rem 0 0.3rem; |
|
|
|
img { |
|
|
|
width: 7.1rem; |
|
|
|
display: block; |
|
|
|
margin: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.home .page-content .banner > div { |
|
|
|
max-height: 3rem; |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
max-height: 3rem; |
|
|
|
-webkit-overflow-scrolling: touch; |
|
|
|
} |
|
|
|
.swiper-img { |
|
|
|
width: 100%; |
|
|
|
height: 3rem; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height: 3rem; |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li { |
|
|
|
width: 7rem; |
|
|
|
height: 2.5rem; |
|
|
|
border: 1px solid rgba(238, 238, 238, 1); |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0.2rem; |
|
|
|
margin: auto; |
|
|
|
margin-bottom: 0.3rem; |
|
|
|
display: block; |
|
|
|
width: 7rem; |
|
|
|
height: 2.5rem; |
|
|
|
border: 1px solid rgba(238, 238, 238, 1); |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0.2rem; |
|
|
|
margin: auto; |
|
|
|
margin-bottom: 0.3rem; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li a { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .left { |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
margin-right: 0.18rem; |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
margin-right: 0.18rem; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .left img { |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
display: block; |
|
|
|
width: 2rem; |
|
|
|
height: 2rem; |
|
|
|
display: block; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right { |
|
|
|
// width: 4.3rem; |
|
|
|
flex-grow: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 2rem; |
|
|
|
position: relative; |
|
|
|
padding-top: 0.15rem; |
|
|
|
box-sizing: border-box; |
|
|
|
// width: 4.3rem; |
|
|
|
flex-grow: 1; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 2rem; |
|
|
|
position: relative; |
|
|
|
padding-top: 0.15rem; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right h3 { |
|
|
|
font-size: 0.33rem; |
|
|
|
font-weight: 400; |
|
|
|
padding-top: 0.03rem; |
|
|
|
line-height: 1.2; |
|
|
|
color: rgba(51, 51, 51, 1); |
|
|
|
margin-bottom: 0.13rem; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
font-size: 0.33rem; |
|
|
|
font-weight: 400; |
|
|
|
padding-top: 0.03rem; |
|
|
|
line-height: 1.2; |
|
|
|
color: rgba(51, 51, 51, 1); |
|
|
|
margin-bottom: 0.13rem; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .text { |
|
|
|
font-size: 0.24rem; |
|
|
|
// height: 0.24rem; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 1.2; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
margin-bottom: 0.16rem; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
font-size: 0.24rem; |
|
|
|
// height: 0.24rem; |
|
|
|
font-weight: 400; |
|
|
|
line-height: 1.2; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
margin-bottom: 0.16rem; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .card-name { |
|
|
|
height: 0.3rem; |
|
|
|
font-size: 0.2rem; |
|
|
|
font-style: normal; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(244, 163, 83, 1); |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
height: 0.3rem; |
|
|
|
font-size: 0.2rem; |
|
|
|
font-style: normal; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(244, 163, 83, 1); |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
white-space: normal; |
|
|
|
word-break: break-all; |
|
|
|
-webkit-line-clamp: 1; |
|
|
|
word-wrap: break-word; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .card-name i { |
|
|
|
font-style: normal; |
|
|
|
line-height: 1.5; |
|
|
|
background: rgba(255, 242, 229, 1); |
|
|
|
padding: 0.05rem 0.1rem; |
|
|
|
// line-height: 0.28rem; |
|
|
|
font-style: normal; |
|
|
|
line-height: 1.5; |
|
|
|
background: rgba(255, 242, 229, 1); |
|
|
|
padding: 0.05rem 0.1rem; |
|
|
|
// line-height: 0.28rem; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .btn { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .btn-box .price { |
|
|
|
color: #249e6c; |
|
|
|
min-width: 1.4rem; |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
color: #249e6c; |
|
|
|
min-width: 1.4rem; |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .btn-box span em { |
|
|
|
font-size: 0.38rem; |
|
|
|
font-weight: 600; |
|
|
|
line-height: 0.9; |
|
|
|
display: inline-block; |
|
|
|
font-style: normal; |
|
|
|
font-size: 0.38rem; |
|
|
|
font-weight: 600; |
|
|
|
line-height: 0.9; |
|
|
|
display: inline-block; |
|
|
|
font-style: normal; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .btn-box .original-price em { |
|
|
|
font-size: 0.24rem; |
|
|
|
text-decoration: line-through; |
|
|
|
font-weight: normal; |
|
|
|
font-size: 0.24rem; |
|
|
|
text-decoration: line-through; |
|
|
|
font-weight: normal; |
|
|
|
} |
|
|
|
.home .page-content .new-card .card-list li .right .btn-box span { |
|
|
|
font-size: 0.22rem; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
margin-right: auto; |
|
|
|
font-size: 0.22rem; |
|
|
|
font-weight: 400; |
|
|
|
color: rgba(153, 153, 153, 1); |
|
|
|
margin-right: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.home .page-content .new-card .card-list li .right .btn-box a { |
|
|
|
width: 1.7rem; |
|
|
|
height: 0.56rem; |
|
|
|
border-radius: 0rem; |
|
|
|
background-color: #2bb079; |
|
|
|
border: none; |
|
|
|
color: #fff; |
|
|
|
border-radius: 2px; |
|
|
|
font-size: 0.3rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
width: 1.7rem; |
|
|
|
height: 0.56rem; |
|
|
|
border-radius: 0rem; |
|
|
|
background-color: #2bb079; |
|
|
|
border: none; |
|
|
|
color: #fff; |
|
|
|
border-radius: 2px; |
|
|
|
font-size: 0.3rem; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.home .page-bottom { |
|
|
|
width: 100%; |
|
|
|
height: 1rem; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
z-index: 130; |
|
|
|
width: 100%; |
|
|
|
height: 1rem; |
|
|
|
position: fixed; |
|
|
|
bottom: 0; |
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
z-index: 130; |
|
|
|
} |
|
|
|
.Loading-box .weui-toast { |
|
|
|
width: 100%; |
|
|
|
min-height: 100% !important; |
|
|
|
overflow: hidden; |
|
|
|
top: 0; |
|
|
|
width: 100%; |
|
|
|
min-height: 100% !important; |
|
|
|
overflow: hidden; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
.Loading-box .weui-icon_toast.weui-loading { |
|
|
|
margin-top: 75%; |
|
|
|
margin-top: 75%; |
|
|
|
} |
|
|
|
.service { |
|
|
|
padding: 0.11rem 0; |
|
|
|
.item { |
|
|
|
text-align: center; |
|
|
|
font-size: 0; |
|
|
|
flex: 1; |
|
|
|
.icon { |
|
|
|
width: 0.78rem; |
|
|
|
height: 0.78rem; |
|
|
|
} |
|
|
|
.hot { |
|
|
|
position: absolute; |
|
|
|
top: 0.05rem; |
|
|
|
right: 0; |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.1rem; |
|
|
|
} |
|
|
|
.new { |
|
|
|
position: absolute; |
|
|
|
top: 0.05rem; |
|
|
|
right: 0; |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.08rem; |
|
|
|
} |
|
|
|
p { |
|
|
|
color: #666; |
|
|
|
font-size: 0.21rem; |
|
|
|
} |
|
|
|
padding: 0.11rem 0; |
|
|
|
.item { |
|
|
|
text-align: center; |
|
|
|
font-size: 0; |
|
|
|
flex: 1; |
|
|
|
.icon { |
|
|
|
width: 0.78rem; |
|
|
|
height: 0.78rem; |
|
|
|
} |
|
|
|
.hot { |
|
|
|
position: absolute; |
|
|
|
top: 0.05rem; |
|
|
|
right: 0; |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.1rem; |
|
|
|
} |
|
|
|
.new { |
|
|
|
position: absolute; |
|
|
|
top: 0.05rem; |
|
|
|
right: 0; |
|
|
|
width: 0.24rem; |
|
|
|
height: 0.08rem; |
|
|
|
} |
|
|
|
p { |
|
|
|
color: #666; |
|
|
|
font-size: 0.21rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.recommend { |
|
|
|
padding: 0 0.2rem; |
|
|
|
margin-top: 0.3rem; |
|
|
|
font-size: 0; |
|
|
|
.left { |
|
|
|
img { |
|
|
|
width: 2.51rem; |
|
|
|
height: 1.74rem; |
|
|
|
margin-right: 0.05rem; |
|
|
|
} |
|
|
|
padding: 0 0.2rem; |
|
|
|
margin-top: 0.3rem; |
|
|
|
font-size: 0; |
|
|
|
.left { |
|
|
|
img { |
|
|
|
width: 2.51rem; |
|
|
|
height: 1.74rem; |
|
|
|
margin-right: 0.05rem; |
|
|
|
} |
|
|
|
.right { |
|
|
|
img { |
|
|
|
width: 4.54rem; |
|
|
|
height: 0.84rem; |
|
|
|
} |
|
|
|
.gap { |
|
|
|
margin-bottom: 0.06rem; |
|
|
|
} |
|
|
|
.two { |
|
|
|
width: 4.54rem; |
|
|
|
height: 1.74rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.right { |
|
|
|
img { |
|
|
|
width: 4.54rem; |
|
|
|
height: 0.84rem; |
|
|
|
} |
|
|
|
.gap { |
|
|
|
margin-bottom: 0.06rem; |
|
|
|
} |
|
|
|
.three { |
|
|
|
width: 7.1rem; |
|
|
|
height: 1.74rem; |
|
|
|
.two { |
|
|
|
width: 4.54rem; |
|
|
|
height: 1.74rem; |
|
|
|
} |
|
|
|
} |
|
|
|
.three { |
|
|
|
width: 7.1rem; |
|
|
|
height: 1.74rem; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
nesxy
6 years ago