From 29e2387756cb4ff4982b3ceea4a7a4180c20c857 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 11:03:48 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E6=88=90]=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

---
 components/lf-price/lf-price.vue |  30 +++++--
 pages.json                       |   6 ++
 pages/my/getRedLine.vue          | 142 +++++++++++++++++++++++++++++++
 pages/my/index.vue               |   2 +-
 4 files changed, 174 insertions(+), 6 deletions(-)
 create mode 100644 pages/my/getRedLine.vue

diff --git a/components/lf-price/lf-price.vue b/components/lf-price/lf-price.vue
index 43050c3..5158d9f 100644
--- a/components/lf-price/lf-price.vue
+++ b/components/lf-price/lf-price.vue
@@ -1,11 +1,11 @@
 <template>
-	<view>
+	<view :style="{'--color': color, 'display': 'inline-block'}">
 		<block v-if="isPoint">
-			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text>
-			<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
+			<text class="price-one text-price">{{ showPrice(1) }}</text>
+			<text class="price-two">.{{ showPrice(2) }}</text>
 		</block>
 		<block v-else>
-			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text>
+			<text class="price-one text-price">{{ showPrice() }}</text>
 		</block>
 	</view>
 </template>
@@ -16,6 +16,10 @@
 			price: {
 				type: [Number, String],
 				default: ''
+			},
+			color: {
+				type: String,
+				default: '#FF0000'
 			}
 		},
 		computed: {
@@ -42,5 +46,21 @@
 </script>
 
 <style lang="scss" scoped="scoped">
-	
+	.price-one{
+		font-size: 32rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
+	.price-two{
+		font-size: 24rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
+	.text-price::before {
+		content: "¥";
+		font-size: 24rpx!important;
+		margin-right: 4rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
 </style>
diff --git a/pages.json b/pages.json
index 12c513a..75b6102 100644
--- a/pages.json
+++ b/pages.json
@@ -270,6 +270,12 @@
 			"style": {
 				"navigationBarTitleText": "形象照"
 			}
+		},
+		{
+			"path": "pages/my/getRedLine",
+			"style": {
+				"navigationBarTitleText": "获取红线"
+			}
 		}
 	],
 	"globalStyle": {
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 @@
+<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>
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 80a02a0..369d741 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -51,7 +51,7 @@
 				</view>
 			</view> -->
 		</view>
-		<view class="adv">
+		<view class="adv" @click="$url('/pages/my/getRedLine')">
 			<view>
 				<!-- <image src="../../static/logo.png" mode="widthFix" class="adv-pic"></image> -->
 				<view class="logo-my">