cashier_weapp/components/listitem.vue

174 lines
3.7 KiB
Vue

<template>
<view class="content">
<view class="contentone flex-center">
<image class="contentoneimage" src="@/static/ewm.png" mode="aspectFill"></image>
<text class="contentonetext">精选推荐</text>
</view>
<view class="contenttow flex-between">
<view class="contenttowitem" v-for="(item,index) in 6">
<image class="contenttowitemimage" src="@/static/icon_cart.png" mode=""></image>
<view class="contenttowitemtiter">
库迪咖啡|全场饮品任选券|多店美团可用
</view>
<view class="contenttowitemone flex-between">
<view class="contenttowitemone_dingwei flex-start">
<image class="contenttowitemone_dingweiimage"
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/dw.png" mode="aspectFill"></image>
<view class="contenttowitemone_dingweinumer">
2.5km
</view>
</view>
<view class="contenttowitemone_text">
已售192.9万
</view>
</view>
<view class="contenttowitemtow flex-start">
<view class="contenttowitemtow_one">
券后¥7.22
</view>
<view class="contenttowitemtow_tow">
3.2折
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
title: {
type: String,
default: ''
},
opacity: {
type: Boolean,
default: false
},
titleshow: {
type: Boolean,
default: false
},
},
computed: {
HeighT() { //手机类型的尺寸
return this.$store.getters.is_BarHeight
},
},
methods: {
clicknavigateBack() {
uni.navigateBack()
}
}
};
</script>
<style scoped lang="scss">
page {
background: #F9F9F9;
}
.content {
padding: 0 32rpx;
.contentone {
.contentoneimage {
width: 32.12rpx;
height: 36.13rpx;
}
.contentonetext {
margin-left: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 32rpx;
color: #000000;
}
}
.contenttow {
width: 100%;
.contenttowitem {
margin-top: 32rpx;
width: 316rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
.contenttowitemimage {
width: 100%;
height: 220rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0rpx 0rpx;
}
.contenttowitemtiter {
padding: 0 20rpx;
margin-top: 8rpx;
width: 100%;
height: 72rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: #000000;
}
.contenttowitemone {
padding: 0 20rpx;
.contenttowitemone_dingwei {
margin-top: 6rpx;
.contenttowitemone_dingweiimage {
width: 17.9rpx;
height: 21.65rpx;
}
.contenttowitemone_dingweinumer {
margin-left: 12rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 20rpx;
color: #666666;
}
}
.contenttowitemone_text {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 20rpx;
color: #666666;
}
}
.contenttowitemtow {
padding: 0 20rpx 8rpx 20rpx;
.contenttowitemtow_one {
margin-top: 6rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: bold;
font-size: 28rpx;
color: #FF4C11;
}
.contenttowitemtow_tow {
margin-top: 6rpx;
margin-left: 6rpx;
padding: 2rpx 14rpx;
background: #FFFFFF;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #FF4C11;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 20rpx;
color: #FF4C11;
}
}
}
}
}
</style>