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

<template>
	<view class="content">
		<view class="container">
			<!--外层  -->
			<!-- 顶部 -->
			<view class="conttainer-top">
				<!-- 标题 -->
				<view class="top-title">
					出行服务 优惠加油
				</view>
				<view class="lan-gang">
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 一键加油</view>
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 最近油站</view>
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 地址导航</view>
				</view>
				<!-- 金刚区 -->
				<view class="conttainer-jg">
					<view class="jg-box">
						<view class="jg-img">
							<image src="../../static/imgs/viprwm.png" mode=""></image>
						</view>
						<view class="jg-size">便利店</view>
					</view>
					<view class="jg-box" @click="goActivity()">
						<view class="jg-img">
							<image src="../../static/imgs/bzhd.png" mode=""></image>
						</view>
						<view class="jg-size">本站活动</view>
					</view>
					<view class="jg-box" @click="gocard()">
						<view class="jg-img">
							<image src="../../static/imgs/ykcz.png" mode=""></image>
						</view>
						<view class="jg-size">油卡充值</view>
					</view>
					<view class="jg-box" @click="gomall()">
						<view class="jg-img">
							<image src="../../static/imgs/jfsc.png" mode=""></image>
						</view>
						<view class="jg-size">积分商城</view>
					</view>

				</view>
				<!-- 金刚区结束 -->
			</view>
			<!-- 顶部结束 -->
			<!-- centenr -->
			<view class="conttainer-cetr">
				<view class="conttainer-title">今日会员价</view>
				<view class="conttainer-box">
					<view class="c-box-box1" @click="show = true">
						<view class="">92#</view>
						<view class="">
							<u-icon name="arrow-down-fill"></u-icon>
						</view>
					</view>
					<view class="c-box-box2">
						<view class="xred">会员价</view>
						<view class="dred"> <text class="xred">￥</text> 6.55</view>
					</view>
					<view class="c-box-box3">
						<view class="xblck">国际价</view>
						<view class="dblck"> <text class="xblck">￥</text> 6.55</view>
					</view>
				</view>

			</view>
			<!-- centenr结束 -->
			<!-- 加油站卡片-->
			<view class="station">
				<view class="station-box">

					<view class="station-title">顺通石化加油站(工业南路站)</view>
					<view class="bule-icon">全天营业</view>
					<view class="dis-bt">
						<view class="">
							<view class="hui1">济南市历城区工业南路</view>
							<view class="hui2">891.9km</view>
						</view>
						<view class="lananniu" @click="gogogo"> <uni-icons type="paperplane-filled" color="#195ADA"
								size="16"></uni-icons> 984.6米</view>
					</view>
					<!-- <scroll-view scroll-x="true">
						<view class="scrollbox" >
						<view style="margin: 0px 10px;"  v-for="(item,index) in 13" :key="index">123123</view>
						</view>
					</scroll-view> -->
					<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
						bgColor="#ffffff"></u-swiper>
					<view class="juanniu" @click="gooil()">
						<view class="">一键加油</view>
					</view>
				</view>
				<view style="height: 88px; width: 100%;"></view>
			</view>
			<!-- 加油站卡片结束-->
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
			<!--外层结束  -->
			<tabbar :msg="msg"></tabbar>
		</view>

	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		data() {
			return {
				msg: "1",
				show: false,
				title: '',
				columns: [
					['#92', '#95', '#98']
				],
				list3: [
					'http://47.95.206.185:83/topbj.png',
					'http://47.95.206.185:83/centerbj.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
			}
		},
		onLoad() {

		},
		components: {
			tabbar
		},
		methods: {
			confirm(e) {
				console.log('选中的油号', e);
				this.show = false
			},
			cancel() {
				this.show = false
			},
			goActivity() {
				// 去活动页
				uni.navigateTo({
					url: '/pagesHome/Activity/index'
				})
			},
			gocard() {
				uni.navigateTo({
					url: '/pagesHome/MyCard/MyCard'
				})
			},
			gooil() {
				uni.navigateTo({
					url: '/pages/refuel/refuel'
				})
			},
			gomall() {
				uni.navigateTo({
					url: '/pagesHome/PointsMall/PointsMall'
				})
			},
			gogogo() {
				uni.openLocation({
					latitude: 36.651441,
					longitude: 116.901224,
					success: function() {
						console.log('success');
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #ebf5ff;
	}

	.container {
		width: 100%;
		height: 100vh;
	}

	.conttainer-top {
		width: 100%;
		height: 250px;
		// background-color: #3da4df;
		background: url('http://47.95.206.185:83/topbj.png')center no-repeat;
		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: 100%;
			height: 100%;
		}

		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: 95%;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		margin: 0px auto;
	}

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

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

	.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 {
		width: 78px;
		height: 24px;
		background: #DBE9FF;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #195ADA;

	}

	.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;


	}
</style>