Leadfyy.co
/
blindDate
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[修改] 获取红线页面UI

master
邓平艺 5 years ago
parent
c8ff8e879a
commit
f4dce54528
3 changed files with 204 additions and 96 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 142
      pages/my/getRedLine - 第一版卡片形式.vue
  2. 155
      pages/my/getRedLine.vue
  3. 3
      pages/my/index.vue

142
pages/my/getRedLine - 第一版卡片形式.vue
View File

@ -0,0 +1,142 @@
<template>
<view class="content">
<view class="card" v-for="item in 4" :key="item">
<view class="cover">
<lf-image src="https://picsum.photos/200"></lf-image>
<view class="tips">有效3天</view>
</view>
<view class="info">
<view>
<text class="title" v-if="item == 0">套餐一：实用</text>
<!-- <text class="title">套餐一：实用</text> -->
<text class="title" v-else>套餐一：实实用实用实用实用实用实用用</text>
<text class="label">6.5折</text>
</view>
<view class="lf-m-t-12 lf-font-24">
<text class="lf-color-777">红线数：</text>
<text>1根</text>
</view>
<view class="lf-m-t-16">
<lf-price :price="30.12" color="#E21196"></lf-price>
<text class="original-price">¥30.00</text>
</view>
<view class="float-btn" hover-class="lf-opacity">
<button>买</button>
</view>
</view>
</view>
</view>
</template>
<script>
import lfPrice from '@/components/lf-price/lf-price.vue'
export default {
components: { lfPrice },
data(){
return {
}
},
onLoad(){
// 点击买字按钮直接调取支付
},
methods: {
}
}
</script>
<style lang="scss" scoped="scoped">
.content{
width: 750rpx;
height: max-content;
padding: 30rpx 32rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.card{
width: 333rpx;
height: max-content;
background-color: #FFFFFF;
box-shadow: 0rpx -2rpx 20rpx 2rpx rgba(0, 0, 0, 0.07);
border-radius: 10rpx;
overflow: hidden;
margin-right: 20rpx;
&:nth-child(2n){
margin-right: 0;
}
&:nth-child(n+3){
margin-top: 20rpx;
}
.cover{
width: 100%;
height: 260rpx;
position: relative;
.tips{
position: absolute;
left: 0;
top: 0;
width: 111rpx;
height: 33rpx;
background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
border-radius: 10rpx 0rpx 5rpx 0rpx;
color: #FFFFFF;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
.info{
padding: 15rpx;
box-sizing: border-box;
position: relative;
.title{
font-size: 28rpx;
font-weight: bold;
color: #222222;
margin-right: 15rpx;
}
.label{
display: inline-block;
width: 84rpx;
height: 33rpx;
border-radius: 3rpx;
border: 2rpx solid #E21196;
font-size: 24rpx;
color: #E21196;
text-align: center;
line-height: 29rpx;
}
.original-price{
margin-left: 15rpx;
color: #777777;
font-size: 24rpx;
text-decoration: line-through;
}
.float-btn{
position: absolute;
width: 45rpx;
height: 45rpx;
padding: 15rpx;
right: 0;
bottom: 10rpx;
box-sizing: content-box;
button{
width: 100%;
height: 100%;
border-radius: 50%;
background: #E21196;
margin: 0;
padding: 0;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
}
</style>

155
pages/my/getRedLine.vue
View File

@ -1,28 +1,24 @@
<template> <template>
<view class="content"> <view class="content">
<view class="card" v-for="item in 4" :key="item">
<view class="cover">
<lf-image src="https://picsum.photos/200"></lf-image>
<view class="tips">有效3天</view>
<view class="card" :class="'bg-color'+ (item+1)" v-for="item in 3" :key="item">
<view>
<text class="title">套餐一：实实用用</text>
<text class="label">6.5折</text>
</view> </view>
<view class="info">
<view class="lf-m-t-12 lf-font-24 lf-row-between">
<view class="lf-color-777">红线数：</view>
<view class="lf-color-222">1根</view>
</view>
<view class="lf-m-t-12 lf-font-24 lf-row-between">
<view class="lf-color-777">有效时间：</view>
<view class="lf-color-222">3天</view>
</view>
<view class="lf-m-t-16 lf-row-between">
<view> <view>
<text class="title" v-if="item == 0">套餐一：实用</text>
<!-- <text class="title">套餐一：实用</text> -->
<text class="title" v-else>套餐一：实实用实用实用实用实用实用用</text>
<text class="label">6.5折</text>
</view>
<view class="lf-m-t-12 lf-font-24">
<text class="lf-color-777">红线数：</text>
<text>1根</text>
</view>
<view class="lf-m-t-16">
<lf-price :price="30.12" color="#E21196"></lf-price> <lf-price :price="30.12" color="#E21196"></lf-price>
<text class="original-price">¥30.00</text> <text class="original-price">¥30.00</text>
</view> </view>
<view class="float-btn" hover-class="lf-opacity">
<button>买</button>
</view>
<view class="btn" hover-class="lf-opacity">立即购买</view>
</view> </view>
</view> </view>
</view> </view>
@ -52,91 +48,60 @@
height: max-content; height: max-content;
padding: 30rpx 32rpx; padding: 30rpx 32rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.card{ .card{
width: 333rpx;
width: 686rpx;
height: max-content; height: max-content;
background-color: #FFFFFF; background-color: #FFFFFF;
box-shadow: 0rpx -2rpx 20rpx 2rpx rgba(0, 0, 0, 0.07);
box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.07);
border-radius: 10rpx; border-radius: 10rpx;
overflow: hidden;
margin-right: 20rpx;
&:nth-child(2n){
margin-right: 0;
padding: 30rpx;
box-sizing: border-box;
&:nth-child(n+2){
margin-top: 30rpx;
} }
&:nth-child(n+3){
margin-top: 20rpx;
.title{
font-size: 28rpx;
font-weight: bold;
color: #222222;
margin-right: 15rpx;
} }
.cover{
width: 100%;
height: 260rpx;
position: relative;
.tips{
position: absolute;
left: 0;
top: 0;
width: 111rpx;
height: 33rpx;
background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
border-radius: 10rpx 0rpx 5rpx 0rpx;
color: #FFFFFF;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
.label{
display: inline-block;
width: 84rpx;
height: 33rpx;
border-radius: 3rpx;
border: 2rpx solid #E21196;
font-size: 24rpx;
color: #E21196;
text-align: center;
line-height: 29rpx;
} }
.info{
padding: 15rpx;
box-sizing: border-box;
position: relative;
.title{
font-size: 28rpx;
font-weight: bold;
color: #222222;
margin-right: 15rpx;
}
.label{
display: inline-block;
width: 84rpx;
height: 33rpx;
border-radius: 3rpx;
border: 2rpx solid #E21196;
font-size: 24rpx;
color: #E21196;
text-align: center;
line-height: 29rpx;
}
.original-price{
margin-left: 15rpx;
color: #777777;
font-size: 24rpx;
text-decoration: line-through;
}
.float-btn{
position: absolute;
width: 45rpx;
height: 45rpx;
padding: 15rpx;
right: 0;
bottom: 10rpx;
box-sizing: content-box;
button{
width: 100%;
height: 100%;
border-radius: 50%;
background: #E21196;
margin: 0;
padding: 0;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
.original-price{
margin-left: 15rpx;
color: #777777;
font-size: 24rpx;
text-decoration: line-through;
} }
.btn{
width: 130rpx;
height: 43rpx;
background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
border-radius: 22rpx;
font-size: 24rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
}
}
.bg-color1{
background-color: #FFF7FC;
}
.bg-color2{
background-color: #FFF4F2;
}
.bg-color3{
background-color: #F2FAFF;
} }
} }
</style> </style>

3
pages/my/index.vue
View File

@ -104,9 +104,10 @@
showCancel: false, showCancel: false,
cancelText: '我知道了', cancelText: '我知道了',
confirmColor: '#E21196', confirmColor: '#E21196',
success: function (res) {
success: res => {
if (res.confirm) { if (res.confirm) {
console.log('用户点击确定'); console.log('用户点击确定');
this.$url('/pages/my/getRedLine');
} }
} }
}); });

Write Preview
Loading…
Cancel
Save