oil-station/gasStation-uni/pages/index/index.vue

<template>
	<view class="content">

		<view class="container">
			<!-- 顶部 -->
			<swiper class="swiper" style="width: 100%;height: 160px; border-radius: 6px;overflow: hidden; " circular
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in list1" :key="index" @click="goPage(item.routeUrl)">
					<view class="swiper-item uni-bg-red">
						<image :src="item.bannerUrl" style="height: 163px; width: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 顶部结束 -->
			<view class="_jgbox">
				<view class="_bgox">
					<image src="../../static/new/n1.png" mode="" @click="getCode()"></image>
					<view class="">扫码买单</view>
				</view>

				<view class="_bgox" @click="goMemberRecharge()">
					<image src="../../static/new/n3.png" mode=""></image>
					<view class="">会员充值</view>
				</view>
				<view class="_bgox" @click="goredemption()">
					<image src="../../static/new/n4.png" mode=""></image>
					<view class="">积分兑换</view>
				</view>
				<view class="_bgox" @click="goCoupon()">
					<image src="../../static/new/n5.png" mode=""></image>
					<view class="">领券中心</view>
				</view>
				<view class="_bgox" @click="goInvite()">
					<image src="../../static/new/n6.png" mode=""></image>
					<view class="">邀请有礼</view>
				</view>
				<view class="_bgox">
					<image src="../../static/new/n7.png" mode=""></image>
					<view class="">每日抽奖</view>
				</view>
				<view class="_bgox" @click="goSignIn()">
					<image src="../../static/new/n8.png" mode=""></image>
					<view class="">签到有礼</view>
				</view>
				<view class="_bgox" @click="goMyCard()">
					<image src="../../static/new/hykb.png" mode=""></image>
					<view class="">会员卡包</view>
				</view>
			</view>
			<!-- 今日油价 -->
			<view class="_yjbox">
				<view class="title-img">
					<image src="../../static/new/t1.png" mode=""></image>
				</view>
				<view style="height: 160px;overflow: auto;">
					<view class="_gbox" v-for="(item,index) in oilTypeList" :key="index">
						<view class="_ns">{{item.oilName}}{{item.oilType}}</view>
						<view class="_ns">¥{{item.oilPrice}}</view>
						<view class="_ns _lv" v-if="upOrDown==1">{{item.amplitudeOfChange}}↑</view>
						<view class="_ns _red" v-else>{{item.amplitudeOfChange}}↓</view>
					</view>
					<!-- <view class="_gbox">
						<view class="_ns">92#汽油</view>
						<view class="_ns">¥8.99</view>
						<view class="_ns _red">0.12%↓</view>
					</view> -->
				</view>
			</view>
			<view class="station-box">
				<view class="station-title" style="display: flex;justify-content: space-between;">
					<view>{{store.name}}{{store.description ? "("+store.description+")" : ""}}</view>
					<view class="lananniu" @click="goGoGo" v-if="distance!=''">
						<uni-icons type="paperplane-filled" color="#E02020" size="16"></uni-icons>
						导航
					</view>
				</view><!--顺通石化加油站(工业南路站)-->
				<view style="display: flex; flex-wrap: wrap; ">
					<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">
						{{item}}
					</view>
				</view>
				<view class="dis-bt">
					<view class="">
						<view class="hui1">{{ store.address }} | {{ distance || 0 }}km </view>
						<view class="hui2" v-if="distance"></view>
					</view>
					<!-- <view class="lananniu" @click="goGoGo" v-if="distance!=''">
						<uni-icons type="paperplane-filled" color="#195ADA" size="16"></uni-icons>
						{{ distance || "0" }}KM
					</view> -->
				</view>

			</view>
			<!-- 加油站卡片结束-->
			<view style="width: 100%; height: 68px; "></view>
			<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
				keyName="label"></u-picker>
			<u-popup :show="ruleShow" :closeable="true" :round="10" mode="bottom" @close="close">
				<view class="_tbox">
					<view class="_btop">百业兴加油站申请</view>
					<view class="_bbox">
						<view class="b_title">获取您的位置信息</view>
						<view class="">我们将获取您的当前位置信息，以便精准推荐离您最近
							的店铺信息</view>
					</view>
					<view class="b-cen">
						<view class="_d_anniu" @click="ruleShow = false">拒绝</view>
						<view class="_s_anniu" @click="ruleShow = false">允许</view>
					</view>
				</view>
			</u-popup>
			<u-popup :show="empowerShow" :closeable="true" :round="10" mode="bottom" @close="empowerclose">
				<view class="_tbox">
					<view class="_btop">第三方用户信息授权说明</view>
					<view class="_bbox">
						<view class="">您授权后，小程序开发者将收集您的位置信息，为您提 供智能推荐服务。开发者严格按照《钜油惠百业兴小程 序隐私保护指引》处理您的个人信息，如您发现开发者
							不当处理您的个人信息，可进行投诉。</view>
					</view>
					<view class="b-cen">
						<view class="_d_anniu" @click="empowerShow = false">拒绝</view>
						<view class="_s_anniu" @click="empowerShow = false">允许</view>
					</view>
				</view>
			</u-popup>
			<!--外层结束  -->
			<tabbar :msg="msg"></tabbar>
		</view>

	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/config'
	import request from '../../utils/request'
	import {
		callWithErrorHandling
	} from "vue"
	export default {
		data() {
			return {
				ruleShow: false,
				empowerShow: false,
				isOpen: false,
				chainStoreId: '',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				joinmsg: '',
				msg: "1",
				show: false,
				shows: '',
				title: '',
				oilTypeList: '',
				columns: [],
				oilInfo: {
					oilName: '未添加',
					oilPrice: '0',
					gbPrice: '0'
				},
				AppToken: uni.getStorageSync("App-Token"),

				list1: [],
				list3: [
					'http://47.95.206.185:83/topbj.png',
				],
				// 当前经度信息
				longitude: "",
				// 当前纬度信息
				latitude: "",
				// 店铺经度信息
				lon: "",
				// 店铺纬度信息
				lat: "",
				// 店铺信息
				store: {
					name: "测试油站",
					description: "济南分店",
					address: "济南槐荫区"
				},
				// 店铺福利信息
				welfare: [],
				distance: "",
				storeId: "",
				staffId: "",
				baseUrl: this.$baseUrl,
			}
		},
		async onLoad(query) {
			if (query.storeId) {
				// uni.setStorageSync("y_storeId", query.storeId)
				uni.setStorageSync("storeId", query.storeId)
			}
			if (query.type) {
				uni.setStorageSync("y_type", query.type)
			}
			if (query.userId) {
				uni.setStorageSync("y_userId", query.userId)
			}
			if (uni.getStorageSync("appltType") == "WECHAT") {
				const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
				if (query.q) {
					let str = q.split("?")[1];
					let storeId = "";

					let staffId = "";
					let userId = "";
					let type = "";
					if (str.includes("&")) {
						let arr = str.split("&");
						arr.forEach(item => {
							if (item.includes("storeId")) {
								storeId = item.split("=")[1]
							} else if (item.includes("staffId")) {
								staffId = item.split("=")[1]
							} else if (item.includes("userId")) {
								userId = item.split("=")[1]
							} else if (item.includes("type")) {
								type = item.split("=")[1]
							}
						})
					} else {
						storeId = str.split("=")[1]
					}


					uni.setStorageSync("storeId", storeId)
					uni.setStorageSync("y_type", type)
					uni.setStorageSync("y_userId", userId)
					uni.setStorageSync("inviteStaffId", staffId)
					this.storeId = uni.getStorageSync("storeId")
					this.chainStoreId = uni.getStorageSync("chainStoreId")
					this.staffId = uni.getStorageSync("inviteStaffId")
					// await this.getUserAuthority();
					// await this.getOilType();
				} else {
					if (uni.getStorageSync("storeId")) {
						this.storeId = uni.getStorageSync("storeId")
					}
					// await this.getOilType();
				}

				await this.getUserAuthority();
				await this.getTheJudgmentIsTheSame();
			} else {
				await this.getUserAuthority();
				// await this.getOilType();
				await this.getTheJudgmentIsTheSame();
			}
		},
		async onShow() {
			await this.getTheJudgmentIsTheSame();
			await this.isJoined()
			this.isRecharge()
			// this.getAddress()
			// this.getUserAuthority()
			this.getIndexBanner()
		},
		components: {
			tabbar
		},
		methods: {
			goSignIn(){
				uni.navigateTo({
					url: '/pagesMy/signIn/index'
				})
			},
			goInvite() {
				uni.navigateTo({
					url: '/pagesMy/invite/invite'
				})
			},
			goMyCard() {
				uni.navigateTo({
					url: '/pagesHome/MyCard/MyCard'
				})
			},
			getCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						console.log('扫描二维码成功,结果:' + JSON.stringify(res) + res.result);
						let storeId = ""
						let staffId = ""
						let str = res.result.split("?")[1];
						if (str.includes("&")) {
							let arr = str.split("&");
							arr.forEach(item => {
								if (item.includes("storeId")) {
									storeId = item.split("=")[1]
								} else if (item.includes("staffId")) {
									staffId = item.split("=")[1]
								}
							})
						} else {
							storeId = str.split("=")[1]
						}
						console.log(storeId, staffId, 289);
						uni.setStorageSync("storeId", storeId)

						this.getUserAuthority();
						uni.navigateTo({
							url: '/pages/refuel/refuel?storeId=' + storeId + '?staffId=' + staffId
						})
					},
					error: (res) => {
						console.log('扫描二维码出现错误')
					}
				})
			},
			goCoupon() {
				uni.navigateTo({
					url: '/pagesHome/certificate/index'
				})
			},
			close() {
				this.ruleShow = false
			},
			empowerclose() {
				this.empowerShow = false
			},
			goMemberRecharge() {
				uni.navigateTo({
					url: '/pagesHome/memberRecharge/index'
				})
			},
			goredemption() {
				uni.navigateTo({
					url: '/pagesHome/PointsRedemption/index'
				})
			},
			isRecharge() {
				request({
					url: 'business/storeInformation/store/isRecharge',
					method: 'get',
				}).then(res => {
					if (res.data) {
						this.isOpen = true
					} else {
						this.isOpen = false
					}
				})
			},
			// 返回图片路径
			getBannerUrl(url) {
				let imgurl = ""
				if (url.includes("http")) {
					imgurl = url
				} else {
					imgurl = this.baseUrl + url
				}
				return imgurl;
			},
			// 跳转banner图对应的页面
			goPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			// 获取首页轮播图信息
			getIndexBanner() {
				let _this = this
				if (uni.getStorageSync("storeId")) {
					request({
						url: 'business/indexBanner/list/' + uni.getStorageSync("storeId"),
						method: 'get',
					}).then(res => {
						_this.list1 = res.data
						if (res.data.length > 0) {
							for (let i = 0; i < res.data.length; i++) {
								if (res.data[i].bannerUrl.includes("http")) {
									_this.list1[i].bannerUrl = res.data[i].bannerUrl
								} else {
									_this.list1[i].bannerUrl = _this.baseUrl + res.data[i].bannerUrl
								}
							}
						}
					})
				}
			},
			//判断是否是新人
			isJoined() {
				let params = {
					storeId: uni.getStorageSync("storeId")
				}
				// 判断是否登录
				if (!this.AppToken) {
					return;
				}
				request({
					url: 'business/marketingActivity/activeNewlywedsRecords/applet',
					method: 'get',
					params: params
				}).then(res => {
					console.log("366" + res)
					if (res.code == 200 && res.data == 1) {
						this.shows = true
					} else {
						this.shows = false
					}
				})
			},
			//立即领取
			drawDown() {
				/* this.shows = false */
				request({
					url: 'business/marketingActivity/activeNewlywedsRecords',
					method: 'post',
					data: {
						storeId: this.storeId,
						chainStoreId: this.chainStoreId,
					}
				}).then(res => {
					console.log("385" + res)
					if (res.code == 200 && res.data == true) {
						this.shows = false
						uni.showToast({
							title: '领取成功！'
						})
					} else {
						this.shows = false
						uni.showToast({
							title: '领取失败！'
						})
					}

					/* if (res.code == 200 && res.data == 1) {
						this.shows = true
					} else {
						this.shows = false
					} */
				})
			},
			//查询新人有礼礼品
			selectActiveNewlyweds() {
				// 判断是否登录
				if (!this.AppToken) {
					return;
				}
				request({
					url: 'business/marketingActivity/activeNewlyweds/applet',
					method: 'get',
				}).then(res => {
					console.log("415" + res)
				})
			},
			isExistStoreId() {
				if (uni.getStorageSync("storeId")) {
					this.getStore(uni.getStorageSync("storeId"));
				} else {
					this.getAddress(uni.getStorageSync("storeId"));
				}
			},
			// 获取定位信息
			getUserAuthority() {
				let _this = this;
				// this.getAddress();
				uni.getSetting({
					success(res) {
						if (res.authSetting['scope.userLocation'] == false) {
							// uni.clearStorageSync();
							// _this.getStorageSize()

							_this.showRefuseLocationPermission()
						} else {
							// 用户同意获取位置信息
							_this.getAddress(uni.getStorageSync("storeId"));
						}
					},
					fail(err) {
						console.log('jujuel,442', err);
					},
					complete(ress) {

					},
					withSubscriptions(resx) {
						console.log('448', resx);
					}

				})
			},

			// 用户拒绝授权的展示
			showRefuseLocationPermission() {
				const that = this;
				wx.showModal({
					title: "提示",
					content: "需要获取用户位置权限",
					confirmText: "前往设置",
					showCancel: false,
					success(res) {
						if (res.confirm) {
							uni.openSetting({
								success(res) {
									console.log("打开设置成功", res);
									if (res.authSetting['scope.userLocation']) {
										console.log('成功授权userLocation')
										that.getAddress()
									} else {
										console.log('用户未授权userLocation')
										// 递归调用本函数，(函数套函数)
										that.showRefuseLocationPermission()
									}
								},
								fail(err) {
									console.log("打开设置失败", err)
								}
							})
						}
					}
				})
			},
			getStorageSize() {
				let that = this;
				uni.getStorageInfo({
					success(res) {
						let size = res.currentSize;
						if (size < 1024) {
							that.storageSize = size + ' B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							that.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
						} else if (size / 1024 / 1024 >= 1) {
							that.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
						}
					}
				})
			},
			// 判断token是否与当前连锁店id相同
			async getTheJudgmentIsTheSame() {
				console.log(this.AppToken, 501);
				// 判断是否登录
				if (!this.AppToken) {
					return;
				}
				await request({
					url: 'chainStoreInfo/theJudgmentIsTheSame',
					method: 'get',
					data: {
						"chainStoreId": uni.getStorageSync("chainStoreId")
					}
				}).then(res => {
					if (!res.data) {
						uni.removeStorageSync("App-Token");
					}
				})


				// 判断当前登录的code是否相同
				if (uni.getStorageSync("appltType") == "WECHAT") {
					wx.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								request({
									url: 'clientApi/sign/mpWxLogin2',
									method: "POST",
									data: {
										code: res.code
									}
								}).then(resp => {
									if (!resp.data) {
										uni.removeStorageSync("App-Token");
									}
								})
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}

				if (uni.getStorageSync("appltType") == "ALIPAY") {
					my.getAuthCode({
						scopes: 'auth_base',
						success: res => {
							const authCode = res.authCode;
							request({
								url: "clientApi/sign/alipayLogin/getUserid2",
								method: 'post',
								data: {
									authCode: authCode,
									storeId: uni.getStorageSync("storeId"),
								},
							}).then((resp) => {
								if (!resp.data) {
									uni.removeStorageSync("App-Token");
								}
							})
						},
						fail: err => {
							console.log('my.getAuthCode 调用失败', err)
						}
					});
				}

			},

			// 获取门店信息
			getStore(id) {
				let _this = this;
				request({
					url: "business/storeInformation/store/queryStoreById",
					method: 'post',
					data: {
						"storeId": id
					},
				}).then((response) => {
					_this.store = response.data
					let welfare = response.data.welfare
					uni.setStorageSync("storeId", response.data.id)
					uni.setStorageSync("chainStoreId", response.data.chainStoreId)
					if (welfare) {
						if (welfare.includes(",")) {
							_this.welfare = response.data.welfare.split(",")
						} else {
							_this.welfare.push(response.data.welfare)
						}
					}
					if (response.data.doorstepPhoto) {
						let list = JSON.parse(response.data.doorstepPhoto)
						_this.list3 = [];
						list.forEach(item => {
							_this.list3.push(_this.baseUrl + item)
						})
					}
				}).catch((res) => {

				})
			},
			// 获取当前位置
			getAddress(storeId) {
				let _this = this;
				uni.getLocation({
					// 谷歌使用wgs84  其他使用gcj02
					type: 'gcj02', // 使用国测局坐标系
					success: function(res) {
						if (_this.longitude == "" && _this.latitude == "") {

							_this.longitude = res.longitude;
							_this.latitude = res.latitude
						}
						console.log('经度: ' + _this.longitude);
						console.log('纬度: ' + _this.latitude);
						request({
							url: 'business/storeInformation/store/recentlyStore',
							method: 'post',
							data: {
								"lon": _this.longitude,
								"lat": _this.latitude,
								"storeId": storeId,
								"isLogin": _this.AppToken ? "0" : "1", // 0为登录

							},
						}).then((response) => {
							// uni.showToast({
							// 	title:"121984:"+storeId
							// })
							if (response.data.store) {
								_this.distance = (Math.ceil(response.data.distance))
									.toFixed(1)
								_this.store = response.data.store
								uni.setStorageSync("storeId", response.data.store.id)
								uni.setStorageSync("chainStoreId", response.data.store.chainStoreId)
								if (response.data.store.welfare) {
									if (response.data.store.welfare.includes(",")) {
										_this.welfare = response.data.store.welfare
											.split(",")
									} else {
										_this.welfare.push(response.data.store.welfare)
									}
								}
								if (response.data.store.doorstepPhoto) {
									let list = JSON.parse(response.data.store.doorstepPhoto)
									_this.list3 = [];
									list.forEach(item => {
										_this.list3.push(_this.baseUrl + item)
									})
								}

								_this.lon = _this.store.longitude,
									_this.lat = _this.store.latitude,

									_this.getIndexBanner()
								_this.getOilType();
							} else {
								uni.showToast({
									title: "当前店铺已关闭！！！",
									icon: "none"
								})
							}

						}).catch(err => {})

						// uni.showToast({
						// 	title: "获取位置信息成功",
						// 	icon: "none"
						// })
					},
					fail: function(err) {
						_this.getStore(2);
						// uni.showToast({
						// 	title: "获取位置信息失败"
						// })
						console.log('获取位置信息失败: ' + err.errMsg);
					}
				});
			},

			//获取油站的油号信息
			getOilType() {
				let params = {
					storeId: uni.getStorageSync("storeId")
				}
				request({
					url: 'business/petrolStationManagement/oilNumber/getList2',
					method: 'get',
					params: params
				}).then((res) => {
					if (res.code == 200) {
						this.oilTypeList = res.data.records
						if (this.oilTypeList.length > 0) {
							this.oilInfo.oilName = this.oilTypeList[0].oilName,
								this.oilInfo.oilPrice = this.oilTypeList[0].oilPrice,
								this.oilInfo.gbPrice = this.oilTypeList[0].gbPrice
						}
						let oilData = []
						this.oilTypeList.forEach(res => {
							let data = {
								id: res.numberId,
								label: res.oilName,
								oilPrice: res.oilPrice,
								gbPrice: res.gbPrice
							}
							oilData.push(data)
						})

						this.columns = [oilData]
						console.log(this.oilTypeList, '710');
					}
				})
			},
			confirm(e) {
				console.log('选中的油号', e);
				this.oilInfo.oilName = e.value[0].label
				this.oilInfo.oilPrice = e.value[0].oilPrice
				this.oilInfo.gbPrice = e.value[0].gbPrice

				this.show = false
			},
			cancel() {
				this.show = false
			},
			/* onOverlay() {
				this.drawDown();
				this.shows = false
				uni.showToast({
					title: '领取成功'
				})
			}, */
			goActivity() {
				// 去活动页
				uni.navigateTo({
					url: '/pagesHome/Activity/index'
				})
			},
			goCard() {
				uni.navigateTo({
					url: '/pagesHome/MyCard/MyCard'
				})
			},
			goOil() {
				uni.navigateTo({
					url: '/pages/refuel/refuel'
				})
			},
			goChooseAddress() {
				uni.chooseLocation({
					success: ({
						name,
						address,
						latitude,
						longitude
					}) => { // 选择位置完成后的处理
						// this.addressName = address;
						console.log(name, address, latitude, longitude);
						this.longitude = longitude;
						this.latitude = latitude;
						this.getAddress()
					},
				});
			},
			goMall() {
				uni.navigateTo({
					url: '/pagesHome/PointsMall/PointsMall'
				})
			},
			toQRcode() {
				uni.navigateTo({
					url: '/pagesHome/QRcode/QRcode'
				})
			},
			goGoGo() {
				let lat = Number(this.lat)
				let lon = Number(this.lon)
				uni.openLocation({
					latitude: lat,
					longitude: lon,
					name: this.store.name,
					address: this.store.address,

					success: function() {
						console.log('success');
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f9f9f9;
		box-sizing: border-box;

	}


	.container {
		width: 100%;
		box-sizing: border-box;
		padding: 10px;
		// height: 100vh;
	}

	.conttainer-top {
		width: 100%;

		background-size: 100% 100%;
		position: relative;
		margin-bottom: 60px;


	}

	.top-title {
		font-size: 26px;
		color: white;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 25px;
		text-shadow: 0px 2px 0px #2F64CD;
		position: absolute;
		top: 120px;
		left: 20px;
	}

	.lan-gang {
		width: 200px;
		height: 22px;
		background: #2F43F7;
		border-radius: 11px;
		align-items: center;
		display: flex;
		justify-content: space-around;
		position: absolute;
		top: 155px;
		left: 20px;
		color: white;

	}

	.lsiez {
		font-size: 10px;
		display: flex;
	}

	.conttainer-jg {
		width: 95%;
		border-radius: 6px;
		background: white;
		box-sizing: border-box;
		padding: 10px;
		height: 90px;
		margin: 0px auto;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		bottom: -90px;
		display: flex;
	}

	.conttainer-cetr {
		width: 95%;
		border-radius: 6px;
		background: white;
		box-sizing: border-box;
		padding: 10px;
		margin: 10px auto;
	}

	.jg-box {
		width: 25%;
		text-align: center;
	}

	.jg-img {
		width: 38px;
		height: 38px;

		image {
			width: 38px;
			height: 38px;
		}

		margin: 5px auto;
	}

	.jg-size {
		font-size: 14px;

	}

	.conttainer-title {
		font-size: 16px;
		font-weight: bold;
	}

	.conttainer-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background: #F3F6F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 8px;
		margin-top: 10px;
	}

	.c-box-box1 {
		width: 33%;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.c-box-box2 {
		width: 33%;
		height: 44px;
		text-align: center;
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
	}

	.c-box-box3 {
		width: 33%;
		height: 44px;
		text-align: center;
	}

	.xblck {
		font-size: 14px;
		color: #333333;
	}

	.dblck {
		font-size: 20px;
		color: #333333;
		font-weight: bold;
	}

	.xred {
		font-size: 14px;
		color: #ED2828;
	}

	.dred {
		font-size: 20px;
		color: #ED2828;
		font-weight: bold;
	}

	.station {
		width: 100%;
		height: 120px;
		background: url('http://47.95.206.185:83/centerbj.png')center no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 30px;
	}

	.station-box {
		width: 100%;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		margin: 15px auto;

	}

	.station-title {
		font-size: 16px;
		font-weight: bold;
	}

	.bule-icon {
		width: 85px;
		font-size: 12px;
		color: #333333;
		box-sizing: border-box;
		padding: 2px 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #FA6400;
		border-radius: 4px;
		margin: 5px 3px;
	}

	.dis-bt {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hui1 {
		color: #666666;
		font-size: 12px;
		margin: 5px auto;
	}

	.hui2 {
		color: #999999;
		font-size: 12px;
		margin: 5px auto;
	}

	.lananniu {
		box-sizing: border-box;
		padding: 3px 10px;

		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #E02020;

	}

	.tabs {
		width: 100%;
		display: flex;
		height: 44px;

	}

	.scrollbox {
		display: flex;
	}

	.scrollbox-imgs {

		width: 195px;
		height: 100px;
		border-radius: 4px;
		background-color: #195ADA;
		margin: 0px 10px;
	}

	.juanniu {
		height: 36px;
		background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
		border-radius: 42px;
		justify-content: center;
		display: flex;
		align-items: center;
		color: white;
		margin-top: 20px;


	}

	.anniuprp {
		width: 130px;
		height: 36px;
		background: linear-gradient(180deg, #FF6D3A 0%, #FF327A 100%);
		box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.25);
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin: 0 auto;
	}

	._jgbox {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding: 0px 15px;
		display: flex;
		flex-wrap: wrap;
		margin: 10px auto;
	}

	.title-img {
		text-align: center;

		image {
			height: 30px;
			width: 100%;
		}
	}

	._gbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

	}

	._ns {
		width: 33%;
		text-align: center;
		margin: 10px auto;
	}

	._yjbox {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
	}

	._bgox {
		width: 25%;
		text-align: center;
		font-size: 14px;
		color: #333333;
		margin: 10px auto;

		image {
			width: 50px;
			height: 50px;
		}
	}

	._lv {
		color: #6DD400 !important;
	}

	._red {
		color: #E02020 !important;
	}

	._tbox {
		border-radius: 10px;
		background: #fff;
		width: 100%;


	}

	._btop {
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #EEEEEE;
		text-align: center;
		font-weight: 600;
		font-size: 14px;
		color: #333333;
	}

	._bbox {
		box-sizing: border-box;
		padding: 15px;
		font-weight: 400;
		font-size: 14px;
		color: #333333;
		line-height: 18px;
	}

	.b_title {
		font-weight: bold;
	}


	.b-cen {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	._d_anniu {
		width: 90px;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #FA6400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FA6400;
		margin-right: 20px;
	}

	._s_anniu {
		width: 90px;
		height: 30px;
		border-radius: 15px;
		border: 1px solid #FA6400;
		background: #FA6400;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
</style>