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.
733 lines
25 KiB
733 lines
25 KiB
|
|
<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>
|
|
<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-on:click="openCouponUrl(promotionImgList.linkUrl)">
|
|
<img :src="promotionImgList.imgUrl" />
|
|
</a>
|
|
<!-- <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="'/mall/web/vgoods/detail/' + item1.goodsNo">
|
|
<img :src=" imghost + item1.bannerImgs" />
|
|
</a>
|
|
</div>
|
|
<div class="right">
|
|
<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>
|
|
</div>
|
|
</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>
|
|
import homeApi from "../models/home-model.js";
|
|
import configs from "../configs";
|
|
import { Alert, Toast, Loading } from "vux";
|
|
import routerFooter from "../components/nav-bottom";
|
|
import popupPicker from "../components/popup-picker.vue";
|
|
|
|
var locationUrl = configs.locationUrl;
|
|
export default {
|
|
components: {
|
|
Toast,
|
|
routerFooter,
|
|
Loading,
|
|
Alert,
|
|
"popup-picker": popupPicker
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
defaultCity: "天河区", //区名 默认值 不需要去掉
|
|
merchantNo: 2, //商户编号 默认值 不需要去掉
|
|
districtId: "440106000", //区id 默认值 不需要去掉
|
|
addressData: [],
|
|
addressValue: [
|
|
"440000000&广东省",
|
|
"440100000&广州市",
|
|
"440106000&天河区&2"
|
|
],
|
|
bannerImgList: [], //轮播图
|
|
activityImgList: [], // 广告图
|
|
iconList: [], // 图标列表
|
|
promotionImgList: {}, //优惠券，
|
|
goodsList: [],
|
|
swiperOption: {
|
|
autoplay: {
|
|
disableOnInteraction: false
|
|
},
|
|
speed: 1000,
|
|
pagination: {
|
|
el: ".swiper-pagination"
|
|
}
|
|
},
|
|
showLoading: false,
|
|
searchBarFixed: false,
|
|
provinceId: "",
|
|
cityId: "",
|
|
alertShow: false,
|
|
address: "",
|
|
flag: false,
|
|
state: 0
|
|
};
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
// this.getCityName();
|
|
}
|
|
},
|
|
methods: {
|
|
//确定时保存记录
|
|
confirm(list) {
|
|
let arr = list[2].split("&") || "";
|
|
this.districtId = arr[0];
|
|
this.merchantNo = arr[2];
|
|
this.getGoodsList(); //加载商品列表
|
|
this.defaultCity = arr[1];
|
|
this.addressValue = list.slice();
|
|
localStorage.setItem("cityName", list);
|
|
this.ShareWenXin();
|
|
this.show = false;
|
|
},
|
|
//加载商品列表
|
|
getGoodsList() {
|
|
return new Promise((resolve, reject) => {
|
|
var params = {
|
|
merchantNo: this.merchantNo,
|
|
selectedDistrictId: this.districtId
|
|
};
|
|
homeApi.getGoods(params).then(res => {
|
|
this.showLoading = false;
|
|
this.state = 0;
|
|
if (res.code == 0) {
|
|
this.bannerImgList = res.response.bannerImgList;
|
|
this.activityImgList =
|
|
res.response.activityImgList || [];
|
|
this.iconList = res.response.iconList || [];
|
|
this.promotionImgList =
|
|
res.response.promotionImgList[0] || {};
|
|
let list = res.response.goodsList;
|
|
for (let i = 0; i < list.length; i++) {
|
|
for (let y = 0; y < list[i].goodsList.length; y++) {
|
|
list[i].goodsList[y].labelList = list[i]
|
|
.goodsList[y].smallLabel
|
|
? JSON.parse(
|
|
list[i].goodsList[y].smallLabel
|
|
)
|
|
: "";
|
|
}
|
|
}
|
|
this.goodsList = list.slice();
|
|
} else {
|
|
this.$vux.toast.text(res.msg, "middle");
|
|
}
|
|
resolve();
|
|
});
|
|
});
|
|
},
|
|
cancel() {
|
|
let str = localStorage.getItem("cityName") || "";
|
|
//首次取消也需要请求
|
|
if (
|
|
!str &&
|
|
(this.state == -1 || this.state == 2 || this.state == 1)
|
|
) {
|
|
this.defaultCity = "天河区";
|
|
//商户编号
|
|
this.merchantNo = 2;
|
|
//区id
|
|
this.districtId = "440106000";
|
|
this.addressValue = [
|
|
"440000000&广东省",
|
|
"440100000&广州市",
|
|
"440106000&天河区&2"
|
|
];
|
|
this.getGoodsList();
|
|
} else if (this.state == 2 || this.state == 1) {
|
|
this.getGoodsList();
|
|
}
|
|
this.show = false;
|
|
},
|
|
ShareWenXin() {
|
|
var merchantNo = this.merchantNo;
|
|
this.wxShare({
|
|
merchantNo: merchantNo,
|
|
source: 0,
|
|
url: encodeURIComponent(location.href)
|
|
});
|
|
},
|
|
// 商品分类
|
|
goods(c_no) {
|
|
this.$router.push({
|
|
name: "商品分类",
|
|
params: {
|
|
no: this.merchantNo,
|
|
id: this.districtId,
|
|
c_no: c_no
|
|
}
|
|
});
|
|
},
|
|
getLocation() {
|
|
this.getId();
|
|
this.showLoading = true;
|
|
return new Promise((resolve, reject) => {
|
|
homeApi
|
|
.getLocation({
|
|
cityId: this.cityId ? this.cityId : ""
|
|
})
|
|
.then(res => {
|
|
if (res.data.allAddress && res.data.userAddress) {
|
|
this.addressData = res.data.allAddress;
|
|
this.flag = true;
|
|
let data = res.data;
|
|
if (data.userAddress.type == 1) {
|
|
this.address =
|
|
data.userAddress.cityName +
|
|
(data.userAddress.districtName
|
|
? data.userAddress.districtName
|
|
: "");
|
|
this.alertShow = true;
|
|
} else if (data.userAddress.type == 2) {
|
|
this.$vux.confirm.show({
|
|
title: "自动定位地址：",
|
|
content:
|
|
data.userAddress.cityName +
|
|
(data.userAddress.districtName
|
|
? data.userAddress.districtName
|
|
: ""),
|
|
cancelText: "切换地址",
|
|
onCancel: () => {
|
|
this.show = true;
|
|
this.state = 2;
|
|
},
|
|
onConfirm: () => {
|
|
this.provinceId = data.userAddress
|
|
.provinceId
|
|
? data.userAddress.provinceId
|
|
: this.provinceId;
|
|
this.cityId = data.userAddress.cityId
|
|
? data.userAddress.cityId
|
|
: this.cityId;
|
|
this.districtId = data.userAddress
|
|
.districtId
|
|
? data.userAddress.districtId
|
|
: this.districtId;
|
|
this.defaultCity = data.userAddress
|
|
.districtName
|
|
? data.userAddress.districtName
|
|
: this.defaultCity;
|
|
this.merchantNo =
|
|
data.userAddress.merchantNo;
|
|
this.addressValue = [
|
|
this.provinceId +
|
|
"&" +
|
|
data.userAddress.provinceName,
|
|
this.cityId +
|
|
"&" +
|
|
data.userAddress.cityName,
|
|
this.districtId +
|
|
"&" +
|
|
data.userAddress.districtName +
|
|
"&" +
|
|
data.userAddress.merchantNo
|
|
];
|
|
localStorage.setItem(
|
|
"cityName",
|
|
this.addressValue.slice()
|
|
);
|
|
this.getGoodsList();
|
|
}
|
|
});
|
|
} else if (data.userAddress.type == 0) {
|
|
this.getGoodsList();
|
|
} else if (data.userAddress.type == -1) {
|
|
this.state = -1;
|
|
this.$vux.alert.show({
|
|
title: "自动定位失败",
|
|
onHide: () => {
|
|
this.show = true;
|
|
}
|
|
});
|
|
}
|
|
resolve();
|
|
}
|
|
this.showLoading = false;
|
|
});
|
|
});
|
|
},
|
|
getId() {
|
|
let str = localStorage.getItem("cityName") || "";
|
|
if (!str) {
|
|
} else {
|
|
let arr = str.split(",");
|
|
this.addressValue = arr;
|
|
this.provinceId = arr[0].split("&")[0];
|
|
this.cityId = arr[1].split("&")[0];
|
|
let cityNameArr = arr[2].split("&");
|
|
this.districtId = cityNameArr[0];
|
|
this.defaultCity = cityNameArr[1];
|
|
this.merchantNo = cityNameArr[2];
|
|
}
|
|
},
|
|
getData() {
|
|
let get = async () => {
|
|
await this.getLocation();
|
|
// await this.getGoodsList();
|
|
};
|
|
return get();
|
|
},
|
|
alertHide() {
|
|
this.state = 1;
|
|
this.show = true;
|
|
},
|
|
openCouponUrl(url){
|
|
if(url){
|
|
window.location.replace(url);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
//异步加载
|
|
// this.getdefaultAddress();
|
|
// this.getAddress();
|
|
// this.getLocation();
|
|
this.getData();
|
|
this.ShareWenXin();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.swiper-pagination {
|
|
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);
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background-color: rgba(255, 255, 255, 1);
|
|
}
|
|
.weui-dialog__hd {
|
|
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;
|
|
align-items: flex-end;
|
|
// justify-content: space-around;
|
|
}
|
|
}
|
|
.home {
|
|
width: 100%;
|
|
height: 100%;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.home .page-content {
|
|
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;
|
|
-webkit-overflow-scrolling: touch;
|
|
a {
|
|
display: block;
|
|
}
|
|
div img {
|
|
width: 100%;
|
|
height: 3rem;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
}
|
|
.coupon {
|
|
margin-top: 0.3rem;
|
|
img {
|
|
width: 6.8rem;
|
|
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;
|
|
}
|
|
.swiper-img {
|
|
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;
|
|
}
|
|
.home .page-content .new-card .card-list li a {
|
|
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;
|
|
}
|
|
.home .page-content .new-card .card-list li .left img {
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.home .page-content .new-card .card-list li .right .btn {
|
|
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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.home .page-bottom {
|
|
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;
|
|
}
|
|
.Loading-box .weui-icon_toast.weui-loading {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
.recommend {
|
|
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;
|
|
}
|
|
}
|
|
.three {
|
|
width: 7.1rem;
|
|
height: 1.74rem;
|
|
}
|
|
}
|
|
</style>
|