| 
									
										
										
										
											2024-09-23 17:39:15 +08:00
										 |  |  |  | <template> | 
					
						
							|  |  |  |  | 	<view class="centenr"> | 
					
						
							|  |  |  |  | 		<view class="Candywrapper"> | 
					
						
							|  |  |  |  | 			<view class="tab-box"> | 
					
						
							|  |  |  |  | 				<view class="tab_" :class="{active:index== type }" @click="getindex(index)" | 
					
						
							|  |  |  |  | 					v-for="(item,index) in  tabs" :key="index"> | 
					
						
							|  |  |  |  | 					{{ item.name }} | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 			</view> | 
					
						
							|  |  |  |  | 			<view v-if="type==0"> | 
					
						
							| 
									
										
										
										
											2024-09-24 09:56:46 +08:00
										 |  |  |  | 				<view class="card_box c-url"> | 
					
						
							| 
									
										
										
										
											2024-09-23 17:39:15 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | 					<view style="margin: 13px 0px;">可用余额(元)</view> | 
					
						
							|  |  |  |  | 					<view class="r-num">1299.00</view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<view class="tab-bs"> | 
					
						
							|  |  |  |  | 					<view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view> | 
					
						
							|  |  |  |  | 					<view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<view class="bai_box"> | 
					
						
							|  |  |  |  | 					<view class="left-img"> | 
					
						
							|  |  |  |  | 						<!-- <image src="../../static/icon/hyxf.png" mode=""></image> --> | 
					
						
							|  |  |  |  | 						<image src="../../static/icon/jfdh.png" mode=""></image> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 					<view style="width: 85%;"> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="l-text">积分兑换</view> | 
					
						
							|  |  |  |  | 							<view class="r-text">900</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">储值卡</view> | 
					
						
							|  |  |  |  | 							<view class="">余额120000.00</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">中建锦绣二期店</view> | 
					
						
							|  |  |  |  | 							<view class="">2024-09-09 16:54:09</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<view class="bai_box"> | 
					
						
							|  |  |  |  | 					<view class="left-img"> | 
					
						
							|  |  |  |  | 						<image src="../../static/icon/hycz.png" mode=""></image> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 					<view style="width: 85%;"> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="l-text">会员充值</view> | 
					
						
							|  |  |  |  | 							<view class="r-text">900</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">储值卡</view> | 
					
						
							|  |  |  |  | 							<view class="">余额120000.00</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">中建锦绣二期店</view> | 
					
						
							|  |  |  |  | 							<view class="">2024-09-09 16:54:09</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<view class="bai_box"> | 
					
						
							|  |  |  |  | 					<view class="left-img"> | 
					
						
							|  |  |  |  | 						<image src="../../static/icon/yp.png" mode=""></image> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 					<view style="width: 85%;"> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="l-text">油品</view> | 
					
						
							|  |  |  |  | 							<view class="r-text">900</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">储值卡</view> | 
					
						
							|  |  |  |  | 							<view class="">余额120000.00</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">中建锦绣二期店</view> | 
					
						
							|  |  |  |  | 							<view class="">2024-09-09 16:54:09</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<!-- <view v-if="!pointsList || pointsList.length==0"> | 
					
						
							|  |  |  |  | 				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> | 
					
						
							|  |  |  |  | 				</u-empty> | 
					
						
							|  |  |  |  | 			</view> --> | 
					
						
							|  |  |  |  | 				<u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1" | 
					
						
							|  |  |  |  | 					@confirm="confirm1"></u-datetime-picker> | 
					
						
							|  |  |  |  | 				<u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker> | 
					
						
							|  |  |  |  | 			</view> | 
					
						
							|  |  |  |  | 			<view v-if="type==1"> | 
					
						
							|  |  |  |  | 				<view class="tab-bs"> | 
					
						
							|  |  |  |  | 					<view class="w_box" @click="show1 = true">类型筛选 <u-icon name="arrow-down-fill"></u-icon> </view> | 
					
						
							|  |  |  |  | 					<view class="w_box" @click="show = true">全部时间 <u-icon name="arrow-down-fill"></u-icon> </view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<view class="bai_box"> | 
					
						
							|  |  |  |  | 					<view class="left-img"> | 
					
						
							|  |  |  |  | 						<image src="../../static/icon/hyxf.png" mode=""></image> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 					<view style="width: 85%;"> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="l-text">额度增加</view> | 
					
						
							|  |  |  |  | 							<view class="r-text">+2000.00</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">小小(156****6655)</view> | 
					
						
							|  |  |  |  | 							<view class="">当前额度0.00</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 						<view class="right-box"> | 
					
						
							|  |  |  |  | 							<view class="">操作人:问问</view> | 
					
						
							|  |  |  |  | 							<view class="">2024-09-09 16:54:09</view> | 
					
						
							|  |  |  |  | 						</view> | 
					
						
							|  |  |  |  | 					</view> | 
					
						
							|  |  |  |  | 				</view> | 
					
						
							|  |  |  |  | 				<!-- <view v-if="!pointsList || pointsList.length==0"> | 
					
						
							|  |  |  |  | 				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"> | 
					
						
							|  |  |  |  | 				</u-empty> | 
					
						
							|  |  |  |  | 			</view> --> | 
					
						
							|  |  |  |  | 				<u-datetime-picker :show="show" v-model="value1" mode="year-month" @cancel="cancel1" | 
					
						
							|  |  |  |  | 					@confirm="confirm1"></u-datetime-picker> | 
					
						
							|  |  |  |  | 				<u-picker :show="show1" :columns="columns" @cancel="cancel" @confirm="confirm"></u-picker> | 
					
						
							|  |  |  |  | 			</view> | 
					
						
							|  |  |  |  | 		</view> | 
					
						
							|  |  |  |  | 	</view> | 
					
						
							|  |  |  |  | </template> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | <script> | 
					
						
							|  |  |  |  | 	import request from '../../utils/request' | 
					
						
							|  |  |  |  | 	export default { | 
					
						
							|  |  |  |  | 		data() { | 
					
						
							|  |  |  |  | 			return { | 
					
						
							|  |  |  |  | 				tabs: [{ | 
					
						
							|  |  |  |  | 					name: '余额明细', | 
					
						
							|  |  |  |  | 				}, { | 
					
						
							|  |  |  |  | 					name: '额度明细', | 
					
						
							|  |  |  |  | 				}, ], | 
					
						
							|  |  |  |  | 				type: 0, | 
					
						
							|  |  |  |  | 				query: { | 
					
						
							|  |  |  |  | 					chainStoreId: '', | 
					
						
							|  |  |  |  | 					couponType: '', | 
					
						
							|  |  |  |  | 					useStatus: 0, | 
					
						
							|  |  |  |  | 					pageNo: 1, | 
					
						
							|  |  |  |  | 					pageSize: 10 | 
					
						
							|  |  |  |  | 				}, | 
					
						
							|  |  |  |  | 				cardBalance: {}, | 
					
						
							|  |  |  |  | 				show: false, | 
					
						
							|  |  |  |  | 				show1: false, | 
					
						
							|  |  |  |  | 				value1: Number(new Date()), | 
					
						
							|  |  |  |  | 				columns: [ | 
					
						
							|  |  |  |  | 					['全部类型', '油品', '积分兑换', '会员充值'] | 
					
						
							|  |  |  |  | 				], | 
					
						
							|  |  |  |  | 				queryParams: { | 
					
						
							|  |  |  |  | 					pageNo: 1, | 
					
						
							|  |  |  |  | 					pageSize: 30, | 
					
						
							|  |  |  |  | 					type: "", | 
					
						
							|  |  |  |  | 					storeId: uni.getStorageSync("storeId"), | 
					
						
							|  |  |  |  | 					changeReason: "", | 
					
						
							|  |  |  |  | 					startTime: "" | 
					
						
							|  |  |  |  | 				}, | 
					
						
							|  |  |  |  | 				pointsList: [], | 
					
						
							|  |  |  |  | 				total: 0 | 
					
						
							|  |  |  |  | 			} | 
					
						
							|  |  |  |  | 		}, | 
					
						
							|  |  |  |  | 		onShow() { | 
					
						
							|  |  |  |  | 			this.query.chainStoreId = uni.getStorageSync('chainStoreId'); | 
					
						
							|  |  |  |  | 			this.getUserBalance() | 
					
						
							|  |  |  |  | 			this.getList() | 
					
						
							|  |  |  |  | 		}, | 
					
						
							|  |  |  |  | 		onPullDownRefresh() { | 
					
						
							|  |  |  |  | 			console.log("刷新"); | 
					
						
							|  |  |  |  | 			this.pointsList = [] | 
					
						
							|  |  |  |  | 			this.queryParams = { | 
					
						
							|  |  |  |  | 				pageNo: 1, | 
					
						
							|  |  |  |  | 				pageSize: 30, | 
					
						
							|  |  |  |  | 				type: "", | 
					
						
							|  |  |  |  | 				storeId: uni.getStorageSync("storeId"), | 
					
						
							|  |  |  |  | 				changeReason: "", | 
					
						
							|  |  |  |  | 				startTime: "" | 
					
						
							|  |  |  |  | 			} | 
					
						
							|  |  |  |  | 			this.getList() | 
					
						
							|  |  |  |  | 		}, | 
					
						
							|  |  |  |  | 		onReachBottom() { | 
					
						
							|  |  |  |  | 			// 触底加载
 | 
					
						
							|  |  |  |  | 			if (this.pointsList.length < this.total) { | 
					
						
							|  |  |  |  | 				this.queryParams.pageNo++ | 
					
						
							|  |  |  |  | 				this.getList() | 
					
						
							|  |  |  |  | 			} | 
					
						
							|  |  |  |  | 		}, | 
					
						
							|  |  |  |  | 		methods: { | 
					
						
							|  |  |  |  | 			getindex(index) { | 
					
						
							|  |  |  |  | 				this.type = index | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			// 获取余额信息
 | 
					
						
							|  |  |  |  | 			getUserBalance() { | 
					
						
							|  |  |  |  | 				request({ | 
					
						
							|  |  |  |  | 					url: '/business/userManager/user/getUserBalanceApplet', | 
					
						
							|  |  |  |  | 					method: 'get', | 
					
						
							|  |  |  |  | 					params: this.query | 
					
						
							|  |  |  |  | 				}).then(res => { | 
					
						
							|  |  |  |  | 					if (res.code == 200) { | 
					
						
							|  |  |  |  | 						this.cardBalance = res.data | 
					
						
							|  |  |  |  | 					} | 
					
						
							|  |  |  |  | 				}) | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			getList() { | 
					
						
							|  |  |  |  | 				request({ | 
					
						
							|  |  |  |  | 					url: '/business/integral/integralDetail/queryByPageUni', | 
					
						
							|  |  |  |  | 					method: 'get', | 
					
						
							|  |  |  |  | 					params: this.queryParams | 
					
						
							|  |  |  |  | 				}).then(res => { | 
					
						
							|  |  |  |  | 					if (res.code == 200) { | 
					
						
							|  |  |  |  | 						this.pointsList = res.data.records | 
					
						
							|  |  |  |  | 						this.total = res.data.total | 
					
						
							|  |  |  |  | 					} | 
					
						
							|  |  |  |  | 				}) | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			confirm(e) { | 
					
						
							|  |  |  |  | 				this.queryParams.pageNo = 1 | 
					
						
							|  |  |  |  | 				if (e.value[0] == '全部类型') { | 
					
						
							|  |  |  |  | 					this.queryParams.type = "" | 
					
						
							|  |  |  |  | 				} else { | 
					
						
							|  |  |  |  | 					this.queryParams.type = e.value[0] | 
					
						
							|  |  |  |  | 				} | 
					
						
							|  |  |  |  | 				this.getList() | 
					
						
							|  |  |  |  | 				this.show1 = false | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			cancel() { | 
					
						
							|  |  |  |  | 				this.show1 = false | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			timestampToString(timestamp) { | 
					
						
							|  |  |  |  | 				// 将时间戳转换为Date对象
 | 
					
						
							|  |  |  |  | 				const date = new Date(timestamp); | 
					
						
							|  |  |  |  | 				// 使用toLocaleDateString和toLocaleTimeString可以根据本地格式转换日期和时间
 | 
					
						
							|  |  |  |  | 				const dateString = date.toLocaleDateString() | 
					
						
							|  |  |  |  | 				const timeString = date.toLocaleTimeString(); | 
					
						
							|  |  |  |  | 				// 返回日期和时间的组合
 | 
					
						
							|  |  |  |  | 				return date.getFullYear() + '-' + (date.getMonth() + 1); | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			confirm1(e) { | 
					
						
							|  |  |  |  | 				this.queryParams.startTime = this.timestampToString(e.value) | 
					
						
							|  |  |  |  | 				this.queryParams.pageNo = 1 | 
					
						
							|  |  |  |  | 				this.getList() | 
					
						
							|  |  |  |  | 				this.show = false | 
					
						
							|  |  |  |  | 			}, | 
					
						
							|  |  |  |  | 			cancel1() { | 
					
						
							|  |  |  |  | 				this.show = false | 
					
						
							|  |  |  |  | 			} | 
					
						
							|  |  |  |  | 		} | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | </script> | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | <style scoped lang="scss"> | 
					
						
							|  |  |  |  | 	.centenr { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		height: 100vh; | 
					
						
							|  |  |  |  | 		background: #F9F9F9; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.Candywrapper { | 
					
						
							|  |  |  |  | 		background: #F9F9F9; | 
					
						
							|  |  |  |  | 		box-sizing: border-box; | 
					
						
							|  |  |  |  | 		padding: 10px; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.card_box { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		height: 90px; | 
					
						
							| 
									
										
										
										
											2024-09-24 09:56:46 +08:00
										 |  |  |  | 
 | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-09-23 17:39:15 +08:00
										 |  |  |  | 		box-sizing: border-box; | 
					
						
							|  |  |  |  | 		padding: 10px; | 
					
						
							|  |  |  |  | 		color: #fff; | 
					
						
							|  |  |  |  | 		font-size: 14px; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-09-24 09:56:46 +08:00
										 |  |  |  | 	.c-url { | 
					
						
							|  |  |  |  | 		background: url('../../static/imgs/jf.png') no-repeat; | 
					
						
							|  |  |  |  | 		background-size: 100% 100%; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2024-09-23 17:39:15 +08:00
										 |  |  |  | 	.r-size { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: flex-end; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.r-num { | 
					
						
							|  |  |  |  | 		font-weight: 600; | 
					
						
							|  |  |  |  | 		font-size: 20px; | 
					
						
							|  |  |  |  | 		color: #FFFFFF; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.tab-bs { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: space-between; | 
					
						
							|  |  |  |  | 		background: #fff; | 
					
						
							|  |  |  |  | 		margin: 15px auto; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.w_box { | 
					
						
							|  |  |  |  | 		width: 50%; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: center; | 
					
						
							|  |  |  |  | 		box-sizing: border-box; | 
					
						
							|  |  |  |  | 		padding: 15px; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.bai_box { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		box-sizing: border-box; | 
					
						
							|  |  |  |  | 		padding: 15px 10px; | 
					
						
							|  |  |  |  | 		background: #fff; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: space-between; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.left-img { | 
					
						
							|  |  |  |  | 		margin-right: 10px; | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 		image { | 
					
						
							|  |  |  |  | 			width: 40px; | 
					
						
							|  |  |  |  | 			height: 40px; | 
					
						
							|  |  |  |  | 		} | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.right-box { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: space-between; | 
					
						
							|  |  |  |  | 		font-size: 12px; | 
					
						
							|  |  |  |  | 		color: #666666; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.l-text { | 
					
						
							|  |  |  |  | 		font-size: 16px; | 
					
						
							|  |  |  |  | 		color: #333333; | 
					
						
							|  |  |  |  | 		margin-bottom: 5px; | 
					
						
							|  |  |  |  | 		font-weight: bold; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.r-text { | 
					
						
							|  |  |  |  | 		font-size: 16px; | 
					
						
							|  |  |  |  | 		color: #333333; | 
					
						
							|  |  |  |  | 		margin-bottom: 5px; | 
					
						
							|  |  |  |  | 		font-weight: bold; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.tab-box { | 
					
						
							|  |  |  |  | 		width: 100%; | 
					
						
							|  |  |  |  | 		height: 40px; | 
					
						
							|  |  |  |  | 		background: #fff; | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		box-sizing: border-box; | 
					
						
							|  |  |  |  | 		margin-bottom: 25px; | 
					
						
							|  |  |  |  | 		justify-content: center; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.tab_ { | 
					
						
							|  |  |  |  | 		width: 75px; | 
					
						
							|  |  |  |  | 		height: 100%; | 
					
						
							|  |  |  |  | 		//border-bottom: 2px solid #FF770F;
 | 
					
						
							|  |  |  |  | 		display: flex; | 
					
						
							|  |  |  |  | 		font-weight: 500; | 
					
						
							|  |  |  |  | 		font-size: 14px; | 
					
						
							|  |  |  |  | 		color: #999999; | 
					
						
							|  |  |  |  | 		align-items: center; | 
					
						
							|  |  |  |  | 		justify-content: center; | 
					
						
							|  |  |  |  | 		margin-left: 50px; | 
					
						
							|  |  |  |  | 		cursor: pointer; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | 
 | 
					
						
							|  |  |  |  | 	.active { | 
					
						
							|  |  |  |  | 		border-bottom: 2px solid #FF770F !important; | 
					
						
							|  |  |  |  | 		color: #FF770F !important; | 
					
						
							|  |  |  |  | 	} | 
					
						
							|  |  |  |  | </style> |