yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
253 Commits
7 Branches
0 Tags
16 MiB
 
 
 
 
Tag: Branch: Tree: 9d0bbcb5fc
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '9d0bbcb5fc'
${ noResults }
high-mini/pages/tabBar/home/home.vue

1407 lines
37 KiB
Raw Blame History

<template>
<view>
<!-- 状态栏 -->
<view v-if="showHeader" class="status"
:style="{ position: headerPosition,top:statusTop,opacity: afterHeaderOpacity}"></view>
<!-- 顶部导航栏 -->
<view v-if="showHeader" class="header"
:style="{ position: headerPosition,top:headerTop,opacity: afterHeaderOpacity }">
<!-- 定位城市 -->
<view class="addr" @click="goPostion">
<!-- <view class="icon location"></view> -->
{{ city }}
<image mode="widthFix" style="width: 15px;" :src="imagewxUrl+imgadres2"></image>
</view>
<!-- 搜索框 -->
<view class="input-box">
<input placeholder="搜索门店" placeholder-style="color:#c0c0c0;" @tap="toSearch()" />
<view class="icon search"></view>
</view>
</view>
<!-- 占位 -->
<view v-if="showHeader" class="place"></view>
<!-- 轮播图 -->
<view class="height90 backcor008 viewbor"></view>
<view class="swiper">
<view class="swiper-box">
<swiper circular="true" autoplay="true" @change="swiperChange">
<swiper-item v-for="swiper in swiperList" :key="swiper.id">
<image :src="imageUrl+swiper.imgData" @click="jumplottery(swiper)"></image>
</swiper-item>
</swiper>
<view class="indicator">
<view class="dots" v-for="(swiper, index) in swiperList"
:class="[currentSwiper >= index ? 'on' : '']" :key="index"></view>
</view>
</view>
</view>
<!-- /菜单 -->
<view class="height60 backcorfff"></view>
<view class="category-list">
<view class="category" v-for="(row, index) in categoryList" :key="index" @tap="toCategory(row)">
<view class="img">
<image :src="imageUrl+row.imgData"></image>
</view>
<view class="text">{{ row.title }}</view>
</view>
</view>
<!-- 积分 -->
<view style="width: 90%;margin-left: 5%;" v-if='goldproductList.length != 0' @click="goGoodsList(2)">
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres1"></image>
</view>
<swiper class="orange-content" :display-multiple-items="goldproductListleg" v-if='goldproductList.length != 0'
next-margin="50rpx">
<swiper-item class="swiper-hed" v-for="(item,index) in goldproductList" :key="index"
@click="toGoods(item.id)">
<view class="swiper-item" :data-id="item.id">
<image class="img" :src="imageUrl+item.couponImg" mode="aspectFit"></image>
<view class="fotlt fcor333 font14 text1 mart10">{{item.couponName}}</view>
<view class="subject fotct mart5">
<image style="width: 15px;height: 15px;vertical-align: sub;margin-right: 5px;"
src="../../../static/img/jfx.png">
</image>{{ item.discountPrice*100}}
</view>
</view>
</swiper-item>
</swiper>
<image mode="widthFix" style="margin-top: 30px;width: 90%;margin-left: 5%;" v-for="(row, index) in homeCateList"
:key="index" @click="jumphuafei(row)" :src="imageUrl+row.imgData"></image>
<!-- 赠券 -->
<view style="width: 91%;margin-left: 5%;" v-if='productList.length != 0' @click="goGoodsList(1)">
<image class="mart30 width100" mode="widthFix" :src="imagewxUrl+imgadres"></image>
</view>
<swiper class="orange-content" style="border: 2px solid #ff5836;" v-if='productList.length != 0'
:display-multiple-items="productListleg">
<swiper-item class="swiper-hed" v-for="pro in productList" :key="pro.id" @click="toGoods(pro.id)">
<view class="swiper-item" :data-id="pro.id">
<image class="img" :src="imageUrl+pro.couponImg" mode="aspectFit">
</image>
<view class="fotlt fcor333 font14 text1 mart10">{{pro.couponName}}</view>
<view class="subject fotct mart5">￥{{pro.discountPrice}}</view>
</view>
</swiper-item>
</swiper>
<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
<image class="popImg" :src="imageUrl+imgadres3" @click="jumpWeb"></image>
</wybPopup>
<!-- #ifdef MP-->
<button open-type="contact">
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="xfimg"></image>
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<image :src="imagewxUrl+imgadres4" mode="widthFix" class="h5xfimg" @click="playPhone"></image>
<!-- #endif -->
<view class="height40"></view>
<!-- <official-account bindload="bindload" binderror="binderror"></official-account> -->
<!-- <view class="height20"></view> -->
</view>
</template>
<script>
import {
getUserInfo,
HandleCode,
WXlogin,
getCouponList,
getH5AccessToken,
getTPigKFCToken,
getTPigCinemaToken,
getCmsContent,
getMembershipLevel,
findByLatAndLng
} from "../../../Utils/Api.js"; //您的api路径
import wybPopup from '../../../components/wyb-popup/wyb-popup.vue';
let app = getApp();
export default {
components: {
wybPopup
},
data() {
return {
showHeader: true,
isShowAuth: false,
afterHeaderOpacity: 1, //不透明度
headerPosition: 'fixed',
headerTop: null,
statusTop: null,
nVueTitle: null,
city: '',
currentSwiper: 0,
imageUrl: app.globalData.imgUrl,
imagewxUrl: app.globalData.imageWxImg,
imgadres: 'headzq.png',
imgadres1: 'jbhed.png',
imgadres2: 'jt.png',
imgadres3: '',
imgadres4: 'cusservice.png',
webUrl: '',
// 轮播图片
swiperList: [{
id: 1,
src: 'url1',
img: 'banner2.png'
},
{
id: 2,
src: 'url2',
img: 'banner3.png'
}
],
//猜你喜欢列表
productList: [],
productListleg: '',
goldproductList: [],
goldproductListleg: '',
loadingText: '正在加载...',
pageNum: 1,
pageSize: 6,
// 分类菜单
categoryList: [],
homeCateList: [],
//切换状态
cpStuats: 1,
jumpType: ''
};
},
onShow() {
if (app.globalData.cityName != '') {
this.city = app.globalData.cityName;
this.getCouponListArea();
this.getCouponListgold();
this.getCmsContent();
this.getCmsContentcmshome();
this.getCmsContentcmsContent();
if (app.globalData.userInfo.phone) {
this.getMembershipLevel();
}
}
// #ifdef H5
uni.getStorage({
key: 'accountId',
success(e) {
if (e.data) {
app.globalData.accountId = e.data;
}
}
})
// #endif
},
onLoad(options) {
let that = this;
// #ifdef H5
var arr1 = window.location.href;
var arr2 = arr1.split('=');
if (arr2[1] != undefined && arr2[2] == '1#/') {
app.globalData.h5code = arr2[1];
} else {
// 获取openid
this.jumpcdx();
uni.setStorage({
key: "accountId",
data: arr2[1]
})
uni.setStorage({
key: "accountType",
data: arr2[1]
})
}
if (app.globalData.h5code) {
this.getH5AccessToken();
}
// #endif
// #ifdef MP
app.globalData.accountId = options.accountId;
// #endif
// 1.wx获取登录用户code
// #ifdef MP
uni.login({
provider: 'weixin',
success: function(loginRes) {
app.globalData.code = loginRes.code;
// 请求接口
let params = {
code: app.globalData.code
}
HandleCode(params).then(res => {
if (res.return_code == '000000') {
app.globalData.openId = res.return_data.openId;
}
})
},
})
// #endif
//定位
this.postionIng();
uni.getStorage({
key: "user",
success(e) {
app.globalData.userInfo = e.data //这就是你想要取的token
uni.getStorage({
key: 'token',
success(e) {
app.globalData.token = e.data;
}
})
},
fail: res => {}
})
if (JSON.stringify(options.id)) {
app.globalData.identificationCode = options.id;
return;
}
var arr1mp = decodeURIComponent(options.q);
if (arr1mp) {
var arr2mp = arr1mp.split('=');
if (arr2mp) {
app.globalData.identificationCode = arr2mp[2];
}
}
},
methods: {
jumpcdx() {
location.href =
'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa075e8509802f826&redirect_uri=https%3A%2F%2Fhsgcs.dctpay.com%2FhsgH5%2Findex.html%23%2F&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
},
//获取首页功能
getCmsContentcmsContent() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_HOME_CONTENT'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
this.homeCateList = res.return_data;
}
});
},
//查询是否赠券
getMembershipLevel() {
let params = {
phone: app.globalData.userInfo.phone,
regionId: app.globalData.cityId
}
getMembershipLevel(params).then(res => {});
},
//获取首页菜单
getCmsContentcmshome() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_HOME_NAV'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
this.categoryList = res.return_data;
}
});
},
//获取弹出或者弹窗
getCmsContent() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_WX_APPLETS_HOME_SLIDESHOW'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000') {
this.swiperList = res.return_data;
}
});
},
getCmsAactibity() {
let params = {
regionId: app.globalData.cityId,
categoryCode: 'CMS_WX_APPLETS_HOME_ACTIVITY'
}
getCmsContent(params).then(res => {
if (res.return_code == '000000' && res.return_data != '') {
//弹窗首页广告
this.showPopup();
this.imgadres3 = res.return_data[0].imgData;
this.webUrl = res.return_data[0].ext1;
this.jumpType = res.return_data[0].jumpType;
}
});
},
//显示弹出
showPopup() {
this.$refs.popup.show();
},
close() {
this.isShowAuth = false;
},
//关闭弹窗
closePopup() {
this.$refs.popup.hide();
},
/**
* 跳转外链
*/
jumpWeb() {
if (this.jumpType == 1) {
if (this.webUrl) {
uni.navigateTo({
url: '../order/webUrl/webUrl?url=' + this.webUrl
})
}
} else {
uni.navigateTo({
url: this.webUrl
})
}
this.closePopup();
},
/**
* 定位
*/
postionIng() {
uni.showLoading({
title: '加载中'
})
let that = this;
uni.getLocation({
type: 'wgs84',
success: function(res) {
app.globalData.latitude = res.latitude;
app.globalData.longitude = res.longitude;
// that.findByLatAndLng(res.longitude, res.latitude);
// #ifdef H5
that.getUserLocation(res.longitude, res.latitude);
//#endif
// #ifdef MP
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
data: {},
success: function(res) {
// that.city = res.data.result.address_component.city.replace(/市/g,
// '');
that.city = res.data.result.address_component.province;
app.globalData.cityName = res.data.result.address_component
.province;
app.globalData.cityId = res.data.result.ad_info.adcode;
uni.hideLoading();
if (res.data.result.ad_info.adcode) {
that.getCouponListArea();
that.getCouponListgold();
that.getCmsContent();
that.getCmsAactibity();
that.getCmsContentcmshome();
that.getCmsContentcmsContent();
}
},
fail(err) {
uni.hideLoading()
}
})
//#endif
},
fail: (err) => {
if (err.errCode == 2) {
uni.showToast({
title: '请开启系统定位',
duration: 3000,
icon: 'none'
})
}
}
})
},
//H5 获取定位
getCoordinates() {
let that = this;
// 获取当前地理位置信息
let data = {
key: "7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB" //密钥，需要在腾讯位置服务官网（https://lbs.qq.com/）申请自己的密钥。
};
let url = "https://apis.map.qq.com/ws/location/v1/ip"; //地理位置信息接口（根据IP自动获取当前城市位置信息）
data.output = "jsonp";
//判断用户是否输入了搜索关键字，若没有输入搜索关键字则调用根据IP自动获取当前城市位置信息的接口。
this.$jsonp(url, data)
.then(res => {
app.globalData.latitude = res.result.location.lat;
app.globalData.longitude = res.result.location.lng;
that.getUserLocation(res.result.location.lng, res.result.location.lat);
})
.catch(error => {
console.log(error);
});
},
//经纬度转换
findByLatAndLng(item, item1) {
let that = this;
let datas = {
lng: item,
lat: item1
}
findByLatAndLng(datas).then(res => {
if (res.return_code == '000000') {
that.city = res.return_data.result.addressComponent.province;
app.globalData.cityName = res.return_data.result.addressComponent
.province;
app.globalData.cityId = res.return_data.result.addressComponent.adcode;
// app.globalData.cityId = '500100';
that.getCouponListArea();
that.getCouponListgold();
uni.hideLoading();
that.getCmsContent();
that.getCmsAactibity();
that.getCmsContentcmshome();
that.getCmsContentcmsContent();
}
});
},
//H5 获取openId
getH5AccessToken() {
let params = {
code: app.globalData.h5code
}
getH5AccessToken(params).then(res => {
if (res.return_code == '000000' && res.return_data.openid) {
app.globalData.openId = res.return_data.openid;
uni.setStorage({
key: "openId",
data: res.return_data.openid
})
} else {
this.jumpcdx();
}
});
},
//H5金纬度转
getUserLocation(long, lat) {
let that = this;
let url =
'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';
let locationObj = lat + ',' + long;
this.$jsonp(url, {
key: '7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
location: locationObj
})
.then(res => {
// vm.city = res.result.address_component.city.replace(/市/g, '');
// app.globalData.cityName = res.result.address_component.city.replace(/市/g, '');
// app.globalData.cityId = res.result.ad_info.adcode;
// vm.getCouponListArea();
// vm.getCouponListgold();
// uni.hideLoading()
uni.hideLoading();
that.city = res.result.address_component.city;
app.globalData.cityName = res.result.address_component
.city;
app.globalData.cityId = res.result.ad_info.adcode;
if (res.result.ad_info.adcode) {
// app.globalData.cityId = '500100';
that.getCouponListArea();
that.getCouponListgold();
that.getCmsContent();
that.getCmsAactibity();
that.getCmsContentcmshome();
that.getCmsContentcmsContent();
}
uni.getStorage({
key: 'accountType',
success(e) {
if (e.data) {
app.globalData.accountType = e.data;
if (e.data == '000000#/' && app.globalData.h5code) {
uni.navigateTo({
url: '../../goods/refuel-details/refuel-details'
})
}
}
}
})
})
.catch(err => {
uni.hideLoading()
});
},
//搜索跳转
toSearch() {
uni.navigateTo({
url: '../../goods/HM-search/HM-search'
})
},
//跳转位置
goPostion() {
uni.navigateTo({
url: '/pages/user/positioning/positioning'
})
},
//商品跳转
toGoods(e) {
uni.navigateTo({
url: '../../goods/goods?id=' + e
});
},
//赠券卡券列表
getCouponListArea() {
let params = {
regionId: app.globalData.cityId,
pageNum: this.pageNum,
pageSize: this.pageSize,
displayArea: 1
}
getCouponList(params).then(res => {
if (res.return_code == '000000' && res.return_data.list) {
this.productList = res.return_data.list;
if (res.return_data.total > 4) {
this.productListleg = 4;
return;
}
this.productListleg = res.return_data.total;
} else {
this.productList = [];
}
})
},
//积分卡券列表
getCouponListgold() {
let params = {
regionId: app.globalData.cityId,
pageNum: this.pageNum,
pageSize: this.pageSize,
displayArea: 2
}
getCouponList(params).then(res => {
if (res.return_code == '000000' && res.return_data.list) {
this.goldproductList = res.return_data.list;
this.goldproductListleg = res.return_data.total;
if (res.return_data.total > 4) {
this.goldproductListleg = 4;
return;
}
this.goldproductListleg = res.return_data.total;
} else {
this.productList = [];
}
})
},
//轮播图指示器
swiperChange(event) {
this.currentSwiper = event.detail.current;
},
eheckStu(item) {
this.cpStuats = item;
},
//获取登陆信息
getuserinfos() {
let that = this;
// 获取微信用户信息
uni.getUserProfile({
desc: '登录中...',
success: function(res) {
let params = {
openId: app.globalData.openId,
iv: res.iv,
encryptedData: res.encryptedData
}
getUserInfo(params).then(res => {
if (res.return_code == '000000') {
uni.hideLoading();
uni.showToast({
title: '获取信息成功',
icon: 'none',
duration: 2000
})
app.globalData.userInfo = res
.return_data
.object
.highUser;
app.globalData.token = res
.return_data.uniqueCode;
uni.setStorage({
key: "user",
data: res.return_data
.object
.highUser
})
uni.setStorage({
key: "token",
data: res.return_data
.uniqueCode
})
} else {
uni.hideLoading();
uni.showToast({
title: res.return_msg,
icon: 'none',
duration: 2000
})
}
});
},
fail: res => {
uni.hideLoading();
uni.showToast({
title: "微信登录授权失败",
icon: "none"
});
}
})
},
//跳转菜单
toCategory(item) {
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (!app.globalData.userInfo) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
if (item.title == '在线加油') {
uni.navigateTo({
url: item.ext1
})
} else if (item.title == '肯德基') {
uni.navigateTo({
url: '/pages/tabBar/order/order?id=1'
})
} else if (item.title == '电影票') {
uni.navigateTo({
url: '/pages/tabBar/order/order?id=2'
})
} else if (item.title == '话费充值') {
uni.navigateTo({
url: '../../../subPages/recharge/recharge'
})
} else {
uni.showToast({
title: '暂未开通',
icon: 'none',
duration: 2000
})
}
},
//轮播跳转活动
jumplottery(item) {
if (item.ext1) {
uni.navigateTo({
url: item.ext1
})
}
},
//单独跳转话费充值
jumphuafei(item) {
// if (!app.globalData.userInfo) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
// if (!app.globalData.userInfo.phone) {
// uni.navigateTo({
// url: '../../userLogin/userLogin'
// })
// return;
// }
if (item.title == '汇联通') {
uni.navigateTo({
url: '/pages/goods/goods-list/goods-list?id=2'
})
return;
}
if (item.title == '在线加油') {
uni.navigateTo({
url: '/pages/goods/refuel/refuel'
})
return;
}
if (item.title == '话费充值') {
uni.navigateTo({
url: '../../../subPages/recharge/recharge'
})
return;
}
if (item.title == '电影票') {
uni.navigateTo({
url: '/pages/tabBar/order/order?id=2'
})
return;
}
if (item.title == '肯德基') {
uni.navigateTo({
url: '/pages/tabBar/order/order?id=1'
})
return;
}
if (item.title == '优选商品') {
uni.navigateTo({
url: '../../../subPages/preferred-goods/preferred-goods'
})
return;
}
if (item.title == '优惠券包') {
uni.navigateTo({
url: '../../../subPages/coupon-package/coupon-package'
})
return;
}
},
//调整商品列表
goGoodsList(item) {
uni.navigateTo({
url: '/pages/goods/goods-list/goods-list?id=' + item
})
},
//拨打客服电话
playPhone() {
uni.showModal({
title: '客服',
content: '4006780738',
success: function(res) {
if (res.confirm) {
uni.makePhoneCall({
phoneNumber: '4006780738', //电话号码
success: function(e) {
console.log(e);
},
fail: function(e) {
console.log(e);
}
})
}
}
})
}
},
};
</script>
<style lang="scss">
page {
position: relative;
background-color: #F5F5F5;
}
.popImg {
width: 300px;
height: 440px;
}
.h5xfimg {
width: 80rpx;
bottom: 140rpx;
position: fixed;
right: 40rpx;
}
.xfimg {
width: 80rpx;
bottom: 60rpx;
position: fixed;
right: 40rpx;
}
@font-face {
font-family: 'HMfont-home';
src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
button::after {
border: none
}
.pullDown-effects {
position: fixed;
//top: calc(100upx - 36vw);
top: 0;
z-index: 9;
width: 100%;
height: 36vw;
/* #ifdef APP-PLUS */
padding-top: var(--status-bar-height);
/* #endif */
image {
width: 100%;
height: 36vw;
}
}
.status {
width: 100%;
height: 0;
position: fixed;
z-index: 10;
background-color: #fff;
top: 0;
/* #ifdef APP-PLUS */
height: var(--status-bar-height); //覆盖样式
/* #endif */
}
.header {
width: 92%;
padding: 0 4%;
height: 100upx;
display: flex;
align-items: center;
position: fixed;
background-color: #0083f5;
top: 0;
z-index: 10;
/* #ifdef APP-PLUS */
top: var(--status-bar-height);
/* #endif */
.addr {
width: 120upx;
height: 45rpx;
flex-shrink: 0;
display: flex;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
align-items: center;
font-size: 28upx;
color: #FFFFFF;
.icon {
height: 60upx;
margin-right: 5upx;
display: flex;
align-items: center;
font-size: 42upx;
color: #ffc50a;
}
}
.input-box {
width: 100%;
height: 70rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
position: relative;
display: flex;
align-items: center;
.icon {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 0;
width: 60upx;
height: 60upx;
font-size: 34upx;
color: #c0c0c0;
}
input {
padding-left: 28upx;
height: 28upx;
font-size: 28upx;
width: 100%;
}
}
.icon-btn {
width: 60upx;
height: 60upx;
flex-shrink: 0;
display: flex;
.icon {
width: 60upx;
height: 60upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 42upx;
background-color: transparent;
}
}
}
.place {
background-color: #ffffff;
height: 100upx;
/* #ifdef APP-PLUS */
margin-top: var(--status-bar-height);
/* #endif */
}
.viewbor {
border-radius: 0px 0px 10px 10px;
position: relative;
}
.swiper {
width: 100%;
display: flex;
justify-content: center;
position: absolute;
top: 60px;
.swiper-box {
width: 92%;
height: 130px;
overflow: hidden;
border-radius: 15upx;
box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
//兼容ios，微信小程序
position: relative;
z-index: 1;
swiper {
width: 100%;
height: 130px;
swiper-item {
image {
width: 100%;
height: 130px;
}
}
}
.indicator {
position: absolute;
bottom: 20upx;
left: 20upx;
background-color: rgba(255, 255, 255, 0.4);
width: 150upx;
height: 5upx;
border-radius: 3upx;
overflow: hidden;
display: flex;
.dots {
width: 0upx;
background-color: rgba(255, 255, 255, 1);
transition: all 0.3s ease-out;
&.on {
width: (100%/3);
}
}
}
}
}
.banner {
width: 92%;
margin: 40upx 4%;
image {
width: 100%;
height: 20vw;
border-radius: 10vw;
}
}
.promotion {
width: 92%;
margin: 0 4%;
.text {
width: 100%;
height: 60upx;
font-size: 34upx;
font-weight: 600;
margin-top: -10upx;
}
.list {
width: 100%;
display: flex;
justify-content: space-between;
.column {
width: 43%;
padding: 15upx 3%;
background-color: #ebf9f9;
border-radius: 10upx;
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.top {
width: 100%;
height: 40upx;
display: flex;
align-items: center;
margin-bottom: 5upx;
.title {
font-size: 30upx;
}
.countdown {
margin-left: 20upx;
display: flex;
height: 40upx;
display: flex;
align-items: center;
font-size: 20upx;
view {
height: 30upx;
background-color: #0083f5;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
border-radius: 4upx;
margin: 0 4upx;
padding: 0 2upx;
}
}
}
.left {
width: 50%;
height: 18.86vw;
display: flex;
flex-wrap: wrap;
align-content: space-between;
.ad {
margin-top: 5upx;
width: 100%;
font-size: 22upx;
color: #acb0b0;
}
.into {
width: 100%;
font-size: 24upx;
color: #aaa;
margin-bottom: 5upx;
}
}
.right {
width: 18.86vw;
height: 18.86vw;
image {
width: 18.86vw;
height: 18.86vw;
}
}
}
}
}
.category-list {
width: 100%;
padding: 0 0 30upx 0;
background-color: #FFFFFF;
border-bottom: solid 2upx #f6f6f6;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.category {
width: 25%;
margin-top: 50upx;
display: flex;
flex-wrap: wrap;
.img {
width: 100%;
display: flex;
justify-content: center;
image {
width: 9vw;
height: 9vw;
}
}
.text {
margin-top: 16upx;
width: 100%;
display: flex;
justify-content: center;
font-size: 24upx;
color: #3c3c3c;
}
}
}
.goods-list {
background-color: #FFFFFF;
margin-top: 40px;
.title {
height: 80rpx;
color: #333333;
text-align: center;
margin-top: 10px;
font-size: 30rpx;
width: 100px;
line-height: 80rpx;
margin-bottom: 10px;
float: left;
}
.active_tie {
font-size: 42rpx;
font-weight: bold;
height: 80rpx;
color: #333333;
margin-top: 10px;
text-align: center;
width: 100px;
line-height: 80rpx;
margin-bottom: 10px;
float: left;
}
.loading-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 60upx;
color: #979797;
font-size: 24upx;
}
.product-list {
width: 92%;
padding: 0 4% 3vw 4%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.product {
width: 48%;
border-radius: 20upx;
background-color: #fff;
margin: 0 0 15upx 0;
box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
image {
width: 100%;
border-radius: 20upx 20upx 0 0;
}
.name {
width: 92%;
padding: 8upx 4%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-align: justify;
overflow: hidden;
font-size: 30upx;
}
.info {
display: flex;
justify-content: space-between;
align-items: flex-end;
width: 92%;
padding: 10upx 4% 10upx 4%;
.price {
color: #e65339;
font-size: 30upx;
font-weight: 600;
}
.slogan {
color: #807c87;
font-size: 24upx;
text-decoration: line-through;
}
}
}
}
}
//赠券专区
.orange-wrap {
position: relative;
box-sizing: border-box;
}
.orange-title {
display: flex;
justify-content: space-between;
margin-bottom: 20rpx;
padding-right: 30rpx;
}
.orange-title .al {
font-weight: 700;
font-size: 34rpx;
}
.orange-title .ar {
font-size: 28rpx;
color: #777;
position: relative;
top: 10rpx;
}
.orange-content {
height: 170px;
width: 90%;
margin-left: 5%;
border-radius: 0 0 10px 10px;
margin-top: -5px;
background-color: white;
box-shadow: 0rpx 8rpx 25rpx rgba(0, 0, 0, 0.2);
}
.swiper-hed {
width: 28%;
}
.orange-content .swiper-item {
height: 180rpx;
margin-left: 14rpx;
margin-top: 14rpx;
float: left;
}
.orange-content .swiper-item .img {
width: 100%;
height: 100%;
// border-Radius:10rpx;
}
.orange-content .swiper-item .subject {
font-size: 26rpx;
width: 100%;
color: #ff5836;
display: flex;
align-items: center;
}
.lookmore {
background-color: #e2e2e2;
text-align: center;
line-height: 140rpx;
}
.lookmore .moretext {
color: #777;
font-size: 28rpx;
}
//弹窗
button::after {
border: none
}
.Popup {
width: 600rpx;
background-color: #fff;
position: fixed;
top: 50%;
left: 50%;
margin-left: -300rpx;
transform: translateY(-50%);
z-index: 320;
}
.Popup {
.logo-auth {
z-index: -1;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -50%);
width: 150rpx;
height: 150rpx;
display: flex;
align-items: center;
justify-content: center;
border: 8rpx solid #fff;
border-radius: 50%;
background: #fff;
}
image {
height: 80rpx;
margin-top: -54rpx;
}
}
.Popup .title {
font-size: 28rpx;
color: #000;
text-align: center;
margin-top: 30rpx
}
.Popup .tip {
font-size: 14px;
color: #555;
padding: 0 24rpx;
margin-top: 50rpx;
text-align: center;
}
.Popup .bottom .item {
width: 50%;
height: 90rpx;
background-color: #eeeeee;
text-align: center;
line-height: 90rpx;
font-size: 14px;
color: #666;
margin-top: 54rpx;
}
.Popup .bottom .item.on {
width: 100%
}
.flex {
display: flex;
}
.Popup .bottom .item.grant {
font-size: 28rpx;
color: #fff;
font-weight: bold;
background-color: #a1bac5;
border-radius: 0;
padding: 0;
}
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.65);
z-index: 310;
}
</style>