wx/pages/index/components/coupon.vue
2024-06-15 21:13:11 +08:00

75 lines
1.6 KiB
Vue

<template>
<view class="box">
<view class="img">
<img src="https://i.postimg.cc/Vkf063Xd/image.jpg" style="width: 100%; border-radius: 1rem 0 0 1rem" />
<view class="img-box">
<view class="img-box-one">测试</view>
<view class="img-box-tow">满80.00元可用</view>
<view class="img-box-three">有效期2024.05.29-2024.06.30</view>
</view>
<view class="img-button">
<view class="img-button-one">50.00</view>
<view class="img-button-tow">领取</view>
</view>
</view>
</view>
</template>
<script setup></script>
<style lang="less" scoped>
.img {
width: 92%;
margin: 0 auto;
display: flow-root;
margin-top: 1rem;
position: relative;
.img-box {
display: flex;
flex-direction: column;
align-items: center;
width: 15rem;
position: absolute;
top: 0;
.img-box-one {
font-size: 1.2rem;
color: #fff;
margin-top: 0.8rem;
}
.img-box-tow {
background-color: #fff;
margin-top: 0.2rem;
padding: 0.2rem 0.8rem;
border-radius: 0.5rem;
color: red;
}
.img-box-three {
margin-top: 0.8rem;
font-size: 0.9rem;
color: #fff;
}
}
.img-button {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
top: 0;
right: 5%;
.img-button-one {
margin-top: 1rem;
font-size: 1.5rem;
color: #fff;
}
.img-button-tow {
margin-top: 1.2rem;
background-color: #ffdecc;
padding: 0.2rem 1rem;
font-size: 1.2rem;
color: red;
border-radius: 1rem;
}
}
}
</style>