high-mini/pages/tabBar/user/user.vue

<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="status"></view>
		<!-- #endif -->
		<view class="user">
			<!-- 头像 -->
			<view class="left">
				<image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image>
				<image :src="user.headerImg" v-else></image>
			</view>
			<!-- 昵称 -->
			<template v-if="!user">
				<view class="right" @click="logInMethod">
					<view class=" fcorfff fontwig6 font18">未登录</view>
				</view>
			</template>
			<template v-else>
			<view class="right">
				<!-- #ifdef MP -->
				<view class="username" v-if="user && user.infoCompleteStatus == 1" @click="jumplogin">点击获取信息</view>
				<view class="username" v-else>{{user.name}}</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view class="username">{{user.name}}</view>
				<!-- #endif -->
				<view class="font14 fcor333">{{userphone}}</view>
			</view>
			</template>
		</view>
		<!-- 优惠券，卡券 -->
		<view class="headcoun width100">
			<view class="height80 alijus width92 border-8r backcorfff">
				<view class=" fotct" style="width: 33%;" @click="jumppage(5)">
					<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> 张</view>
					<view class="width100 font18 fcor333 mart5">卡券</view>
				</view>
				<view style="width: 1px;height: 50px;background-color: #f6f6f6;">
				</view>
				<view class=" fotct" style="width: 33%;"  @click="jumppage(6)">
					<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> 张</view>
					<view class="width100 font18 fcor333 mart5">优惠券</view>
				</view>
				
				<view style="width: 1px;height: 50px;background-color: #f6f6f6;">
				</view>
				<view class=" fotct" style="width: 33%;"  @click="jumppage(7)">
					<view class="width100 font12 fcor333"><text class="font20 marglerig">{{payactivitynum}} </text> 张</view>
					<view class="width100 font18 fcor333 mart5">活动券</view>
				</view>
			</view>
		</view>

		<!-- 订单-余额 -->
		<view class="order">
			<!-- 订单类型 -->
			<view class="title width94">
				<view class="width70 fontwig6">订单</view>
				<view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15"
						mode="aspectFit" style="width: 15px;height: 15px;" src="../../../static/img/jt.png">
					</image>
				</view>
			</view>
			<view class="list">
				<view class="box" style="position: relative;" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
					<uni-badge style="width: 20px;position: absolute; right:20%;z-index:9;" v-if="row.text == '待支付' && therrNum "
						:text="therrNum" type="error" size="normal"></uni-badge>
					<uni-badge style="width: 20px;position: absolute; right:20%;z-index:9;"
						v-if="row.text == '已支付' && orderPayNum " :text="orderPayNum" type="error" size="normal">
					</uni-badge>
					<uni-badge style="width: 20px;position: absolute; right:20%;z-index:9;"
						v-if="row.text == '已完成' && whetherCheckNum " :text="whetherCheckNum" type="error" size="normal">
					</uni-badge>
					<view class="img">
						<image :src="row.icon" class="icon40" style="width: 40px;height: 40px;" mode="aspectFit"></image>
					</view>
					<view class="text mart10">{{row.text}}</view>
				</view>
			</view>
			<view class="width90 mart10 height60" v-if="nopaylist != ''">
				<swiper circular="true" interval="3000" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper,index) in nopaylist" :key="index"
						@click="jumpDetails(swiper.orderNo,swiper.productType)">
						<view class="alijusstart  border-8r backcor9 height60 ">
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order7.png"
								v-if="swiper.productType== 1"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order9.png"
								v-if="swiper.productType== 2"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order3.png"
								v-if="swiper.productType== 3"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order2.png"
								v-if="swiper.productType== 4"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order5.png"
								v-if="swiper.productType== 5"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order4.png"
								v-if="swiper.productType== 6"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order8.png"
								v-if="swiper.productType== 7"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/unioncard.png"
								v-if="swiper.productType== 8"></image>
							<image mode="widthFix" class="icon40 margle10" src="../../../static/img/order6.png"
								v-if="swiper.productType== 9">
							</image>
							<view class="width50  margle10">
								<view class="font15 fcor333 fontspec">等待付款</view>
								<view class="font12 fcor666 fontspec mart5">剩余时间: {{countdownm}}分钟</view>
							</view>
							<view class="topay">
								去支付
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>

		<!-- 我的资产 -->
		<view class="order">
			<view class="title width94">
				<view class="width70 fontwig6 alijusstart">我的资产
					<image mode="aspectFit" style="width: 20px;height: 20px;" class="icon20 margle" v-show="assetsstu == 2" @click="updatestu(2)"
						src="../../../static/img/user/user6.png"></image>
					<image mode="aspectFit" style="width: 20px;height: 20px;" class="icon20 margle" v-show="assetsstu == 1" @click="updatestu(1)"
						src="../../../static/img/user/user14.png"></image>
				</view>
				<view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15"
						mode="aspectFit" style="width: 15px;height: 15px;" src="../../../static/img/jt.png">
					</image>
				</view>
			</view>
			<view class="mart15 width90 alijus fotct paddbotm10">
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">{{userAccount.integral}}</view>
					<view class="fontspec font14 fcor333 mart5">积分余额</view>
				</view>
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥{{userAccount.oilCardPrice}}
					</view>
					<view class="fontspec font14 fcor333 mart5">油卡余额</view>
				</view>
				<view class="width31">
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
					<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥{{userAccount.hltCardPrice}}
					</view>
					<view class="fontspec font14 fcor333 mart5">工会卡余额</view>
				</view>
			</view>
		</view>

		<!-- 商务中心 -->
		<view class="order">
			<view class="title width94">
				<view class="width70 fontwig6">商务中心</view>
			</view>
			<view class="width90 alijus fotct paddbotm10 mart10">
				<view class="width31" @click="jumppage(1)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user7.png"></image>
					<view class="fontspec font14 fcor333 mart5">门店登陆</view>
				</view>
				<view class="width31" @click="jumppage(2)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user8.png"></image>
					<view class="fontspec font14 fcor333 mart5">代理商登陆</view>
				</view>
				<view class="width31" @click="jumppage(3)">
					<image mode="widthFix" class="icon45" src="../../../static/img/user/user9.png"></image>
					<view class="fontspec font14 fcor333 mart5">我的推广</view>
				</view>
			</view>
		</view>


		<!-- 其他 -->
		<view class="order">
			<view class="height20 width94">
			</view>
			<view class="list">
				<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
					<view class="img" v-if="row.text != '客服' ">
						<image :src="row.img" class="icon40" mode="widthFix"></image>
					</view>
					<button open-type="contact" style="background-color: transparent;" class="img" show-message-card
						session-from send-message-path send-message-title v-if="row.text == '客服' ">
						<image class="icon40" mode="widthFix" :src="row.img"></image>
					</button>
					<view class="text mart10">{{row.text}}</view>
				</view>
			</view>
		</view>
		<view class="place-bottom"></view>
	</view>
