51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup>
|
||
// 优惠券
|
||
</script>
|
||
|
||
<template>
|
||
<view class="app">
|
||
<view class="list plr20">
|
||
<view class="item mtb20 bfff br20" v-for="(item,index) in 10" :key="index">
|
||
<view class="main rows ptb25 plr25">
|
||
<!-- 左边 名称 有效期 -->
|
||
<view class="col">
|
||
<view class="name c333 f32">平台限时活动三花聚顶优惠券</view>
|
||
<view class="time mt15 c999 f24">有效期至：2024.08.06</view>
|
||
</view>
|
||
|
||
<view class="info tac">
|
||
<view class="price df aife">
|
||
<text class="f40 cFF9B27">￥</text>
|
||
<text class="f72 cFF9B27">10</text>
|
||
</view>
|
||
<view class="type f28 cFF9B27">无门槛</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!--省略号分割线 -->
|
||
<view class="dividing-line"></view>
|
||
|
||
<!-- 底部 -->
|
||
<view class="bottom rows ptb25 plr25">
|
||
<!-- 左边描述 -->
|
||
<view class="info oh f1 rows">
|
||
<view :class="'thd'">优惠卷介绍优惠卷介绍优惠卷介绍优惠卷...</view>
|
||
<uni-icons type="down" color="#ccc" />
|
||
</view>
|
||
|
||
<!-- 右边使用按钮 -->
|
||
<view class="btn primary fs0 plr30 ml30" @click="useCoupon(coupon)">去使用</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fill" style="height: 30rpx;"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
// ...分割线
|
||
.dividing-line {
|
||
border-bottom: 2rpx dashed #ddd;
|
||
}
|
||
</style> |