You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.1 KiB
130 lines
3.1 KiB
<template>
|
|
<view class="lf-w-100 lf-h-100">
|
|
<view class="pure_top">
|
|
<view class="tips-top">
|
|
<view class="lf-font-60" style="color: #E21196;">10</view>
|
|
<view class="lf-font-28 lf-color-555">可用桃花</view>
|
|
</view>
|
|
</view>
|
|
<view class="change-tag">
|
|
<view class="lf-p-b-20">
|
|
<view class="change-top lf-flex-column welfare-top">
|
|
<view>
|
|
<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
|
|
</view>
|
|
<view class="lf-color-333 lf-font-24">1条红线</view>
|
|
<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
|
|
</view>
|
|
<view class="change-bottom">兑换</view>
|
|
</view>
|
|
<view class="lf-p-b-20">
|
|
<view class="change-top lf-flex-column welfare-top">
|
|
<view>
|
|
<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
|
|
</view>
|
|
<view class="lf-color-333 lf-font-24">1条红线</view>
|
|
<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
|
|
</view>
|
|
<view class="change-bottom">兑换</view>
|
|
</view>
|
|
<view class="lf-p-b-20">
|
|
<view class="change-top lf-flex-column welfare-top">
|
|
<view>
|
|
<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
|
|
</view>
|
|
<view class="lf-color-333 lf-font-24">1条红线</view>
|
|
<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
|
|
</view>
|
|
<view class="change-bottom">兑换</view>
|
|
</view>
|
|
<view class="lf-p-b-20">
|
|
<view class="change-top lf-flex-column welfare-top">
|
|
<view>
|
|
<text class="lf-iconfont icon-hua" style="color: #FD898E;font-size: 84rpx;"></text>
|
|
</view>
|
|
<view class="lf-color-333 lf-font-24">1条红线</view>
|
|
<view class="lf-font-28" style="color: #E21196;">2900桃花</view>
|
|
</view>
|
|
<view class="change-bottom">兑换</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.welfare-top {
|
|
justify-content: space-evenly;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
.tips-top {
|
|
width: 686rpx;
|
|
height: 252rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
top: 60rpx;
|
|
padding: 50rpx 40rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.change-tag {
|
|
width: 704rpx;
|
|
margin: 316rpx auto;
|
|
height: 338rpx;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.change-top {
|
|
width: 333rpx;
|
|
height: 250rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 10rpx 10rpx 0 0;
|
|
}
|
|
|
|
.change-bottom {
|
|
width: 333rpx;
|
|
height: 88rpx;
|
|
background: #E21196;
|
|
border-radius: 0 0 10rpx 10rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: white;
|
|
}
|
|
|
|
.pure_top {
|
|
width: 100%;
|
|
height: 210rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.pure_top::after {
|
|
content: '';
|
|
width: 140%;
|
|
height: 210rpx;
|
|
position: absolute;
|
|
left: -20%;
|
|
top: 0;
|
|
z-index: -1;
|
|
border-radius: 0 0 55% 55%;
|
|
background: linear-gradient(180deg, #FE3EA5 0%, #FE7749 100%);
|
|
}
|
|
</style>
|