high-mini/pages/goods/store-list/store-details.vue

<template>
	<view>
		<view class="width90 mart20" style="height: 80px;">
			<view class="store-des flleft">
				立即<br>前往
			</view>
			<view class="store-cont">
				<view class="store-title flleft width70">
					<view class="font20 fcor333 fontwig6 width100">重庆好利来大坪店</view>
					<view class="font14 fcor999 width100 text2 mart5">长江二路2号(中国石化肖家湾加油站)</view>
				</view>
				<view class="store-map flright width30 fotrt">
					<!-- 地图logo -->
					<image src="../../../static/img/goods/oil.png"></image>
					<view class="mart5 fcor999 font13">2.28KM</view>
				</view>
			</view>
		</view>
		<view class="line1 mart15 marb40"></view>

		<!-- //暂未购买卡券 -->
		<!-- <view class="store-no width80 fontwig6 font20 fcor999 fotct">
			亲、你还没有买券哦~
		</view> -->

		<view class="width90 store-list mart10">
			<view class="width100" style="height: 72px;">
				<view class="flleft width70">
					<view class="width90 fcor333 font15 mart5">中石化150元加油码</view>
					<view class="width90 fcor333 font13 mart5">验证码:79SF97FSDSFSFS08</view>
					<view class="width90 fcorred font14 mart5">过期时间:2021/12/21 20:00:00</view>
				</view>
				<view class="flleft width30 mart10 fotct">
					<!-- 二维码 -->
					<image src="../../../static/img/goods/oil.png"></image>
				</view>
			</view>
			<view class="width90">
				<button class="store-jdes flleft mart5" @click="jumpCoupondes">查看详情</button>
				<view class="store-ims fcorred font13 fotrt paddtop13">加油站可直接扫码或者查看详情</view>
			</view>
		</view>
		
		<view class="width90 store-list mart10">
			<view class="width100" style="height: 72px;">
				<view class="flleft width70">
					<view class="width90 fcor333 font15 mart5">中石化150元加油码</view>
					<view class="width90 fcor333 font13 mart5">验证码:79SF97FSDSFSFS08</view>
					<view class="width90 fcorred font14 mart5">过期时间:2021/12/21 20:00:00</view>
				</view>
				<view class="flleft width30 mart10 fotct">
					<!-- 二维码 -->
					<image src="../../../static/img/goods/oil.png"></image>
				</view>
			</view>
			<view class="width90">
				<button class="store-jdes flleft mart5" @click="jumpCoupondes">查看详情</button>
				<view class="store-ims fcorred font13 fotrt paddtop13">加油站可直接扫码或者查看详情</view>
			</view>
		</view>
		
		<view class="width90 store-list mart10">
			<view class="width100" style="height: 72px;">
				<view class="flleft width70">
					<view class="width90 fcor333 font15 mart5">中石化150元加油码</view>
					<view class="width90 fcor333 font13 mart5">验证码:79SF97FSDSFSFS08</view>
					<view class="width90 fcorred font14 mart5">过期时间:2021/12/21 20:00:00</view>
				</view>
				<view class="flleft width30 mart10 fotct">
					<!-- 二维码 -->
					<image src="../../../static/img/goods/oil.png"></image>
				</view>
			</view>
			<view class="width90">
				<button class="store-jdes flleft mart5" @click="jumpCoupondes">查看详情</button>
				<view class="store-ims fcorred font13 fotrt paddtop13">加油站可直接扫码或者查看详情</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 跳转卡券详情
			jumpCoupondes(){
				uni.navigateTo({
					url:'../coupon-details/coupon-details'
				})
			}
		}
	}
</script>

<style lang="scss">
	.store-des {
		width: 80px;
		    height: 80px;
		    text-align: center;
		    color: white;
		    font-size: 28px;
		    border-radius: 10px;
		    background-color: red;
	}

	.store-cont {
		margin-left: 90px;
	}

	.store-map image {
		width: 45px;
		height: 45px;
	}

	.store-no {
		height: 80px;
		line-height: 80px;
		border: 1px solid #b2b2b2;
		border-radius: 10px;
	}

	.store-list {
		height: 120px;
		border: 1px solid #b2b2b2;
		border-radius: 5px;
	}

	.store-list image {
		width: 60px;
		height: 60px;
	}

	.store-jdes {
		width: 70px;
		height: 30px;
		line-height: 30px;
		background-color: #eb5823;
		color: #FFFFFF;
		font-size: 12px;
		padding: 0px;
	}

	.store-ims {
		margin-left: 75px;
	}
</style>