Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成领券中心页面UI

master
邓平艺 4 years ago
parent
3c1227f712
commit
df26efd601
3 changed files with 233 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/index-nav/index-nav.vue
  2. 7
      pages.json
  3. 225
      pages/index/collectCoupons/collectCoupons.vue

2
components/index-nav/index-nav.vue
View File

@ -58,7 +58,7 @@ export default {
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '餐饮配套'
},{
link: '',
link: '/pages/index/collectCoupons/collectCoupons',
image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
name: '领券中心'
},{

7
pages.json
View File

@ -886,6 +886,13 @@
"navigationBarTitleText": "餐饮配套",
"navigationStyle": "custom"
}
},
{
"path" : "pages/index/collectCoupons/collectCoupons",
"style" : {
"navigationBarTitleText": "领券中心",
"navigationStyle": "custom"
}
}
],
"globalStyle": {

225
pages/index/collectCoupons/collectCoupons.vue
View File

@ -0,0 +1,225 @@
<template>
<view>
<lf-nav :showIcon="true" :spreadOut="false" bgColor="transparent"></lf-nav>
<view class="head">
<image class="img" mode="aspectFill" src="https://picsum.photos/seed/picsum/200/300"></image>
<view class="suspension" hover-class="lf-opacity" @click="$url('/pages/coupon/index/index')">我的优惠券</view>
</view>
<view class="coupon-wrap">
<view class="coupon-box" v-for="i of 3">
<view class="coupon-card lf-m-b-30">
<view class="coupon-circle-top">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-circle-bottom">
<view class="coupon-circle1"></view>
</view>
<view class="coupon-radius">
<view class="coupon-left">
<view class="lf-color-white">
<text class="lf-font-24">￥</text>
<text class="lf-font-70 lf-color-white lf-font-bold">200</text>
</view>
</view>
<view class="coupon-right">
<view class="lf-font-32 lf-font-bold lf-color-white">满1200减200</view>
<view class="lf-font-24 lf-color-white">有效期2021.09.09-2021-09.15</view>
</view>
</view>
</view>
<view class="coupon-receive" @click="receive">立即领取</view>
<block v-if="i == 2">
<view class="coupon-opacity"></view>
<view class="coupon-end">
<view>抢光了</view>
</view>
</block>
</view>
</view>
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
</view>
</template>
<script>
export default {
data(){
return {
}
},
onLoad(){
},
methods: {
receive(){
this.$msg('领取成功')
}
}
}
</script>
<style lang="scss" scoped="scoped">
.head{
height: 376rpx;
width: 750rpx;
position: relative;
.img{
width: 100%;
height: 100%;
}
.suspension{
position: absolute;
bottom: 30rpx;
right: 0;
width: 165rpx;
height: 54rpx;
background: #15716E;
border-radius: 100rpx 0rpx 0rpx 100rpx;
border: 2rpx solid #FFFFFF;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
.coupon-wrap {
display: flex;
justify-content: center;
margin-top: 30rpx;
flex-direction: column;
align-content: center;
align-items: center;
}
.coupon-box{
display: flex;
align-items: center;
position: relative;
}
.coupon-card {
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 637rpx;
// display: flex;
height: 171rpx;
// opacity: 0.59;
// border: 1rpx solid #FFFFFF;
background: #15716E;
border-radius: 20rpx;
z-index: 3;
}
.coupon-radius {
width: 627rpx;
display: flex;
height: 161rpx;
border: 1rpx dashed #ccc;
// background: #15716E;
border-radius: 20rpx;
}
.coupon-circle1 {
width: 40rpx;
height: 40rpx;
background-color: white;
border-radius: 50%;
}
.coupon-circle-top {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
top: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-circle-bottom {
width: 50rpx;
height: 50rpx;
border-radius: 50%;
// background-color: red;
position: absolute;
border: 1px dashed #ccc;
left: 190rpx;
bottom: -20rpx;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
}
.coupon-right {
text-align: left;
justify-content: center;
align-items: flex-start;
display: flex;
flex-direction: column;
margin-left: 84rpx;
}
.coupon-left {
margin-left: 40rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.coupon-receive{
width: 45rpx;
height: 126rpx;
font-size: 24rpx;
background: #22A19F;
border-radius: 6rpx;
line-height: 1.2;
color: #FFFFFF;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
transform: translate(-16rpx, -9rpx) rotate(10deg);
transform-origin: bottom;
position: relative;
z-index: 1;
}
.coupon-opacity{
width: 102%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255,255,255,0.5);
z-index: 5;
}
.coupon-end{
position: absolute;
z-index: 7;
width: 136rpx;
height: 136rpx;
background-color: #15716E;
border-radius: 50%;
top: calc(50% - 81rpx);
left: calc(50% - 68rpx);
display: flex;
justify-content: center;
align-items: center;
&>view{
width: 126rpx;
height: 126rpx;
border: 2rpx dashed #FFFFFF;
border-radius: 50%;
font-size: 32rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-38deg);
}
}
</style>
Write Preview
Loading…
Cancel
Save