From f4dce54528ff069ab076296cf087d098c1328bef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Wed, 25 Aug 2021 17:40:29 +0800
Subject: [PATCH] =?UTF-8?q?[=E4=BF=AE=E6=94=B9]=20=E8=8E=B7=E5=8F=96?=
=?UTF-8?q?=E7=BA=A2=E7=BA=BF=E9=A1=B5=E9=9D=A2UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../my/getRedLine - 第一版卡片形式.vue | 142 ++++++++++++++++
pages/my/getRedLine.vue | 155 +++++++-----------
pages/my/index.vue | 3 +-
3 files changed, 204 insertions(+), 96 deletions(-)
create mode 100644 pages/my/getRedLine - 第一版卡片形式.vue
diff --git a/pages/my/getRedLine - 第一版卡片形式.vue b/pages/my/getRedLine - 第一版卡片形式.vue
new file mode 100644
index 0000000..c32f4ca
--- /dev/null
+++ b/pages/my/getRedLine - 第一版卡片形式.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
+ 有效3天
+
+
+
+ 套餐一：实用
+
+ 套餐一：实实用实用实用实用实用实用用
+ 6.5折
+
+
+ 红线数：
+ 1根
+
+
+
+ ¥30.00
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/pages/my/getRedLine.vue b/pages/my/getRedLine.vue
index c32f4ca..f57eda2 100644
--- a/pages/my/getRedLine.vue
+++ b/pages/my/getRedLine.vue
@@ -1,28 +1,24 @@
-
-
-
- 有效3天
+
+
+ 套餐一：实实用用
+ 6.5折
-
+
+ 红线数：
+ 1根
+
+
+ 有效时间：
+ 3天
+
+
- 套餐一：实用
-
- 套餐一：实实用实用实用实用实用实用用
- 6.5折
-
-
- 红线数：
- 1根
-
-
¥30.00
-
-
-
+ 立即购买
@@ -52,91 +48,60 @@
height: max-content;
padding: 30rpx 32rpx;
box-sizing: border-box;
- display: flex;
- flex-wrap: wrap;
.card{
- width: 333rpx;
+ width: 686rpx;
height: max-content;
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;
- 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;
}
}
diff --git a/pages/my/index.vue b/pages/my/index.vue
index a055924..a221e27 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -104,9 +104,10 @@
showCancel: false,
cancelText: '我知道了',
confirmColor: '#E21196',
- success: function (res) {
+ success: res => {
if (res.confirm) {
console.log('用户点击确定');
+ this.$url('/pages/my/getRedLine');
}
}
});