You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
high-mini/pages/goods/store-list/store-details.vue

152 lines
4.2 KiB

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