77 lines
2.3 KiB
Vue
77 lines
2.3 KiB
Vue
<!-- 优惠券卡片 -->
|
||
<template>
|
||
<view class="jy-coupon-card bfff mtb20 br20">
|
||
<view class="jy-coupon-card-top df jcsb aic">
|
||
<!-- 左边 名称 有效期 -->
|
||
<view class="jy-coupon-card-top-left">
|
||
<view class="jy-coupon-card-top-left-name b">123</view>
|
||
<view class="jy-coupon-card-top-left-time c999 f24">有效期至：2024.08.06 - 2024.08.06</view>
|
||
</view>
|
||
<!-- 右边 价格 使用类型-无门槛 -->
|
||
<view class="jy-coupon-card-top-right">
|
||
<view class="jy-coupon-card-top-right-price df">
|
||
<text class="f44 cFF9B27">￥</text>
|
||
<text class="f72 cFF9B27">10</text>
|
||
</view>
|
||
<view class="jy-coupon-card-top-right-type f28 cFF9B27">无门槛</view>
|
||
</view>
|
||
</view>
|
||
<!--省略号分割线 -->
|
||
<view class="dividing-line"></view>
|
||
<!-- 底部 -->
|
||
<view class="jy-coupon-card-bottom df jcsb aic p25">
|
||
<!-- 左边描述 -->
|
||
<view class="jy-coupon-card-bottom-left df jcsb aic" @click="couponDetail = !couponDetail">
|
||
<view :class="!couponDetail && 'thd'">优惠卷介绍优惠卷介绍优惠卷介绍优惠卷...</view>
|
||
<view class="jy-coupon-card-bottom-left-arrow" :style="couponDetail && cStyle"><uni-icons
|
||
type="down"></uni-icons></view>
|
||
|
||
</view>
|
||
<!-- 右边使用按钮 -->
|
||
<view class="jy-coupon-card-bottom-right" @click="useCoupon(coupon)">去使用</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
const couponDetail = ref(false)
|
||
const cStyle = {
|
||
'transform': 'rotate(-180deg)'
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.jy-coupon-card-top {
|
||
padding: 24rpx;
|
||
}
|
||
|
||
// ...分割线
|
||
.dividing-line {
|
||
border-bottom: 2rpx dashed #ccc;
|
||
// margin: 20px 0;
|
||
}
|
||
|
||
.jy-coupon-card-bottom-left {
|
||
width: 470rpx;
|
||
height: 40rpx;
|
||
transition: .8s;
|
||
|
||
&-arrow {
|
||
transition: .8s;
|
||
}
|
||
}
|
||
|
||
.jy-coupon-card-bottom-right {
|
||
padding: 8rpx 22rpx;
|
||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
||
border-radius: 10rpx;
|
||
width: 100rpx;
|
||
color: #fff;
|
||
}
|
||
</style> |