1.新增团油界面

3 years ago · 13f517750f
parent 247655cd7e
commit 13f517750f
7 changed files with 880 additions and 9 deletions
--- a/components/wyb-popup/iconfont.css
+++ b/components/wyb-popup/iconfont.css
@ -0,0 +1,16 @@
+@font-face {font-family: "iconfont";
+  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABlAAAAJJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApcdgE2AiQDCAsGAAQgBYRtBy8bmwXIrjBu4UkbIjvjLimCmu1EP9KHAd4jgmi/3+zde18toRbpnkUTzRKRUkgQE6RA9xL+tMuG6RYp8bFsgmbcecAB9mDhH67tDS3pQsIsmSbPL7chM1RKsFr5mNDBoUDPJItlaZG8fvhi/tciWcbRfJ7L6U2gA1l9oBz3orEmTRpAvTigAPfCKLISSiNtGLvAJdwn0DCHgMfN/kgLK1jLAvE0p7YWzoUVCparCZWavYV4U6qllxTNa/j5+JeKMEmZWQ1njw1PK39hF+TnFG59QoSADpfI2AEUxFVt+oQpGIc10pYlYF+1wRfTfZfYq12wv86qboEZqLgnpau61VyC21L06V8d9cuJmT795hWPJp8ayHj0wrZNx+/+1Nzdf8MBtu9H2p+tgB5tn/W1PEZvgeD5Xf/if61ZgE9foa3Qz0ttd57gtyh79hS62nKmQlXWDiczp2tqaGAK+we+sZbxPeRDzXiEt2o2RVazQhbsDkpNu6io2UPDNn24aagxRVHHlgkQehaSjg9kPYcs2IvSxENFL0w03ASd2bQW82is0d6iB+YE2ZWCOO5tNKodIN0xe51Vh/wE15t5DGQsUcy1UOB6jg19T1NjSyCsJQcFHkPGJJS1XKC7jaXtVpV4nNS9KGYl16KOrCHbFvIA4wRkLkkg/uitaOn9A4jaYWzrlq6a/ARa25hPDiRG9CBbBtGr616e6faolGGLAMGaxAEFZiGGkUCpn7WAXFsxaURSKeH2oNDXEFvfxL/uGDRY1hT2lKy8Y3KDmgYA') format('woff2')
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 20px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-close:before {
+  content: "\e622";
+}
+
--- a/components/wyb-popup/wyb-popup.vue
+++ b/components/wyb-popup/wyb-popup.vue
@ -0,0 +1,420 @@
+<template>
+	<view v-if="isShow">
+		<view 
+		 @tap.stop.prevent
+		 @touchmove.stop.prevent
+		 class="wyb-popup-box"
+		 :style="{
+			 transitionDuration: duration + 'ms',
+			 opacity: contentOpacity || (type === 'center' ? 0 : 1),
+			 transform: contentTransform || autoTransform,
+			 zIndex: zIndex,
+			 borderTopRightRadius: type === 'center' || type === 'bottom' || type === 'left' ? radius + 'px' : 0,
+			 borderTopLeftRadius: type === 'center' || type === 'bottom' || type === 'right' ? radius + 'px' : 0,
+			 borderBottomRightRadius: type === 'center' || type === 'top' || type === 'left' ? radius + 'px' : 0,
+			 borderBottomLeftRadius: type === 'center' || type === 'top' || type === 'right' ? radius + 'px' : 0,
+			 width: autoWidth,
+			 height: autoHeight,
+			 minWidth: width + 'rpx',
+			 minHeight: height + 'rpx',
+			 top: sizeChange && type === 'center' ? winReTop : autoTop,
+			 bottom: autoBottom,
+			 left: autoLeft,
+			 right: autoRight,
+			 backgroundColor: bgColor}">
+			<view
+			 class="wyb-popup-close"
+			 v-if="showCloseIcon"
+			 :style="{
+				 width: closeIcon ? closeIconSize + 'rpx' : 'auto',
+				 height: closeIcon ? closeIconSize + 'rpx' : 'auto',
+				 top: closeIconPos === 'top-right' || closeIconPos === 'top-left' ? vertOffset + 'rpx' : 'auto',
+				 bottom: closeIconPos === 'bottom-right' || closeIconPos === 'bottom-left' ? vertOffset + 'rpx' : 'auto',
+				 left: closeIconPos === 'bottom-left' || closeIconPos === 'top-left' ? horiOffset + 'rpx' : 'auto',
+				 right: closeIconPos === 'bottom-right' || closeIconPos === 'top-right' ? horiOffset + 'rpx' : 'auto'}">
+				<image class="wyb-popup-custom-close" v-if="showCloseIcon&&closeIcon" :src="closeIcon" @tap="hide" :style="{
+			 			 width: closeIconSize + 'rpx',
+			 			 height: closeIconSize + 'rpx'}" />
+			 	<view v-if="showCloseIcon&&!closeIcon" class="iconfont icon-close" @tap="hide" />
+			</view>
+			
+			<scroll-view
+			 class="wyb-popup-container"
+			 :style="{
+				 width: autoWidth,
+				 height: autoHeight}"
+			 :enable-flex="true"
+			 :scroll-y="scrollY"
+			 :scroll-x="scrollX">
+				<view class="wyb-popup-slot"><slot></slot></view>
+			</scroll-view>
+		</view>
+		<view
+		 class="wyb-popup-mask"
+		 @tap.stop="close"
+		 @touchmove.stop.prevent
+		 :style="{
+			 opacity: maskOpacity,
+			 transitionDuration: duration + 'ms',
+			 backgroundColor: 'rgba(0, 0, 0, ' + maskAlpha + ')',
+			 zIndex: zIndex - 1}" />
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				w: uni.getSystemInfoSync().screenWidth,
+				h: uni.getSystemInfoSync().screenHeight,
+				isShow: false,
+				winReBottom: '',
+				winReTop: '',
+				sizeChange: false,
+				contentOpacity: null,
+				contentTransform: null,
+				maskOpacity: 0
+			}
+		},
+		computed: {
+			autoCenterTop() {
+				let statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+				let windowHeight = uni.getSystemInfoSync().windowHeight
+				let popupHeight = this.rpxToPx(this.height)
+				let navHeight = 44
+				let result = `${(windowHeight - popupHeight) / 2 - this.negativeTop}px`
+				return result
+			},
+			autoTransform() {
+				let result = ''
+				switch(this.type) {
+					case 'center':
+						if (this.centerAnim === 'zoom-lessen') {
+							result = `scale(${this.zoomLessenMulti})`
+						} else if (this.centerAnim === 'slide-up') {
+							result = `translateY(${100 * this.slideMulti}%)`
+						} else if (this.centerAnim === 'slide-down') {
+							result = `translateY(${-100 * this.slideMulti}%)`
+						} else if (this.centerAnim === 'fade') {
+							result = 'auto'
+						}
+						break
+					case 'bottom':
+						result = 'translateY(100%)'
+						break
+					case 'top':
+						result = 'translateY(-100%)'
+						break
+					case 'left':
+						result = 'translateX(-100%)'
+						break
+					case 'right':
+						result = 'translateX(100%)'
+						break
+				}
+				return result
+			},
+			autoWidth() {
+				if (this.type === 'center') {
+					return `${this.width}rpx`
+				} else {
+					if (this.mode === 'size-fixed') {
+						if (this.type === 'top' || this.type === 'bottom') {
+							return '100%'
+						} else {
+							return `${this.width}rpx`
+						}
+					} else {
+						if (this.type === 'top' || this.type === 'bottom') {
+							return '100%'
+						} else {
+							return 'auto'
+						}
+					}
+				}
+			},
+			autoHeight() {
+				if (this.type === 'center') {
+					return `${this.height}rpx`
+				} else {
+					if (this.mode === 'size-fixed') {
+						if (this.type === 'left' || this.type === 'right') {
+							return '100%'
+						} else {
+							return `${this.height}rpx`
+						}
+					} else {
+						if (this.type === 'left' || this.type === 'right') {
+							return '100%'
+						} else {
+							return 'auto'
+						}
+					}
+				}
+			},
+			autoTop() {
+				if (this.type === 'center') {
+					return this.autoCenterTop
+				} else if (this.type === 'bottom') {
+					return 'auto'
+				} else {
+					return 0
+				}
+			},
+			autoBottom() {
+				if (this.type === 'center' || this.type === 'top') {
+					return 'auto'
+				} else {
+					return 0
+				}
+			},
+			autoLeft() {
+				if (this.type === 'center') {
+					return  `${(this.w - this.rpxToPx(this.width)) / 2}px`
+				} else if (this.type === 'right') {
+					return 'auto'
+				} else {
+					return 0
+				}
+			},
+			autoRight() {
+				if (this.type === 'center' || this.type === 'left') {
+					return 'auto'
+				} else {
+					return 0
+				}
+			}
+		},
+		props: {
+			type: {
+				type: String,
+				default: 'bottom'
+			},
+			mode: {
+				type: String,
+				default: 'size-auto'
+			},
+			height: {
+				type: [String, Number],
+				default: 400
+			},
+			width: {
+				type: [String, Number],
+				default: 500
+			},
+			radius: {
+				type: [String, Number],
+				default: 0
+			},
+			zIndex: {
+				type: [String, Number],
+				default: 10076
+			},
+			maskClickClose: {
+				type: Boolean,
+				default: true
+			},
+			maskAlpha: {
+				type: Number,
+				default: 0.5
+			},
+			duration: {
+				type: Number,
+				default: 400
+			},
+			showCloseIcon: {
+				type: Boolean,
+				default: false
+			},
+			scrollY: {
+				type: Boolean,
+				default: false
+			},
+			scrollX: {
+				type: Boolean,
+				default: false
+			},
+			closeIconPos: {
+				type: String,
+				default: 'top-right'
+			},
+			closeIcon: {
+				type: String,
+				default: ''
+			},
+			closeIconSize: {
+				type: [String, Number],
+				default: '20'
+			},
+			vertOffset: {
+				type: [String, Number],
+				default: '22'
+			},
+			horiOffset: {
+				type: [String, Number],
+				default: '22'
+			},
+			centerAnim: {
+				type: String,
+				default: 'zoom-lessen'
+			},
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			zoomLessenMulti: {
+				type: Number,
+				default: 1.15
+			},
+			slideMulti: {
+				type: Number,
+				default: 1
+			},
+			negativeTop: {
+				type: Number,
+				default: 0
+			}
+		},
+		mounted() {
+			// #ifdef H5
+			let winHeight = uni.getSystemInfoSync().windowHeight
+			uni.onWindowResize(res => {
+				this.sizeChange = true
+				if (this.type === 'bottom') {
+					this.winReBottom = winHeight - res.size.windowHeight + 'px'
+				} else if (this.type === 'center') {
+					this.winReTop = ((res.size.windowHeight - this.rpxToPx(this.height)) / 2 - this.negativeTop) + 'px'
+				}
+			})
+			// #endif
+		},
+		methods: {
+			close() {
+				this.maskClickClose && this.hide()
+			},
+			show() {
+				this.isShow = true
+				// #ifndef H5
+				this.$nextTick(() => {
+					this.maskIn()
+					this.contentIn()
+					this.wait(this.duration + 1).then(() => {
+						this.$emit('show', {
+							pageScroll: false, 
+							overflow: 'hidden'
+						})
+					})
+				})
+				// #endif
+				// #ifdef H5
+				this.wait(10).then(() => {
+					this.maskIn()
+					this.contentIn()
+					this.wait(this.duration + 1).then(() => {
+						this.$emit('show', {
+							pageScroll: false, 
+							overflow: 'hidden'
+						})
+					})
+				})
+				// #endif
+			},
+			hide() {
+				this.contentOut()
+				this.maskOut()
+				this.wait(this.duration + 1).then(() => {
+					this.isShow = false
+					this.$emit('hide', {
+						pageScroll: true, 
+						overflow: 'scroll'
+					})
+				})
+			},
+			contentIn() {
+				switch (this.type) {
+					case 'center':
+						if (this.centerAnim === 'zoom-lessen') {
+							this.contentOpacity = 1
+							this.contentTransform = 'scale(1)'
+						} else if (this.centerAnim === 'slide-up' || this.centerAnim === 'slide-down') {
+							this.contentOpacity = 1
+							this.contentTransform = 'translateY(0)'
+						} else if (this.centerAnim === 'fade') {
+							this.contentOpacity = 1
+						}
+						break
+					case 'bottom':
+					case 'top':
+						this.contentTransform = 'translateY(0)'
+						break
+					case 'left':
+					case 'right':
+						this.contentTransform = 'translateX(0)'
+						break
+				}
+			},
+			contentOut() {
+				this.contentOpacity = null
+				this.contentTransform = null
+			},
+			maskIn() {
+				this.maskOpacity = 1
+			},
+			maskOut() {
+				this.maskOpacity = 0
+			},
+			rpxToPx(rpx) {
+				return rpx / 750 * this.w
+			},
+			wait(time) {
+				return new Promise(resolve => {
+					setTimeout(() => {
+						resolve()
+					}, time)
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+	@import "./iconfont.css";
+	.wyb-popup-box{
+		position: fixed;
+		transition-timing-function: ease-out;
+		transition-property: opacity, transform;
+	}
+	
+	.wyb-popup-container {
+		position: relative;
+		box-sizing: border-box;
+	}
+	
+	.wyb-popup-slot {
+		width: 100%;
+		height: 100%;
+	}
+	
+	.wyb-popup-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		transition-timing-function: ease;
+		transition-property: opacity, transform;
+	}
+	
+	.wyb-popup-close {
+		position: absolute;
+		fontSize: 40rpx;
+		color: #808080;
+		z-index: 20000;
+	}
+	
+	.wyb-popup-custom-close {
+		left: 0;
+		top: 0;
+		position: absolute;
+	}
+</style>
--- a/pages.json
+++ b/pages.json
@ -1,6 +1,30 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
+		    "path" : "pages/goods/refuel-confirm/refuel-confirm",
+		    "style" :                                                                                    
+		    {
+		      "navigationBarTitleText": "确认订单",
+		      "navigationBarBackgroundColor": "#0083f5",
+		      "backgroundColorTop": "#0083f5",
+		      "navigationBarTextStyle": "white",
+		      "enablePullDownRefresh": false
+		    }
+		    
+		},{
+		    "path" : "pages/goods/refuel-details/refuel-details",
+		    "style" :                                                                                    
+		    {
+				// 加油站
+		        "enablePullDownRefresh": false,
+				"navigationBarTitleText": "",
+				"backgroundTextStyle": "light",
+				"navigationBarBackgroundColor": "#0083f5",
+				"backgroundColorTop": "#0083f5",
+				"navigationBarTextStyle": "white"
+		    }
+		    
+		},{
 		    "path" : "pages/goods/refuel/refuel",
 		    "style" :                                                                                    
 		    {
--- a/pages/goods/refuel-confirm/refuel-confirm.vue
+++ b/pages/goods/refuel-confirm/refuel-confirm.vue
@ -0,0 +1,57 @@
+<template>
+	<view>	
+		<view class="width90 height90 backcorfff">
+			
+		</view>
+		<!-- 底部按钮 -->
+		<view class="footer">
+			<view class="width50 flleft fcoreb5 padleft15 font15">
+				合计: ￥<text class="font24">0.00</text> 
+			</view>
+			<button class="reBtn flright">去支付</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="less">
+	page {
+		background-color: #f8f8f8;
+	}
+	.footer {
+		position: fixed;
+		bottom: 0upx;
+		width: 100%;
+		height: 99upx;
+		color: #FFFFFF;
+		border-top: solid 1upx #eee;
+		background-color: #FFFFFF;
+		z-index: 2;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.reBtn{
+			width: 100px;
+			background-color: #089bf5;
+			color: #FFFFFF;
+			text-align: center;
+			padding: 0;
+			font-size: 16px;
+			border-radius: 22px;
+			height: 40px;
+			line-height: 40px;
+		}
+	}
+</style>
--- a/pages/goods/refuel-details/refuel-details.vue
+++ b/pages/goods/refuel-details/refuel-details.vue
@ -0,0 +1,321 @@
+<template>
+	<view>
+		<image mode="widthFix" class="width100" src="../../../static/img/banner3.png" @click="showPopup"></image>
+		<view class="height100p titlecon backcorfff">
+			<view class="height60 paddtop25 width90">
+				<view class="flleft width85">
+					<view class="width100 text1 font18 fontwig6 fcor333">乌江能源加油站(大一型国企)</view>
+					<view class="width100 font14 fcor666 mart5">贵州省贵阳市什么什么大道65号</view>
+				</view>
+				<view class="flright reimg fotct width15">
+					<image mode="widthFix" src="../../../static/img/dhl.png"></image>
+					<view class="fcor089">1.9km</view>
+				</view>
+			</view>
+			<view class="fcor999 font14 width90">
+				营业时间 : 00:00-23:59 <text class="relab">站内开票</text>
+			</view>
+		</view>
+		<!-- 标价 -->
+		<view class="width90 relbj">
+			<view class="height60">
+				<view class="flleft mart10 bjcss font16 fontwig6">
+					92# <image mode="widthFix" src="../../../static/img/xiala.png"></image>
+				</view>
+				<view class="margle20 font15 fcoreb5 flleft mart20  borRit">
+					<view class="fontspec fotct paddleft10">团购价</view>
+					<view class="fontwig6 font20"><text class="font14">￥</text>6.38</view>
+				</view>
+				<view class="margle20 font15 fcor666 flleft mart20  borRit">
+					<view class="fontspec fotct paddleft10">油站价</view>
+					<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view>
+				</view>
+				<view class="margle20 font15 fcor666 flleft mart20 ">
+					<view class="fontspec fotct paddleft10">国标价</view>
+					<view class="fontwig6 font20"><text class="font14">￥</text>6.88</view>
+				</view>
+			</view>
+		</view>
+		<view class="line10 mart15"></view>
+		<!-- 我要加油 -->
+		<view class="width90 mart15 font16 fcor666">我要加油</view>
+		<view class="width90 relbj mart15">
+			<view class="width50 flleft fotct">
+				<view class="width100 fcor999 font14 mart10">选择油号</view>
+				<view class="width100 mart10">
+					<image mode="widthFix" style="width: 20px;" src="../../../static/img/yhl.png"></image>
+					<text class="font20 fcor333 fontwig6 margle">92#</text>
+					<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
+					</image>
+				</view>
+			</view>
+			<view class="width50 flright fotct">
+				<view class="width100 fcor999 font14 mart10">选择油枪</view>
+				<view class="width100 mart10 ">
+					<image mode="widthFix" style="width: 20px;" src="../../../static/img/yql.png"></image>
+					<text class="font20 fcor333 fontwig6 margle">2号</text>
+					<image mode="widthFix" class="margle" style="width: 10px; " src="../../../static/img/xiala.png">
+					</image>
+				</view>
+			</view>
+		</view>
+		<view class="line10 mart15"></view>
+		<!--加油金额-->
+		<view class="width90 mart15 font16 fcor666">加油金额</view>
+		<view class="width90 height40 mart10" style="border: 1px solid #f2f2f2;">
+			<view class="width8 flleft">￥</view>
+			<input type="number" class="font16 width70 flleft height40" placeholder="请输入金额" v-model="inputPhone" />
+			<view class="width20 height40 flright font14 fcor999 fotct"
+				style="border-left: 1px solid #f2f2f2;line-height: 40px;">
+				约0.01L
+			</view>
+		</view>
+		<view class="list width90">
+			<view class="box" v-for="(amount,index) in amountList" :key="index" @click="select(amount)"
+				:class="{'on':amount.id == inputAmount}">
+				<view class="heTitle fcor333" :class="{'fcor089':amount.id == inputAmount}">{{amount.price}}元</view>
+				<view class="mitext fcor999" :class="{'fcor089':amount.id == inputAmount}">最高优惠￥{{amount.realPrice}}
+				</view>
+			</view>
+		</view>
+		<view class="height60 width100"></view>
+		<!-- 底部按钮 -->
+		<view class="footer">
+			<view class="width50 flleft fcor666 padleft15 font15">
+				合计: ￥<text class="font24">0.00</text> 
+			</view>
+			<button class="reBtn flright">去支付</button>
+		</view>
+		<!-- 底部弹窗 -->
+		<wybPopup ref="popup" type="bottom" height="600" width="500" radius="6" :showCloseIcon="true">
+			<view class="fotct font18 fontwig6 fcor333 mart10 height30">选择油号</view>
+			<view class="font15 fcor666 width90 mart10 height22">汽油油号</view>
+			<view :class="swiper.value ==  detailsId?'activeRefuel':'refuel'" v-for="(swiper,index) in detailList"
+				:key="index" @click="changeValue(swiper)">
+				{{swiper.value}}
+			</view>
+		</wybPopup>
+	</view>
+</template>
+
+<script>
+	import wybPopup from '../../../components/wyb-popup/wyb-popup.vue'
+	export default {
+		components: {
+			wybPopup
+		},
+		data() {
+			return {
+				detailList: [{
+					'title': '不限',
+					'value': '不限'
+				}, {
+					'title': '89#',
+					'value': '89#'
+				}, {
+					'title': '92#',
+					'value': '92#'
+				}, {
+					'title': '95#',
+					'value': '95#'
+				}, {
+					'title': '98#',
+					'value': '98#'
+				}],
+				gunnumber: [{
+					'title': '1号',
+					'value': '1号'
+				}, {
+					'title': '2号',
+					'value': '2号'
+				}, {
+					'title': '3号',
+					'value': '3号'
+				}, {
+					'title': '4号',
+					'value': '4号'
+				}, {
+					'title': '5号',
+					'value': '5号'
+				}],
+				amountList: [{
+						id: '1',
+						price: '200',
+						realPrice: '13.08'
+					},
+					{
+						id: '2',
+						price: '300',
+						realPrice: '23.08'
+					},
+					{
+						id: '3',
+						price: '400',
+						realPrice: '33.08'
+					},
+					{
+						id: '4',
+						price: '500',
+						realPrice: '43.08'
+					}
+				],
+				detailsId: '',
+				inputAmount: ''
+			}
+		},
+		methods: {
+			//显示弹出
+			showPopup() {
+				this.$refs.popup.show();
+			},
+
+			//选择规格
+			changeValue(item) {
+				this.detailsId = item.value;
+				this.$refs.popup.hide();
+			},
+
+			select(amount) {
+				this.inputAmount = amount.id;
+			},
+		}
+	}
+</script>
+
+<style lang="less">
+	.titlecon {
+		border-radius: 10px 10px 0 0;
+		position: relative;
+		top: -30px;
+	}
+
+	.refuel {
+		padding: 6px 15px;
+		border-radius: 5px;
+		background-color: #f6f6f6;
+		color: #666666;
+		margin-right: 10px;
+		margin-left: 15px;
+		margin-top: 15px;
+		display: inline-block;
+		font-size: 16px;
+		width: 10%;
+		text-align: center;
+	}
+
+	.activeRefuel {
+		padding: 6px 15px;
+		border-radius: 5px;
+		border: 1px solid #089bf5;
+		color: #089bf5;
+		margin-right: 10px;
+		margin-left: 15px;
+		margin-top: 15px;
+		display: inline-block;
+		font-size: 16px;
+		width: 10%;
+		text-align: center;
+	}
+
+	.reimg {
+		image {
+			width: 20px;
+		}
+	}
+
+	.relab {
+		padding: 5px;
+		border-radius: 5px;
+		margin-left: 10px;
+		color: #089bf5;
+		background-color: #e5f2fe;
+	}
+
+	.relbj {
+		height: 80px;
+		box-shadow: 0 0 8px 2px #f6f6f6;
+		border-radius: 5px;
+
+	}
+
+	.bjcss {
+		line-height: 60px;
+		margin-left: 10px;
+
+		image {
+			width: 10px;
+			margin-left: 10px;
+		}
+	}
+
+	.borRit {
+		padding-right: 10px;
+		border-right: 1px solid #f4f4f4;
+	}
+
+	.list {
+		display: flow-root;
+		justify-content: space-between;
+		padding: 20upx 0;
+
+		.box {
+			width: 30%;
+			margin-right: 2%;
+			margin-top: 20upx;
+			float: left;
+			height: 120upx;
+			// display: flex;
+			justify-content: center;
+			align-items: center;
+			text-align: center;
+			border-radius: 10upx;
+			box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
+			font-size: 36upx;
+			color: #666666;
+			border: 1px solid #f2f2f2;
+
+			&.on {
+				// background-color: #089bf5;
+				border: 1px solid #089bf5;
+			}
+		}
+
+		.heTitle {
+			margin-top: 15upx;
+			width: 100%;
+			font-size: 15px;
+		}
+
+		.mitext {
+			margin-top: 10upx;
+			width: 100%;
+			font-size: 12px;
+		}
+	}
+	
+	.footer {
+		position: fixed;
+		bottom: 0upx;
+		width: 100%;
+		height: 99upx;
+		color: #FFFFFF;
+		border-top: solid 1upx #eee;
+		background-color: #FFFFFF;
+		z-index: 2;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.reBtn{
+			width: 100px;
+			background-color: #089bf5;
+			color: #FFFFFF;
+			text-align: center;
+			padding: 0;
+			font-size: 16px;
+			border-radius: 22px;
+			height: 40px;
+			line-height: 40px;
+		}
+	}
+	
+</style>
--- a/pages/goods/refuel/refuel.vue
+++ b/pages/goods/refuel/refuel.vue
@ -6,7 +6,7 @@
 		</view>
 		<slFilter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList"
 			@result="result"></slFilter>
-		<view class="width90 height100p backcorfff border-r mart10">
+		<view class="width90 height100p backcorfff border-r mart10" @click="goDetails">
 			<image mode="widthFix" src="../../../static/img/noorder.png" class="recontleft flleft mart10 border-r">
 			</image>
 			<view class="recontright">
@ -88,7 +88,7 @@
 						'defaultSelectedIndex': 0,
 						'detailList': [{
 								'title': '全部品牌',
-								'value': '全部品牌'
+								'value': ''
 							}, {
 								'title': '中石化',
 								'value': '中石化'
@ -115,7 +115,7 @@
 						'defaultSelectedIndex': 0,
 						'detailList': [{
 								'title': '距离最近',
-								'value': '距离最近'
+								'value': ''
 							},
 							{
 								'title': '距离最远',
@ -132,6 +132,9 @@
 						'reflexTitle': true,
 						'defaultSelectedIndex': 0,
 						'detailList': [{
+							'title': '不限',
+							'value': ''
+						}, {
 							'title': '89#',
 							'value': '89#'
 						}, {
@ -154,7 +157,7 @@
 						'defaultSelectedIndex': 0,
 						'detailList': [{
 								'title': '默认排序',
-								'value': '默认排序'
+								'value': ''
 							},
 							{
 								'title': '发布时间',
@ -177,6 +180,12 @@

 		},
 		methods: {
+			//跳转详情
+			goDetails(){
+				uni.navigateTo({
+					url:'../refuel-details/refuel-details'
+				})
+			},
 			result(val) {
 				console.log('filter_result:' + JSON.stringify(val));
 				this.filterResult = JSON.stringify(val, null, 2)
--- a/uni.scss
+++ b/uni.scss
@ -146,7 +146,12 @@ $uni-font-size-paragraph:30upx;

 .margle {
  margin-left: 6px;
-}
+}
+
+.margle20 {
+  margin-left: 20px;
+}
+
 .marglerig{
 	margin-right: 5px;
 }
@ -257,10 +262,11 @@ $uni-font-size-paragraph:30upx;
 .width70 {
  width: 70%;
 }
+
+.width85 {
+  width: 85%;
+}

-.width15{
-    width: 15%;
-}

 .width50 {
  width: 50%;
@ -278,7 +284,20 @@ $uni-font-size-paragraph:30upx;

 .width30 {
  width: 30%;
-}
+}
+
+.width20 {
+  width: 20%;
+}
+
+
+.width15 {
+  width: 15%;
+}
+.width8 {
+  width: 8%;
+}
+

 .width95 {
  width: 95%;
@ -440,6 +459,11 @@ $uni-font-size-paragraph:30upx;
 .paddtop15 {
  padding-top: 15px;
 }
+
+
+.paddtop25 {
+  padding-top: 25px;
+}

 .paddleft10 {
  padding-left: 10px;