</template>
<script>
	import {
		loginByPhone,
		findUser,
		loginOut,
		getUserAccount,
		getUserOrderList,
		orderCheck,
		queryHzfDiscountTotalNum
	} from "../../../Utils/Api.js";
	// import authorize from '../../../components/Authorize';
	import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue";
	let app = getApp()
	export default {
		components: {
			// authorize,
			uniBadge
		},
		data() {
			return {
				imagewxUrl: app.globalData.imageWxImg,
				imgadres: 'head.png',
				textnum: '',
				textSend: '',
				therrNum: '',
				payactivitynum:'',
				rechargeOrderNum: '', //话费待支付
				whetherCheckNum: '', //未查看数量
				orderPayNum: '', //支付订单数量
				//个人信息,
				user: "",
				// 订单类型
				orderList: [{
						text: '待支付',
						icon: "../../../static/img/user/user1.png"
					},
					{
						text: '已支付',
						icon: "../../../static/img/user/user2.png"
					},
					{
						text: '已完成',
						icon: "../../../static/img/user/user3.png"
					}, {
						text: '已退款',
						icon: "../../../static/img/user/user4.png"
					}
				],
				//操作列表
				czList: '',
				nopaylist: [],
				assetsstu: 2,
				userphone: '', // 手机号
				userAccount: '', //用户余额,
				countdownm: '', // 倒计时分
				countdowns: '', // 倒计时秒

			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		onLoad() {
			if(!app.globalData.userInfo&&!app.globalData.token){
				 /* 没登录 */
				// #ifdef MP
				uni.navigateTo({
					url: '/pages/userLogin/userLogin'
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/login/register'
				})
				// #endif
			}else{
					this.findUser();
			}
			
			
		},
		onReady() {
			//此处，演示,每次页面初次渲染都把登录状态重置
			// uni.setStorage({
			// 	key: 'UserInfo',
			// 	data: false,
			// 	success: function() {},
			// 	fail: function(e) {}
			// });
		},
		onShow() {
			if (app.globalData.userInfo) {
				this.findUser();
				this.queryHzfDiscountTotalNum();
			}
			// #ifdef MP
			if (!app.globalData.userInfo.isSetPayPwd) {
				this.czList = [{
						url: '/pages/goods/recording/recording',
						text: '积分记录',
						img: '../../../static/img/user/user10.png'
					},

					{
						url: '../../login/updatePas/updatePas',
						text: '支付密码',
						img: '../../../static/img/user/user11.png'
					}, {
						url: '',
						text: '客服',
						img: '../../../static/img/user/user13.png'
					},
					{
						url:"/physical-merchants/address/address",
						text: '我的地址',
						img: '../../../static/img/adresw.png'
					}
				]
				return;
				
			}
			this.czList = [{
					url: '/pages/goods/recording/recording',
					text: '积分记录',
					img: '../../../static/img/user/user10.png'
				},
				{
					url: '../../login/updatePas/resetPas',
					text: '支付密码',
					img: '../../../static/img/user/user11.png'
				}, {
					url: '',
					text: '客服',
					img: '../../../static/img/user/user13.png'
				},
				{
					url:"/physical-merchants/address/address",
					text: '我的地址',
					img: '../../../static/img/adresw.png'
				}
			]
			// #endif
			// #ifdef H5
			let url = "../../login/updatePas/resetPas";
			if (!app.globalData.userInfo.isSetPayPwd) {
				 url = "../../login/updatePas/updatePas";
			}
			
			if(app.globalData.userInfo&&app.globalData.token){
				this.czList = [{
						url: '/pages/goods/recording/recording',
						text: '积分记录',
						img: '../../../static/img/ghkpay.png'
					},
					{
						url: url,
						text: '支付密码',
						img: '../../../static/img/user/user11.png'
					},
					{
						url: '',
						text: '退出登录',
						img: '../../../static/img/exit.png'
					},
					{
						url: '',
						text: '客服',
						img: '../../../static/img/user/user13.png'
					},
					{
						url:"/physical-merchants/address/address",
						text: '我的地址',
						img: '../../../static/img/adresw.png'
					}
				]
			}else{
				this.czList = [{
						url: '/pages/goods/recording/recording',
						text: '积分记录',
						img: '../../../static/img/ghkpay.png'
					},
					{
						url: url,
						text: '支付密码',
						img: '../../../static/img/user/user11.png'
					},
					// {
					// 	url: '',
					// 	text: '退出登录',
					// 	img: '../../../static/img/exit.png'
					// },
					{
						url: '',
						text: '客服',
						img: '../../../static/img/user/user13.png'
					},
					{
						url:"/physical-merchants/address/address",
						text: '我的地址',
						img: '../../../static/img/adresw.png'
					}
				]
			}
			
			// #endif
		},
		methods: {
			// 点击登录
			logInMethod(){
				// #ifdef MP
				uni.navigateTo({
					url: '/pages/userLogin/userLogin'
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/login/register'
				})
				// #endif
			},
			//查询我的信息接口
			findUser() {
				findUser().then(res => {
					if (res.return_code == '000000') {
						app.globalData.userInfo = res.return_data;
						this.user = res.return_data;
						this.textnum = res.return_data.unusedCouponNum;
						this.textSend = res.return_data.unusedDiscount;
						this.therrNum = res.return_data.unpaid;
						this.whetherCheckNum = res.return_data.whetherCheckNum;
						this.orderPayNum = res.return_data.orderPayNum;
						this.rechargeOrderNum = res.return_data.rechargeOrderNum;
						this.geTel(this.user.phone);
						this.getUserOrderList();
						uni.setStorage({
							key: "user",
							data: res.return_data
						})
					}
				});
			},
			//查询活动次数
			queryHzfDiscountTotalNum(){
				queryHzfDiscountTotalNum().then(res => {
					if (res.return_code == '000000') {
						this.payactivitynum = res.return_data;
					}
				});
			},
			//查询订单列表
			getUserOrderList() {
				// uni.showLoading({
				// 	title: '加载中...'
				// })
				let params = {
					status: 1,
					pageNum: 1,
					pageSize: 5
				}
				getUserOrderList(params).then(res => {
					// uni.hideLoading();
					if (res.return_code == '000000' && res.return_data.list != '') {
						this.nopaylist = res.return_data.list;
						this.timesettime(res.return_data.list[0].createTime);
					} else {
						this.nopaylist = [];
					}
				})
			},
			//跳转用户信息
			jumplogin() {
				uni.navigateTo({
					url: '../../userLogin/userLogin'
				})
			},
			toOrderList(index) {
				uni.navigateTo({
					url: '../../user/order_list/order_list?tbIndex=' + index
				})
			},
			// 隐藏手机号
			geTel(tel) {
				var reg = /^(\d{3})\d{4}(\d{4})$/;
				this.userphone = tel.replace(reg, "$1****$2");
			},
			// 资产查看状态
			updatestu(item) {
				if (item == 1) {
					this.assetsstu = 2;
				}
				if (item == 2) {
					this.getUserAccount();
				}
			},

			//查询余额
			getUserAccount() {
				getUserAccount().then(res => {
					if (res.return_code == '000000') {
						this.assetsstu = 1;
						this.userAccount = res.return_data;
					}
				});
			},
			//轮播滚动
			swiperChange(e) {
				this.timesettime(this.nopaylist[e.detail.current].createTime);
			},
			//跳转详情
			jumpDetails(e, item) {
				//实物类型
				if(item == 12){
					uni.navigateTo({
						url:'/physical-merchants/classify/order/orderDetail?id='+e
						
					})
					return;
				}
				
				this.orderCheck(e);
				if (item == 1 || item == 2 || item == 3) {
					uni.navigateTo({
						url: '/qianzhu-KFC/order-details/order-details?id=' + e
					})
					return;
				}
				uni.navigateTo({
					url: '/pages/user/order_details/order_details?id=' + e
				})
			},
			//查看状态
			orderCheck(item) {
				let datas = {
					orderNo: item
				}
				orderCheck(datas).then(res => {

				});
			},
			//计算时间
			timesettime(item) {
				var nowtime = new Date(), //获取当前时间
					endtime = item + 600000; //定义结束时间
				var lefttime = endtime - nowtime, //距离结束时间的毫秒数
					leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数
					lefth = Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd * 24) < 10 ? "0" + Math.floor((lefttime /
						(1000 * 60 * 60) % 24) + leftd * 24) : Math.floor((lefttime / (1000 * 60 * 60) % 24) + leftd *
						24), //计算小时数
					leftm = Math.floor(lefttime / (1000 * 60) % 60) < 10 ? +Math.floor(lefttime / (1000 * 60) % 60) :
					Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数
					lefts = Math.floor(lefttime / 1000 % 60) < 10 ? "0" + Math.floor(lefttime / 1000 % 60) : Math.floor(
						lefttime / 1000 % 60); //计算秒数
				this.countdownm = leftm //返回倒计时的字符串
				this.countdowns = lefts //返回倒计时的字符串
			},
			// 推广
			jumppage(item) {
				if (item == 1) {
					uni.navigateTo({
						url: '../../login/login?id=1'
					})
				}
				if (item == 2) {
					uni.navigateTo({
						url: '../../login/login?id=2'
					})
				}
				if (item == 3) {
					uni.navigateTo({
						url: '/pages/user/myPromotion/myPromotion'
					})
				}
				if (item == 4) {
					uni.navigateTo({
						url: '../../../subPages/cardsList/cardsList'
					})
				}
				if (item == 5) {
					uni.navigateTo({
						url: '/pages/user/mineCoupons/mineCoupons'
					})
				}
				if (item == 6) {
					uni.navigateTo({
						url: '../../user/coupon/coupon'
					})
				}
				if (item == 7) {
					uni.navigateTo({
						url: '/pages/user/payActivity/payActivity'
					})
				}
			},
			toPage(url, item) {
				let that = this;
				if (item != '客服'&&url!="") {
					uni.navigateTo({
						url: url
					})
				}
				// #ifdef H5
				let cont = "本服务由惠兑礼品提供\n400-678-0738";
				let content = cont.replace(/<br>/g, "\n");
				if (item == '客服') {
					uni.showModal({
						title: '客服',
						content: content,
						success: function(res) {
							if (res.confirm) {
								uni.makePhoneCall({
									phoneNumber: '4006780738', //电话号码
									success: function(e) {
										console.log(e);
									},
									fail: function(e) {
										console.log(e);

									}
								})
							}
						}
					})
				}
				// #endif
				if (item == '退出登录') {
					uni.showModal({
						title: '退出登录',
						content: '是否退出当前账号',
						success: function(res) {
							if (res.confirm) {
								loginOut().then(res => {
									if (res.return_code == '000000') {
										app.globalData.userInfo = '';
										app.globalData.token = '';
										that.textnum = '';
										that.textSend = '';
										that.therrNum = '';
										that.payactivitynum = '';
										that.whetherCheckNum = '';
										that.orderPayNum = '';
										that.rechargeOrderNum = '';
										that.userphone = '';
										that.user = '';
										uni.setStorage({
											key: "user",
											data: ''
										})
										uni.setStorage({
											key: "token",
											data: ''
										})
										// location.reload();
										uni.navigateTo({
											url: '/pages/login/register'
										})
									}
								});
							}
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f5f5f5;
		overflow: hidden;
		overflow-y: auto;
	}

	.status {
		width: 100%;
		height: 44px;
		background-color: #6fbdee;
	}


	button::after {
		border: none
	}

	.headcoun {
		background: linear-gradient(to bottom, #e8eff4, #f5f5f5);
		height: 100px;
	}

	.topay {
		width: 70px;
		height: 25px;
		font-size: 14px;
		text-align: center;
		line-height: 25px;
		border-radius: 20px;
		border: 1px solid #009DFF;
		color: #009DFF;
	}

	.place-bottom {
		height: 200upx;
	}

	swiper {
		height: 60px !important;
	}

	swiper-item {
		height: 60px !important;
	}

	.user {
		width: 96%;
		padding: 0 0 0 4%;
		display: flex;
		align-items: center;
		// position: relative;
		padding-bottom: 40rpx;
		background: linear-gradient(to bottom, #6fbdee, #e8eff4);

		.left {
			width: 20vw;
			height: 20vw;
			flex-shrink: 0;
			margin-right: 20upx;
			border: solid 1upx #fff;
			border-radius: 100%;

			image {
				width: 20vw;
				height: 20vw;
				border-radius: 100%;
			}

		}

		.right {
			width: 100%;

			.username {
				font-size: 36upx;
				color: #333333;
			}

			.signature {
				color: #eee;
				font-size: 28upx;
			}
		}

		.erweima {
			flex-shrink: 0;
			width: 100px;
			height: 30px;
			border-radius: 15px 0px 0px 15px;
			padding: 0;
			margin-left: 5vw;
			background-color: #1391f6;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.icon {
				color: #7b6335;
				font-size: 42upx;
			}
		}
	}

	.order {
		.title {
			padding-top: 10px;
			padding-bottom: 10px;
			font-size: 36upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		width: 92%;
		margin: 30rpx 4% 30rpx 4%;
		padding: 0rpx 0% 40rpx 0%;
		background-color: #fff;
		box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx;

		.list {
			display: flex;
			padding-bottom: 10upx;
			flex-wrap: wrap;
			.box {
				width: 25%;
				margin-bottom: 10px;
				.img {
					width: 100%;
					display: flex;
					justify-content: center;
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 28upx;
					color: #3d3d3d;
				}
			}
		}

		.balance-info {
			display: flex;
			padding: 10upx 0;

			.left {
				width: 75%;
				display: flex;

				.box {
					width: 50%;
					font-size: 28upx;

					.num {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;
						color: #f9a453;
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						color: #3d3d3d;
						font-size: 28upx;
					}
				}
			}

			.right {
				border-left: solid 1upx #17e6a1;
				width: 25%;

				.box {

					.img {
						width: 100%;
						height: 50upx;
						display: flex;
						justify-content: center;
						align-items: flex-end;

						.icon {
							font-size: 45upx;
							color: #e78901;
						}
					}

					.text {
						width: 100%;
						display: flex;
						justify-content: center;
						font-size: 28upx;
						color: #3d3d3d;
					}
				}
			}
		}
	}

	.toolbar {
		width: 92%;
		margin: 0 4% 0 4%;
		padding: 0 0 20upx 0;
		background-color: #fff;
		box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
		border-radius: 15upx;

		.title {
			padding-top: 10upx;
			margin: 0 0 10upx 3%;
			font-size: 30upx;
			height: 80upx;
			display: flex;
			align-items: center;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.box {
				width: 25%;
				margin-bottom: 40upx;

				.img {
					width: 23vw;
					height: 10.5vw;
					display: flex;
					justify-content: center;

					image {
						width: 9vw;
						height: 9vw;
					}
				}

				.text {
					width: 100%;
					display: flex;
					justify-content: center;
					font-size: 26upx;
					color: #3d3d3d;
				}
			}
		}
	}
</style>