75 lines
1.6 KiB
Vue
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>
|